Keep the sidebar section synced with the URL on full page loads

src/components/layout/Sidebar.tsx

@@ -288,24 +288,19 @@ export function Sidebar() {
   const setSidebarOpen = useUIStore((s) => s.setSidebarOpen);
   const schema = useSchemaStore((s) => s.schema);
   const edition = useAccountStore((s) => s.edition);
-  const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
+  const permissions = useAccountStore((s) => s.permissions);
   const hasPermission = useAccountStore((s) => s.hasPermission);
   const [upsellOpen, setUpsellOpen] = useState(false);
   const navRef = useRef<HTMLElement>(null);
 
-  const layouts = useMemo(
+  // Build the permission checks from the permissions array itself: the store
-    () =>
+  // accessors are stable refs, so depending on them alone would keep a stale
-      schema ? visibleLayouts(schema, edition, (prefix) => hasObjectPermission(prefix, 'Get'), hasPermission) : [],
+  // layout list after access data finishes loading.
-    [schema, edition, hasObjectPermission, hasPermission],
+  const layouts = useMemo(() => {
-  );
+    if (!schema) return [];
-
+    const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
-  useEffect(() => {
+    return visibleLayouts(schema, edition, canGet, hasPermission);
-    if (!schema) return;
+  }, [schema, edition, permissions, hasPermission]);
-    if (layouts.length === 0) return;
-    if (!layouts.find((l) => l.name === activeSection)) {
-      setActiveSection(layouts[0].name);
-    }
-  }, [schema, layouts, activeSection, setActiveSection]);
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -328,7 +323,7 @@ export function Sidebar() {
 
   const handleSectionClick = (target: Layout) => {
     setActiveSection(target.name);
-    const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
+    const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
     const first =
       findFirstAccessibleLinkInLayout(schema, target, edition, canGet, hasPermission) ??
       findFirstVisibleLinkInLayout(schema, target, edition, canGet, hasPermission);

src/pages/AdminPanel.tsx

@@ -75,7 +75,7 @@ export default function AdminPanel() {
   const setSchema = useSchemaStore((s) => s.setSchema);
   const setAccountInfo = useAccountStore((s) => s.setAccountInfo);
   const edition = useAccountStore((s) => s.edition);
-  const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
+  const permissions = useAccountStore((s) => s.permissions);
   const setSession = useAuthStore((s) => s.setSession);
   const accessToken = useAuthStore((s) => s.accessToken);
   const setActiveSection = useUIStore((s) => s.setActiveSection);
@@ -146,20 +146,22 @@ export default function AdminPanel() {
     };
   }, [isSchemaLoaded, setSession, setSchema, setAccountInfo, t]);
 
-  const hasPermission = useAccountStore((s) => s.hasPermission);
   const isBootstrapMode = useMemo(() => {
     if (!schema) return false;
     if (!canViewObject('x:Bootstrap')) return false;
-    const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
+    // Read the permissions array directly: the store accessors are stable
-    const hasPerm = (perm: string) => hasPermission(perm);
+    // refs, so depending on them alone would keep stale results after access
+    // data finishes loading.
+    const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
+    const hasPerm = (perm: string) => permissions.includes(perm);
     return visibleLayouts(schema, edition, canGet, hasPerm).length === 0;
-  }, [schema, canViewObject, edition, hasObjectPermission, hasPermission]);
+  }, [schema, canViewObject, edition, permissions]);
 
   useEffect(() => {
     if (!schema) return;
     if (isBootstrapMode) return;
-    const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
+    const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
-    const hasPerm = (perm: string) => hasPermission(perm);
+    const hasPerm = (perm: string) => permissions.includes(perm);
     const layouts = visibleLayouts(schema, edition, canGet, hasPerm);
     const pickDefault = (): { layoutName: string; link: string | null } | null => {
       for (const layout of layouts) {
@@ -205,8 +207,7 @@ export default function AdminPanel() {
     setActiveSection,
     navigate,
     edition,
-    hasObjectPermission,
+    permissions,
-    hasPermission,
     isBootstrapMode,
   ]);