@tuturuuu/ui 0.2.0 → 0.3.1

package/src/components/ui/chart.test.tsx

@@ -0,0 +1,29 @@
+import { renderToString } from 'react-dom/server';
+import { Bar, BarChart } from 'recharts';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ChartContainer } from './chart';
+
+describe('ChartContainer', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('does not emit Recharts dimension warnings during server rendering', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    renderToString(
+      <ChartContainer
+        className="h-64 w-full"
+        config={{ clicks: { color: 'var(--primary)', label: 'Clicks' } }}
+      >
+        <BarChart data={[{ clicks: 1, day: 'Mon' }]}>
+          <Bar dataKey="clicks" />
+        </BarChart>
+      </ChartContainer>
+    );
+
+    expect(warn).not.toHaveBeenCalledWith(
+      expect.stringContaining('The width(-1) and height(-1) of chart')
+    );
+  });
+});

package/src/components/ui/chart.tsx

@@ -73,6 +73,11 @@ const ChartContainer = React.forwardRef<
 >(({ id, className, children, config, ...props }, ref) => {
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -87,9 +92,13 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        {mounted ? (
+          <RechartsPrimitive.ResponsiveContainer>
+            {children}
+          </RechartsPrimitive.ResponsiveContainer>
+        ) : (
+          <div aria-hidden className="h-full w-full" />
+        )}
       </div>
     </ChartContext.Provider>
   );

package/src/components/ui/custom/__tests__/settings-dialog-shell.test.tsx

@@ -88,11 +88,34 @@ describe('SettingsDialogShell keyboard navigation', () => {
     }));
   });
 
