From bd3a65fc59f486f35f64eb37fc8980a811e166ab Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 28 Oct 2025 20:09:19 +0000
Subject: [PATCH] refactor: restyle panels via tokens

---
 src/components/folder-selection-view.tsx |  85 ++++-----
 src/components/info-view.tsx             |  28 +--
 src/components/logs-view.tsx             |  38 ++--
 src/index.css                            |   8 +-
 src/styles/components.css                | 222 +++++++++++++++++++++++
 5 files changed, 300 insertions(+), 81 deletions(-)

diff --git a/src/components/folder-selection-view.tsx b/src/components/folder-selection-view.tsx
index e12242bf..0fc9715c 100644
--- a/src/components/folder-selection-view.tsx
+++ b/src/components/folder-selection-view.tsx
@@ -154,50 +154,48 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   }
 
   return (
-    <div class="flex h-full w-full items-center justify-center bg-gray-50 dark:bg-gray-900">
+    <div class="flex h-full w-full items-center justify-center" style="background-color: var(--surface-secondary)">
       <div class="w-full max-w-3xl px-8 py-12">
         <div class="mb-8 text-center">
           <div class="mb-4 flex justify-center">
-            <Folder class="h-16 w-16 text-gray-400 dark:text-gray-600" />
+            <Folder class="h-16 w-16" style="color: var(--text-muted)" />
           </div>
-          <h1 class="mb-2 text-2xl font-semibold text-gray-900 dark:text-gray-100">Welcome to OpenCode</h1>
-          <p class="text-base text-gray-600 dark:text-gray-400">Select a folder to start coding with AI</p>
+          <h1 class="mb-2 text-2xl font-semibold" style="color: var(--text-primary)">Welcome to OpenCode</h1>
+          <p class="text-base" style="color: var(--text-secondary)">Select a folder to start coding with AI</p>
         </div>
 
         <div class="space-y-4 overflow-visible">
           <Show
             when={folders().length > 0}
             fallback={
-              <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 text-center">
-                <div class="text-gray-400 dark:text-gray-600 mb-2">
+              <div class="panel panel-empty-state">
+                <div class="panel-empty-state-icon">
                   <Clock class="w-12 h-12 mx-auto" />
                 </div>
-                <p class="text-gray-600 dark:text-gray-400 font-medium text-sm mb-1">No Recent Folders</p>
-                <p class="text-xs text-gray-500 dark:text-gray-500">Browse for a folder to get started</p>
+                <p class="panel-empty-state-title">No Recent Folders</p>
+                <p class="panel-empty-state-description">Browse for a folder to get started</p>
               </div>
             }
           >
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-              <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Recent Folders</h2>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+            <div class="panel">
+              <div class="panel-header">
+                <h2 class="panel-title">Recent Folders</h2>
+                <p class="panel-subtitle">
                   {folders().length} {folders().length === 1 ? "folder" : "folders"} available
                 </p>
               </div>
-              <div class="max-h-[400px] overflow-y-auto">
+              <div class="panel-list">
                 <For each={folders()}>
                   {(folder, index) => (
-                    <div
-                      data-folder-index={index()}
-                      class="group relative border-b border-gray-100 dark:border-gray-700 last:border-b-0"
-                    >
+                    <div class="panel-list-item">
                       <div class="flex items-center">
                         <button
-                          class="flex-1 text-left px-4 py-3 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all focus:outline-none flex items-center justify-between gap-3"
+                          class="panel-list-item-content"
                           classList={{
-                            "bg-blue-100 dark:bg-blue-900/30 ring-2 ring-blue-500 ring-inset":
+                            "panel-list-item-highlight ring-2 ring-inset":
                               focusMode() === "recent" && selectedIndex() === index(),
                           }}
+                          style={{ "--tw-ring-color": "var(--accent-primary)" }}
                           onClick={() => handleFolderSelect(folder.path)}
                           onMouseEnter={() => {
                             setFocusMode("recent")
@@ -206,15 +204,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                         >
                           <div class="flex-1 min-w-0">
                             <div class="flex items-center gap-2 mb-1">
-                              <Folder class="w-4 h-4 text-gray-400 dark:text-gray-500 flex-shrink-0" />
-                              <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                              <Folder class="w-4 h-4 flex-shrink-0" style="color: var(--text-muted)" />
+                              <span class="text-sm font-medium truncate" style="color: var(--text-primary)">
                                 {folder.path.split("/").pop()}
                               </span>
                             </div>
-                            <div class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate pl-6">
+                            <div class="text-xs font-mono truncate pl-6" style="color: var(--text-muted)">
                               {getDisplayPath(folder.path)}
                             </div>
-                            <div class="text-xs text-gray-400 dark:text-gray-500 mt-1 pl-6">
+                            <div class="text-xs mt-1 pl-6" style="color: var(--text-muted)">
                               {formatRelativeTime(folder.lastAccessed)}
                             </div>
                           </div>
@@ -226,10 +224,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                         </button>
                         <button
                           onClick={(e) => handleRemove(folder.path, e)}
-                          class="opacity-0 group-hover:opacity-100 p-2.5 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all mr-2"
+                          class="opacity-0 group-hover:opacity-100 p-2.5 transition-all mr-2 hover:bg-red-100 dark:hover:bg-red-900/30"
                           title="Remove from recent"
                         >
-                          <Trash2 class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400" />
+                          <Trash2 class="w-3.5 h-3.5 transition-colors" style="color: var(--text-muted)" 
+                            classList={{ "hover:text-red-600": true, "dark:hover:text-red-400": true }} />
                         </button>
                       </div>
                     </div>
@@ -239,17 +238,21 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </div>
           </Show>
 
-          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-            <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-              <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Browse for Folder</h2>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Select any folder on your computer</p>
+          <div class="panel">
+            <div class="panel-header">
+              <h2 class="panel-title">Browse for Folder</h2>
+              <p class="panel-subtitle">Select any folder on your computer</p>
             </div>
 
-            <div class="p-4">
+            <div class="panel-body">
               <button
                 onClick={handleBrowse}
                 disabled={props.isLoading}
-                class="w-full px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-all font-medium flex items-center justify-between text-sm"
+                class="w-full px-4 py-2.5 rounded-lg transition-all font-medium flex items-center justify-between text-sm disabled:cursor-not-allowed"
+                classList={{
+                  "bg-blue-600 text-white hover:bg-blue-700": !props.isLoading,
+                  "bg-gray-300 dark:bg-gray-600 text-gray-500 cursor-not-allowed": props.isLoading
+                }}
                 onMouseEnter={() => setFocusMode("new")}
               >
                 <div class="flex items-center gap-2 flex-1 justify-center">
@@ -263,26 +266,26 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </div>
 
             {/* Advanced settings section */}
-            <div class="border-t border-gray-200 dark:border-gray-700">
+            <div class="panel-section">
               <button
                 onClick={() => setShowAdvanced(!showAdvanced())}
-                class="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                class="panel-section-header"
               >
                 <div class="flex items-center gap-2">
-                  <Settings class="w-4 h-4 text-gray-500 dark:text-gray-400" />
-                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Advanced Settings</span>
+                  <Settings class="w-4 h-4" style="color: var(--text-muted)" />
+                  <span class="text-sm font-medium" style="color: var(--text-secondary)">Advanced Settings</span>
                 </div>
                 {showAdvanced() ? (
-                  <ChevronUp class="w-4 h-4 text-gray-400" />
+                  <ChevronUp class="w-4 h-4" style="color: var(--text-muted)" />
                 ) : (
-                  <ChevronDown class="w-4 h-4 text-gray-400" />
+                  <ChevronDown class="w-4 h-4" style="color: var(--text-muted)" />
                 )}
               </button>
 
               <Show when={showAdvanced()}>
-                <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900/50 overflow-visible space-y-4">
+                <div class="panel-section-content">
                   <div>
-                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">OpenCode Binary</div>
+                    <div class="text-sm font-medium mb-2" style="color: var(--text-secondary)">OpenCode Binary</div>
                     <OpenCodeBinarySelector
                       selectedBinary={selectedBinary()}
                       onBinaryChange={handleBinaryChange}
@@ -299,8 +302,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
           </div>
         </div>
 
-        <div class="mt-6 px-4 py-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-          <div class="flex items-center justify-center flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400">
+        <div class="mt-6 panel panel-footer">
+          <div class="panel-footer-hints">
             <Show when={folders().length > 0}>
               <div class="flex items-center gap-1.5">
                 <kbd class="kbd">↑</kbd>
diff --git a/src/components/info-view.tsx b/src/components/info-view.tsx
index 3d995fbc..57a55af4 100644
--- a/src/components/info-view.tsx
+++ b/src/components/info-view.tsx
@@ -67,46 +67,46 @@ const InfoView: Component<InfoViewProps> = (props) => {
   const getLevelColor = (level: string) => {
     switch (level) {
       case "error":
-        return "text-red-600 dark:text-red-400"
+        return "log-level-error"
       case "warn":
-        return "text-yellow-600 dark:text-yellow-400"
+        return "log-level-warn"
       case "debug":
-        return "text-gray-500 dark:text-gray-500"
+        return "log-level-debug"
       default:
-        return "text-gray-900 dark:text-gray-100"
+        return "log-level-default"
     }
   }
 
   return (
-    <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+    <div class="log-container">
       <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-hidden">
         <div class="lg:w-80 flex-shrink-0 overflow-y-auto">
           <Show when={instance()}>{(inst) => <InstanceInfo instance={inst()} />}</Show>
         </div>
 
-        <div class="flex-1 flex flex-col min-h-0 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
-          <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-            <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Server Logs</h2>
+        <div class="panel flex-1 flex flex-col min-h-0 overflow-hidden">
+          <div class="log-header">
+            <h2 class="panel-title">Server Logs</h2>
           </div>
 
           <div
             ref={scrollRef}
             onScroll={handleScroll}
-            class="flex-1 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-900 font-mono text-xs leading-relaxed"
+            class="log-content"
           >
             <Show
               when={logs().length > 0}
               fallback={
-                <div class="text-gray-500 dark:text-gray-500 text-center py-8">Waiting for server output...</div>
+                <div class="log-empty-state">Waiting for server output...</div>
               }
             >
               <For each={logs()}>
                 {(entry) => (
-                  <div class="flex gap-3 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 px-2 -mx-2 rounded">
-                    <span class="text-gray-500 dark:text-gray-500 select-none shrink-0">
+                  <div class="log-entry">
+                    <span class="log-timestamp">
                       {formatTime(entry.timestamp)}
                     </span>
-                    <span class={`${getLevelColor(entry.level)} break-all`}>{entry.message}</span>
+                    <span class={`log-message ${getLevelColor(entry.level)}`}>{entry.message}</span>
                   </div>
                 )}
               </For>
@@ -116,7 +116,7 @@ const InfoView: Component<InfoViewProps> = (props) => {
           <Show when={!autoScroll()}>
             <button
               onClick={scrollToBottom}
-              class="absolute bottom-6 right-6 px-3 py-2 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 flex items-center gap-1 text-sm"
+              class="scroll-to-bottom"
             >
               <ChevronDown class="w-4 h-4" />
               Scroll to bottom
diff --git a/src/components/logs-view.tsx b/src/components/logs-view.tsx
index 795469de..86412ffa 100644
--- a/src/components/logs-view.tsx
+++ b/src/components/logs-view.tsx
@@ -66,34 +66,34 @@ const LogsView: Component<LogsViewProps> = (props) => {
   const getLevelColor = (level: string) => {
     switch (level) {
       case "error":
-        return "text-red-600 dark:text-red-400"
+        return "log-level-error"
       case "warn":
-        return "text-yellow-600 dark:text-yellow-400"
+        return "log-level-warn"
       case "debug":
-        return "text-gray-500 dark:text-gray-500"
+        return "log-level-debug"
       default:
-        return "text-gray-900 dark:text-gray-100"
+        return "log-level-default"
     }
   }
 
   return (
-    <div class="flex flex-col h-full bg-white dark:bg-gray-900">
-      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Server Logs</h3>
+    <div class="log-container">
+      <div class="log-header">
+        <h3 class="text-sm font-medium" style="color: var(--text-secondary)">Server Logs</h3>
       </div>
 
       <Show when={instance()?.environmentVariables && Object.keys(instance()?.environmentVariables!).length > 0}>
-        <div class="px-4 py-3 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-200 dark:border-blue-800">
-          <div class="text-xs font-medium text-blue-800 dark:text-blue-200 mb-2">
+        <div class="env-vars-container">
+          <div class="env-vars-title">
             Environment Variables ({Object.keys(instance()?.environmentVariables!).length})
           </div>
           <div class="space-y-1">
             <For each={Object.entries(instance()?.environmentVariables!)}>
               {([key, value]) => (
-                <div class="flex items-center gap-2 text-xs">
-                  <span class="font-mono font-medium text-blue-800 dark:text-blue-200 min-w-0 flex-1">{key}</span>
-                  <span class="text-blue-600 dark:text-blue-400">=</span>
-                  <span class="font-mono text-blue-700 dark:text-blue-300 min-w-0 flex-1" title={value}>
+                <div class="env-var-item">
+                  <span class="env-var-key">{key}</span>
+                  <span class="env-var-separator">=</span>
+                  <span class="env-var-value" title={value}>
                     {value}
                   </span>
                 </div>
@@ -106,17 +106,17 @@ const LogsView: Component<LogsViewProps> = (props) => {
       <div
         ref={scrollRef}
         onScroll={handleScroll}
-        class="flex-1 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-900 font-mono text-xs leading-relaxed"
+        class="log-content"
       >
         <Show
           when={logs().length > 0}
-          fallback={<div class="text-gray-500 dark:text-gray-500 text-center py-8">Waiting for server output...</div>}
+          fallback={<div class="log-empty-state">Waiting for server output...</div>}
         >
           <For each={logs()}>
             {(entry) => (
-              <div class="flex gap-3 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800 px-2 -mx-2 rounded">
-                <span class="text-gray-500 dark:text-gray-500 select-none shrink-0">{formatTime(entry.timestamp)}</span>
-                <span class={`${getLevelColor(entry.level)} break-all`}>{entry.message}</span>
+              <div class="log-entry">
+                <span class="log-timestamp">{formatTime(entry.timestamp)}</span>
+                <span class={`log-message ${getLevelColor(entry.level)}`}>{entry.message}</span>
               </div>
             )}
           </For>
@@ -126,7 +126,7 @@ const LogsView: Component<LogsViewProps> = (props) => {
       <Show when={!autoScroll()}>
         <button
           onClick={scrollToBottom}
-          class="absolute bottom-6 right-6 px-3 py-2 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 flex items-center gap-1 text-sm"
+          class="scroll-to-bottom"
         >
           <ChevronDown class="w-4 h-4" />
           Scroll to bottom
diff --git a/src/index.css b/src/index.css
index 59d0d79e..577396a4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -53,13 +53,7 @@ body {
 
 
 
-.session-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--surface-base);
-  color: inherit;
-}
+
 
 
 
diff --git a/src/styles/components.css b/src/styles/components.css
index 4caf8ead..db3ddc6e 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1123,4 +1123,226 @@
 
 .kbd-separator {
   @apply opacity-50;
+}
+
+/* Panel component utilities */
+.panel {
+  @apply rounded-lg shadow-sm border overflow-hidden;
+  background-color: var(--surface-base);
+  border-color: var(--border-base);
+  color: var(--text-primary);
+}
+
+.panel-header {
+  @apply px-4 py-3 border-b;
+  border-color: var(--border-base);
+  background-color: var(--surface-secondary);
+}
+
+.panel-title {
+  @apply text-base font-semibold;
+  color: var(--text-primary);
+}
+
+.panel-subtitle {
+  @apply text-xs mt-0.5;
+  color: var(--text-muted);
+}
+
+.panel-body {
+  @apply p-4;
+  background-color: var(--surface-base);
+}
+
+.panel-section {
+  @apply border-t;
+  border-color: var(--border-base);
+}
+
+.panel-section-header {
+  @apply px-4 py-3 flex items-center justify-between transition-colors cursor-pointer;
+  background-color: var(--surface-secondary);
+}
+
+.panel-section-header:hover {
+  background-color: var(--surface-hover);
+}
+
+.panel-section-content {
+  @apply px-4 py-3 border-t overflow-visible space-y-4;
+  border-color: var(--border-base);
+  background-color: var(--surface-secondary);
+}
+
+.panel-list {
+  @apply max-h-[400px] overflow-y-auto;
+}
+
+.panel-list-item {
+  @apply border-b last:border-b-0 transition-colors;
+  border-color: var(--border-base);
+}
+
+.panel-list-item:hover {
+  background-color: var(--surface-hover);
+}
+
+.panel-list-item-content {
+  @apply flex-1 text-left px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors;
+}
+
+.panel-list-item-content:hover {
+  background-color: var(--surface-hover);
+}
+
+.panel-list-item-highlight {
+  background-color: rgba(0, 102, 255, 0.1);
+}
+
+[data-theme="dark"] .panel-list-item-highlight {
+  background-color: rgba(0, 128, 255, 0.2);
+}
+
+.panel-empty-state {
+  @apply p-6 text-center;
+}
+
+.panel-empty-state-icon {
+  @apply text-gray-400 dark:text-gray-600 mb-2;
+  color: var(--text-muted);
+}
+
+.panel-empty-state-title {
+  @apply font-medium text-sm mb-1;
+  color: var(--text-secondary);
+}
+
+.panel-empty-state-description {
+  @apply text-xs;
+  color: var(--text-muted);
+}
+
+.panel-footer {
+  @apply px-4 py-3 border-t;
+  border-color: var(--border-base);
+  background-color: var(--surface-secondary);
+}
+
+.panel-footer-hints {
+  @apply flex items-center justify-center flex-wrap gap-3 text-xs;
+  color: var(--text-muted);
+}
+
+/* Log view specific utilities */
+.log-container {
+  @apply flex flex-col h-full;
+  background-color: var(--surface-base);
+}
+
+.log-header {
+  @apply flex items-center justify-between px-4 py-3 border-b;
+  border-color: var(--border-base);
+  background-color: var(--surface-secondary);
+}
+
+.log-content {
+  @apply flex-1 overflow-y-auto p-4 font-mono text-xs leading-relaxed;
+  background-color: var(--surface-secondary);
+  color: var(--text-primary);
+}
+
+.log-entry {
+  @apply flex gap-3 py-0.5 px-2 -mx-2 rounded transition-colors;
+}
+
+.log-entry:hover {
+  background-color: var(--surface-hover);
+}
+
+.log-timestamp {
+  @apply select-none shrink-0;
+  color: var(--text-muted);
+}
+
+.log-message {
+  @apply break-all;
+}
+
+.log-level-error {
+  color: var(--status-error);
+}
+
+.log-level-warn {
+  color: var(--status-warning);
+}
+
+.log-level-debug {
+  color: var(--text-muted);
+}
+
+.log-level-default {
+  color: var(--text-primary);
+}
+
+.log-empty-state {
+  @apply text-center py-8;
+  color: var(--text-muted);
+}
+
+/* Environment variables display */
+.env-vars-container {
+  @apply px-4 py-3 border-b;
+  background-color: rgba(0, 102, 255, 0.1);
+  border-color: rgba(0, 102, 255, 0.2);
+}
+
+[data-theme="dark"] .env-vars-container {
+  background-color: rgba(0, 128, 255, 0.2);
+  border-color: rgba(0, 128, 255, 0.3);
+}
+
+.env-vars-title {
+  @apply text-xs font-medium mb-2;
+  color: #0066ff;
+}
+
+[data-theme="dark"] .env-vars-title {
+  color: #0080ff;
+}
+
+.env-var-item {
+  @apply flex items-center gap-2 text-xs;
+}
+
+.env-var-key {
+  @apply font-mono font-medium min-w-0 flex-1;
+  color: #0066ff;
+}
+
+[data-theme="dark"] .env-var-key {
+  color: #0080ff;
+}
+
+.env-var-separator {
+  color: #0066ff;
+}
+
+[data-theme="dark"] .env-var-separator {
+  color: #0080ff;
+}
+
+.env-var-value {
+  @apply font-mono min-w-0 flex-1;
+  color: #0066ff;
+}
+
+[data-theme="dark"] .env-var-value {
+  color: #0080ff;
+}
+
+/* Session view utility */
+.session-view {
+  @apply flex flex-col h-full;
+  background-color: var(--surface-base);
+  color: inherit;
 }
\ No newline at end of file