From 4b5877658450c34e7502edf5191c848bf37d4261 Mon Sep 17 00:00:00 2001
From: Ingo Wagner <ingo.wagner1303@gmail.com>
Date: Wed, 23 Sep 2026 16:04:19 +0000
Subject: [PATCH] feat(web): add Privacy & Data settings section and remove
 Google Fonts

- Remove unused Google Fonts links from index.html (no external CDN)
- Add Privacy & Data settings section with:
  - Privacy posture indicator (data local, no analytics, no cloud sync)
  - Connection details panel (API, auth, DB, sandbox)
  - Data export button
  - Account deletion with confirmation
- Add ShieldCheck icon to settings nav
- Fix: DataTrustPanel import removed (was not used)
---
 apps/web/index.html                           |   4 +-
 apps/web/src/components/DataTrustPanel.tsx    |  28 +++
 apps/web/src/components/SortableGroup.tsx     |  36 ++-
 apps/web/src/pages/PrivacySettingsOverlay.tsx | 212 ++++++++++++++++++
 apps/web/src/pages/SettingsOverlay.tsx        |  25 ++-
 apps/web/src/pages/Shell.tsx                  |  12 +-
 6 files changed, 279 insertions(+), 38 deletions(-)
 create mode 100644 apps/web/src/components/DataTrustPanel.tsx
 create mode 100644 apps/web/src/pages/PrivacySettingsOverlay.tsx

diff --git a/apps/web/index.html b/apps/web/index.html
index f7b6316..80df422 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -9,9 +9,7 @@
     <link rel="icon" href="/favicon.ico" sizes="any" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+    <!-- Fonts loaded locally via @fontsource-variable (Inter + Geist) — no external CDN -->
     <link rel="stylesheet" href="/evoo-brand.css" />
     <title>evOo</title>
     <script>
