@jant/core 0.3.35 → 0.3.36

package/src/ui/dash/settings/SettingsRootContent.tsx

@@ -0,0 +1,236 @@
+/**
+ * Settings root page — iOS-style grouped list linking to sub-pages
+ */
+
+import { useLingui } from "@lingui/react/macro";
+
+/** Chevron right icon shared by all rows */
+function ChevronRight() {
+  return (
+    <svg
+      class="settings-item-chevron"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
+
+function SettingsItem({
+  href,
+  icon,
+  color,
+  name,
+  description,
+}: {
+  href: string;
+  icon: string;
+  color: string;
+  name: string;
+  description: string;
+}) {
+  return (
+    <a href={href} class="settings-item">
+      <span class="settings-item-icon" style={`background-color:${color}`}>
+        <span dangerouslySetInnerHTML={{ __html: icon }} />
+      </span>
+      <span class="settings-item-text">
+        <span class="settings-item-name">{name}</span>
+        <span class="settings-item-desc">{description}</span>
+      </span>
+      <ChevronRight />
+    </a>
+  );
+}
+
+// Lucide icon SVG paths (16x16, stroke-based)
+const ICONS = {
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  image: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`,
+  menu: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`,
+  palette: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>`,
+  type: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>`,
+  code: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
+  arrowRightLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/></svg>`,
+  user: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+};
+
+// oklch-based colors for icon backgrounds
+const COLORS = {
+  blue: "oklch(0.55 0.2 250)",
+  purple: "oklch(0.55 0.2 300)",
+  green: "oklch(0.55 0.18 155)",
+  orange: "oklch(0.6 0.18 55)",
+  pink: "oklch(0.6 0.2 350)",
+  indigo: "oklch(0.5 0.2 275)",
+  amber: "oklch(0.6 0.16 75)",
+  gray: "oklch(0.55 0.01 250)",
+};
+
+export function SettingsRootContent() {
+  const { t } = useLingui();
+
+  return (
+    <div class="settings-root">
+      {/* Site */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Site",
+            comment: "@context: Settings group label for site settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/dash/settings/general"
+            icon={ICONS.settings}
+            color={COLORS.blue}
+            name={t({
+              message: "General",
+              comment: "@context: Settings item — general settings",
+            })}
+            description={t({
+              message: "Name, description, language",
+              comment: "@context: Settings item description for general",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Design */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Design",
+            comment: "@context: Settings group label for design settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/dash/settings/avatar"
+            icon={ICONS.image}
+            color={COLORS.purple}
+            name={t({
+              message: "Avatar",
+              comment: "@context: Settings item — avatar settings",
+            })}
+            description={t({
+              message: "Favicon and header icon",
+              comment: "@context: Settings item description for avatar",
+            })}
+          />
+          <SettingsItem
+            href="/dash/settings/navigation"
+            icon={ICONS.menu}
+            color={COLORS.green}
+            name={t({
+              message: "Navigation",
+              comment: "@context: Settings item — navigation settings",
+            })}
+            description={t({
+              message: "Header links, featured",
+              comment: "@context: Settings item description for navigation",
+            })}
+          />
+          <SettingsItem
+            href="/dash/settings/color-theme"
+            icon={ICONS.palette}
+            color={COLORS.orange}
+            name={t({
+              message: "Color Theme",
+              comment: "@context: Settings item — color theme settings",
+            })}
+            description={t({
+              message: "Color theme",
+              comment: "@context: Settings item description for color theme",
+            })}
+          />
+          <SettingsItem
+            href="/dash/settings/font-theme"
+            icon={ICONS.type}
+            color={COLORS.pink}
+            name={t({
+              message: "Font Theme",
+              comment: "@context: Settings item — font theme settings",
+            })}
+            description={t({
+              message: "Typography",
+              comment: "@context: Settings item description for font theme",
+            })}
+          />
+          <SettingsItem
+            href="/dash/settings/custom-css"
+            icon={ICONS.code}
+            color={COLORS.indigo}
+            name={t({
+              message: "Custom CSS",
+              comment: "@context: Settings item — custom CSS settings",
+            })}
+            description={t({
+              message: "Custom styling",
+              comment: "@context: Settings item description for custom CSS",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Advanced */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Advanced",
+            comment: "@context: Settings group label for advanced settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/dash/settings/redirects"
+            icon={ICONS.arrowRightLeft}
+            color={COLORS.amber}
+            name={t({
+              message: "Redirects",
+              comment: "@context: Settings item — redirects settings",
+            })}
+            description={t({
+              message: "URL redirects",
+              comment: "@context: Settings item description for redirects",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Account */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Account",
+            comment: "@context: Settings group label for account settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/dash/settings/account"
+            icon={ICONS.user}
+            color={COLORS.gray}
+            name={t({
+              message: "Account",
+              comment: "@context: Settings item — account settings",
+            })}
+            description={t({
+              message: "Profile, password",
+              comment: "@context: Settings item description for account",
+            })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/layouts/DashLayout.tsx

@@ -9,17 +9,46 @@ import type { Context } from "hono";
 import { useLingui } from "@lingui/react/macro";
 import { BaseLayout, type ToastProps } from "./BaseLayout.js";
 
+export interface DashBreadcrumb {
+  parent: string;
+  parentHref: string;
+  current: string;
+}
+
 export interface DashLayoutProps {
   c: Context;
   title: string;
   siteName: string;
+  siteAvatarUrl?: string;
   currentPath?: string;
+  breadcrumb?: DashBreadcrumb;
   toast?: ToastProps;
 }
 
+const AVATAR_COLORS = [
+  "#737fab", // slate blue
+  "#8d7dab", // muted violet
+  "#ab7d8d", // dusty rose
+  "#ab917d", // warm taupe
+  "#7dab8d", // sage green
+  "#7d9bab", // steel blue
+  "#9a8d7d", // earth brown
+  "#7dabab", // teal grey
+];
+
+function hashString(str: string): number {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 33) ^ str.charCodeAt(i);
+  }
+  return Math.abs(hash);
+}
+
 function DashLayoutContent({
   siteName,
+  siteAvatarUrl,
   currentPath,
+  breadcrumb,
   children,
 }: PropsWithChildren<Omit<DashLayoutProps, "c" | "title">>) {
   const { t } = useLingui();
@@ -32,52 +61,37 @@ function DashLayoutContent({
       {/* Header */}
       <header class="dash-header">
         <div class="container dash-header-inner">
-          <div class="dash-header-left">
-            <a id="site-name" href="/dash" class="dash-header-logo">
-              {siteName}
-            </a>
-            <a
-              href="/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="dash-header-site-link"
-              aria-label={t({
-                message: "View Site",
-                comment:
-                  "@context: Dashboard header link to view the public site",
-              })}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+          <a href="/dash" class="dash-header-avatar-link">
+            {siteAvatarUrl ? (
+              <img src={siteAvatarUrl} alt="" class="dash-header-avatar" />
+            ) : (
+              <span
+                class="dash-header-avatar dash-header-avatar-fallback"
+                style={`background-color: ${AVATAR_COLORS[hashString(siteName) % AVATAR_COLORS.length]}`}
               >
-                <path d="M15 3h6v6" />
-                <path d="M10 14 21 3" />
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              </svg>
-            </a>
-          </div>
-
+                {siteName.charAt(0).toUpperCase()}
+              </span>
+            )}
+          </a>
           <nav class="dash-header-nav">
-            <a href="/dash/pages" class={navClass(/^\/dash\/pages/)}>
+            <a href="/dash" class={navClass(/^\/dash$/)}>
               {t({
-                message: "Pages",
-                comment: "@context: Dashboard navigation - pages management",
+                message: "Dashboard",
+                comment: "@context: Dashboard navigation - dashboard home",
               })}
             </a>
-            <a href="/dash/appearance" class={navClass(/^\/dash\/appearance/)}>
+            <span class="dash-header-nav-sep" aria-hidden="true">
+              &middot;
+            </span>
+            <a href="/dash/pages" class={navClass(/^\/dash\/pages/)}>
               {t({
-                message: "Appearance",
-                comment: "@context: Dashboard navigation - appearance settings",
+                message: "Pages",
+                comment: "@context: Dashboard navigation - pages management",
               })}
             </a>
+            <span class="dash-header-nav-sep" aria-hidden="true">
+              &middot;
+            </span>
             <a href="/dash/settings" class={navClass(/^\/dash\/settings/)}>
               {t({
                 message: "Settings",
@@ -86,54 +100,115 @@ function DashLayoutContent({
             </a>
           </nav>
 
-          <div class="dropdown-menu">
-            <button
-              type="button"
-              id="dash-menu-trigger"
-              class="dash-header-menu-btn"
-              aria-haspopup="menu"
-              aria-controls="dash-menu"
-              aria-expanded="false"
+          <div class="dash-header-right">
+            <a
+              href="/"
+              class="dash-header-visit"
+              target="_blank"
               aria-label={t({
-                message: "Menu",
-                comment: "@context: Dashboard header menu button",
+                message: "Visit Blog",
+                comment:
+                  "@context: Dashboard header link to visit the public blog",
               })}
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="currentColor"
+              <span
+                class="dash-header-visit-icon"
+                data-tooltip={t({
+                  message: "Visit Blog",
+                  comment:
+                    "@context: Dashboard header tooltip for visit blog icon on mobile",
+                })}
+                data-side="bottom"
               >
-                <circle cx="5" cy="12" r="2" />
-                <circle cx="12" cy="12" r="2" />
-                <circle cx="19" cy="12" r="2" />
-              </svg>
-            </button>
-            <div
-              id="dash-menu-popover"
-              data-popover
-              data-align="end"
-              aria-hidden="true"
-            >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+                  <path d="m21 3-9 9" />
+                  <path d="M15 3h6v6" />
+                </svg>
+              </span>
+              <span class="dash-header-visit-text">
+                {t({
+                  message: "Visit Blog",
+                  comment:
+                    "@context: Dashboard header link text to visit the public blog",
+                })}
+                <span class="ml-1" aria-hidden="true">
+                  {"\u2197"}
+                </span>
+              </span>
+            </a>
+
+            <div class="dropdown-menu">
+              <button
+                type="button"
+                id="dash-menu-trigger"
+                class="dash-header-menu-btn"
+                aria-haspopup="menu"
+                aria-controls="dash-menu"
+                aria-expanded="false"
+                aria-label={t({
+                  message: "Menu",
+                  comment: "@context: Dashboard header menu button",
+                })}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <circle cx="5" cy="12" r="2" />
+                  <circle cx="12" cy="12" r="2" />
+                  <circle cx="19" cy="12" r="2" />
+                </svg>
+              </button>
               <div
-                role="menu"
-                id="dash-menu"
-                aria-labelledby="dash-menu-trigger"
+                id="dash-menu-popover"
+                data-popover
+                data-align="end"
+                aria-hidden="true"
               >
-                <a href="/signout" role="menuitem">
-                  {t({
-                    message: "Sign Out",
-                    comment: "@context: Dashboard menu item to sign out",
-                  })}
-                </a>
+                <div
+                  role="menu"
+                  id="dash-menu"
+                  aria-labelledby="dash-menu-trigger"
+                >
+                  <a href="/signout" role="menuitem">
+                    {t({
+                      message: "Sign Out",
+                      comment: "@context: Dashboard menu item to sign out",
+                    })}
+                  </a>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </header>
 
+      {breadcrumb && (
+        <div class="container">
+          <nav class="dash-breadcrumb">
+            <a href={breadcrumb.parentHref} class="dash-breadcrumb-parent">
+              {breadcrumb.parent}
+            </a>
+            <span class="dash-breadcrumb-sep">/</span>
+            <span class="dash-breadcrumb-current">{breadcrumb.current}</span>
+          </nav>
+        </div>
+      )}
+
       {/* Main */}
       <div class="container py-8">
         <main>{children}</main>
@@ -146,7 +221,9 @@ export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
   c,
   title,
   siteName,
+  siteAvatarUrl,
   currentPath,
+  breadcrumb,
   toast,
   children,
 }) => {
@@ -157,7 +234,12 @@ export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
       toast={toast}
       isAuthenticated={true}
     >
-      <DashLayoutContent siteName={siteName} currentPath={currentPath}>
+      <DashLayoutContent
+        siteName={siteName}
+        siteAvatarUrl={siteAvatarUrl}
+        currentPath={currentPath}
+        breadcrumb={breadcrumb}
+      >
         {children}
       </DashLayoutContent>
     </BaseLayout>

package/src/ui/layouts/SiteLayout.tsx

@@ -37,6 +37,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   showHeaderAvatar,
   siteFooterHtml,
   sidebar,
+  uploadMaxFileSize,
   children,
 }) => {
   const { t } = useLingui();
@@ -78,7 +79,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
 
   return (
     <div class="site-page">
-      <header class={`site-header ${sidebar ? "site-header-sidebar" : ""}`}>
+      <header class="site-header">
         <div class="site-header-inner">
           <div class="site-header-top site-header-top-bordered">
             <a href="/" class="site-logo">
@@ -180,13 +181,9 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
 
       <main class="site-main">
         {sidebar ? (
-          <div class="container-sidebar">
-            <div class="sidebar-layout">
-              <aside class="sidebar-nav">{sidebar}</aside>
-              <div class="sidebar-main">
-                <div class="site-content">{children}</div>
-              </div>
-            </div>
+          <div class="site-container site-container-sidebar">
+            <aside class="sidebar-nav">{sidebar}</aside>
+            <div class="site-content">{children}</div>
           </div>
         ) : (
           <div class="site-container">
@@ -221,10 +218,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
       </main>
 
       {siteFooterHtml && (
-        <footer
-          class={`site-footer ${sidebar ? "site-footer-sidebar" : ""}`}
-          data-footer
-        >
+        <footer class="site-footer" data-footer>
           <div class="site-container">
             <div
               class="prose"
@@ -234,7 +228,13 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
         </footer>
       )}
 
-      {isAuthenticated && <ComposeDialog collections={collections} />}
+      <jant-media-lightbox />
+      {isAuthenticated && (
+        <ComposeDialog
+          collections={collections}
+          uploadMaxFileSize={uploadMaxFileSize}
+        />
+      )}
     </div>
   );
 };

package/src/ui/pages/ArchivePage.tsx

@@ -47,7 +47,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
   hasMore,
   nextCursor,
   format,
-  featured,
+  visibility,
 }) => {
   const { t } = useLingui();
   const title = format
@@ -65,7 +65,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
             href="/archive"
             class={
               "badge " +
-              (!format && !featured ? "badge-primary" : "badge-outline")
+              (!format && !visibility ? "badge-primary" : "badge-outline")
             }
           >
             {t({
@@ -86,8 +86,11 @@ export const ArchivePage: FC<ArchivePageProps> = ({
             </a>
           ))}
           <a
-            href="/archive?featured=true"
-            class={"badge " + (featured ? "badge-primary" : "badge-outline")}
+            href="/archive?visibility=featured"
+            class={
+              "badge " +
+              (visibility === "featured" ? "badge-primary" : "badge-outline")
+            }
           >
             {t({
               message: "Featured",
@@ -101,7 +104,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         {groups.length === 0 ? (
           <p class="text-muted-foreground">
             {t({
-              message: "No posts found.",
+              message: "No posts match this filter.",
               comment: "@context: Archive empty state",
             })}
           </p>
@@ -150,8 +153,8 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         baseUrl={
           format
             ? "/archive?format=" + format
-            : featured
-              ? "/archive?featured=true"
+            : visibility
+              ? "/archive?visibility=" + visibility
               : "/archive"
         }
         hasMore={hasMore}