@hed-hog/core 0.0.327 → 0.0.329

package/hedhog/data/setting_group.yaml

@@ -1410,7 +1410,7 @@
   icon: folder
   name:
     en: File Storage
-    pt: Armazenamento de Arquivos
+    pt: Arquivos
   description:
     en: Configure file storage backend, accepted file types, and size limits for uploads
     pt: Configure backend de armazenamento de arquivos, tipos de arquivo aceitos e limites de tamanho para uploads

package/hedhog/frontend/app/configurations/[slug]/page.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { Badge } from '@/components/ui/badge';
 import {
   Card,
   CardContent,
@@ -143,7 +144,7 @@ export default function Page() {
                   {section.settings.map((setting: Setting) => (
                     <div
                       key={setting.id}
-                      className="flex min-w-0 flex-col gap-3 border-b border-border pb-4 last:border-0 last:pb-0 md:flex-row md:items-center md:justify-between md:gap-4"
+                      className="group flex min-w-0 flex-col gap-3 border-b border-border pb-4 last:border-0 last:pb-0 md:flex-row md:items-center md:justify-between md:gap-4"
                     >
                       <div className="min-w-0 flex-1">
                         <label className="block font-semibold">
@@ -151,6 +152,12 @@ export default function Page() {
                         </label>
                         <p className="text-muted-foreground text-sm wrap-break-word">
                           {setting.description}
+                          <Badge
+                            variant="outline"
+                            className="ml-1 align-middle font-mono text-xs opacity-0 transition-opacity group-hover:opacity-100"
+                          >
+                            {setting.slug}
+                          </Badge>
                         </p>
                       </div>
 

package/hedhog/frontend/app/configurations/layout.tsx.ejs

@@ -18,7 +18,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import {
   Select,
   SelectContent,
@@ -30,7 +29,7 @@ import { cn } from '@/lib/utils';
 import { PaginatedResult } from '@/types/pagination-result';
 import { SettingGroup } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Download, MenuIcon, Upload } from 'lucide-react';
+import { Check, ChevronDown, Download, MenuIcon, Upload } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
@@ -71,7 +70,10 @@ export default function ConfigurationsLayout({ children }: IProps) {
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [importData, setImportData] = useState<SettingsValidation | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const tabsContainerRef = useRef<HTMLDivElement>(null);
+  const navContainerRef = useRef<HTMLDivElement>(null);
+  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+  const tabWidths = useRef<number[]>([]);
+  const [visibleCount, setVisibleCount] = useState(Infinity);
 
   const groups = settingGroups?.data || [];
   const activeGroup = groups.find(
@@ -79,16 +81,50 @@ export default function ConfigurationsLayout({ children }: IProps) {
   );
 
   useEffect(() => {
-    const activeTab = tabsContainerRef.current?.querySelector<HTMLElement>(
-      '[data-active="true"]'
-    );
+    const container = navContainerRef.current;
+    if (!container) return;
 
-    activeTab?.scrollIntoView({
-      behavior: 'smooth',
-      inline: 'center',
-      block: 'nearest',
-    });
-  }, [pathname, groups.length]);
+    const OVERFLOW_BTN_WIDTH = 96;
+    const GAP_WIDTH = 8;
+
+    const calculate = () => {
+      const available = container.clientWidth;
+
+      tabRefs.current.forEach((el, idx) => {
+        if (el && el.offsetWidth > 0) {
+          tabWidths.current[idx] = el.offsetWidth;
+        }
+      });
+
+      const total = groups.length;
+      if (total === 0) return;
+
+      let used = 0;
+      let count = 0;
+
+      for (let i = 0; i < total; i++) {
+        const w = (tabWidths.current[i] ?? 100) + (count > 0 ? GAP_WIDTH : 0);
+        const allFit = count + 1 === total;
+        const budget = allFit
+          ? available
+          : available - OVERFLOW_BTN_WIDTH - GAP_WIDTH;
+
+        if (used + w <= budget) {
+          used += w;
+          count++;
+        } else {
+          break;
+        }
+      }
+
+      setVisibleCount(count);
+    };
+
+    const observer = new ResizeObserver(calculate);
+    observer.observe(container);
+    calculate();
+    return () => observer.disconnect();
+  }, [groups.length]);
 
   const handleExport = (includeSecrets: boolean) => {
     request<Blob>({
@@ -170,6 +206,31 @@ export default function ConfigurationsLayout({ children }: IProps) {
     }
   }, [importData, request, refetch, showToastHandler, t]);
 
+  const activeIndex = groups.findIndex(
+    (item) => pathname === `/core/configurations/${item.slug}`
+  );
+
+  const rawVisible = isFinite(visibleCount)
+    ? Math.min(Math.max(0, visibleCount), groups.length)
+    : groups.length;
+
+  let visibleIdxs: number[];
+  if (rawVisible >= groups.length) {
+    visibleIdxs = groups.map((_, i) => i);
+  } else {
+    visibleIdxs = Array.from({ length: rawVisible }, (_, i) => i);
+    if (activeIndex >= rawVisible && activeIndex >= 0) {
+      visibleIdxs[rawVisible - 1] = activeIndex;
+      visibleIdxs.sort((a, b) => a - b);
+    }
+  }
+
+  const visibleSet = new Set(visibleIdxs);
+  const overflowIdxs = groups
+    .map((_, i) => i)
+    .filter((i) => !visibleSet.has(i));
+  const activeInOverflow = activeIndex >= 0 && !visibleSet.has(activeIndex);
+
   return (
     <div className="flex min-w-0 flex-col overflow-x-hidden px-4">
       <PageHeader
@@ -329,36 +390,93 @@ export default function ConfigurationsLayout({ children }: IProps) {
             </Select>
           </div>
 
-          <div className="hidden min-w-0 overflow-x-hidden md:block">
-            <ScrollArea className="w-full min-w-0" type="auto">
-              <nav
-                ref={tabsContainerRef}
-                className="flex min-w-max gap-2"
-                aria-label="Configuration tabs"
-              >
-                {groups.map((item: SettingGroup) => {
-                  const isActive =
-                    pathname === `/core/configurations/${item.slug}`;
+          <div className="hidden min-w-0 md:block">
+            <nav
+              ref={navContainerRef}
+              className="flex w-full items-end gap-2"
+              aria-label="Configuration tabs"
+            >
+              {groups.map((item: SettingGroup, idx: number) => {
+                const isActive = idx === activeIndex;
+                const isOverflow = !visibleSet.has(idx);
 
+                if (isOverflow) {
                   return (
-                    <Link
+                    <span
                       key={item.slug}
-                      href={item.slug}
-                      data-active={isActive}
+                      ref={(el) => {
+                        tabRefs.current[idx] =
+                          el as unknown as HTMLAnchorElement;
+                      }}
+                      aria-hidden="true"
+                      className="invisible absolute shrink-0 whitespace-nowrap px-3 py-3 text-sm font-medium"
+                    >
+                      {item.name}
+                    </span>
+                  );
+                }
+
+                return (
+                  <Link
+                    key={item.slug}
+                    href={item.slug}
+                    ref={(el) => {
+                      tabRefs.current[idx] = el;
+                    }}
+                    data-active={isActive}
+                    className={cn(
+                      'shrink-0 border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors',
+                      isActive
+                        ? 'border-primary text-primary'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
+                    )}
+                  >
+                    {item.name}
+                  </Link>
+                );
+              })}
+
+              {overflowIdxs.length > 0 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
                       className={cn(
-                        'shrink-0 border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors',
-                        isActive
+                        'ml-auto h-auto shrink-0 cursor-pointer rounded-none border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors',
+                        activeInOverflow
                           ? 'border-primary text-primary'
                           : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
                       )}
                     >
-                      {item.name}
-                    </Link>
-                  );
-                })}
-              </nav>
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
+                      {overflowIdxs.length} mais
+                      <ChevronDown className="ml-1 h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    {overflowIdxs.map((idx) => {
+                      const item = groups[idx];
+                      if (!item) return null;
+                      const isActive = idx === activeIndex;
+                      return (
+                        <DropdownMenuItem
+                          key={item.slug}
+                          onClick={() =>
+                            router.push(`/core/configurations/${item.slug}`)
+                          }
+                          className={cn(
+                            'cursor-pointer',
+                            isActive && 'text-primary'
+                          )}
+                        >
+                          {item.name}
+                          {isActive && <Check className="ml-auto h-4 w-4" />}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </nav>
           </div>
         </div>
       </div>