Redesign aymeric

.agents/skills/intlayer-content/references/concept_content.md

@@ -344,15 +344,15 @@ Transforms the dictionary into a per-locale dictionary where each field declared
 
 **Example:**
 
-```json
+```jsonc
 // Per-locale dictionary
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // This becomes a translation node for 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -422,7 +422,7 @@ Instructions for automatically filling dictionary content from external sources.
 
 **Examples:**
 
-```json
+```jsonc
 // Disable filling
 {
   "fill": false

apps/app/.env.template

@@ -71,4 +71,4 @@ VITE_STRIPE_ONE_TIME_PAYMENT_PRICE_ID=
 # Election                                                                              #
 #######################################################################################
 
-GH_TOKEN=
+GH_TOKEN=

apps/app/package.json

@@ -68,6 +68,7 @@
     "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "3.14.10",
     "@tanstack/router-plugin": "1.168.35",
+    "@tanstack/start-static-server-functions": "^1.167.32",
     "defu": "6.1.7",
     "framer-motion": "13.1.1",
     "fuse.js": "7.5.0",

apps/app/src/components/Dashboard/DashboardNavbar/OrganizationDropdown.tsx

@@ -8,6 +8,7 @@ import {
 import { Button } from '@intlayer/design-system/button';
 import { Container } from '@intlayer/design-system/container';
 import { DropDown } from '@intlayer/design-system/drop-down';
+import { useIsMounted } from '@intlayer/design-system/hooks';
 import { Modal } from '@intlayer/design-system/modal';
 import { ChevronsUpDown } from 'lucide-react';
 import { type FC, useState } from 'react';
@@ -16,6 +17,7 @@ import { OrganizationCreationForm } from '../OrganizationForm/OrganizationCreati
 
 export const OrganizationDropdown: FC = () => {
   const { session } = useSession();
+  const isMounted = useIsMounted();
   const { data: organizations } = useGetOrganizations();
   const [isCreationModalOpen, setIsCreationModalOpen] = useState(false);
   const { mutate: selectOrganization, isPending: isSelectOrganizationLoading } =
@@ -43,12 +45,21 @@ export const OrganizationDropdown: FC = () => {
     selectOrganization(organizationId);
   };
 
-  const otherOrganizations = (organizations?.data ?? [])
-    .filter(
-      (organizationEl: any) =>
-        String(organizationEl.id) !== String(organization?.id)
-    )
-    .slice(0, 10);
+  // The organizations list is client-only: the API client authenticates with
+  // `credentials: 'include'`, which is a browser mechanism, so SSR always sees
+  // an empty list and renders the empty state. Holding the list back until
+  // after mount keeps the first client render identical to the server markup —
+  // otherwise the fetch resolving around hydration swaps the empty state for
+  // buttons mid-hydration and the tree is thrown away. The panel is closed at
+  // that point, so nothing is visibly deferred.
+  const otherOrganizations = isMounted
+    ? (organizations?.data ?? [])
+        .filter(
+          (organizationEl: any) =>
+            String(organizationEl.id) !== String(organization?.id)
+        )
+        .slice(0, 10)
+    : [];
 
   return organization ? (
     <>

apps/app/src/components/Dashboard/DashboardNavbar/ProjectDropdown.tsx

@@ -7,6 +7,7 @@ import {
 import { Button } from '@intlayer/design-system/button';
 import { Container } from '@intlayer/design-system/container';
 import { DropDown } from '@intlayer/design-system/drop-down';
+import { useIsMounted } from '@intlayer/design-system/hooks';
 import { Modal } from '@intlayer/design-system/modal';
 import { ChevronsUpDown } from 'lucide-react';
 import { type ComponentProps, type FC, useState } from 'react';
@@ -19,6 +20,7 @@ type ProjectDropdownProps = Partial<ComponentProps<typeof DropDown.Panel>> & {
 
 export const ProjectDropdown: FC<ProjectDropdownProps> = (props) => {
   const { session } = useSession();
+  const isMounted = useIsMounted();
 
   const { data: projects } = useGetProjects();
   const { mutate: selectProject, isPending: isSelectProjectLoading } =
@@ -43,9 +45,15 @@ export const ProjectDropdown: FC<ProjectDropdownProps> = (props) => {
     selectProject(projectId);
   };
 
-  const otherProjects = (projects?.data ?? [])
-    .filter((projectEl: any) => String(projectEl.id) !== String(project?.id))
-    .slice(0, 10);
+  // Client-only list held back until after mount — see `OrganizationDropdown`
+  // for why SSR can never populate it.
+  const otherProjects = isMounted
+    ? (projects?.data ?? [])
+        .filter(
+          (projectEl: any) => String(projectEl.id) !== String(project?.id)
+        )
+        .slice(0, 10)
+    : [];
 
   return project ? (
     <>

apps/app/src/components/Dashboard/DashboardSidebar/DashboardSidebar.tsx

@@ -628,11 +628,9 @@ export const DashboardSidebar: FC<DashboardSidebarProps> = ({
           />
         </nav>
 
-        {!isCollapsed &&
-          !IS_SELF_HOSTED &&
-          process.env.NODE_ENV === 'development' && (
-            <ReviewerMarketplaceBanner />
-          )}
+        {!isCollapsed && !IS_SELF_HOSTED && import.meta.env.DEV && (
+          <ReviewerMarketplaceBanner />
+        )}
 
         {/* Environment switcher — shown when project has >1 environments */}
         {environments.length > 1 &&

apps/app/src/components/Dashboard/DashboardSidebar/ReviewerMarketplaceBanner.tsx

@@ -1,27 +1,27 @@
-import {} from '@intlayer/design-system/api';
 import { Button } from '@intlayer/design-system/button';
 import { Container } from '@intlayer/design-system/container';
-import { usePersistedStore } from '@intlayer/design-system/hooks';
+import { useIsMounted, usePersistedStore } from '@intlayer/design-system/hooks';
 import { App_ReviewerMarketplace_Path } from '@intlayer/design-system/routes';
 import { X } from 'lucide-react';
-import { type FC, useEffect } from 'react';
+import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
 import { Link } from '#components/Link/Link';
 
 const STORAGE_KEY = 'isReviewerMarketplaceBannerClosed';
 
 export const ReviewerMarketplaceBanner: FC = () => {
   const { reviewerMarketplace } = useIntlayer('dashboard-sidebar');
-  const [isVisible, setIsVisible] = usePersistedStore(STORAGE_KEY, false);
+  // The key stores the dismissal, as its name says. It previously held
+  // `isVisible`, so closing the banner persisted `false`, which the mount
+  // effect then read as "not closed" and re-opened — the banner could never be
+  // dismissed for good.
+  const [isClosed, setIsClosed] = usePersistedStore(STORAGE_KEY, false);
+  const isMounted = useIsMounted();
 
-  useEffect(() => {
-    const isClosed = localStorage.getItem(STORAGE_KEY) === 'true';
-    if (!isClosed) {
-      setIsVisible(true);
-    }
-  }, []);
-
-  if (!isVisible) return <></>;
+  // Stays hidden until mount: the server cannot know about a dismissal, and
+  // rendering before `usePersistedStore` has read it back would flash a banner
+  // the user already closed.
+  if (!isMounted || isClosed) return <></>;
 
   return (
     <Container
@@ -39,7 +39,7 @@ export const ReviewerMarketplaceBanner: FC = () => {
           variant="hoverable"
           size="icon-sm"
           Icon={X}
-          onClick={() => setIsVisible(false)}
+          onClick={() => setIsClosed(true)}
         />
       </div>
       <span className="text-neutral text-sm">

apps/app/src/components/Dashboard/DashboardSkeleton.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import { Skeleton } from '#components/Skeleton';
 
 export const DashboardSkeleton: FC = () => (
-  <div className="dashboard-theme flex h-screen max-h-screen flex-col bg-card">
+  <div className="flex h-screen max-h-screen flex-col bg-card">
     {/* Navbar Skeleton */}
     <Container
       className="sticky top-0 z-50 flex w-full flex-col gap-3 p-4"

apps/app/src/components/ReviewerProfilePage/ContactChat.tsx

@@ -69,7 +69,7 @@ export const ContactChat: FC<ContactChatProps> = ({ reviewer }) => {
       transparency="full"
       className="flex flex-1 flex-col overflow-hidden"
     >
-      <div className="border-neutral/20 border-b px-4 py-3">
+      <div className="border-neutral border-neutral/20 border-b px-4 py-3">
         <p className="font-semibold text-sm">
           {content.contact} {reviewer.name ?? 'reviewer'}
         </p>

apps/app/src/components/SwitchThemeSwitcher.tsx

@@ -1,3 +1,4 @@
+import { useIsMounted } from '@intlayer/design-system/hooks';
 import {
   SwitchSelector,
   type SwitchSelectorChoices,
@@ -9,6 +10,11 @@ import { useTheme } from '#/providers/ThemeProvider';
 
 export const SwitchThemeSwitcher: FC = () => {
   const { resolvedTheme, setTheme } = useTheme();
+  const isMounted = useIsMounted();
+
+  if (!isMounted) {
+    return null;
+  }
 
   const themeSwitcher = [
     {

apps/app/src/hooks/useDashboardRightPanel.ts

@@ -2,6 +2,13 @@ import { useSyncExternalStore } from 'react';
 
 type PanelState = { activePanel: string | null };
 
+/**
+ * Snapshot handed to the server render and to hydration. It has to be the same
+ * reference on every call, otherwise `useSyncExternalStore` sees a new value
+ * each render and loops.
+ */
+const SERVER_PANEL_STATE: PanelState = { activePanel: null };
+
 class PanelObservable {
   private listeners = new Set<() => void>();
   private state: PanelState = { activePanel: null };
@@ -15,6 +22,8 @@ class PanelObservable {
 
   getSnapshot = () => this.state;
 
+  getServerSnapshot = () => SERVER_PANEL_STATE;
+
   open = (id: string) => {
     const next = this.state.activePanel === id ? null : id;
     if (this.state.activePanel === next) return;
@@ -29,7 +38,9 @@ class PanelObservable {
   };
 
   private emit = () => {
-    this.listeners.forEach((l) => l());
+    this.listeners.forEach((listener) => {
+      listener();
+    });
   };
 }
 
@@ -39,7 +50,7 @@ export const useDashboardRightPanel = () => {
   const state = useSyncExternalStore(
     dashboardRightPanelManager.subscribe,
     dashboardRightPanelManager.getSnapshot,
-    () => ({ activePanel: null }) as PanelState
+    dashboardRightPanelManager.getServerSnapshot
   );
 
   return {

apps/app/src/hooks/useVisualEditorKeys.ts

@@ -1,5 +1,12 @@
 import { useSyncExternalStore } from 'react';
 
+/**
+ * Snapshot handed to the server render and to hydration. It has to be the same
+ * reference on every call, otherwise `useSyncExternalStore` sees a new value
+ * each render and loops.
+ */
+const SERVER_KEYS: string[] = [];
+
 class DisplayedKeysObservable {
   private listeners = new Set<() => void>();
   private state: string[] = [];
@@ -13,6 +20,8 @@ class DisplayedKeysObservable {
 
   getSnapshot = (): string[] => this.state;
 
+  getServerSnapshot = (): string[] => SERVER_KEYS;
+
   setKeys = (keys: string[]) => {
     if (
       keys.length === this.state.length &&
@@ -32,5 +41,5 @@ export const useVisualEditorKeys = (): string[] =>
   useSyncExternalStore(
     visualEditorKeysManager.subscribe,
     visualEditorKeysManager.getSnapshot,
-    () => []
+    visualEditorKeysManager.getServerSnapshot
   );

apps/app/src/router.tsx

@@ -1,6 +1,7 @@
 import { Loader } from '@intlayer/design-system/loader';
 import { getQueryClient } from '@intlayer/design-system/providers';
 import { createRouter as createTanStackRouter } from '@tanstack/react-router';
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query';
 import { NotFoundComponent } from '#components/NotFoundComponent';
 import { routeTree } from './routeTree.gen';
 
@@ -29,6 +30,22 @@ export function getRouter() {
     defaultPendingComponent: Loader,
   });
 
+  /**
+   * Dehydrates the query cache into the SSR payload and rehydrates it before
+   * the first client render. Without it, loaders such as the root's
+   * `sessionQueryOptions` prime `['session']` on the server only, so the server
+   * markup renders session-dependent UI (organization/project dropdowns) that
+   * the first client render — reading an empty cache — omits, and hydration
+   * fails.
+   */
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+    // `ReactQueryProvider` in `__root.tsx` already provides this same client,
+    // along with the toast and invalidation wiring the integration lacks.
+    wrapQueryClient: false,
+  });
+
   return router;
 }
 

apps/app/src/routes/{-$locale}/_dashboard/route.tsx

@@ -300,7 +300,7 @@ function DashboardLayout() {
   return (
     <AuthenticationBarrier accessRule="authenticated" locale={locale}>
       <div
-        className="dashboard-theme flex h-screen max-h-screen flex-col bg-card md:overflow-hidden"
+        className="flex h-screen max-h-screen flex-col bg-card md:overflow-hidden"
         style={{ fontSize: '75%' }}
       >
         <DashboardNavbar items={navigationItems} />