From 5e7411c2d44c8b66c27d32d6e0bf3202c7052cef Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sat, 16 May 2026 13:37:07 +0200
Subject: [PATCH] fix: remove shadcn deps from dashboard pages, restyle
 services & settings to editorial design

- Profile: replace shadcn Select with native select, remove unused shadcn imports (fixes runtime crash)
- Services: rewrite from shadcn Card/Badge to editorial-card design
- Settings: rewrite from shadcn Card/Button/Badge to editorial-card design

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/app/dashboard/profile/page.tsx  |  33 ++--
 frontend/src/app/dashboard/services/page.tsx | 150 ++++++++++---------
 frontend/src/app/dashboard/settings/page.tsx | 126 ++++++++++------
 3 files changed, 167 insertions(+), 142 deletions(-)

diff --git a/frontend/src/app/dashboard/profile/page.tsx b/frontend/src/app/dashboard/profile/page.tsx
index 6209b03..89c4dc8 100644
--- a/frontend/src/app/dashboard/profile/page.tsx
+++ b/frontend/src/app/dashboard/profile/page.tsx
@@ -12,16 +12,7 @@ import {
   BadgeCheck, ShieldAlert, Info, Globe, Settings, Palette, Trash2, Loader2,
   Activity, ChevronDown,
 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
-import {
-  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
-} from '@/components/ui/select';
-import { Label } from '@/components/ui/label';
 import { languages } from '@/lib/api';
 import { useTranslationStore } from '@/lib/store';
 import { cn } from '@/lib/utils';
@@ -534,18 +525,18 @@ export default function ProfilePage() {
               </div>
               <div className="flex gap-4 items-center">
                 <div className="relative">
-                  <Select value={defaultLanguage} onValueChange={setDefaultLanguage}>
-                    <SelectTrigger className="px-8 py-4 bg-brand-muted dark:bg-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest border border-black/5 dark:border-white/10 w-[200px]">
-                      <SelectValue placeholder={t('profile.prefs.selectLanguage')} />
-                    </SelectTrigger>
-                    <SelectContent className="max-h-[300px]">
-                      {languages.map((lang) => (
-                        <SelectItem key={lang.code} value={lang.code}>
-                          <span className="flex items-center gap-2"><span>{lang.flag}</span><span>{lang.name}</span></span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <select
+                    value={defaultLanguage}
+                    onChange={(e) => setDefaultLanguage(e.target.value)}
+                    className="appearance-none px-8 py-4 pr-12 bg-brand-muted dark:bg-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest border border-black/5 dark:border-white/10 w-[220px] outline-none focus:ring-2 focus:ring-brand-accent/20 cursor-pointer"
+                  >
+                    {languages.map((lang) => (
+                      <option key={lang.code} value={lang.code}>
+                        {lang.flag} {lang.name}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDown size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-brand-accent pointer-events-none" />
                 </div>
                 <button onClick={handleSavePrefs} className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl">
                   {t('profile.prefs.save')}
diff --git a/frontend/src/app/dashboard/services/page.tsx b/frontend/src/app/dashboard/services/page.tsx
index d7042d4..abd0e86 100644
--- a/frontend/src/app/dashboard/services/page.tsx
+++ b/frontend/src/app/dashboard/services/page.tsx
@@ -1,8 +1,6 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Zap, CheckCircle2, Lock, Loader2, Globe, Brain } from 'lucide-react';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
@@ -51,102 +49,106 @@ export default function TranslationServicesPage() {
   const llmProviders = providers.filter((p) => p.mode === "llm");
 
   return (
-    <div className="flex flex-col gap-6 p-6 lg:p-8 max-w-2xl">
-      <div>
-        <div className="flex items-center gap-2 mb-1">
-          <Zap className="h-5 w-5 text-primary" />
-          <h1 className="text-2xl font-bold text-foreground">{t('services.title')}</h1>
-        </div>
-        <p className="text-sm text-muted-foreground">
-          {t('services.subtitle')}
-        </p>
+    <div className="max-w-4xl mx-auto w-full p-6 lg:p-8">
+      {/* ── Editorial Header ───────────────────────────────────── */}
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit">{t('services.title')}</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
+          {t('services.title')}
+        </h1>
+        <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('services.subtitle')}</p>
       </div>
 
       {isLoading ? (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 className="size-4 animate-spin" />
-          <span>{t('services.loading')}</span>
+        <div className="flex items-center justify-center min-h-[30vh]">
+          <div className="text-center space-y-4">
+            <div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
+            <p className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">{t('services.loading')}</p>
+          </div>
         </div>
       ) : providers.length === 0 ? (
-        <Card>
-          <CardContent className="py-8 text-center text-sm text-muted-foreground">
-            {t('services.noProviders')}
-          </CardContent>
-        </Card>
+        <div className="editorial-card p-16 bg-white dark:bg-[#141414] border-none shadow-editorial text-center">
+          <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('services.noProviders')}</p>
+        </div>
       ) : (
-        <div className="space-y-6">
+        <div className="space-y-12">
+          {/* Classic providers */}
           {classicProviders.length > 0 && (
-            <div className="space-y-3">
-              <div className="flex items-center gap-2">
-                <Globe className="size-4 text-muted-foreground" />
-                <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+            <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+              <div className="flex items-center gap-4 mb-8 text-brand-accent">
+                <Globe size={20} />
+                <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
                   {t('services.classic')}
-                </h2>
+                </h3>
               </div>
-              <div className="space-y-2">
+              <div className="space-y-4">
                 {classicProviders.map((p) => (
-                  <Card key={p.id}>
-                    <CardContent className="flex items-center justify-between py-4 px-5">
-                      <div>
-                        <p className="font-medium text-foreground">{p.label}</p>
-                        <p className="text-xs text-muted-foreground">{p.description}</p>
-                      </div>
-                      <Badge variant="outline" className="border-emerald-500/50 text-emerald-600 gap-1">
-                        <CheckCircle2 className="size-3" />{t('services.available')}
-                      </Badge>
-                    </CardContent>
-                  </Card>
+                  <div
+                    key={p.id}
+                    className="flex items-center justify-between p-6 bg-brand-muted dark:bg-white/5 rounded-[24px] border border-black/5 dark:border-white/10 hover:-translate-y-1 transition-all"
+                  >
+                    <div>
+                      <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">{p.label}</p>
+                      <p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">{p.description}</p>
+                    </div>
+                    <span className="flex items-center gap-2 px-4 py-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full text-[9px] font-black uppercase tracking-widest">
+                      <CheckCircle2 size={12} /> {t('services.available')}
+                    </span>
+                  </div>
                 ))}
               </div>
-            </div>
+            </section>
           )}
 
+          {/* LLM providers */}
           {llmProviders.length > 0 && (
-            <div className="space-y-3">
-              <div className="flex items-center gap-2">
-                <Brain className="size-4 text-muted-foreground" />
-                <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+            <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+              <div className="flex items-center gap-4 mb-8 text-brand-accent">
+                <Brain size={20} />
+                <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
                   {t('services.llmPro')}
-                </h2>
+                </h3>
               </div>
-              <div className="space-y-2">
+              <div className="space-y-4">
                 {llmProviders.map((p) => (
-                  <Card key={p.id}>
-                    <CardContent className="flex items-center justify-between py-4 px-5">
-                      <div>
-                        <p className="font-medium text-foreground">{p.label}</p>
-                        <p className="text-xs text-muted-foreground">{p.description}</p>
-                        {p.model && (
-                          <p className="mt-1 text-[10px] font-mono text-muted-foreground/80">
-                            {t('services.model')}: {p.model}
-                          </p>
-                        )}
-                      </div>
-                      <Badge variant="outline" className="border-emerald-500/50 text-emerald-600 gap-1">
-                        <CheckCircle2 className="size-3" />{t('services.available')}
-                      </Badge>
-                    </CardContent>
-                  </Card>
+                  <div
+                    key={p.id}
+                    className="flex items-center justify-between p-6 bg-brand-muted dark:bg-white/5 rounded-[24px] border border-black/5 dark:border-white/10 hover:-translate-y-1 transition-all"
+                  >
+                    <div>
+                      <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">{p.label}</p>
+                      <p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">{p.description}</p>
+                      {p.model && (
+                        <p className="mt-2 text-[9px] font-mono text-brand-dark/20 dark:text-white/20 uppercase tracking-widest">
+                          {t('services.model')}: {p.model}
+                        </p>
+                      )}
+                    </div>
+                    <span className="flex items-center gap-2 px-4 py-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full text-[9px] font-black uppercase tracking-widest">
+                      <CheckCircle2 size={12} /> {t('services.available')}
+                    </span>
+                  </div>
                 ))}
               </div>
-            </div>
+            </section>
           )}
         </div>
       )}
 
-      <Card className="border-amber-200 dark:border-amber-500/20 bg-amber-50 dark:bg-amber-500/5">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-sm text-amber-800 dark:text-amber-400 flex items-center gap-2">
-            <Lock className="size-4" />
-            {t('services.adminOnly.title')}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <CardDescription className="text-amber-700 dark:text-amber-400/80 text-xs">
-            {t('services.adminOnly.desc')}
-          </CardDescription>
-        </CardContent>
-      </Card>
+      {/* Admin notice */}
+      <div className="editorial-card p-10 lg:p-12 bg-amber-50 dark:bg-amber-500/5 border border-amber-200 dark:border-amber-500/20 mt-12">
+        <div className="flex items-center gap-4 text-amber-600 dark:text-amber-400">
+          <Lock size={20} />
+          <div>
+            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-amber-800 dark:text-amber-400">
+              {t('services.adminOnly.title')}
+            </h3>
+            <p className="text-[10px] text-amber-600/60 dark:text-amber-400/60 font-bold uppercase tracking-widest mt-2">
+              {t('services.adminOnly.desc')}
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/app/dashboard/settings/page.tsx b/frontend/src/app/dashboard/settings/page.tsx
index bfe3c65..86398e4 100644
--- a/frontend/src/app/dashboard/settings/page.tsx
+++ b/frontend/src/app/dashboard/settings/page.tsx
@@ -1,9 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import {
   Settings, Trash2, Loader2, FileSpreadsheet, FileText, Presentation,
 } from 'lucide-react';
@@ -31,65 +28,100 @@ export default function GeneralSettingsPage() {
   };
 
   const formats = [
-    { icon: <FileSpreadsheet className="w-6 h-6 text-green-500" />, name: 'Excel', ext: '.xlsx, .xls', features: [t('settings.formats.formulas'), t('settings.formats.styles'), t('settings.formats.images')] },
-    { icon: <FileText className="w-6 h-6 text-blue-500" />, name: 'Word', ext: '.docx, .doc', features: [t('settings.formats.headers'), t('settings.formats.tables'), t('settings.formats.images')] },
-    { icon: <Presentation className="w-6 h-6 text-orange-500" />, name: 'PowerPoint', ext: '.pptx, .ppt', features: [t('settings.formats.slides'), t('settings.formats.notes'), t('settings.formats.images')] },
+    { icon: FileSpreadsheet, color: 'text-green-500', name: 'Excel', ext: '.xlsx, .xls', features: [t('settings.formats.formulas'), t('settings.formats.styles'), t('settings.formats.images')] },
+    { icon: FileText, color: 'text-blue-500', name: 'Word', ext: '.docx, .doc', features: [t('settings.formats.headers'), t('settings.formats.tables'), t('settings.formats.images')] },
+    { icon: Presentation, color: 'text-orange-500', name: 'PowerPoint', ext: '.pptx, .ppt', features: [t('settings.formats.slides'), t('settings.formats.notes'), t('settings.formats.images')] },
   ];
 
   return (
-    <div className="flex flex-col gap-6 p-6 lg:p-8 max-w-3xl">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">{t('settings.title')}</h1>
-        <p className="text-sm text-muted-foreground mt-1">{t('settings.subtitle')}</p>
+    <div className="max-w-4xl mx-auto w-full p-6 lg:p-8">
+      {/* ── Editorial Header ───────────────────────────────────── */}
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit">{t('settings.title')}</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
+          {t('settings.title')}
+        </h1>
+        <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('settings.subtitle')}</p>
       </div>
 
-      {/* Supported Formats */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded-lg bg-primary/10">
-              <Settings className="h-5 w-5 text-primary" />
+      <div className="space-y-12">
+        {/* Supported Formats */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+          <div className="flex items-center gap-4 mb-10 text-brand-accent">
+            <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent">
+              <Settings size={24} />
             </div>
             <div>
-              <CardTitle>{t('settings.formats.title')}</CardTitle>
-              <CardDescription>{t('settings.formats.subtitle')}</CardDescription>
+              <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+                {t('settings.formats.title')}
+              </h3>
+              <p className="text-[9px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">
+                {t('settings.formats.subtitle')}
+              </p>
             </div>
           </div>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-            {formats.map((f) => (
-              <div key={f.name} className="flex items-start gap-3 p-3 rounded-lg border border-border">
-                <div className="p-2 rounded-lg bg-muted">{f.icon}</div>
-                <div className="flex-1 min-w-0">
-                  <p className="font-semibold text-foreground text-sm">{f.name}</p>
-                  <p className="text-xs text-muted-foreground">{f.ext}</p>
-                  <div className="flex flex-wrap gap-1 mt-1.5">
+
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            {formats.map((f) => {
+              const Icon = f.icon;
+              return (
+                <div
+                  key={f.name}
+                  className="p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 hover:-translate-y-1 transition-all"
+                >
+                  <div className="w-12 h-12 bg-white dark:bg-white/10 rounded-2xl flex items-center justify-center shadow-sm mb-6">
+                    <Icon size={24} className={f.color} />
+                  </div>
+                  <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white mb-2">
+                    {f.name}
+                  </p>
+                  <p className="text-[9px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mb-4">
+                    {f.ext}
+                  </p>
+                  <div className="flex flex-wrap gap-2">
                     {f.features.map(ft => (
-                      <Badge key={ft} variant="outline" className="text-[10px] px-1.5 py-0">{ft}</Badge>
+                      <span
+                        key={ft}
+                        className="px-3 py-1 bg-white dark:bg-white/10 rounded-full text-[8px] font-black uppercase tracking-widest text-brand-dark/40 dark:text-white/40 border border-black/5 dark:border-white/10"
+                      >
+                        {ft}
+                      </span>
                     ))}
                   </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
-        </CardContent>
-      </Card>
+        </section>
 
-      {/* Danger zone */}
-      <Card className="border-border/60">
-        <CardHeader>
-          <CardTitle className="text-base flex items-center gap-2">
-            <Trash2 className="w-4 h-4 text-muted-foreground" /> {t('settings.cache.title')}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="flex items-center justify-between gap-4">
-          <p className="text-sm text-muted-foreground">{t('settings.cache.desc')}</p>
-          <Button onClick={handleClearCache} disabled={isClearing} variant="outline" size="sm" className="shrink-0">
-            {isClearing ? <><Loader2 className="me-1.5 h-3.5 w-3.5 animate-spin" />{t('settings.cache.clearing')}</> : <><Trash2 className="me-1.5 h-3.5 w-3.5" />{t('settings.cache.clear')}</>}
-          </Button>
-        </CardContent>
-      </Card>
+        {/* Cache */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
+          <div className="flex items-center gap-6">
+            <div className="w-14 h-14 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent shrink-0">
+              <Trash2 size={28} />
+            </div>
+            <div>
+              <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
+                {t('settings.cache.title')}
+              </h3>
+              <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
+                {t('settings.cache.desc')}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleClearCache}
+            disabled={isClearing}
+            className="px-8 py-3 bg-brand-muted dark:bg-white/10 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all disabled:opacity-50 shrink-0"
+          >
+            {isClearing ? (
+              <><Loader2 className="me-1.5 h-3.5 w-3.5 animate-spin inline" />{t('settings.cache.clearing')}</>
+            ) : (
+              <><Trash2 className="me-1.5 h-3.5 w-3.5 inline" />{t('settings.cache.clear')}</>
+            )}
+          </button>
+        </section>
+      </div>
     </div>
   );
 }