refactor(admin): migrate ui.ts to ui.tsx with JSX Layout component

Replace hono/html tagged template layout() function with a typed JSX <Layout> component. CSS and interactive scripts are injected via dangerouslySetInnerHTML to preserve exact output. clampText() is preserved and re-exported for consumers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-21 06:13:48 +00:00 · 2026-05-22 13:17:24 +02:00
parent f5bac1bd7d
commit 996aa5e211
1 changed files with 15 additions and 15 deletions
@@ -0,0 +1,36 @@
+import { designSystem } from "../../styles/index";
+import { interactiveScripts } from "../../scripts/index";
+
+type LayoutProps = {
+  title: string;
+  children: unknown;
+};
+
+export const Layout = ({ title, children }: LayoutProps) => {
+  return (
+    <html>
+      <head>
+        <title>{title} - Email to RSS Admin</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="light dark" />
+        <style dangerouslySetInnerHTML={{ __html: designSystem }} />
+        <script dangerouslySetInnerHTML={{ __html: interactiveScripts + ";" }} />
+      </head>
+      <body class="page">{children as any}</body>
+    </html>
+  );
+};
+
+export { Layout as layout };
+
+export function clampText(value: string, maxLen: number): string {
+  const raw = `${value || ""}`;
+  if (raw.length <= maxLen) {
+    return raw.trim();
+  }
+  if (maxLen <= 3) {
+    return raw.slice(0, maxLen).trim();
+  }
+  return `${raw.slice(0, maxLen - 3).trimEnd()}...`;
+}