Fix unresolved review findings from PR #428

app/api/operator/communications/route.ts

@@ -23,7 +23,29 @@ function validDate(value: unknown, optional = false): string | null | undefined
 }
 
 function slugify(value: string) {
-  return value.normalize("NFKD").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 100);
+  return value.normalize("NFKD").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 100).replace(/-+$/g, "");
+}
+
+export async function GET(request: Request) {
+  const user = await getServerUser();
+  if (!user) return json({ error: "Sign in to continue." }, 401);
+  if (!isTidelightOperator(user)) return json({ error: "Operator access is required." }, 403);
+  const params = new URL(request.url).searchParams;
+  const kind = params.get("kind");
+  const offset = Number(params.get("offset") ?? "0");
+  if ((kind !== "maintenance" && kind !== "blog") || !Number.isInteger(offset) || offset < 0 || offset > 1000000) {
+    return json({ error: "Choose a valid content list and page offset." }, 400);
+  }
+  const client = createAdminClient();
+  const table = kind === "maintenance" ? "tic_status_maintenance" : "tic_blog_posts";
+  const columns = kind === "maintenance"
+    ? "id,title,subtitle,message,affected_services,status,starts_at,ends_at,created_at,updated_at"
+    : "id,slug,title,subtitle,category,body,status,published_at,created_at,updated_at";
+  const orderColumn = kind === "maintenance" ? "starts_at" : "updated_at";
+  const { data, count, error } = await client.from(table).select(columns, { count: "exact" })
+    .order(orderColumn, { ascending: false }).order("id", { ascending: true }).range(offset, offset + 49);
+  if (error) return json({ error: "The content list could not be loaded." }, 500);
+  return json({ items: data ?? [], hasMore: offset + (data?.length ?? 0) < (count ?? 0) });
 }
 
 export async function POST(request: Request) {

app/i18n/zh-CN.json

@@ -6184,5 +6184,5 @@
   "SOURCE-LINKED": "来源可追溯",
   "PAPER-FIRST CONTROLS": "模拟交易优先控制",
   "Illustrative workflow · no live activity shown": "示意工作流 · 未显示实时活动",
-  "Choose Dark or White. Dark is the default theme.": "请选择深色或白色主题。深色为默认主题。"
+  "Choose Light or Dark, follow your device setting, or let Tidelight switch between themes using your local time zone.": "选择浅色或深色主题、跟随设备设置，或让 Tidelight 根据您所在时区的本地时间自动切换。"
 }

app/layout.tsx

@@ -23,6 +23,16 @@ import "./account-center.css";
 import "./notifications/notifications.css";
 import { getServerUser } from "@/lib/supabase/auth-user";
 
