Custom font selection (#226)

src-web/routes/__root.tsx

@@ -1,5 +1,6 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { type } from '@tauri-apps/plugin-os';
 import classNames from 'classnames';
 import { Provider as JotaiProvider } from 'jotai';
 import { domAnimation, LazyMotion, MotionConfig } from 'motion/react';
@@ -13,7 +14,6 @@ import RouteError from '../components/RouteError';
 import { Toasts } from '../components/Toasts';
 import { jotaiStore } from '../lib/jotai';
 import { queryClient } from '../lib/queryClient';
-import { type } from '@tauri-apps/plugin-os';
 
 export const Route = createRootRoute({
   component: RouteComponent,
@@ -32,14 +32,7 @@ function RouteComponent() {
                   <GlobalHooks />
                   <Toasts />
                   <Dialogs />
-                  <div
-                    className={classNames(
-                      'w-full h-full',
-                      type() === 'linux' && 'border border-border-subtle',
-                    )}
-                  >
-                    <Outlet />
-                  </div>
+                  <Layout />
                 </Suspense>
               </DndProvider>
             </HelmetProvider>
@@ -49,3 +42,13 @@ function RouteComponent() {
     </JotaiProvider>
   );
 }
+
+function Layout() {
+  return (
+    <div
+      className={classNames('w-full h-full', type() === 'linux' && 'border border-border-subtle')}
+    >
+      <Outlet />
+    </div>
+  );
+}