fse-theme-default 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fse-theme-default",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Default theme for full_stack_engine apps — a complete Astro project: app shell, design system, auth pages, emails and the generic metadata-driven CRUD pages. Extend it with a child theme.",
   "type": "module",
   "license": "MIT OR Apache-2.0",

package/src/components/Logo.astro

@@ -2,16 +2,21 @@
 /**
  * Extension point: the logo shown in the sidebar, the mobile header and the
  * auth pages. A child theme either replaces src/assets/logo.svg or
- * overrides this file (e.g. separate light and dark images).
+ * overrides this file (e.g. separate light and dark images, other sizes per
+ * `variant`).
  */
 import { Image } from "astro:assets";
 import logo from "../assets/logo.svg";
 
 interface Props {
+  /** Where it is drawn; picks the default size. */
+  variant?: "sidebar" | "mobile" | "auth";
+  /** Replaces the variant's size classes entirely. */
   class?: string;
 }
 
-const { class: className = "h-9 w-auto" } = Astro.props;
+const sizes = { sidebar: "h-9 w-auto", mobile: "h-8 w-auto", auth: "h-12 w-auto" };
+const { variant = "sidebar", class: className } = Astro.props;
 ---
 
-<Image src={logo} alt="Logo" class={className} />
+<Image src={logo} alt="Logo" class={className ?? sizes[variant]} />

