first commit

Co-Authored-By: Codex <noreply@openai.com>

web/src/stores/use-ai-config-store.ts

@@ -0,0 +1,31 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+import { CONFIG_STORE_KEY, defaultConfig, type AiConfig } from "@/lib/ai-config";
+
+type AiConfigStore = {
+  config: AiConfig;
+  updateConfig: <K extends keyof AiConfig>(key: K, value: AiConfig[K]) => void;
+};
+
+export const useAiConfigStore = create<AiConfigStore>()(
+  persist(
+    (set) => ({
+      config: defaultConfig,
+      updateConfig: (key, value) =>
+        set((state) => ({
+          config: {
+            ...state.config,
+            [key]: value,
+          },
+        })),
+    }),
+    {
+      name: CONFIG_STORE_KEY,
+      merge: (persisted, current) => {
+        const config = { ...defaultConfig, ...((persisted as Partial<AiConfigStore>).config || {}) };
+        return { ...current, config: { ...config, imageModel: config.imageModel || config.model, textModel: config.textModel || config.model } };
+      },
+    },
+  ),
+);

web/src/stores/use-asset-store.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import { create } from "zustand";
+import { persist, type PersistStorage, type StorageValue } from "zustand/middleware";
+
+import { createId } from "@/lib/id";
+import { localForageStorage } from "@/lib/localforage-storage";
+import { cleanupUnusedImages, resolveImageUrl, uploadImage } from "@/services/image-storage";
+
+export type AssetKind = "text" | "image";
+export type TextAsset = AssetBase<"text"> & { data: { content: string } };
+export type ImageAsset = AssetBase<"image"> & { data: { dataUrl: string; storageKey?: string; width: number; height: number; bytes: number; mimeType: string } };
+export type Asset = TextAsset | ImageAsset;
+
+type AssetBase<T extends AssetKind> = {
+  id: string;
+  kind: T;
+  title: string;
+  coverUrl: string;
+  tags: string[];
+  source?: string;
+  note?: string;
+  createdAt: string;
+  updatedAt: string;
+  metadata?: Record<string, unknown>;
+};
+
+type AssetStore = {
+  assets: Asset[];
+  addAsset: (asset: Omit<Asset, "id" | "createdAt" | "updatedAt">) => string;
+  updateAsset: (id: string, patch: Partial<Omit<Asset, "id" | "createdAt">>) => void;
+  removeAsset: (id: string) => void;
+  cleanupImages: (extra?: unknown) => void;
+};
+
+const ASSET_STORE_KEY = "infinite-canvas:asset_store";
+
+const assetStorage: PersistStorage<AssetStore> = {
+  getItem: async (name) => {
+    const value = await localForageStorage.getItem(name);
+    if (!value) return null;
+    const parsed = JSON.parse(value) as StorageValue<AssetStore>;
+    parsed.state.assets = await Promise.all(parsed.state.assets.map(async (asset) => {
+      if (asset.kind !== "image") return asset;
+      if (asset.data.storageKey) return {
+        ...asset,
+        coverUrl: asset.coverUrl.startsWith("blob:") ? await resolveImageUrl(asset.data.storageKey, asset.coverUrl) : asset.coverUrl,
+        data: { ...asset.data, dataUrl: await resolveImageUrl(asset.data.storageKey, asset.data.dataUrl) },
+      };
+      if (!asset.data.dataUrl.startsWith("data:image/")) return asset;
+      const image = await uploadImage(asset.data.dataUrl);
+      return { ...asset, coverUrl: asset.coverUrl.startsWith("data:image/") ? image.url : asset.coverUrl, data: { ...asset.data, dataUrl: image.url, storageKey: image.storageKey, bytes: image.bytes, mimeType: image.mimeType } };
+    }));
+    return parsed;
+  },
+  setItem: (name, value) => localForageStorage.setItem(name, JSON.stringify(value)),
+  removeItem: (name) => localForageStorage.removeItem(name),
+};
+
+export const useAssetStore = create<AssetStore>()(
+  persist(
+    (set, get) => ({
+      assets: [],
+      addAsset: (asset) => {
+        const now = new Date().toISOString();
+        const id = createId();
+        set((state) => ({ assets: [{ ...asset, id, createdAt: now, updatedAt: now } as Asset, ...state.assets] }));
+        return id;
+      },
+      updateAsset: (id, patch) => set((state) => ({
+        assets: state.assets.map((asset) => asset.id === id ? { ...asset, ...patch, updatedAt: new Date().toISOString() } as Asset : asset),
+      })),
+      removeAsset: (id) => set((state) => {
+        const assets = state.assets.filter((asset) => asset.id !== id);
+        get().cleanupImages({ assets });
+        return { assets };
+      }),
+      cleanupImages: (extra) => {
+        window.setTimeout(async () => {
+          const { useCanvasStore } = await import("@/app/(user)/canvas/stores/use-canvas-store");
+          await cleanupUnusedImages({ assets: get().assets, projects: useCanvasStore.getState().projects, extra });
+        }, 0);
+      },
+    }),
+    {
+      name: ASSET_STORE_KEY,
+      storage: assetStorage,
+      partialize: (state) => ({ assets: state.assets }) as StorageValue<AssetStore>["state"],
+    },
+  ),
+);

