jettypod 4.4.118 → 4.4.121

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

@@ -1,6 +1,9 @@
-'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 EnvVar {
   name: string;
@@ -41,22 +44,8 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
     setCurrentFile(filename);
     setErrorMessage(null);
     try {
-      // Persist selection
-      await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'select', file: filename }),
-      });
-      // Load vars from selected file
-      const res = await fetch(`/api/settings/env-vars?file=${encodeURIComponent(filename)}`);
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to load environment variables');
-        setEnvVars([]);
-        return;
-      }
-      const vars = await res.json();
-      setEnvVars(vars);
+      const vars = await dataBridge.getEnvVars(filename);
+      setEnvVars(vars.map(v => ({ name: v.key, value: v.value })));
     } catch {
       setErrorMessage('Failed to load environment variables');
       setEnvVars([]);
@@ -65,22 +54,16 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
   const refreshFiles = async () => {
     try {
-      const res = await fetch('/api/settings/env-vars?action=discover');
-      if (res.ok) {
-        const data = await res.json();
-        setEnvFiles(data.files || []);
-        // If selected file no longer exists, fall back
-        if (currentFile && !data.files.includes(currentFile)) {
-          const fallback = data.files[0] || null;
-          setCurrentFile(fallback);
-          if (fallback) {
-            const varsRes = await fetch(`/api/settings/env-vars?file=${encodeURIComponent(fallback)}`);
-            if (varsRes.ok) {
-              setEnvVars(await varsRes.json());
-            }
-          } else {
-            setEnvVars([]);
-          }
+      const files = await dataBridge.discoverEnvFiles();
+      setEnvFiles(files);
+      if (currentFile && !files.includes(currentFile)) {
+        const fallback = files[0] || null;
+        setCurrentFile(fallback);
+        if (fallback) {
+          const vars = await dataBridge.getEnvVars(fallback);
+          setEnvVars(vars.map(v => ({ name: v.key, value: v.value })));
+        } else {
+          setEnvVars([]);
         }
       }
     } catch {
@@ -91,16 +74,9 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
   const handleCreateEnvFile = async () => {
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'create', file: '.env' }),
-      });
-      if (!res.ok) {
-        setErrorMessage('Failed to create .env file');
-        return;
-      }
-      setEnvFiles(['.env']);
+      await invoke('db_create_env_file', { filename: '.env' });
+      const files = await dataBridge.discoverEnvFiles();
+      setEnvFiles(files);
       setCurrentFile('.env');
       setEnvVars([]);
       showSuccess('.env file created');
@@ -126,16 +102,7 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'add', name: formName, value: formValue, file: currentFile }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to add variable');
-        return;
-      }
+      await invoke('db_create_env_var', { file: currentFile, key: formName, value: formValue });
       setEnvVars([...envVars, { name: formName, value: formValue }]);
       setFormName('');
       setFormValue('');
@@ -150,16 +117,7 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
     if (!editingName) return;
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: editingName, value: formValue, file: currentFile }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to update variable');
-        return;
-      }
+      await invoke('db_update_env_var', { file: currentFile, key: editingName, value: formValue });
       setEnvVars(envVars.map(v => v.name === editingName ? { ...v, value: formValue } : v));
       setFormValue('');
       setEditingName(null);
@@ -173,16 +131,7 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
     if (!deletingName) return;
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: deletingName, file: currentFile }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to delete variable');
-        return;
-      }
+      await invoke('db_delete_env_var', { file: currentFile, key: deletingName });
       setEnvVars(envVars.filter(v => v.name !== deletingName));
       setDeletingName(null);
       showSuccess('Variable deleted successfully');
