refactor(ui): improve header alignment to use grid and fix runtime provider validation

2026-01-27 15:00:52 +07:00
parent 97376149e6
commit 6f365adfd7
9 changed files with 298 additions and 241 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "@ai-sdk/openai": "^3.0.14",
        "@ai-sdk/openai-compatible": "^2.0.18",
+        "@fontsource/merriweather": "^5.2.11",
        "@radix-ui/react-alert-dialog": "^1.1.15",
        "@radix-ui/react-dialog": "^1.1.15",
        "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -1366,6 +1367,15 @@
      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
      "license": "MIT"
    },
+    "node_modules/@fontsource/merriweather": {
+      "version": "5.2.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/merriweather/-/merriweather-5.2.11.tgz",
+      "integrity": "sha512-ZiIMeUh5iT8d73o6xlSF8GKgjV5pgiFrufYc5jZTVAfExtWKqM2vQHnsqXSFMv4ELhAcjt6Vf+5T3oVGXhAizQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1916,18 +1926,6 @@
        "node": ">=6.0.0"
      }
    },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
-      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -4600,7 +4598,6 @@
      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
@@ -4984,14 +4981,6 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
    "node_modules/call-bind": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -5206,14 +5195,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10489,17 +10470,6 @@
        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
      }
    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -10509,18 +10479,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
    "node_modules/space-separated-tokens": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
  "dependencies": {
    "@ai-sdk/openai": "^3.0.14",
    "@ai-sdk/openai-compatible": "^2.0.18",
+    "@fontsource/merriweather": "^5.2.11",
    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
--- a/src/app/(main)/settings/page.tsx
+++ b/src/app/(main)/settings/page.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useState } from "react";
-import { Plus, ArrowLeft } from "lucide-react";
+import { Plus } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import {
@@ -22,6 +22,7 @@ import { useSavedProviders } from "@/store/use-settings";
 import { ProviderManagementService } from "@/services/provider-management-service";
 import { toast } from "@/hooks/use-toast";
 import { ThemeToggle } from "@/components/features/settings/theme-toggle";
+import { AppHeader } from "@/components/layout";

 export default function SettingsPage() {
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
@@ -51,25 +52,21 @@ export default function SettingsPage() {
  const editingProvider = providers.find((p) => p.id === editingProviderId);

  return (
-    <div className="min-h-screen bg-background py-8 sm:py-12 px-4 sm:px-6 lg:px-8 w-full">
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <AppHeader />
+
+      {/* Main Content */}
+      <div className="py-8 sm:py-12 px-4 sm:px-6 lg:px-8 w-full">
        <div className="max-w-2xl mx-auto space-y-8 sm:space-y-10">

-        {/* Header */}
-        <div className="space-y-4">
-          <Link
-            href="/"
-            className="inline-flex items-center text-sm font-medium text-muted-foreground hover:text-primary transition-colors mb-2"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back to Home
-          </Link>
+          {/* Page Title */}
          <div>
            <h1 className="text-4xl font-bold tracking-tight text-foreground font-serif">Settings</h1>
            <p className="mt-2 text-lg text-muted-foreground">
              Manage your AI provider connections and preferences.
            </p>
          </div>
-        </div>

          <div className="grid gap-8">
            {/* General Settings */}
@@ -138,8 +135,6 @@ export default function SettingsPage() {
            </section>
          </div>

-
-
          {/* Account Security Section */}
          <div className="grid gap-8 mt-10 border-t border-border pt-10">
            <section className="space-y-4">
@@ -182,6 +177,6 @@ export default function SettingsPage() {
          </Dialog>
        </div>
      </div>
-
+    </div>
  );
 }
--- a/src/app/(session)/chat/page.tsx
+++ b/src/app/(session)/chat/page.tsx
@@ -1,24 +1,19 @@
 "use client";

-import { useEffect, useState, Suspense } from 'react';
+import { useEffect, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { ChatWindow } from '@/components/features/chat/chat-window';
 import { ChatInput } from '@/components/features/chat/chat-input';
 import { DraftSheet } from '@/components/features/journal/draft-sheet';
 import { useChatStore } from '@/store/use-chat';
-import { ArrowLeft, Bot, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { LLMService } from '@/services/llm-service';
-import { ProviderManagementService } from '@/services/provider-management-service';
+import { Loader2 } from "lucide-react";
+import { AppHeader } from '@/components/layout';

 function ChatPageContent() {
-    const { resetSession, phase } = useChatStore();
+    const { resetSession } = useChatStore();
    const searchParams = useSearchParams();
    const router = useRouter();

-    // Connection Status State
-    const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'error'>('checking');
-
    // Check for "new" param to force fresh session
    useEffect(() => {
        if (searchParams.get('new') === 'true') {
@@ -28,53 +23,10 @@ function ChatPageContent() {
        }
    }, [searchParams, router, resetSession]);

-    // Check Connection Status
-    useEffect(() => {
-        const checkConnection = async () => {
-            setConnectionStatus('checking');
-            const settings = ProviderManagementService.getActiveProviderSettings();
-
-            if (!settings.apiKey) {
-                setConnectionStatus('error');
-                return;
-            }
-
-            const result = await LLMService.validateConnection(
-                settings.baseUrl,
-                settings.apiKey,
-                settings.modelName
-            );
-
-            if (result.isValid) {
-                setConnectionStatus('connected');
-            } else {
-                setConnectionStatus('error');
-            }
-        };
-
-        checkConnection();
-    }, []);
-
    return (
        <div className="flex flex-col h-dvh bg-background relative">
-            {/* Session Header */}
-            <div className="flex items-center justify-between px-4 py-3 bg-white/80 backdrop-blur border-b border-slate-200 shrink-0 z-10 sticky top-0">
-                <div className="flex items-center gap-3">
-                    <Link href="/" className="text-slate-500 hover:text-slate-700 transition-colors">
-                        <ArrowLeft className="w-5 h-5" />
-                    </Link>
-                    <div className="flex items-center gap-2 font-medium text-slate-700">
-                        <div className="relative">
-                            <Bot className="w-5 h-5 text-indigo-600" />
-                            <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white ${connectionStatus === 'connected' ? 'bg-green-500' :
-                                connectionStatus === 'checking' ? 'bg-yellow-400' : 'bg-red-500'
-                                }`} />
-                        </div>
-                        <span className="font-serif">Teacher</span>
-                        {phase === 'drafting' && <span className="text-xs text-indigo-500 animate-pulse ml-2">Simulating...</span>}
-                    </div>
-                </div>
-            </div>
+            {/* Header */}
+            <AppHeader />

            {/* Chat Messages - Scrollable Area */}
            <div className="flex-1 flex flex-col min-h-0 overflow-hidden relative">
@@ -102,4 +54,3 @@ export default function ChatPage() {
        </Suspense>
    );
 }
-
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,6 @@
 * Story 3.1: History Feed UI integration
 *
 * The home screen IS the history feed. Shows:
- * - Header with "My Journal" title
 * - History feed with lazy loading
 * - FAB (Floating Action Button) to start new vent
 * - HistoryDetailSheet for viewing past entries
@@ -19,25 +18,15 @@
 */

 import { HistoryFeed, HistoryDetailSheet } from '@/components/features/journal';
-import { Plus, Settings } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import Link from 'next/link';
+import { AppHeader } from '@/components/layout';

 export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
-      <header className="sticky top-0 z-10 bg-white border-b border-slate-200 px-4 py-4 flex items-center justify-between">
-        <h1 className="text-2xl font-serif font-bold text-slate-800">
-          My Journal
-        </h1>
-        <Link
-          href="/settings"
-          className="p-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors"
-          aria-label="Settings"
-        >
-          <Settings className="w-5 h-5" aria-hidden="true" />
-        </Link>
-      </header>
+      <AppHeader />

      {/* Main Content - History Feed */}
      <main className="pb-24">
--- a/src/components/features/chat/chat-window.tsx
+++ b/src/components/features/chat/chat-window.tsx
@@ -4,13 +4,42 @@ import { useEffect, useRef, useState } from 'react';
 import { ChatBubble } from './chat-bubble';
 import { TypingIndicator } from './typing-indicator';
 import { useChatStore } from '@/store/use-chat';
-import { BookOpen, Sparkles } from 'lucide-react';
+import { Bot, Sparkles } from 'lucide-react';
+import { ProviderManagementService } from '@/services/provider-management-service';

 export function ChatWindow() {
    const { messages, isTyping } = useChatStore();
    const bottomRef = useRef<HTMLDivElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);
    const [isUserScrolling, setIsUserScrolling] = useState(false);
+    const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'error'>('checking');
+
+    // Check connection status
+    useEffect(() => {
+        const checkConnection = async () => {
+            setConnectionStatus('checking');
+            const settings = ProviderManagementService.getActiveProviderSettings();
+
+            if (!settings.apiKey) {
+                setConnectionStatus('error');
+                return;
+            }
+
+            const result = await ProviderManagementService.validateConnection(
+                settings.baseUrl,
+                settings.apiKey,
+                settings.modelName
+            );
+
+            if (result.isValid) {
+                setConnectionStatus('connected');
+            } else {
+                setConnectionStatus('error');
+            }
+        };
+
+        checkConnection();
+    }, []);

    // Auto-scroll to bottom only when new messages arrive
    useEffect(() => {
@@ -48,18 +77,34 @@ export function ChatWindow() {
            <div className="flex-1 flex flex-col items-center justify-center text-center p-8 space-y-6">
                <div className="relative">
                    <div className="w-32 h-32 bg-gradient-to-br from-secondary to-muted rounded-full flex items-center justify-center">
-                        <BookOpen className="w-16 h-16 text-muted-foreground/50" aria-hidden="true" />
+                        <Bot className="w-16 h-16 text-muted-foreground/50" aria-hidden="true" />
                    </div>
                    <Sparkles className="w-8 h-8 text-amber-400 absolute -top-2 -right-2" aria-hidden="true" />
+
+                    {/* Connection Status Indicator */}
+                    <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
+                        connectionStatus === 'connected' ? 'bg-green-500' :
+                        connectionStatus === 'checking' ? 'bg-yellow-400 animate-pulse' : 'bg-red-500'
+                    }`} />
                </div>

                <div className="space-y-2 max-w-md">
                    <h2 className="text-2xl font-bold font-serif text-foreground">
-                        What's on your mind?
+                        Teacher
                    </h2>
                    <p className="text-muted-foreground font-sans">
                        I'm here to listen. Let it all out.
                    </p>
+                    {connectionStatus === 'connected' && (
+                        <p className="text-sm text-green-600 dark:text-green-400">
+                            Connected and ready
+                        </p>
+                    )}
+                    {connectionStatus === 'error' && (
+                        <p className="text-sm text-red-600 dark:text-red-400">
+                            Please configure your AI provider in Settings
+                        </p>
+                    )}
                </div>
            </div>
        );
--- a/src/components/layout/app-header.tsx
+++ b/src/components/layout/app-header.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { Menu, X, BookOpen, Bot, Settings } from 'lucide-react';
+import { useState } from 'react';
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: typeof BookOpen;
+}
+
+const navItems: NavItem[] = [
+  { href: '/', label: 'History', icon: BookOpen },
+  { href: '/chat', label: 'Teacher', icon: Bot },
+  { href: '/settings', label: 'Settings', icon: Settings },
+];
+
+export function AppHeader() {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-950/80 backdrop-blur border-b border-slate-200 dark:border-zinc-800">
+      <div className="px-4 py-3">
+        <div className="grid grid-cols-[1fr_auto_1fr] items-center">
+          {/* Spacer for balance */}
+          <div />
+
+          {/* Title - Center */}
+          <h1 className="text-xl font-serif font-bold text-slate-800 dark:text-zinc-100 h-9 flex items-center justify-center">
+            My Journal
+          </h1>
+
+          {/* Navigation & Menu - Right */}
+          <div className="flex items-center justify-end">
+
+            {/* Menu - Right (Desktop) */}
+            <nav className="hidden sm:flex items-center gap-1" aria-label="Main navigation">
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive = pathname === item.href;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={`p-2 rounded-lg transition-colors ${isActive
+                      ? 'bg-slate-100 dark:bg-zinc-800 text-slate-800 dark:text-zinc-100'
+                      : 'text-slate-600 dark:text-zinc-400 hover:text-slate-800 dark:hover:text-zinc-100 hover:bg-slate-100 dark:hover:bg-zinc-800'
+                      }`}
+                    aria-label={item.label}
+                  >
+                    <Icon className="w-5 h-5" />
+                  </Link>
+                );
+              })}
+            </nav>
+
+            {/* Mobile Menu Button */}
+            <button
+              type="button"
+              className="sm:hidden p-2 text-slate-600 dark:text-zinc-400 hover:text-slate-800 dark:hover:text-zinc-100 hover:bg-slate-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label="Toggle menu"
+              aria-expanded={mobileMenuOpen}
+            >
+              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu Dropdown */}
+        {mobileMenuOpen && (
+          <nav className="sm:hidden mt-3 pt-3 border-t border-slate-200 dark:border-zinc-800" aria-label="Mobile navigation">
+            <div className="flex flex-col gap-1">
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive = pathname === item.href;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setMobileMenuOpen(false)}
+                    className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${isActive
+                      ? 'bg-slate-100 dark:bg-zinc-800 text-slate-800 dark:text-zinc-100'
+                      : 'text-slate-600 dark:text-zinc-400 hover:text-slate-800 dark:hover:text-zinc-100 hover:bg-slate-100 dark:hover:bg-zinc-800'
+                      }`}
+                  >
+                    <Icon className="w-5 h-5" />
+                    <span className="font-medium">{item.label}</span>
+                  </Link>
+                );
+              })}
+            </div>
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}
--- a/src/components/layout/index.ts
+++ b/src/components/layout/index.ts
@@ -0,0 +1 @@
+export { AppHeader } from './app-header';
--- a/src/services/provider-management-service.ts
+++ b/src/services/provider-management-service.ts
@@ -1,5 +1,5 @@
 import { useSettingsStore } from '@/store/use-settings';
-import type { ProviderProfile, ProviderSettings } from '@/types/settings';
+import type { ProviderProfile, ProviderSettings, ConnectionValidationResult } from '@/types/settings';

 /**
 * Provider Management Service - Business logic for multi-provider management
@@ -109,4 +109,20 @@ export class ProviderManagementService {
  static hasAnyProvider(): boolean {
    return useSettingsStore.getState().savedProviders.length > 0;
  }
+
+  /**
+   * Validate connection to LLM provider
+   * @param baseUrl - The API base URL
+   * @param apiKey - The API key for authentication
+   * @param modelName - The model name to test
+   * @returns Promise resolving to ConnectionValidationResult
+   */
+  static async validateConnection(
+    baseUrl: string,
+    apiKey: string,
+    modelName: string
+  ): Promise<ConnectionValidationResult> {
+    const { LLMService } = await import('./llm-service');
+    return LLMService.validateConnection(baseUrl, apiKey, modelName);
+  }
 }