@jant/core 0.3.24 → 0.3.26

package/dist/routes/dash/settings.js

@@ -1,533 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 /**
  * Dashboard Settings Routes
  *
  * Sub-pages: General, Appearance, Account
  */ import { Hono } from "hono";
-import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { DashLayout } from "../../theme/layouts/index.js";
+import { DashLayout } from "../../ui/layouts/DashLayout.js";
 import { sse, dsRedirect, dsToast } from "../../lib/sse.js";
-import { getSiteLanguage, getSiteName, getConfigFallback } from "../../lib/config.js";
+import { arrayBufferToBase64 } from "../../lib/favicon.js";
+import { getSiteLanguage, getSiteName, getHomeDefaultView, getTimeZone, getSiteFooter, isNoIndex, getConfigFallback } from "../../lib/config.js";
 import { SETTINGS_KEYS } from "../../lib/constants.js";
 import { getAvailableThemes } from "../../lib/theme.js";
+import { getMediaUrl, getPublicUrlForProvider } from "../../lib/image.js";
+import { TIMEZONES } from "../../lib/timezones.js";
+import { BUILTIN_FONT_THEMES } from "../../ui/font-themes.js";
+import { GeneralContent } from "../../ui/dash/settings/GeneralContent.js";
+import { AppearanceContent } from "../../ui/dash/settings/AppearanceContent.js";
+import { AccountContent } from "../../ui/dash/settings/AccountContent.js";
 /** Escape HTML special characters for safe insertion into HTML strings */ function escapeHtml(str) {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 export const settingsRoutes = new Hono();
-function SettingsNav({ currentTab }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const tabs = [
-        {
-            id: "general",
-            label: $__i18n._({
-                id: "Weq9zb",
-                message: "General"
-            }),
-            href: "/dash/settings"
-        },
-        {
-            id: "appearance",
-            label: $__i18n._({
-                id: "aAIQg2",
-                message: "Appearance"
-            }),
-            href: "/dash/settings/appearance"
-        },
-        {
-            id: "account",
-            label: $__i18n._({
-                id: "AeXO77",
-                message: "Account"
-            }),
-            href: "/dash/settings/account"
-        }
-    ];
-    return /*#__PURE__*/ _jsx("nav", {
-        class: "flex gap-1 mb-6",
-        children: tabs.map((tab)=>/*#__PURE__*/ _jsx("a", {
-                href: tab.href,
-                class: `px-3 py-2 text-sm rounded-md ${tab.id === currentTab ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`,
-                children: tab.label
-            }, tab.id))
-    });
-}
-// ---------------------------------------------------------------------------
-// General tab
-// ---------------------------------------------------------------------------
-function GeneralContent({ siteName, siteDescription, siteLanguage, siteNameFallback, siteDescriptionFallback }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const generalSignals = JSON.stringify({
-        siteName,
-        siteDescription,
-        siteLanguage
-    }).replace(/</g, "\\u003c");
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("h1", {
-                class: "text-2xl font-semibold mb-2",
-                children: $__i18n._({
-                    id: "Tz0i8g",
-                    message: "Settings"
-                })
-            }),
-            /*#__PURE__*/ _jsx(SettingsNav, {
-                currentTab: "general"
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                class: "flex flex-col gap-6 max-w-lg",
-                children: /*#__PURE__*/ _jsxs("form", {
-                    "data-signals": generalSignals,
-                    "data-on:submit__prevent": "@post('/dash/settings')",
-                    "data-indicator": "_loading",
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            class: "card",
-                            children: [
-                                /*#__PURE__*/ _jsx("header", {
-                                    children: /*#__PURE__*/ _jsx("h2", {
-                                        children: $__i18n._({
-                                            id: "Weq9zb",
-                                            message: "General"
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsxs("section", {
-                                    class: "flex flex-col gap-4",
-                                    children: [
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            class: "field",
-                                            children: [
-                                                /*#__PURE__*/ _jsx("label", {
-                                                    class: "label",
-                                                    children: $__i18n._({
-                                                        id: "SJmfuf",
-                                                        message: "Site Name"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx("input", {
-                                                    type: "text",
-                                                    "data-bind": "siteName",
-                                                    class: "input",
-                                                    placeholder: siteNameFallback
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            class: "field",
-                                            children: [
-                                                /*#__PURE__*/ _jsx("label", {
-                                                    class: "label",
-                                                    children: $__i18n._({
-                                                        id: "u2f7vd",
-                                                        message: "Site Description"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx("textarea", {
-                                                    "data-bind": "siteDescription",
-                                                    class: "textarea",
-                                                    rows: 3,
-                                                    placeholder: siteDescriptionFallback,
-                                                    children: siteDescription
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            class: "field",
-                                            children: [
-                                                /*#__PURE__*/ _jsx("label", {
-                                                    class: "label",
-                                                    children: $__i18n._({
-                                                        id: "vXIe7J",
-                                                        message: "Language"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsxs("select", {
-                                                    "data-bind": "siteLanguage",
-                                                    class: "select",
-                                                    children: [
-                                                        /*#__PURE__*/ _jsx("option", {
-                                                            value: "en",
-                                                            selected: siteLanguage === "en",
-                                                            children: "English"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx("option", {
-                                                            value: "zh-Hans",
-                                                            selected: siteLanguage === "zh-Hans",
-                                                            children: "简体中文"
-                                                        }),
-                                                        /*#__PURE__*/ _jsx("option", {
-                                                            value: "zh-Hant",
-                                                            selected: siteLanguage === "zh-Hant",
-                                                            children: "繁體中文"
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsxs("button", {
-                            type: "submit",
-                            class: "btn mt-4",
-                            "data-attr-disabled": "$_loading",
-                            children: [
-                                /*#__PURE__*/ _jsx("span", {
-                                    "data-show": "!$_loading",
-                                    children: $__i18n._({
-                                        id: "UGT5vp",
-                                        message: "Save Settings"
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    "data-show": "$_loading",
-                                    children: $__i18n._({
-                                        id: "k1ifdL",
-                                        message: "Processing..."
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-// ---------------------------------------------------------------------------
-// Appearance tab
-// ---------------------------------------------------------------------------
-function ThemeCard({ theme, selected }) {
-    const expr = `$theme === '${theme.id}'`;
-    const { preview } = theme;
-    return /*#__PURE__*/ _jsx("label", {
-        class: `block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`,
-        "data-class:border-primary": expr,
-        "data-class:border-border": `$theme !== '${theme.id}'`,
-        children: /*#__PURE__*/ _jsxs("div", {
-            class: "grid grid-cols-2",
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    class: "p-5",
-                    style: `background-color:${preview.lightBg};color:${preview.lightText}`,
-                    children: [
-                        /*#__PURE__*/ _jsx("input", {
-                            type: "radio",
-                            name: "theme",
-                            value: theme.id,
-                            "data-bind": "theme",
-                            checked: selected || undefined,
-                            class: "mb-1"
-                        }),
-                        /*#__PURE__*/ _jsx("h3", {
-                            class: "font-bold text-lg",
-                            children: theme.name
-                        }),
-                        /*#__PURE__*/ _jsxs("p", {
-                            class: "text-sm mt-2 leading-relaxed",
-                            children: [
-                                "This is the ",
-                                theme.name,
-                                " theme in light mode. Links",
-                                " ",
-                                /*#__PURE__*/ _jsx("a", {
-                                    tabIndex: -1,
-                                    class: "underline",
-                                    style: `color:${preview.lightLink}`,
-                                    children: "look like this"
-                                }),
-                                ". We'll show the correct light or dark mode based on your visitor's settings."
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    class: "p-5",
-                    style: `background-color:${preview.darkBg};color:${preview.darkText}`,
-                    children: [
-                        /*#__PURE__*/ _jsx("h3", {
-                            class: "font-bold text-lg",
-                            children: theme.name
-                        }),
-                        /*#__PURE__*/ _jsxs("p", {
-                            class: "text-sm mt-2 leading-relaxed",
-                            children: [
-                                "This is the ",
-                                theme.name,
-                                " theme in dark mode. Links",
-                                " ",
-                                /*#__PURE__*/ _jsx("a", {
-                                    tabIndex: -1,
-                                    class: "underline",
-                                    style: `color:${preview.darkLink}`,
-                                    children: "look like this"
-                                }),
-                                ". We'll show the correct light or dark mode based on your visitor's settings."
-                            ]
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-}
-function AppearanceContent({ themes, currentThemeId }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const signals = JSON.stringify({
-        theme: currentThemeId
-    }).replace(/</g, "\\u003c");
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("h1", {
-                class: "text-2xl font-semibold mb-2",
-                children: $__i18n._({
-                    id: "Tz0i8g",
-                    message: "Settings"
-                })
-            }),
-            /*#__PURE__*/ _jsx(SettingsNav, {
-                currentTab: "appearance"
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                "data-signals": signals,
-                "data-on:change": "@post('/dash/settings/appearance')",
-                class: "max-w-3xl",
-                children: /*#__PURE__*/ _jsxs("fieldset", {
-                    children: [
-                        /*#__PURE__*/ _jsx("legend", {
-                            class: "text-lg font-semibold",
-                            children: $__i18n._({
-                                id: "rFmBG3",
-                                message: "Color theme"
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx("p", {
-                            class: "text-sm text-muted-foreground mb-4",
-                            children: $__i18n._({
-                                id: "07Epll",
-                                message: "This will theme both your site and your dashboard. All color themes support dark mode."
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx("div", {
-                            class: "flex flex-col gap-4",
-                            children: themes.map((theme)=>/*#__PURE__*/ _jsx(ThemeCard, {
-                                    theme: theme,
-                                    selected: theme.id === currentThemeId
-                                }, theme.id))
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-// ---------------------------------------------------------------------------
-// Account tab
-// ---------------------------------------------------------------------------
-function AccountContent({ userName }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const profileSignals = JSON.stringify({
-        userName
-    }).replace(/</g, "\\u003c");
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("h1", {
-                class: "text-2xl font-semibold mb-2",
-                children: $__i18n._({
-                    id: "Tz0i8g",
-                    message: "Settings"
-                })
-            }),
-            /*#__PURE__*/ _jsx(SettingsNav, {
-                currentTab: "account"
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                class: "flex flex-col gap-6 max-w-lg",
-                children: [
-                    /*#__PURE__*/ _jsxs("form", {
-                        "data-signals": profileSignals,
-                        "data-on:submit__prevent": "@post('/dash/settings/account')",
-                        "data-indicator": "_profileLoading",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                class: "card",
-                                children: [
-                                    /*#__PURE__*/ _jsx("header", {
-                                        children: /*#__PURE__*/ _jsx("h2", {
-                                            children: $__i18n._({
-                                                id: "vERlcd",
-                                                message: "Profile"
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx("section", {
-                                        class: "flex flex-col gap-4",
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            class: "field",
-                                            children: [
-                                                /*#__PURE__*/ _jsx("label", {
-                                                    class: "label",
-                                                    children: $__i18n._({
-                                                        id: "6YtxFj",
-                                                        message: "Name"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx("input", {
-                                                    type: "text",
-                                                    "data-bind": "userName",
-                                                    class: "input",
-                                                    required: true
-                                                })
-                                            ]
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("button", {
-                                type: "submit",
-                                class: "btn mt-4",
-                                "data-attr-disabled": "$_profileLoading",
-                                children: [
-                                    /*#__PURE__*/ _jsx("span", {
-                                        "data-show": "!$_profileLoading",
-                                        children: $__i18n._({
-                                            id: "ssqvZi",
-                                            message: "Save Profile"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        "data-show": "$_profileLoading",
-                                        children: $__i18n._({
-                                            id: "k1ifdL",
-                                            message: "Processing..."
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("form", {
-                        "data-signals": "{currentPassword: '', newPassword: '', confirmPassword: ''}",
-                        "data-on:submit__prevent": "@post('/dash/settings/password')",
-                        "data-indicator": "_passwordLoading",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                class: "card",
-                                children: [
-                                    /*#__PURE__*/ _jsx("header", {
-                                        children: /*#__PURE__*/ _jsx("h2", {
-                                            children: $__i18n._({
-                                                id: "VhMDMg",
-                                                message: "Change Password"
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsxs("section", {
-                                        class: "flex flex-col gap-4",
-                                        children: [
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                class: "field",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("label", {
-                                                        class: "label",
-                                                        children: $__i18n._({
-                                                            id: "DCKkhU",
-                                                            message: "Current Password"
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ _jsx("input", {
-                                                        type: "password",
-                                                        "data-bind": "currentPassword",
-                                                        class: "input",
-                                                        required: true,
-                                                        autocomplete: "current-password"
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                class: "field",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("label", {
-                                                        class: "label",
-                                                        children: $__i18n._({
-                                                            id: "7vhWI8",
-                                                            message: "New Password"
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ _jsx("input", {
-                                                        type: "password",
-                                                        "data-bind": "newPassword",
-                                                        class: "input",
-                                                        required: true,
-                                                        minlength: 8,
-                                                        autocomplete: "new-password"
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                class: "field",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("label", {
-                                                        class: "label",
-                                                        children: $__i18n._({
-                                                            id: "yjkELF",
-                                                            message: "Confirm New Password"
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ _jsx("input", {
-                                                        type: "password",
-                                                        "data-bind": "confirmPassword",
-                                                        class: "input",
-                                                        required: true,
-                                                        minlength: 8,
-                                                        autocomplete: "new-password"
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("button", {
-                                type: "submit",
-                                class: "btn mt-4",
-                                "data-attr-disabled": "$_passwordLoading",
-                                children: [
-                                    /*#__PURE__*/ _jsx("span", {
-                                        "data-show": "!$_passwordLoading",
-                                        children: $__i18n._({
-                                            id: "VhMDMg",
-                                            message: "Change Password"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        "data-show": "$_passwordLoading",
-                                        children: $__i18n._({
-                                            id: "k1ifdL",
-                                            message: "Processing..."
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
 // ===========================================================================
-// Route handlers
+// General settings
 // ===========================================================================
-// General settings page
+/** Resolve the avatar storage key to a URL */ async function resolveAvatarUrl(c) {
+    const avatarKey = await c.var.services.settings.get("SITE_AVATAR");
+    if (!avatarKey) return "";
+    const publicUrl = getPublicUrlForProvider(c.env.STORAGE_DRIVER || "r2", c.env.R2_PUBLIC_URL, c.env.S3_PUBLIC_URL);
+    return getMediaUrl(avatarKey, publicUrl);
+}
 settingsRoutes.get("/", async (c)=>{
     const { settings } = c.var.services;
     const dbSiteName = await settings.get("SITE_NAME");
     const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
-    const siteLanguage = await getSiteLanguage(c);
+    const [siteLanguage, homeDefaultView, timeZone, siteFooter, noindex] = await Promise.all([
+        getSiteLanguage(c),
+        getHomeDefaultView(c),
+        getTimeZone(c),
+        getSiteFooter(c),
+        isNoIndex(c)
+    ]);
     const siteNameFallback = getConfigFallback(c, "SITE_NAME");
     const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
+    const siteAvatarUrl = await resolveAvatarUrl(c);
+    const showHeaderAvatar = await settings.get("SHOW_HEADER_AVATAR") === "true";
     const saved = c.req.query("saved") !== undefined;
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
@@ -541,12 +57,18 @@ settingsRoutes.get("/", async (c)=>{
             siteName: dbSiteName || "",
             siteDescription: dbSiteDescription || "",
             siteLanguage: siteLanguage,
+            homeDefaultView: homeDefaultView,
             siteNameFallback: siteNameFallback,
-            siteDescriptionFallback: siteDescriptionFallback
+            siteDescriptionFallback: siteDescriptionFallback,
+            siteAvatarUrl: siteAvatarUrl,
+            showHeaderAvatar: showHeaderAvatar,
+            timeZone: timeZone,
+            siteFooter: siteFooter,
+            noindex: noindex,
+            timezones: TIMEZONES
         })
     }));
 });
-// Save general settings
 settingsRoutes.post("/", async (c)=>{
     const body = await c.req.json();
     const { settings } = c.var.services;
@@ -562,6 +84,18 @@ settingsRoutes.post("/", async (c)=>{
         await settings.remove("SITE_DESCRIPTION");
     }
     await settings.set("SITE_LANGUAGE", body.siteLanguage);
+    // Save homepage default view (only store if non-default)
+    if (body.homeDefaultView === "featured") {
+        await settings.set("HOME_DEFAULT_VIEW", body.homeDefaultView);
+    } else {
+        await settings.remove("HOME_DEFAULT_VIEW");
+    }
+    // Timezone
+    if (body.timeZone && body.timeZone !== "UTC") {
+        await settings.set("TIME_ZONE", body.timeZone);
+    } else {
+        await settings.remove("TIME_ZONE");
+    }
     const languageChanged = oldLanguage !== body.siteLanguage;
     const displayName = body.siteName.trim() || getConfigFallback(c, "SITE_NAME");
     return sse(c, async (stream)=>{
@@ -575,14 +109,148 @@ settingsRoutes.post("/", async (c)=>{
                 selector: "title"
             });
             await stream.toast("Settings saved successfully.");
+            await stream.patchSignals({
+                _orig_siteName: body.siteName,
+                _orig_siteDescription: body.siteDescription,
+                _orig_siteLanguage: body.siteLanguage,
+                _orig_homeDefaultView: body.homeDefaultView,
+                _orig_timeZone: body.timeZone,
+                _generalDirty: false
+            });
+        }
+    });
+});
+settingsRoutes.post("/footer", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    if (body.siteFooter?.trim()) {
+        await settings.set("SITE_FOOTER", body.siteFooter.trim());
+    } else {
+        await settings.remove("SITE_FOOTER");
+    }
+    return sse(c, async (stream)=>{
+        await stream.toast("Footer saved successfully.");
+        await stream.patchSignals({
+            _orig_siteFooter: body.siteFooter,
+            _footerDirty: false
+        });
+    });
+});
+settingsRoutes.post("/seo", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    // Checkbox "noindex" is the allow-indexing signal:
+    // checked (value "true") = indexing allowed -> remove NOINDEX
+    // unchecked (value "") = indexing blocked -> set NOINDEX=true
+    if (body.noindex === "true") {
+        await settings.remove("NOINDEX");
+    } else {
+        await settings.set("NOINDEX", "true");
+    }
+    return sse(c, async (stream)=>{
+        await stream.toast("SEO settings saved successfully.");
+        await stream.patchSignals({
+            _orig_noindex: body.noindex,
+            _seoDirty: false
+        });
+    });
+});
+// ===========================================================================
+// Avatar upload & removal
+// ===========================================================================
+settingsRoutes.post("/avatar", async (c)=>{
+    const storage = c.var.storage;
+    if (!storage) {
+        return dsToast("Storage not configured.", "error");
+    }
+    const formData = await c.req.formData();
+    const file = formData.get("file");
+    if (!file) {
+        return dsToast("No file provided.", "error");
+    }
+    const allowedTypes = [
+        "image/jpeg",
+        "image/png",
+        "image/gif",
+        "image/webp",
+        "image/svg+xml"
+    ];
+    if (!allowedTypes.includes(file.type)) {
+        return dsToast("File type not allowed.", "error");
+    }
+    const maxSize = 10 * 1024 * 1024;
+    if (file.size > maxSize) {
+        return dsToast("File too large (max 10MB).", "error");
+    }
+    const { uuidv7 } = await import("uuidv7");
+    const ext = file.name.split(".").pop() || "bin";
+    const id = uuidv7();
+    const date = new Date();
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+    const filename = `${id}.${ext}`;
+    const storageKey = `media/${year}/${month}/${filename}`;
+    try {
+        await storage.put(storageKey, file.stream(), {
+            contentType: file.type
+        });
+        await c.var.services.media.create({
+            id,
+            filename,
+            originalName: file.name,
+            mimeType: file.type,
+            size: file.size,
+            storageKey,
+            provider: c.env.STORAGE_DRIVER || "r2"
+        });
+        await c.var.services.settings.set("SITE_AVATAR", storageKey);
+        // Store favicon variants as base64 in settings (small files, accessed every page load)
+        const faviconFile = formData.get("favicon");
+        const appleTouchFile = formData.get("appleTouch");
+        if (faviconFile) {
+            const b64 = arrayBufferToBase64(await faviconFile.arrayBuffer());
+            await c.var.services.settings.set("SITE_FAVICON_ICO", b64);
+        }
+        if (appleTouchFile) {
+            const b64 = arrayBufferToBase64(await appleTouchFile.arrayBuffer());
+            await c.var.services.settings.set("SITE_FAVICON_APPLE_TOUCH", b64);
         }
+        return dsRedirect("/dash/settings?saved");
+    } catch  {
+        return dsToast("Upload failed. Please try again.", "error");
+    }
+});
+settingsRoutes.post("/avatar/remove", async (c)=>{
+    await c.var.services.settings.remove("SITE_AVATAR");
+    await c.var.services.settings.remove("SITE_FAVICON_ICO");
+    await c.var.services.settings.remove("SITE_FAVICON_APPLE_TOUCH");
+    return dsRedirect("/dash/settings?saved");
+});
+settingsRoutes.post("/avatar/display", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    if (body.showHeaderAvatar === "true") {
+        await settings.set("SHOW_HEADER_AVATAR", "true");
+    } else {
+        await settings.remove("SHOW_HEADER_AVATAR");
+    }
+    return sse(c, async (stream)=>{
+        await stream.toast("Avatar display setting saved successfully.");
+        await stream.patchSignals({
+            _orig_showHeaderAvatar: body.showHeaderAvatar,
+            _avatarDisplayDirty: false
+        });
     });
 });
-// Appearance page
+// ===========================================================================
+// Appearance
+// ===========================================================================
 settingsRoutes.get("/appearance", async (c)=>{
     const { settings } = c.var.services;
     const siteName = await getSiteName(c);
     const currentThemeId = await settings.get(SETTINGS_KEYS.THEME) ?? "default";
+    const currentFontThemeId = await settings.get("FONT_THEME") ?? "default";
+    const customCSS = await settings.get(SETTINGS_KEYS.CUSTOM_CSS) ?? "";
     const themes = getAvailableThemes(c.var.config);
     const saved = c.req.query("saved") !== undefined;
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
@@ -595,11 +263,13 @@ settingsRoutes.get("/appearance", async (c)=>{
         } : undefined,
         children: /*#__PURE__*/ _jsx(AppearanceContent, {
             themes: themes,
-            currentThemeId: currentThemeId
+            currentThemeId: currentThemeId,
+            fontThemes: BUILTIN_FONT_THEMES,
+            currentFontThemeId: currentFontThemeId,
+            customCSS: customCSS
         })
     }));
 });
-// Save theme
 settingsRoutes.post("/appearance", async (c)=>{
     const body = await c.req.json();
     const { settings } = c.var.services;
@@ -615,7 +285,34 @@ settingsRoutes.post("/appearance", async (c)=>{
     }
     return dsRedirect("/dash/settings/appearance?saved");
 });
-// Account page
+settingsRoutes.post("/font-theme", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    const validFont = BUILTIN_FONT_THEMES.find((f)=>f.id === body.fontTheme);
+    if (!validFont) {
+        return dsToast("Invalid font theme selected.", "error");
+    }
+    if (validFont.id === "default") {
+        await settings.remove("FONT_THEME");
+    } else {
+        await settings.set("FONT_THEME", validFont.id);
+    }
+    return dsRedirect("/dash/settings/appearance?saved");
+});
+settingsRoutes.post("/custom-css", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    const css = body.customCSS?.trim() ?? "";
+    if (css) {
+        await settings.set(SETTINGS_KEYS.CUSTOM_CSS, css);
+    } else {
+        await settings.remove(SETTINGS_KEYS.CUSTOM_CSS);
+    }
+    return dsToast("Custom CSS saved successfully.");
+});
+// ===========================================================================
+// Account
+// ===========================================================================
 settingsRoutes.get("/account", async (c)=>{
     const siteName = await getSiteName(c);
     const session = await c.var.auth.api.getSession({
@@ -636,7 +333,6 @@ settingsRoutes.get("/account", async (c)=>{
         })
     }));
 });
-// Save account profile
 settingsRoutes.post("/account", async (c)=>{
     const body = await c.req.json();
     const name = body.userName?.trim();
@@ -655,7 +351,6 @@ settingsRoutes.post("/account", async (c)=>{
     }
     return dsToast("Profile saved successfully.");
 });
-// Change password
 settingsRoutes.post("/password", async (c)=>{
     const body = await c.req.json();
     if (body.newPassword !== body.confirmPassword) {