feat(dashboard): simplify navigation — frequency-based IA

The sidebar had 22 items in 5 accordion groups, all defaulting closed:
first visit showed five vague headers and zero destinations, there was
no Dashboard/Home link at all, and rare pages (taxes, subscription) had
equal weight with POS. Restructured around usage frequency:

- Flat primary (always visible, no header): Dashboard, POS, Tables,
  Kitchen, Queue, Reservations, Menu, Reports
- Two collapsible groups: Customers & marketing (crm, coupons, sms,
  reviews, discover) and Café management (inventory, expenses, shifts,
  taxes, hr, branches)
- Footer utility icons: settings, subscription, support
- Removed "notifications" from the nav (duplicate of the topbar bell)

Other fixes folded in:
- Deleted [locale]/page.tsx which redirected "/" to /pos — it made the
  POS exit button a no-op loop and left OverviewScreen unreachable.
  "/" now renders the overview home; login still lands on /pos.
- Branch gating moved from group-level to an item whitelist
  (BRANCH_ALLOWED_NAV_KEYS) — also closes the hole where branch
  accounts could deep-link to /reports etc. past the RouteGuard.
- RouteGuard now checks footer items too (subscription stays gated).
- revalidate=300 on the locale layout: Next emitted s-maxage=31536000
  and the WCDN edge kept serving year-old HTML shells after deploys.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/dashboard/src/components/layout/sidebar.tsx

@@ -4,9 +4,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Link, usePathname } from "@/i18n/routing";
-import { canSeeNavGroup, canSeeNavItem } from "@/lib/auth-permissions";
+import { canSeeNavItem } from "@/lib/auth-permissions";
 import { permissionsOf } from "@/lib/permissions";
 import {
+  FOOTER_NAV,
   NAV_GROUPS,
   NAV_GROUPS_STORAGE_KEY,
   findNavGroupForPath,
@@ -45,8 +46,8 @@ function buildDefaultOpenGroups(): OpenGroupsState {
   const stored = readStoredOpenGroups();
   const defaults: OpenGroupsState = {};
   for (const g of NAV_GROUPS) {
-    // Default ALL groups closed on first visit; only restore if user explicitly saved state.
-    defaults[g.id] = stored[g.id] ?? false;
+    if (g.flat) continue; // flat groups are always expanded — no state
+    defaults[g.id] = stored[g.id] ?? g.defaultOpen;
   }
   return defaults;
 }
@@ -59,6 +60,11 @@ function persistOpenGroups(next: OpenGroupsState): void {
   }
 }
 