+const validTheme = (value: string | undefined): value is "dark" | "white" => value === "dark" || value === "white";
+function automaticTheme(timeZone: string) {
+  try {
+    const hour = Number(new Intl.DateTimeFormat("en-US", { hour: "2-digit", hourCycle: "h23", timeZone }).format(new Date()));
+    return hour >= 7 && hour < 19 ? "white" : "dark";
+  } catch {
+    return "dark";
+  }
+}
+
 const baseMetadata: Metadata = {
   metadataBase: new URL("https://tidelight.app"),
   alternates: { canonical: "https://tidelight.app" },
@@ -66,8 +76,12 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   const cookieStore = await cookies();
   const savedTheme = cookieStore.get("tidelight-theme")?.value;
-  const themeMode = cookieStore.get("tidelight-theme-mode")?.value;
-  const theme = themeMode === "manual" && (savedTheme === "white" || savedTheme === "dark") ? savedTheme : "dark";
+  const savedThemeMode = cookieStore.get("tidelight-theme-mode")?.value;
+  const themeMode = savedThemeMode === "manual" || savedThemeMode === "device" ? savedThemeMode : "auto";
+  const timeZone = cookieStore.get("tidelight-timezone")?.value ?? "UTC";
+  const theme = themeMode === "manual" && validTheme(savedTheme)
+    ? savedTheme
+    : themeMode === "auto" ? automaticTheme(timeZone) : validTheme(savedTheme) ? savedTheme : automaticTheme(timeZone);
   const requestHeaders = await headers();
   const requestHost = (requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host") ?? "").split(",")[0].trim().toLowerCase().replace(/:\d+$/, "");
   const isPublicPackageHost = requestHost === "package.tidelight.app";
@@ -90,6 +104,6 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
     || user?.email?.split("@")[0]
     || null;
 
-  return <html lang={language} data-language={language} data-theme={theme} suppressHydrationWarning><body><ThemeProvider initialTheme={theme}><LanguageProvider initialLanguage={language}><IntelligenceProvider>{isStandalonePublicHost ? children : <WorkspaceShell email={user?.email ?? null} avatarUrl={profile?.avatar_url ?? metadataAvatar} displayName={displayName} isOperator={isTidelightOperator(user)}>{children}</WorkspaceShell>}{isStandalonePublicHost ? null : <><SupportCompanion /><ProductQuickActions /></>}</IntelligenceProvider></LanguageProvider></ThemeProvider></body></html>;
+  return <html lang={language} data-language={language} data-theme={theme} data-theme-mode={themeMode} suppressHydrationWarning><body><ThemeProvider initialTheme={theme} initialMode={themeMode}><LanguageProvider initialLanguage={language}><IntelligenceProvider>{isStandalonePublicHost ? children : <WorkspaceShell email={user?.email ?? null} avatarUrl={profile?.avatar_url ?? metadataAvatar} displayName={displayName} isOperator={isTidelightOperator(user)}>{children}</WorkspaceShell>}{isStandalonePublicHost ? null : <><SupportCompanion /><ProductQuickActions /></>}</IntelligenceProvider></LanguageProvider></ThemeProvider></body></html>;
 }
 

app/operator/communications/editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type FormEvent, type ReactNode } from "react";
+import { useRef, useState, type FormEvent, type ReactNode } from "react";
 import type { EditorialPost, MaintenanceNotice } from "@/lib/tic/editorial-content";
 
 function localDateTime(value: string | null | undefined) {
@@ -9,49 +9,136 @@
   return new Date(date.getTime() - date.getTimezoneOffset() * 60_000).toISOString().slice(0, 16);
 }
 
