jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/settings/GeneralSection.tsx

@@ -1,22 +1,37 @@
-'use client';
 
 import { useState } from 'react';
+import { invoke } from '@/lib/tauri';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface MainBranchInfo {
   branch: string;
   source: 'configured' | 'detected';
 }
 
+const CLAUDE_MODELS = [
+  { id: 'default', label: 'Default', description: 'Opus 4.6', value: null },
+  { id: 'sonnet', label: 'Sonnet', description: 'Sonnet 4.6', value: 'sonnet' },
+  { id: 'haiku', label: 'Haiku', description: 'Haiku 4.5', value: 'haiku' },
+];
+
 interface GeneralSectionProps {
   initialMainBranch: MainBranchInfo;
+  initialClaudeModel: string | null;
 }
 
-export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
+export function GeneralSection({ initialMainBranch, initialClaudeModel }: GeneralSectionProps) {
   const [mainBranch, setMainBranch] = useState(initialMainBranch);
   const [inputValue, setInputValue] = useState(initialMainBranch.branch);
   const [isEditing, setIsEditing] = useState(false);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
+  // Claude model state
+  const [claudeModel, setClaudeModel] = useState<string | null>(initialClaudeModel);
+  const [selectedModel, setSelectedModel] = useState<string | null>(initialClaudeModel);
+  const [isEditingModel, setIsEditingModel] = useState(false);
+
   const showSuccess = (message: string) => {
     setSuccessMessage(message);
     setTimeout(() => setSuccessMessage(null), 3000);
@@ -26,19 +41,16 @@ export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
     const trimmed = inputValue.trim();
     const value = trimmed === '' ? null : trimmed;
 
-    const res = await fetch('/api/settings/general', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mainBranch: value }),
-    });
-
-    if (res.ok) {
-      const data = await res.json();
-      setMainBranch(data.mainBranch);
-      setInputValue(data.mainBranch.branch);
-      setIsEditing(false);
-      showSuccess(value ? 'Main branch updated' : 'Reset to auto-detect');
+    if (value) {
+      await invoke('db_set_main_branch', { branch: value });
+    } else {
+      await invoke('db_reset_main_branch');
     }
+    const branch = await dataBridge.getMainBranch();
+    setMainBranch({ branch, source: value ? 'configured' : 'detected' });
+    setInputValue(branch);
+    setIsEditing(false);
+    showSuccess(value ? 'Main branch updated' : 'Reset to auto-detect');
   };
 
   const handleCancel = () => {
@@ -47,96 +59,190 @@ export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
   };
 
   const handleReset = async () => {
-    const res = await fetch('/api/settings/general', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mainBranch: null }),
-    });
-
-    if (res.ok) {
-      const data = await res.json();
-      setMainBranch(data.mainBranch);
-      setInputValue(data.mainBranch.branch);
-      setIsEditing(false);
-      showSuccess('Reset to auto-detect');
+    await invoke('db_reset_main_branch');
+    const branch = await dataBridge.getMainBranch();
+    setMainBranch({ branch, source: 'detected' });
+    setInputValue(branch);
+    setIsEditing(false);
+    showSuccess('Reset to auto-detect');
+  };
+
+  // Claude model handlers
+  const handleModelSave = async () => {
+    if (selectedModel) {
+      await dataBridge.setClaudeModel(selectedModel);
+    } else {
+      await dataBridge.resetClaudeModel();
     }
+    setClaudeModel(selectedModel);
+    setIsEditingModel(false);
+    const modelLabel = CLAUDE_MODELS.find(m => m.value === selectedModel)?.label || 'Default';
+    showSuccess(`Model set to ${modelLabel}`);
+  };
+
+  const handleModelCancel = () => {
+    setSelectedModel(claudeModel);
+    setIsEditingModel(false);
+  };
+
+  const handleModelReset = async () => {
+    await dataBridge.resetClaudeModel();
+    setClaudeModel(null);
+    setSelectedModel(null);
+    setIsEditingModel(false);
+    showSuccess('Model reset to default');
   };
 