+function isItemActive(item: NavItemDef, pathname: string): boolean {
+  if (item.href === "/") return pathname === "/";
+  return pathname === item.href || pathname.startsWith(`${item.href}/`);
+}
+
 function NavLink({
   item,
   label,
@@ -124,24 +130,27 @@ function NavGroupSection({
   );
   if (visibleItems.length === 0) return null;
 
-  // Collapsed: drop the group header, show items as a flat icon-only list
-  // with a subtle divider between groups.
-  if (collapsed) {
+  // Flat groups (daily-use primary nav) and the collapsed-rail mode both render
+  // as a plain list — no header, always expanded.
+  if (group.flat || collapsed) {
     return (
-      <div className="mb-1 space-y-0.5 border-t border-border/60 pt-1 first:border-t-0 first:pt-0">
-        {visibleItems.map((item) => {
-          const active =
-            pathname === item.href || pathname.startsWith(`${item.href}/`);
-          return (
-            <NavLink
-              key={item.key}
-              item={item}
-              label={tItem(item.key)}
-              active={active}
-              collapsed
-            />
-          );
-        })}
+      <div
+        className={cn(
+          "space-y-0.5",
+          collapsed
+            ? "mb-1 border-t border-border/60 pt-1 first:border-t-0 first:pt-0"
+            : "mb-2"
+        )}
+      >
+        {visibleItems.map((item) => (
+          <NavLink
+            key={item.key}
+            item={item}
+            label={tItem(item.key)}
+            active={isItemActive(item, pathname)}
+            collapsed={collapsed}
+          />
+        ))}
       </div>
     );
   }
@@ -173,19 +182,15 @@ function NavGroupSection({
       >
         <div className="overflow-hidden">
           <div className="space-y-0.5 pb-1 pt-0.5">
-            {visibleItems.map((item) => {
-              const active =
-                pathname === item.href || pathname.startsWith(`${item.href}/`);
-              return (
-                <NavLink
-                  key={item.key}
-                  item={item}
-                  label={tItem(item.key)}
-                  active={active}
-                  collapsed={false}
-                />
-              );
-            })}
+            {visibleItems.map((item) => (
+              <NavLink
+                key={item.key}
+                item={item}
+                label={tItem(item.key)}
+                active={isItemActive(item, pathname)}
+                collapsed={false}
+              />
+            ))}
           </div>
         </div>
       </div>
@@ -232,10 +237,14 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
 
   const visibleGroups = useMemo(
     () =>
-      NAV_GROUPS.filter((g) => {
-        if (!canSeeNavGroup(g.id, role, branchId)) return false;
-        return g.items.some((item) => canSeeNavItem(item.key, role, branchId, permissions));
-      }),
+      NAV_GROUPS.filter((g) =>
+        g.items.some((item) => canSeeNavItem(item.key, role, branchId, permissions))
+      ),
+    [role, branchId, permissions]
+  );
+
+  const visibleFooterItems = useMemo(
+    () => FOOTER_NAV.filter((item) => canSeeNavItem(item.key, role, branchId, permissions)),
     [role, branchId, permissions]
   );
 
@@ -244,6 +253,7 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
     setOpenGroups((_prev) => {
       const next: OpenGroupsState = {};
       for (const g of NAV_GROUPS) {
+        if (g.flat) continue;
         // If opening: only the clicked group becomes true; everything else closes.
         // If closing: just close the clicked group, leave others as-is.
         next[g.id] = open ? g.id === groupId : g.id === groupId ? false : (_prev[g.id] ?? false);
@@ -253,7 +263,7 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
     });
   }, []);
 
-  // When navigating to a new path, open only the group that contains that path (accordion).
+  // When navigating to a path inside a collapsible group, open that group.
   useEffect(() => {
     const activeGroup = findNavGroupForPath(pathname);
     if (!activeGroup) return;
@@ -262,6 +272,7 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
       // Accordion: open active group, close all others
       const next: OpenGroupsState = {};
       for (const g of NAV_GROUPS) {
+        if (g.flat) continue;
         next[g.id] = g.id === activeGroup;
       }
       persistOpenGroups(next);
@@ -320,29 +331,24 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
               ))}
             </div>
           ) : (
-            <div className="space-y-3 px-1 pt-1">
-              {[40, 32, 40, 32, 40].map((w, i) => (
-                <div key={i} className="space-y-1.5">
-                  <div className="h-2 w-20 animate-pulse rounded bg-muted" />
-                  {Array.from({ length: i % 2 === 0 ? 3 : 2 }).map((_, j) => (
-                    <div
-                      key={j}
-                      className="h-8 animate-pulse rounded-lg bg-muted"
-                      style={{ width: `${w + j * 4}%` }}
-                    />
-                  ))}
-                </div>
+            <div className="space-y-1.5 px-1 pt-1">
+              {[88, 72, 80, 64, 76, 84, 68, 60].map((w, i) => (
+                <div
+                  key={i}
+                  className="h-8 animate-pulse rounded-lg bg-muted"
+                  style={{ width: `${w}%` }}
+                />
               ))}
             </div>
           )
         ) : (
           visibleGroups.map((group) => {
-            const isOpen = openGroups[group.id] ?? group.defaultOpen;
+            const isOpen = group.flat ? true : (openGroups[group.id] ?? group.defaultOpen);
             return (
               <NavGroupSection
                 key={group.id}
                 group={group}
-                title={tGroups(group.id)}
+                title={group.flat ? "" : tGroups(group.id)}
                 open={isOpen}
                 onToggle={() => setGroupOpen(group.id, !isOpen)}
                 pathname={pathname}
@@ -357,8 +363,40 @@ export function Sidebar({ side }: { side: "left" | "right" }) {
         )}
       </nav>
 
-      {/* Footer — user info + collapse toggle */}
+      {/* Footer — utility links + user info + collapse toggle */}
       <div className="shrink-0 border-t border-border">
+        {/* Utility links (settings / subscription / support) — compact icon row */}
+        {hasHydrated && visibleFooterItems.length > 0 && (
+          <div
+            className={cn(
+              "flex border-b border-border/50",
+              collapsed ? "flex-col items-center gap-0.5 py-1.5" : "items-center justify-around px-2 py-1.5"
+            )}
+          >
+            {visibleFooterItems.map((item) => {
+              const Icon = item.icon;
+              const active = isItemActive(item, pathname);
+              const label = t(item.key);
+              return (
+                <Link
+                  key={item.key}
+                  href={item.href}
+                  title={label}
+                  aria-label={label}
+                  className={cn(
+                    "flex h-9 w-9 items-center justify-center rounded-lg transition-colors cursor-pointer",
+                    active
+                      ? "bg-accent text-primary"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                  )}
+                >
+                  <Icon className="h-4 w-4" aria-hidden />
+                </Link>
+              );
+            })}
+          </div>
+        )}
+
         {/* User badge */}
         {user && (
           <div