bingocode 1.0.3 → 1.0.5

package/desktop/src/pages/NewTaskModal.tsx

@@ -1,346 +0,0 @@
-import { useState } from 'react'
-import { mockNewTaskDefaults, mockSessions, mockStatusBar } from '../mocks/data'
-
-/**
- * NewTaskModal page -- pixel-perfect replica of the HTML prototype.
- * Renders the full app chrome (header, sidebar, content, footer) dimmed/blurred
- * behind a centered "New Scheduled Task" modal overlay.
- *
- * Everything lives in this single file.  Mock data is imported from ../mocks/data.
- */
-export default function NewTaskModal() {
-  /* ── form state ─────────────────────────────────────────────────── */
-  const [taskName, setTaskName] = useState('')
-  const [description, setDescription] = useState('')
-  const [systemPrompt, setSystemPrompt] = useState('')
-  const [permissionMode, setPermissionMode] = useState(mockNewTaskDefaults.permissionModes[0])
-  const [model, setModel] = useState(mockNewTaskDefaults.models[0])
-  const [rootFolder, setRootFolder] = useState('')
-  const [frequency, setFrequency] = useState(mockNewTaskDefaults.frequencies[1])
-  const [worktree, setWorktree] = useState(false)
-
-  return (
-    <div className="bg-[var(--color-background)] text-[var(--color-on-surface)] font-[var(--font-body)] min-h-screen flex flex-col">
-      {/* ─── TopAppBar / Header ──────────────────────────────────── */}
-      <header className="bg-[#FAF9F5] flex justify-between items-center px-6 h-12 w-full z-40">
-        <div className="flex items-center gap-6">
-          <span className="text-sm font-bold text-[#1B1C1A] uppercase tracking-tighter font-[var(--font-headline)]">
-            Claude Code Companion
-          </span>
-          <nav className="hidden md:flex gap-4 font-[var(--font-headline)] font-semibold tracking-wide text-sm">
-            <a className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer">Code</a>
-            <a className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer">Terminal</a>
-            <a className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer">History</a>
-          </nav>
-        </div>
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2 text-[#8F482F]">
-            <span className="material-symbols-outlined cursor-pointer active:opacity-70 text-sm">arrow_back_ios</span>
-            <span className="material-symbols-outlined cursor-pointer active:opacity-70 text-sm">arrow_forward_ios</span>
-          </div>
-          <span className="font-[var(--font-headline)] font-semibold tracking-wide text-sm text-[#87736D] cursor-pointer hover:text-[#8F482F] transition-colors">
-            Settings
-          </span>
-        </div>
-      </header>
-
-      {/* header divider */}
-      <div className="bg-[#F4F4F0] h-px w-full" />
-
-      {/* ─── Main area (sidebar + content + overlay) ──────────────── */}
-      <main className="flex-1 flex overflow-hidden relative">
-        {/* ── Sidebar (dimmed) ────────────────────────────────────── */}
-        <aside className="hidden md:flex flex-col p-4 gap-2 bg-[#F4F4F0] h-full w-[280px] opacity-30 pointer-events-none">
-          {/* project selector */}
-          <div className="flex items-center gap-3 px-2 py-3 mb-2">
-            <div className="w-8 h-8 rounded bg-[var(--color-surface-dim)] flex items-center justify-center">
-              <span className="material-symbols-outlined text-[var(--color-outline)]">filter</span>
-            </div>
-            <div>
-              <div className="text-[var(--color-on-surface)] font-semibold text-xs">All projects</div>
-              <div className="text-[10px] text-[var(--color-outline)]">Active Session</div>
-            </div>
-          </div>
-
-          {/* nav items -- session counts derived from mockSessions */}
-          <div className="font-[var(--font-body)] text-sm font-medium space-y-1">
-            <div className="flex items-center gap-3 px-3 py-2 text-[#87736D]">
-              <span className="material-symbols-outlined">add</span>New session
-            </div>
-            <div className="flex items-center gap-3 px-3 py-2 bg-[#FAF9F5] text-[#1B1C1A] rounded-lg relative before:content-[''] before:absolute before:left-[-8px] before:w-1 before:h-4 before:bg-[#8F482F] before:rounded-full">
-              <span className="material-symbols-outlined">calendar_today</span>Scheduled
-            </div>
-            <div className="flex items-center gap-3 px-3 py-2 text-[#87736D]">
-              <span className="material-symbols-outlined">history</span>Today
-              {mockSessions.today.length > 0 && (
-                <span className="ml-auto text-[10px] text-[#87736D]">{mockSessions.today.length}</span>
-              )}
-            </div>
-            <div className="flex items-center gap-3 px-3 py-2 text-[#87736D]">
-              <span className="material-symbols-outlined">event_note</span>Previous 7 Days
-              {mockSessions.previous7Days.length > 0 && (
-                <span className="ml-auto text-[10px] text-[#87736D]">{mockSessions.previous7Days.length}</span>
-              )}
-            </div>
-          </div>
-        </aside>
-
-        {/* ── Content area (dimmed canvas) ────────────────────────── */}
-        <div className="flex-1 bg-[var(--color-surface-container-low)] flex flex-col p-8 overflow-y-auto relative">
-          {/* faded background content */}
-          <div className="max-w-4xl mx-auto w-full space-y-6 opacity-20">
-            <h1 className="font-[var(--font-headline)] text-3xl font-bold tracking-tight">
-              Scheduled Tasks
-            </h1>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="h-40 bg-[var(--color-surface-container-lowest)] rounded-xl border border-[var(--color-outline-variant)]/20 p-4" />
-              <div className="h-40 bg-[var(--color-surface-container-lowest)] rounded-xl border border-[var(--color-outline-variant)]/20 p-4" />
-            </div>
-          </div>
-
-          {/* ═══ MODAL OVERLAY ═══════════════════════════════════════ */}
-          <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-[var(--color-on-surface)]/40 backdrop-blur-sm">
-            <div
-              className="bg-[var(--color-surface-container-lowest)] w-full max-w-lg rounded-xl overflow-hidden flex flex-col"
-              style={{
-                boxShadow:
-                  '0 4px 20px rgba(27,28,26,0.04), 0 12px 40px rgba(27,28,26,0.08)',
-              }}
-            >
-              {/* ── Modal Header ─────────────────────────────────── */}
-              <div className="px-6 py-4 flex items-center justify-between border-b border-[var(--color-outline-variant)]/10">
-                <h2 className="font-[var(--font-headline)] font-bold text-lg text-[var(--color-on-surface)]">
-                  New Scheduled Task
-                </h2>
-                <span className="material-symbols-outlined text-[var(--color-outline)] cursor-pointer hover:text-[var(--color-on-surface)] transition-colors">
-                  close
-                </span>
-              </div>
-
-              {/* ── Modal Body ───────────────────────────────────── */}
-              <div
-                className="p-6 overflow-y-auto space-y-5"
-                style={{
-                  maxHeight: 768,
-                  scrollbarWidth: 'none',
-                  msOverflowStyle: 'none',
-                }}
-              >
-                {/* Info Banner */}
-                <div className="bg-[var(--color-surface-container-high)]/50 rounded-lg p-3 flex gap-3 items-start">
-                  <span className="material-symbols-outlined text-[var(--color-primary)] text-sm mt-0.5">
-                    info
-                  </span>
-                  <p className="text-xs text-[var(--color-on-surface-variant)] font-medium">
-                    Local tasks only run while your computer is awake.
-                  </p>
-                </div>
-
-                {/* ── Form ───────────────────────────────────────── */}
-                <div className="space-y-4">
-                  <div className="grid grid-cols-1 gap-4">
-                    {/* Task Name */}
-                    <div className="space-y-1.5">
-                      <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                        Task Name
-                      </label>
-                      <input
-                        type="text"
-                        value={taskName}
-                        onChange={(e) => setTaskName(e.target.value)}
-                        placeholder="e.g., Weekly Code Audit"
-                        className="w-full bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm placeholder:text-[var(--color-outline)]/50 px-4 py-2.5 transition-all outline-none"
-                      />
-                    </div>
-
-                    {/* Description */}
-                    <div className="space-y-1.5">
-                      <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                        Description
-                      </label>
-                      <input
-                        type="text"
-                        value={description}
-                        onChange={(e) => setDescription(e.target.value)}
-                        placeholder="Brief purpose of this schedule..."
-                        className="w-full bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm placeholder:text-[var(--color-outline)]/50 px-4 py-2.5 transition-all outline-none"
-                      />
-                    </div>
-
-                    {/* System Prompt */}
-                    <div className="space-y-1.5">
-                      <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                        System Prompt
-                      </label>
-                      <textarea
-                        value={systemPrompt}
-                        onChange={(e) => setSystemPrompt(e.target.value)}
-                        placeholder="Define the agent's goal and behavior..."
-                        rows={3}
-                        className="w-full bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm placeholder:text-[var(--color-outline)]/50 px-4 py-2.5 transition-all resize-none outline-none"
-                      />
-                    </div>
-                  </div>
-
-                  {/* Two-column row: Permission Mode + Model */}
-                  <div className="grid grid-cols-2 gap-4">
-                    {/* Permission Mode */}
-                    <div className="space-y-1.5">
-                      <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                        Permission Mode
-                      </label>
-                      <div className="relative">
-                        <select
-                          value={permissionMode}
-                          onChange={(e) => setPermissionMode(e.target.value)}
-                          className="w-full bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm px-4 py-2.5 appearance-none cursor-pointer outline-none"
-                        >
-                          {mockNewTaskDefaults.permissionModes.map((pm) => (
-                            <option key={pm} value={pm}>
-                              {pm}
-                            </option>
-                          ))}
-                        </select>
-                        <span className="material-symbols-outlined absolute right-3 top-2.5 pointer-events-none text-[var(--color-outline)] text-sm">
-                          unfold_more
-                        </span>
-                      </div>
-                    </div>
-
-                    {/* Model */}
-                    <div className="space-y-1.5">
-                      <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                        Model
-                      </label>
-                      <div className="relative">
-                        <select
-                          value={model}
-                          onChange={(e) => setModel(e.target.value)}
-                          className="w-full bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm px-4 py-2.5 appearance-none cursor-pointer outline-none"
-                        >
-                          {mockNewTaskDefaults.models.map((m) => (
-                            <option key={m} value={m}>
-                              {m}
-                            </option>
-                          ))}
-                        </select>
-                        <span className="material-symbols-outlined absolute right-3 top-2.5 pointer-events-none text-[var(--color-outline)] text-sm">
-                          unfold_more
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Root Folder Path */}
-                  <div className="space-y-1.5">
-                    <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                      Root Folder Path
-                    </label>
-                    <div className="flex gap-2">
-                      <input
-                        type="text"
-                        value={rootFolder}
-                        onChange={(e) => setRootFolder(e.target.value)}
-                        placeholder="/users/projects/claude-app"
-                        className="flex-1 bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm placeholder:text-[var(--color-outline)]/50 px-4 py-2.5 transition-all outline-none"
-                      />
-                      <button className="bg-[var(--color-surface-container-high)] px-3 rounded-lg flex items-center justify-center hover:bg-[var(--color-surface-variant)] transition-colors">
-                        <span className="material-symbols-outlined text-[var(--color-on-surface-variant)] text-sm">
-                          folder_open
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Frequency */}
-                  <div className="space-y-1.5">
-                    <label className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-outline)] px-1">
-                      Frequency
-                    </label>
-                    <div className="relative">
-                      <select
-                        value={frequency}
-                        onChange={(e) => setFrequency(e.target.value)}
-                        className="w-full bg-[var(--color-surface-container)] rounded-lg border-none focus:ring-1 focus:ring-[var(--color-primary)] text-sm px-4 py-2.5 appearance-none cursor-pointer outline-none"
-                      >
-                        {mockNewTaskDefaults.frequencies.map((f) => (
-                          <option key={f} value={f}>
-                            {f}
-                          </option>
-                        ))}
-                      </select>
-                      <span className="material-symbols-outlined absolute right-3 top-2.5 pointer-events-none text-[var(--color-outline)] text-sm">
-                        schedule
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* Worktree Checkbox */}
-                  <div className="flex items-center gap-3 pt-2">
-                    <div className="relative flex items-center">
-                      <input
-                        id="worktree"
-                        type="checkbox"
-                        checked={worktree}
-                        onChange={(e) => setWorktree(e.target.checked)}
-                        className="w-4 h-4 rounded text-[var(--color-primary)] focus:ring-[var(--color-primary)] border-[var(--color-outline-variant)] bg-[var(--color-surface-container)] accent-[var(--color-primary)]"
-                      />
-                    </div>
-                    <label
-                      htmlFor="worktree"
-                      className="text-sm text-[var(--color-on-surface)] font-medium cursor-pointer"
-                    >
-                      Create separate worktree for execution
-                    </label>
-                  </div>
-                </div>
-              </div>
-
-              {/* ── Modal Footer ─────────────────────────────────── */}
-              <div className="px-6 py-4 bg-[var(--color-surface-container-low)]/50 flex items-center justify-end gap-3">
-                <button className="px-5 py-2 text-sm font-semibold text-[var(--color-outline)] hover:text-[var(--color-on-surface)] transition-colors">
-                  Cancel
-                </button>
-                <button
-                  className="px-6 py-2 rounded-lg text-sm font-bold text-[var(--color-on-primary)] shadow-sm hover:opacity-90 active:scale-95 transition-all"
-                  style={{
-                    backgroundImage:
-                      'linear-gradient(to bottom, var(--color-primary), var(--color-primary-container))',
-                  }}
-                >
-                  Create task
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-
-      {/* ─── Footer / Status Bar ─────────────────────────────────── */}
-      <footer className="bg-[#FAF9F5] flex items-center justify-between px-4 z-50 fixed bottom-0 left-0 w-full h-8 border-t border-[#87736D]/20 font-[var(--font-body)] text-xs tracking-tight">
-        <div className="flex items-center gap-3">
-          <span className="text-[#87736D]">
-            {mockStatusBar.user} &bull; {mockStatusBar.username} &bull; {mockStatusBar.plan}
-          </span>
-          <div className="flex items-center gap-4 ml-4">
-            <span className="text-[#87736D] hover:bg-[#F4F4F0] px-2 py-0.5 rounded cursor-pointer transition-colors">
-              {mockStatusBar.branch}
-            </span>
-            <span className="text-[#87736D] hover:bg-[#F4F4F0] px-2 py-0.5 rounded cursor-pointer transition-colors">
-              {mockStatusBar.worktreeToggle}
-            </span>
-          </div>
-        </div>
-        <div className="flex items-center gap-4">
-          <span className="text-[#8F482F] font-bold cursor-pointer">
-            {mockStatusBar.localSwitch}
-          </span>
-          <div className="flex items-center gap-1 text-[#87736D]">
-            <span className="material-symbols-outlined text-[14px]">terminal</span>
-            <span>{mockStatusBar.status === 'Ready' ? 'Active' : mockStatusBar.status}</span>
-          </div>
-        </div>
-      </footer>
-    </div>
-  )
-}

