sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove shadcn deps from dashboard pages, restyle services & settings to editorial design
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m29s
Details

Browse Source 
- 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>
This commit is contained in:
sepehr
2026-05-16 13:37:07 +02:00
parent 3938adf10c
commit 5e7411c2d4
3 changed files with 167 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/app/dashboard/profile/page.tsx
View File

@@ -12,16 +12,7 @@ import {
BadgeCheck, ShieldAlert, Info, Globe, Settings, Palette, Trash2, Loader2, BadgeCheck, ShieldAlert, Info, Globe, Settings, Palette, Trash2, Loader2,
Activity, ChevronDown, Activity, ChevronDown,
} from 'lucide-react'; } 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 { 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 { languages } from '@/lib/api';
import { useTranslationStore } from '@/lib/store'; import { useTranslationStore } from '@/lib/store';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@@ -534,18 +525,18 @@ export default function ProfilePage() {
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="relative"> <div className="relative">
<Select value={defaultLanguage} onValueChange={setDefaultLanguage}> <select
<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]"> value={defaultLanguage}
<SelectValue placeholder={t('profile.prefs.selectLanguage')} /> onChange={(e) => setDefaultLanguage(e.target.value)}
</SelectTrigger> 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"
<SelectContent className="max-h-[300px]"> >
{languages.map((lang) => ( {languages.map((lang) => (
<SelectItem key={lang.code} value={lang.code}> <option key={lang.code} value={lang.code}>
<span className="flex items-center gap-2"><span>{lang.flag}</span><span>{lang.name}</span></span> {lang.flag} {lang.name}
</SelectItem> </option>
))} ))}
</SelectContent> </select>
</Select> <ChevronDown size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-brand-accent pointer-events-none" />
</div> </div>
<button onClick={handleSavePrefs} className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl"> <button onClick={handleSavePrefs} className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl">
{t('profile.prefs.save')} {t('profile.prefs.save')}

150
frontend/src/app/dashboard/services/page.tsx
View File

@@ -1,8 +1,6 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; 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 { Zap, CheckCircle2, Lock, Loader2, Globe, Brain } from 'lucide-react';
import { API_BASE } from '@/lib/config'; import { API_BASE } from '@/lib/config';
import { useI18n } from '@/lib/i18n'; import { useI18n } from '@/lib/i18n';
@@ -51,102 +49,106 @@ export default function TranslationServicesPage() {
const llmProviders = providers.filter((p) => p.mode === "llm"); const llmProviders = providers.filter((p) => p.mode === "llm");
return ( return (
<div className="flex flex-col gap-6 p-6 lg:p-8 max-w-2xl"> <div className="max-w-4xl mx-auto w-full p-6 lg:p-8">
<div> {/* ── Editorial Header ───────────────────────────────────── */}
<div className="flex items-center gap-2 mb-1"> <div className="mb-12">
<Zap className="h-5 w-5 text-primary" /> <span className="accent-pill mb-4 block w-fit">{t('services.title')}</span>
<h1 className="text-2xl font-bold text-foreground">{t('services.title')}</h1> <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
</div> {t('services.title')}
<p className="text-sm text-muted-foreground"> </h1>
{t('services.subtitle')} <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('services.subtitle')}</p>
</p>
</div> </div>
{isLoading ? ( {isLoading ? (
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center justify-center min-h-[30vh]">
<Loader2 className="size-4 animate-spin" /> <div className="text-center space-y-4">
<span>{t('services.loading')}</span> <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> </div>
) : providers.length === 0 ? ( ) : providers.length === 0 ? (
<Card> <div className="editorial-card p-16 bg-white dark:bg-[#141414] border-none shadow-editorial text-center">
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('services.noProviders')}</p>
{t('services.noProviders')} </div>
</CardContent>
</Card>
) : ( ) : (
<div className="space-y-6"> <div className="space-y-12">
{/* Classic providers */}
{classicProviders.length > 0 && ( {classicProviders.length > 0 && (
<div className="space-y-3"> <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
<div className="flex items-center gap-2"> <div className="flex items-center gap-4 mb-8 text-brand-accent">
<Globe className="size-4 text-muted-foreground" /> <Globe size={20} />
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide"> <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
{t('services.classic')} {t('services.classic')}
</h2> </h3>
</div> </div>
<div className="space-y-2"> <div className="space-y-4">
{classicProviders.map((p) => ( {classicProviders.map((p) => (
<Card key={p.id}> <div
<CardContent className="flex items-center justify-between py-4 px-5"> key={p.id}
<div> 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"
<p className="font-medium text-foreground">{p.label}</p> >
<p className="text-xs text-muted-foreground">{p.description}</p> <div>
</div> <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">{p.label}</p>
<Badge variant="outline" className="border-emerald-500/50 text-emerald-600 gap-1"> <p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">{p.description}</p>
<CheckCircle2 className="size-3" />{t('services.available')} </div>
</Badge> <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">
</CardContent> <CheckCircle2 size={12} /> {t('services.available')}
</Card> </span>
</div>
))} ))}
</div> </div>
</div> </section>
)} )}
{/* LLM providers */}
{llmProviders.length > 0 && ( {llmProviders.length > 0 && (
<div className="space-y-3"> <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
<div className="flex items-center gap-2"> <div className="flex items-center gap-4 mb-8 text-brand-accent">
<Brain className="size-4 text-muted-foreground" /> <Brain size={20} />
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide"> <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
{t('services.llmPro')} {t('services.llmPro')}
</h2> </h3>
</div> </div>
<div className="space-y-2"> <div className="space-y-4">
{llmProviders.map((p) => ( {llmProviders.map((p) => (
<Card key={p.id}> <div
<CardContent className="flex items-center justify-between py-4 px-5"> key={p.id}
<div> 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"
<p className="font-medium text-foreground">{p.label}</p> >
<p className="text-xs text-muted-foreground">{p.description}</p> <div>
{p.model && ( <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">{p.label}</p>
<p className="mt-1 text-[10px] font-mono text-muted-foreground/80"> <p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">{p.description}</p>
{t('services.model')}: {p.model} {p.model && (
</p> <p className="mt-2 text-[9px] font-mono text-brand-dark/20 dark:text-white/20 uppercase tracking-widest">
)} {t('services.model')}: {p.model}
</div> </p>
<Badge variant="outline" className="border-emerald-500/50 text-emerald-600 gap-1"> )}
<CheckCircle2 className="size-3" />{t('services.available')} </div>
</Badge> <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">
</CardContent> <CheckCircle2 size={12} /> {t('services.available')}
</Card> </span>
</div>
))} ))}
</div> </div>
</div> </section>
)} )}
</div> </div>
)} )}
<Card className="border-amber-200 dark:border-amber-500/20 bg-amber-50 dark:bg-amber-500/5"> {/* Admin notice */}
<CardHeader className="pb-2"> <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">
<CardTitle className="text-sm text-amber-800 dark:text-amber-400 flex items-center gap-2"> <div className="flex items-center gap-4 text-amber-600 dark:text-amber-400">
<Lock className="size-4" /> <Lock size={20} />
{t('services.adminOnly.title')} <div>
</CardTitle> <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-amber-800 dark:text-amber-400">
</CardHeader> {t('services.adminOnly.title')}
<CardContent> </h3>
<CardDescription className="text-amber-700 dark:text-amber-400/80 text-xs"> <p className="text-[10px] text-amber-600/60 dark:text-amber-400/60 font-bold uppercase tracking-widest mt-2">
{t('services.adminOnly.desc')} {t('services.adminOnly.desc')}
</CardDescription> </p>
</CardContent> </div>
</Card> </div>
</div>
</div> </div>
); );
} }

