sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: overhaul design to authentic Google Gemini Material 3 Dark theme
MindSift CI & Docker Release / Lint, Build & Unit Tests (push) Successful in 2m8s
Details
MindSift CI & Docker Release / Build & Push Docker Image (push) Successful in 1m45s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 18:32:03 +02:00
1 parent 10323867e9
commit 31aa43c460
11 files changed
+413 -444
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/settings/EcosystemView.tsx
+33 -33
View File
@@ -94,16 +94,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
return (
<div className="max-w-4xl mx-auto space-y-6">
{/* Section 1: API Keys for Smarthome & Automation */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="flex items-center gap-3 mb-2">
<div className="w-10 h-10 rounded-full bg-[#8ab4f8]/15 flex items-center justify-center">
<Key className="w-5 h-5 text-[#8ab4f8]" />
<div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
<Key className="w-5 h-5 text-[#a8c7fa]" />
</div>
<div>
<h3 className="text-lg font-bold text-[#e3e3e3]">
<h3 className="text-lg font-medium text-[#e3e3e3]">
Webhooks & Ingestion API-Schlüssel
</h3>
<p className="text-xs sm:text-sm text-[#9aa0a6]">
<p className="text-xs sm:text-sm text-[#8e918f]">
Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
</p>
</div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
value={newKeyName}
onChange={(e) => setNewKeyName(e.target.value)}
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
/>
<button
type="submit"
className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:bg-[#a1c2fa] transition-colors"
className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
>
<Plus className="w-4 h-4" />
<span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</form>
{newlyCreatedKey && (
<div className="mt-4 p-4 rounded-2xl bg-[#81c995]/15 border border-[#81c995]/40 flex flex-wrap items-center justify-between gap-3">
<div className="mt-4 p-4 rounded-2xl bg-[#a8dab5]/10 border border-[#a8dab5]/30 flex flex-wrap items-center justify-between gap-3">
<div className="min-w-0">
<p className="text-xs font-semibold text-[#81c995] mb-1">
<p className="text-xs font-medium text-[#a8dab5] mb-1">
Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
</p>
<code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
<button
onClick={() => handleCopy(newlyCreatedKey)}
className="h-9 px-4 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs flex items-center gap-1.5"
className="h-9 px-4 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-xs flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
>
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -149,27 +149,27 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
{/* Active Keys List */}
<div className="mt-5 space-y-2">
{keys.length === 0 ? (
<p className="text-xs text-[#5f6368] py-2">
<p className="text-xs text-[#8e918f] py-2">
Noch keine dedizierten API-Schlüssel hinterlegt.
</p>
) : (
keys.map((k) => (
<div
key={k.id}
className="p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between gap-3"
className="p-3.5 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between gap-3"
>
<div>
<span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span>
<span className="ml-3 text-xs font-mono text-[#8ab4f8]">{k.keyPrefix}</span>
<span className="ml-3 text-xs font-mono text-[#a8c7fa]">{k.keyPrefix}</span>
{k.lastUsedAt && (
<span className="ml-3 text-xs text-[#5f6368]">
<span className="ml-3 text-xs text-[#8e918f]">
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
</span>
)}
</div>
<button
onClick={() => handleDeleteKey(k.id)}
className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
@@ -180,16 +180,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{/* Section 2: Interactive Smarthome Webhook Simulator */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-full bg-[#c58af9]/15 flex items-center justify-center">
<Webhook className="w-5 h-5 text-[#c58af9]" />
<div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
<Webhook className="w-5 h-5 text-[#a8c7fa]" />
</div>
<div>
<h3 className="text-lg font-bold text-[#e3e3e3]">
<h3 className="text-lg font-medium text-[#e3e3e3]">
Live Smarthome Webhook-Simulator
</h3>
<p className="text-xs sm:text-sm text-[#9aa0a6]">
<p className="text-xs sm:text-sm text-[#8e918f]">
Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
</p>
</div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
setSimTitle(preset.text);
setSimPriority(preset.prio);
}}
className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3]"
className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] transition-colors"
>
{preset.label}
</button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
type="text"
value={simTitle}
onChange={(e) => setSimTitle(e.target.value)}
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
/>
<button
type="button"
onClick={handleSimulateWebhook}
className="h-11 px-6 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:opacity-90 transition-opacity"
className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
>
<Zap className="w-4 h-4" />
<span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{simStatus && (
<p className="mt-3 text-xs font-medium text-[#81c995]">{simStatus}</p>
<p className="mt-3 text-xs font-medium text-[#a8dab5]">{simStatus}</p>
)}
{/* Code Example Snippets */}
<div className="mt-6 space-y-3">
<div className="flex items-center gap-2 text-xs font-semibold text-[#9aa0a6]">
<Terminal className="w-3.5 h-3.5 text-[#8ab4f8]" />
<div className="flex items-center gap-2 text-xs font-medium text-[#8e918f]">
<Terminal className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>cURL / Home Assistant REST Command:</span>
</div>
<pre className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs text-[#8ab4f8] overflow-x-auto">
<pre className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs text-[#a8dab5] overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
-H "Content-Type: application/json" \\
-d '{
@@ -255,16 +255,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{/* Section 3: Data Sovereignty & Export */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-[#81c995]/15 flex items-center justify-center flex-shrink-0">
<ShieldCheck className="w-5 h-5 text-[#81c995]" />
<div className="w-10 h-10 rounded-full bg-[#a8dab5]/15 flex items-center justify-center flex-shrink-0">
<ShieldCheck className="w-5 h-5 text-[#a8dab5]" />
</div>
<div>
<h3 className="text-base font-bold text-[#e3e3e3]">
<h3 className="text-base font-medium text-[#e3e3e3]">
100 % Datensouveränität & Komplett-Export
</h3>
<p className="text-xs sm:text-sm text-[#9aa0a6]">
<p className="text-xs sm:text-sm text-[#8e918f]">
Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
</p>
</div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
<button
onClick={handleFullExport}
className="h-11 px-6 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-sm flex items-center gap-2 hover:opacity-90 flex-shrink-0"
className="h-11 px-6 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-sm flex items-center gap-2 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
>
<Download className="w-4 h-4" />
<span>Komplett-Backup (.json)</span>