package/desktop/src/pages/ScheduledTasks.tsx

@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTaskStore } from '../stores/taskStore'
-import { useUIStore } from '../stores/uiStore'
-import { useTranslation } from '../i18n'
-import { Button } from '../components/shared/Button'
-import { TaskList } from '../components/tasks/TaskList'
-import { TaskEmptyState } from '../components/tasks/TaskEmptyState'
-import { NewTaskModal } from '../components/tasks/NewTaskModal'
-
-export function ScheduledTasks() {
-  const { tasks, fetchTasks, isLoading } = useTaskStore()
-  const { activeModal, openModal, closeModal } = useUIStore()
-  const t = useTranslation()
-  const [initialized, setInitialized] = useState(false)
-
-  useEffect(() => {
-    fetchTasks().then(() => setInitialized(true))
-  }, [fetchTasks])
-
-  return (
-    <div className="flex-1 overflow-y-auto">
-      <div className="px-10 py-8">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <h1 className="text-2xl font-bold text-[var(--color-text-primary)]">{t('scheduledPage.title')}</h1>
-            <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
-              {(() => {
-                const parts = t('scheduledPage.subtitle').split('{code}')
-                return <>{parts[0]}<code className="px-1 py-0.5 rounded bg-[var(--color-surface-container)] text-xs font-[var(--font-mono)]">/schedule</code>{parts[1]}</>
-              })()}
-            </p>
-          </div>
-          <Button onClick={() => openModal('new-task')}>{t('tasks.newTask')}</Button>
-        </div>
-
-        {/* Desktop-online notice */}
-        <div className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-[var(--radius-md)] bg-[var(--color-warning)]/8 border border-[var(--color-warning)]/15 mb-6">
-          <span className="material-symbols-outlined text-[18px] text-[var(--color-warning)]">schedule</span>
-          <span className="text-xs text-[var(--color-text-secondary)]">
-            {t('scheduledPage.desktopNotice')}
-          </span>
-        </div>
-
-        {/* Content */}
-        {!initialized && isLoading ? (
-          <div className="flex items-center justify-center py-16">
-            <div className="animate-spin w-6 h-6 border-2 border-[var(--color-brand)] border-t-transparent rounded-full" />
-          </div>
-        ) : tasks.length === 0 ? (
-          <TaskEmptyState onCreateTask={() => openModal('new-task')} />
-        ) : (
-          <TaskList tasks={tasks} />
-        )}
-      </div>
-
-      {/* New Task Modal */}
-      {activeModal === 'new-task' && (
-        <NewTaskModal
-          open
-          onClose={closeModal}
-        />
-      )}
-    </div>
-  )
-}

