From 5d7e27c54c4dc5a810cc39d635016b4e2ce8ebc1 Mon Sep 17 00:00:00 2001
From: Anuj Singh <anujsingh.devx@gmail.com>
Date: Sat, 3 Jan 2026 17:10:33 +0000
Subject: [PATCH] test: add tests for NavbarDesktop

---
 .../Navbar/__tests__/NavbarDesktop.test.tsx   | 144 +++---
 .../__snapshots__/NavbarDesktop.test.tsx.snap | 473 ++++++++++++++----
 2 files changed, 459 insertions(+), 158 deletions(-)

diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx
index 7cca11b5..5f90174c 100644
--- a/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx
+++ b/frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx
@@ -1,46 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NavbarDesktop } from '../NavbarDesktop';
+import { Props, routeList } from '../navbar-utils';
+
+// Mock external dependencies
 jest.mock('@/components/ui/slider', () => ({
-  Slider: () => <div data-testid="sync-slider" />,
+  Slider: () => <div data-testid="sync-slider">slider</div>,
 }));
+
 jest.mock('@/components/ui/switch', () => ({
   Switch: ({ onCheckedChange }: any) => (
     <button onClick={() => onCheckedChange(true)}>toggle</button>
   ),
 }));
-jest.mock('@/components/utils/ExportTasks', () => ({
-  exportTasksAsJSON: jest.fn(),
-  exportTasksAsTXT: jest.fn(),
-}));
-jest.mock('../navbar-utils', () => ({
-  ...jest.requireActual('../navbar-utils'),
-  deleteAllTasks: jest.fn(),
+
+jest.mock('@/components/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuContent: ({ children }: any) => <div>{children}</div>,
+  DropdownMenuItem: ({ children, onClick, onSelect }: any) => (
+    <div onClick={onClick} onMouseDown={(e) => onSelect?.(e)}>
+      {children}
+    </div>
+  ),
+  DropdownMenuLabel: ({ children }: any) => <div>{children}</div>,
 }));
+
 jest.mock('@/components/ui/dialog', () => ({
   Dialog: ({ children }: any) => <div>{children}</div>,
   DialogTrigger: ({ children }: any) => <div>{children}</div>,
   DialogContent: ({ children }: any) => (
-    <div data-testid="export-dialog">{children}</div>
+    <div data-testid="dialog">{children}</div>
   ),
   DialogHeader: ({ children }: any) => <div>{children}</div>,
   DialogTitle: ({ children }: any) => <h2>{children}</h2>,
   DialogDescription: ({ children }: any) => <p>{children}</p>,
 }));
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NavbarDesktop } from '../NavbarDesktop';
-import { Props, routeList } from '../navbar-utils';
 
