@hed-hog/core 0.0.304 → 0.0.305

package/hedhog/frontend/app/menu/page.tsx.ejs

@@ -79,9 +79,13 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import {
   BadgeHelp,
   BookOpen,
@@ -112,7 +116,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -1218,6 +1222,20 @@ type RequestError = {
   message?: string;
 };
 
+type MenuDraftPayload = {
+  mode: 'create' | 'edit';
+  menuId: number | null;
+  localeCode: string;
+  values: {
+    slug: string;
+    url: string;
+    name: string;
+    icon: string;
+    order?: number;
+    menu_id: string;
+  };
+};
+
 function getRequestErrorMessage(error: unknown, fallback: string) {
   if (error && typeof error === 'object') {
     const requestError = error as RequestError;
@@ -1261,10 +1279,12 @@ function TooltipBadge({
 }
 
 const NO_PARENT = '__none__';
+const MENU_CREATE_DRAFT_STORAGE_KEY = 'core-menu-create-draft';
+const MENU_EDIT_DRAFT_STORAGE_KEY = 'core-menu-edit-draft';
 
 export default function MenuPage() {
   const t = useTranslations('core.MenuPage');
-  const { request, currentLocaleCode, locales } = useApp();
+  const { request, currentLocaleCode, locales, getSettingValue } = useApp();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -1367,12 +1387,131 @@ export default function MenuPage() {
     },
   });
 
+  const watchedCreateValues = useWatch({
+    control: form.control,
+  });
+  const watchedEditValues = useWatch({
+    control: editForm.control,
+  });
+
+  const {
+    clearDraft: clearCreateDraft,
+    loadDraft: loadCreateDraft,
+    hasDraft: hasCreateDraft,
+    savedAt: createDraftSavedAt,
+  } = useFormDraft<MenuDraftPayload>({
+    storageKey: MENU_CREATE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'create',
+      menuId: null,
+      localeCode: currentLocaleCode,
+      values: {
+        slug: watchedCreateValues.slug ?? '',
+        url: watchedCreateValues.url ?? '',
+        name: watchedCreateValues.name ?? '',
+        icon: watchedCreateValues.icon ?? '',
+        order: watchedCreateValues.order,
+        menu_id: watchedCreateValues.menu_id ?? NO_PARENT,
+      },
+    },
+    hasData: Boolean(
+      (watchedCreateValues.slug ?? '').trim() ||
+      (watchedCreateValues.url ?? '').trim() ||
+      (watchedCreateValues.name ?? '').trim() ||
+      (watchedCreateValues.icon ?? '').trim() ||
+      watchedCreateValues.order != null ||
+      (watchedCreateValues.menu_id ?? NO_PARENT) !== NO_PARENT
+    ),
+    enabled: isDialogOpen,
+  });
+
+  const {
+    clearDraft: clearEditDraft,
+    loadDraft: loadEditDraft,
+    hasDraft: hasEditDraft,
+    savedAt: editDraftSavedAt,
+  } = useFormDraft<MenuDraftPayload>({
+    storageKey: MENU_EDIT_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'edit',
+      menuId: editingMenu?.id ?? null,
+      localeCode: selectedLocale,
+      values: {
+        slug: watchedEditValues.slug ?? '',
+        url: watchedEditValues.url ?? '',
+        name: watchedEditValues.name ?? '',
+        icon: watchedEditValues.icon ?? '',
+        order: watchedEditValues.order,
+        menu_id: watchedEditValues.menu_id ?? NO_PARENT,
+      },
+    },
+    hasData: Boolean(
+      (watchedEditValues.slug ?? '').trim() ||
+      (watchedEditValues.url ?? '').trim() ||
+      (watchedEditValues.name ?? '').trim() ||
+      (watchedEditValues.icon ?? '').trim() ||
+      watchedEditValues.order != null ||
+      (watchedEditValues.menu_id ?? NO_PARENT) !== NO_PARENT
+    ),
+    enabled: Boolean(editingMenu),
+  });
+
+  const createDraftStatusContent = useMemo(() => {
+    if (!hasCreateDraft || !createDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(createDraftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [createDraftSavedAt, currentLocaleCode, getSettingValue, hasCreateDraft]);
+
+  const editDraftStatusContent = useMemo(() => {
+    if (!hasEditDraft || !editDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(editDraftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [editDraftSavedAt, currentLocaleCode, getSettingValue, hasEditDraft]);
+
   const getMenuDisplayName = useCallback((menu: MenuItem | TreeNode) => {
     return menu.name || menu.menu_locale?.[0]?.name || menu.slug;
   }, []);
 
-  const editingMenuId = editingMenu?.id ?? null;
-
   const handleEdit = useCallback(
     async (menu: Pick<MenuItem, 'id'>) => {
       setEditFormError(null);
@@ -1402,6 +1541,14 @@ export default function MenuPage() {
           }
         });
 
+        const storedDraft = loadEditDraft();
+        const nextLocale =
+          storedDraft?.payload.mode === 'edit' &&
+          storedDraft.payload.menuId === fullMenu.id
+            ? storedDraft.payload.localeCode
+            : currentLocaleCode;
+
+        setSelectedLocale(nextLocale);
         setEditingMenu({ ...fullMenu, locale: localeData });
       } catch (error) {
         console.error('Error fetching menu:', error);
@@ -1410,32 +1557,36 @@ export default function MenuPage() {
         setIsRefreshingMenu(false);
       }
     },
-    [locales, request, t]
+    [currentLocaleCode, loadEditDraft, locales, request, t]
   );
 
-  useEffect(() => {
-    if (editingMenuId == null) {
-      return;
-    }
-
-    setSelectedLocale(currentLocaleCode);
-  }, [currentLocaleCode, editingMenuId]);
-
   useEffect(() => {
     if (!editingMenu) {
       return;
     }
 
+    const storedDraft = loadEditDraft();
+    const shouldRestoreDraft =
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.menuId === editingMenu.id &&
+      storedDraft.payload.localeCode === selectedLocale;
     const localeData = editingMenu.locale?.[selectedLocale];
-    editForm.reset({
-      slug: editingMenu.slug || '',
-      url: editingMenu.url || '',
-      icon: editingMenu.icon || '',
-      order: editingMenu.order ?? undefined,
-      menu_id: editingMenu.menu_id ? String(editingMenu.menu_id) : NO_PARENT,
-      name: localeData?.name || editingMenu.name || '',
-    });
-  }, [editForm, editingMenu, selectedLocale]);
+
+    editForm.reset(
+      shouldRestoreDraft
+        ? storedDraft.payload.values
+        : {
+            slug: editingMenu.slug || '',
+            url: editingMenu.url || '',
+            icon: editingMenu.icon || '',
+            order: editingMenu.order ?? undefined,
+            menu_id: editingMenu.menu_id
+              ? String(editingMenu.menu_id)
+              : NO_PARENT,
+            name: localeData?.name || editingMenu.name || '',
+          }
+    );
+  }, [editForm, editingMenu, loadEditDraft, selectedLocale]);
 
   useEffect(() => {
     if (!allMenus || allMenus.length === 0) {
@@ -1457,14 +1608,20 @@ export default function MenuPage() {
 
   const openCreateMenu = (parentId?: number | null) => {
     setFormError(null);
-    form.reset({
-      slug: '',
-      url: '',
-      name: '',
-      icon: '',
-      order: undefined,
-      menu_id: parentId ? String(parentId) : NO_PARENT,
-    });
+    const storedDraft = loadCreateDraft();
+
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : {
+            slug: '',
+            url: '',
+            name: '',
+            icon: '',
+            order: undefined,
+            menu_id: parentId ? String(parentId) : NO_PARENT,
+          }
+    );
     setIsDialogOpen(true);
   };
 
@@ -1504,6 +1661,7 @@ export default function MenuPage() {
         },
       });
 
+      clearCreateDraft();
       form.reset({
         slug: '',
         url: '',
@@ -1555,6 +1713,7 @@ export default function MenuPage() {
         },
       });
 
+      clearEditDraft();
       toast.success(t('menuUpdatedSuccess'));
       setEditFormError(null);
       await refreshWorkspace(editingMenu.id);
@@ -1640,6 +1799,7 @@ export default function MenuPage() {
         data: { ids: [Number(editingMenu.id)] },
       });
 
+      clearEditDraft();
       setOpenDeleteModal(false);
       setEditingMenu(null);
       setEditFormError(null);
@@ -2078,6 +2238,12 @@ export default function MenuPage() {
                     </Alert>
                   ) : null}
 
+                  {editDraftStatusContent ? (
+                    <p className="text-xs text-muted-foreground">
+                      {editDraftStatusContent}
+                    </p>
+                  ) : null}
+
                   <div className="flex flex-col gap-2 sm:flex-row">
                     <Button
                       type="submit"
@@ -2557,6 +2723,12 @@ export default function MenuPage() {
                 </Alert>
               ) : null}
 
+              {createDraftStatusContent ? (
+                <p className="text-xs text-muted-foreground">
+                  {createDraftStatusContent}
+                </p>
+              ) : null}
+
               <Button type="submit" className="w-full cursor-pointer">
                 <Plus className="mr-1 h-4 w-4" />
                 {t('buttonAddMenu')}

package/hedhog/frontend/app/roles/menus.tsx.ejs

@@ -222,7 +222,7 @@ export function RoleMenusSection({
         match.replace('-', '').toUpperCase()
       );
 
-    const tablerIcons = TablerIcons as Record<
+    const tablerIcons = TablerIcons as unknown as Record<
       string,
       ComponentType<{ className?: string }>
     >;