package/desktop/src/pages/ScheduledTasksEmpty.tsx

@@ -1,152 +0,0 @@
-import { useTranslation } from '../i18n'
-import { mockStatusBar } from '../mocks/data'
-
-export function ScheduledTasksEmpty() {
-  const t = useTranslation()
-  return (
-    <div className="bg-[#FAF9F5] text-[#1B1C1A] flex min-h-screen font-[Inter,sans-serif]">
-      {/* SideNavBar */}
-      <aside className="fixed left-0 top-0 h-full w-[280px] bg-[#F4F4F0] flex flex-col p-4 gap-2 text-sm font-medium z-40">
-        <div className="flex items-center gap-3 px-2 mb-6 mt-12">
-          <div className="w-8 h-8 rounded bg-[#E3E2DF] flex items-center justify-center">
-            <span className="material-symbols-outlined text-[#87736D]">filter_list</span>
-          </div>
-          <div>
-            <div className="text-[#1B1C1A] font-bold">{t('sidebar.allProjects')}</div>
-            <div className="text-[10px] text-[#87736D] uppercase tracking-widest">{t('scheduledPage.activeSession')}</div>
-          </div>
-        </div>
-
-        <nav className="flex-1 space-y-1">
-          <div className="px-3 py-2 text-[#87736D] hover:bg-[#EBEBE6] transition-all rounded-lg cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">add</span>
-            <span>{t('sidebar.newSession')}</span>
-          </div>
-          {/* Active State: Scheduled */}
-          <div className="px-3 py-2 bg-[#FAF9F5] text-[#1B1C1A] rounded-lg relative before:content-[''] before:absolute before:left-[-8px] before:w-1 before:h-4 before:bg-[#8F482F] before:rounded-full cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">calendar_today</span>
-            <span>{t('sidebar.scheduled')}</span>
-          </div>
-          <div className="px-3 py-2 text-[#87736D] hover:bg-[#EBEBE6] transition-all rounded-lg cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">history</span>
-            <span>{t('sidebar.timeGroup.today')}</span>
-          </div>
-          <div className="px-3 py-2 text-[#87736D] hover:bg-[#EBEBE6] transition-all rounded-lg cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">event_note</span>
-            <span>{t('sidebar.timeGroup.last7days')}</span>
-          </div>
-          <div className="px-3 py-2 text-[#87736D] hover:bg-[#EBEBE6] transition-all rounded-lg cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">archive</span>
-            <span>{t('sidebar.timeGroup.older')}</span>
-          </div>
-        </nav>
-
-        <div className="mt-auto pt-4 border-t border-[#87736D]/10">
-          <div className="text-[10px] text-[#87736D] uppercase tracking-widest px-3 mb-2">{t('scheduledPage.executionMode')}</div>
-          <div className="px-3 py-2 text-[#87736D] hover:bg-[#EBEBE6] transition-all rounded-lg cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">computer</span>
-            <span>{t('scheduledPage.localMode')}</span>
-          </div>
-          <div className="px-3 py-2 text-[#87736D] hover:bg-[#EBEBE6] transition-all rounded-lg cursor-pointer duration-200 ease-in-out flex items-center gap-3">
-            <span className="material-symbols-outlined">cloud</span>
-            <span>{t('scheduledPage.remoteMode')}</span>
-          </div>
-        </div>
-      </aside>
-
-      {/* Main Canvas */}
-      <main className="flex-1 ml-[280px] flex flex-col min-h-screen">
-        {/* TopAppBar */}
-        <header className="fixed top-0 right-0 left-[280px] z-30 bg-[#FAF9F5] flex justify-between items-center px-6 h-12 w-full border-b border-[#F4F4F0]">
-          <div className="flex items-center gap-6 h-full">
-            <div className="text-sm font-bold text-[#1B1C1A] uppercase tracking-tighter font-[Manrope,sans-serif]">Claude Code Companion</div>
-            <nav className="flex items-center gap-4 h-full font-[Manrope,sans-serif] font-semibold tracking-wide text-sm">
-              <span className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer active:opacity-70 h-full flex items-center">{t('titlebar.code')}</span>
-              <span className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer active:opacity-70 h-full flex items-center">{t('titlebar.terminal')}</span>
-              <span className="text-[#1B1C1A] border-b-2 border-[#8F482F] pb-1 h-full flex items-center pt-1">{t('titlebar.history')}</span>
-            </nav>
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-1">
-              <span className="material-symbols-outlined text-[#87736D] text-sm cursor-pointer">arrow_back_ios</span>
-              <span className="material-symbols-outlined text-[#87736D] text-sm cursor-pointer">arrow_forward_ios</span>
-            </div>
-            <div className="h-4 w-[1px] bg-[#87736D]/20"></div>
-            <div className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer text-xs font-semibold uppercase tracking-wider">{t('sidebar.settings')}</div>
-          </div>
-        </header>
-
-        {/* Content Area */}
-        <div className="flex-1 mt-12 mb-8 flex flex-col items-center justify-center p-8 bg-[#FAF9F5]">
-          <div className="max-w-2xl w-full text-center">
-            <h1 className="text-3xl font-[Manrope,sans-serif] font-extrabold text-[#1B1C1A] tracking-tight mb-16">{t('scheduledPage.title')}</h1>
-
-            {/* Empty State Illustration/Card */}
-            <div className="relative group">
-              {/* Architectural Background Detail */}
-              <div className="absolute -inset-4 bg-[#F4F4F0] rounded-[32px] -z-10 transition-all"></div>
-              <div className="flex flex-col items-center py-20 px-8">
-                <div className="w-32 h-32 rounded-full bg-[#E9E8E4] flex items-center justify-center mb-10 shadow-sm">
-                  <div className="w-20 h-20 rounded-full bg-white flex items-center justify-center border border-[#DAC1BA]/10">
-                    <span
-                      className="material-symbols-outlined text-[#8F482F] text-5xl"
-                      style={{ fontVariationSettings: "'wght' 300" }}
-                    >
-                      schedule
-                    </span>
-                  </div>
-                </div>
-                <p className="text-[#54433E] font-[Inter,sans-serif] text-lg max-w-sm mx-auto leading-relaxed mb-12">
-                  {t('tasks.emptyTitle')} {t('tasks.emptyDesc')}
-                </p>
-                <button className="group relative px-8 py-4 bg-[#8F482F] text-white rounded-xl font-[Manrope,sans-serif] font-bold text-sm tracking-wide shadow-lg hover:shadow-[#8F482F]/20 transition-all flex items-center gap-3 overflow-hidden">
-                  <div className="absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-30"></div>
-                  <span className="material-symbols-outlined text-lg">add_task</span>
-                  <span>{t('tasks.newTask')}</span>
-                </button>
-              </div>
-            </div>
-
-            {/* Subtle Decorative Bento Elements */}
-            <div className="grid grid-cols-3 gap-4 mt-20 opacity-40">
-              <div className="h-24 bg-[#F4F4F0] rounded-xl border border-[#DAC1BA]/10 flex flex-col items-center justify-center p-4">
-                <span className="material-symbols-outlined text-[#87736D] mb-2">commit</span>
-                <div className="w-12 h-1 bg-[#DAC1BA]/30 rounded-full"></div>
-              </div>
-              <div className="h-24 bg-[#F4F4F0] rounded-xl border border-[#DAC1BA]/10 flex flex-col items-center justify-center p-4">
-                <span className="material-symbols-outlined text-[#87736D] mb-2">terminal</span>
-                <div className="w-8 h-1 bg-[#DAC1BA]/30 rounded-full"></div>
-              </div>
-              <div className="h-24 bg-[#F4F4F0] rounded-xl border border-[#DAC1BA]/10 flex flex-col items-center justify-center p-4">
-                <span className="material-symbols-outlined text-[#87736D] mb-2">code_blocks</span>
-                <div className="w-10 h-1 bg-[#DAC1BA]/30 rounded-full"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <footer className="fixed bottom-0 left-0 w-full h-8 bg-[#FAF9F5] flex items-center justify-between px-4 z-50 border-t border-[#87736D]/20 font-[Inter,sans-serif] text-xs tracking-tight">
-          <div className="flex items-center gap-3 text-[#87736D]">
-            <div className="w-2 h-2 rounded-full bg-[#677B4E]"></div>
-            <span>{mockStatusBar.user} &bull; {mockStatusBar.username} &bull; {mockStatusBar.plan}</span>
-          </div>
-          <div className="flex items-center gap-6">
-            <span className="text-[#87736D] hover:bg-[#F4F4F0] px-2 py-0.5 rounded transition-colors cursor-pointer flex items-center gap-1">
-              <span className="material-symbols-outlined text-[14px]">account_tree</span>
-              {mockStatusBar.branch}
-            </span>
-            <span className="text-[#87736D] hover:bg-[#F4F4F0] px-2 py-0.5 rounded transition-colors cursor-pointer flex items-center gap-1">
-              <span className="material-symbols-outlined text-[14px]">workspaces</span>
-              {mockStatusBar.worktreeToggle}
-            </span>
-            <span className="text-[#8F482F] font-bold hover:bg-[#F4F4F0] px-2 py-0.5 rounded transition-colors cursor-pointer flex items-center gap-1">
-              <span className="material-symbols-outlined text-[14px]">toggle_on</span>
-              {mockStatusBar.localSwitch}
-            </span>
-          </div>
-        </footer>
-      </main>
-    </div>
-  )
-}