126
frontend/src/app/dashboard/settings/page.tsx
View File

@@ -1,9 +1,6 @@
'use client'; 'use client';
import { useState } from 'react'; 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 { import {
Settings, Trash2, Loader2, FileSpreadsheet, FileText, Presentation, Settings, Trash2, Loader2, FileSpreadsheet, FileText, Presentation,
} from 'lucide-react'; } from 'lucide-react';
@@ -31,65 +28,100 @@ export default function GeneralSettingsPage() {
}; };
const formats = [ 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: 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 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: 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 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: Presentation, color: 'text-orange-500', name: 'PowerPoint', ext: '.pptx, .ppt', features: [t('settings.formats.slides'), t('settings.formats.notes'), t('settings.formats.images')] },
]; ];
return ( return (
<div className="flex flex-col gap-6 p-6 lg:p-8 max-w-3xl"> <div className="max-w-4xl mx-auto w-full p-6 lg:p-8">
<div> {/* ── Editorial Header ───────────────────────────────────── */}
<h1 className="text-2xl font-bold text-foreground">{t('settings.title')}</h1> <div className="mb-12">
<p className="text-sm text-muted-foreground mt-1">{t('settings.subtitle')}</p> <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> </div>
{/* Supported Formats */} <div className="space-y-12">
<Card> {/* Supported Formats */}
<CardHeader> <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
<div className="flex items-center gap-3"> <div className="flex items-center gap-4 mb-10 text-brand-accent">
<div className="p-2 rounded-lg bg-primary/10"> <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent">
<Settings className="h-5 w-5 text-primary" /> <Settings size={24} />
</div> </div>
<div> <div>
<CardTitle>{t('settings.formats.title')}</CardTitle> <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
<CardDescription>{t('settings.formats.subtitle')}</CardDescription> {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>
</div> </div>
</CardHeader>
<CardContent> <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4"> {formats.map((f) => {
{formats.map((f) => ( const Icon = f.icon;
<div key={f.name} className="flex items-start gap-3 p-3 rounded-lg border border-border"> return (
<div className="p-2 rounded-lg bg-muted">{f.icon}</div> <div
<div className="flex-1 min-w-0"> key={f.name}
<p className="font-semibold text-foreground text-sm">{f.name}</p> 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"
<p className="text-xs text-muted-foreground">{f.ext}</p> >
<div className="flex flex-wrap gap-1 mt-1.5"> <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 => ( {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>
</div> );
))} })}
</div> </div>
</CardContent> </section>
</Card>
{/* Danger zone */} {/* Cache */}
<Card className="border-border/60"> <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">
<CardHeader> <div className="flex items-center gap-6">
<CardTitle className="text-base flex items-center gap-2"> <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 className="w-4 h-4 text-muted-foreground" /> {t('settings.cache.title')} <Trash2 size={28} />
</CardTitle> </div>
</CardHeader> <div>
<CardContent className="flex items-center justify-between gap-4"> <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
<p className="text-sm text-muted-foreground">{t('settings.cache.desc')}</p> {t('settings.cache.title')}
<Button onClick={handleClearCache} disabled={isClearing} variant="outline" size="sm" className="shrink-0"> </h3>
{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')}</>} <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
</Button> {t('settings.cache.desc')}
</CardContent> </p>
</Card> </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> </div>
); );
} }