Layout improvements

packages/ui/src/components/app/app-appearance-settings-screen.tsx

@@ -1,10 +1,10 @@
 import { Check, Laptop, Moon, Palette, Sun } from 'lucide-react';
 
 import { ThemeColor, ThemeMode } from '@colanode/client/types';
-import { Breadcrumb } from '@colanode/ui/components/workspaces/breadcrumbs/breadcrumb';
-import { BreadcrumbItem } from '@colanode/ui/components/workspaces/breadcrumbs/breadcrumb-item';
 import { Button } from '@colanode/ui/components/ui/button';
 import { Separator } from '@colanode/ui/components/ui/separator';
+import { Breadcrumb } from '@colanode/ui/components/workspaces/breadcrumbs/breadcrumb';
+import { BreadcrumbItem } from '@colanode/ui/components/workspaces/breadcrumbs/breadcrumb-item';
 import { useMutation } from '@colanode/ui/hooks/use-mutation';
 import { cn } from '@colanode/ui/lib/utils';
 import { useAppStore } from '@colanode/ui/stores/app';

packages/ui/src/components/app/app-layout.tsx

@@ -0,0 +1,22 @@
+import { match } from 'ts-pattern';
+
+import { AppType } from '@colanode/client/types';
+import { LayoutDesktop } from '@colanode/ui/components/layouts/layout-desktop';
+import { LayoutMobile } from '@colanode/ui/components/layouts/layout-mobile';
+import { LayoutWeb } from '@colanode/ui/components/layouts/layout-web';
+
+interface AppLayoutProps {
+  type: AppType;
+}
+
+export const AppLayout = ({ type }: AppLayoutProps) => {
+  return (
+    <div className="h-[100dvh] w-[100dvw] bg-background text-foreground">
+      {match(type)
+        .with('desktop', () => <LayoutDesktop />)
+        .with('mobile', () => <LayoutMobile />)
+        .with('web', () => <LayoutWeb />)
+        .exhaustive()}
+    </div>
+  );
+};

packages/ui/src/components/app/app.tsx

@@ -5,10 +5,10 @@ import { DndProvider } from 'react-dnd';
 import { AppType } from '@colanode/client/types';
 import { build } from '@colanode/core';
 import { AppAssets } from '@colanode/ui/components/app/app-assets';
+import { AppLayout } from '@colanode/ui/components/app/app-layout';
 import { AppLoadingScreen } from '@colanode/ui/components/app/app-loading-screen';
 import { AppThemeProvider } from '@colanode/ui/components/app/app-theme-provider';
 import { RadarProvider } from '@colanode/ui/components/app/radar-provider';
-import { Layout } from '@colanode/ui/components/layouts/layout';
 import { Toaster } from '@colanode/ui/components/ui/sonner';
 import { TooltipProvider } from '@colanode/ui/components/ui/tooltip';
 import { AppContext } from '@colanode/ui/contexts/app';