web/src/stores/use-config-dialog-store.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+type ConfigDialogStore = {
+  isOpen: boolean;
+  shouldPromptContinue: boolean;
+  openConfigDialog: (shouldPromptContinue?: boolean) => void;
+  setConfigDialogOpen: (isOpen: boolean) => void;
+  clearPromptContinue: () => void;
+};
+
+export const useConfigDialogStore = create<ConfigDialogStore>()((set) => ({
+  isOpen: false,
+  shouldPromptContinue: false,
+  openConfigDialog: (shouldPromptContinue = false) =>
+    set({
+      isOpen: true,
+      shouldPromptContinue,
+    }),
+  setConfigDialogOpen: (isOpen) => set({ isOpen }),
+  clearPromptContinue: () => set({ shouldPromptContinue: false }),
+}));

web/src/stores/use-theme-store.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export type ThemeName = "light" | "dark";
+
+type ThemeStore = {
+  theme: ThemeName;
+  setTheme: (theme: ThemeName) => void;
+};
+
+export const useThemeStore = create<ThemeStore>()(
+  persist(
+    (set) => ({
+      theme: "dark",
+      setTheme: (theme) => set({ theme }),
+    }),
+    { name: "infinite-canvas:theme_store" },
+  ),
+);
+
+export function useSyncThemeClass() {
+  const theme = useThemeStore((state) => state.theme);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.style.colorScheme = theme;
+  }, [theme]);
+}

web/src/stores/use-user-store.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+import { AUTH_TOKEN_KEY, fetchCurrentUser, login, register, type AuthPayload, type AuthUser } from "@/services/api/auth";
+
+type UserStore = {
+  token: string;
+  user: AuthUser | null;
+  isReady: boolean;
+  isLoading: boolean;
+  setSession: (token: string, user: AuthUser) => void;
+  clearSession: () => void;
+  hydrateUser: () => Promise<void>;
+  login: (payload: AuthPayload) => Promise<AuthUser>;
+  register: (payload: AuthPayload) => Promise<AuthUser>;
+};
+
+export const useUserStore = create<UserStore>()(
+  persist(
+    (set, get) => ({
+      token: "",
+      user: null,
+      isReady: false,
+      isLoading: false,
+      setSession: (token, user) => set({ token, user, isReady: true }),
+      clearSession: () => set({ token: "", user: null, isReady: true }),
+      hydrateUser: async () => {
+        const token = get().token;
+        if (!token) {
+          set({ user: null, isReady: true });
+          return;
+        }
+        set({ isLoading: true });
+        try {
+          const user = await fetchCurrentUser(token);
+          if (user.role === "guest") {
+            set({ token: "", user: null, isReady: true, isLoading: false });
+            return;
+          }
+          set({ user, isReady: true, isLoading: false });
+        } catch {
+          set({ token: "", user: null, isReady: true, isLoading: false });
+        }
+      },
+      login: async (payload) => {
+        set({ isLoading: true });
+        try {
+          const session = await login(payload);
+          set({ token: session.token, user: session.user, isReady: true, isLoading: false });
+          return session.user;
+        } catch (error) {
+          set({ isLoading: false });
+          throw error;
+        }
+      },
+      register: async (payload) => {
+        set({ isLoading: true });
+        try {
+          const session = await register(payload);
+          set({ token: session.token, user: session.user, isReady: true, isLoading: false });
+          return session.user;
+        } catch (error) {
+          set({ isLoading: false });
+          throw error;
+        }
+      },
+    }),
+    {
+      name: AUTH_TOKEN_KEY,
+      partialize: (state) => ({ token: state.token }),
+      onRehydrateStorage: () => (state) => {
+        if (state) state.isReady = false;
+      },
+    },
+  ),
+);