@jant/core 0.3.27 → 0.3.28

package/src/ui/compose/ComposePrompt.tsx

@@ -16,7 +16,7 @@ export const ComposePrompt: FC = () => {
       <button
         type="button"
         class="compose-prompt-trigger"
-        onclick="document.getElementById('compose-dialog').showModal()"
+        onclick="const d=document.getElementById('compose-dialog');d.showModal();d.querySelector('jant-compose-editor')?.focusInput()"
       >
         <span class="compose-prompt-avatar">
           <svg
@@ -35,7 +35,7 @@ export const ComposePrompt: FC = () => {
         </span>
         <span class="compose-prompt-text">
           {t({
-            message: "What's new?",
+            message: "What's on your mind?",
             comment: "@context: Compose prompt placeholder text",
           })}
         </span>
@@ -43,7 +43,7 @@ export const ComposePrompt: FC = () => {
       <button
         type="button"
         class="compose-prompt-post-btn"
-        onclick="document.getElementById('compose-dialog').showModal()"
+        onclick="const d=document.getElementById('compose-dialog');d.showModal();d.querySelector('jant-compose-editor')?.focusInput()"
       >
         {t({
           message: "Post",

package/src/ui/dash/PostList.tsx

@@ -4,9 +4,8 @@
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { Post } from "../../types.js";
+import type { PostView } from "../../types.js";
 import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
 import { StatusBadge } from "./StatusBadge.js";
 import { FormatBadge } from "./FormatBadge.js";
 import { EmptyState } from "../shared/EmptyState.js";
@@ -14,7 +13,7 @@ import { ListItemRow } from "./ListItemRow.js";
 import { ActionButtons } from "./ActionButtons.js";
 
 export interface PostListProps {
-  posts: Post[];
+  posts: PostView[];
 }
 
 export const PostList: FC<PostListProps> = ({ posts }) => {
@@ -37,65 +36,60 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
 
   return (
     <div class="flex flex-col divide-y">
-      {posts.map((post) => {
-        const permalink = post.path
-          ? `/${post.path}`
-          : `/p/${sqid.encode(post.id)}`;
-        return (
-          <ListItemRow
-            key={post.id}
-            actions={
-              <ActionButtons
-                editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
-                editLabel={t({
-                  message: "Edit",
-                  comment: "@context: Button to edit post",
-                })}
-                viewHref={permalink}
-                viewLabel={t({
-                  message: "View",
-                  comment: "@context: Button to view post on public site",
-                })}
-                deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
-                deleteConfirm={t({
-                  message:
-                    "Are you sure you want to delete this post? This cannot be undone.",
-                  comment:
-                    "@context: Confirmation dialog when deleting a post from the list",
-                })}
-              />
-            }
+      {posts.map((post) => (
+        <ListItemRow
+          key={post.id}
+          actions={
+            <ActionButtons
+              editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
+              editLabel={t({
+                message: "Edit",
+                comment: "@context: Button to edit post",
+              })}
+              viewHref={post.permalink}
+              viewLabel={t({
+                message: "View",
+                comment: "@context: Button to view post on public site",
+              })}
+              deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
+              deleteConfirm={t({
+                message:
+                  "Are you sure you want to delete this post? This cannot be undone.",
+                comment:
+                  "@context: Confirmation dialog when deleting a post from the list",
+              })}
+            />
+          }
+        >
+          <div class="flex items-center gap-2 mb-1">
+            <FormatBadge type={post.format} />
+            <StatusBadge
+              status={post.status}
+              featured={post.featured}
+              pinned={post.pinned}
+            />
+            <span class="text-xs text-muted-foreground">
+              {post.publishedAtFormatted}
+            </span>
+          </div>
+          <a
+            href={`/dash/posts/${sqid.encode(post.id)}`}
+            class="font-medium hover:underline"
           >
-            <div class="flex items-center gap-2 mb-1">
-              <FormatBadge type={post.format} />
-              <StatusBadge
-                status={post.status}
-                featured={post.featured === 1}
-                pinned={post.pinned === 1}
-              />
-              <span class="text-xs text-muted-foreground">
-                {time.formatDate(post.publishedAt)}
-              </span>
-            </div>
-            <a
-              href={`/dash/posts/${sqid.encode(post.id)}`}
-              class="font-medium hover:underline"
-            >
-              {post.title ||
-                post.body?.slice(0, 60) ||
-                t({
-                  message: "Untitled",
-                  comment: "@context: Default title for untitled post",
-                })}
-            </a>
-            {post.body && !post.title && (
-              <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
-                {post.body.slice(0, 120)}
-              </p>
-            )}
-          </ListItemRow>
-        );
-      })}
+            {post.title ||
+              post.body?.slice(0, 60) ||
+              t({
+                message: "Untitled",
+                comment: "@context: Default title for untitled post",
+              })}
+          </a>
+          {post.body && !post.title && (
+            <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
+              {post.body.slice(0, 120)}
+            </p>
+          )}
+        </ListItemRow>
+      ))}
     </div>
   );
 };

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

@@ -0,0 +1,80 @@
+/**
+ * Advanced appearance: custom CSS editor
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import { AppearanceNav } from "./AppearanceNav.js";
+
+export function AdvancedContent({ customCSS }: { customCSS: string }) {
+  const { t } = useLingui();
+
+  const cssSignals = JSON.stringify({ customCSS }).replace(/</g, "\\u003c");
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-2">
+        {t({ message: "Appearance", comment: "@context: Dashboard heading" })}
+      </h1>
+      <AppearanceNav currentTab="advanced" />
+
+      <form
+        data-signals={cssSignals}
+        data-on:submit__prevent="@post('/dash/appearance/custom-css')"
+        data-indicator="_cssLoading"
+        class="max-w-3xl"
+      >
+        <fieldset>
+          <legend class="text-lg font-semibold">
+            {t({
+              message: "Custom CSS",
+              comment: "@context: Appearance settings heading for custom CSS",
+            })}
+          </legend>
+          <p class="text-sm text-muted-foreground mb-4">
+            {t({
+              message:
+                "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
+              comment: "@context: Custom CSS settings description",
+            })}
+          </p>
+          <textarea
+            data-bind="customCSS"
+            class="textarea font-mono text-sm min-h-32"
+            rows={8}
+            placeholder={t({
+              message: "/* Your custom CSS here */",
+              comment: "@context: Custom CSS textarea placeholder",
+            })}
+          >
+            {customCSS}
+          </textarea>
+        </fieldset>
+        <button
+          type="submit"
+          class="btn mt-4"
+          data-attr:disabled="$_cssLoading"
+        >
+          <svg
+            data-show="$_cssLoading"
+            style="display:none"
+            class="animate-spin size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            role="status"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          {t({
+            message: "Save CSS",
+            comment: "@context: Button to save custom CSS",
+          })}
+        </button>
+      </form>
+    </>
+  );
+}

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