package/src/components/NavIcon.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * The named 18px icons sidebar entries use. A model picks one with
+ * `#[model(nav(icon = "heart"))]` (or `public_nav(...)`); the framework sends
+ * `table` when it names none. An unknown name draws nothing — add it here
+ * (or in a child theme's override of this file).
+ *
+ * home, grid, calendar, heart, run, user, users, settings, table, list,
+ * box, cart, file, chart, tag, mail, map-pin, star
+ */
+import type { SsrValue } from "fse-ssr/ssr";
+
+interface Props {
+  name: string | SsrValue<string>;
+}
+
+const { name } = Astro.props;
+const a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "1.5",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+} as const;
+---
+
+{name === "home" && (<svg {...a}><path d="M3 10.5 12 3l9 7.5"></path><path d="M5 9.5V21h14V9.5"></path><path d="M10 21v-6h4v6"></path></svg>)}
+{name === "grid" && (<svg {...a}><rect width="7.5" height="7.5" x="2.75" y="2.75" rx="1.9"></rect><rect width="7.5" height="7.5" x="13.75" y="2.75" rx="1.9"></rect><rect width="7.5" height="7.5" x="13.75" y="13.75" rx="1.9"></rect><rect width="7.5" height="7.5" x="2.75" y="13.75" rx="1.9"></rect></svg>)}
+{name === "calendar" && (<svg {...a}><rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect><path d="M16 2v4M8 2v4m-5 4h18"></path></svg>)}
+{name === "heart" && (<svg {...a}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>)}
+{name === "run" && (<svg {...a}><path d="M13 4a1 1 0 1 0 2 0 1 1 0 0 0-2 0"></path><path d="m7 21 3-6 2 2 3-4 3 8"></path><path d="m5 14 2-5 5 1 2-4"></path></svg>)}
+{name === "user" && (<svg {...a}><circle cx="12" cy="7" r="4"></circle><path d="M5 21v-2a7 7 0 0 1 14 0v2"></path></svg>)}
+{name === "users" && (<svg {...a}><circle cx="9" cy="7" r="4"></circle><path d="M3 21v-2a6 6 0 0 1 12 0v2"></path><path d="M16 3.13a4 4 0 0 1 0 7.75M21 21v-2a6 6 0 0 0-4-5.66"></path></svg>)}
+{name === "settings" && (<svg {...a}><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.6.85 1 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>)}
+{name === "table" && (<svg {...a}><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18M9 21V9"></path></svg>)}
+{name === "list" && (<svg {...a}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"></path></svg>)}
+{name === "box" && (<svg {...a}><path d="M21 8 12 3 3 8v8l9 5 9-5z"></path><path d="m3 8 9 5 9-5M12 13v8"></path></svg>)}
+{name === "cart" && (<svg {...a}><circle cx="9" cy="20" r="1"></circle><circle cx="18" cy="20" r="1"></circle><path d="M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L21 7H6"></path></svg>)}
+{name === "file" && (<svg {...a}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><path d="M14 3v6h6M8 13h8M8 17h5"></path></svg>)}
+{name === "chart" && (<svg {...a}><path d="M3 3v18h18"></path><path d="M7 15v2M12 10v7M17 6v11"></path></svg>)}
+{name === "tag" && (<svg {...a}><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z"></path><circle cx="7.5" cy="7.5" r="1.5"></circle></svg>)}
+{name === "mail" && (<svg {...a}><rect width="18" height="14" x="3" y="5" rx="2"></rect><path d="m3 7 9 6 9-6"></path></svg>)}
+{name === "map-pin" && (<svg {...a}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>)}
+{name === "star" && (<svg {...a}><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"></path></svg>)}

package/src/components/SettingsSections.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Extension point: the app's own sections of the settings page, rendered
+ * between "account security" and "delete account". The default shows the
+ * account's name. A child theme overrides this file to put its own forms
+ * here (a profile, preferences, ...) — the data comes from the app through
+ * `FrameworkApp::page_context("settings", ...)`, and its POST handlers
+ * re-render the page with `auth_module::settings_context`.
+ */
+import { ssr } from "fse-ssr/ssr";
+import type { SettingsPage } from "../types/pages";
+
+const { t, first_name, last_name } = ssr<SettingsPage>();
+---
+
+{(first_name || last_name) && (
+<div class="py-6">
+  <h3 class="text-base font-semibold text-secondary-900">
+    {t.settings.name}
+  </h3>
+  <div class="mt-3 px-4 py-3 rounded-lg bg-secondary-50 border border-secondary-100">
+    <span class="text-sm font-medium text-secondary-900">
+      {first_name} {last_name}
+    </span>
+  </div>
+</div>
+)}

package/src/components/Sidebar.astro

@@ -1,11 +1,14 @@
 ---
 /**
  * The app shell's navigation. Everything is data-driven: the framework
- * injects `nav` (the admin page of every model the user may read) and
- * `user`; app-specific links come from the SidebarLinks extension point.
+ * injects `nav` (the models' sidebar entries — label, icon and order come
+ * from `#[model(nav(...), public_nav(...))]` and the app's translations)
+ * and `user`; links that aren't a model come from the SidebarLinks
+ * extension point.
  */
 import { ssr } from "fse-ssr/ssr";
 import Logo from "./Logo.astro";
+import NavIcon from "./NavIcon.astro";
 import NavLink from "./NavLink.astro";
 import SidebarLinks from "./SidebarLinks.astro";
 import type { ShellContext } from "../types";
@@ -33,7 +36,7 @@ const { t, nav, user, lang_prefix } = ssr<ShellContext>();
       class="sidebar-full-logo flex items-center gap-2 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 rounded-md"
       href={`${lang_prefix}/`}
     >
-      <Logo class="h-9 w-auto" />
+      <Logo variant="sidebar" />
     </a>
 
     <button
@@ -70,10 +73,8 @@ const { t, nav, user, lang_prefix } = ssr<ShellContext>();
     <SidebarLinks />
 
     {nav.map((item) => (
-      <NavLink href={`${lang_prefix}${item.href}`} label={t.models[item.table].title ?? item.table}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18M9 21V9"></path>
-        </svg>
+      <NavLink href={`${lang_prefix}${item.href}`} label={item.label}>
+        <NavIcon name={item.icon} />
       </NavLink>
     ))}
   </nav>

package/src/layouts/Layout.astro

@@ -73,7 +73,7 @@ const { lang } = ssr();
                 <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
               </svg>
             </button>
-            <a href="/"><Logo class="h-8 w-auto" /></a>
+            <a href="/"><Logo variant="mobile" /></a>
           </div>
         )}
         <slot />

package/src/pages/forgot-password.astro

@@ -14,7 +14,7 @@ const messages = t.messages as Record<string, string>;
     <div class="w-full max-w-sm">
       <div class="flex justify-center mb-8">
         <a href="/">
-          <Logo class="h-12 w-auto" />
+          <Logo variant="auth" />
         </a>
       </div>
 

package/src/pages/index.astro

@@ -30,7 +30,7 @@ const { t, nav, user, lang_prefix } = ssr<ShellContext>();
         {nav.map((item) => (
           <a href={`${lang_prefix}${item.href}`}>
             <Card accent="primary" hover>
-              <h2 class="text-lg font-bold text-secondary-900">{t.models[item.table].title ?? item.table}</h2>
+              <h2 class="text-lg font-bold text-secondary-900">{item.label}</h2>
               <p class="text-sm text-secondary-500">{t.dashboard.manage ?? "Manage entries"}</p>
             </Card>
           </a>

package/src/pages/login.astro

@@ -16,7 +16,7 @@ const messages = t.messages as Record<string, string>;
       <!-- Logo -->
       <div class="flex justify-center mb-8">
         <a href="/">
-          <Logo class="h-12 w-auto" />
+          <Logo variant="auth" />
         </a>
       </div>
 

package/src/pages/register.astro

@@ -14,7 +14,7 @@ const errors = t.errors as Record<string, string>;
       <!-- Logo -->
       <div class="flex justify-center mb-8">
         <a href="/">
-          <Logo class="h-12 w-auto" />
+          <Logo variant="auth" />
         </a>
       </div>
 

package/src/pages/settings.astro

@@ -5,13 +5,12 @@ import Card from "../components/Card.astro";
 import Header from "../components/Header.astro";
 import Input from "../components/Input.astro";
 import Modal from "../components/Modal.astro";
+import SettingsSections from "../components/SettingsSections.astro";
 import type { SettingsPage } from "../types/pages";
 
 const {
   t,
   current_email,
-  first_name,
-  last_name,
   success,
   error,
   email_success,
@@ -29,20 +28,6 @@ const errors = t.errors as Record<string, string>;
     <Card>
       <div class="flex flex-col divide-y divide-secondary-100">
 
-        <!-- Name -->
-        {(first_name || last_name) && (
-        <div class="pb-6">
-          <h3 class="text-base font-semibold text-secondary-900">
-            {t.settings.name}
-          </h3>
-          <div class="mt-3 px-4 py-3 rounded-lg bg-secondary-50 border border-secondary-100">
-            <span class="text-sm font-medium text-secondary-900">
-              {first_name} {last_name}
-            </span>
-          </div>
-        </div>
-        )}
-
         <!-- Email Setting -->
         <div class="py-6 first:pt-0">
           <div class="flex items-start justify-between mb-3 flex-wrap gap-2">
@@ -89,6 +74,9 @@ const errors = t.errors as Record<string, string>;
           )}
         </div>
 
+        <!-- The app's sections (default: the account's name) -->
+        <SettingsSections />
+
         <!-- Danger Zone -->
         <div class="pt-6">
           <div class="flex items-start justify-between flex-wrap gap-3">

package/src/pages/user.astro

@@ -56,7 +56,7 @@ const roleLabels = t.roles as Record<string, string>;
         <!-- Actions -->
         <div class="flex sm:justify-end pt-5 border-t border-secondary-100">
           <button type="submit" class="btn-primary w-full sm:w-auto">
-            <span>{t.common.save}</span>
+            <span>{t.users.save}</span>
           </button>
         </div>
       </form>

package/src/types.ts

@@ -136,6 +136,12 @@ export interface ModelDetailPage {
 export interface NavItem {
   table: string;
   href: string;
+  /** Already translated (`t.models.<table>.nav` / `.public_nav` / `.title`). */
+  label: string;
+  /** A `NavIcon` name. */
+  icon: string;
+  /** The public list's entry rather than the admin page. */
+  public: boolean;
 }
 
 /** The signed-in user as injected by the framework (absent when signed out). */