-jest.mock('../navbar-utils', () => ({
-  deleteAllTasks: jest.fn(),
-  handleLogout: jest.fn(),
-  routeList: [
-    { href: '#', label: 'Home' },
-    { href: '#tasks', label: 'Tasks' },
-    { href: '#setup-guide', label: 'Setup Guide' },
-    { href: '#faq', label: 'FAQ' },
-  ],
+jest.mock('@/components/ui/avatar', () => ({
+  Avatar: ({ children }: any) => <div>{children}</div>,
+  AvatarImage: () => <img alt="avatar" />,
+  AvatarFallback: ({ children }: any) => <button>{children}</button>,
+}));
+
+jest.mock('@/components/utils/ThemeModeToggle', () => ({
+  ModeToggle: () => <div data-testid="mode-toggle" />,
 }));
+
 jest.mock('@/components/HomeComponents/DevLogs/DevLogs', () => ({
-  DevLogs: () => <div data-testid="dev-logs-dialog" />,
+  DevLogs: () => <div data-testid="dev-logs" />,
+}));
+
+jest.mock('@/components/utils/TaskAutoSync', () => ({
+  useTaskAutoSync: jest.fn(),
+}));
+
+jest.mock('@/components/utils/ExportTasks', () => ({
+  exportTasksAsJSON: jest.fn(),
+  exportTasksAsTXT: jest.fn(),
 }));
 
 jest.mock('@/components/utils/URLs', () => ({
@@ -48,19 +65,30 @@ jest.mock('@/components/utils/URLs', () => ({
     githubRepoURL: 'https://github.com/test/repo',
   },
 }));
+
+jest.mock('../navbar-utils', () => ({
+  routeList: [
+    { href: '#', label: 'Home' },
+    { href: '#tasks', label: 'Tasks' },
+    { href: '#faq', label: 'FAQ' },
+  ],
+  deleteAllTasks: jest.fn(),
+  handleLogout: jest.fn(),
+}));
+
 const mockSetIsLoading = jest.fn();
 
-const mockProps: Props = {
-  imgurl: 'http://example.com/image.png',
+const baseProps: Props = {
+  imgurl: 'http://example.com/avatar.png',
   email: 'test@example.com',
   encryptionSecret: 'secret',
   origin: 'http://localhost:3000',
-  UUID: '1234-5678',
+  UUID: 'uuid',
   tasks: [],
 };
 
-const extendedProps = {
-  ...mockProps,
+const props = {
+  ...baseProps,
   isLoading: false,
   setIsLoading: mockSetIsLoading,
 };
@@ -69,30 +97,28 @@ describe('NavbarDesktop', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
-  it('renders the navigation links correctly', () => {
-    render(<NavbarDesktop {...extendedProps} />);
+
+  it('renders navigation links', () => {
+    render(<NavbarDesktop {...props} />);
 
     routeList.forEach((route) => {
       expect(screen.getByText(route.label)).toBeInTheDocument();
     });
   });
-  it('opens user menu and displays email', async () => {
-    render(<NavbarDesktop {...extendedProps} />);
 
-    const avatarFallback = screen.getByText('CN');
-    await userEvent.click(avatarFallback);
+  it('opens user menu and shows email', async () => {
+    render(<NavbarDesktop {...props} />);
 
-    expect(screen.getAllByText('test@example.com')[0]).toBeInTheDocument();
+    await userEvent.click(screen.getByText('CN'));
+    expect(screen.getAllByText('test@example.com').length).toBeGreaterThan(0);
   });
 
-  it('opens github link when clicked', async () => {
+  it('opens GitHub repo in new tab', async () => {
     const openSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
 
-    const user = userEvent.setup();
-    render(<NavbarDesktop {...extendedProps} />);
-
-    await user.click(screen.getByText('CN'));
-    await user.click(screen.getByText('GitHub'));
+    render(<NavbarDesktop {...props} />);
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('GitHub'));
 
     expect(openSpy).toHaveBeenCalledWith(
       'https://github.com/test/repo',
@@ -101,46 +127,40 @@ describe('NavbarDesktop', () => {
 
     openSpy.mockRestore();
   });
-  it('exports tasks as TXT and triggers export handler', async () => {
-    const user = userEvent.setup();
-    const { exportTasksAsTXT } = require('@/components/utils/ExportTasks');
-
-    render(<NavbarDesktop {...extendedProps} />);
 
-    await user.click(screen.getByText('CN'));
-    await user.click(screen.getByText('Export tasks'));
-
-    expect(screen.getByText(/Would you like to download/i)).toBeInTheDocument();
+  it('exports tasks as TXT', async () => {
+    const { exportTasksAsTXT } = require('@/components/utils/ExportTasks');
 
-    await user.click(screen.getByText('Download .txt'));
+    render(<NavbarDesktop {...props} />);
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('Export tasks'));
+    await userEvent.click(screen.getByText('Download .txt'));
 
     expect(exportTasksAsTXT).toHaveBeenCalledWith([]);
   });
+
   it('exports tasks as JSON', async () => {
     const { exportTasksAsJSON } = require('@/components/utils/ExportTasks');
 
-    render(<NavbarDesktop {...extendedProps} />);
-
+    render(<NavbarDesktop {...props} />);
     await userEvent.click(screen.getByText('CN'));
     await userEvent.click(screen.getByText('Export tasks'));
     await userEvent.click(screen.getByText('Download .json'));
 
     expect(exportTasksAsJSON).toHaveBeenCalledWith([]);
   });
-  it('shows slider when auto sync is enabled', async () => {
-    const user = userEvent.setup();
-    render(<NavbarDesktop {...extendedProps} />);
 
-    await user.click(screen.getByText('CN'));
-    await user.click(screen.getByText('toggle'));
+  it('enables auto sync and shows slider', async () => {
+    render(<NavbarDesktop {...props} />);
+
+    await userEvent.click(screen.getByText('CN'));
+    await userEvent.click(screen.getByText('toggle'));
 
     expect(screen.getByTestId('sync-slider')).toBeInTheDocument();
   });
-});
 
-describe('NavbarDesktop snapshot', () => {
-  it('renders correctly', () => {
-    const { asFragment } = render(<NavbarDesktop {...extendedProps} />);
+  it('renders consistently (snapshot)', () => {
+    const { asFragment } = render(<NavbarDesktop {...props} />);
     expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap
index 72a1291c..4a8e3e30 100644
--- a/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/NavbarDesktop.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NavbarDesktop snapshot renders correctly 1`] = `
+exports[`NavbarDesktop renders consistently (snapshot) 1`] = `
 <DocumentFragment>
   <div
     class="hidden md:flex items-center justify-between w-full"
@@ -22,13 +22,6 @@ exports[`NavbarDesktop snapshot renders correctly 1`] = `
       >
         Tasks
       </a>
-      <a
-        class="text-[17px] inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-3 py-2"
-        href="#setup-guide"
-        rel="noreferrer noopener"
-      >
-        Setup Guide
-      </a>
       <a
         class="text-[17px] inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-3 py-2"
         href="#faq"
@@ -40,94 +33,382 @@ exports[`NavbarDesktop snapshot renders correctly 1`] = `
     <div
       class="hidden md:flex items-center gap-2"
     >
-      <span
-        aria-expanded="false"
-        aria-haspopup="menu"
-        class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
-        data-state="closed"
-        id="radix-:ID:"
-        type="button"
-      >
-        <span
-          class="flex h-full w-full items-center justify-center rounded-full bg-muted"
-        >
-          CN
-        </span>
-      </span>
-      <button
-        aria-expanded="false"
-        aria-haspopup="menu"
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10 ghost"
-        data-state="closed"
-        id="radix-:ID:"
-        type="button"
-      >
-        <svg
-          class="lucide lucide-sun h-[1.1rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-          data-testid="sun-icon"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="12"
-            cy="12"
-            r="4"
-          />
-          <path
-            d="M12 2v2"
-          />
-          <path
-            d="M12 20v2"
-          />
-          <path
-            d="m4.93 4.93 1.41 1.41"
-          />
-          <path
-            d="m17.66 17.66 1.41 1.41"
-          />
-          <path
-            d="M2 12h2"
-          />
-          <path
-            d="M20 12h2"
-          />
-          <path
-            d="m6.34 17.66-1.41 1.41"
-          />
-          <path
-            d="m19.07 4.93-1.41 1.41"
-          />
-        </svg>
-        <svg
-          class="lucide lucide-moon absolute h-[1.1rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-          data-testid="moon-icon"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"
-          />
-        </svg>
-        <span
-          class="sr-only"
-        >
-          Toggle theme
-        </span>
-      </button>
+      <div>
+        <div>
+          <div>
+            <img
+              alt="avatar"
+            />
+            <button>
+              CN
+            </button>
+          </div>
+        </div>
+        <div>
+          <div>
+            test@example.com
+          </div>
+          <div>
+            <div>
+              <div>
+                <svg
+                  class="lucide lucide-trash2 mr-2 h-4 w-4"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3 6h18"
+                  />
+                  <path
+                    d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                  />
+                  <path
+                    d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                  />
+                  <line
+                    x1="10"
+                    x2="10"
+                    y1="11"
+                    y2="17"
+                  />
+                  <line
+                    x1="14"
+                    x2="14"
+                    y1="11"
+                    y2="17"
+                  />
+                </svg>
+                Delete all tasks
+              </div>
+            </div>
+            <div
+              data-testid="dialog"
+            >
+              <div>
+                <h2>
+                  Delete All Tasks?
+                </h2>
+              </div>
+              <div
+                class="py-4"
+              >
+                <p
+                  class="text-base mb-2"
+                >
+                  Are you sure you want to delete all tasks for 
+                  <span
+                    class="font-semibold"
+                  >
+                    test@example.com
+                  </span>
+                  ?
+                </p>
+                <p
+                  class="text-sm text-muted-foreground"
+                >
+                  This action cannot be undone. All your tasks will be permanently deleted from the local database.
+                </p>
+              </div>
+              <div
+                class="flex justify-end gap-4"
+              >
+                <button
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-3 py-2"
+                >
+                  Cancel
+                </button>
+                <button
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-3 py-2"
+                >
+                  <svg
+                    class="lucide lucide-trash2 mr-2 h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3 6h18"
+                    />
+                    <path
+                      d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                    />
+                    <path
+                      d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                    />
+                    <line
+                      x1="10"
+                      x2="10"
+                      y1="11"
+                      y2="17"
+                    />
+                    <line
+                      x1="14"
+                      x2="14"
+                      y1="11"
+                      y2="17"
+                    />
+                  </svg>
+                  Delete All Tasks
+                </button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div>
+                <svg
+                  class="lucide lucide-terminal mr-2 h-4 w-4"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polyline
+                    points="4 17 10 11 4 5"
+                  />
+                  <line
+                    x1="12"
+                    x2="20"
+                    y1="19"
+                    y2="19"
+                  />
+                </svg>
+                <span>
+                  Developer Logs
+                </span>
+              </div>
+            </div>
+            <div
+              data-testid="dialog"
+            >
+              <div>
+                <h2>
+                  Developer Logs
+                </h2>
+                <p>
+                  View sync operation logs with timestamps and status information.
+                </p>
+              </div>
+              <div
+                data-testid="dev-logs"
+              />
+            </div>
+          </div>
+          <div>
+            <svg
+              class="lucide lucide-github mr-2 h-4 w-4"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+              />
+              <path
+                d="M9 18c-4.51 2-5-2-7-2"
+              />
+            </svg>
+            <span>
+              GitHub
+            </span>
+          </div>
+          <div>
+            <div>
+              <div>
+                <svg
+                  class="lucide lucide-file-down mr-2 h-4 w-4"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                  />
+                  <polyline
+                    points="14 2 14 8 20 8"
+                  />
+                  <path
+                    d="M12 18v-6"
+                  />
+                  <path
+                    d="m9 15 3 3 3-3"
+                  />
+                </svg>
+                <span>
+                  Export tasks
+                </span>
+              </div>
+            </div>
+            <div
+              data-testid="dialog"
+            >
+              <div>
+                <p>
+                  Would you like to download your tasks as a JSON file or a TXT file?
+                </p>
+              </div>
+              <div
+                class="flex justify-end gap-4 mt-4"
+              >
+                <button
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-10 px-3 py-2 bg-[#3B82F6] hover:bg-[#3B82F6] focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none"
+                >
+                  <svg
+                    class="lucide lucide-file-text mr-2 h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                    />
+                    <polyline
+                      points="14 2 14 8 20 8"
+                    />
+                    <line
+                      x1="16"
+                      x2="8"
+                      y1="13"
+                      y2="13"
+                    />
+                    <line
+                      x1="16"
+                      x2="8"
+                      y1="17"
+                      y2="17"
+                    />
+                    <line
+                      x1="10"
+                      x2="8"
+                      y1="9"
+                      y2="9"
+                    />
+                  </svg>
+                  Download .txt
+                </button>
+                <button
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-10 px-3 py-2 bg-[#3B82F6] hover:bg-[#3B82F6]"
+                >
+                  <svg
+                    class="lucide lucide-file-json mr-2 h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                    />
+                    <polyline
+                      points="14 2 14 8 20 8"
+                    />
+                    <path
+                      d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"
+                    />
+                    <path
+                      d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"
+                    />
+                  </svg>
+                  Download .json
+                </button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div
+              class="flex flex-col space-y-3 p-1 w-full"
+            >
+              <div
+                class="flex items-center justify-between space-x-2"
+              >
+                <label
+                  class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  for="autosync-switch"
+                >
+                  Auto sync tasks
+                </label>
+                <button>
+                  toggle
+                </button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <svg
+              class="lucide lucide-log-out mr-2 h-4 w-4"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+              />
+              <polyline
+                points="16 17 21 12 16 7"
+              />
+              <line
+                x1="21"
+                x2="9"
+                y1="12"
+                y2="12"
+              />
+            </svg>
+            <span>
+              Log out
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        data-testid="mode-toggle"
+      />
     </div>
   </div>
 </DocumentFragment>