First draft
This commit is contained in:
sandrodach committed
1 parent
aba52f2b3c
commit
84bc6884b0
37 files changed
+6697
-27
No files matched your search
@@ -0,0 +1,423 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Layers,
|
||||
CheckSquare,
|
||||
FileText,
|
||||
ShoppingCart,
|
||||
Webhook,
|
||||
Brain,
|
||||
LogOut,
|
||||
User as UserIcon,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import { DashboardStats, SharedList, Thought, User } from './lib/types';
|
||||
import { api, clearToken, getToken } from './lib/api';
|
||||
import { InstantCaptureBar } from './features/capture/InstantCaptureBar';
|
||||
import { TriageDeck } from './features/triage/TriageDeck';
|
||||
import { TasksView } from './features/triage/TasksView';
|
||||
import { WorkspaceView } from './features/workspace/WorkspaceView';
|
||||
import { SharedListsView } from './features/lists/SharedListsView';
|
||||
import { EcosystemView } from './features/settings/EcosystemView';
|
||||
|
||||
type ActiveTab = 'triage' | 'tasks' | 'workspace' | 'lists' | 'ecosystem';
|
||||
|
||||
export const App: React.FC = () => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [stats, setStats] = useState<DashboardStats>({
|
||||
inboxCount: 0,
|
||||
tasksOpenCount: 0,
|
||||
tasksDoneCount: 0,
|
||||
docsCount: 0,
|
||||
listsCount: 0,
|
||||
discardedCount: 0,
|
||||
});
|
||||
const [deck, setDeck] = useState<Thought[]>([]);
|
||||
const [lists, setLists] = useState<SharedList[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>('triage');
|
||||
const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
|
||||
const [captureFocusCount, setCaptureFocusCount] = useState(0);
|
||||
|
||||
// Auth Modal State for switching or registering additional family members
|
||||
const [showAuthModal, setShowAuthModal] = useState(false);
|
||||
const [authMode, setAuthMode] = useState<'login' | 'register'>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const [authError, setAuthError] = useState('');
|
||||
|
||||
const refreshAll = async () => {
|
||||
try {
|
||||
const [meRes, deckRes, listsRes] = await Promise.all([
|
||||
api.getMe(),
|
||||
api.getTriageDeck(),
|
||||
api.getAllLists(),
|
||||
]);
|
||||
setUser(meRes.user);
|
||||
setStats(meRes.stats);
|
||||
setDeck(deckRes);
|
||||
setLists(listsRes);
|
||||
} catch {
|
||||
// Fallback to quickStart session
|
||||
try {
|
||||
const qs = await api.quickStart();
|
||||
setUser(qs.user);
|
||||
const [st, dk, ls] = await Promise.all([
|
||||
api.getStats(),
|
||||
api.getTriageDeck(),
|
||||
api.getAllLists(),
|
||||
]);
|
||||
setStats(st);
|
||||
setDeck(dk);
|
||||
setLists(ls);
|
||||
} catch {
|
||||
// Offline or waiting for server
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
if (!getToken()) {
|
||||
try {
|
||||
await api.quickStart();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
await api.flushOfflineQueue();
|
||||
await refreshAll();
|
||||
};
|
||||
init();
|
||||
|
||||
const onOnline = async () => {
|
||||
const synced = await api.flushOfflineQueue();
|
||||
if (synced > 0) refreshAll();
|
||||
};
|
||||
window.addEventListener('online', onOnline);
|
||||
return () => window.removeEventListener('online', onOnline);
|
||||
}, []);
|
||||
|
||||
const handleCaptured = (thought: Thought) => {
|
||||
setDeck((prev) => [thought, ...prev]);
|
||||
setStats((prev) => ({ ...prev, inboxCount: prev.inboxCount + 1 }));
|
||||
refreshAll();
|
||||
};
|
||||
|
||||
const handleOpenDocument = (docId: string) => {
|
||||
setSelectedDocId(docId);
|
||||
setActiveTab('workspace');
|
||||
};
|
||||
|
||||
const handleAuthSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setAuthError('');
|
||||
try {
|
||||
if (authMode === 'login') {
|
||||
await api.login(email, password);
|
||||
} else {
|
||||
await api.register(email, password, displayName);
|
||||
}
|
||||
setShowAuthModal(false);
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
setDisplayName('');
|
||||
await refreshAll();
|
||||
} catch (err: any) {
|
||||
setAuthError(err.message || 'Authentifizierung fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0b0f19] text-[#e3e3e3] flex flex-col">
|
||||
{/* Ambient Top Gemini Glow */}
|
||||
<div className="pointer-events-none fixed top-0 left-1/2 -translate-x-1/2 w-[560px] h-[180px] bg-gradient-to-r from-[#8ab4f8]/10 via-[#c58af9]/10 to-[#81c995]/10 blur-3xl -z-10" />
|
||||
|
||||
{/* Header Bar */}
|
||||
<header className="sticky top-0 z-30 backdrop-blur-xl bg-[#0b0f19]/85 border-b border-white/[0.06]">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
|
||||
{/* Brand Logo */}
|
||||
<div
|
||||
onClick={() => {
|
||||
setActiveTab('triage');
|
||||
setCaptureFocusCount((c) => c + 1);
|
||||
}}
|
||||
className="flex items-center gap-2.5 cursor-pointer group"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-full bg-[#1e1f20] gemini-border flex items-center justify-center group-hover:border-[#8ab4f8]/50 transition-colors">
|
||||
<Brain className="w-5 h-5 text-[#8ab4f8]" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-bold text-lg tracking-tight gemini-gradient-text">
|
||||
MindSift
|
||||
</span>
|
||||
<span className="hidden md:inline-block ml-2.5 text-xs text-[#9aa0a6]">
|
||||
Der Kopf frei in drei Sekunden.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right User Pill */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
className="h-9 px-3.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs font-medium text-[#e3e3e3] flex items-center gap-2 transition-colors"
|
||||
title="Benutzer wechseln oder Familienmitglied registrieren"
|
||||
>
|
||||
<UserIcon className="w-3.5 h-3.5 text-[#8ab4f8]" />
|
||||
<span>{user?.displayName || 'Lokal'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content Container */}
|
||||
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-24">
|
||||
{/* Global Instant Capture Section (Always Ready at Top) */}
|
||||
<section className="mb-7">
|
||||
<InstantCaptureBar
|
||||
onCaptured={handleCaptured}
|
||||
autoFocusTrigger={captureFocusCount}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Pill Navigation Tabs */}
|
||||
<nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
|
||||
<button
|
||||
onClick={() => setActiveTab('triage')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
<span>Triage-Deck</span>
|
||||
{stats.inboxCount > 0 && (
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-bold ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#0b0f19] text-[#8ab4f8]'
|
||||
: 'bg-[#8ab4f8]/20 text-[#8ab4f8]'
|
||||
}`}
|
||||
>
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('tasks')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
<span>Aufgaben</span>
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-bold ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#0b0f19] text-[#8ab4f8]'
|
||||
: 'bg-[#81c995]/20 text-[#81c995]'
|
||||
}`}
|
||||
>
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('workspace')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
<span>Workspace</span>
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#0b0f19] text-[#8ab4f8]'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6]'
|
||||
}`}
|
||||
>
|
||||
{stats.docsCount}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('lists')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'lists'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
<span>Geteilte Listen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('ecosystem')}
|
||||
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'ecosystem'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
|
||||
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Active View Content */}
|
||||
<section>
|
||||
{activeTab === 'triage' && (
|
||||
<TriageDeck
|
||||
deck={deck}
|
||||
lists={lists}
|
||||
onDeckChange={refreshAll}
|
||||
onOpenDocument={handleOpenDocument}
|
||||
onFocusCapture={() => setCaptureFocusCount((c) => c + 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'tasks' && (
|
||||
<TasksView
|
||||
onRefreshStats={refreshAll}
|
||||
onOpenDocument={handleOpenDocument}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'workspace' && (
|
||||
<WorkspaceView
|
||||
initialDocId={selectedDocId}
|
||||
onStatsChange={refreshAll}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'lists' && (
|
||||
<SharedListsView onRefreshGlobal={refreshAll} />
|
||||
)}
|
||||
|
||||
{activeTab === 'ecosystem' && (
|
||||
<EcosystemView onIngested={refreshAll} />
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Account Switcher / Registration Modal */}
|
||||
{showAuthModal && (
|
||||
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-[#8ab4f8]" />
|
||||
<h3 className="text-lg font-bold text-[#e3e3e3]">
|
||||
{authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAuthModal(false)}
|
||||
className="px-3 py-1 rounded-full bg-[#282a2c] text-xs text-[#9aa0a6] hover:text-[#e3e3e3]"
|
||||
>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{user && (
|
||||
<div className="mb-5 p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between">
|
||||
<div className="text-xs">
|
||||
<span className="text-[#9aa0a6]">Aktuell aktiv: </span>
|
||||
<strong className="text-[#e3e3e3]">{user.displayName}</strong>
|
||||
<span className="text-[#5f6368] ml-1">({user.email})</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
clearToken();
|
||||
await api.quickStart();
|
||||
await refreshAll();
|
||||
setShowAuthModal(false);
|
||||
}}
|
||||
className="text-xs text-[#8ab4f8] hover:underline flex items-center gap-1"
|
||||
>
|
||||
<LogOut className="w-3 h-3" /> Standard
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthMode('login')}
|
||||
className={`flex-1 h-9 rounded-full text-xs font-semibold ${
|
||||
authMode === 'login'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19]'
|
||||
: 'bg-[#131314] text-[#9aa0a6]'
|
||||
}`}
|
||||
>
|
||||
Anmelden
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthMode('register')}
|
||||
className={`flex-1 h-9 rounded-full text-xs font-semibold ${
|
||||
authMode === 'register'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19]'
|
||||
: 'bg-[#131314] text-[#9aa0a6]'
|
||||
}`}
|
||||
>
|
||||
Registrieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleAuthSubmit} className="space-y-3">
|
||||
{authMode === 'register' && (
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder="Anzeigename (z. B. Lisa)"
|
||||
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="E-Mail-Adresse"
|
||||
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Passwort (mind. 4 Zeichen)"
|
||||
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
|
||||
required
|
||||
/>
|
||||
|
||||
{authError && <p className="text-xs text-[#f28b82] px-2">{authError}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full h-11 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
|
||||
>
|
||||
{authMode === 'login' ? 'Einloggen' : 'Konto erstellen & starten'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Reference in new issue
Block a user