+function toIsoTimestamp(value: FormDataEntryValue | undefined) {
+  if (typeof value !== "string" || !value) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+
 function FormField({ label, children }: { label: string; children: ReactNode }) {
   return <label style={{ display: "grid", gap: 7, margin: "12px 0", fontWeight: 600 }}>{label}{children}</label>;
 }
 
 export function CommunicationsEditor({ initialMaintenance, initialPosts }: { initialMaintenance: MaintenanceNotice[]; initialPosts: EditorialPost[] }) {
   const [maintenance, setMaintenance] = useState(initialMaintenance);
+  const [maintenanceOffset, setMaintenanceOffset] = useState(initialMaintenance.length);
   const [posts, setPosts] = useState(initialPosts);
+  const [postsOffset, setPostsOffset] = useState(initialPosts.length);
+  const [maintenanceHasMore, setMaintenanceHasMore] = useState(initialMaintenance.length === 50);
+  const [postsHaveMore, setPostsHaveMore] = useState(initialPosts.length === 50);
+  const [maintenanceVisible, setMaintenanceVisible] = useState(12);
+  const [postsVisible, setPostsVisible] = useState(12);
+  const [loadingMore, setLoadingMore] = useState<"maintenance" | "blog" | null>(null);
+  const paginationGeneration = useRef({ maintenance: 0, blog: 0 });
   const [editingMaintenance, setEditingMaintenance] = useState<MaintenanceNotice | null>(null);
   const [editingPost, setEditingPost] = useState<EditorialPost | null>(null);
   const [maintenanceMessage, setMaintenanceMessage] = useState("");
   const [postMessage, setPostMessage] = useState("");
   const [busy, setBusy] = useState(false);
 
+  async function showMore(kind: "maintenance" | "blog") {
+    const items = kind === "maintenance" ? maintenance : posts;
+    const offset = kind === "maintenance" ? maintenanceOffset : postsOffset;
+    const visible = kind === "maintenance" ? maintenanceVisible : postsVisible;
+    if (visible < items.length) {
+      kind === "maintenance" ? setMaintenanceVisible(visible + 12) : setPostsVisible(visible + 12);
+      return;
+    }
+    const hasMore = kind === "maintenance" ? maintenanceHasMore : postsHaveMore;
+    if (!hasMore) return;
+    const generation = paginationGeneration.current[kind];
+    setLoadingMore(kind);
+    try {
+      const response = await fetch(`/api/operator/communications?kind=${kind}&offset=${offset}`);
+      const result = await response.json() as { items?: Array<MaintenanceNotice | EditorialPost>; hasMore?: boolean; error?: string };
+      if (!response.ok || !result.items) throw new Error(result.error ?? "Older entries could not be loaded.");
+      if (generation !== paginationGeneration.current[kind]) return;
+      if (kind === "maintenance") {
+        setMaintenance(current => [...current, ...(result.items as MaintenanceNotice[])]);
+        setMaintenanceOffset(offset + result.items.length);
+        setMaintenanceHasMore(Boolean(result.hasMore));
+        setMaintenanceVisible(visible + result.items.length);
+      } else {
+        setPosts(current => [...current, ...(result.items as EditorialPost[])]);
+        setPostsOffset(offset + result.items.length);
+        setPostsHaveMore(Boolean(result.hasMore));
+        setPostsVisible(visible + result.items.length);
+      }
+    } catch (error) {
+      if (generation === paginationGeneration.current[kind]) {
+        const message = error instanceof Error ? error.message : "Older entries could not be loaded.";
+        kind === "maintenance" ? setMaintenanceMessage(message) : setPostMessage(message);
+      }
+    } finally {
+      if (generation === paginationGeneration.current[kind]) setLoadingMore(null);
+    }
+  }
+
+  async function refreshList(kind: "maintenance" | "blog") {
+    paginationGeneration.current[kind] += 1;
+    setLoadingMore(current => current === kind ? null : current);
+    try {
+      const response = await fetch(`/api/operator/communications?kind=${kind}&offset=0`);
+      const result = await response.json() as { items?: Array<MaintenanceNotice | EditorialPost>; hasMore?: boolean };
+      if (!response.ok || !result.items) return false;
+      if (kind === "maintenance") {
+        setMaintenance(result.items as MaintenanceNotice[]);
+        setMaintenanceOffset(result.items.length);
+        setMaintenanceHasMore(Boolean(result.hasMore));
+        setMaintenanceVisible(12);
+      } else {
+        setPosts(result.items as EditorialPost[]);
+        setPostsOffset(result.items.length);
+        setPostsHaveMore(Boolean(result.hasMore));
+        setPostsVisible(12);
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   async function submit(event: FormEvent<HTMLFormElement>, kind: "maintenance" | "blog") {
     event.preventDefault();
     const form = event.currentTarget;
     const raw = Object.fromEntries(new FormData(form).entries());
     const editing = kind === "maintenance" ? editingMaintenance : editingPost;
     const publishedAt = editingPost?.published_at;
     const payload = kind === "maintenance"
-      ? { kind, id: editing?.id, title: raw.title, subtitle: raw.subtitle, message: raw.message, startsAt: raw.startsAt, endsAt: raw.endsAt || null, status: raw.status, affectedServices: String(raw.affectedServices ?? "").split(",").map(value => value.trim()).filter(Boolean) }
+      ? { kind, id: editing?.id, title: raw.title, subtitle: raw.subtitle, message: raw.message, startsAt: toIsoTimestamp(raw.startsAt), endsAt: toIsoTimestamp(raw.endsAt), status: raw.status, affectedServices: String(raw.affectedServices ?? "").split(",").map(value => value.trim()).filter(Boolean) }
       : { kind, id: editing?.id, title: raw.title, subtitle: raw.subtitle, category: raw.category, slug: raw.slug, body: raw.body, status: raw.status, publishedAt };
     setBusy(true);
     kind === "maintenance" ? setMaintenanceMessage("") : setPostMessage("");
     try {
       const response = await fetch("/api/operator/communications", { method: editing ? "PATCH" : "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
       const result = await response.json() as { item?: MaintenanceNotice | EditorialPost; error?: string };
       if (!response.ok || !result.item) throw new Error(result.error ?? "The update could not be saved.");
+      const refreshed = await refreshList(kind);
       if (kind === "maintenance") {
-        const item = result.item as MaintenanceNotice;
-        setMaintenance(current => [item, ...current.filter(existing => existing.id !== item.id)].sort((a, b) => Date.parse(b.starts_at) - Date.parse(a.starts_at)));
+        if (!refreshed) {
+          const item = result.item as MaintenanceNotice;
+          setMaintenance(current => [item, ...current.filter(existing => existing.id !== item.id)].sort((a, b) => Date.parse(b.starts_at) - Date.parse(a.starts_at)));
+          setMaintenanceHasMore(false);
+        }
         setEditingMaintenance(null);
-        setMaintenanceMessage(editing ? "Maintenance notice updated." : "Maintenance notice published.");
+        setMaintenanceMessage(refreshed
+          ? (editing ? "Maintenance notice updated." : "Maintenance notice published.")
+          : "Saved, but the list could not refresh. Reload this page before loading older notices.");
       } else {
         const item = result.item as EditorialPost;
-        setPosts(current => [item, ...current.filter(existing => existing.id !== item.id)].sort((a, b) => Date.parse(b.updated_at) - Date.parse(a.updated_at)));
+        if (!refreshed) {
+          setPosts(current => [item, ...current.filter(existing => existing.id !== item.id)].sort((a, b) => Date.parse(b.updated_at) - Date.parse(a.updated_at)));
+          setPostsHaveMore(false);
+        }
         setEditingPost(null);
-        setPostMessage(item.status === "published" ? "Field Notes article published." : "Draft saved.");
+        setPostMessage(refreshed
+          ? (item.status === "published" ? "Field Notes article published." : "Draft saved.")
+          : "Saved, but the list could not refresh. Reload this page before loading older articles.");
       }
       form.reset();
     } catch (error) {
       const message = error instanceof Error ? error.message : "The update could not be saved.";
       kind === "maintenance" ? setMaintenanceMessage(message) : setPostMessage(message);
     } finally {
       setBusy(false);
     }
@@ -77,7 +164,7 @@
         <p role="status" aria-live="polite">{maintenanceMessage}</p>
       </form>
       <h3>Recent notices</h3>
-      {maintenance.length ? <ul>{maintenance.slice(0, 12).map(item => <li key={item.id} style={{ margin: "12px 0" }}><strong>{item.title}</strong> · {item.status} · {new Date(item.starts_at).toLocaleString()} <button type="button" onClick={() => setEditingMaintenance(item)}>Edit</button></li>)}</ul> : <p>No notices yet.</p>}
+      {maintenance.length ? <ul>{maintenance.slice(0, maintenanceVisible).map(item => <li key={item.id} style={{ margin: "12px 0" }}><strong>{item.title}</strong> · {item.status} · {new Date(item.starts_at).toLocaleString()} <button type="button" onClick={() => setEditingMaintenance(item)}>Edit</button></li>)}</ul> : <p>No notices yet.</p>}{maintenance.length > maintenanceVisible || maintenanceHasMore ? <button type="button" disabled={loadingMore !== null} onClick={() => void showMore("maintenance")}>{loadingMore === "maintenance" ? "Loading…" : maintenanceVisible < maintenance.length ? "Show more notices" : "Load older notices"}</button> : null}
     </section>
 
     <section className="settings-card">
@@ -98,7 +185,7 @@
         <p role="status" aria-live="polite">{postMessage}</p>
       </form>
       <h3>Recent articles</h3>
-      {posts.length ? <ul>{posts.slice(0, 12).map(item => <li key={item.id} style={{ margin: "12px 0" }}><strong>{item.title}</strong> · {item.status} <button type="button" onClick={() => setEditingPost(item)}>Edit</button></li>)}</ul> : <p>No articles yet.</p>}
+      {posts.length ? <ul>{posts.slice(0, postsVisible).map(item => <li key={item.id} style={{ margin: "12px 0" }}><strong>{item.title}</strong> · {item.status} <button type="button" onClick={() => setEditingPost(item)}>Edit</button></li>)}</ul> : <p>No articles yet.</p>}{posts.length > postsVisible || postsHaveMore ? <button type="button" disabled={loadingMore !== null} onClick={() => void showMore("blog")}>{loadingMore === "blog" ? "Loading…" : postsVisible < posts.length ? "Show more articles" : "Load older articles"}</button> : null}
     </section>
   </div>;
 }

app/settings/page.tsx

@@ -56,7 +56,7 @@ export default async function SettingsPage({ searchParams }: { searchParams: Pro
     {params.setup ? <p className="action-notice">Your account is ready. Choose a 4–8 character username to finish setting up your Tidelight profile.</p> : null}{params.updated ? <p className="action-notice">Your preference has been saved.</p> : null}{params.error ? <p className="action-error">We couldn’t save that change. Try again.</p> : null}
     <div className="settings-layout">
       <section className="settings-card language-card" id="account-preferences"><div className="settings-card-head"><span className="settings-icon mint">文</span><div><span className="eyebrow small-eyebrow">LANGUAGE / 语言</span><h2>Choose your language.</h2></div></div><p>Your language choice is saved on this device and used throughout Tidelight.</p><LanguagePicker /></section>
-      <section className="settings-card theme-card" id="account-appearance"><div className="settings-card-head"><span className="settings-icon">◐</span><div><span className="eyebrow small-eyebrow">APPEARANCE</span><h2>Your desk, your light.</h2></div></div><p>Choose Dark or White. Dark is the default theme.</p><ThemePicker /></section>
+      <section className="settings-card theme-card" id="account-appearance"><div className="settings-card-head"><span className="settings-icon">◐</span><div><span className="eyebrow small-eyebrow">APPEARANCE</span><h2>Your desk, your light.</h2></div></div><p>Choose Light or Dark, follow your device setting, or let Tidelight switch between themes using your local time zone.</p><ThemePicker /></section>
       <section className="settings-card account-card" id="account-profile"><div className="settings-card-head"><span className="settings-icon">◉</span><div><span className="eyebrow small-eyebrow">ACCOUNT</span><h2>Your workspace</h2></div></div>
         {user ? <><div className="account-identity"><div className="avatar large-avatar">{communityProfile?.avatar_url ? <Image src={communityProfile.avatar_url} alt="" width={48} height={48} unoptimized /> : (communityProfile?.display_name ?? user.email ?? "T").slice(0, 1).toUpperCase()}</div><div><b>{communityProfile?.display_name ?? user.email}</b><small>@{communityProfile?.handle ?? "set up a community handle"} · sign-in protected</small></div><span className="connected-pill"><i /> PRIVATE</span></div><ProfileEditor userId={user.id} initialName={communityProfile?.display_name ?? user.user_metadata?.full_name ?? user.email?.split("@")[0] ?? "Tidelight member"} initialHandle={communityProfile?.handle ?? user.id.replace(/-/g, "").slice(0, 8).toLowerCase()} initialAvatar={communityProfile?.avatar_url ?? user.user_metadata?.avatar_url ?? ""} profileExists={Boolean(communityProfile)} handleChangedAt={communityProfile?.handle_changed_at ?? null} /><div className="settings-divider" /><div className="preference-row"><div><b>Research lens</b><small>This preference is saved to your account.</small></div><form action={updateRiskProfile} className="preference-form"><select name="risk_profile" defaultValue={preferences?.risk_profile ?? "balanced"} aria-label="Research lens"><option value="conservative">Conservative</option><option value="balanced">Balanced</option><option value="growth">Growth</option></select><button type="submit">Save</button></form></div></> : <div className="settings-empty"><p>You’re browsing as a guest. Sign in to save preferences and keep your research private across sessions.</p><Link className="primary-link" href="/login">Sign in <span>↗</span></Link></div>}
       </section>