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/layout/TripoliLogo.tsx

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