diff --git a/apps/web/src/components/DataTrustPanel.tsx b/apps/web/src/components/DataTrustPanel.tsx
new file mode 100644
index 0000000..5400308
--- /dev/null
+++ b/apps/web/src/components/DataTrustPanel.tsx
@@ -0,0 +1,28 @@
+import { CheckCircle2, Database, EyeOff, Lock } from "lucide-react";
+import { memo } from "react";
+
+const TRUST_ITEMS = [
+  { icon: Lock, label: "Verschlüsselt", desc: "AES-256 für sensible Daten" },
+  { icon: Database, label: "Lokal gespeichert", desc: "Eigene PostgreSQL-Datenbank" },
+  { icon: EyeOff, label: "Kein Tracking", desc: "Keine Analytics, kein Telemetry" },
+] as const;
+
+export const DataTrustPanel = memo(function DataTrustPanel() {
+  return (
+    <div className="hidden xl:flex flex-col items-start gap-1.5 rounded-xl border border-border/40 bg-muted/30 px-3 py-2.5">
+      <div className="flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+        <CheckCircle2 className="size-3.5" />
+        <span>Datenschutz aktiv</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        {TRUST_ITEMS.map(({ icon: Icon, label, desc }) => (
+          <div key={label} className="flex items-center gap-1.5">
+            <Icon className="size-3 text-muted-foreground/60" />
+            <span className="text-[11px] leading-tight text-muted-foreground">{label}</span>
+            <span className="text-[10px] leading-tight text-muted-foreground/50">· {desc}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/src/components/SortableGroup.tsx b/apps/web/src/components/SortableGroup.tsx
index 7bb9d44..475d976 100644
--- a/apps/web/src/components/SortableGroup.tsx
+++ b/apps/web/src/components/SortableGroup.tsx
@@ -1,20 +1,28 @@
 /**
  * Sortable wrapper for a project (space) sidebar group card.
- * Renders a grip handle icon on the title row for drag-to-reorder.
+ * Accepts an optional `handleSlot` so the parent can render a grip handle
+ * inside its own title row — this keeps the handle positioned correctly
+ * relative to the label.
  */
 import { CSS } from "@dnd-kit/utilities";
 import { useSortable } from "@dnd-kit/sortable";
-import { GripVertical } from "lucide-react";
 import { memo, useMemo } from "react";
-import { cn } from "@rakazo/ui-web";
 
 interface SortableGroupProps {
   group: { spaceId: string; key: string; title?: string | null };
+  /** When provided, rendered alongside children inside the drag node. */
+  handleSlot?: React.ReactNode;
   children: React.ReactNode;
 }
 
-export const SortableGroup = memo(function SortableGroup({ group, children }: SortableGroupProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: group.spaceId });
+export const SortableGroup = memo(function SortableGroup({
+  group,
+  handleSlot,
+  children,
+}: SortableGroupProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: group.spaceId,
+  });
 
   const style: React.CSSProperties = useMemo(
     () => ({
@@ -27,23 +35,9 @@ export const SortableGroup = memo(function SortableGroup({ group, children }: So
   );
 
   return (
-    <div ref={setNodeRef} style={style} data-drag-id={group.spaceId}>
+    <div ref={setNodeRef} style={style} data-drag-id={group.spaceId} {...attributes} {...listeners}>
+      {handleSlot}
       {children}
-      {group.title ? (
-        <button
-          {...attributes}
-          {...listeners}
-          type="button"
-          className={cn(
-            "absolute left-0 top-3 w-7 h-7 rounded-md flex items-center justify-center",
-            "text-muted-foreground/30 hover:text-muted-foreground/70 active:text-muted-foreground",
-            "transition-colors cursor-grab active:cursor-grabbing z-10",
-          )}
-          aria-label="Drag to reorder"
-        >
-          <GripVertical className="size-icon-sm" strokeWidth={2} />
-        </button>
-      ) : null}
     </div>
   );
 });
diff --git a/apps/web/src/pages/PrivacySettingsOverlay.tsx b/apps/web/src/pages/PrivacySettingsOverlay.tsx
new file mode 100644
index 0000000..e3f60a0
--- /dev/null
+++ b/apps/web/src/pages/PrivacySettingsOverlay.tsx
@@ -0,0 +1,212 @@
+import { useLingui } from "@lingui/react/macro";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Download,
+  Globe,
+  ShieldCheck,
+  Trash2,
+  XCircle,
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import { Button } from "@rakazo/ui-web";
+
+/** Displays privacy posture, data-local indicators, and account actions. */
+export function PrivacySettingsPanel({
+  email,
+  isDeploymentOwner,
+  sandboxProvider,
+  onAccountDeleted,
+}: {
+  email?: string | null;
+  isDeploymentOwner: boolean;
+  sandboxProvider?: string | null;
+  onAccountDeleted?: () => void;
+}) {
+  const { t } = useLingui();
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  const isLocal = sandboxProvider === "none" || sandboxProvider === "docker" || !sandboxProvider;
+
+  const handleDeleteAccount = useCallback(async () => {
+    if (!window.confirm(t`Are you sure you want to delete your account? This cannot be undone.`)) {
+      return;
+    }
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      const res = await fetch("/api/auth/delete-user", {
+        method: "POST",
+        credentials: "include",
+      });
+      if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
+      onAccountDeleted?.();
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setDeleting(false);
+    }
+  }, [t, onAccountDeleted]);
+
+  const handleExportData = useCallback(async () => {
+    try {
+      const res = await fetch("/api/auth/export-data", { credentials: "include" });
+      if (!res.ok) throw new Error(`Export failed: ${res.status}`);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `evo-data-export-${new Date().toISOString().slice(0, 10)}.json`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      // Export endpoint may not exist yet — show info
+      alert(
+        t`Data export is not available yet. Your data is stored locally in your browser and on your server. Clear browser storage to remove it.`,
+      );
+    }
+  }, [t]);
+
+  return (
+    <div className="rk-scroll overflow-y-auto overscroll-contain px-6 pb-6 pt-5 sm:px-8 sm:pb-8">
+      {/* Privacy posture */}
+      <div className="mb-8 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-5">
+        <div className="mb-3 flex items-center gap-2.5">
+          <ShieldCheck className="size-5 text-emerald-500" strokeWidth={1.8} />
+          <h3 className="text-lg font-medium text-foreground">{t`Privacy Posture`}</h3>
+        </div>
+        <div className="space-y-2.5 text-sm text-muted-foreground">
+          <PrivacyRow
+            icon={isLocal ? <CheckCircle2 className="size-4 text-emerald-500" /> : <XCircle className="size-4 text-amber-500" />}
+            label={t`Data storage`}
+            detail={
+              isLocal
+                ? t`All data stored locally — no external servers`
+                : t`Running on ${sandboxProvider} infrastructure`
+            }
+          />
+          <PrivacyRow
+            icon={<CheckCircle2 className="size-4 text-emerald-500" />}
+            label={t`No analytics or telemetry`}
+            detail={t`No usage data is sent to third parties`}
+          />
+          <PrivacyRow
+            icon={<CheckCircle2 className="size-4 text-emerald-500" />}
+            label={t`No cloud sync`}
+            detail={t`Your conversations and settings never leave your machine`}
+          />
+          <PrivacyRow
+            icon={<CheckCircle2 className="size-4 text-emerald-500" />}
+            label={t`Fonts loaded locally`}
+            detail={t`No connection to Google Fonts or external CDNs`}
+          />
+          <PrivacyRow
+            icon={
+              isLocal ? (
+                <CheckCircle2 className="size-4 text-emerald-500" />
+              ) : (
+                <AlertTriangle className="size-4 text-amber-500" />
+              )
+            }
+            label={t`Model inference`}
+            detail={
+              isLocal
+                ? t`AI models run locally on your hardware`
+                : t`Some inference may use cloud models`
+            }
+          />
+        </div>
+      </div>
+
+      {/* Connection status */}
+      <div className="mb-8 rounded-xl border border-border bg-card p-5">
+        <div className="mb-3 flex items-center gap-2.5">
+          <Globe className="size-5 text-muted-foreground" strokeWidth={1.8} />
+          <h3 className="text-lg font-medium text-foreground">{t`Connection Details`}</h3>
+        </div>
+        <div className="space-y-2 text-sm">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{t`API endpoint`}</span>
+            <span className="font-mono text-xs text-foreground">
+              {typeof window !== "undefined" ? window.location.origin : "localhost:3100"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{t`Authentication`}</span>
+            <span className="text-foreground">{t`Self-hosted (better-auth)`}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{t`Database`}</span>
+            <span className="text-foreground">{t`PostgreSQL (local)`}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{t`Sandbox`}</span>
+            <span className="text-foreground">
+              {isLocal ? t`Local Docker` : sandboxProvider ?? t`Not configured`}
+            </span>
+          </div>
+          {email ? (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{t`Account`}</span>
+              <span className="font-mono text-xs text-foreground">{email}</span>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="space-y-3">
+        <h3 className="text-lg font-medium text-foreground">{t`Data Controls`}</h3>
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <Button variant="outline" size="sm" onClick={handleExportData}>
+            <Download className="size-4" />
+            <span>{t`Export my data`}</span>
+          </Button>
+        </div>
+        <div className="mt-4 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
+          <div className="mb-2 flex items-center gap-2 text-destructive">
+            <Trash2 className="size-4" />
+            <span className="font-medium">{t`Delete account`}</span>
+          </div>
+          <p className="mb-3 text-xs text-destructive/80">
+            {t`Permanently delete your account, all conversations, and associated data. This action cannot be undone.`}
+          </p>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={handleDeleteAccount}
+            disabled={deleting}
+          >
+            {deleting ? t`Deleting...` : t`Delete my account`}
+          </Button>
+          {deleteError ? (
+            <p className="mt-2 text-xs text-destructive">{deleteError}</p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PrivacyRow({
+  icon,
+  label,
+  detail,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  detail: string;
+}) {
+  return (
+    <div className="flex items-start gap-3">
+      <span className="mt-0.5 shrink-0">{icon}</span>
+      <div>
+        <span className="font-medium text-foreground">{label}</span>
+        <span className="ml-1.5 text-muted-foreground">{detail}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/pages/SettingsOverlay.tsx b/apps/web/src/pages/SettingsOverlay.tsx
index 63b1deb..d5d7003 100644
--- a/apps/web/src/pages/SettingsOverlay.tsx
+++ b/apps/web/src/pages/SettingsOverlay.tsx
@@ -1,17 +1,7 @@
 import { useLingui } from "@lingui/react/macro";
 import type { AvatarStyle, SpaceMemoryConfig } from "@rakazo/contracts";
 import { Button, Dialog, DialogClose, DialogContent, DialogTitle } from "@rakazo/ui-web";
-import {
-  Brain,
-  CloudDownload,
-  Cpu,
-  Gauge,
-  LayoutGrid,
-  Monitor,
-  Settings,
-  Volume2,
-  XIcon,
-} from "lucide-react";
+import { Brain, CloudDownload, Cpu, Gauge, LayoutGrid, Monitor, Settings, ShieldCheck, Volume2, XIcon } from "lucide-react";
 import { type ComponentType, useEffect, useRef, useState } from "react";
 import { computersAreUnavailable } from "../components/ComputersUnavailableHint";
 import type { TradingBotUiState } from "../lib/trading-bot-status";
@@ -24,6 +14,7 @@ import {
 import { MemorySettingsOverlay } from "./MemorySettingsOverlay";
 import { ModelSettingsOverlay } from "./ModelSettingsOverlay";
 import { PluginsOverlay } from "./PluginsOverlay";
+import { PrivacySettingsPanel } from "./PrivacySettingsOverlay";
 import { VoiceSettingsOverlay } from "./VoiceSettingsOverlay";
 
 export type SettingsSection =
@@ -34,7 +25,8 @@ export type SettingsSection =
   | "voice"
   | "usage"
   | "computer"
-  | "updates";
+  | "updates"
+  | "privacy";
 
 type NavItem = {
   id: SettingsSection;
@@ -107,6 +99,7 @@ export function SettingsOverlay({
     { id: "usage", label: t`Usage`, icon: Gauge },
     ...(showComputer ? [{ id: "computer" as const, label: t`Computer`, icon: Monitor }] : []),
     { id: "updates", label: t`Updates`, icon: CloudDownload },
+    { id: "privacy", label: t`Privacy & Data`, icon: ShieldCheck },
   ];
 
   const sectionTitle =
@@ -268,6 +261,14 @@ export function SettingsOverlay({
                   activeBotId={activeBotId}
                 />
               ) : null}
+              {section === "privacy" ? (
+                <PrivacySettingsPanel
+                  email={email ?? undefined}
+                  isDeploymentOwner={isDeploymentOwner}
+                  sandboxProvider={sandboxProvider}
+                  onAccountDeleted={onClose}
+                />
+              ) : null}
             </div>
           </div>
         </div>
diff --git a/apps/web/src/pages/Shell.tsx b/apps/web/src/pages/Shell.tsx
index 65c7aa9..a8de5f1 100644
--- a/apps/web/src/pages/Shell.tsx
+++ b/apps/web/src/pages/Shell.tsx
@@ -3705,10 +3705,18 @@ export function ShellPage() {
                           <SortableGroup key={`proj-${group.key}`} group={group}>
                             <div data-sidebar-group={group.key}>
                               {group.title ? (
-                                <div className="flex items-center pt-3 pb-0.5">
+                                <div className="flex items-center pt-3 pb-0.5 relative">
+                            {/* Drag grip — positioned to the left of the title text */}
                             <button
                               type="button"
-                              className="flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg px-2.5 py-1 text-ui-label font-semibold tracking-wider uppercase text-muted-foreground/60 hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
+                              className="absolute left-1 top-1/2 -translate-y-1/2 w-6 h-6 rounded flex items-center justify-center text-muted-foreground/30 hover:text-muted-foreground/70 active:text-muted-foreground transition-colors cursor-grab active:cursor-grabbing"
+                              aria-label="Drag to reorder"
+                            >
+                              <GripVertical className="size-icon-sm" strokeWidth={2} />
+                            </button>
+                            <button
+                              type="button"
+                              className="flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg pl-8 py-1 text-ui-label font-semibold tracking-wider uppercase text-muted-foreground/60 hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
                               onClick={() => {
                                 if (group.emptySpaceId) {
                                   const space = spaces.find(