@@ -200,21 +149,18 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
   if (!hasFiles) {
     return (
       <section id="env-vars">
-        <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">
             Environment Variables
           </h2>
         </div>
         <div className="text-center py-8">
-          <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">
+          <p className="text-base text-zinc-500 dark:text-zinc-400 mb-6">
             No .env files found
           </p>
-          <button
-            onClick={handleCreateEnvFile}
-            className="px-4 py-2 text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
-          >
+          <Button onClick={handleCreateEnvFile} size="sm">
             Create .env file
-          </button>
+          </Button>
         </div>
       </section>
     );
@@ -222,28 +168,28 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
   return (
     <section id="env-vars">
-      <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">
           Environment Variables
         </h2>
-        <button
+        <Button
           onClick={() => { setIsAdding(true); setFormName(''); setFormValue(''); setErrorMessage(null); }}
-          className="px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
+          size="sm"
         >
           Add Variable
-        </button>
+        </Button>
       </div>
 
       {/* File Selector */}
       {envFiles.length > 0 && (
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
+        <div className="mb-6">
+          <label className="block text-base font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">
             File
           </label>
           <select
             value={currentFile || ''}
             onChange={(e) => handleFileChange(e.target.value)}
-            className="w-full 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 text-sm"
+            className="w-full px-4 py-3 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 text-base"
           >
             {envFiles.map((file) => (
               <option key={file} value={file}>
@@ -255,58 +201,52 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
       )}
 
       {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-6 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>
       )}
 
       {errorMessage && (
-        <div className="mb-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-lg text-sm">
+        <div className="mb-6 px-6 py-3 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-lg text-base">
           {errorMessage}
         </div>
       )}
 
       {/* Add Form */}
       {isAdding && (
-        <div className="mb-4 p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
-          <div className="space-y-3">
+        <div className="mb-6 p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
+          <div className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
+              <label className="block text-base font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">
                 Variable Name
               </label>
-              <input
+              <Input
                 type="text"
                 value={formName}
                 onChange={(e) => { setFormName(e.target.value); setErrorMessage(null); }}
-                className="w-full 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"
+                size="sm"
                 placeholder="API_KEY"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
+              <label className="block text-base font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">
                 Value
               </label>
-              <input
+              <Input
                 type="text"
                 value={formValue}
                 onChange={(e) => { setFormValue(e.target.value); setErrorMessage(null); }}
-                className="w-full 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"
+                size="sm"
                 placeholder="your-secret-value"
               />
             </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleAdd}
-                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={handleAdd} size="sm">
                 Save
-              </button>
-              <button
-                onClick={() => { setIsAdding(false); setErrorMessage(null); }}
-                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>
+              <Button onClick={() => { setIsAdding(false); setErrorMessage(null); }} variant="ghost" size="sm">
                 Cancel
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -314,33 +254,27 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
       {/* Edit Form */}
       {editingName && (
-        <div className="mb-4 p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
-          <div className="space-y-3">
+        <div className="mb-6 p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
+          <div className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
+              <label className="block text-base font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">
                 Editing: {editingName}
               </label>
-              <input
+              <Input
                 type="text"
                 value={formValue}
                 onChange={(e) => setFormValue(e.target.value)}
-                className="w-full 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"
+                size="sm"
                 placeholder="new-value"
               />
             </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleEdit}
-                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={handleEdit} size="sm">
                 Save
-              </button>
-              <button
-                onClick={() => setEditingName(null)}
-                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>
+              <Button onClick={() => setEditingName(null)} variant="ghost" size="sm">
                 Cancel
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -348,30 +282,24 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
       {/* Delete Confirmation */}
       {deletingName && (
-        <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
-          <p className="text-sm text-red-700 dark:text-red-300 mb-3">
+        <div className="mb-6 p-6 bg-red-50 dark:bg-red-900/20 rounded-lg">
+          <p className="text-base text-red-700 dark:text-red-300 mb-3">
             Are you sure you want to delete &quot;{deletingName}&quot;?
           </p>
-          <div className="flex gap-2">
-            <button
-              onClick={handleDelete}
-              className="px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-500 text-white rounded transition-colors"
-            >
+          <div className="flex gap-3">
+            <Button onClick={handleDelete} variant="destructive" size="sm">
               Delete
-            </button>
-            <button
-              onClick={() => setDeletingName(null)}
-              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>
+            <Button onClick={() => setDeletingName(null)} variant="ghost" size="sm">
               Cancel
-            </button>
+            </Button>
           </div>
         </div>
       )}
 
       {/* Env Vars List */}
       {envVars.length === 0 ? (
-        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+        <p className="text-base text-zinc-500 dark:text-zinc-400">
           No environment variables in this file yet.
         </p>
       ) : (
@@ -379,30 +307,24 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
           {envVars.map((envVar) => (
             <div
               key={envVar.name}
-              className="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg"
+              className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg"
             >
               <div>
-                <span className="font-mono text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                <span className="font-mono text-base font-medium text-zinc-900 dark:text-zinc-100">
                   {envVar.name}
                 </span>
                 <span className="mx-2 text-zinc-400">=</span>
-                <span className="font-mono text-sm text-zinc-500 dark:text-zinc-400">
+                <span className="font-mono text-base text-zinc-500 dark:text-zinc-400">
                   {maskValue(envVar.value)}
                 </span>
               </div>
-              <div className="flex gap-2">
-                <button
-                  onClick={() => startEdit(envVar)}
-                  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"
-                >
+              <div className="flex gap-3">
+                <Button onClick={() => startEdit(envVar)} variant="ghost" size="sm">
                   Edit
-                </button>
-                <button
-                  onClick={() => setDeletingName(envVar.name)}
-                  className="px-2 py-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
-                >
+                </Button>
+                <Button onClick={() => setDeletingName(envVar.name)} variant="destructive" size="sm">
                   Delete
-                </button>
+                </Button>
               </div>
             </div>
           ))}