feat: redesign Formatting page (formerly Enhancements) with improved UI/UX

moinulmoin · moinulmoin · commit e006317a25a6 · 2025-09-03T12:42:40.000+06:00
- Rename Enhancements to Formatting for better user understanding
- Modernize header with consistent styling across all pages
- Display active model next to AI Models heading
- Move AI Formatting toggle to header in card style
- Remove redundant Enhancement Mode label
- Clean up section headers by removing icons
- Update model card selection to use background only (no border)
- Replace X icon with 'Remove Key' button for clarity
- Improve setup guide with better styling
- Update default mode description to emphasize formatting
diff --git a/src/components/EnhancementModelCard.tsx b/src/components/EnhancementModelCard.tsx
@@ -1,5 +1,5 @@
 import { ask } from '@tauri-apps/plugin-dialog';
-import { Key, X } from 'lucide-react';
+import { Key, Trash2 } from 'lucide-react';
 import { Button } from './ui/button';
 import { Card } from './ui/card';
 
@@ -37,9 +37,9 @@ export function EnhancementModelCard({
   return (
     <Card
       className={`py-2 px-4 transition-all ${
-        hasApiKey ? 'cursor-pointer' : 'opacity-60'
+        hasApiKey ? 'cursor-pointer hover:border-border' : 'opacity-60'
       } ${
-        isSelected ? 'border-primary bg-primary/5' : ''
+        isSelected ? 'bg-primary/5' : ''
       }`}
       onClick={() => hasApiKey && onSelect()}
     >
@@ -66,10 +66,11 @@ export function EnhancementModelCard({
               }
             }}
             variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-muted-foreground hover:text-destructive"
+            size="sm"
+            className="text-muted-foreground hover:text-destructive"
           >
-            <X className="w-4 h-4" />
+            <Trash2 className="w-3.5 h-3.5" />
+            Remove Key
           </Button>
         ) : (
           <Button
diff --git a/src/components/EnhancementSettings.tsx b/src/components/EnhancementSettings.tsx
@@ -53,7 +53,6 @@ export function EnhancementSettings({ settings, onSettingsChange, disabled = fal
     <div className={`space-y-6 ${disabled ? 'opacity-50' : ''}`}>
       {/* Enhancement Mode */}
       <div className="space-y-3">
-        <Label className="text-sm font-medium">Enhancement Mode</Label>
         <div className="flex flex-wrap gap-2">
           {presets.map((preset) => {
             const Icon = preset.icon;
@@ -77,7 +76,7 @@ export function EnhancementSettings({ settings, onSettingsChange, disabled = fal
         
         {/* Mode description */}
         <p className="text-sm text-muted-foreground">
-          {settings.preset === "Default" && "Clean transcription with grammar, spelling, and punctuation fixes"}
+          {settings.preset === "Default" && "Format transcription with grammar, spelling, punctuation, and semantic corrections"}
           {settings.preset === "Prompts" && "Transform speech into clear, actionable AI prompts"}
           {settings.preset === "Email" && "Format as professional email with subject, greeting, and signature"}
           {settings.preset === "Commit" && "Create conventional commit message (feat, fix, docs, etc.)"}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -32,7 +32,7 @@ const mainSections = [
   { id: "recordings", label: "History", icon: Clock },
   { id: "general", label: "Settings", icon: Settings2 },
   { id: "models", label: "Models", icon: Cpu },
-  { id: "enhancements", label: "Enhancements", icon: Sparkles },
+  { id: "formatting", label: "Formatting", icon: Sparkles },
   { id: "account", label: "Account", icon: Key },
 ];
 
diff --git a/src/components/sections/EnhancementsSection.tsx b/src/components/sections/EnhancementsSection.tsx
@@ -3,6 +3,7 @@ import { EnhancementModelCard } from "@/components/EnhancementModelCard";
 import { EnhancementSettings } from "@/components/EnhancementSettings";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 import type { EnhancementOptions } from "@/types/ai";
 import { fromBackendOptions, toBackendOptions } from "@/types/ai";
 import { hasApiKey, removeApiKey, saveApiKey, getApiKey } from "@/utils/keyring";
@@ -11,6 +12,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { useEffect, useState, useCallback } from "react";
 import { toast } from "sonner";
+import { Sparkles, Info, Wand2 } from "lucide-react";
 
 interface AIModel {
   id: string;
@@ -252,7 +254,7 @@ export function EnhancementsSection() {
       });
 
       setAISettings(prev => ({ ...prev, enabled }));
-      toast.success(enabled ? "AI enhancement enabled" : "AI enhancement disabled");
+      toast.success(enabled ? "AI formatting enabled" : "AI formatting disabled");
     } catch (error) {
       toast.error(`Failed to update settings: ${error}`);
     }
@@ -331,40 +333,69 @@ export function EnhancementsSection() {
   const hasAnyApiKey = Object.values(providerApiKeys).some(v => v);
   const selectedModelProvider = models.find(m => m.id === aiSettings.model)?.provider;
   const hasSelectedModel = Boolean(aiSettings.model && selectedModelProvider && providerApiKeys[selectedModelProvider]);
+  const selectedModelName = models.find(m => m.id === aiSettings.model)?.name;
 
   return (
-    <div className="h-full flex flex-col p-6">
-      <div className="flex-shrink-0 space-y-4 mb-4">
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-border/40">
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold">AI Enhancement</h2>
-          <Switch
-            id="ai-enhancement"
-            checked={aiSettings.enabled}
-            onCheckedChange={handleToggleEnabled}
-            disabled={!hasAnyApiKey || !hasSelectedModel}
-          />
+          <div>
+            <h1 className="text-2xl font-semibold">Formatting</h1>
+            <p className="text-sm text-muted-foreground mt-1">
+              AI-powered text formatting and enhancement
+            </p>
+          </div>
+          <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-card border border-border/50">
+            <Label htmlFor="ai-formatting" className="text-sm font-medium cursor-pointer">
+              AI Formatting
+            </Label>
+            <Switch
+              id="ai-formatting"
+              checked={aiSettings.enabled}
+              onCheckedChange={handleToggleEnabled}
+              disabled={!hasAnyApiKey || !hasSelectedModel}
+            />
+          </div>
         </div>
       </div>
 
-      <ScrollArea className="flex-1 min-h-0">
-        <div className="space-y-4">
-          {/* Models */}
-          <div className="space-y-3">
-            {models.map((model) => (
-              <EnhancementModelCard
-                key={model.id}
-                model={model}
-                hasApiKey={providerApiKeys[model.provider] || false}
-                isSelected={aiSettings.model === model.id && providerApiKeys[model.provider]}
-                onSetupApiKey={() => handleSetupApiKey(model.provider)}
-                onSelect={() => handleModelSelect(model.id, model.provider)}
-                onRemoveApiKey={() => handleRemoveApiKey(model.provider)}
-              />
-            ))}
+      <ScrollArea className="flex-1">
+        <div className="p-6 space-y-6">
+          {/* AI Models Section */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <h2 className="text-base font-semibold">AI Models</h2>
+              <div className="h-px bg-border/50 flex-1" />
+              {selectedModelName && (
+                <span className="text-sm text-muted-foreground">
+                  Active: <span className="text-amber-600 dark:text-amber-500">{selectedModelName}</span>
+                </span>
+              )}
+            </div>
+            
+            <div className="grid gap-3">
+              {models.map((model) => (
+                <EnhancementModelCard
+                  key={model.id}
+                  model={model}
+                  hasApiKey={providerApiKeys[model.provider] || false}
+                  isSelected={aiSettings.model === model.id && providerApiKeys[model.provider]}
+                  onSetupApiKey={() => handleSetupApiKey(model.provider)}
+                  onSelect={() => handleModelSelect(model.id, model.provider)}
+                  onRemoveApiKey={() => handleRemoveApiKey(model.provider)}
+                />
+              ))}
+            </div>
           </div>
 
-          {/* Enhancement Settings - Always visible, disabled when AI is off */}
-          <div className="mt-4 pt-4">
+          {/* Formatting Options */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <h2 className="text-base font-semibold">Formatting Options</h2>
+              <div className="h-px bg-border/50 flex-1" />
+            </div>
+
             <div className={!aiSettings.enabled ? "opacity-50 pointer-events-none" : ""}>
               <EnhancementSettings
                 settings={enhancementOptions}
@@ -373,17 +404,27 @@ export function EnhancementsSection() {
             </div>
           </div>
 
-          {/* Simple setup guide when AI is disabled */}
+          {/* Setup Guide */}
           {!aiSettings.enabled && (
-            <div className="bg-muted/50 rounded-lg p-4 space-y-3 mt-4">
-              <h3 className="font-medium text-sm">Quick Setup Guide</h3>
-              <ol className="text-sm text-muted-foreground space-y-2 list-decimal list-inside">
-                <li>Click "Add Key" on a model above</li>
-                <li>Visit the provider's website to get your API key</li>
-                <li>Paste the API key and submit</li>
-                <li>Select the model you want to use</li>
-                <li>Toggle the switch above to enable AI enhancement</li>
-              </ol>
+            <div className="rounded-lg border border-border/50 bg-card p-4">
+              <div className="flex items-start gap-3">
+                <div className="p-1.5 rounded-md bg-amber-500/10">
+                  <Info className="h-4 w-4 text-amber-500" />
+                </div>
+                <div className="space-y-2 flex-1">
+                  <h3 className="font-medium text-sm">Quick Setup</h3>
+                  <ol className="text-sm text-muted-foreground space-y-1.5 list-decimal list-inside">
+                    <li>Click "Add Key" on a model above</li>
+                    <li>Get your API key from the provider's website</li>
+                    <li>Paste the API key and save</li>
+                    <li>Select the model you want to use</li>
+                    <li>Toggle AI Formatting on to enable</li>
+                  </ol>
+                  <p className="text-xs text-muted-foreground mt-3">
+                    AI formatting automatically improves your transcribed text with proper punctuation, capitalization, and style.
+                  </p>
+                </div>
+              </div>
             </div>
           )}
         </div>
diff --git a/src/components/tabs/EnhancementsTab.tsx b/src/components/tabs/EnhancementsTab.tsx
@@ -14,7 +14,7 @@ export function EnhancementsTab() {
         registerEvent("ai-enhancement-auth-error", (event) => {
           console.error("AI authentication error:", event.payload);
           toast.error(event.payload as string, {
-            description: "Please update your API key in the Enhancements section",
+            description: "Please update your API key in the Formatting section",
             action: {
               label: "Update API Key",
               onClick: () => {
@@ -29,7 +29,7 @@ export function EnhancementsTab() {
         });
 
         registerEvent("ai-enhancement-error", (event) => {
-          console.warn("AI enhancement error:", event.payload);
+          console.warn("AI formatting error:", event.payload);
           toast.warning(event.payload as string);
         });
       } catch (error) {
diff --git a/src/components/tabs/TabContainer.tsx b/src/components/tabs/TabContainer.tsx
@@ -57,7 +57,7 @@ export function TabContainer({ activeSection }: TabContainerProps) {
       case "advanced":
         return <AdvancedTab />;
 
-      case "enhancements":
+      case "formatting":
         return <EnhancementsTab />;
 
       case "account":
