jettypod 4.4.116 → 4.4.120

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
 
 interface EnvVar {
   name: string;
@@ -200,21 +202,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 +221,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 +254,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 +307,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 +335,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 +360,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>
           ))}

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
 
 interface MainBranchInfo {
   branch: string;
@@ -64,79 +66,72 @@ export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
 
   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>
+              </Button>
             </div>
           </div>
         )}

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

@@ -12,17 +12,17 @@ export function SettingsLayout({ tabs }: { tabs: SettingsTab[] }) {
   const [activeTab, setActiveTab] = useState(tabs[0]?.id || '');
 
   return (
-    <div className="flex gap-6">
+    <div className="flex gap-8">
       <nav className="w-48 flex-shrink-0">
-        <ul className="space-y-1">
+        <ul className="space-y-1.5">
           {tabs.map((tab) => (
             <li key={tab.id}>
               <button
                 onClick={() => setActiveTab(tab.id)}
-                className={`block w-full text-left px-3 py-2 text-sm font-medium rounded-lg ${
+                className={`block w-full text-left px-4 py-3 text-base font-medium rounded-lg ${
                   activeTab === tab.id
                     ? 'text-zinc-900 dark:text-zinc-100 bg-zinc-100 dark:bg-zinc-800'
-                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out'
                 }`}
               >
                 {tab.label}

package/apps/dashboard/components/ui/Button.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const primaryStyle: React.CSSProperties = {
+  backgroundColor: '#819D9F',
+  color: '#ffffff',
+  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(129, 157, 159, 0.2)',
+};
+
+const accentStyle: React.CSSProperties = {
+  backgroundColor: '#e57a44',
+  color: '#ffffff',
+  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(229, 122, 68, 0.2)',
+};
+
+const secondaryStyle: React.CSSProperties = {
+  border: '2px solid #18181b',
+};
+
+const destructiveStyle: React.CSSProperties = {
+  border: '2px solid #dc2626',
+};
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center font-medium transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-40 disabled:grayscale disabled:pointer-events-none cursor-pointer',
+  {
+    variants: {
+      variant: {
+        primary: 'rounded-xl text-white hover:brightness-105 active:scale-[0.98]',
+        secondary:
+          'rounded-xl text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 active:scale-[0.98]',
+        ghost:
+          'rounded-xl text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 active:scale-[0.98]',
+        destructive:
+          'rounded-xl text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950 active:scale-[0.98]',
+        accent:
+          'rounded-xl text-white hover:brightness-105 active:scale-[0.98]',
+        menu:
+          'w-full text-left rounded-lg text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700',
+      },
+      size: {
+        xs: 'px-2.5 py-0.5 text-xs',
+        sm: 'px-4 py-2 text-sm',
+        default: 'px-5 py-3 text-base',
+        lg: 'py-4 px-8 text-base',
+        icon: 'p-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+    },
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, fullWidth, loading, style, children, ...props }, ref) => {
+    const isPrimary = variant === 'primary' || variant === undefined;
+    const isAccent = variant === 'accent';
+    const isSecondary = variant === 'secondary';
+    const isDestructive = variant === 'destructive';
+    const inlineStyle = isPrimary
+      ? primaryStyle
+      : isAccent
+        ? accentStyle
+        : isSecondary
+          ? secondaryStyle
+          : isDestructive
+            ? destructiveStyle
+            : undefined;
+    return (
+      <button
+        className={cn(
+          buttonVariants({ variant, size }),
+          fullWidth && 'w-full',
+          className
+        )}
+        style={inlineStyle ? { ...inlineStyle, ...style } : style}
+        disabled={loading || props.disabled}
+        ref={ref}
+        {...props}
+      >
+        {loading ? (
+          <span className="flex items-center gap-2">
+            <span className="inline-block w-4 h-4 rounded-full animate-spin" style={{ border: '2px solid currentColor', borderTopColor: 'transparent' }} />
+            {children}
+          </span>
+        ) : children}
+      </button>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+export type { ButtonProps };

package/apps/dashboard/components/ui/Input.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const baseStyle: React.CSSProperties = {
+  border: '2px solid #27272a',
+  borderRadius: '12px',
+};
+
+const focusStyle: React.CSSProperties = {
+  border: '2px solid #819D9F',
+  boxShadow: '0 0 0 3px rgba(129, 157, 159, 0.15)',
+  outline: 'none',
+};
+
+const errorBaseStyle: React.CSSProperties = {
+  border: '2px solid #dc2626',
+  borderRadius: '12px',
+};
+
+const errorFocusStyle: React.CSSProperties = {
+  border: '2px solid #dc2626',
+  boxShadow: '0 0 0 3px rgba(220, 38, 38, 0.15)',
+  outline: 'none',
+};
+
+const inputVariants = cva(
+  'w-full bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 transition-[border-color,box-shadow] duration-200 ease-out focus:outline-none disabled:opacity-40 disabled:grayscale disabled:pointer-events-none',
+  {
+    variants: {
+      size: {
+        sm: 'px-4 py-2 text-sm',
+        default: 'px-6 py-5 text-base',
+        lg: 'px-8 py-6 text-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  error?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, size, error, style, onFocus, onBlur, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const inlineStyle = error
+      ? isFocused ? { ...errorFocusStyle, ...style } : { ...errorBaseStyle, ...style }
+      : isFocused ? { ...focusStyle, ...style } : { ...baseStyle, ...style };
+
+    return (
+      <input
+        ref={ref}
+        className={cn(inputVariants({ size }), className)}
+        style={inlineStyle}
+        onFocus={(e) => {
+          setIsFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          onBlur?.(e);
+        }}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input, inputVariants };
+export type { InputProps };