@hed-hog/core 0.0.304 → 0.0.306

package/hedhog/frontend/app/dashboard/[slug]/dashboard-content.tsx.ejs

@@ -39,6 +39,13 @@ interface DashboardContentProps {
   dashboardSlug: string;
   showHeader?: boolean;
   headerActionsTargetId?: string;
+  externalHeaderActions?: boolean;
+  requestSaveSignal?: number;
+  onRuntimeActionsStateChange?: (state: {
+    hasChanges: boolean;
+    isSaving: boolean;
+    isAutosavePending: boolean;
+  }) => void;
   openWidgetPickerSignal?: number;
   onOpenWidgetPickerHandled?: () => void;
 }
@@ -154,6 +161,9 @@ export const DashboardContent = ({
   dashboardSlug,
   showHeader = true,
   headerActionsTargetId,
+  externalHeaderActions = false,
+  requestSaveSignal,
+  onRuntimeActionsStateChange,
   openWidgetPickerSignal,
   onOpenWidgetPickerHandled,
 }: DashboardContentProps) => {
@@ -180,6 +190,7 @@ export const DashboardContent = ({
     useState<HTMLElement | null>(null);
   const lastSavedLayoutSignatureRef = useRef('[]');
   const latestLayoutRef = useRef(layout);
+  const lastHandledSaveSignalRef = useRef<number | undefined>(undefined);
 
   const debouncedComponentsSearch = useDebounce(componentsSearchQuery, 400);
   const debouncedLayout = useDebounce(layout, LAYOUT_AUTOSAVE_DELAY);
@@ -316,6 +327,14 @@ export const DashboardContent = ({
   const isAutosavePending =
     hasChanges && !isSaving && layoutSignature !== debouncedLayoutSignature;
 
+  useEffect(() => {
+    onRuntimeActionsStateChange?.({
+      hasChanges,
+      isSaving,
+      isAutosavePending,
+    });
+  }, [hasChanges, isAutosavePending, isSaving, onRuntimeActionsStateChange]);
+
   useEffect(() => {
     if (!isAutosavePending && !isSaving) {
       stopProgress(150);
@@ -394,6 +413,22 @@ export const DashboardContent = ({
     [dashboardSlug, isSaving, layout, request]
   );
 
+  useEffect(() => {
+    if (!requestSaveSignal) {
+      return;
+    }
+
+    if (lastHandledSaveSignalRef.current === requestSaveSignal) {
+      return;
+    }
+
+    lastHandledSaveSignalRef.current = requestSaveSignal;
+
+    if (!isSaving && hasChanges) {
+      void handleSaveLayout();
+    }
+  }, [handleSaveLayout, hasChanges, isSaving, requestSaveSignal]);
+
   useEffect(() => {
     if (!hasChanges || isSaving) {
       return;
@@ -646,7 +681,8 @@ export const DashboardContent = ({
     </>
   );
 
-  const hasExternalActionTarget = !showHeader && Boolean(headerActionsTarget);
+  const hasExternalActionTarget =
+    !externalHeaderActions && !showHeader && Boolean(headerActionsTarget);
 
   return (
     <>
@@ -678,7 +714,7 @@ export const DashboardContent = ({
             </div>
           </div>
         </header>
-      ) : !hasExternalActionTarget ? (
+      ) : !externalHeaderActions && !hasExternalActionTarget ? (
         <div className="flex w-full items-center justify-end gap-2 px-4 pt-2">
           {dashboardActions}
         </div>
@@ -686,6 +722,35 @@ export const DashboardContent = ({
       {hasExternalActionTarget && headerActionsTarget
         ? createPortal(dashboardActions, headerActionsTarget)
         : null}
+      {externalHeaderActions ? (
+        <AddWidgetSelectorDialog
+          availableComponents={availableComponents}
+          totalItems={totalAvailableComponents}
+          currentPage={availableComponentsResponse?.page ?? componentsPage}
+          pageSize={availableComponentsResponse?.pageSize ?? componentsPageSize}
+          isLoading={isLoadingComponents}
+          searchQuery={componentsSearchQuery}
+          onSearchQueryChange={(value) => {
+            setComponentsSearchQuery(value);
+            setComponentsPage(1);
+          }}
+          moduleFilter={componentsModuleFilter}
+          modules={availableComponentModules}
+          onModuleFilterChange={(value) => {
+            setComponentsModuleFilter(value);
+            setComponentsPage(1);
+          }}
+          onPageChange={setComponentsPage}
+          onPageSizeChange={(nextPageSize) => {
+            setComponentsPageSize(nextPageSize);
+            setComponentsPage(1);
+          }}
+          onAdd={handleAddWidget}
+          hideTrigger
+          openSignal={openWidgetPickerSignal}
+          onOpenSignalHandled={onOpenWidgetPickerHandled}
+        />
+      ) : null}
       <div className="flex flex-1 flex-col gap-4 overflow-auto pt-0">
         {widgets.length > 0 ? (
           <div className="min-h-105 sm:min-h-130 lg:min-h-150">

package/hedhog/frontend/app/dashboard/components/add-widget-selector-dialog.tsx.ejs

@@ -64,6 +64,7 @@ interface AddWidgetSelectorDialogProps {
   onAdd: (slugs: string[]) => Promise<void> | void;
   buttonLabel?: string;
   buttonVariant?: 'default' | 'outline';
+  hideTrigger?: boolean;
   openSignal?: number;
   onOpenSignalHandled?: () => void;
 }
@@ -153,6 +154,7 @@ export function AddWidgetSelectorDialog({
   onAdd,
   buttonLabel,
   buttonVariant = 'outline',
+  hideTrigger = false,
   openSignal,
   onOpenSignalHandled,
 }: AddWidgetSelectorDialogProps) {
@@ -210,15 +212,17 @@ export function AddWidgetSelectorDialog({
 
   return (
     <>
-      <Button
-        size="sm"
-        variant={buttonVariant}
-        className="cursor-pointer gap-2"
-        onClick={() => setOpenWidgets(true)}
-      >
-        <IconPlus className="size-4" />
-        {buttonLabel || tMenu('addWidgets')}
-      </Button>
+      {!hideTrigger ? (
+        <Button
+          size="sm"
+          variant={buttonVariant}
+          className="cursor-pointer gap-2"
+          onClick={() => setOpenWidgets(true)}
+        >
+          <IconPlus className="size-4" />
+          {buttonLabel || tMenu('addWidgets')}
+        </Button>
+      ) : null}
 
       <Sheet
         open={openWidgets}

package/hedhog/frontend/app/dashboard/dashboard-home-tabs.tsx.ejs

@@ -42,15 +42,19 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useDebounce } from '@/hooks/use-debounce';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import useEmblaCarousel from 'embla-carousel-react';
 import * as LucideIcons from 'lucide-react';
 import {
   Check,
+  ChevronLeft,
+  ChevronRight,
   Home,
   LayoutDashboard,
   Loader2,
   Palette,
   Pencil,
   Plus,
+  Save,
   Share2,
   Trash2,
   UserPlus,
@@ -58,7 +62,12 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type DragEvent as ReactDragEvent,
+} from 'react';
 import { toast } from 'sonner';
 import { DashboardContent } from './[slug]/dashboard-content';
 
@@ -104,7 +113,22 @@ type DashboardTemplate = {
 const getDashboardName = (dashboard: DashboardTab) =>
   dashboard.name || dashboard.dashboard_locale?.[0]?.name || dashboard.slug;
 
-const DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID = 'dashboard-home-header-actions';
+const reorderDashboards = (
+  currentDashboards: DashboardTab[],
+  sourceIndex: number,
+  targetIndex: number
+) => {
+  const nextDashboards = [...currentDashboards];
+  const [movedDashboard] = nextDashboards.splice(sourceIndex, 1);
+
+  if (!movedDashboard) {
+    return currentDashboards;
+  }
+
+  nextDashboards.splice(targetIndex, 0, movedDashboard);
+  return nextDashboards;
+};
+
 const EMPTY_SHAREABLE_USERS_PAGE: PaginatedResponse<SharedUser> = {
   data: [],
   total: 0,
@@ -289,6 +313,7 @@ const getErrorMessage = (error: unknown, fallback: string) => {
 
 export function DashboardHomeTabs() {
   const t = useTranslations('core.DashboardHomeTabs');
+  const tDashboardPage = useTranslations('core.DashboardPage');
   const { request, currentLocaleCode } = useApp();
   const [activeSlug, setActiveSlug] = useState('');
   const [createOpen, setCreateOpen] = useState(false);
@@ -315,6 +340,27 @@ export function DashboardHomeTabs() {
   const [iconDashboard, setIconDashboard] = useState<DashboardTab | null>(null);
   const [iconValue, setIconValue] = useState('layout-dashboard');
   const [isSavingIcon, setIsSavingIcon] = useState(false);
+  const [requestSaveLayoutSignal, setRequestSaveLayoutSignal] = useState(0);
+  const [runtimeHeaderState, setRuntimeHeaderState] = useState({
+    hasChanges: false,
+    isSaving: false,
+    isAutosavePending: false,
+  });
+
+  const [tabsEmblaRef, tabsEmblaApi] = useEmblaCarousel({
+    dragFree: true,
+    containScroll: 'keepSnaps',
+    align: 'start',
+  });
+  const [canScrollPrevTabs, setCanScrollPrevTabs] = useState(false);
+  const [canScrollNextTabs, setCanScrollNextTabs] = useState(false);
+  const [orderedDashboards, setOrderedDashboards] = useState<DashboardTab[]>(
+    []
+  );
+  const [draggingDashboardSlug, setDraggingDashboardSlug] = useState<
+    string | null
+  >(null);
+  const [isReordering, setIsReordering] = useState(false);
 
   const debouncedShareSearch = useDebounce(shareSearch, 300);
 
@@ -349,8 +395,10 @@ export function DashboardHomeTabs() {
     });
 
   const activeDashboard = useMemo(
-    () => dashboards.find((dashboard) => dashboard.slug === activeSlug) ?? null,
-    [activeSlug, dashboards]
+    () =>
+      orderedDashboards.find((dashboard) => dashboard.slug === activeSlug) ??
+      null,
+    [activeSlug, orderedDashboards]
   );
 
   const selectedTemplate = useMemo(
@@ -372,24 +420,47 @@ export function DashboardHomeTabs() {
   );
 
   useEffect(() => {
-    if (dashboards.length === 0) {
+    setOrderedDashboards(dashboards);
+  }, [dashboards]);
+
+  useEffect(() => {
+    if (orderedDashboards.length === 0) {
       setActiveSlug('');
       return;
     }
 
-    const hasActiveDashboard = dashboards.some(
+    const hasActiveDashboard = orderedDashboards.some(
       (dashboard) => dashboard.slug === activeSlug
     );
 
     if (!activeSlug || !hasActiveDashboard) {
       const nextDashboard =
-        dashboards.find((dashboard) => dashboard.is_home) ?? dashboards[0];
+        orderedDashboards.find((dashboard) => dashboard.is_home) ??
+        orderedDashboards[0];
 
       if (nextDashboard) {
         setActiveSlug(nextDashboard.slug);
       }
     }
-  }, [activeSlug, dashboards]);
+  }, [activeSlug, orderedDashboards]);
+
+  useEffect(() => {
+    if (!tabsEmblaApi) return;
+
+    const updateScrollButtons = () => {
+      setCanScrollPrevTabs(tabsEmblaApi.canScrollPrev());
+      setCanScrollNextTabs(tabsEmblaApi.canScrollNext());
+    };
+
+    updateScrollButtons();
+    tabsEmblaApi.on('scroll', updateScrollButtons);
+    tabsEmblaApi.on('reInit', updateScrollButtons);
+
+    return () => {
+      tabsEmblaApi.off('scroll', updateScrollButtons);
+      tabsEmblaApi.off('reInit', updateScrollButtons);
+    };
+  }, [tabsEmblaApi]);
 
   const {
     data: sharedUsers = [],
@@ -462,6 +533,80 @@ export function DashboardHomeTabs() {
 
   const shareableUsers = shareableUsersPage.data ?? [];
 
+  const handleTabDragStart = (
+    event: ReactDragEvent<HTMLElement>,
+    dashboardSlug: string
+  ) => {
+    setDraggingDashboardSlug(dashboardSlug);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', dashboardSlug);
+  };
+
+  const handleTabDragOver = (event: ReactDragEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  };
+
+  const handleTabDrop = async (
+    event: ReactDragEvent<HTMLElement>,
+    targetDashboardSlug: string
+  ) => {
+    event.preventDefault();
+
+    const sourceDashboardSlug =
+      draggingDashboardSlug || event.dataTransfer.getData('text/plain');
+
+    if (!sourceDashboardSlug || sourceDashboardSlug === targetDashboardSlug) {
+      setDraggingDashboardSlug(null);
+      return;
+    }
+
+    const sourceIndex = orderedDashboards.findIndex(
+      (dashboard) => dashboard.slug === sourceDashboardSlug
+    );
+    const targetIndex = orderedDashboards.findIndex(
+      (dashboard) => dashboard.slug === targetDashboardSlug
+    );
+
+    if (sourceIndex < 0 || targetIndex < 0) {
+      setDraggingDashboardSlug(null);
+      return;
+    }
+
+    const previousDashboards = orderedDashboards;
+    const nextDashboards = reorderDashboards(
+      orderedDashboards,
+      sourceIndex,
+      targetIndex
+    );
+
+    setOrderedDashboards(nextDashboards);
+
+    try {
+      setIsReordering(true);
+      await request({
+        url: '/dashboard-core/dashboard/order',
+        method: 'PATCH',
+        data: {
+          slugs: nextDashboards.map((dashboard) => dashboard.slug),
+        },
+      });
+      await refetchDashboards();
+    } catch (error) {
+      setOrderedDashboards(previousDashboards);
+      toast.error(
+        getErrorMessage(error, 'Unable to save dashboard tab order.')
+      );
+    } finally {
+      setIsReordering(false);
+      setDraggingDashboardSlug(null);
+    }
+  };
+
+  const handleTabDragEnd = () => {
+    setDraggingDashboardSlug(null);
+  };
+
   const handleSelectTemplate = (template: DashboardTemplate | null) => {
     setSelectedTemplateSlug(template?.slug ?? '');
     setNewDashboardName(template?.name ?? '');
@@ -738,34 +883,9 @@ export function DashboardHomeTabs() {
     isSettingHome ||
     isSavingIcon ||
     isSharingUsers ||
+    isReordering ||
     revokingUserId !== null;
 
-  const headerActions = (
-    <div className="flex flex-wrap items-center justify-end gap-2">
-      {activeDashboard ? (
-        <div
-          id={DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID}
-          className="contents"
-        />
-      ) : null}
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() =>
-          activeDashboard && openShareForDashboard(activeDashboard)
-        }
-        disabled={!activeDashboard || isBusy}
-      >
-        <Share2 className="size-4" />
-        {t('share')}
-      </Button>
-      <Button size="sm" onClick={() => setCreateOpen(true)} disabled={isBusy}>
-        <Plus className="size-4" />
-        {t('newDashboard')}
-      </Button>
-    </div>
-  );
-
   return (
     <Page>
       <PageHeader
@@ -777,7 +897,51 @@ export function DashboardHomeTabs() {
         ]}
         title={t('pageTitle')}
         description={t('pageDescription')}
-        actions={headerActions}
+        actions={[
+          {
+            label: t('share'),
+            onClick: () =>
+              activeDashboard && openShareForDashboard(activeDashboard),
+            icon: <Share2 className="size-4" />,
+            variant: 'outline',
+            size: 'sm',
+            disabled: !activeDashboard || isBusy,
+          },
+          {
+            label: t('addWidgets'),
+            onClick: () =>
+              activeDashboard && openAddWidgetsForDashboard(activeDashboard),
+            icon: <Plus className="size-4" />,
+            variant: 'outline',
+            size: 'sm',
+            disabled: !activeDashboard || isBusy,
+          },
+          {
+            label: runtimeHeaderState.isSaving
+              ? tDashboardPage('saving')
+              : tDashboardPage('saveLayout'),
+            onClick: () =>
+              setRequestSaveLayoutSignal((previous) => previous + 1),
+            icon: runtimeHeaderState.isSaving ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Save className="size-4" />
+            ),
+            size: 'sm',
+            disabled:
+              !activeDashboard ||
+              isBusy ||
+              runtimeHeaderState.isSaving ||
+              !runtimeHeaderState.hasChanges,
+          },
+          {
+            label: t('newDashboard'),
+            onClick: () => setCreateOpen(true),
+            icon: <Plus className="size-4" />,
+            size: 'sm',
+            disabled: isBusy,
+          },
+        ]}
       />
 
       {isLoading ? (
@@ -793,10 +957,20 @@ export function DashboardHomeTabs() {
             onValueChange={setActiveSlug}
             className="gap-0"
           >
-            <div className="bg-muted dark:bg-muted/40">
-              <ScrollArea className="w-full whitespace-nowrap">
-                <TabsList className="dashboard-tabs-list h-auto min-h-0 w-max items-end gap-0 rounded-none bg-transparent p-0 pt-1 pl-1">
-                  {dashboards.map((dashboard) => {
+            <div className="bg-muted dark:bg-muted/40 relative">
+              {canScrollPrevTabs && (
+                <button
+                  type="button"
+                  onClick={() => tabsEmblaApi?.scrollPrev()}
+                  aria-label="Scroll tabs left"
+                  className="md:hidden absolute left-0 top-0 bottom-0 z-10 flex items-center px-1.5 bg-linear-to-r from-muted dark:from-muted/40 to-transparent"
+                >
+                  <ChevronLeft className="size-4 text-muted-foreground" />
+                </button>
+              )}
+              <div ref={tabsEmblaRef} className="overflow-hidden">
+                <TabsList className="dashboard-tabs-list h-auto min-h-0 items-end gap-0 rounded-none bg-transparent p-0 pt-1 pl-1 flex w-max">
+                  {orderedDashboards.map((dashboard) => {
                     const isRenamingCurrentTab =
                       renamingSlug === dashboard.slug;
                     const isActiveTab = activeSlug === dashboard.slug;
@@ -846,13 +1020,32 @@ export function DashboardHomeTabs() {
                       <ContextMenu key={dashboard.slug}>
                         <ContextMenuTrigger asChild>
                           {isRenamingCurrentTab ? (
-                            <div className="-mb-px flex min-h-9 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none">
+                            <div
+                              onDragOver={handleTabDragOver}
+                              onDrop={(event) =>
+                                void handleTabDrop(event, dashboard.slug)
+                              }
+                              className="-mb-px flex min-h-9 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none"
+                            >
                               {tabContent}
                             </div>
                           ) : (
                             <TabsTrigger
                               value={dashboard.slug}
-                              className="dashboard-tab-trigger -mb-px cursor-pointer gap-2 rounded-b-none rounded-t-lg px-3 py-2 mt-1 border-none shadow-none data-[state=active]:shadow-none"
+                              draggable={!isBusy}
+                              onDragStart={(event) =>
+                                handleTabDragStart(event, dashboard.slug)
+                              }
+                              onDragOver={handleTabDragOver}
+                              onDrop={(event) =>
+                                void handleTabDrop(event, dashboard.slug)
+                              }
+                              onDragEnd={handleTabDragEnd}
+                              className={cn(
+                                'dashboard-tab-trigger -mb-px cursor-pointer gap-2 rounded-b-none rounded-t-lg px-3 py-2 mt-1 border-none shadow-none data-[state=active]:shadow-none',
+                                draggingDashboardSlug === dashboard.slug &&
+                                  'opacity-70'
+                              )}
                               style={
                                 isActiveTab
                                   ? {
@@ -934,7 +1127,17 @@ export function DashboardHomeTabs() {
                     <Plus className="size-4" />
                   </button>
                 </TabsList>
-              </ScrollArea>
+              </div>
+              {canScrollNextTabs && (
+                <button
+                  type="button"
+                  onClick={() => tabsEmblaApi?.scrollNext()}
+                  aria-label="Scroll tabs right"
+                  className="md:hidden absolute right-0 top-0 bottom-0 z-10 flex items-center px-1.5 bg-linear-to-l from-muted dark:from-muted/40 to-transparent"
+                >
+                  <ChevronRight className="size-4 text-muted-foreground" />
+                </button>
+              )}
             </div>
           </Tabs>
         </div>
@@ -952,7 +1155,9 @@ export function DashboardHomeTabs() {
           key={activeDashboard.slug}
           dashboardSlug={activeDashboard.slug}
           showHeader={false}
-          headerActionsTargetId={DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID}
+          externalHeaderActions
+          requestSaveSignal={requestSaveLayoutSignal}
+          onRuntimeActionsStateChange={setRuntimeHeaderState}
           openWidgetPickerSignal={openAddWidgetSignal}
           onOpenWidgetPickerHandled={() => setOpenAddWidgetSignal(0)}
         />
@@ -1131,7 +1336,7 @@ export function DashboardHomeTabs() {
 
               <div className="space-y-2">
                 <p className="text-sm font-medium">{t('iconSuggestions')}</p>
-                <div className="grid gap-2 grid-cols-12">
+                <div className="grid grid-cols-6 gap-2 md:grid-cols-8 lg:grid-cols-12">
                   {DASHBOARD_ICON_OPTIONS.map((iconName) => {
                     const IconOption = resolveDashboardIcon(iconName);
                     const isSelected =
@@ -1241,7 +1446,7 @@ export function DashboardHomeTabs() {
 
               <div className="space-y-2">
                 <p className="text-sm font-medium">{t('suggestions')}</p>
-                <div className="grid gap-2 grid-cols-12">
+                <div className="grid grid-cols-6 gap-2 md:grid-cols-8 lg:grid-cols-12">
                   {DASHBOARD_ICON_OPTIONS.map((iconName) => {
                     const IconOption = resolveDashboardIcon(iconName);
                     const isSelected =