Import Tripoli Cloud frontend prototype
React/TypeScript/Vite/Tailwind prototype from the design session (login, dashboard, photos, backups, settings views with mocked API layer). Infra work (Rust services, Ansible, OpenTofu) follows in subsequent commits. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi
commit
5dbd3b96f6
73 changed files with 4789 additions and 0 deletions
20
app/src/components/auth/AuthBackground.tsx
Normal file
20
app/src/components/auth/AuthBackground.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { BACKGROUND_IMAGES } from '../../lib/backgrounds';
|
||||
import { useBackgroundCrossfade } from '../../hooks/useBackgroundCrossfade';
|
||||
|
||||
export function AuthBackground() {
|
||||
const activeIndex = useBackgroundCrossfade();
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 overflow-hidden bg-[#07080c]">
|
||||
{BACKGROUND_IMAGES.map((bg, i) => (
|
||||
<div
|
||||
key={bg}
|
||||
className="absolute inset-0 scale-105 bg-cover bg-center transition-opacity duration-[2000ms] ease-in-out"
|
||||
style={{ background: bg, opacity: i === activeIndex ? 1 : 0 }}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.92)_0%,rgba(6,7,11,0.62)_46%,rgba(6,7,11,0.28)_100%)]" />
|
||||
<div className="absolute -right-[8%] -top-[18%] h-[52vw] w-[52vw] rounded-full bg-[radial-gradient(circle,rgba(91,140,255,0.26)_0%,transparent_66%)] blur-[10px]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
app/src/components/auth/AuthLayout.tsx
Normal file
58
app/src/components/auth/AuthLayout.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { AuthBackground } from './AuthBackground';
|
||||
import { AuthPanel } from './AuthPanel';
|
||||
import { TripoliLogo, TripoliWordmark } from '../layout/TripoliLogo';
|
||||
|
||||
const AUTH_STATS = [
|
||||
{ value: '12 480', label: 'documents indexés' },
|
||||
{ value: '4', label: 'postes sauvegardés' },
|
||||
{ value: '100 %', label: 'chiffré localement' },
|
||||
];
|
||||
|
||||
export function AuthLayout() {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden bg-[#07080c]">
|
||||
<AuthBackground />
|
||||
|
||||
<div className="relative flex min-h-screen flex-col justify-between gap-11 p-6 sm:p-10 lg:p-[60px]">
|
||||
<div className="flex items-center gap-2.5 text-white">
|
||||
<TripoliLogo size={30} variant="hero" />
|
||||
<TripoliWordmark className="text-base" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-8 sm:gap-14 lg:gap-[72px]">
|
||||
<div className="min-w-0 max-w-[560px] flex-1 basis-[340px] text-white">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/14 bg-white/8 px-[13px] py-1.5 text-xs font-semibold tracking-wide text-white/80 backdrop-blur-md">
|
||||
<span className="h-1.5 w-1.5 animate-tc-pulse rounded-full bg-success" />
|
||||
Coffre-fort en ligne
|
||||
</span>
|
||||
<h1 className="m-0 my-4 text-[36px] font-extrabold leading-[1.04] tracking-tight text-balance sm:text-[48px] lg:text-[62px]">
|
||||
Vos documents,
|
||||
<br />
|
||||
sous clé.
|
||||
</h1>
|
||||
<p className="m-0 max-w-[44ch] text-[15px] leading-relaxed text-white/62 sm:text-[17.5px]">
|
||||
Documents sensibles, archives et sauvegardes dans un coffre-fort chiffré de bout en bout. Vous seul
|
||||
détenez la clé.
|
||||
</p>
|
||||
<div className="mt-[38px] flex flex-wrap gap-7">
|
||||
{AUTH_STATS.map((s) => (
|
||||
<div key={s.label}>
|
||||
<p className="m-0 mb-[3px] text-[22px] font-bold tracking-tight text-white">{s.value}</p>
|
||||
<p className="m-0 text-[12.5px] text-white/50">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AuthPanel />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-5 text-xs text-white/34">
|
||||
<span>Tripoli Cloud — 2026</span>
|
||||
<span>Hébergé sur votre propre matériel</span>
|
||||
<span>Sans publicité, sans traçage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
163
app/src/components/auth/AuthPanel.tsx
Normal file
163
app/src/components/auth/AuthPanel.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import { AlertCircle, ArrowRight, Eye, Lock, Mail, ShieldCheck } from 'lucide-react';
|
||||
import { useAuthForm } from '../../hooks/useAuthForm';
|
||||
|
||||
export function AuthPanel() {
|
||||
const {
|
||||
mode,
|
||||
setMode,
|
||||
name,
|
||||
setName,
|
||||
email,
|
||||
setEmail,
|
||||
password,
|
||||
setPassword,
|
||||
emailError,
|
||||
passwordError,
|
||||
handleSubmit,
|
||||
continueAsGuest,
|
||||
loading,
|
||||
} = useAuthForm();
|
||||
|
||||
const isSignup = mode === 'signup';
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full max-w-[430px] rounded-[22px] border border-white/16 bg-white/[0.075] p-6 shadow-[0_32px_80px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.18)] backdrop-blur-2xl backdrop-saturate-150 sm:p-[34px]"
|
||||
style={{ colorScheme: 'dark' }}
|
||||
>
|
||||
<h2 className="m-0 mb-1.5 text-[23px] font-bold tracking-tight text-white">
|
||||
{isSignup ? 'Créer votre espace' : 'Bon retour'}
|
||||
</h2>
|
||||
<p className="m-0 mb-6 text-[13.5px] text-white/55">
|
||||
{isSignup ? 'Un coffre-fort chiffré, une seule clé : la vôtre.' : 'Déverrouillez votre coffre-fort.'}
|
||||
</p>
|
||||
|
||||
<div className="mb-6 flex gap-1 rounded-xl border border-white/8 bg-black/28 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('login')}
|
||||
className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
|
||||
mode === 'login' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
|
||||
}`}
|
||||
>
|
||||
Connexion
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('signup')}
|
||||
className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
|
||||
mode === 'signup' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
|
||||
}`}
|
||||
>
|
||||
Créer un compte
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
{isSignup && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="tc-name" className="text-[12.5px] font-semibold text-white/72">
|
||||
Nom complet
|
||||
</label>
|
||||
<input
|
||||
id="tc-name"
|
||||
name="name"
|
||||
type="text"
|
||||
autoComplete="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Leïla Barghouti"
|
||||
className="w-full rounded-xl border border-white/14 bg-black/26 px-[15px] py-3.5 text-[14.5px] text-white outline-none placeholder:text-white/34"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="tc-email" className="text-[12.5px] font-semibold text-white/72">
|
||||
Adresse e-mail
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<Mail size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
|
||||
<input
|
||||
id="tc-email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
aria-invalid={emailError}
|
||||
aria-describedby="tc-email-err"
|
||||
placeholder="vous@domaine.tn"
|
||||
className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
|
||||
emailError ? 'border-danger' : 'border-white/14'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{emailError && (
|
||||
<span id="tc-email-err" className="flex items-center gap-1.5 text-xs text-danger">
|
||||
<AlertCircle size={13} />
|
||||
Saisissez une adresse e-mail valide.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<label htmlFor="tc-pass" className="text-[12.5px] font-semibold text-white/72">
|
||||
Mot de passe
|
||||
</label>
|
||||
<a href="#tc-pass" className="text-xs text-brand-soft hover:text-[#a8c2ff]">
|
||||
Oublié ?
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
|
||||
<input
|
||||
id="tc-pass"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
aria-invalid={passwordError}
|
||||
aria-describedby="tc-pass-err"
|
||||
placeholder="••••••••••"
|
||||
className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
|
||||
passwordError ? 'border-danger' : 'border-white/14'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{passwordError && (
|
||||
<span id="tc-pass-err" className="flex items-center gap-1.5 text-xs text-danger">
|
||||
<AlertCircle size={13} />
|
||||
Huit caractères minimum.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="mt-1 flex w-full items-center justify-center gap-2.5 rounded-xl bg-brand-gradient px-[18px] py-3.5 text-[14.5px] font-bold text-white shadow-[0_12px_30px_rgba(91,140,255,0.34)] transition-[filter] hover:brightness-110 disabled:opacity-70"
|
||||
>
|
||||
<span>{isSignup ? 'Créer mon compte' : 'Se connecter'}</span>
|
||||
<ArrowRight size={17} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void continueAsGuest()}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl border border-white/18 bg-white/6 px-[18px] py-[13px] text-[13.5px] font-semibold text-white transition-colors hover:bg-white/12"
|
||||
>
|
||||
<Eye size={16} strokeWidth={1.8} />
|
||||
Visiter en tant qu'invité
|
||||
</button>
|
||||
|
||||
<div className="mt-1.5 flex items-center gap-2.5 border-t border-white/10 pt-4 text-xs text-white/48">
|
||||
<ShieldCheck size={14} className="text-success" strokeWidth={2} />
|
||||
Chiffrement AES-256 côté client — aucune donnée en clair sur le serveur.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
app/src/components/backups/BackupRow.tsx
Normal file
31
app/src/components/backups/BackupRow.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import type { BackupDevice } from '../../types';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
|
||||
const STATUS_CLASSES: Record<BackupDevice['status'], string> = {
|
||||
'up-to-date': 'bg-success/16 text-success',
|
||||
syncing: 'bg-violet/16 text-violet',
|
||||
late: 'bg-danger/16 text-danger',
|
||||
};
|
||||
|
||||
const ICON_TONE: Record<BackupDevice['status'], string> = {
|
||||
'up-to-date': 'bg-selected text-brand-soft',
|
||||
syncing: 'bg-violet/16 text-violet',
|
||||
late: 'bg-danger/16 text-danger',
|
||||
};
|
||||
|
||||
export function BackupRow({ backup }: { backup: BackupDevice }) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-4 rounded-2xl border border-line bg-panel p-[18px]">
|
||||
<span className={`flex h-10 w-10 flex-none items-center justify-center rounded-xl ${ICON_TONE[backup.status]}`}>
|
||||
<DataIcon name={backup.icon} size={19} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1 basis-[200px]">
|
||||
<p className="m-0 mb-[3px] text-[14.5px] font-bold text-ink">{backup.device}</p>
|
||||
<p className="m-0 text-[12.5px] text-ink-soft">{backup.detail}</p>
|
||||
</div>
|
||||
<span className={`flex-none rounded-full px-3 py-1.5 text-[11.5px] font-bold ${STATUS_CLASSES[backup.status]}`}>
|
||||
{backup.statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
app/src/components/backups/BackupsView.tsx
Normal file
20
app/src/components/backups/BackupsView.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { useBackups } from '../../hooks/useBackups';
|
||||
import { BackupRow } from './BackupRow';
|
||||
|
||||
export function BackupsView() {
|
||||
const backups = useBackups();
|
||||
|
||||
return (
|
||||
<div className="flex max-w-[960px] flex-col gap-6">
|
||||
<div>
|
||||
<p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">4 appareils protégés</p>
|
||||
<h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">Sauvegardes</h1>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{backups.map((b) => (
|
||||
<BackupRow key={b.id} backup={b} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
app/src/components/dashboard/CreateMenu.tsx
Normal file
46
app/src/components/dashboard/CreateMenu.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { Plus } from 'lucide-react';
|
||||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
import type { IconName } from '../../types';
|
||||
|
||||
const OPTIONS: Array<{ icon: IconName; label: string }> = [
|
||||
{ icon: 'folder-plus', label: 'Nouveau dossier' },
|
||||
{ icon: 'file-pen', label: 'Nouveau document' },
|
||||
{ icon: 'upload', label: 'Importer des fichiers' },
|
||||
];
|
||||
|
||||
export function CreateMenu() {
|
||||
const { createOpen, toggleCreate, closeCreate } = useNavigation();
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleCreate}
|
||||
aria-expanded={createOpen}
|
||||
className="flex items-center gap-2 rounded-xl bg-brand-gradient px-[17px] py-3 text-[13.5px] font-bold text-white shadow-[0_10px_26px_rgba(91,140,255,0.3)] transition-[filter] hover:brightness-110"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2.2} />
|
||||
Créer
|
||||
</button>
|
||||
|
||||
{createOpen && (
|
||||
<div className="animate-tc-in absolute right-0 top-[50px] z-50 w-[232px] rounded-2xl border border-line bg-panel2 p-1.5 shadow-tc backdrop-blur-xl">
|
||||
{OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.label}
|
||||
type="button"
|
||||
onClick={closeCreate}
|
||||
className="flex w-full items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-left text-[13.5px] font-semibold text-ink hover:bg-field"
|
||||
>
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-[9px] bg-selected text-brand-soft">
|
||||
<DataIcon name={opt.icon} size={15} />
|
||||
</span>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
app/src/components/dashboard/DashboardView.tsx
Normal file
38
app/src/components/dashboard/DashboardView.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { useDashboardStats } from '../../hooks/useDashboardStats';
|
||||
import { CreateMenu } from './CreateMenu';
|
||||
import { RecentFiles } from './RecentFiles';
|
||||
import { StatCard } from './StatCard';
|
||||
import { UploadZone } from './UploadZone';
|
||||
|
||||
interface DashboardViewProps {
|
||||
/** Forwarded to UploadZone — undefined lets it run its own demo transfer. */
|
||||
uploadProgress?: number;
|
||||
}
|
||||
|
||||
export function DashboardView({ uploadProgress }: DashboardViewProps) {
|
||||
const stats = useDashboardStats();
|
||||
|
||||
return (
|
||||
<div className="flex max-w-[1240px] flex-col gap-6">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">Mercredi 16 septembre</p>
|
||||
<h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">
|
||||
Coffre déverrouillé.
|
||||
</h1>
|
||||
</div>
|
||||
<CreateMenu />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(196px,1fr))] gap-3.5">
|
||||
{stats.map((stat) => (
|
||||
<StatCard key={stat.id} stat={stat} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<UploadZone progress={uploadProgress} />
|
||||
|
||||
<RecentFiles />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
app/src/components/dashboard/FileGridItem.tsx
Normal file
19
app/src/components/dashboard/FileGridItem.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import type { FileItem } from '../../types';
|
||||
|
||||
export function FileGridItem({ file }: { file: FileItem }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-line bg-field p-3.5 transition-colors hover:bg-panel2">
|
||||
<div className="relative h-[88px] overflow-hidden rounded-xl" style={{ background: file.thumbGradient }}>
|
||||
<span className="absolute left-2 top-2 rounded-[7px] bg-black/55 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-white backdrop-blur-sm">
|
||||
{file.extLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="m-0 mb-1 break-words text-[13.5px] font-semibold leading-snug text-ink">{file.name}</p>
|
||||
<p className="m-0 text-[11.5px] text-ink-soft">
|
||||
{file.size} · {file.modified}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
app/src/components/dashboard/FileListRow.tsx
Normal file
15
app/src/components/dashboard/FileListRow.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import type { FileItem } from '../../types';
|
||||
|
||||
export function FileListRow({ file }: { file: FileItem }) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 border-b border-line px-4 py-3 transition-colors hover:bg-field sm:px-[18px]">
|
||||
<span className="h-[34px] w-[34px] flex-none rounded-[10px]" style={{ background: file.thumbGradient }} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="m-0 truncate text-[13.5px] font-semibold text-ink">{file.name}</p>
|
||||
<p className="m-0 mt-0.5 text-[11.5px] text-ink-soft">{file.extLabel}</p>
|
||||
</div>
|
||||
<span className="w-[90px] flex-none text-[12.5px] text-ink-soft">{file.size}</span>
|
||||
<span className="w-[120px] flex-none text-[12.5px] text-ink-soft">{file.modified}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
app/src/components/dashboard/RecentFiles.tsx
Normal file
84
app/src/components/dashboard/RecentFiles.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { ArrowUpDown, Grid2x2, List } from 'lucide-react';
|
||||
import { useRecentFiles } from '../../hooks/useRecentFiles';
|
||||
import { FileGridItem } from './FileGridItem';
|
||||
import { FileListRow } from './FileListRow';
|
||||
|
||||
export function RecentFiles() {
|
||||
const { files, filters, filter, setFilter, sortDesc, toggleSort, gridView, setGridView } = useRecentFiles();
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-[18px] border border-line bg-panel backdrop-blur-md">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3.5 border-b border-line px-4 py-4 sm:px-[18px]">
|
||||
<h2 className="m-0 text-base font-bold tracking-tight text-ink">Fichiers récents</h2>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{filters.map((f) => {
|
||||
const active = filter === f;
|
||||
return (
|
||||
<button
|
||||
key={f}
|
||||
type="button"
|
||||
onClick={() => setFilter(f)}
|
||||
className={`rounded-full border px-[13px] py-1.5 text-[12.5px] font-semibold transition-colors ${
|
||||
active ? 'border-brand/40 bg-selected text-brand-soft' : 'border-line bg-field text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleSort}
|
||||
className="flex items-center gap-1.5 rounded-full border border-line bg-field px-[13px] py-1.5 text-[12.5px] font-semibold text-ink"
|
||||
>
|
||||
<ArrowUpDown size={14} strokeWidth={1.8} />
|
||||
{sortDesc ? 'Plus récents' : 'Plus anciens'}
|
||||
</button>
|
||||
<div className="flex gap-0.5 rounded-[11px] border border-line bg-field p-[3px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGridView(true)}
|
||||
aria-label="Vue grille"
|
||||
aria-pressed={gridView}
|
||||
className={`flex h-7 w-[30px] items-center justify-center rounded-lg ${
|
||||
gridView ? 'bg-selected text-brand-soft' : 'text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
<Grid2x2 size={15} strokeWidth={1.9} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGridView(false)}
|
||||
aria-label="Vue liste"
|
||||
aria-pressed={!gridView}
|
||||
className={`flex h-7 w-[30px] items-center justify-center rounded-lg ${
|
||||
!gridView ? 'bg-selected text-brand-soft' : 'text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
<List size={15} strokeWidth={1.9} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gridView ? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(188px,1fr))] gap-3.5 p-[18px]">
|
||||
{files.map((file) => (
|
||||
<FileGridItem key={file.id} file={file} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="flex items-center gap-4 border-b border-line px-4 py-2.5 text-[11.5px] font-bold uppercase tracking-wide text-ink-soft sm:px-[18px]">
|
||||
<span className="flex-1">Nom</span>
|
||||
<span className="w-[90px] flex-none">Taille</span>
|
||||
<span className="w-[120px] flex-none">Modifié</span>
|
||||
</div>
|
||||
{files.map((file) => (
|
||||
<FileListRow key={file.id} file={file} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
app/src/components/dashboard/StatCard.tsx
Normal file
23
app/src/components/dashboard/StatCard.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import type { StatItem } from '../../types';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
|
||||
const TONE_CLASSES: Record<StatItem['tone'], string> = {
|
||||
brand: 'bg-selected text-brand-soft',
|
||||
success: 'bg-success/16 text-success',
|
||||
violet: 'bg-violet/16 text-violet',
|
||||
};
|
||||
|
||||
export function StatCard({ stat }: { stat: StatItem }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-line bg-panel p-[18px] backdrop-blur-md">
|
||||
<div className="mb-3.5 flex items-center justify-between gap-2.5">
|
||||
<span className="text-[12.5px] font-semibold text-ink-soft">{stat.label}</span>
|
||||
<span className={`flex h-7 w-7 items-center justify-center rounded-[9px] ${TONE_CLASSES[stat.tone]}`}>
|
||||
<DataIcon name={stat.icon} size={15} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="m-0 mb-1 text-[27px] font-extrabold tracking-tight text-ink">{stat.value}</p>
|
||||
<p className="m-0 text-xs text-ink-soft">{stat.note}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
app/src/components/dashboard/UploadZone.tsx
Normal file
60
app/src/components/dashboard/UploadZone.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Upload } from 'lucide-react';
|
||||
import { useUploadSimulation } from '../../hooks/useUploadSimulation';
|
||||
import type { UploadTask } from '../../types';
|
||||
|
||||
interface UploadZoneProps {
|
||||
/** Piloted externally once real transfers exist; undefined = simulate locally. */
|
||||
progress?: UploadTask['progress'];
|
||||
}
|
||||
|
||||
export function UploadZone({ progress: externalProgress }: UploadZoneProps) {
|
||||
const { uploading, progress, dragging, start, onDragOver, onDragLeave, onDrop } =
|
||||
useUploadSimulation(externalProgress);
|
||||
|
||||
return (
|
||||
<div
|
||||
onDragOver={onDragOver}
|
||||
onDragLeave={onDragLeave}
|
||||
onDrop={onDrop}
|
||||
onClick={start}
|
||||
className={`cursor-pointer rounded-[18px] border-[1.5px] border-dashed p-6 transition-colors sm:p-[34px] ${
|
||||
dragging ? 'border-brand bg-selected' : 'border-line bg-panel'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-[18px]">
|
||||
<span className="flex h-[52px] w-[52px] flex-none items-center justify-center rounded-2xl border border-brand/30 bg-selected text-brand-soft">
|
||||
<Upload size={22} strokeWidth={2} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1 basis-[260px]">
|
||||
<p className="m-0 mb-[5px] text-[16.5px] font-bold tracking-tight text-ink">
|
||||
{dragging ? 'Relâchez pour importer' : 'Déposez vos fichiers ici'}
|
||||
</p>
|
||||
<p className="m-0 text-[13px] leading-relaxed text-ink-soft">
|
||||
JPEG, RAW, MP4, PDF — jusqu'à 5 Go par fichier. Cliquez pour simuler un transfert.
|
||||
</p>
|
||||
</div>
|
||||
<span className="flex-none rounded-[11px] border border-line bg-field px-4 py-2.5 text-[13px] font-semibold text-ink">
|
||||
Parcourir
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{uploading && (
|
||||
<div className="mt-6 border-t border-line pt-5">
|
||||
<div className="mb-2.5 flex justify-between gap-3 text-[12.5px] font-semibold text-ink">
|
||||
<span>Archives_fiscales_2026.zip</span>
|
||||
<span className="text-brand-soft">{progress} %</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-field">
|
||||
<div
|
||||
className="upload-progress-stripes h-2 rounded-full bg-brand-gradient transition-[width] duration-300 ease-out"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 mt-2.5 text-xs text-ink-soft">
|
||||
{progress >= 100 ? 'Transfert terminé — fichier chiffré et vérifié.' : 'Chiffrement en cours côté client…'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
app/src/components/icons/DataIcon.tsx
Normal file
14
app/src/components/icons/DataIcon.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import type { IconName } from '../../types';
|
||||
import { ICON_REGISTRY } from './iconRegistry';
|
||||
|
||||
interface DataIconProps {
|
||||
name: IconName;
|
||||
size?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Renders a lucide-react icon selected by the string key our API mocks return. */
|
||||
export function DataIcon({ name, size = 16, className }: DataIconProps) {
|
||||
const Icon = ICON_REGISTRY[name];
|
||||
return <Icon size={size} className={className} strokeWidth={1.8} />;
|
||||
}
|
||||
31
app/src/components/icons/iconRegistry.ts
Normal file
31
app/src/components/icons/iconRegistry.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
FilePen,
|
||||
FolderPlus,
|
||||
HardDrive,
|
||||
Image,
|
||||
Laptop,
|
||||
Server,
|
||||
Share2,
|
||||
Smartphone,
|
||||
Tablet,
|
||||
Upload,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import type { IconName } from '../../types';
|
||||
|
||||
export const ICON_REGISTRY: Record<IconName, LucideIcon> = {
|
||||
'hard-drive': HardDrive,
|
||||
image: Image,
|
||||
smartphone: Smartphone,
|
||||
share: Share2,
|
||||
'folder-plus': FolderPlus,
|
||||
'file-pen': FilePen,
|
||||
upload: Upload,
|
||||
check: CheckCircle2,
|
||||
alert: AlertTriangle,
|
||||
laptop: Laptop,
|
||||
tablet: Tablet,
|
||||
server: Server,
|
||||
};
|
||||
23
app/src/components/layout/AppShell.tsx
Normal file
23
app/src/components/layout/AppShell.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import type { ReactNode } from 'react';
|
||||
import { DrawerOverlay } from './DrawerOverlay';
|
||||
import { TopBar } from './TopBar';
|
||||
import { TripoliSidebar } from './TripoliSidebar';
|
||||
|
||||
export function AppShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden bg-bg">
|
||||
<div className="pointer-events-none fixed -left-[140px] -top-[220px] h-[620px] w-[620px] rounded-full bg-[radial-gradient(circle,rgba(91,140,255,0.16)_0%,transparent_68%)]" />
|
||||
<div className="pointer-events-none fixed -bottom-[260px] -right-[160px] h-[680px] w-[680px] rounded-full bg-[radial-gradient(circle,rgba(124,92,255,0.14)_0%,transparent_68%)]" />
|
||||
|
||||
<div className="relative flex min-h-screen items-stretch">
|
||||
<TripoliSidebar />
|
||||
<DrawerOverlay />
|
||||
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<TopBar />
|
||||
<main className="min-w-0 flex-1 p-5 sm:p-9">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
app/src/components/layout/DrawerOverlay.tsx
Normal file
17
app/src/components/layout/DrawerOverlay.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { useIsMobile } from '../../hooks/useIsMobile';
|
||||
|
||||
export function DrawerOverlay() {
|
||||
const { drawerOpen, closeDrawer } = useNavigation();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
if (!isMobile || !drawerOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={closeDrawer}
|
||||
className="fixed inset-0 z-30 bg-black/60 backdrop-blur-sm"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
47
app/src/components/layout/TopBar.tsx
Normal file
47
app/src/components/layout/TopBar.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { Menu, Moon, Search, Sun } from 'lucide-react';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { useIsMobile } from '../../hooks/useIsMobile';
|
||||
import { NotificationCenter } from '../notifications/NotificationCenter';
|
||||
|
||||
export function TopBar() {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const { openDrawer } = useNavigation();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-[60] flex items-center gap-3 border-b border-line bg-panel p-3.5 backdrop-blur-xl sm:px-8">
|
||||
{isMobile && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openDrawer}
|
||||
aria-label="Ouvrir le menu"
|
||||
className="flex h-[38px] w-[38px] flex-none items-center justify-center rounded-[11px] border border-line bg-field text-ink"
|
||||
>
|
||||
<Menu size={18} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="flex max-w-[440px] flex-1 items-center gap-2.5 rounded-xl border border-line bg-field px-3.5 py-2.5">
|
||||
<Search size={16} className="flex-none opacity-50" strokeWidth={1.8} />
|
||||
<input
|
||||
aria-label="Rechercher un fichier"
|
||||
placeholder="Rechercher un document, un dossier, une référence…"
|
||||
className="w-full min-w-0 flex-1 bg-transparent text-[13.5px] text-ink outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
aria-label="Basculer clair / sombre"
|
||||
className="flex h-[38px] w-[38px] items-center justify-center rounded-[11px] border border-line bg-field text-ink"
|
||||
>
|
||||
{theme === 'dark' ? <Moon size={17} strokeWidth={1.8} /> : <Sun size={17} strokeWidth={1.8} />}
|
||||
</button>
|
||||
<NotificationCenter />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
32
app/src/components/layout/TripoliLogo.tsx
Normal file
32
app/src/components/layout/TripoliLogo.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
interface TripoliLogoProps {
|
||||
size?: number;
|
||||
variant?: 'hero' | 'sidebar';
|
||||
}
|
||||
|
||||
/** Minimalist inline SVG mark — no external asset, easy to swap later. */
|
||||
export function TripoliLogo({ size = 28, variant = 'sidebar' }: TripoliLogoProps) {
|
||||
const badgeFill = variant === 'hero' ? 'rgba(255,255,255,0.08)' : 'rgba(91,140,255,0.14)';
|
||||
const badgeStroke = variant === 'hero' ? 'rgba(255,255,255,0.22)' : 'rgba(91,140,255,0.36)';
|
||||
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
||||
<rect x="1" y="1" width="30" height="30" rx="9" fill={badgeFill} stroke={badgeStroke} />
|
||||
<path
|
||||
d="M10 20.5h11a3.6 3.6 0 0 0 .3-7.2 5.6 5.6 0 0 0-10.7-1.1A3.6 3.6 0 0 0 10 20.5z"
|
||||
fill="none"
|
||||
stroke="#7ba4ff"
|
||||
strokeWidth="1.6"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<circle cx="16" cy="16.6" r="1.5" fill="#5b8cff" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function TripoliWordmark({ className = '' }: { className?: string }) {
|
||||
return (
|
||||
<span className={`text-[15px] font-bold tracking-tight ${className}`}>
|
||||
Tripoli<span className="font-medium opacity-55"> Cloud</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
96
app/src/components/layout/TripoliSidebar.tsx
Normal file
96
app/src/components/layout/TripoliSidebar.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { DatabaseBackup, Image, LayoutGrid, LogOut, Settings, X } from 'lucide-react';
|
||||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { useSession } from '../../contexts/SessionContext';
|
||||
import { useIsMobile } from '../../hooks/useIsMobile';
|
||||
import { useStorageSummary } from '../../hooks/useStorageSummary';
|
||||
import type { NavKey } from '../../types';
|
||||
import { TripoliLogo, TripoliWordmark } from './TripoliLogo';
|
||||
|
||||
const NAV_ITEMS: Array<{ key: NavKey; label: string; icon: typeof LayoutGrid }> = [
|
||||
{ key: 'dashboard', label: 'Tableau de bord', icon: LayoutGrid },
|
||||
{ key: 'photos', label: 'Photos', icon: Image },
|
||||
{ key: 'backups', label: 'Sauvegardes', icon: DatabaseBackup },
|
||||
{ key: 'settings', label: 'Réglages', icon: Settings },
|
||||
];
|
||||
|
||||
export function TripoliSidebar() {
|
||||
const { nav, goTo, drawerOpen, closeDrawer } = useNavigation();
|
||||
const { user, logout } = useSession();
|
||||
const isMobile = useIsMobile();
|
||||
const summary = useStorageSummary();
|
||||
|
||||
if (isMobile && !drawerOpen) return null;
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`z-40 flex w-64 flex-none flex-col gap-6 border-r border-line bg-panel2 p-[18px] pt-6 backdrop-blur-2xl ${
|
||||
isMobile ? 'fixed inset-y-0 left-0 min-h-screen' : 'sticky top-0 min-h-screen'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2.5 px-1.5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<TripoliLogo size={28} />
|
||||
<TripoliWordmark className="text-ink" />
|
||||
</div>
|
||||
{isMobile && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeDrawer}
|
||||
aria-label="Fermer le menu"
|
||||
className="flex h-[30px] w-[30px] items-center justify-center rounded-[9px] border border-line text-ink"
|
||||
>
|
||||
<X size={15} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-[3px]">
|
||||
{NAV_ITEMS.map(({ key, label, icon: Icon }) => {
|
||||
const active = nav === key;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => goTo(key)}
|
||||
className={`flex items-center gap-2.5 rounded-[11px] px-3 py-2.5 text-left text-sm font-semibold transition-colors ${
|
||||
active ? 'bg-selected text-ink' : 'bg-transparent text-ink-soft hover:bg-field'
|
||||
}`}
|
||||
>
|
||||
<Icon size={17} strokeWidth={1.8} />
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="rounded-2xl border border-line bg-panel p-4">
|
||||
<div className="flex justify-between gap-2 text-xs font-semibold">
|
||||
<span className="text-ink">Stockage</span>
|
||||
<span className="text-ink-soft">{summary?.label ?? '—'}</span>
|
||||
</div>
|
||||
<div className="my-2.5 h-[7px] overflow-hidden rounded-full bg-field">
|
||||
<div className="h-[7px] rounded-full bg-brand-gradient" style={{ width: `${summary?.percent ?? 0}%` }} />
|
||||
</div>
|
||||
<p className="m-0 text-[11.5px] leading-relaxed text-ink-soft">{summary?.sealedNote ?? ''}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex items-center gap-2.5 rounded-2xl border border-line bg-panel p-2.5">
|
||||
<span className="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[11px] bg-brand-gradient text-[12.5px] font-bold text-white">
|
||||
{user?.initials ?? '??'}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="m-0 truncate text-[13px] font-semibold text-ink">{user?.name ?? 'Invité'}</p>
|
||||
<p className="m-0 text-[11.5px] text-ink-soft">{user?.role ?? ''}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={logout}
|
||||
aria-label="Se déconnecter"
|
||||
className="flex h-7 w-7 flex-none items-center justify-center rounded-lg text-ink-soft"
|
||||
>
|
||||
<LogOut size={16} strokeWidth={1.8} />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
64
app/src/components/notifications/NotificationCenter.tsx
Normal file
64
app/src/components/notifications/NotificationCenter.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { Bell } from 'lucide-react';
|
||||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { useNotifications } from '../../hooks/useNotifications';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
|
||||
export function NotificationCenter() {
|
||||
const { notifOpen, toggleNotif, closeNotif } = useNavigation();
|
||||
const { notifications, unreadCount, markAllRead } = useNotifications();
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleNotif}
|
||||
aria-label="Notifications"
|
||||
aria-expanded={notifOpen}
|
||||
className="relative flex h-[38px] w-[38px] items-center justify-center rounded-[11px] border border-line bg-field text-ink"
|
||||
>
|
||||
<Bell size={17} strokeWidth={1.8} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-brand-gradient px-1.5 text-[10.5px] font-bold text-white">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{notifOpen && (
|
||||
<div className="animate-tc-in absolute right-0 top-[48px] z-50 w-[348px] max-w-[84vw] overflow-hidden rounded-2xl border border-line bg-panel2 shadow-tc backdrop-blur-2xl">
|
||||
<div className="flex items-center justify-between gap-3 border-b border-line px-4 py-3.5">
|
||||
<span className="text-[13.5px] font-bold text-ink">Notifications</span>
|
||||
<button type="button" onClick={markAllRead} className="text-[12.5px] font-semibold text-brand-soft">
|
||||
Tout marquer lu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{notifications.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`flex gap-3 border-b border-line px-4 py-3.5 ${n.unread ? 'bg-selected/40' : ''}`}
|
||||
>
|
||||
<span className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-selected text-brand-soft">
|
||||
<DataIcon name={n.icon} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="m-0 mb-[3px] text-[13.5px] font-semibold leading-snug text-ink">{n.title}</p>
|
||||
<p className="m-0 text-[12.5px] leading-relaxed text-ink-soft">{n.body}</p>
|
||||
<p className="m-0 mt-1.5 text-[11.5px] text-ink-soft">{n.time}</p>
|
||||
</div>
|
||||
{n.unread && <span className="mt-1.5 h-[7px] w-[7px] flex-none rounded-full bg-brand" />}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeNotif}
|
||||
className="w-full bg-transparent py-3.5 text-[12.5px] font-semibold text-ink-soft"
|
||||
>
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
app/src/components/photos/AlbumCard.tsx
Normal file
13
app/src/components/photos/AlbumCard.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import type { Album } from '../../types';
|
||||
|
||||
export function AlbumCard({ album }: { album: Album }) {
|
||||
return (
|
||||
<div className="w-[200px] flex-none overflow-hidden rounded-2xl border border-line bg-panel">
|
||||
<div className="h-[116px]" style={{ background: album.thumbGradient }} />
|
||||
<div className="p-3.5">
|
||||
<p className="m-0 mb-[3px] text-[13.5px] font-bold text-ink">{album.name}</p>
|
||||
<p className="m-0 text-[11.5px] text-ink-soft">{album.count}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
app/src/components/photos/PhotoTile.tsx
Normal file
14
app/src/components/photos/PhotoTile.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import type { PhotoTile as PhotoTileData } from '../../types';
|
||||
|
||||
export function PhotoTile({ tile }: { tile: PhotoTileData }) {
|
||||
return (
|
||||
<div
|
||||
className="relative aspect-square cursor-pointer overflow-hidden rounded-[13px] border border-line transition-transform hover:scale-[1.025]"
|
||||
style={{ background: tile.thumbGradient }}
|
||||
>
|
||||
<span className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[rgba(5,6,10,0.72)] to-transparent px-2.5 pb-2 pt-[18px] text-[11px] font-semibold text-white">
|
||||
{tile.label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
app/src/components/photos/PhotosView.tsx
Normal file
50
app/src/components/photos/PhotosView.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { usePhotos } from '../../hooks/usePhotos';
|
||||
import { AlbumCard } from './AlbumCard';
|
||||
import { PhotoTile } from './PhotoTile';
|
||||
|
||||
export function PhotosView() {
|
||||
const { albums, tiles, scopes, scope, setScope } = usePhotos();
|
||||
|
||||
return (
|
||||
<div className="flex max-w-[1240px] flex-col gap-6">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">12 480 documents · 318 numérisations</p>
|
||||
<h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">Photos</h1>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{scopes.map((s) => {
|
||||
const active = scope === s;
|
||||
return (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setScope(s)}
|
||||
className={`rounded-full border px-[15px] py-2 text-[12.5px] font-semibold transition-colors ${
|
||||
active ? 'border-brand/40 bg-selected text-brand-soft' : 'border-line bg-field text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3.5 overflow-x-auto pb-1">
|
||||
{albums.map((album) => (
|
||||
<AlbumCard key={album.id} album={album} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="m-0 mb-3.5 text-sm font-bold tracking-tight text-ink">Septembre 2026</h2>
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-2.5">
|
||||
{tiles.map((tile) => (
|
||||
<PhotoTile key={tile.id} tile={tile} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
app/src/components/settings/SettingsRowView.tsx
Normal file
39
app/src/components/settings/SettingsRowView.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import type { NotificationPrefKey, SettingsRow } from '../../types';
|
||||
|
||||
interface SettingsRowViewProps {
|
||||
row: SettingsRow;
|
||||
onToggle: (key: NotificationPrefKey) => void;
|
||||
}
|
||||
|
||||
export function SettingsRowView({ row, onToggle }: SettingsRowViewProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-4 border-b border-line p-[18px]">
|
||||
<div className="min-w-0 flex-1 basis-[260px]">
|
||||
<p className="m-0 mb-1 text-sm font-semibold text-ink">{row.label}</p>
|
||||
<p className="m-0 text-[12.5px] leading-relaxed text-ink-soft">{row.help}</p>
|
||||
</div>
|
||||
|
||||
{row.kind === 'toggle' ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggle(row.id as NotificationPrefKey)}
|
||||
role="switch"
|
||||
aria-checked={row.on}
|
||||
aria-label={row.label}
|
||||
className={`flex h-[26px] w-[46px] flex-none items-center rounded-full border border-line p-[3px] transition-colors ${
|
||||
row.on ? 'bg-brand-gradient' : 'bg-field'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="h-5 w-5 rounded-full bg-white shadow-[0_2px_6px_rgba(0,0,0,0.3)] transition-transform"
|
||||
style={{ transform: row.on ? 'translateX(20px)' : 'translateX(0)' }}
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<span className="flex-none rounded-[10px] border border-line bg-field px-3.5 py-2 text-[13px] font-semibold text-ink">
|
||||
{row.value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
app/src/components/settings/SettingsView.tsx
Normal file
55
app/src/components/settings/SettingsView.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { SETTINGS_TABS, useSettings } from '../../hooks/useSettings';
|
||||
import { SettingsRowView } from './SettingsRowView';
|
||||
|
||||
export function SettingsView() {
|
||||
const { settingsTab, setSettingsTab } = useNavigation();
|
||||
const { title, rows, togglePref } = useSettings(settingsTab);
|
||||
|
||||
return (
|
||||
<div className="flex max-w-[860px] flex-col gap-6">
|
||||
<div>
|
||||
<p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">Réglages</p>
|
||||
<h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">{title}</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 overflow-x-auto rounded-[13px] border border-line bg-field p-1">
|
||||
{SETTINGS_TABS.map((tab) => {
|
||||
const active = settingsTab === tab.key;
|
||||
return (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => setSettingsTab(tab.key)}
|
||||
className={`flex-none whitespace-nowrap rounded-[10px] px-4 py-2.5 text-[13px] font-semibold transition-colors ${
|
||||
active ? 'bg-panel2 text-ink' : 'bg-transparent text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-[18px] border border-line bg-panel">
|
||||
{rows.map((row) => (
|
||||
<SettingsRowView key={row.id} row={row} onToggle={togglePref} />
|
||||
))}
|
||||
<div className="flex flex-wrap gap-2.5 p-[18px]">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-xl bg-brand-gradient px-[18px] py-3 text-[13.5px] font-bold text-white transition-[filter] hover:brightness-110"
|
||||
>
|
||||
Enregistrer
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-xl border border-line bg-field px-[18px] py-3 text-[13.5px] font-semibold text-ink"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue