chore: design things

Author: Yukaii

examples/ai-conference-assistant/src/components/app-settings-bar.tsx

@@ -1,12 +1,23 @@
 'use client'
 
 import { useTheme } from 'next-themes'
+import { useSyncExternalStore } from 'react'
 import type { Locale } from '@/i18n/dictionaries'
 import { useI18n } from '@/i18n/context'
 
+/** True only after client hydration so theme toggle active styles match server HTML (next-themes is undefined on server). */
+function useHydrated() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  )
+}
+
 export function AppSettingsBar({ className = '' }: { className?: string }) {
   const { locale, setLocale, t } = useI18n()
   const { theme, setTheme } = useTheme()
+  const hydrated = useHydrated()
 
   return (
     <div
@@ -21,7 +32,7 @@ export function AppSettingsBar({ className = '' }: { className?: string }) {
             type="button"
             onClick={() => setTheme(key)}
             className={`rounded-md px-2 py-1 text-xs font-medium transition ${
-              theme === key
+              hydrated && theme === key
                 ? 'bg-white text-zinc-900 shadow dark:bg-zinc-700 dark:text-zinc-100'
                 : 'text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200'
             }`}

examples/ai-conference-assistant/src/components/chat-panel.tsx

@@ -206,7 +206,7 @@ export function ChatPanel({
               title={
                 previewConfirmed ? t('chat.createNotesTitle') : t('chat.createNotesDisabledTitle')
               }
-              className="rounded-lg bg-gradient-to-r from-emerald-600 to-teal-600 px-3 py-2 text-xs font-medium text-white shadow-sm transition hover:from-emerald-500 hover:to-teal-500 disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:text-sm"
+              className="rounded-lg bg-emerald-600 px-3 py-2 text-xs font-medium text-white shadow-sm transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:text-sm"
             >
               🚀 {t('chat.createNotes', { count: generatedData.pages.length + 1 })}
             </button>
@@ -426,7 +426,7 @@ export function ChatPanel({
           <button
             type="submit"
             disabled={isLoading || !inputValue.trim()}
-            className="shrink-0 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-2.5 font-medium text-white shadow-sm transition hover:from-blue-500 hover:to-indigo-500 disabled:cursor-not-allowed disabled:opacity-50 sm:px-6"
+            className="shrink-0 rounded-xl bg-blue-600 px-4 py-2.5 font-medium text-white shadow-sm transition hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50 sm:px-6"
           >
             {t('common.send')}
           </button>

examples/ai-conference-assistant/src/components/preview-panel.tsx

@@ -100,7 +100,7 @@ export function PreviewPanel({
             type="button"
             onClick={onCreateNotes}
             disabled={!previewConfirmed}
-            className="w-full rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 py-3 text-sm font-medium text-white shadow-md shadow-emerald-600/20 transition hover:from-emerald-500 hover:to-teal-500 disabled:cursor-not-allowed disabled:opacity-50 dark:shadow-emerald-900/30"
+            className="w-full rounded-xl bg-emerald-600 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {t('preview.createButton', { count: generatedData.pages.length + 1 })}
           </button>

examples/ai-conference-assistant/src/components/progress-modal.tsx

@@ -223,7 +223,7 @@ export function ProgressModal({ config, generatedData, onClose }: ProgressModalP
               <button
                 type="button"
                 onClick={startCreation}
-                className="rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-3 font-medium text-white shadow-md transition hover:from-emerald-500 hover:to-teal-500"
+                className="rounded-xl bg-emerald-600 px-6 py-3 font-medium text-white shadow-sm transition hover:bg-emerald-500"
               >
                 🚀 {t('progress.startButton')}
               </button>

examples/ai-conference-assistant/src/components/setup-panel.tsx

@@ -48,19 +48,15 @@ export function SetupPanel({ onConfigured }: SetupPanelProps) {
   }
 
   return (
-    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-sky-50 via-white to-indigo-100 dark:from-zinc-950 dark:via-zinc-900 dark:to-indigo-950">
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(56,189,248,0.12),_transparent_55%)] dark:bg-[radial-gradient(ellipse_at_top,_rgba(59,130,246,0.12),_transparent_55%)]" />
-      <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-indigo-400/15 blur-3xl dark:bg-indigo-500/10" />
-      <div className="pointer-events-none absolute -bottom-20 -left-16 h-64 w-64 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
-
+    <div className="relative min-h-screen bg-zinc-50 dark:bg-zinc-950">
       <div className="absolute right-4 top-4 z-10 sm:right-6 sm:top-6">
         <AppSettingsBar />
       </div>
 
       <div className="relative flex min-h-screen items-center justify-center p-4">
-        <div className="w-full max-w-lg rounded-2xl border border-zinc-200/80 bg-white/90 p-8 shadow-xl shadow-zinc-900/5 backdrop-blur dark:border-zinc-700/80 dark:bg-zinc-900/85 dark:shadow-black/40">
+        <div className="w-full max-w-lg rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
           <div className="mb-8 text-center">
-            <div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-500 to-indigo-600 text-2xl shadow-lg shadow-indigo-500/25">
+            <div className="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-zinc-200 bg-zinc-100 text-2xl dark:border-zinc-600 dark:bg-zinc-800">
               📚
             </div>
             <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 sm:text-3xl">
@@ -149,7 +145,7 @@ export function SetupPanel({ onConfigured }: SetupPanelProps) {
             <button
               type="submit"
               disabled={verifying || !apiKey}
-              className="w-full rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 py-3 font-medium text-white shadow-md shadow-blue-600/25 transition hover:from-blue-500 hover:to-indigo-500 disabled:cursor-not-allowed disabled:opacity-50 dark:shadow-indigo-900/40"
+              className="w-full rounded-xl bg-blue-600 py-3 font-medium text-white shadow-sm transition hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-500"
             >
               {verifying ? t('common.verifying') : t('setup.start')}
             </button>

examples/ai-conference-assistant/src/i18n/dictionaries.ts

@@ -64,13 +64,11 @@ export const en = {
     invalidJson: 'Invalid JSON file. Please upload a valid JSON file.',
   },
   preview: {
-    empty:
-      'After the assistant runs generate_preview_pages, homepage and session pages appear here. Session data is analyzed with session_jq on the server — nothing huge is pasted in chat.',
-    panelTitle: 'Preview (book mode)',
+    empty: 'No preview yet.',
+    panelTitle: 'Preview',
     homepage: 'Homepage',
     morePages: '+{count} more',
-    confirmLabel:
-      'I confirm this preview matches what I want on HackMD. Real notes are created only after I click the button below.',
+    confirmLabel: 'I confirm this preview before creating notes on HackMD.',
     createButton: 'Create {count} notes on HackMD',
   },
   progress: {
@@ -160,13 +158,11 @@ export const zhTW: Messages = {
     invalidJson: '不是有效的 JSON 檔案，請上傳正確的 JSON。',
   },
   preview: {
-    empty:
-      '助理執行 generate_preview_pages 後，首頁與各場次頁會顯示在此。場次資料在伺服器上以 session_jq 分析 — 不會在聊天貼一大段 JSON。',
-    panelTitle: '預覽（書籍模式）',
+    empty: '尚無預覽。',
+    panelTitle: '預覽',
     homepage: '首頁',
     morePages: '另有 {count} 頁',
-    confirmLabel:
-      '我確認此預覽符合我要在 HackMD 上建立的內容。只有在我按下下方按鈕後才會真正建立筆記。',
+    confirmLabel: '確認此預覽後，再在 HackMD 建立筆記。',
     createButton: '在 HackMD 建立 {count} 則筆記',
   },
   progress: {