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>

app/src/components/backups/BackupRow.tsx

@@ -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>
+  );
+}