Merge pull request #84 from ashim-hq/fix/settings-default-tool-view

fix: wire up Default Tool View save in General settings

apps/api/src/lib/format-decoders.ts

@@ -70,11 +70,9 @@ async function decodeIco(buffer: Buffer): Promise<Buffer> {
   try {
     await writeFile(inputPath, buffer);
     // ICO contains multiple sizes; extract the largest by sorting
-    await execFileAsync(
-      cmd,
-      magickArgs(cmd, [`${inputPath}[-1]`, `png:${outputPath}`]),
-      { timeout: 120_000 },
-    );
+    await execFileAsync(cmd, magickArgs(cmd, [`${inputPath}[-1]`, `png:${outputPath}`]), {
+      timeout: 120_000,
+    });
     return await readFile(outputPath);
   } finally {
     await rm(inputPath, { force: true }).catch(() => {});

apps/web/src/components/settings/settings-dialog.tsx

@@ -27,6 +27,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/use-auth";
 import { apiDelete, apiGet, apiPost, apiPut, clearToken, formatHeaders } from "@/lib/api";
 import { cn, copyToClipboard } from "@/lib/utils";
+import { useSettingsStore } from "@/stores/settings-store";
 import { GemLogo } from "../common/gem-logo";
 import { AiFeaturesSection } from "./ai-features-section";
 
@@ -179,19 +180,29 @@ interface TeamEntry {
 function GeneralSection() {
   const [user, setUser] = useState<SessionUser | null>(null);
   const [loading, setLoading] = useState(true);
+  const [defaultToolView, setDefaultToolView] = useState("sidebar");
+  const [saving, setSaving] = useState(false);
+  const [saveMsg, setSaveMsg] = useState<string | null>(null);
 
   useEffect(() => {
-    apiGet<{ user: SessionUser }>("/auth/session")
-      .then((data) => setUser(data.user))
-      .catch(() => {
-        // Fallback to localStorage if session endpoint fails
-        setUser({
-          id: 0,
-          username: localStorage.getItem("ashim-username") || "",
-          role: "unknown",
-        });
-      })
-      .finally(() => setLoading(false));
+    Promise.all([
+      apiGet<{ user: SessionUser }>("/auth/session")
+        .then((data) => setUser(data.user))
+        .catch(() => {
+          setUser({
+            id: 0,
+            username: localStorage.getItem("ashim-username") || "",
+            role: "unknown",
+          });
+        }),
+      apiGet<{ settings: Record<string, string> }>("/v1/settings")
+        .then((data) => {
+          if (data.settings.defaultToolView) {
+            setDefaultToolView(data.settings.defaultToolView);
+          }
+        })
+        .catch(() => {}),
+    ]).finally(() => setLoading(false));
   }, []);
 
   const handleLogout = () => {
@@ -200,6 +211,23 @@ function GeneralSection() {
     window.location.href = "/login";
   };
 
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setSaveMsg(null);
+    try {
+      await apiPut("/v1/settings", { defaultToolView });
+      setSaveMsg("Settings saved.");
+      useSettingsStore.setState({
+        defaultToolView: defaultToolView as "sidebar" | "fullscreen",
+      });
+    } catch {
+      setSaveMsg("Failed to save settings.");
+    } finally {
+      setSaving(false);
+      setTimeout(() => setSaveMsg(null), 3000);
+    }
+  }, [defaultToolView]);
+
   const username = user?.username || "admin";
   const role = user?.role || "unknown";
 
@@ -237,7 +265,11 @@ function GeneralSection() {
 
       {/* Default view */}
       <SettingRow label="Default Tool View" description="How tools are displayed on the home page">
-        <select className="px-3 py-1.5 rounded-lg border border-border bg-background text-sm text-foreground">
+        <select
+          value={defaultToolView}
+          onChange={(e) => setDefaultToolView(e.target.value)}
+          className="px-3 py-1.5 rounded-lg border border-border bg-background text-sm text-foreground"
+        >
           <option value="sidebar">Sidebar</option>
           <option value="fullscreen">Fullscreen Grid</option>
         </select>
@@ -247,6 +279,30 @@ function GeneralSection() {
       <SettingRow label="App Version" description="Current version of ashim">
         <span className="text-sm font-mono text-muted-foreground">{APP_VERSION}</span>
       </SettingRow>
+
+      <div className="flex items-center gap-3 pt-2">
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={saving}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
+        >
+          {saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+          Save Settings
+        </button>
+        {saveMsg && (
+          <span
+            className={cn(
+              "text-sm",
+              saveMsg.includes("Failed")
+                ? "text-destructive"
+                : "text-green-600 dark:text-green-400",
+            )}
+          >
+            {saveMsg}
+          </span>
+        )}
+      </div>
     </div>
   );
 }

apps/web/src/lib/image-preview.ts

@@ -1,14 +1,21 @@
 import { formatHeaders } from "@/lib/api";
 
 const SERVER_PREVIEW_EXTENSIONS = new Set([
-  "heic", "heif", "hif",                       // HEIF
-  "jxl",                                         // JPEG XL (Chrome dropped support)
-  "ico",                                         // ICO (Sharp can't decode)
-  "dng", "cr2", "nef", "arw", "orf", "rw2",     // Camera RAW
-  "tga",                                         // Targa
-  "psd",                                         // Photoshop
-  "exr",                                         // OpenEXR
-  "hdr",                                         // Radiance HDR
+  "heic",
+  "heif",
+  "hif", // HEIF
+  "jxl", // JPEG XL (Chrome dropped support)
+  "ico", // ICO (Sharp can't decode)
+  "dng",
+  "cr2",
+  "nef",
+  "arw",
+  "orf",
+  "rw2", // Camera RAW
+  "tga", // Targa
+  "psd", // Photoshop
+  "exr", // OpenEXR
+  "hdr", // Radiance HDR
 ]);
 
 export function needsServerPreview(file: File): boolean {

apps/web/src/pages/home-page.tsx

@@ -24,7 +24,7 @@ export function HomePage() {
     currentEntry,
   } = useFileStore();
   const navigate = useNavigate();
-  const { fetch: fetchSettings } = useSettingsStore();
+  const { fetch: fetchSettings, defaultToolView, loaded: settingsLoaded } = useSettingsStore();
   const { fetch: fetchFeatures, isToolInstalled } = useFeaturesStore();
 
   useEffect(() => {
@@ -32,6 +32,12 @@ export function HomePage() {
     fetchFeatures();
   }, [fetchSettings, fetchFeatures]);
 
+  useEffect(() => {
+    if (settingsLoaded && defaultToolView === "fullscreen" && files.length === 0) {
+      navigate("/fullscreen", { replace: true });
+    }
+  }, [settingsLoaded, defaultToolView, files.length, navigate]);
+
   const handleFiles = useCallback(
     (newFiles: File[]) => {
       reset();

apps/web/src/pages/tool-page.tsx

@@ -250,7 +250,8 @@ export function ToolPage() {
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = true;
-    input.accept = "image/*,.heic,.heif,.hif,.jxl,.dng,.cr2,.nef,.arw,.orf,.rw2,.tga,.psd,.exr,.hdr";
+    input.accept =
+      "image/*,.heic,.heif,.hif,.jxl,.dng,.cr2,.nef,.arw,.orf,.rw2,.tga,.psd,.exr,.hdr";
     input.onchange = (e) => {
       const newFiles = Array.from((e.target as HTMLInputElement).files || []);
       if (newFiles.length > 0) addFiles(newFiles);

apps/web/src/stores/settings-store.ts

@@ -4,6 +4,7 @@ import { apiGet } from "@/lib/api";
 interface SettingsState {
   disabledTools: string[];
   experimentalEnabled: boolean;
+  defaultToolView: "sidebar" | "fullscreen";
   loaded: boolean;
   fetch: () => Promise<void>;
 }
@@ -11,6 +12,7 @@ interface SettingsState {
 export const useSettingsStore = create<SettingsState>((set, get) => ({
   disabledTools: [],
   experimentalEnabled: false,
+  defaultToolView: "sidebar",
   loaded: false,
 
   fetch: async () => {
@@ -23,10 +25,10 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       set({
         disabledTools: data.settings.disabledTools ? JSON.parse(data.settings.disabledTools) : [],
         experimentalEnabled: data.settings.enableExperimentalTools === "true",
+        defaultToolView: data.settings.defaultToolView === "fullscreen" ? "fullscreen" : "sidebar",
         loaded: true,
       });
     } catch {
-      // Settings fetch failed - default to no disabled tools
       set({ loaded: true });
     }
   },

packages/image-engine/src/operations/compress.ts

@@ -22,9 +22,9 @@ export async function compress(image: Sharp, options: CompressOptions): Promise<
 
   const metadata = await image.metadata();
   const detected = metadata.format ?? "jpeg";
-  const outputFormat = (
-    FORMAT_MAP[format ?? ""] ?? FORMAT_MAP[detected] ?? detected
-  ) as keyof import("sharp").FormatEnum;
+  const outputFormat = (FORMAT_MAP[format ?? ""] ??
+    FORMAT_MAP[detected] ??
+    detected) as keyof import("sharp").FormatEnum;
 
   if (targetSizeBytes !== undefined) {
     if (targetSizeBytes <= 0) {

packages/image-engine/src/types.ts

@@ -17,7 +17,16 @@ export interface OperationResult {
   info: ImageInfo;
 }
 
-export type OutputFormat = "jpg" | "png" | "webp" | "avif" | "tiff" | "gif" | "heic" | "heif" | "jxl";
+export type OutputFormat =
+  | "jpg"
+  | "png"
+  | "webp"
+  | "avif"
+  | "tiff"
+  | "gif"
+  | "heic"
+  | "heif"
+  | "jxl";
 
 export interface ResizeOptions {
   width?: number;