chore: update

web/src/App.tsx

@@ -5,7 +5,7 @@ import { Outlet } from "react-router-dom";
 import { getSystemColorScheme } from "./helpers/utils";
 import useNavigateTo from "./hooks/useNavigateTo";
 import { userStore, workspaceStore } from "./store/v2";
-import { loadTheme, validateTheme, getStoredTheme, loadStoredThemeSync } from "./utils/theme";
+import { loadTheme } from "./utils/theme";
 
 const App = observer(() => {
   const { i18n } = useTranslation();
@@ -15,11 +15,6 @@ const App = observer(() => {
   const userSetting = userStore.state.userSetting;
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
-  // Load theme immediately from localStorage to prevent flickering
-  useEffect(() => {
-    loadStoredThemeSync();
-  }, []);
-
   // Redirect to sign up page if no instance owner.
   useEffect(() => {
     if (!workspaceProfile.owner) {
@@ -111,16 +106,7 @@ const App = observer(() => {
 
   // Load theme when workspace setting changes, validate API response
   useEffect(() => {
-    const theme = workspaceGeneralSetting.theme;
+    loadTheme(workspaceGeneralSetting.theme);
-    if (theme) {
-      // Validate theme.
-      const validatedTheme = validateTheme(theme);
-      // Only load if different from current stored theme
-      const currentTheme = getStoredTheme();
-      if (validatedTheme !== currentTheme) {
-        loadTheme(validatedTheme);
-      }
-    }
   }, [workspaceGeneralSetting.theme]);
 
   return <Outlet />;

web/src/components/ui/dropdown-menu.tsx

@@ -6,7 +6,8 @@ import { cn } from "@/lib/utils";
 const DropdownMenu = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>
->(({ ...props }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ ...props }, _ref) => {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 });
 DropdownMenu.displayName = "DropdownMenu";

web/src/components/ui/popover.tsx

@@ -5,7 +5,8 @@ import { cn } from "@/lib/utils";
 const Popover = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>
->(({ ...props }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ ...props }, _ref) => {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 });
 Popover.displayName = "Popover";

web/src/components/ui/sheet.tsx

@@ -4,7 +4,8 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Sheet = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>>(
-  ({ ...props }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ({ ...props }, _ref) => {
     return <SheetPrimitive.Root data-slot="sheet" {...props} />;
   },
 );

web/src/components/ui/tooltip.tsx

@@ -5,7 +5,8 @@ import { cn } from "@/lib/utils";
 const TooltipProvider = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Provider>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>
->(({ delayDuration = 0, ...props }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ delayDuration = 0, ...props }, _ref) => {
   return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
 });
 TooltipProvider.displayName = "TooltipProvider";
@@ -13,7 +14,8 @@ TooltipProvider.displayName = "TooltipProvider";
 const Tooltip = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>
->(({ ...props }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ ...props }, _ref) => {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />

web/src/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./themes/default.css";
 
 @custom-variant dark (&: is(.dark *));
 

web/src/theme/index.ts

@@ -1,5 +0,0 @@
-// Theme configuration for Tailwind CSS v4
-// This file is kept for compatibility but no longer used for MUI theme configuration
-// All styling is now handled by Tailwind CSS
-
-export default {};

web/src/utils/theme.ts

@@ -1,74 +1,42 @@
+import paperThemeContent from "../themes/paper.css?raw";
+
 const VALID_THEMES = ["default", "paper"] as const;
 type ValidTheme = (typeof VALID_THEMES)[number];
 
-// Validate theme name and return default if invalid
+const THEME_CONTENT: Record<ValidTheme, string | null> = {
-export const validateTheme = (theme: string): ValidTheme => {
+  default: null,
-  return VALID_THEMES.includes(theme as ValidTheme) ? (theme as ValidTheme) : "default";
+  paper: paperThemeContent,
 };
 
-// Get theme from localStorage
+const validateTheme = (theme: string): ValidTheme => {
-export const getStoredTheme = (): ValidTheme => {
+  return VALID_THEMES.includes(theme as ValidTheme) ? (theme as ValidTheme) : "default";
-  try {
-    const stored = localStorage.getItem("workspace-theme");
-    return stored ? validateTheme(stored) : "default";
-  } catch {
-    return "default";
-  }
-};
-
-// Save theme to localStorage
-export const storeTheme = (theme: string): void => {
-  try {
-    const validTheme = validateTheme(theme);
-    localStorage.setItem("workspace-theme", validTheme);
-  } catch {
-    // Silently fail if localStorage is not available
-  }
 };
 
-// Load theme immediately from localStorage to prevent flickering
+export const getStoredTheme = (): ValidTheme => {
-export const loadStoredThemeSync = (): void => {
+  const stored = localStorage.getItem("workspace-theme");
-  const theme = getStoredTheme();
+  return stored ? validateTheme(stored) : "default";
-  // Apply theme synchronously to prevent flash
-  document.documentElement.setAttribute("data-theme", theme);
 };
 
-// Async theme loader
+export const loadTheme = (themeName: string): void => {
-export const loadTheme = async (themeName: string): Promise<void> => {
   const validTheme = validateTheme(themeName);
 
-  // Store theme for next page load
+  // Store theme
-  storeTheme(validTheme);
+  localStorage.setItem("workspace-theme", validTheme);
 
   // Remove existing theme
-  const existingTheme = document.getElementById("workspace-theme");
+  document.getElementById("workspace-theme")?.remove();
-  if (existingTheme) {
+
-    existingTheme.remove();
+  // Apply theme (skip for default)
-  }
+  if (validTheme !== "default") {
-
+    const css = THEME_CONTENT[validTheme];
-  try {
+    if (css) {
-    // Load theme CSS
+      const style = document.createElement("style");
-    const response = await fetch(`/themes/${validTheme}.css`);
+      style.id = "workspace-theme";
-    if (!response.ok) {
+      style.textContent = css;
-      throw new Error(`Failed to load theme: ${response.status}`);
+      document.head.appendChild(style);
-    }
-
-    const css = await response.text();
-
-    // Apply theme
-    const styleElement = document.createElement("style");
-    styleElement.id = "workspace-theme";
-    styleElement.textContent = css;
-    document.head.appendChild(styleElement);
-
-    // Update data attribute
-    document.documentElement.setAttribute("data-theme", validTheme);
-  } catch (error) {
-    console.error("Failed to load theme:", error);
-
-    // Fallback to default theme if current theme fails
-    if (validTheme !== "default") {
-      await loadTheme("default");
     }
   }
+
+  // Set data attribute
+  document.documentElement.setAttribute("data-theme", validTheme);
 };