more work on settings layout

Author: yujonglee

apps/desktop2/src/auth.tsx

@@ -1,4 +1,4 @@
-import { createClient, processLock, type Session, type SupportedStorage } from "@supabase/supabase-js";
+import { createClient, processLock, type Session, SupabaseClient, type SupportedStorage } from "@supabase/supabase-js";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { createContext, useContext, useEffect, useState } from "react";
 
@@ -37,7 +37,12 @@ const supabase = env.VITE_SUPABASE_URL && env.VITE_SUPABASE_ANON_KEY
   })
   : null;
 
-const AuthContext = createContext<any | undefined>(undefined);
+const AuthContext = createContext<
+  {
+    supabase: SupabaseClient | null;
+    session: Session | null;
+  } | null
+>(null);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [session, setSession] = useState<Session | null>(null);

apps/desktop2/src/components/main/main-area.tsx

@@ -1,7 +1,7 @@
 import { commands as windowsCommands } from "@hypr/plugin-windows";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { clsx } from "clsx";
-import { PanelLeftOpenIcon } from "lucide-react";
+import { CogIcon, PanelLeftOpenIcon, PencilIcon } from "lucide-react";
 
 import NoteEditor from "@hypr/tiptap/editor";
 import { ChatPanelButton } from "@hypr/ui/components/block/chat-panel-button";
@@ -58,19 +58,17 @@ export function MainHeader() {
         )}
 
       <div
-        className="flex items-center justify-start"
+        className="flex items-center justify-start gap-2"
         data-tauri-drag-region
       >
-        <button
+        <CogIcon
           onClick={handleClickSettings}
-        >
-          Setting
-        </button>
-        <button
+          className="cursor-pointer h-5 w-5 text-muted-foreground hover:text-foreground"
+        />
+        <PencilIcon
           onClick={handleClickNewNote}
-        >
-          New note
-        </button>
+          className="cursor-pointer h-5 w-5 text-muted-foreground hover:text-foreground"
+        />
       </div>
 
       <ChatPanelButton

apps/desktop2/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AppRouteImport } from './routes/app'
 import { Route as AppSettingsRouteImport } from './routes/app/settings'
+import { Route as AppAuthRouteImport } from './routes/app/auth'
 import { Route as AppMainLayoutRouteImport } from './routes/app/main/_layout'
 import { Route as AppMainLayoutIndexRouteImport } from './routes/app/main/_layout.index'
 
@@ -33,6 +34,11 @@ const AppSettingsRoute = AppSettingsRouteImport.update({
   path: '/settings',
   getParentRoute: () => AppRoute,
 } as any)
+const AppAuthRoute = AppAuthRouteImport.update({
+  id: '/auth',
+  path: '/auth',
+  getParentRoute: () => AppRoute,
+} as any)
 const AppMainLayoutRoute = AppMainLayoutRouteImport.update({
   id: '/_layout',
   getParentRoute: () => AppMainRoute,
@@ -45,31 +51,35 @@ const AppMainLayoutIndexRoute = AppMainLayoutIndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/app': typeof AppRouteWithChildren
+  '/app/auth': typeof AppAuthRoute
   '/app/settings': typeof AppSettingsRoute
   '/app/main': typeof AppMainLayoutRouteWithChildren
   '/app/main/': typeof AppMainLayoutIndexRoute
 }
 export interface FileRoutesByTo {
   '/app': typeof AppRouteWithChildren
+  '/app/auth': typeof AppAuthRoute
   '/app/settings': typeof AppSettingsRoute
   '/app/main': typeof AppMainLayoutIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/app': typeof AppRouteWithChildren
+  '/app/auth': typeof AppAuthRoute
   '/app/settings': typeof AppSettingsRoute
   '/app/main': typeof AppMainRouteWithChildren
   '/app/main/_layout': typeof AppMainLayoutRouteWithChildren
   '/app/main/_layout/': typeof AppMainLayoutIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/app' | '/app/settings' | '/app/main' | '/app/main/'
+  fullPaths: '/app' | '/app/auth' | '/app/settings' | '/app/main' | '/app/main/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/app' | '/app/settings' | '/app/main'
+  to: '/app' | '/app/auth' | '/app/settings' | '/app/main'
   id:
     | '__root__'
     | '/app'
+    | '/app/auth'
     | '/app/settings'
     | '/app/main'
     | '/app/main/_layout'
@@ -103,6 +113,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppSettingsRouteImport
       parentRoute: typeof AppRoute
     }
+    '/app/auth': {
+      id: '/app/auth'
+      path: '/auth'
+      fullPath: '/app/auth'
+      preLoaderRoute: typeof AppAuthRouteImport
+      parentRoute: typeof AppRoute
+    }
     '/app/main/_layout': {
       id: '/app/main/_layout'
       path: '/main'
@@ -144,11 +161,13 @@ const AppMainRouteWithChildren =
   AppMainRoute._addFileChildren(AppMainRouteChildren)
 
 interface AppRouteChildren {
+  AppAuthRoute: typeof AppAuthRoute
   AppSettingsRoute: typeof AppSettingsRoute
   AppMainRoute: typeof AppMainRouteWithChildren
 }
 
 const AppRouteChildren: AppRouteChildren = {
+  AppAuthRoute: AppAuthRoute,
   AppSettingsRoute: AppSettingsRoute,
   AppMainRoute: AppMainRouteWithChildren,
 }

apps/desktop2/src/routes/app/auth.tsx

@@ -0,0 +1,36 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useCallback } from "react";
+
+import { useAuth } from "../../auth";
+
+export const Route = createFileRoute("/app/auth")({
+  component: Component,
+});
+
+function Component() {
+  const auth = useAuth();
+
+  const hh = useCallback(async () => {
+    if (auth?.supabase) {
+      const { error } = await auth.supabase.auth.signUp({
+        email: "[email protected]",
+        password: "example-password",
+        options: {
+          emailRedirectTo: window.location.origin,
+        },
+      });
+      console.error(error);
+    }
+  }, [auth?.supabase]);
+
+  return (
+    <div>
+      <pre>session: {JSON.stringify(auth?.session, null, 2)}</pre>
+      <button
+        onClick={hh}
+      >
+        signup
+      </button>
+    </div>
+  );
+}

apps/desktop2/src/routes/app/settings.tsx

@@ -1,13 +1,44 @@
 import { createFileRoute } from "@tanstack/react-router";
 
+import clsx from "clsx";
+import { z } from "zod";
 import { useValidatedRow } from "../../hooks/useValidatedRow";
 import * as persisted from "../../tinybase/store/persisted";
 
+const TABS = ["general", "calendar", "account"] as const;
+
+const validateSearch = z.object({
+  tab: z.enum(TABS).default("general"),
+});
+
 export const Route = createFileRoute("/app/settings")({
+  validateSearch,
   component: Component,
 });
 
 function Component() {
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+
+  return (
+    <div>
+      <div className="flex flex-col gap-2">
+        {TABS.map((tab) => (
+          <button
+            key={tab}
+            className={clsx(["w-32 px-2 py-1 rounded", search.tab === tab && "bg-gray-200"])}
+            onClick={() => navigate({ search: { tab } })}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+      {search.tab === "general" && <SettingsGeneral />}
+    </div>
+  );
+}
+
+function SettingsGeneral() {
   const rowIds = persisted.UI.useResultRowIds(
     persisted.QUERIES.configForUser,
     persisted.STORE_ID,

apps/web/.wrangler/deploy/config.json

@@ -0,0 +1 @@
+{ "configPath": "../../dist/server/wrangler.json", "auxiliaryWorkers": [] }