snice 4.29.0 → 4.30.1

package/bin/templates/react/src/pages/DashboardPage.tsx

@@ -0,0 +1,111 @@
+import { useState, useEffect } from 'react';
+import { useSniceContext, Card, Button } from 'snice/react';
+import type { NotificationsDaemon } from '../daemons/notifications';
+
+export function DashboardPage() {
+  const ctx = useSniceContext();
+  const principal = ctx.application.principal;
+  const userName = principal?.user?.name || 'User';
+  const [notificationCount, setNotificationCount] = useState(0);
+
+  useEffect(() => {
+    const daemon = ctx.application.notifications as NotificationsDaemon | undefined;
+    if (!daemon) return;
+
+    const unsubscribe = daemon.subscribe(() => {
+      setNotificationCount(prev => prev + 1);
+    });
+
+    return unsubscribe;
+  }, [ctx.application.notifications]);
+
+  return (
+    <div className="page-container">
+      <div style={{ marginBottom: '2rem' }}>
+        <h1 style={{ color: 'var(--snice-color-primary)', margin: '0 0 0.5rem 0' }}>
+          Welcome, {userName}!
+        </h1>
+        <p style={{ color: 'var(--snice-color-text-secondary)', margin: 0 }}>
+          This is your dashboard
+        </p>
+      </div>
+
+      <div className="stats-grid" style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '1rem',
+        marginBottom: '2rem'
+      }}>
+        <Card style={{ padding: '1.25rem', textAlign: 'center' }}>
+          <span style={{ display: 'block', fontSize: '2rem', fontWeight: 700, color: 'var(--snice-color-primary)' }}>4</span>
+          <span style={{ display: 'block', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)', marginTop: '0.25rem' }}>Active Pages</span>
+        </Card>
+        <Card style={{ padding: '1.25rem', textAlign: 'center' }}>
+          <span style={{ display: 'block', fontSize: '2rem', fontWeight: 700, color: 'var(--snice-color-primary)' }}>{notificationCount}</span>
+          <span style={{ display: 'block', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)', marginTop: '0.25rem' }}>Notifications</span>
+        </Card>
+        <Card style={{ padding: '1.25rem', textAlign: 'center' }}>
+          <span style={{ display: 'block', fontSize: '2rem', fontWeight: 700, color: 'var(--snice-color-primary)' }}>3</span>
+          <span style={{ display: 'block', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)', marginTop: '0.25rem' }}>Middleware</span>
+        </Card>
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gap: '1.5rem'
+      }}>
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Features</h3>
+          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+            <li style={{ margin: '0.5rem 0' }}>JWT Authentication</li>
+            <li style={{ margin: '0.5rem 0' }}>Protected Routes with Guards</li>
+            <li style={{ margin: '0.5rem 0' }}>Middleware Pattern</li>
+            <li style={{ margin: '0.5rem 0' }}>Live Notifications</li>
+            <li style={{ margin: '0.5rem 0' }}>Theme Switching</li>
+            <li style={{ margin: '0.5rem 0' }}>Debounced Search</li>
+            <li style={{ margin: '0.5rem 0' }}>React + Snice Integration</li>
+          </ul>
+        </Card>
+
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Architecture</h3>
+          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+            <li style={{ margin: '0.5rem 0' }}><strong>Pages:</strong> React components</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Components:</strong> Snice adapters + React</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Services:</strong> Business logic</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Middleware:</strong> Fetch interceptors</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Daemons:</strong> Lifecycle classes</li>
+            <li style={{ margin: '0.5rem 0' }}><strong>Guards:</strong> Route protection</li>
+          </ul>
+        </Card>
+
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>React Hooks</h3>
+          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+            <li style={{ margin: '0.5rem 0' }}><code>useSniceContext()</code> - App state</li>
+            <li style={{ margin: '0.5rem 0' }}><code>useNavigate()</code> - Navigation</li>
+            <li style={{ margin: '0.5rem 0' }}><code>useParams()</code> - Route params</li>
+            <li style={{ margin: '0.5rem 0' }}><code>useRoute()</code> - Current route</li>
+          </ul>
+        </Card>
+
+        <Card style={{ padding: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Explore</h3>
+          <p style={{ color: 'var(--snice-color-text-secondary)', margin: '0 0 0.5rem 0' }}>Check out the other pages:</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginTop: '1rem' }}>
+            <a href="#/data" style={{ textDecoration: 'none' }}>
+              <Button variant="secondary" style={{ width: '100%' }}>Browse Data</Button>
+            </a>
+            <a href="#/settings" style={{ textDecoration: 'none' }}>
+              <Button variant="secondary" style={{ width: '100%' }}>Settings</Button>
+            </a>
+            <a href="#/notifications" style={{ textDecoration: 'none' }}>
+              <Button variant="secondary" style={{ width: '100%' }}>Notifications</Button>
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/bin/templates/react/src/pages/DataPage.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Spinner, EmptyState } from 'snice/react';
+import { SearchBar } from '../components/SearchBar';
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  status: 'active' | 'pending' | 'archived';
+  createdAt: string;
+}
+
+const MOCK_ITEMS: DataItem[] = [
+  { id: '1', title: 'API Integration', description: 'Connect external payment gateway', status: 'active', createdAt: '2025-01-15' },
+  { id: '2', title: 'User Analytics', description: 'Implement tracking dashboard', status: 'pending', createdAt: '2025-01-20' },
+  { id: '3', title: 'Email Templates', description: 'Design transactional email set', status: 'active', createdAt: '2025-02-01' },
+  { id: '4', title: 'Legacy Migration', description: 'Migrate v1 database schema', status: 'archived', createdAt: '2024-12-10' },
+  { id: '5', title: 'Mobile App', description: 'React Native companion app', status: 'pending', createdAt: '2025-02-15' },
+  { id: '6', title: 'CI/CD Pipeline', description: 'GitHub Actions deployment workflow', status: 'active', createdAt: '2025-01-05' },
+  { id: '7', title: 'Documentation', description: 'API reference and developer guides', status: 'active', createdAt: '2025-02-10' },
+  { id: '8', title: 'Performance Audit', description: 'Lighthouse and Core Web Vitals', status: 'archived', createdAt: '2024-11-20' },
+];
+
+function getStatusColor(status: string): string {
+  const colors: Record<string, string> = {
+    active: 'var(--snice-color-success)',
+    pending: 'var(--snice-color-warning)',
+    archived: 'var(--snice-color-text-secondary)'
+  };
+  return colors[status] || 'var(--snice-color-text-secondary)';
+}
+
+export function DataPage() {
+  const [loading, setLoading] = useState(true);
+  const [allItems, setAllItems] = useState<DataItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'pending' | 'archived'>('all');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAllItems([...MOCK_ITEMS]);
+      setLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const filteredItems = allItems.filter(item => {
+    if (statusFilter !== 'all' && item.status !== statusFilter) return false;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      return item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q);
+    }
+    return true;
+  });
+
+  const handleSearch = useCallback((query: string) => {
+    setSearchQuery(query);
+  }, []);
+
+  return (
+    <div className="page-container-medium">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0, color: 'var(--snice-color-primary)' }}>Data</h1>
+        <span style={{ fontSize: '0.875rem', color: 'var(--snice-color-text-secondary)' }}>
+          {filteredItems.length} items
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
+        <SearchBar placeholder="Search items..." onSearch={handleSearch} />
+
+        <div className="filters" style={{ display: 'flex', gap: '0.5rem' }}>
+          {(['all', 'active', 'pending', 'archived'] as const).map(status => (
+            <button
+              key={status}
+              className={`filter-btn ${statusFilter === status ? 'active' : ''}`}
+              onClick={() => setStatusFilter(status)}
+            >
+              {status.charAt(0).toUpperCase() + status.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
+          <Spinner />
+        </div>
+      ) : filteredItems.length === 0 ? (
+        <EmptyState
+          icon="&#128269;"
+          title="No results"
+          description="Try adjusting your search or filters"
+        />
+      ) : (
+        <div className="data-table">
+          <div className="table-header">
+            <span className="col-title">Title</span>
+            <span className="col-status">Status</span>
+            <span className="col-date">Created</span>
+          </div>
+          {filteredItems.map(item => (
+            <div className="table-row" key={item.id}>
+              <div className="col-title">
+                <strong>{item.title}</strong>
+                <span className="description">{item.description}</span>
+              </div>
+              <div className="col-status">
+                <span className="status-dot" style={{ background: getStatusColor(item.status) }} />
+                {item.status}
+              </div>
+              <div className="col-date">{item.createdAt}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/bin/templates/react/src/pages/LoginPage.tsx

@@ -0,0 +1,46 @@
+import { useRef, useState } from 'react';
+import { useSniceContext, useNavigate, Login, useRequestHandler } from 'snice/react';
+import 'snice/components/login/snice-login';
+
+export function LoginPage() {
+  const ctx = useSniceContext();
+  const navigate = useNavigate();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState('');
+
+  useRequestHandler(containerRef, {
+    'login-user': async (credentials: { username: string; password: string }) => {
+      setError('');
+      try {
+        await ctx.application.login(credentials.username, credentials.password);
+        navigate('/dashboard');
+        return { success: true };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Login failed';
+        setError(message);
+        return { success: false, error: message };
+      }
+    }
+  });
+
+  return (
+    <div className="login-page" ref={containerRef}>
+      <Login
+        variant="card"
+        size="medium"
+        title={'{{projectName}}'}
+        actionText="Sign In"
+        showForgotPassword={false}
+        alertMessage={error}
+        alertVariant={error ? 'error' : undefined}
+      >
+        <p slot="subtitle">Sign in to your account</p>
+        <div slot="footer">
+          <p className="hint">Demo credentials:</p>
+          <p className="hint"><strong>Email:</strong> demo@example.com</p>
+          <p className="hint"><strong>Password:</strong> demo</p>
+        </div>
+      </Login>
+    </div>
+  );
+}

package/bin/templates/react/src/pages/NotificationsPage.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSniceContext, Alert, Button, EmptyState } from 'snice/react';
+import type { NotificationsDaemon } from '../daemons/notifications';
+import type { Notification, NotificationType } from '../types/notifications';
+
+function getVariant(type: string): string {
+  const variants: Record<string, string> = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'danger'
+  };
+  return variants[type] || 'info';
+}
+
+export function NotificationsPage() {
+  const ctx = useSniceContext();
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [filter, setFilter] = useState<NotificationType | 'all'>('all');
+
+  useEffect(() => {
+    const daemon = ctx.application.notifications as NotificationsDaemon | undefined;
+    if (!daemon) return;
+
+    const unsubscribe = daemon.subscribe((notification) => {
+      setNotifications(prev => [notification, ...prev]);
+    });
+
+    return unsubscribe;
+  }, [ctx.application.notifications]);
+
+  const clearAll = useCallback(() => {
+    setNotifications([]);
+  }, []);
+
+  const removeNotification = useCallback((id: string) => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  }, []);
+
+  // Keyboard shortcut: Ctrl+Backspace to clear all
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'Backspace') {
+        clearAll();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [clearAll]);
+
+  const filteredNotifications = filter === 'all'
+    ? notifications
+    : notifications.filter(n => n.type === filter);
+
+  return (
+    <div className="page-container-narrow">
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: '1.5rem'
+      }}>
+        <div>
+          <h1 style={{ margin: 0, color: 'var(--snice-color-primary)' }}>Notifications</h1>
+          <span style={{ fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)' }}>
+            {notifications.length} total
+          </span>
+        </div>
+        {notifications.length > 0 && (
+          <Button variant="secondary" size="small" onClick={clearAll}>
+            Clear All (Ctrl+Backspace)
+          </Button>
+        )}
+      </div>
+
+      {notifications.length > 0 && (
+        <div className="filters" style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
+          {(['all', 'info', 'success', 'warning', 'error'] as const).map(f => (
+            <button
+              key={f}
+              className={`filter-btn ${filter === f ? 'active' : ''}`}
+              onClick={() => setFilter(f)}
+            >
+              {f.charAt(0).toUpperCase() + f.slice(1)}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {filteredNotifications.length === 0 ? (
+        <EmptyState
+          icon="&#128276;"
+          title="No notifications"
+          description="You'll see live notifications here as they arrive"
+        />
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          {filteredNotifications.map(notification => (
+            <Alert
+              key={notification.id}
+              variant={getVariant(notification.type)}
+              dismissible
+              className="notification-slide-in"
+              onAlertDismiss={() => removeNotification(notification.id)}
+            >
+              <strong style={{ display: 'block', marginBottom: '0.5rem' }}>
+                {notification.title}
+              </strong>
+              <p style={{ margin: '0 0 0.5rem 0' }}>{notification.message}</p>
+              <small style={{ opacity: 0.7 }}>
+                {new Date(notification.timestamp).toLocaleTimeString()}
+              </small>
+            </Alert>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/bin/templates/react/src/pages/ProfilePage.tsx

@@ -0,0 +1,92 @@
+import { useSniceContext, Card, Avatar, Button, Divider, Spinner } from 'snice/react';
+
+export function ProfilePage() {
+  const ctx = useSniceContext();
+  const principal = ctx.application.principal;
+  const user = principal?.user;
+
+  const handleLogout = async () => {
+    await ctx.application.logout();
+    window.location.hash = '#/login';
+  };
+
+  if (!user) {
+    return (
+      <div className="page-container-narrow">
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-container-narrow">
+      <Card style={{ padding: '2rem' }}>
+        <div style={{ textAlign: 'center', paddingBottom: '1.5rem' }}>
+          <Avatar
+            src={user.avatar || ''}
+            name={user.name}
+            size="large"
+            style={{ marginBottom: '1rem' }}
+          />
+          <h1 style={{ margin: '0 0 0.5rem 0', color: 'var(--snice-color-primary)' }}>{user.name}</h1>
+          <p style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-text-secondary)' }}>{user.email}</p>
+          <a href="#/settings" style={{ textDecoration: 'none' }}>
+            <Button variant="secondary" size="small">Edit Profile</Button>
+          </a>
+        </div>
+
+        <Divider style={{ margin: '0.5rem 0' }} />
+
+        <div style={{ paddingTop: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Account Information</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '0.75rem',
+              background: 'var(--snice-color-background-secondary)',
+              borderRadius: 'var(--snice-border-radius-md)'
+            }}>
+              <span style={{ fontWeight: 600, color: 'var(--snice-color-text)' }}>User ID</span>
+              <span style={{ color: 'var(--snice-color-text-secondary)' }}>{user.id}</span>
+            </div>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '0.75rem',
+              background: 'var(--snice-color-background-secondary)',
+              borderRadius: 'var(--snice-border-radius-md)'
+            }}>
+              <span style={{ fontWeight: 600, color: 'var(--snice-color-text)' }}>Email</span>
+              <span style={{ color: 'var(--snice-color-text-secondary)' }}>{user.email}</span>
+            </div>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '0.75rem',
+              background: 'var(--snice-color-background-secondary)',
+              borderRadius: 'var(--snice-border-radius-md)'
+            }}>
+              <span style={{ fontWeight: 600, color: 'var(--snice-color-text)' }}>Name</span>
+              <span style={{ color: 'var(--snice-color-text-secondary)' }}>{user.name}</span>
+            </div>
+          </div>
+        </div>
+
+        <Divider style={{ margin: '0.5rem 0' }} />
+
+        <div style={{ paddingTop: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Session</h3>
+          <p style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-text-secondary)' }}>
+            You are currently logged in with JWT authentication.
+          </p>
+          <Button variant="danger" onClick={handleLogout}>
+            Sign Out
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/bin/templates/react/src/pages/SettingsPage.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSniceContext, Card, Input, Button, Switch, Alert } from 'snice/react';
+
+export function SettingsPage() {
+  const ctx = useSniceContext();
+  const principal = ctx.application.principal;
+  const user = principal?.user;
+
+  const [displayName, setDisplayName] = useState(user?.name || '');
+  const [email, setEmail] = useState(user?.email || '');
+  const [theme, setThemeState] = useState<'light' | 'dark' | 'system'>(() => {
+    return (localStorage.getItem('app-theme') as 'light' | 'dark' | 'system') || 'system';
+  });
+  const [notificationsEnabled, setNotificationsEnabled] = useState(() => {
+    return localStorage.getItem('notifications-enabled') !== 'false';
+  });
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (user) {
+      setDisplayName(user.name || '');
+      setEmail(user.email || '');
+    }
+  }, [user]);
+
+  const setTheme = useCallback((newTheme: 'light' | 'dark' | 'system') => {
+    setThemeState(newTheme);
+    localStorage.setItem('app-theme', newTheme);
+    if (newTheme === 'system') {
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', newTheme);
+    }
+  }, []);
+
+  const toggleNotifications = useCallback(() => {
+    setNotificationsEnabled(prev => {
+      const next = !prev;
+      localStorage.setItem('notifications-enabled', String(next));
+      return next;
+    });
+  }, []);
+
+  const saveSettings = useCallback(() => {
+    ctx.application.refreshAuth();
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }, [ctx.application]);
+
+  // Keyboard shortcut: Ctrl+S to save
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 's') {
+        e.preventDefault();
+        saveSettings();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [saveSettings]);
+
+  return (
+    <div className="page-container-narrow">
+      <h1 style={{ margin: '0 0 0.25rem 0', color: 'var(--snice-color-primary)' }}>Settings</h1>
+      <p style={{ margin: '0 0 2rem 0', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)' }}>
+        Press Ctrl+S to save
+      </p>
+
+      {saved && (
+        <Alert variant="success" dismissible style={{ marginBottom: '1.5rem' }}>
+          Settings saved successfully!
+        </Alert>
+      )}
+
+      <Card style={{ padding: '1.5rem', marginBottom: '1.5rem' }}>
+        <h3 style={{ margin: '0 0 1.25rem 0', color: 'var(--snice-color-primary)' }}>Profile</h3>
+        <div style={{ marginBottom: '1rem' }}>
+          <label style={{
+            display: 'block',
+            marginBottom: '0.375rem',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            color: 'var(--snice-color-text)'
+          }}>Display Name</label>
+          <Input
+            value={displayName}
+            onInput={(e: any) => setDisplayName(e.target.value)}
+            placeholder="Your name"
+            style={{ width: '100%' }}
+          />
+        </div>
+        <div>
+          <label style={{
+            display: 'block',
+            marginBottom: '0.375rem',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            color: 'var(--snice-color-text)'
+          }}>Email</label>
+          <Input
+            value={email}
+            onInput={(e: any) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            style={{ width: '100%' }}
+          />
+        </div>
+      </Card>
+
+      <Card style={{ padding: '1.5rem', marginBottom: '1.5rem' }}>
+        <h3 style={{ margin: '0 0 1.25rem 0', color: 'var(--snice-color-primary)' }}>Appearance</h3>
+        <div className="theme-options" style={{ display: 'flex', gap: '0.75rem' }}>
+          <button
+            className={`theme-btn ${theme === 'light' ? 'active' : ''}`}
+            onClick={() => setTheme('light')}
+          >
+            <span className="theme-icon">&#9728;&#65039;</span>
+            Light
+          </button>
+          <button
+            className={`theme-btn ${theme === 'dark' ? 'active' : ''}`}
+            onClick={() => setTheme('dark')}
+          >
+            <span className="theme-icon">&#127769;</span>
+            Dark
+          </button>
+          <button
+            className={`theme-btn ${theme === 'system' ? 'active' : ''}`}
+            onClick={() => setTheme('system')}
+          >
+            <span className="theme-icon">&#128187;</span>
+            System
+          </button>
+        </div>
+      </Card>
+
+      <Card style={{ padding: '1.5rem', marginBottom: '1.5rem' }}>
+        <h3 style={{ margin: '0 0 1.25rem 0', color: 'var(--snice-color-primary)' }}>Notifications</h3>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        }}>
+          <div>
+            <p style={{ margin: 0, fontWeight: 500, color: 'var(--snice-color-text)' }}>
+              Push Notifications
+            </p>
+            <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)' }}>
+              Receive real-time notification alerts
+            </p>
+          </div>
+          <Switch
+            checked={notificationsEnabled}
+            onChange={toggleNotifications}
+          />
+        </div>
+      </Card>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button variant="primary" onClick={saveSettings}>
+          Save Settings
+        </Button>
+      </div>
+    </div>
+  );
+}