@@ -0,0 +1,56 @@
+/**
+ * Appearance sub-navigation tabs
+ */
+
+import { useLingui } from "@lingui/react/macro";
+
+export type AppearanceTab = "color" | "fonts" | "advanced";
+
+export function AppearanceNav({ currentTab }: { currentTab: AppearanceTab }) {
+  const { t } = useLingui();
+
+  const tabs: { id: AppearanceTab; label: string; href: string }[] = [
+    {
+      id: "color",
+      label: t({
+        message: "Color Theme",
+        comment: "@context: Appearance sub-navigation tab",
+      }),
+      href: "/dash/appearance",
+    },
+    {
+      id: "fonts",
+      label: t({
+        message: "Font Theme",
+        comment: "@context: Appearance sub-navigation tab",
+      }),
+      href: "/dash/appearance/fonts",
+    },
+    {
+      id: "advanced",
+      label: t({
+        message: "Advanced",
+        comment: "@context: Appearance sub-navigation tab",
+      }),
+      href: "/dash/appearance/advanced",
+    },
+  ];
+
+  return (
+    <nav class="flex gap-1 mb-6">
+      {tabs.map((tab) => (
+        <a
+          key={tab.id}
+          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"
+          }`}
+        >
+          {tab.label}
+        </a>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,129 @@
+/**
+ * Color theme picker
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { ColorTheme } from "../../color-themes.js";
+import { AppearanceNav } from "./AppearanceNav.js";
+
+function ThemeCard({
+  theme,
+  selected,
+}: {
+  theme: ColorTheme;
+  selected: boolean;
+}) {
+  const expr = `$theme === '${theme.id}'`;
+  const { preview } = theme;
+
+  return (
+    <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}'`}
+    >
+      <div class="grid grid-cols-2">
+        <div
+          class="p-5"
+          style={`background-color:${preview.lightBg};color:${preview.lightText}`}
+        >
+          <input
+            type="radio"
+            name="theme"
+            value={theme.id}
+            data-bind="theme"
+            checked={selected || undefined}
+            class="mb-1"
+          />
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in light mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.lightLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+        <div
+          class="p-5"
+          style={`background-color:${preview.darkBg};color:${preview.darkText}`}
+        >
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in dark mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.darkLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export function ColorThemeContent({
+  themes,
+  currentThemeId,
+}: {
+  themes: ColorTheme[];
+  currentThemeId: string;
+}) {
+  const { t } = useLingui();
+
+  const themeSignals = JSON.stringify({ theme: currentThemeId }).replace(
+    /</g,
+    "\\u003c",
+  );
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-2">
+        {t({ message: "Appearance", comment: "@context: Dashboard heading" })}
+      </h1>
+      <AppearanceNav currentTab="color" />
+
+      <div
+        data-signals={themeSignals}
+        data-on:change="@post('/dash/appearance')"
+        class="max-w-3xl"
+      >
+        <fieldset>
+          <legend class="text-lg font-semibold">
+            {t({
+              message: "Color theme",
+              comment: "@context: Appearance settings heading",
+            })}
+          </legend>
+          <p class="text-sm text-muted-foreground mb-4">
+            {t({
+              message:
+                "This will theme both your site and your dashboard. All color themes support dark mode.",
+              comment: "@context: Appearance settings description",
+            })}
+          </p>
+
+          <div class="flex flex-col gap-4">
+            {themes.map((theme) => (
+              <ThemeCard
+                key={theme.id}
+                theme={theme}
+                selected={theme.id === currentThemeId}
+              />
+            ))}
+          </div>
+        </fieldset>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,98 @@
+/**
+ * Font theme picker
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { FontTheme } from "../../font-themes.js";
+import { AppearanceNav } from "./AppearanceNav.js";
+
+export function FontThemeContent({
+  fontThemes,
+  currentFontThemeId,
+}: {
+  fontThemes: FontTheme[];
+  currentFontThemeId: string;
+}) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-2">
+        {t({ message: "Appearance", comment: "@context: Dashboard heading" })}
+      </h1>
+      <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>
+                  <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>
+                </div>
+              </label>
+            ))}
+          </div>
+        </fieldset>
+      </div>
+    </>
+  );
+}