@@ -51,7 +51,7 @@ export const App = ({ type }: AppProps) => {
             <AppAssets />
             <AppThemeProvider>
               <RadarProvider>
-                <Layout />
+                <AppLayout type={type} />
               </RadarProvider>
             </AppThemeProvider>
           </TooltipProvider>

packages/ui/src/components/layouts/layout-desktop.tsx

@@ -12,13 +12,13 @@ import {
   generateId,
   IdType,
 } from '@colanode/core';
-import { LayoutAddTabButton } from '@colanode/ui/components/layouts/layout-add-tab-button';
 import { LayoutTabBar } from '@colanode/ui/components/layouts/layout-tab-bar';
+import { TabAddButton } from '@colanode/ui/components/layouts/tabs/tab-add-button';
 import { cn } from '@colanode/ui/lib/utils';
 import { router, routeTree } from '@colanode/ui/routes';
 import { useAppStore } from '@colanode/ui/stores/app';
 
-export const LayoutTabs = () => {
+export const LayoutDesktop = () => {
   const allTabs = useAppStore((state) => state.tabs);
   const activeTabId = useAppStore((state) => state.metadata.tab);
   const tabs = Object.values(allTabs).sort((a, b) =>
@@ -146,7 +146,7 @@ export const LayoutTabs = () => {
           );
         })}
 
-        <LayoutAddTabButton onAddTab={addTab} />
+        <TabAddButton onClick={addTab} />
         <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-background/5 to-border/10" />
       </div>
 

packages/ui/src/components/layouts/layout-mobile.tsx

@@ -0,0 +1,24 @@
+import {
+  createMemoryHistory,
+  createRouter,
+  RouterProvider,
+} from '@tanstack/react-router';
+import { useMemo } from 'react';
+
+import { routeTree } from '@colanode/ui/routes';
+
+export const LayoutMobile = () => {
+  const router = useMemo(() => {
+    return createRouter({
+      routeTree,
+      context: {},
+      history: createMemoryHistory(),
+      defaultPreload: 'intent',
+      scrollRestoration: true,
+      defaultStructuralSharing: true,
+      defaultPreloadStaleTime: 0,
+    });
+  }, []);
+
+  return <RouterProvider router={router} />;
+};

packages/ui/src/components/layouts/layout-web.tsx

@@ -1,27 +1,20 @@
 import {
   createBrowserHistory,
-  createMemoryHistory,
   createRouter,
   RouterProvider,
 } from '@tanstack/react-router';
 import { useMemo } from 'react';
 
-import { useApp } from '@colanode/ui/contexts/app';
 import { routeTree } from '@colanode/ui/routes';
 import { routeMasks } from '@colanode/ui/routes/masks';
 
-export const LayoutSingle = () => {
-  const app = useApp();
-
+export const LayoutWeb = () => {
   const router = useMemo(() => {
-    const history =
-      app.type === 'web' ? createBrowserHistory() : createMemoryHistory();
-
     return createRouter({
       routeTree,
-      routeMasks: app.type === 'web' ? routeMasks : [],
+      routeMasks: routeMasks,
       context: {},
-      history,
+      history: createBrowserHistory(),
       defaultPreload: 'intent',
       scrollRestoration: true,
       defaultStructuralSharing: true,

packages/ui/src/components/layouts/layout.tsx

@@ -1,13 +0,0 @@
-import { LayoutSingle } from '@colanode/ui/components/layouts/layout-single';
-import { LayoutTabs } from '@colanode/ui/components/layouts/layout-tabs';
-import { useApp } from '@colanode/ui/contexts/app';
-
-export const Layout = () => {
-  const app = useApp();
-
-  return (
-    <div className="h-[100dvh] w-[100dvw] bg-background text-foreground">
-      {app.type === 'desktop' ? <LayoutTabs /> : <LayoutSingle />}
-    </div>
-  );
-};

packages/ui/src/components/layouts/tabs/tab-add-button.tsx

@@ -1,13 +1,13 @@
 import { Plus } from 'lucide-react';
 
-interface LayoutAddTabButtonProps {
-  onAddTab: () => void;
+interface TabAddButtonProps {
+  onClick: () => void;
 }
 
-export const LayoutAddTabButton = ({ onAddTab }: LayoutAddTabButtonProps) => {
+export const TabAddButton = ({ onClick }: TabAddButtonProps) => {
   return (
     <button
-      onClick={onAddTab}
+      onClick={onClick}
       className="flex items-center justify-center w-10 h-10 bg-sidebar hover:bg-sidebar-accent transition-all duration-200 app-no-drag-region flex-shrink-0 border-l border-border/30 hover:border-border/60 rounded-tl-md"
       title="Add new tab"
     >

packages/ui/src/components/layouts/tabs/tab-manager.tsx

@@ -0,0 +1,3 @@
+export const TabManager = () => {
+  return <div>TabManager</div>;
+};