@jant/core 0.3.34 → 0.3.36

package/src/ui/dash/appearance/FontThemeContent.tsx

@@ -4,7 +4,6 @@
 
 import { useLingui } from "@lingui/react/macro";
 import type { FontTheme } from "../../font-themes.js";
-import { AppearanceNav } from "./AppearanceNav.js";
 
 export function FontThemeContent({
   fontThemes,
@@ -16,80 +15,73 @@ export function FontThemeContent({
   const { t } = useLingui();
 
   return (
-    <>
-      <AppearanceNav currentTab="fonts" />
-
-      <div
-        data-signals={JSON.stringify({ fontTheme: currentFontThemeId }).replace(
-          /</g,
-          "\\u003c",
-        )}
-        data-on:change="@post('/dash/appearance/font-theme')"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Font theme",
-              comment: "@context: Appearance settings heading for font theme",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
-            {t({
-              message:
-                "Choose a font pairing for your site. All options use system fonts for fast loading.",
-              comment: "@context: Font theme settings description",
-            })}
-          </p>
-          <div class="flex flex-col gap-2">
-            {fontThemes.map((ft) => (
-              <label
-                key={ft.id}
-                class={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${ft.id === currentFontThemeId ? "border-primary" : "border-border"}`}
-                data-class:border-primary={`$fontTheme === '${ft.id}'`}
-                data-class:border-border={`$fontTheme !== '${ft.id}'`}
-              >
-                <input
-                  type="radio"
-                  name="fontTheme"
-                  value={ft.id}
-                  data-bind="fontTheme"
-                  checked={ft.id === currentFontThemeId || undefined}
-                  class="mt-1"
-                />
-                <div>
-                  <div class="font-medium">{t(ft.name)}</div>
-                  <div class="text-sm text-muted-foreground">
-                    {t(ft.description)}
+    <div
+      data-signals={JSON.stringify({ fontTheme: currentFontThemeId }).replace(
+        /</g,
+        "\\u003c",
+      )}
+      data-on:change="@post('/dash/settings/font-theme')"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Font theme",
+            comment: "@context: Appearance settings heading for font theme",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "Choose a font pairing for your site. All options use system fonts for fast loading.",
+            comment: "@context: Font theme settings description",
+          })}
+        </p>
+        <div class="flex flex-col gap-2">
+          {fontThemes.map((ft) => (
+            <label
+              key={ft.id}
+              class={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${ft.id === currentFontThemeId ? "border-primary" : "border-border"}`}
+              data-class:border-primary={`$fontTheme === '${ft.id}'`}
+              data-class:border-border={`$fontTheme !== '${ft.id}'`}
+            >
+              <input
+                type="radio"
+                name="fontTheme"
+                value={ft.id}
+                data-bind="fontTheme"
+                checked={ft.id === currentFontThemeId || undefined}
+                class="mt-1"
+              />
+              <div>
+                <div class="font-medium">{t(ft.name)}</div>
+                <div class="text-sm text-muted-foreground">
+                  {t(ft.description)}
+                </div>
+                <div class="mt-1 text-sm leading-relaxed">
+                  <div
+                    class="font-semibold"
+                    style={`font-family:${ft.headingFontFamily}`}
+                  >
+                    {t({
+                      message: "The quick brown fox jumps over the lazy dog.",
+                      comment:
+                        "@context: Font theme preview sentence for headings",
+                    })}
                   </div>
-                  <div class="mt-1 text-sm leading-relaxed">
-                    <div
-                      class="font-semibold"
-                      style={`font-family:${ft.headingFontFamily}`}
-                    >
-                      {t({
-                        message: "The quick brown fox jumps over the lazy dog.",
-                        comment:
-                          "@context: Font theme preview sentence for headings",
-                      })}
-                    </div>
-                    <div
-                      class="mt-2"
-                      style={`font-family:${ft.bodyFontFamily}`}
-                    >
-                      {t({
-                        message: "The quick brown fox jumps over the lazy dog.",
-                        comment:
-                          "@context: Font theme preview sentence for body text",
-                      })}
-                    </div>
+                  <div class="mt-2" style={`font-family:${ft.bodyFontFamily}`}>
+                    {t({
+                      message: "The quick brown fox jumps over the lazy dog.",
+                      comment:
+                        "@context: Font theme preview sentence for body text",
+                    })}
                   </div>
                 </div>
-              </label>
-            ))}
-          </div>
-        </fieldset>
-      </div>
-    </>
+              </div>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    </div>
   );
 }

package/src/ui/dash/appearance/NavigationContent.tsx

@@ -8,9 +8,7 @@ import { SYSTEM_NAV_KEYS } from "../../../types.js";
 import type {
   NavManagerLabels,
   SystemNavConfig,
-} from "../../components/nav-manager-types.js";
-import { AppearanceNav } from "./AppearanceNav.js";
-
+} from "../../../client/components/nav-manager-types.js";
 // =============================================================================
 // System descriptions (used to build the config passed to the Lit component)
 // =============================================================================
@@ -69,7 +67,7 @@ export function NavigationContent({
 
   const labels: NavManagerLabels = {
     preview: t({
-      message: "Preview",
+      message: "Navigation Preview",
       comment: "@context: Label for nav preview section",
     }),
     navigationItems: t({
@@ -121,11 +119,11 @@ export function NavigationContent({
       comment: "@context: Error toast when nav label is empty",
     }),
     saveFailed: t({
-      message: "Failed to save. Please try again.",
+      message: "Couldn't save. Try again in a moment.",
       comment: "@context: Error toast when nav save fails",
     }),
     deleteFailed: t({
-      message: "Failed to delete. Please try again.",
+      message: "Couldn't delete. Try again in a moment.",
       comment: "@context: Error toast when nav delete fails",
     }),
     systemLinks: t({
@@ -154,7 +152,7 @@ export function NavigationContent({
       comment: "@context: Placeholder for page search input in combobox",
     }),
     noPagesFound: t({
-      message: "No pages found.",
+      message: "No matching pages.",
       comment: "@context: Empty state when page search has no results",
     }),
     addLink: t({
@@ -169,20 +167,34 @@ export function NavigationContent({
       message: "All pages are already in navigation.",
       comment: "@context: Message when no pages available to add",
     }),
+    createPage: t({
+      message: "Create page",
+      comment: "@context: Link at bottom of page combobox to create a new page",
+    }),
     urlPlaceholder: "/archive or https://...",
     maxVisibleLinks: t({
-      message: "Max visible links",
+      message: "Links shown in header",
       comment: "@context: Label for max visible nav links number input",
     }),
+    maxVisibleLinksDescription: t({
+      message: "The rest will be tucked into a ··· menu",
+      comment:
+        "@context: Description for max visible nav links, explains overflow behavior",
+    }),
     maxVisibleSaved: t({
       message: "Max visible links saved",
       comment: "@context: Toast after saving max visible nav links setting",
     }),
     useFeaturedAsDefault: t({
-      message: "Use Featured as default home view",
+      message: "Open with Featured posts",
       comment:
         "@context: Switch label for setting featured posts as default homepage",
     }),
+    useFeaturedAsDefaultDescription: t({
+      message: "When off, visitors see your latest posts first",
+      comment:
+        "@context: Description for featured default toggle, explains what happens when off",
+    }),
     homeViewSaved: t({
       message: "Home view saved",
       comment: "@context: Toast after saving home default view setting",
@@ -205,98 +217,97 @@ export function NavigationContent({
     JSON.stringify(data).replace(/</g, "\\u003c");
 
   return (
-    <>
-      <AppearanceNav currentTab="navigation" />
-
-      <div class="max-w-3xl flex flex-col gap-8">
-        <jant-nav-manager
-          items={escapeJson(itemsData)}
-          labels={escapeJson(labels)}
-          system-nav-items={escapeJson(systemNavData)}
-          available-pages={escapeJson(pagesData)}
-          site-name={siteName}
-          max-visible={headerNavMaxVisible}
-          home-default-view={homeDefaultView}
-        >
-          {/* SSR fallback: static preview until JS hydrates */}
-          <div class="border rounded-lg">
-            <p class="text-xs text-muted-foreground px-4 pt-3">
+    <div class="max-w-3xl flex flex-col gap-8">
+      <jant-nav-manager
+        items={escapeJson(itemsData)}
+        labels={escapeJson(labels)}
+        system-nav-items={escapeJson(systemNavData)}
+        available-pages={escapeJson(pagesData)}
+        site-name={siteName}
+        max-visible={headerNavMaxVisible}
+        home-default-view={homeDefaultView}
+      >
+        {/* SSR fallback: static preview until JS hydrates */}
+        <div class="nav-preview">
+          <div class="nav-preview-chrome">
+            <div class="nav-preview-dots">
+              <span />
+              <span />
+              <span />
+            </div>
+            <span class="nav-preview-label">
               {t({
-                message: "Preview",
+                message: "Navigation Preview",
                 comment: "@context: Label for nav preview section",
               })}
-            </p>
-            <div class="px-5 py-3">
-              <div class="site-header-top">
-                <a href="/" class="site-logo">
-                  {siteName}
-                </a>
-                <div class="site-header-right">
-                  {navItems.length > 0 && (
-                    <nav class="site-header-nav">
-                      {navItems.slice(0, headerNavMaxVisible).map((item) => (
-                        <a
-                          key={item.id}
-                          href={item.url}
-                          class="site-header-link"
-                        >
-                          {item.label}
-                        </a>
-                      ))}
-                      {navItems.length > headerNavMaxVisible && (
-                        <span class="text-muted-foreground">…</span>
-                      )}
-                    </nav>
-                  )}
-                  <span class="site-header-search" 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"
-                    >
-                      <circle cx="11" cy="11" r="8" />
-                      <path d="m21 21-4.35-4.35" />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-              <nav class="site-browse-nav">
-                <span class="site-browse-link site-browse-link-active">
-                  {homeDefaultView === "featured"
-                    ? t({
-                        message: "Featured",
-                        comment: "@context: Browse filter label",
-                      })
-                    : t({
-                        message: "Latest",
-                        comment: "@context: Browse filter label",
-                      })}
-                </span>
-                <span class="site-browse-sep" aria-hidden="true">
-                  /
-                </span>
-                <span class="site-browse-link">
-                  {homeDefaultView === "featured"
-                    ? t({
-                        message: "Latest",
-                        comment: "@context: Browse filter label",
-                      })
-                    : t({
-                        message: "Featured",
-                        comment: "@context: Browse filter label",
-                      })}
+            </span>
+          </div>
+          <div class="nav-preview-content">
+            <div class="site-header-top">
+              <a href="/" class="site-logo">
+                {siteName}
+              </a>
+              <div class="site-header-right">
+                {navItems.length > 0 && (
+                  <nav class="site-header-nav">
+                    {navItems.slice(0, headerNavMaxVisible).map((item) => (
+                      <a key={item.id} href={item.url} class="site-header-link">
+                        {item.label}
+                      </a>
+                    ))}
+                    {navItems.length > headerNavMaxVisible && (
+                      <span class="text-muted-foreground">…</span>
+                    )}
+                  </nav>
+                )}
+                <span class="site-header-search" 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"
+                  >
+                    <circle cx="11" cy="11" r="8" />
+                    <path d="m21 21-4.35-4.35" />
+                  </svg>
                 </span>
-              </nav>
+              </div>
             </div>
+            <nav class="site-browse-nav">
+              <span class="site-browse-link site-browse-link-active">
+                {homeDefaultView === "featured"
+                  ? t({
+                      message: "Featured",
+                      comment: "@context: Browse filter label",
+                    })
+                  : t({
+                      message: "Latest",
+                      comment: "@context: Browse filter label",
+                    })}
+              </span>
+              <span class="site-browse-sep" aria-hidden="true">
+                /
+              </span>
+              <span class="site-browse-link">
+                {homeDefaultView === "featured"
+                  ? t({
+                      message: "Latest",
+                      comment: "@context: Browse filter label",
+                    })
+                  : t({
+                      message: "Featured",
+                      comment: "@context: Browse filter label",
+                    })}
+              </span>
+            </nav>
           </div>
-        </jant-nav-manager>
-      </div>
-    </>
+        </div>
+      </jant-nav-manager>
+    </div>
   );
 }

package/src/ui/dash/media/MediaListContent.tsx

@@ -10,6 +10,7 @@ import {
   getImageUrl,
   getPublicUrlForProvider,
 } from "../../../lib/image.js";
+import { UPLOAD_ACCEPT } from "../../../lib/upload.js";
 
 function formatSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -84,11 +85,13 @@ export function MediaListContent({
   r2PublicUrl,
   imageTransformUrl,
   s3PublicUrl,
+  uploadMaxFileSize,
 }: {
   mediaList: Media[];
   r2PublicUrl?: string;
   imageTransformUrl?: string;
   s3PublicUrl?: string;
+  uploadMaxFileSize?: number;
 }) {
   const { t } = useLingui();
 
@@ -105,7 +108,7 @@ export function MediaListContent({
     comment: "@context: Button to upload media file",
   });
   const errorText = t({
-    message: "Upload failed. Please try again.",
+    message: "Upload didn't go through. Try again in a moment.",
     comment: "@context: Upload error message",
   });
 
@@ -131,8 +134,9 @@ export function MediaListContent({
           <input
             type="file"
             class="hidden"
-            accept="image/*"
+            accept={UPLOAD_ACCEPT}
             data-media-upload
+            data-max-file-size={uploadMaxFileSize ?? 500}
             data-text-processing={processingText}
             data-text-uploading={uploadingText}
             data-text-error={errorText}
@@ -146,7 +150,7 @@ export function MediaListContent({
           <p>
             {t({
               message:
-                "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
+                "Images are automatically optimized (resized, converted to WebP). Video, audio, and PDF files are uploaded as-is (max 200MB).",
               comment:
                 "@context: Media upload instructions - auto optimization",
             })}
@@ -160,7 +164,8 @@ export function MediaListContent({
           <div id="empty-state">
             <EmptyState
               message={t({
-                message: "No media uploaded yet.",
+                message:
+                  "Your media library is empty. Upload your first file to get started.",
                 comment: "@context: Empty state message when no media exists",
               })}
             />

package/src/ui/dash/media/ViewMediaContent.tsx

@@ -178,10 +178,10 @@ export function ViewMediaContent({
               comment: "@context: Button to delete media",
             })}
             formAction={`/dash/media/${media.id}/delete`}
-            confirmMessage="Are you sure you want to delete this media?"
+            confirmMessage="Delete this file permanently?"
             description={t({
               message:
-                "Deleting this media will remove it permanently from storage.",
+                "This file will be permanently removed from storage. Posts using it will show a broken link.",
               comment: "@context: Warning message before deleting media",
             })}
           />

package/src/ui/dash/pages/PagesContent.tsx

@@ -28,7 +28,8 @@ export function PagesContent({ pages }: { pages: Page[] }) {
       {pages.length === 0 ? (
         <p class="text-sm text-muted-foreground py-4">
           {t({
-            message: "No pages yet. Create your first page to get started.",
+            message:
+              "No pages yet. Create one to add static content to your site.",
             comment: "@context: Empty state for pages list",
           })}
         </p>

package/src/ui/dash/posts/PostForm.tsx

@@ -100,7 +100,7 @@ export const PostForm: FC<PostFormProps> = ({
       comment: "@context: Remove media attachment button",
     }),
     mediaEmptyLabel: t({
-      message: "No media selected yet.",
+      message: "No media attached.",
       comment: "@context: Post form media empty state",
     }),
     statusLabel: t({
@@ -115,9 +115,21 @@ export const PostForm: FC<PostFormProps> = ({
       message: "Draft",
       comment: "@context: Post status option",
     }),
-    featuredLabel: t({
+    visibilityLabel: t({
+      message: "Visibility",
+      comment: "@context: Post form field - post visibility",
+    }),
+    visibilityListed: t({
+      message: "Listed",
+      comment: "@context: Visibility option - appears everywhere",
+    }),
+    visibilityFeatured: t({
       message: "Featured",
-      comment: "@context: Post form checkbox - mark as featured",
+      comment: "@context: Visibility option - highlighted on featured page",
+    }),
+    visibilityUnlisted: t({
+      message: "Unlisted",
+      comment: "@context: Visibility option - hidden from feeds",
     }),
     pinnedLabel: t({
       message: "Pinned",
@@ -154,15 +166,15 @@ export const PostForm: FC<PostFormProps> = ({
     }),
     submitSuccessMessage: isEdit
       ? t({
-          message: "Post updated successfully.",
+          message: "Post updated.",
           comment: "@context: Toast after editing post",
         })
       : t({
-          message: "Post published successfully.",
+          message: "Post published.",
           comment: "@context: Toast after creating post",
         }),
     submitErrorMessage: t({
-      message: "Failed to save post. Please try again.",
+      message: "Couldn't save your post. Try again in a moment.",
       comment: "@context: Toast when post save fails",
     }),
   }).replace(/</g, "\\u003c");
@@ -174,7 +186,7 @@ export const PostForm: FC<PostFormProps> = ({
     url: post?.url ?? "",
     quoteText: post?.quoteText ?? "",
     status: post?.status ?? "published",
-    featured: post?.featured === 1,
+    visibility: post?.visibility ?? "listed",
     pinned: post?.pinned === 1,
     rating: post?.rating ?? 0,
     collectionIds: postCollectionIds,