+  it('renders the fullscreen settings sheet chrome', () => {
+    renderShell();
+
+    const dialog = screen.getByRole('dialog');
+
+    expect(dialog).toHaveClass('h-dvh');
+    expect(dialog).toHaveClass('w-screen');
+    expect(dialog).toHaveClass('rounded-none');
+    expect(
+      screen.getAllByRole('button', { name: 'settings.back_to_app' }).length
+    ).toBeGreaterThan(0);
+  });
+
+  it('keeps settings groups expanded by default', () => {
+    renderShell();
+
+    expect(screen.getAllByText('Profile').length).toBeGreaterThan(0);
+    expect(screen.getByText('Appearance')).toBeVisible();
+    expect(screen.getByText('Forms')).toBeVisible();
+  });
+
   it('focuses settings search with slash and modifier search shortcuts', () => {
     renderShell();
 
     const dialog = screen.getByRole('dialog');
-    const searchInput = screen.getByPlaceholderText('search.search');
+    const searchInput = screen.getByPlaceholderText(
+      'settings.search_settings_placeholder'
+    );
 
     fireEvent.keyDown(dialog, { key: '/' });
     expect(searchInput).toHaveFocus();

package/src/components/ui/custom/__tests__/tuturuuu-logo.test.ts

@@ -1,10 +1,19 @@
 import { describe, expect, it } from 'vitest';
-import { TUTURUUU_LOGO_URL } from '../tuturuuu-logo';
+import {
+  TUTURUUU_LOCAL_LOGO_URL,
+  TUTURUUU_LOGO_URL,
+  TUTURUUU_REMOTE_LOGO_URL,
+} from '../tuturuuu-logo';
 
 describe('Tuturuuu logo asset URL', () => {
-  it('uses the canonical hosted logo instead of a per-app relative asset', () => {
-    expect(TUTURUUU_LOGO_URL).toBe(
+  it('keeps the canonical hosted logo as the shared default', () => {
+    expect(TUTURUUU_REMOTE_LOGO_URL).toBe(
       'https://tuturuuu.com/media/logos/transparent.png'
     );
+    expect(TUTURUUU_LOGO_URL).toBe(TUTURUUU_REMOTE_LOGO_URL);
+  });
+
+  it('exports the same-origin public logo path for apps that ship the asset', () => {
+    expect(TUTURUUU_LOCAL_LOGO_URL).toBe('/media/logos/transparent.png');
   });
 });

package/src/components/ui/custom/__tests__/workspace-select-helpers.test.ts

@@ -0,0 +1,39 @@
+import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
+import { describe, expect, it } from 'vitest';
+import { mergeWorkspaceSelectWorkspaces } from '../workspace-select-helpers';
+
+describe('mergeWorkspaceSelectWorkspaces', () => {
+  it('uses the current workspace fallback when the workspace list is unavailable', () => {
+    const fallback: InternalApiWorkspaceSummary = {
+      access_type: 'guest',
+      avatar_url: null,
+      guest_board_count: 1,
+      guest_highest_permission: 'edit',
+      guest_landing_path: '/tasks/boards/board-1',
+      guest_products: ['tasks'],
+      id: 'guest-workspace',
+      logo_url: null,
+      name: 'Shared workspace',
+      personal: false,
+    };
+
+    expect(mergeWorkspaceSelectWorkspaces(undefined, fallback)).toEqual([
+      fallback,
+    ]);
+  });
+
+  it('does not duplicate the current workspace when the list already includes it', () => {
+    const workspace: InternalApiWorkspaceSummary = {
+      access_type: 'member',
+      avatar_url: null,
+      id: 'workspace-1',
+      logo_url: null,
+      name: 'Workspace',
+      personal: false,
+    };
+
+    expect(mergeWorkspaceSelectWorkspaces([workspace], workspace)).toEqual([
+      workspace,
+    ]);
+  });
+});

package/src/components/ui/custom/common-footer.tsx

@@ -3,7 +3,15 @@ import Link from 'next/link';
 import { Separator } from '../separator';
 import { TuturuuLogo } from './tuturuuu-logo';
 
-export function CommonFooter({ t, devMode }: { t: any; devMode: boolean }) {
+export function CommonFooter({
+  t,
+  devMode,
+  logoSrc,
+}: {
+  t: any;
+  devMode: boolean;
+  logoSrc?: string;
+}) {
   const TUTURUUU_URL = devMode
     ? getLocalInternalAppUrl('platform', 'http://localhost:7803')
     : 'https://tuturuuu.com';
@@ -35,6 +43,7 @@ export function CommonFooter({ t, devMode }: { t: any; devMode: boolean }) {
               width={64}
               height={64}
               alt="logo"
+              src={logoSrc}
               className="h-12 w-12"
             />
             <div className="font-semibold text-4xl">Tuturuuu</div>
@@ -166,6 +175,12 @@ export function CommonFooter({ t, devMode }: { t: any; devMode: boolean }) {
             >
               {t('common.branding')}
             </Link>
+            <Link
+              href={`${TUTURUUU_URL}/ui`}
+              className="text-foreground/80 text-sm hover:text-foreground hover:underline md:w-fit"
+            >
+              {t('common.ui')}
+            </Link>
           </div>
 
           <div className="grid gap-1 md:items-start">

package/src/components/ui/custom/production-indicator.tsx

@@ -1,4 +1,4 @@
-import { DatabaseZap } from '@tuturuuu/icons';
+import { DatabaseZap } from '@tuturuuu/icons/lucide';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 
 export const IS_PRODUCTION_DB =

package/src/components/ui/custom/settings/sidebar-settings.tsx

@@ -34,7 +34,7 @@ export default function SidebarSettings({ useSidebar }: SidebarSettingsProps) {
     value: expandSettingsAccordions,
     setValue: setExpandSettingsAccordions,
     isLoading: isLoadingExpandAccordions,
-  } = useUserBooleanConfig('EXPAND_SETTINGS_ACCORDIONS', false);
+  } = useUserBooleanConfig('EXPAND_SETTINGS_ACCORDIONS', true);
 
   return (
     <div className="space-y-8">

package/src/components/ui/custom/settings/task-settings.tsx

@@ -20,6 +20,7 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import { TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID } from '../../tu-do/shared/task-due-date-visibility';
 
 interface TaskSettingsData {
   task_auto_assign_to_self: boolean;
@@ -67,6 +68,12 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: openDefaultBoardLoading,
     isPending: openDefaultBoardPending,
   } = useUserBooleanConfig('TASKS_OPEN_DEFAULT_BOARD', true);
+  const {
+    value: showReviewDueDates,
+    setValue: setShowReviewDueDates,
+    isLoading: showReviewDueDatesLoading,
+    isPending: showReviewDueDatesPending,
+  } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
 
   const { data: submitShortcut, isLoading: submitShortcutLoading } =
     useUserConfig('TASK_SUBMIT_SHORTCUT', 'enter');
@@ -202,6 +209,17 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('show_review_due_dates')}
+          description={t('show_review_due_dates_description')}
+        >
+          <Switch
+            checked={showReviewDueDates}
+            onCheckedChange={setShowReviewDueDates}
+            disabled={showReviewDueDatesLoading || showReviewDueDatesPending}
+          />
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('submit_shortcut')}
           description={t('submit_shortcut_description')}

package/src/components/ui/custom/settings-dialog-shell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChevronDown, ChevronRight, Search } from '@tuturuuu/icons';
+import { ArrowLeft, ChevronDown, ChevronRight, Search } from '@tuturuuu/icons';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -24,6 +24,7 @@ import {
   CommandList,
 } from '@tuturuuu/ui/command';
 import {
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogTitle,
@@ -52,7 +53,6 @@ import {
   SidebarProvider,
 } from '@tuturuuu/ui/sidebar';
 import { cn } from '@tuturuuu/utils/format';
-import { usePlatform } from '@tuturuuu/utils/hooks/use-platform';
 import { removeAccents } from '@tuturuuu/utils/text-helper';
 import { useTranslations } from 'next-intl';
 import type { ComponentType, KeyboardEvent, ReactNode } from 'react';
@@ -81,11 +81,11 @@ export interface SettingsDialogShellProps {
   onActiveTabChange: (tab: string) => void;
   /**
    * Group labels that should be expanded by default.
-   * All other groups will be collapsed.
-   * If not provided, only the first group expands by default.
+   * Used when expandAllAccordions is false.
+   * If not provided in that mode, only the first group expands.
    */
   primaryGroupLabels?: string[];
-  /** Override to expand all accordions (user preference) */
+  /** Override to expand all accordions (user preference). Defaults to expanded. */
   expandAllAccordions?: boolean;
   /** Enable dialog-scoped keyboard shortcuts for search and tab navigation */
   keyboardNavigation?: boolean;
@@ -111,21 +111,19 @@ function isEditableShortcutTarget(target: EventTarget | null) {
  *
  * Each app provides its own `navItems` (ordered by priority) and
  * renders tab-specific content via `children`. The `primaryGroupLabels`
- * prop controls which groups expand by default — enabling apps to
- * highlight their domain (e.g., tasks-first in Tasks, calendar-first
- * in a future calendar app).
+ * prop controls which groups expand when `expandAllAccordions` is false,
+ * enabling apps to highlight their domain while preserving a compact mode.
  */
 export function SettingsDialogShell({
   navItems,
   activeTab,
   onActiveTabChange,
   primaryGroupLabels,
-  expandAllAccordions = false,
+  expandAllAccordions = true,
   keyboardNavigation = false,
   children,
 }: SettingsDialogShellProps) {
   const t = useTranslations();
-  const { isMac, modKey } = usePlatform();
   const isMobile = useIsMobile();
   const desktopSearchInputRef = useRef<HTMLInputElement>(null);
   const mobileSearchInputRef = useRef<HTMLInputElement>(null);
@@ -275,8 +273,9 @@ export function SettingsDialogShell({
 
   return (
     <DialogContent
-      className="flex h-[90vh] flex-col overflow-hidden p-0 md:max-h-200 md:max-w-225 lg:max-h-250 lg:max-w-250 xl:max-w-300"
+      className="top-0 left-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-col gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none"
       onKeyDown={handleKeyboardNavigation}
+      showCloseButton={false}
     >
       <DialogTitle className="sr-only">{t('common.settings')}</DialogTitle>
       <DialogDescription className="sr-only">
@@ -285,24 +284,29 @@ export function SettingsDialogShell({
       <SidebarProvider className="flex h-full min-h-0 items-start">
         <Sidebar
           collapsible="none"
-          className="hidden h-full w-64 flex-col border-r bg-muted/30 md:flex"
+          className="hidden h-full w-72 flex-col border-r bg-muted/30 md:flex"
         >
-          <SidebarHeader className="z-10 p-4 pb-0">
-            <div className="relative mb-2">
+          <SidebarHeader className="z-10 gap-3 p-4 pb-0">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                className="h-9 justify-start px-2 text-muted-foreground"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                {t('settings.back_to_app')}
+              </Button>
+            </DialogClose>
+            <div className="relative">
               <Search className="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground" />
               <SidebarInput
                 ref={desktopSearchInputRef}
-                placeholder={t('search.search')}
+                placeholder={t('settings.search_settings_placeholder')}
                 className="bg-background pl-8"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
             </div>
-            <div className="flex items-center justify-between px-1">
-              <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
-                Detected OS: {isMac ? 'macOS' : 'Windows/Linux'} ({modKey})
-              </span>
-            </div>
           </SidebarHeader>
           <SidebarContent className="overflow-y-auto p-4">
             {filteredNavItems.map((group, index) => (
@@ -358,7 +362,18 @@ export function SettingsDialogShell({
           </SidebarContent>
         </Sidebar>
         <main className="flex h-full flex-1 flex-col overflow-hidden bg-background">
-          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 pr-12 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-6 md:pr-6">
+          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-6">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="shrink-0 text-muted-foreground md:hidden"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                <span className="sr-only">{t('settings.back_to_app')}</span>
+              </Button>
+            </DialogClose>
             <div className="flex flex-1 items-center gap-2 md:flex-initial">
               {isMobile && (
                 <Drawer open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
@@ -390,7 +405,7 @@ export function SettingsDialogShell({
                     <Command className="rounded-none border-0">
                       <CommandInput
                         ref={mobileSearchInputRef}
-                        placeholder={t('search.search')}
+                        placeholder={t('settings.search_settings_placeholder')}
                       />
                       <CommandList className="max-h-[50vh]">
                         <CommandEmpty>
@@ -458,7 +473,7 @@ export function SettingsDialogShell({
             </div>
           </header>
           <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-6">
-            <div className="mx-auto w-full max-w-3xl space-y-6">
+            <div className="mx-auto w-full max-w-4xl space-y-6">
               <div className="space-y-1">
                 <h2 className="font-semibold text-lg tracking-tight">
                   {activeItem?.label}

package/src/components/ui/custom/sidebar-context-compile-graph.test.ts

@@ -0,0 +1,60 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+function readSidebarSource(fileName: string) {
+  const candidates = [
+    join(process.cwd(), 'src/components/ui/custom', fileName),
+    join(process.cwd(), 'packages/ui/src/components/ui/custom', fileName),
+  ];
+  const sourcePath = candidates.find((candidate) => existsSync(candidate));
+
+  if (!sourcePath) {
+    throw new Error(`Unable to resolve ${fileName} from ${process.cwd()}`);
+  }
+
+  return readFileSync(sourcePath, 'utf8');
+}
+
+const sidebarContextSource = readSidebarSource('sidebar-context.tsx');
+const sidebarRemoteBehaviorBridgeSource = readSidebarSource(
+  'sidebar-remote-behavior-bridge.tsx'
+);
+
+function staticImportPattern(modulePath: string) {
+  const escapedModulePath = modulePath.replace(
+    /[.*+?^${}()|[\]\\]/gu,
+    String.raw`\$&`
+  );
+
+  return new RegExp(
+    String.raw`^\s*import\s+(?!type\b)[\s\S]*?\sfrom\s+['"]${escapedModulePath}['"];`,
+    'mu'
+  );
+}
+
+function dynamicImportPattern(modulePath: string) {
+  const escapedModulePath = modulePath.replace(
+    /[.*+?^${}()|[\]\\]/gu,
+    String.raw`\$&`
+  );
+
+  return new RegExp(
+    String.raw`import\s*\(\s*['"]${escapedModulePath}['"]\s*\)`,
+    'mu'
+  );
+}
+
+describe('sidebar context compile graph', () => {
+  it('loads remote user-config sync after hydration', () => {
+    expect(sidebarContextSource).not.toMatch(
+      staticImportPattern('@tuturuuu/ui/hooks/use-user-config')
+    );
+    expect(sidebarContextSource).toMatch(
+      dynamicImportPattern('./sidebar-remote-behavior-bridge')
+    );
+    expect(sidebarRemoteBehaviorBridgeSource).toMatch(
+      staticImportPattern('@tuturuuu/ui/hooks/use-user-config')
+    );
+  });
+});

package/src/components/ui/custom/sidebar-context.tsx

@@ -1,12 +1,9 @@
 'use client';
 
 import { useLocalStorage } from '@tuturuuu/ui/hooks/use-local-storage';
-import {
-  useUpdateUserConfig,
-  useUserConfig,
-} from '@tuturuuu/ui/hooks/use-user-config';
 import { setCookie } from 'cookies-next';
 import {
+  type ComponentType,
   createContext,
   type Dispatch,
   type ReactNode,
@@ -14,7 +11,6 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 
@@ -23,9 +19,6 @@ export const SIDEBAR_BEHAVIOR_CONFIG_KEY = 'SIDEBAR_BEHAVIOR';
 
 export type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
 
-const isValidBehavior = (value: string | undefined): value is SidebarBehavior =>
-  value === 'expanded' || value === 'collapsed' || value === 'hover';
-
 interface SidebarContextProps {
   behavior: SidebarBehavior;
   setBehavior: Dispatch<SetStateAction<SidebarBehavior>>;
@@ -42,6 +35,38 @@ export const SidebarContext = createContext<SidebarContextProps | undefined>(
 // Persistent cookie options — ensures setting survives browser restarts
 const COOKIE_OPTIONS = { maxAge: 365 * 24 * 60 * 60, path: '/' } as const;
 
+type SidebarRemoteBehaviorBridgeComponent = ComponentType<{
+  behavior: SidebarBehavior;
+  localOverride: boolean;
+  localOverrideVersion: number;
+  onApplyRemoteBehavior: (newBehavior: SidebarBehavior) => void;
+  onRemoteBehaviorAvailable: (remoteBehavior: SidebarBehavior) => void;
+  userChangeVersion: number;
+}>;
+
+function useSidebarRemoteBehaviorBridge() {
+  const [RemoteBehaviorBridge, setRemoteBehaviorBridge] =
+    useState<SidebarRemoteBehaviorBridgeComponent | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    // biome-ignore lint/suspicious/noTsIgnore: NodeNext requires .js, but Next/Turbopack resolves workspace TypeScript source here before package emit.
+    // @ts-ignore
+    void import('./sidebar-remote-behavior-bridge').then((module) => {
+      if (active) {
+        setRemoteBehaviorBridge(() => module.SidebarRemoteBehaviorBridge);
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  return RemoteBehaviorBridge;
+}
+
 export const SidebarProvider = ({
   children,
   initialBehavior,
@@ -54,74 +79,39 @@ export const SidebarProvider = ({
     'sidebar-local-override',
     false
   );
-  const hasAppliedRemote = useRef(false);
-  // Prevents remote sync from overwriting a user-initiated change
-  const userChangedRef = useRef(false);
-  // Allows reading current behavior inside the sync effect without
-  // adding `behavior` to its dependency array
-  const behaviorRef = useRef(behavior);
-  behaviorRef.current = behavior;
-
-  // Fetch account-wide preference
-  const { data: remoteBehavior, isSuccess: remoteLoaded } = useUserConfig(
-    SIDEBAR_BEHAVIOR_CONFIG_KEY,
-    'expanded'
+  const [remoteBehavior, setRemoteBehavior] = useState<SidebarBehavior | null>(
+    null
   );
+  const [userChangeVersion, setUserChangeVersion] = useState(0);
+  const [localOverrideVersion, setLocalOverrideVersion] = useState(0);
+  const RemoteBehaviorBridge = useSidebarRemoteBehaviorBridge();
 
-  const updateConfig = useUpdateUserConfig();
-
-  // Sync from user_configs when not locally overridden
-  useEffect(() => {
-    if (
-      !remoteLoaded ||
-      localOverride ||
-      hasAppliedRemote.current ||
-      userChangedRef.current
-    )
-      return;
-    hasAppliedRemote.current = true;
-    if (
-      isValidBehavior(remoteBehavior) &&
-      remoteBehavior !== behaviorRef.current
-    ) {
-      setBehavior(remoteBehavior);
-      setCookie(SIDEBAR_BEHAVIOR_COOKIE_NAME, remoteBehavior, COOKIE_OPTIONS);
-    }
-  }, [remoteLoaded, remoteBehavior, localOverride]);
+  const applyBehavior = useCallback((newBehavior: SidebarBehavior) => {
+    setBehavior(newBehavior);
+    setCookie(SIDEBAR_BEHAVIOR_COOKIE_NAME, newBehavior, COOKIE_OPTIONS);
+  }, []);
 
   const handleBehaviorChange = useCallback(
     (newBehavior: SidebarBehavior) => {
-      userChangedRef.current = true;
-      setBehavior(newBehavior);
-      // Always update cookie for SSR
-      setCookie(SIDEBAR_BEHAVIOR_COOKIE_NAME, newBehavior, COOKIE_OPTIONS);
-      // Save to user_configs (account-wide) unless locally overridden
+      applyBehavior(newBehavior);
+
       if (!localOverride) {
-        updateConfig.mutate({
-          configId: SIDEBAR_BEHAVIOR_CONFIG_KEY,
-          value: newBehavior,
-        });
+        setUserChangeVersion((version) => version + 1);
       }
     },
-    [localOverride, updateConfig]
+    [applyBehavior, localOverride]
   );
 
   const setLocalOverride = useCallback(
     (enabled: boolean) => {
       setLocalOverrideRaw(enabled);
-      if (!enabled && isValidBehavior(remoteBehavior)) {
-        // Turning off local override — sync to account-wide value
-        setBehavior(remoteBehavior);
-        setCookie(SIDEBAR_BEHAVIOR_COOKIE_NAME, remoteBehavior, COOKIE_OPTIONS);
-      } else if (enabled) {
-        // Turning on local override — save current behavior to account-wide first
-        updateConfig.mutate({
-          configId: SIDEBAR_BEHAVIOR_CONFIG_KEY,
-          value: behavior,
-        });
+      setLocalOverrideVersion((version) => version + 1);
+
+      if (!enabled && remoteBehavior) {
+        applyBehavior(remoteBehavior);
       }
     },
-    [setLocalOverrideRaw, remoteBehavior, behavior, updateConfig]
+    [applyBehavior, remoteBehavior, setLocalOverrideRaw]
   );
 
   return (
@@ -134,6 +124,16 @@ export const SidebarProvider = ({
         setLocalOverride,
       }}
     >
+      {RemoteBehaviorBridge && (
+        <RemoteBehaviorBridge
+          behavior={behavior}
+          localOverride={localOverride}
+          localOverrideVersion={localOverrideVersion}
+          onApplyRemoteBehavior={applyBehavior}
+          onRemoteBehaviorAvailable={setRemoteBehavior}
+          userChangeVersion={userChangeVersion}
+        />
+      )}
       {children}
     </SidebarContext.Provider>
   );