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)
This commit is contained in:
parent
fccb4cc6c7
commit
4b58776584
@ -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>
|
||||
|
||||
28
apps/web/src/components/DataTrustPanel.tsx
Normal file
28
apps/web/src/components/DataTrustPanel.tsx
Normal file
@ -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>
|
||||
);
|
||||
});
|
||||
@ -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>
|
||||
);
|
||||
});
|
||||
|
||||
212
apps/web/src/pages/PrivacySettingsOverlay.tsx
Normal file
212
apps/web/src/pages/PrivacySettingsOverlay.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user