+  const currentModel = CLAUDE_MODELS.find(m => m.value === claudeModel) || CLAUDE_MODELS[0];
+
   return (
     <section id="general">
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between mb-6">
         <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
           General
         </h2>
       </div>
 
       {successMessage && (
-        <div className="mb-4 px-4 py-2 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-lg text-sm">
+        <div className="mb-4 px-6 py-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-lg text-base">
           {successMessage}
         </div>
       )}
 
       {/* Main Branch Setting */}
-      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
         <div className="flex items-center justify-between">
           <div>
-            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
+            <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
               Main Branch
             </label>
-            <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
+            <p className="text-base text-zinc-500 dark:text-zinc-400 mt-1">
               The branch used as the base for merges and worktrees.
             </p>
           </div>
           {!isEditing && (
-            <div className="flex items-center gap-2">
-              <span className="font-mono text-sm text-zinc-900 dark:text-zinc-100">
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-base text-zinc-900 dark:text-zinc-100">
                 {mainBranch.branch}
               </span>
-              <span className="px-1.5 py-0.5 text-xs rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400">
+              <span className="px-2 py-1 text-xs rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400">
                 {mainBranch.source}
               </span>
-              <button
+              <Button
                 onClick={() => setIsEditing(true)}
-                className="px-2 py-1 text-xs text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                variant="ghost"
+                size="sm"
               >
                 Edit
-              </button>
+              </Button>
             </div>
           )}
         </div>
 
         {isEditing && (
-          <div className="mt-3 space-y-3">
-            <div className="flex gap-2">
-              <input
+          <div className="mt-4 space-y-4">
+            <div className="flex gap-3">
+              <Input
                 type="text"
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}
-                className="flex-1 px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 font-mono text-sm"
+                size="sm"
+                className="flex-1 font-mono"
                 placeholder="main"
               />
             </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleSave}
-                className="px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
-              >
+            <div className="flex gap-3">
+              <Button onClick={handleSave} size="sm">
                 Save
-              </button>
+              </Button>
               {mainBranch.source === 'configured' && (
-                <button
-                  onClick={handleReset}
-                  className="px-3 py-1.5 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
-                >
+                <Button onClick={handleReset} variant="ghost" size="sm">
                   Reset to Auto-detect
-                </button>
+                </Button>
               )}
-              <button
-                onClick={handleCancel}
-                className="px-3 py-1.5 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+              <Button onClick={handleCancel} variant="ghost" size="sm">
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Claude Code Model Setting */}
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg mt-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
+              Claude Code Model
+            </label>
+            <p className="text-base text-zinc-500 dark:text-zinc-400 mt-1">
+              The model used for Claude Code sessions in this project.
+            </p>
+          </div>
+          {!isEditingModel && (
+            <div className="flex items-center gap-3">
+              <span className="text-base text-zinc-900 dark:text-zinc-100">
+                {currentModel.label}
+              </span>
+              <span className="px-2 py-1 text-xs rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400">
+                {claudeModel ? 'configured' : 'default'}
+              </span>
+              <Button
+                onClick={() => {
+                  setSelectedModel(claudeModel);
+                  setIsEditingModel(true);
+                }}
+                variant="ghost"
+                size="sm"
               >
+                Edit
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {isEditingModel && (
+          <div className="mt-4 space-y-4">
+            <div className="space-y-2">
+              {CLAUDE_MODELS.map((model) => (
+                <label
+                  key={model.id}
+                  className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors duration-200 ${
+                    selectedModel === model.value
+                      ? 'bg-zinc-200 dark:bg-zinc-700'
+                      : 'hover:bg-zinc-100 dark:hover:bg-zinc-700/50'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="claude-model"
+                    checked={selectedModel === model.value}
+                    onChange={() => setSelectedModel(model.value)}
+                    className="w-4 h-4 accent-[#819D9F]"
+                  />
+                  <div>
+                    <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">
+                      {model.label}
+                    </span>
+                    <span className="text-sm text-zinc-500 dark:text-zinc-400 ml-2">
+                      {model.description}
+                    </span>
+                  </div>
+                </label>
+              ))}
+            </div>
+            <div className="flex gap-3">
+              <Button onClick={handleModelSave} size="sm">
+                Save
+              </Button>
+              {claudeModel && (
+                <Button onClick={handleModelReset} variant="ghost" size="sm">
+                  Reset to Default
+                </Button>
+              )}
+              <Button onClick={handleModelCancel} variant="ghost" size="sm">
                 Cancel
-              </button>
+              </Button>
             </div>
           </div>
         )}