feat: complete triage, multi-task lists, kanban, workspace wiki, and admin management
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 16s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 16s
This commit is contained in:
sandrodach committed
1 parent
5c4e130862
commit
4ef71b61cd
12 files changed
+3940
-664
No files matched your search
+12
-173
@@ -4,14 +4,7 @@ import {
|
||||
CheckSquare,
|
||||
FileText,
|
||||
ShoppingCart,
|
||||
Webhook,
|
||||
Brain,
|
||||
LogOut,
|
||||
User as UserIcon,
|
||||
Bell,
|
||||
Shield,
|
||||
ChevronRight,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import { DashboardStats, SharedList, Thought, User } from './lib/types';
|
||||
import { api, clearToken, getToken, triggerHaptic } from './lib/api';
|
||||
@@ -20,9 +13,9 @@ 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';
|
||||
import { SettingsModal } from './features/settings/SettingsModal';
|
||||
|
||||
type ActiveTab = 'triage' | 'tasks' | 'workspace' | 'lists' | 'ecosystem';
|
||||
type ActiveTab = 'triage' | 'tasks' | 'workspace' | 'lists';
|
||||
|
||||
export const App: React.FC = () => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
@@ -41,14 +34,7 @@ export const App: React.FC = () => {
|
||||
const [captureFocusCount, setCaptureFocusCount] = useState(0);
|
||||
const [refreshRevision, setRefreshRevision] = useState(0);
|
||||
|
||||
// Profile & Auth Modal State (aligned with Template Screen 2)
|
||||
const [showProfileModal, setShowProfileModal] = 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 [notificationsEnabled, setNotificationsEnabled] = useState(true);
|
||||
|
||||
const refreshAll = async () => {
|
||||
try {
|
||||
@@ -129,26 +115,6 @@ export const App: React.FC = () => {
|
||||
setCaptureFocusCount((c) => c + 1);
|
||||
};
|
||||
|
||||
const handleAuthSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setAuthError('');
|
||||
triggerHaptic(15);
|
||||
try {
|
||||
if (authMode === 'login') {
|
||||
await api.login(email, password);
|
||||
} else {
|
||||
await api.register(email, password, displayName);
|
||||
}
|
||||
setShowProfileModal(false);
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
setDisplayName('');
|
||||
await refreshAll();
|
||||
} catch (err: any) {
|
||||
setAuthError(err.message || 'Authentifizierung fehlgeschlagen');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
triggerHaptic(20);
|
||||
clearToken();
|
||||
@@ -270,16 +236,6 @@ export const App: React.FC = () => {
|
||||
<span>Geteilte Listen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('ecosystem');
|
||||
}}
|
||||
className={`tab-btn ${activeTab === 'ecosystem' ? 'tab-btn-active' : ''}`}
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -316,137 +272,20 @@ export const App: React.FC = () => {
|
||||
{activeTab === 'lists' && (
|
||||
<SharedListsView onRefreshGlobal={refreshAll} />
|
||||
)}
|
||||
|
||||
{activeTab === 'ecosystem' && (
|
||||
<EcosystemView onIngested={refreshAll} />
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Profile & Settings Modal styled identically to Template Screen 2 */}
|
||||
{/* Profile, Settings, Discord Alarms, Webhooks, Teams & Admin Modal */}
|
||||
{showProfileModal && (
|
||||
<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-sm bg-[#222428] border border-white/[0.08] shadow-2xl p-4 overflow-hidden">
|
||||
{/* Screen 2: Top Profile Card */}
|
||||
<div className="flex flex-col items-center text-center mb-4">
|
||||
<div className="w-20 h-20 rounded-full bg-[#1d8cf8] text-white text-2xl font-bold flex items-center justify-center shadow-lg mb-3 ring-4 ring-white/[0.05]">
|
||||
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white tracking-tight">
|
||||
{user?.displayName || 'Standard Benutzer'}
|
||||
</h2>
|
||||
<p className="text-xs text-zinc-400 mt-0.5">
|
||||
{user?.email || 'lokal@mindsift.local'}
|
||||
</p>
|
||||
|
||||
{/* Template Screen 2: Blue Pill Edit Button */}
|
||||
<button
|
||||
onClick={() => setAuthMode(authMode === 'login' ? 'register' : 'login')}
|
||||
className="mt-3 px-5 py-1.5 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white text-xs font-semibold shadow-sm transition-all"
|
||||
>
|
||||
{authMode === 'login' ? 'Konto wechseln' : 'Neues Konto anlegen'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Settings Sections */}
|
||||
<div className="space-y-2 mb-3">
|
||||
{/* Notification toggle */}
|
||||
<div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
|
||||
<Bell className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-white">Benachrichtigungen</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setNotificationsEnabled(!notificationsEnabled)}
|
||||
className={`w-10 h-5 rounded-full transition-colors relative p-0.5 ${
|
||||
notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-4 h-4 rounded-full bg-white transition-transform ${
|
||||
notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Security info */}
|
||||
<div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
|
||||
<Shield className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-medium text-white block">Sicherheit</span>
|
||||
<span className="text-[10px] text-zinc-400">Lokale SQLite Verschlüsselung</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-zinc-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auth Switcher Form if switching accounts */}
|
||||
<form onSubmit={handleAuthSubmit} className="space-y-2 mb-3">
|
||||
{authMode === 'register' && (
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder="Anzeigename"
|
||||
className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="E-Mail"
|
||||
className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Passwort"
|
||||
className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
|
||||
required
|
||||
/>
|
||||
|
||||
{authError && <p className="text-xs text-red-400 px-1">{authError}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full h-8 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-medium text-xs transition-colors shadow-sm"
|
||||
>
|
||||
{authMode === 'login' ? 'Anmelden' : 'Registrieren'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Log Out Row matching Template Screen 2 */}
|
||||
<div className="pt-2 border-t border-white/[0.06] flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="text-xs text-[#ef4444] hover:underline flex items-center gap-1.5 font-medium py-1"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
<span>Abmelden</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowProfileModal(false)}
|
||||
className="px-4 py-1.5 rounded-full bg-[#282a2f] hover:bg-[#32353a] text-xs text-zinc-300 font-medium transition-colors"
|
||||
>
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsModal
|
||||
currentUser={user}
|
||||
onClose={() => setShowProfileModal(false)}
|
||||
onUserUpdated={(u) => {
|
||||
setUser(u);
|
||||
refreshAll();
|
||||
}}
|
||||
onLoggedOut={handleLogout}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,953 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
X,
|
||||
User as UserIcon,
|
||||
Shield,
|
||||
Bell,
|
||||
Key,
|
||||
Users,
|
||||
Settings as SettingsIcon,
|
||||
Plus,
|
||||
Trash2,
|
||||
Check,
|
||||
Copy,
|
||||
RefreshCw,
|
||||
LogOut,
|
||||
Terminal,
|
||||
Download,
|
||||
AlertTriangle,
|
||||
Lock,
|
||||
Share2,
|
||||
} from 'lucide-react';
|
||||
import { APIKey, Organization, SystemSettings, Team, User } from '../../lib/types';
|
||||
import { api, clearToken, getToken, triggerHaptic } from '../../lib/api';
|
||||
|
||||
interface SettingsModalProps {
|
||||
currentUser: User | null;
|
||||
onClose: () => void;
|
||||
onUserUpdated: (u: User) => void;
|
||||
onLoggedOut: () => void;
|
||||
}
|
||||
|
||||
type SettingsTab = 'profile' | 'alarms' | 'webhooks' | 'teams' | 'admin';
|
||||
|
||||
export const SettingsModal: React.FC<SettingsModalProps> = ({
|
||||
currentUser,
|
||||
onClose,
|
||||
onUserUpdated,
|
||||
onLoggedOut,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<SettingsTab>('profile');
|
||||
|
||||
// --- Profile State ---
|
||||
const [displayName, setDisplayName] = useState(currentUser?.displayName || '');
|
||||
const [email, setEmail] = useState(currentUser?.email || '');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [profileMsg, setProfileMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
|
||||
|
||||
// --- Alarms / Discord State ---
|
||||
const [discordWebhookUrl, setDiscordWebhookUrl] = useState(currentUser?.discordWebhookUrl || '');
|
||||
const [notifyBeforeMinutes, setNotifyBeforeMinutes] = useState(currentUser?.notifyBeforeMinutes || 30);
|
||||
const [alarmMsg, setAlarmMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
|
||||
const [testingDiscord, setTestingDiscord] = useState(false);
|
||||
|
||||
// --- Webhooks / API Keys State ---
|
||||
const [apiKeys, setApiKeys] = useState<APIKey[]>([]);
|
||||
const [newKeyName, setNewKeyName] = useState('');
|
||||
const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null);
|
||||
const [copiedKey, setCopiedKey] = useState(false);
|
||||
|
||||
// --- Organizations & Teams State ---
|
||||
const [orgs, setOrgs] = useState<Organization[]>([]);
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
const [newOrgName, setNewOrgName] = useState('');
|
||||
const [selectedOrgId, setSelectedOrgId] = useState('');
|
||||
const [newTeamName, setNewTeamName] = useState('');
|
||||
const [newTeamDesc, setNewTeamDesc] = useState('');
|
||||
|
||||
// --- Admin State ---
|
||||
const [adminUsers, setAdminUsers] = useState<User[]>([]);
|
||||
const [systemSettings, setSystemSettings] = useState<SystemSettings>({
|
||||
sharingMode: 'teams_only',
|
||||
allowRegistration: true,
|
||||
instanceName: 'MindSift',
|
||||
});
|
||||
const [newAdminUserEmail, setNewAdminUserEmail] = useState('');
|
||||
const [newAdminUserPassword, setNewAdminUserPassword] = useState('');
|
||||
const [newAdminUserDisplayName, setNewAdminUserDisplayName] = useState('');
|
||||
const [newAdminUserRole, setNewAdminUserRole] = useState<'member' | 'admin'>('member');
|
||||
const [resetPwdUserId, setResetPwdUserId] = useState<string | null>(null);
|
||||
const [resetPwdVal, setResetPwdVal] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
loadKeys();
|
||||
loadOrgsAndTeams();
|
||||
if (currentUser?.role === 'admin') {
|
||||
loadAdminData();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadKeys = async () => {
|
||||
try {
|
||||
const keys = await api.getAPIKeys();
|
||||
setApiKeys(keys);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
const loadOrgsAndTeams = async () => {
|
||||
try {
|
||||
const [o, t] = await Promise.all([api.getOrganizations(), api.getUserTeams()]);
|
||||
setOrgs(o);
|
||||
setTeams(t);
|
||||
if (o.length > 0 && !selectedOrgId) {
|
||||
setSelectedOrgId(o[0].id);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
const loadAdminData = async () => {
|
||||
try {
|
||||
const [u, s] = await Promise.all([api.adminGetUsers(), api.adminGetSettings()]);
|
||||
setAdminUsers(u);
|
||||
setSystemSettings(s);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
// --- Profile Handlers ---
|
||||
const handleSaveProfile = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setProfileMsg(null);
|
||||
try {
|
||||
const patch: any = { displayName, email };
|
||||
if (newPassword.trim()) {
|
||||
patch.password = newPassword.trim();
|
||||
}
|
||||
const updated = await api.updateSettings(patch);
|
||||
onUserUpdated(updated);
|
||||
setNewPassword('');
|
||||
setProfileMsg({ type: 'ok', text: 'Profil erfolgreich gespeichert.' });
|
||||
} catch (err: any) {
|
||||
setProfileMsg({ type: 'err', text: err.message || 'Fehler beim Speichern' });
|
||||
}
|
||||
};
|
||||
|
||||
// --- Alarms Handlers ---
|
||||
const handleSaveAlarms = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setAlarmMsg(null);
|
||||
try {
|
||||
const updated = await api.updateSettings({
|
||||
discordWebhookUrl: discordWebhookUrl.trim(),
|
||||
notifyBeforeMinutes: Number(notifyBeforeMinutes),
|
||||
});
|
||||
onUserUpdated(updated);
|
||||
setAlarmMsg({ type: 'ok', text: 'Discord Alarm-Einstellungen gespeichert.' });
|
||||
} catch (err: any) {
|
||||
setAlarmMsg({ type: 'err', text: err.message || 'Fehler beim Speichern' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleTestDiscordWebhook = async () => {
|
||||
if (!discordWebhookUrl.trim()) {
|
||||
setAlarmMsg({ type: 'err', text: 'Bitte zuerst eine Discord Webhook URL eingeben.' });
|
||||
return;
|
||||
}
|
||||
setTestingDiscord(true);
|
||||
setAlarmMsg(null);
|
||||
try {
|
||||
const res = await fetch(discordWebhookUrl.trim(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: '🔔 **MindSift Test-Alarm**: Verbindung zu Discord erfolgreich hergestellt!',
|
||||
embeds: [
|
||||
{
|
||||
title: 'MindSift Aufgaben-Alarm eingerichtet',
|
||||
description: 'Du erhältst hier Benachrichtigungen, wenn Aufgaben fällig werden.',
|
||||
color: 3066993,
|
||||
footer: { text: 'MindSift System Test' },
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error(`Discord antwortete mit Status ${res.status}`);
|
||||
}
|
||||
setAlarmMsg({ type: 'ok', text: '✅ Test-Nachricht erfolgreich an Discord gesendet!' });
|
||||
} catch (err: any) {
|
||||
setAlarmMsg({ type: 'err', text: `Fehler: ${err.message}` });
|
||||
} finally {
|
||||
setTestingDiscord(false);
|
||||
}
|
||||
};
|
||||
|
||||
// --- Webhook / Key Handlers ---
|
||||
const handleCreateAPIKey = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
triggerHaptic(15);
|
||||
try {
|
||||
const created = await api.createAPIKey(newKeyName.trim() || 'Home Assistant / Script');
|
||||
if (created.rawKey) {
|
||||
setNewlyCreatedKey(created.rawKey);
|
||||
}
|
||||
setNewKeyName('');
|
||||
loadKeys();
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAPIKey = async (id: string) => {
|
||||
if (!window.confirm('Schlüssel widerrufen?')) return;
|
||||
await api.deleteAPIKey(id);
|
||||
loadKeys();
|
||||
};
|
||||
|
||||
const handleCopy = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopiedKey(true);
|
||||
setTimeout(() => setCopiedKey(false), 2000);
|
||||
};
|
||||
|
||||
const handleExportData = async () => {
|
||||
const data = await api.exportAll();
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
||||
type: 'application/json;charset=utf-8',
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `mindsift-backup-${new Date().toISOString().slice(0, 10)}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// --- Orgs & Teams Handlers ---
|
||||
const handleCreateOrg = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newOrgName.trim()) return;
|
||||
try {
|
||||
const created = await api.createOrganization(newOrgName.trim());
|
||||
setOrgs((prev) => [...prev, created]);
|
||||
setSelectedOrgId(created.id);
|
||||
setNewOrgName('');
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateTeam = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedOrgId || !newTeamName.trim()) return;
|
||||
try {
|
||||
const created = await api.createOrgTeam(selectedOrgId, newTeamName.trim(), newTeamDesc.trim());
|
||||
setTeams((prev) => [...prev, created]);
|
||||
setNewTeamName('');
|
||||
setNewTeamDesc('');
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// --- Admin Handlers ---
|
||||
const handleUpdateSystemSettings = async (patch: Partial<SystemSettings>) => {
|
||||
const next = { ...systemSettings, ...patch };
|
||||
setSystemSettings(next);
|
||||
try {
|
||||
await api.adminUpdateSettings(next);
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdminCreateUser = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const created = await api.adminCreateUser({
|
||||
email: newAdminUserEmail,
|
||||
password: newAdminUserPassword,
|
||||
displayName: newAdminUserDisplayName || newAdminUserEmail.split('@')[0],
|
||||
role: newAdminUserRole,
|
||||
});
|
||||
setAdminUsers((prev) => [...prev, created]);
|
||||
setNewAdminUserEmail('');
|
||||
setNewAdminUserPassword('');
|
||||
setNewAdminUserDisplayName('');
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleUserActive = async (u: User) => {
|
||||
try {
|
||||
const updated = await api.adminUpdateUser(u.id, { isActive: !u.isActive });
|
||||
setAdminUsers((prev) => prev.map((item) => (item.id === u.id ? updated : item)));
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleUserRole = async (u: User) => {
|
||||
const nextRole = u.role === 'admin' ? 'member' : 'admin';
|
||||
try {
|
||||
const updated = await api.adminUpdateUser(u.id, { role: nextRole });
|
||||
setAdminUsers((prev) => prev.map((item) => (item.id === u.id ? updated : item)));
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmResetPassword = async (userId: string) => {
|
||||
if (!resetPwdVal.trim()) return;
|
||||
try {
|
||||
await api.adminResetPassword(userId, resetPwdVal.trim());
|
||||
alert('Passwort erfolgreich zurückgesetzt.');
|
||||
setResetPwdUserId(null);
|
||||
setResetPwdVal('');
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdminDeleteUser = async (userId: string) => {
|
||||
if (!window.confirm('Benutzer unwiderruflich löschen? Alle Daten dieses Nutzers werden gelöscht.')) return;
|
||||
try {
|
||||
await api.adminDeleteUser(userId);
|
||||
setAdminUsers((prev) => prev.filter((u) => u.id !== userId));
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const baseUrl = window.location.origin;
|
||||
const curlExample = `curl -X POST ${baseUrl}/api/v1/inbox \\
|
||||
-H "Authorization: Bearer ${newlyCreatedKey || apiKeys[0]?.keyPrefix || 'DEIN_API_KEY'}" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"content": "Server-Backup abgeschlossen #homelab #backup", "priority": "high", "target": "task"}'`;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4">
|
||||
<div className="w-full max-w-3xl bg-panel border border-border shadow-2xl flex flex-col max-h-[90vh] overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="p-3 bg-canvas border-b border-border flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<SettingsIcon className="w-4 h-4 text-accent" />
|
||||
<h2 className="text-sm font-bold text-white tracking-tight">
|
||||
Konto-Einstellungen & Administration
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Navigation Tabs */}
|
||||
<div className="flex items-stretch border-b border-border bg-canvas overflow-x-auto no-scrollbar text-xs">
|
||||
<button
|
||||
onClick={() => setActiveTab('profile')}
|
||||
className={`h-9 px-3.5 flex items-center gap-1.5 font-medium border-r border-border transition-colors ${
|
||||
activeTab === 'profile' ? 'bg-panel text-white border-b-2 border-b-accent' : 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<UserIcon className="w-3.5 h-3.5" />
|
||||
<span>Profil & Sicherheit</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('alarms')}
|
||||
className={`h-9 px-3.5 flex items-center gap-1.5 font-medium border-r border-border transition-colors ${
|
||||
activeTab === 'alarms' ? 'bg-panel text-white border-b-2 border-b-accent' : 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Bell className="w-3.5 h-3.5" />
|
||||
<span>Alarme & Discord</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('webhooks')}
|
||||
className={`h-9 px-3.5 flex items-center gap-1.5 font-medium border-r border-border transition-colors ${
|
||||
activeTab === 'webhooks' ? 'bg-panel text-white border-b-2 border-b-accent' : 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Key className="w-3.5 h-3.5" />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('teams')}
|
||||
className={`h-9 px-3.5 flex items-center gap-1.5 font-medium border-r border-border transition-colors ${
|
||||
activeTab === 'teams' ? 'bg-panel text-white border-b-2 border-b-accent' : 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
<span>Organisationen & Teams</span>
|
||||
</button>
|
||||
|
||||
{currentUser?.role === 'admin' && (
|
||||
<button
|
||||
onClick={() => setActiveTab('admin')}
|
||||
className={`h-9 px-3.5 flex items-center gap-1.5 font-medium border-r border-border transition-colors ${
|
||||
activeTab === 'admin' ? 'bg-panel text-accent font-semibold border-b-2 border-b-accent' : 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Shield className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Administration</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-4 overflow-y-auto flex-1 space-y-4 text-xs">
|
||||
{/* TAB 1: PROFIL & SICHERHEIT */}
|
||||
{activeTab === 'profile' && (
|
||||
<div className="space-y-4 max-w-lg">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">Benutzerprofil bearbeiten</h3>
|
||||
<p className="text-zinc-400 text-xs">
|
||||
Passe deinen Anzeigenamen und dein Anmeldekennwort an.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{profileMsg && (
|
||||
<div
|
||||
className={`p-2 border text-xs ${
|
||||
profileMsg.type === 'ok'
|
||||
? 'bg-blue-900/20 border-accent text-blue-200'
|
||||
: 'bg-red-900/20 border-red-500 text-red-200'
|
||||
}`}
|
||||
>
|
||||
{profileMsg.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSaveProfile} className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-zinc-400 mb-1">Anzeigename</label>
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
required
|
||||
className="w-full h-8 px-2.5 input-field text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-zinc-400 mb-1">E-Mail-Adresse</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full h-8 px-2.5 input-field text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-zinc-400 mb-1">Neues Passwort (leer lassen für keine Änderung)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="Mindestens 4 Zeichen"
|
||||
className="w-full h-8 px-2.5 input-field text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLoggedOut}
|
||||
className="text-red-400 hover:underline flex items-center gap-1.5 py-1"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
<span>Abmelden</span>
|
||||
</button>
|
||||
|
||||
<button type="submit" className="btn-primary h-8 px-4 text-xs">
|
||||
Änderungen speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 2: ALARME & DISCORD */}
|
||||
{activeTab === 'alarms' && (
|
||||
<div className="space-y-4 max-w-lg">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">Aufgaben-Alarme & Discord Benachrichtigungen</h3>
|
||||
<p className="text-zinc-400 text-xs leading-relaxed">
|
||||
Trage deine Discord Webhook URL ein, damit der MindSift Server dich automatisch erinnert, sobald Aufgaben fällig werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{alarmMsg && (
|
||||
<div
|
||||
className={`p-2 border text-xs ${
|
||||
alarmMsg.type === 'ok'
|
||||
? 'bg-blue-900/20 border-accent text-blue-200'
|
||||
: 'bg-red-900/20 border-red-500 text-red-200'
|
||||
}`}
|
||||
>
|
||||
{alarmMsg.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSaveAlarms} className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-zinc-400 mb-1">Discord Webhook URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={discordWebhookUrl}
|
||||
onChange={(e) => setDiscordWebhookUrl(e.target.value)}
|
||||
placeholder="https://discord.com/api/webhooks/123456789/token..."
|
||||
className="w-full h-8 px-2.5 input-field text-white font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-zinc-400 mb-1">Vorwarnzeit vor Fälligkeit</label>
|
||||
<select
|
||||
value={notifyBeforeMinutes}
|
||||
onChange={(e) => setNotifyBeforeMinutes(Number(e.target.value))}
|
||||
className="w-full h-8 px-2 input-field text-white bg-canvas"
|
||||
>
|
||||
<option value={0}>Direkt bei Fälligkeit</option>
|
||||
<option value={15}>15 Minuten vorher</option>
|
||||
<option value={30}>30 Minuten vorher</option>
|
||||
<option value={60}>1 Stunde vorher</option>
|
||||
<option value={1440}>1 Tag vorher</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTestDiscordWebhook}
|
||||
disabled={testingDiscord || !discordWebhookUrl.trim()}
|
||||
className="btn-action h-8 px-3 text-xs disabled:opacity-40"
|
||||
>
|
||||
<span>{testingDiscord ? 'Sende Test…' : 'Webhook testen'}</span>
|
||||
</button>
|
||||
|
||||
<button type="submit" className="btn-primary h-8 px-4 text-xs">
|
||||
Alarm-Einstellungen sichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 3: WEBHOOKS & EXPORT */}
|
||||
{activeTab === 'webhooks' && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">Private Webhook Keys & Daten-Export</h3>
|
||||
<p className="text-zinc-400 text-xs">
|
||||
Erstelle API-Keys für eigene Bash-Skripte, Home Assistant oder Cronjobs, um Gedanken direkt per Curl zu erfassen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* API Key Creator */}
|
||||
<form onSubmit={handleCreateAPIKey} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newKeyName}
|
||||
onChange={(e) => setNewKeyName(e.target.value)}
|
||||
placeholder="Key Bezeichnung (z.B. Smart Home, Backup Skript)…"
|
||||
className="flex-1 h-8 px-2.5 input-field text-xs text-white"
|
||||
/>
|
||||
<button type="submit" className="btn-primary h-8 px-3 text-xs flex items-center gap-1">
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Key erstellen</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{newlyCreatedKey && (
|
||||
<div className="p-2.5 bg-accent/15 border border-accent/40 flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] text-accent font-semibold">Neuer Key (jetzt kopieren):</p>
|
||||
<code className="text-xs font-mono text-white break-all">{newlyCreatedKey}</code>
|
||||
</div>
|
||||
<button onClick={() => handleCopy(newlyCreatedKey)} className="btn-primary h-7 px-2.5 text-xs">
|
||||
{copiedKey ? 'Kopiert!' : 'Kopieren'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Keys list */}
|
||||
<div className="border border-border divide-y divide-border bg-canvas">
|
||||
{apiKeys.length === 0 ? (
|
||||
<div className="p-3 text-center text-zinc-500 text-xs">Noch keine API-Schlüssel angelegt.</div>
|
||||
) : (
|
||||
apiKeys.map((k) => (
|
||||
<div key={k.id} className="p-2 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-semibold text-white">{k.name}</p>
|
||||
<p className="text-[10px] text-zinc-500 font-mono">Präfix: {k.keyPrefix}••••••••</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteAPIKey(k.id)}
|
||||
className="btn-icon btn-icon-danger"
|
||||
title="Key löschen"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Interactive Curl Example */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="font-semibold text-zinc-300 flex items-center gap-1">
|
||||
<Terminal className="w-3 h-3 text-accent" /> Curl Schnellbefehl für eigene Skripte:
|
||||
</span>
|
||||
<button onClick={() => handleCopy(curlExample)} className="text-zinc-400 hover:text-white text-[10px]">
|
||||
{copiedKey ? 'Kopiert!' : 'Kopieren'}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="p-2.5 bg-black/60 border border-border text-[11px] font-mono text-zinc-300 overflow-x-auto whitespace-pre">
|
||||
{curlExample}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Data Export Button */}
|
||||
<div className="pt-2 border-t border-border flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold text-white">Vollständiger Daten-Export</h4>
|
||||
<p className="text-zinc-500 text-[11px]">Sichere alle Notizen, Aufgaben, Listen und Metadaten als JSON.</p>
|
||||
</div>
|
||||
<button onClick={handleExportData} className="btn-action h-8 px-3 text-xs flex items-center gap-1.5">
|
||||
<Download className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Backup herunterladen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 4: ORGANISATIONEN & TEAMS */}
|
||||
{activeTab === 'teams' && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">Organisationen & Teams gründen</h3>
|
||||
<p className="text-zinc-400 text-xs">
|
||||
Erstelle Organisationen und unterteile sie in Teams, um Aufgabenlisten und Workspace-Dokumente gemeinsam zu bearbeiten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Org Creator */}
|
||||
<div className="p-3 bg-canvas border border-border space-y-2">
|
||||
<h4 className="font-semibold text-white">Neue Organisation</h4>
|
||||
<form onSubmit={handleCreateOrg} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newOrgName}
|
||||
onChange={(e) => setNewOrgName(e.target.value)}
|
||||
placeholder="Name der Organisation (z.B. Familie, Startup, Homelab Crew)…"
|
||||
className="flex-1 h-8 px-2.5 input-field text-xs text-white"
|
||||
/>
|
||||
<button type="submit" className="btn-primary h-8 px-3 text-xs">
|
||||
Organisation anlegen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Team Creator inside Org */}
|
||||
{orgs.length > 0 && (
|
||||
<div className="p-3 bg-canvas border border-border space-y-2">
|
||||
<h4 className="font-semibold text-white">Neues Team in Organisation</h4>
|
||||
<form onSubmit={handleCreateTeam} className="space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={selectedOrgId}
|
||||
onChange={(e) => setSelectedOrgId(e.target.value)}
|
||||
className="h-8 px-2 input-field text-white bg-panel"
|
||||
>
|
||||
{orgs.map((o) => (
|
||||
<option key={o.id} value={o.id}>
|
||||
{o.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={newTeamName}
|
||||
onChange={(e) => setNewTeamName(e.target.value)}
|
||||
placeholder="Team Name (z.B. DevOps, Einkauf)…"
|
||||
required
|
||||
className="flex-1 h-8 px-2.5 input-field text-xs text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newTeamDesc}
|
||||
onChange={(e) => setNewTeamDesc(e.target.value)}
|
||||
placeholder="Optionale Teambeschreibung…"
|
||||
className="flex-1 h-8 px-2.5 input-field text-xs text-white"
|
||||
/>
|
||||
<button type="submit" className="btn-primary h-8 px-3 text-xs">
|
||||
Team erstellen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active Teams List */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-zinc-300">Deine Teams ({teams.length}):</h4>
|
||||
<div className="border border-border divide-y divide-border bg-canvas">
|
||||
{teams.length === 0 ? (
|
||||
<div className="p-3 text-center text-zinc-500">Du bist noch keinem Team beigetreten.</div>
|
||||
) : (
|
||||
teams.map((t) => (
|
||||
<div key={t.id} className="p-2.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-bold text-white flex items-center gap-1.5">
|
||||
<Users className="w-3.5 h-3.5 text-accent" />
|
||||
<span>{t.name}</span>
|
||||
</p>
|
||||
{t.description && <p className="text-zinc-400 text-[11px]">{t.description}</p>}
|
||||
</div>
|
||||
<span className="text-[10px] text-zinc-500 font-mono">ID: {t.id}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 5: ADMIN BEREICH */}
|
||||
{activeTab === 'admin' && currentUser?.role === 'admin' && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">Server-Administration & Benutzersteuerung</h3>
|
||||
<p className="text-zinc-400 text-xs">
|
||||
Steuere die Instanz-Einstellungen, das Sharing-Verhalten und verwalte registrierte Benutzer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Server Sharing Isolation Setting */}
|
||||
<div className="p-3 bg-canvas border border-border space-y-3">
|
||||
<h4 className="font-semibold text-white flex items-center gap-1.5">
|
||||
<Share2 className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Sharing-Isolationsmodus</span>
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleUpdateSystemSettings({ sharingMode: 'open' })}
|
||||
className={`p-2.5 text-left border transition-colors ${
|
||||
systemSettings.sharingMode === 'open'
|
||||
? 'bg-panel border-accent text-white'
|
||||
: 'border-border text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<p className="font-bold text-xs">Offen (Open)</p>
|
||||
<p className="text-[10px] text-zinc-400 mt-0.5">Alle Benutzer können Spaces finden und beitreten.</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleUpdateSystemSettings({ sharingMode: 'teams_only' })}
|
||||
className={`p-2.5 text-left border transition-colors ${
|
||||
systemSettings.sharingMode === 'teams_only'
|
||||
? 'bg-panel border-accent text-white'
|
||||
: 'border-border text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<p className="font-bold text-xs">Teams isoliert</p>
|
||||
<p className="text-[10px] text-zinc-400 mt-0.5">Sharing ausschließlich innerhalb zugewiesener Teams.</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleUpdateSystemSettings({ sharingMode: 'strict_private' })}
|
||||
className={`p-2.5 text-left border transition-colors ${
|
||||
systemSettings.sharingMode === 'strict_private'
|
||||
? 'bg-panel border-accent text-white'
|
||||
: 'border-border text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<p className="font-bold text-xs">Strikt Privat</p>
|
||||
<p className="text-[10px] text-zinc-400 mt-0.5">Vollständige Benutzer-Isolation; kein Teilen möglich.</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-border">
|
||||
<span className="text-zinc-300">Öffentliche Registrierung erlauben:</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleUpdateSystemSettings({ allowRegistration: !systemSettings.allowRegistration })
|
||||
}
|
||||
className={`px-3 py-1 text-xs border ${
|
||||
systemSettings.allowRegistration
|
||||
? 'bg-accent/20 border-accent text-accent'
|
||||
: 'bg-zinc-800 border-zinc-700 text-zinc-400'
|
||||
}`}
|
||||
>
|
||||
{systemSettings.allowRegistration ? 'Aktiviert' : 'Deaktiviert'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Creation by Admin */}
|
||||
<div className="p-3 bg-canvas border border-border space-y-2">
|
||||
<h4 className="font-semibold text-white">Neuen Benutzer anlegen</h4>
|
||||
<form onSubmit={handleAdminCreateUser} className="space-y-2">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<input
|
||||
type="email"
|
||||
value={newAdminUserEmail}
|
||||
onChange={(e) => setNewAdminUserEmail(e.target.value)}
|
||||
placeholder="E-Mail"
|
||||
required
|
||||
className="h-8 px-2.5 input-field text-white"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={newAdminUserPassword}
|
||||
onChange={(e) => setNewAdminUserPassword(e.target.value)}
|
||||
placeholder="Initial-Passwort"
|
||||
required
|
||||
className="h-8 px-2.5 input-field text-white"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newAdminUserDisplayName}
|
||||
onChange={(e) => setNewAdminUserDisplayName(e.target.value)}
|
||||
placeholder="Anzeigename"
|
||||
className="flex-1 h-8 px-2.5 input-field text-white"
|
||||
/>
|
||||
<select
|
||||
value={newAdminUserRole}
|
||||
onChange={(e) => setNewAdminUserRole(e.target.value as any)}
|
||||
className="h-8 px-2 input-field text-white bg-panel"
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button type="submit" className="btn-primary h-7 px-3 text-xs">
|
||||
Benutzer erstellen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-zinc-300">Registrierte Benutzer ({adminUsers.length}):</h4>
|
||||
<div className="border border-border divide-y divide-border bg-canvas overflow-x-auto">
|
||||
{adminUsers.map((u) => (
|
||||
<div key={u.id} className="p-2.5 flex items-center justify-between gap-3 text-xs">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-white">{u.displayName}</span>
|
||||
<span
|
||||
className={`px-1.5 py-0.2 text-[10px] uppercase font-bold border ${
|
||||
u.role === 'admin'
|
||||
? 'bg-accent/20 border-accent/40 text-accent'
|
||||
: 'bg-zinc-800 border-zinc-700 text-zinc-400'
|
||||
}`}
|
||||
>
|
||||
{u.role}
|
||||
</span>
|
||||
{!u.isActive && (
|
||||
<span className="px-1.5 py-0.2 text-[10px] bg-red-900/30 border border-red-500/40 text-red-300">
|
||||
Deaktiviert
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-zinc-500 text-[11px] font-mono">{u.email}</p>
|
||||
|
||||
{/* Reset password inline form */}
|
||||
{resetPwdUserId === u.id && (
|
||||
<div className="mt-2 flex items-center gap-1.5 bg-panel p-1.5 border border-border">
|
||||
<input
|
||||
type="password"
|
||||
value={resetPwdVal}
|
||||
onChange={(e) => setResetPwdVal(e.target.value)}
|
||||
placeholder="Neues Passwort…"
|
||||
className="h-6 px-2 input-field text-xs text-white"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleConfirmResetPassword(u.id)}
|
||||
className="btn-primary h-6 px-2 text-[10px]"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setResetPwdUserId(null)}
|
||||
className="btn-action h-6 px-1.5 text-[10px]"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleToggleUserActive(u)}
|
||||
className="btn-action h-7 px-2 text-[11px]"
|
||||
title="Aktiv / Deaktivieren"
|
||||
>
|
||||
{u.isActive ? 'Deaktivieren' : 'Aktivieren'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleToggleUserRole(u)}
|
||||
className="btn-action h-7 px-2 text-[11px]"
|
||||
title="Rolle wechseln"
|
||||
>
|
||||
{u.role === 'admin' ? 'Zu Member' : 'Zu Admin'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setResetPwdUserId(u.id);
|
||||
setResetPwdVal('');
|
||||
}}
|
||||
className="btn-action h-7 px-2 text-[11px]"
|
||||
title="Passwort zurücksetzen"
|
||||
>
|
||||
<Lock className="w-3 h-3 text-zinc-400" />
|
||||
</button>
|
||||
{u.id !== currentUser.id && (
|
||||
<button
|
||||
onClick={() => handleAdminDeleteUser(u.id)}
|
||||
className="btn-icon btn-icon-danger"
|
||||
title="Benutzer löschen"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import React, { useEffect, useState, useMemo, useRef } from 'react';
|
||||
import {
|
||||
FilePlus,
|
||||
FolderPlus,
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
CheckSquare,
|
||||
Heading1,
|
||||
Heading2,
|
||||
Heading3,
|
||||
List,
|
||||
Code,
|
||||
Sparkles,
|
||||
@@ -22,6 +23,14 @@ import {
|
||||
X,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Bold,
|
||||
Italic,
|
||||
Strikethrough,
|
||||
Link,
|
||||
Table as TableIcon,
|
||||
Percent,
|
||||
Minus,
|
||||
ExternalLink,
|
||||
} from 'lucide-react';
|
||||
import { BlockType, Document, DocumentBlock } from '../../lib/types';
|
||||
import { api, triggerHaptic } from '../../lib/api';
|
||||
@@ -31,7 +40,7 @@ interface WorkspaceViewProps {
|
||||
onStatsChange: () => void;
|
||||
}
|
||||
|
||||
const ICONS = ['🚀', '💡', '📄', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦'];
|
||||
const ICONS = ['🚀', '💡', '📄', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦', '📑', '⚙️', '📊'];
|
||||
|
||||
interface FolderTreeItem {
|
||||
path: string;
|
||||
@@ -50,6 +59,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
|
||||
const [showIconPicker, setShowIconPicker] = useState(false);
|
||||
const [showWikiLinkMenu, setShowWikiLinkMenu] = useState(false);
|
||||
|
||||
// Folder state
|
||||
const [customFolders, setCustomFolders] = useState<string[]>(() => {
|
||||
@@ -65,6 +75,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
const [newFolderParent, setNewFolderParent] = useState<string | null>(null);
|
||||
const [newFolderName, setNewFolderName] = useState('');
|
||||
|
||||
// Active focused block ref
|
||||
const [lastFocusedBlockId, setLastFocusedBlockId] = useState<string | null>(null);
|
||||
|
||||
const loadDocs = async (selectId?: string | null) => {
|
||||
const list = await api.getDocuments();
|
||||
setDocs(list);
|
||||
@@ -95,6 +108,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
await api.updateDocument(updatedDoc.id, {
|
||||
title: updatedDoc.title,
|
||||
icon: updatedDoc.icon,
|
||||
folderPath: updatedDoc.folderPath,
|
||||
blocks: updatedDoc.blocks,
|
||||
tags: updatedDoc.tags,
|
||||
isPinned: updatedDoc.isPinned,
|
||||
@@ -105,6 +119,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
};
|
||||
|
||||
const getDocFolder = (doc: Document): string => {
|
||||
if (doc.folderPath) return doc.folderPath;
|
||||
const tag = doc.tags?.find((t) => t.startsWith('folder:'));
|
||||
return tag ? tag.replace('folder:', '') : '';
|
||||
};
|
||||
@@ -138,12 +153,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
const handleCreateDoc = async (folderPath?: string | null) => {
|
||||
triggerHaptic(15);
|
||||
const tags = ['projekt'];
|
||||
if (folderPath) {
|
||||
tags.push(`folder:${folderPath}`);
|
||||
const path = folderPath || '';
|
||||
if (path) {
|
||||
tags.push(`folder:${path}`);
|
||||
}
|
||||
const created = await api.createDocument({
|
||||
title: 'Neues Projekt / Notiz',
|
||||
icon: '💡',
|
||||
folderPath: path,
|
||||
blocks: [
|
||||
{
|
||||
id: `blk_${Date.now()}_1`,
|
||||
@@ -158,100 +175,74 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
{
|
||||
id: `blk_${Date.now()}_3`,
|
||||
type: 'todo',
|
||||
content: 'Ersten Punkt abhaken',
|
||||
content: 'Ersten Meilenstein definieren',
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
tags,
|
||||
isPinned: false,
|
||||
});
|
||||
|
||||
if (folderPath) {
|
||||
setExpandedFolders((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(folderPath);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
await loadDocs(created.id);
|
||||
onStatsChange();
|
||||
};
|
||||
|
||||
const handleDeleteDoc = async (docId: string) => {
|
||||
const handleDeleteDoc = async (id: string) => {
|
||||
if (!window.confirm('Dokument wirklich löschen?')) return;
|
||||
triggerHaptic(20);
|
||||
await api.deleteDocument(docId);
|
||||
const remaining = docs.filter((d) => d.id !== docId);
|
||||
await api.deleteDocument(id);
|
||||
const remaining = docs.filter((d) => d.id !== id);
|
||||
setDocs(remaining);
|
||||
setSelectedDoc(remaining[0] || null);
|
||||
onStatsChange();
|
||||
};
|
||||
|
||||
const handleChangeDocFolder = (targetFolder: string) => {
|
||||
const handleChangeDocFolder = async (folderPath: string) => {
|
||||
if (!selectedDoc) return;
|
||||
const cleanTags = (selectedDoc.tags || []).filter((t) => !t.startsWith('folder:'));
|
||||
if (targetFolder) {
|
||||
cleanTags.push(`folder:${targetFolder}`);
|
||||
const cleanPath = folderPath.trim();
|
||||
const updatedTags = (selectedDoc.tags || []).filter((t) => !t.startsWith('folder:'));
|
||||
if (cleanPath) {
|
||||
updatedTags.push(`folder:${cleanPath}`);
|
||||
}
|
||||
persistDocument({ ...selectedDoc, tags: cleanTags });
|
||||
const updatedDoc = {
|
||||
...selectedDoc,
|
||||
folderPath: cleanPath,
|
||||
tags: updatedTags,
|
||||
};
|
||||
await persistDocument(updatedDoc);
|
||||
};
|
||||
|
||||
const handleStartCreateFolder = (parentPath: string | null = null) => {
|
||||
triggerHaptic(10);
|
||||
setNewFolderParent(parentPath);
|
||||
const handleStartCreateFolder = (parentPath?: string | null) => {
|
||||
setNewFolderParent(parentPath || null);
|
||||
setNewFolderName('');
|
||||
setIsCreatingFolder(true);
|
||||
if (parentPath) {
|
||||
setExpandedFolders((prev) => new Set([...prev, parentPath]));
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmCreateFolder = () => {
|
||||
const trimmed = newFolderName.trim().replace(/^\/+|\/+$/g, '');
|
||||
const trimmed = newFolderName.trim();
|
||||
if (!trimmed) {
|
||||
setIsCreatingFolder(false);
|
||||
return;
|
||||
}
|
||||
const fullPath = newFolderParent ? `${newFolderParent}/${trimmed}` : trimmed;
|
||||
if (!customFolders.includes(fullPath)) {
|
||||
const updated = [...customFolders, fullPath];
|
||||
setCustomFolders(updated);
|
||||
const next = [...customFolders, fullPath].sort((a, b) => a.localeCompare(b));
|
||||
setCustomFolders(next);
|
||||
try {
|
||||
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
|
||||
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(next));
|
||||
} catch {
|
||||
// fallback
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
setExpandedFolders((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(fullPath);
|
||||
if (newFolderParent) next.add(newFolderParent);
|
||||
return next;
|
||||
});
|
||||
setExpandedFolders((prev) => new Set([...prev, fullPath]));
|
||||
setIsCreatingFolder(false);
|
||||
setNewFolderName('');
|
||||
setNewFolderParent(null);
|
||||
};
|
||||
|
||||
const handleDeleteFolder = (folderPath: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
triggerHaptic(15);
|
||||
const updated = customFolders.filter(
|
||||
(p) => p !== folderPath && !p.startsWith(folderPath + '/')
|
||||
);
|
||||
setCustomFolders(updated);
|
||||
try {
|
||||
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
|
||||
} catch {
|
||||
// fallback
|
||||
}
|
||||
|
||||
// Keep docs safe: drop folder prefix so they fall back to root
|
||||
docs.forEach((d) => {
|
||||
const f = getDocFolder(d);
|
||||
if (f === folderPath || f.startsWith(folderPath + '/')) {
|
||||
const nextTags = (d.tags || []).filter((t) => !t.startsWith('folder:'));
|
||||
persistDocument({ ...d, tags: nextTags });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toggleFolder = (folderPath: string) => {
|
||||
setExpandedFolders((prev) => {
|
||||
const next = new Set(prev);
|
||||
@@ -264,12 +255,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const addBlock = (type: BlockType, afterIndex?: number) => {
|
||||
const addBlock = (type: BlockType, afterIndex?: number, defaultContent = '') => {
|
||||
if (!selectedDoc) return;
|
||||
const newBlock: DocumentBlock = {
|
||||
id: `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
|
||||
type,
|
||||
content: '',
|
||||
content: defaultContent,
|
||||
checked: false,
|
||||
lang: type === 'code' ? 'bash' : undefined,
|
||||
};
|
||||
@@ -282,6 +273,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
}
|
||||
|
||||
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
||||
setLastFocusedBlockId(newBlock.id);
|
||||
};
|
||||
|
||||
const updateBlock = (blockId: string, patch: Partial<DocumentBlock>) => {
|
||||
@@ -308,6 +300,32 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
||||
};
|
||||
|
||||
// --- TOP TOOLBAR FORMATTING HELPERS ---
|
||||
const applyInlineFormat = (prefix: string, suffix = prefix) => {
|
||||
if (!selectedDoc) return;
|
||||
const targetBlockId = lastFocusedBlockId || selectedDoc.blocks[selectedDoc.blocks.length - 1]?.id;
|
||||
if (!targetBlockId) return;
|
||||
|
||||
const block = selectedDoc.blocks.find((b) => b.id === targetBlockId);
|
||||
if (!block) return;
|
||||
|
||||
const newContent = `${block.content} ${prefix}Text${suffix}`;
|
||||
updateBlock(targetBlockId, { content: newContent });
|
||||
};
|
||||
|
||||
const insertWikiLink = (targetDocTitle: string) => {
|
||||
if (!selectedDoc) return;
|
||||
const targetBlockId = lastFocusedBlockId || selectedDoc.blocks[selectedDoc.blocks.length - 1]?.id;
|
||||
if (!targetBlockId) return;
|
||||
|
||||
const block = selectedDoc.blocks.find((b) => b.id === targetBlockId);
|
||||
if (!block) return;
|
||||
|
||||
const newContent = `${block.content} [[${targetDocTitle}]]`;
|
||||
updateBlock(targetBlockId, { content: newContent });
|
||||
setShowWikiLinkMenu(false);
|
||||
};
|
||||
|
||||
const handleExportMarkdown = () => {
|
||||
if (!selectedDoc) return;
|
||||
const lines: string[] = [`# ${selectedDoc.icon} ${selectedDoc.title}`, ''];
|
||||
@@ -334,6 +352,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
case 'code':
|
||||
lines.push('```' + (b.lang || ''), b.content, '```', '');
|
||||
break;
|
||||
case 'table':
|
||||
lines.push(b.content, '');
|
||||
break;
|
||||
case 'progress':
|
||||
lines.push(`<!-- progress: ${b.content} -->`, '');
|
||||
break;
|
||||
case 'divider':
|
||||
lines.push('---', '');
|
||||
break;
|
||||
default:
|
||||
lines.push(b.content, '');
|
||||
}
|
||||
@@ -348,75 +375,118 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const filteredDocs = docs.filter(
|
||||
(d) =>
|
||||
d.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
(d.content && d.content.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
);
|
||||
|
||||
// Build recursive folder tree
|
||||
const buildTree = (parentPath: string = '', depth: number = 0): FolderTreeItem[] => {
|
||||
const directChildren = allFolderPaths.filter((p) => {
|
||||
if (parentPath === '') {
|
||||
return !p.includes('/');
|
||||
// Helper to render text with clickable Wiki-Links
|
||||
const renderTextWithWikiLinks = (text: string) => {
|
||||
const parts = text.split(/(\[\[.*?\]\])/g);
|
||||
return parts.map((part, i) => {
|
||||
if (part.startsWith('[[') && part.endsWith(']]')) {
|
||||
const linkTitle = part.slice(2, -2).trim();
|
||||
const target = docs.find((d) => d.title.toLowerCase() === linkTitle.toLowerCase());
|
||||
return (
|
||||
<span
|
||||
key={i}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (target) setSelectedDoc(target);
|
||||
}}
|
||||
className={`inline-flex items-center gap-1 px-1.5 py-0.2 mx-0.5 border text-xs font-medium cursor-pointer transition-colors ${
|
||||
target
|
||||
? 'bg-accent/20 border-accent/40 text-accent hover:bg-accent/30'
|
||||
: 'bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
title={target ? `Öffne: ${target.title}` : `Dokument "${linkTitle}" existiert noch nicht`}
|
||||
>
|
||||
<span>📄</span>
|
||||
<span>{linkTitle}</span>
|
||||
<ExternalLink className="w-2.5 h-2.5 opacity-60" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return p.startsWith(parentPath + '/') && !p.slice(parentPath.length + 1).includes('/');
|
||||
});
|
||||
|
||||
return directChildren.map((p) => {
|
||||
const name = p.split('/').pop() || p;
|
||||
const matchingDocs = filteredDocs.filter((d) => getDocFolder(d) === p);
|
||||
return {
|
||||
path: p,
|
||||
name,
|
||||
depth,
|
||||
subfolders: buildTree(p, depth + 1),
|
||||
docs: matchingDocs,
|
||||
};
|
||||
return <span key={i}>{part}</span>;
|
||||
});
|
||||
};
|
||||
|
||||
const rootTree = useMemo(() => buildTree('', 0), [allFolderPaths, filteredDocs]);
|
||||
const rootDocs = useMemo(
|
||||
() => filteredDocs.filter((d) => !getDocFolder(d)),
|
||||
[filteredDocs]
|
||||
);
|
||||
// --- FOLDER TREE CALCULATION ---
|
||||
const filteredDocs = useMemo(() => {
|
||||
if (!searchQuery.trim()) return docs;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return docs.filter(
|
||||
(d) => d.title.toLowerCase().includes(q) || d.content.toLowerCase().includes(q)
|
||||
);
|
||||
}, [docs, searchQuery]);
|
||||
|
||||
const renderDocItem = (doc: Document, depth: number = 0) => {
|
||||
const active = selectedDoc?.id === doc.id;
|
||||
const { rootTree, rootDocs } = useMemo(() => {
|
||||
const folderMap = new Map<string, FolderTreeItem>();
|
||||
|
||||
allFolderPaths.forEach((path) => {
|
||||
const parts = path.split('/');
|
||||
const name = parts[parts.length - 1];
|
||||
folderMap.set(path, {
|
||||
path,
|
||||
name,
|
||||
depth: parts.length - 1,
|
||||
subfolders: [],
|
||||
docs: [],
|
||||
});
|
||||
});
|
||||
|
||||
filteredDocs.forEach((doc) => {
|
||||
const folder = getDocFolder(doc);
|
||||
if (folder && folderMap.has(folder)) {
|
||||
folderMap.get(folder)!.docs.push(doc);
|
||||
}
|
||||
});
|
||||
|
||||
const rootFolders: FolderTreeItem[] = [];
|
||||
allFolderPaths.forEach((path) => {
|
||||
const item = folderMap.get(path)!;
|
||||
const lastSlash = path.lastIndexOf('/');
|
||||
if (lastSlash === -1) {
|
||||
rootFolders.push(item);
|
||||
} else {
|
||||
const parentPath = path.substring(0, lastSlash);
|
||||
const parent = folderMap.get(parentPath);
|
||||
if (parent) {
|
||||
parent.subfolders.push(item);
|
||||
} else {
|
||||
rootFolders.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const rootOnlyDocs = filteredDocs.filter((d) => !getDocFolder(d));
|
||||
return { rootTree: rootFolders, rootDocs: rootOnlyDocs };
|
||||
}, [allFolderPaths, filteredDocs]);
|
||||
|
||||
const renderDocItem = (doc: Document, depth: number) => {
|
||||
const isSelected = selectedDoc?.id === doc.id;
|
||||
return (
|
||||
<button
|
||||
<div
|
||||
key={doc.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedDoc(doc)}
|
||||
style={{ paddingLeft: `${depth * 14 + 10}px` }}
|
||||
className={`w-full text-left py-1.5 pr-2 transition-colors flex items-center justify-between gap-2 border-l-2 ${
|
||||
active
|
||||
? 'tree-node-active'
|
||||
: 'border-l-transparent text-zinc-300 hover:bg-panel-elevated hover:text-white'
|
||||
style={{ paddingLeft: `${depth * 14 + 16}px` }}
|
||||
className={`group flex items-center justify-between py-1.5 pr-2 border-l-2 transition-colors cursor-pointer text-xs ${
|
||||
isSelected
|
||||
? 'bg-panel-elevated border-accent text-white font-medium'
|
||||
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<span className="text-xs leading-none flex-shrink-0">
|
||||
{doc.icon ? doc.icon : <FileText className="w-3.5 h-3.5 text-zinc-400" />}
|
||||
</span>
|
||||
<span className="text-xs truncate font-normal">{doc.title || 'Ohne Titel'}</span>
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||||
<span className="text-sm flex-shrink-0">{doc.icon}</span>
|
||||
<span className="truncate">{doc.title || 'Unbenannt'}</span>
|
||||
{doc.isPinned && <Pin className="w-2.5 h-2.5 text-accent flex-shrink-0" />}
|
||||
</div>
|
||||
{doc.isPinned && <Pin className="w-3 h-3 text-accent flex-shrink-0" />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFolder = (node: FolderTreeItem) => {
|
||||
const renderFolder = (node: FolderTreeItem): React.ReactNode => {
|
||||
const isExpanded = expandedFolders.has(node.path);
|
||||
const isCreatingSubfolder = isCreatingFolder && newFolderParent === node.path;
|
||||
const totalItems =
|
||||
node.docs.length +
|
||||
node.subfolders.reduce((acc, s) => acc + s.docs.length, 0);
|
||||
const totalItems = node.docs.length + node.subfolders.length;
|
||||
|
||||
return (
|
||||
<div key={node.path} className="select-none">
|
||||
{/* Folder Header Row */}
|
||||
<div
|
||||
onClick={() => toggleFolder(node.path)}
|
||||
style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
|
||||
@@ -439,7 +509,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
<span className="text-[10px] text-zinc-500 font-mono">({totalItems})</span>
|
||||
</div>
|
||||
|
||||
{/* Folder Actions on Hover */}
|
||||
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-opacity">
|
||||
<button
|
||||
type="button"
|
||||
@@ -463,24 +532,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
>
|
||||
<FolderPlus className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleDeleteFolder(node.path, e)}
|
||||
className="p-1 hover:bg-red-500/20 text-zinc-500 hover:text-red-400"
|
||||
title="Ordner entfernen"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subfolder inline creation input */}
|
||||
{isCreatingSubfolder && (
|
||||
<div
|
||||
style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
|
||||
className="py-1 pr-2 flex items-center gap-1.5 bg-canvas"
|
||||
className="py-1 pr-2 flex items-center gap-1 bg-canvas"
|
||||
>
|
||||
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
|
||||
<Folder className="w-3 h-3 text-zinc-400 flex-shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
@@ -490,8 +550,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
if (e.key === 'Enter') handleConfirmCreateFolder();
|
||||
if (e.key === 'Escape') setIsCreatingFolder(false);
|
||||
}}
|
||||
placeholder="Unterordnername…"
|
||||
className="flex-1 h-6 px-1.5 input-field"
|
||||
placeholder="Unterordner…"
|
||||
className="flex-1 h-6 px-1.5 input-field text-xs"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -512,7 +572,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expanded Folder Content */}
|
||||
{isExpanded && (
|
||||
<div>
|
||||
{node.subfolders.map(renderFolder)}
|
||||
@@ -537,9 +596,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
|
||||
{/* Left Document & Folder Explorer Tree */}
|
||||
<div className="lg:col-span-4 panel-surface flex flex-col self-start">
|
||||
{/* Top Explorer Action Bar */}
|
||||
<div className="p-2 panel-header space-y-2">
|
||||
{/* Quick Search */}
|
||||
<div className="relative">
|
||||
<Search className="w-3.5 h-3.5 text-zinc-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
@@ -551,7 +608,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Monochromatic Square Action Buttons */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
@@ -575,7 +631,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Root Folder Creation Input */}
|
||||
{isCreatingFolder && newFolderParent === null && (
|
||||
<div className="p-2 panel-header bg-canvas flex items-center gap-1.5">
|
||||
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
|
||||
@@ -610,7 +665,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{isEmpty ? (
|
||||
<div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center">
|
||||
<Folder className="w-7 h-7 text-zinc-600 mx-auto mb-2" />
|
||||
@@ -638,7 +692,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* File Explorer Tree View */
|
||||
<div className="py-1 max-h-[calc(100vh-240px)] overflow-y-auto">
|
||||
{rootTree.map(renderFolder)}
|
||||
{rootDocs.map((doc) => renderDocItem(doc, 0))}
|
||||
@@ -651,25 +704,24 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Block Editor */}
|
||||
{/* Right Word / Notion Formatted Editor */}
|
||||
<div className="lg:col-span-8">
|
||||
{selectedDoc ? (
|
||||
<div className="p-4 panel-surface">
|
||||
{/* Document Top Action Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 panel-header">
|
||||
<div className="p-4 panel-surface space-y-3">
|
||||
{/* Document Header & Metadata */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 pb-3 panel-header">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-zinc-400">
|
||||
<span className="badge-accent">
|
||||
<Check className="w-3 h-3" />
|
||||
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
|
||||
</span>
|
||||
|
||||
{/* Folder Breadcrumb Selector */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Folder className="w-3.5 h-3.5 text-zinc-500" />
|
||||
<select
|
||||
value={getDocFolder(selectedDoc)}
|
||||
onChange={(e) => handleChangeDocFolder(e.target.value)}
|
||||
className="input-field px-2 py-0.5"
|
||||
className="input-field px-2 py-0.5 text-xs bg-canvas"
|
||||
>
|
||||
<option value="">(Kein Ordner / Root)</option>
|
||||
{allFolderPaths.map((fp) => (
|
||||
@@ -699,9 +751,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
type="button"
|
||||
onClick={handleExportMarkdown}
|
||||
className="btn-action"
|
||||
title="Als Markdown-Datei (.md) herunterladen"
|
||||
>
|
||||
<Download className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Markdown (.md)</span>
|
||||
<span>Export (.md)</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -716,7 +769,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
</div>
|
||||
|
||||
{/* Document Icon & Title */}
|
||||
<div className="flex items-center gap-3 mb-4 relative">
|
||||
<div className="flex items-center gap-3 relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowIconPicker((prev) => !prev)}
|
||||
@@ -727,7 +780,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
</button>
|
||||
|
||||
{showIconPicker && (
|
||||
<div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-xl">
|
||||
<div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-xl border border-border">
|
||||
{ICONS.map((ic) => (
|
||||
<button
|
||||
key={ic}
|
||||
@@ -753,12 +806,140 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Blocks Stack */}
|
||||
<div className="space-y-3">
|
||||
{/* NOTION / WORD RICH FORMATTING TOOLBAR */}
|
||||
<div className="p-1.5 bg-canvas border border-border flex flex-wrap items-center gap-1 text-xs">
|
||||
{/* Text styling buttons */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyInlineFormat('**')}
|
||||
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
|
||||
title="Fett (**text**)"
|
||||
>
|
||||
<Bold className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyInlineFormat('*')}
|
||||
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
|
||||
title="Kursiv (*text*)"
|
||||
>
|
||||
<Italic className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyInlineFormat('~~')}
|
||||
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
|
||||
title="Durchgestrichen (~~text~~)"
|
||||
>
|
||||
<Strikethrough className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyInlineFormat('`')}
|
||||
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
|
||||
title="Inline Code (`code`)"
|
||||
>
|
||||
<Code className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyInlineFormat('[Link](', ')')}
|
||||
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
|
||||
title="Link einfügen"
|
||||
>
|
||||
<Link className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
|
||||
<span className="w-px h-4 bg-border mx-1" />
|
||||
|
||||
{/* Wiki-Link Popover Button */}
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowWikiLinkMenu((prev) => !prev)}
|
||||
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-accent flex items-center gap-1 hover:bg-panel-hover"
|
||||
title="Auf anderes Dokument verlinken ([[Dokumentname]])"
|
||||
>
|
||||
<span>[[ Wiki-Link ]]</span>
|
||||
</button>
|
||||
{showWikiLinkMenu && (
|
||||
<div className="absolute top-7 left-0 z-30 w-56 bg-panel border border-border p-1.5 shadow-2xl space-y-1">
|
||||
<p className="text-[10px] text-zinc-400 px-1.5 pb-1 border-b border-border">
|
||||
Dokument zum Verlinken wählen:
|
||||
</p>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{docs
|
||||
.filter((d) => d.id !== selectedDoc.id)
|
||||
.map((d) => (
|
||||
<button
|
||||
key={d.id}
|
||||
type="button"
|
||||
onClick={() => insertWikiLink(d.title)}
|
||||
className="w-full text-left px-2 py-1 text-xs text-zinc-300 hover:text-white hover:bg-panel-hover truncate flex items-center gap-1.5"
|
||||
>
|
||||
<span>{d.icon}</span>
|
||||
<span className="truncate">{d.title}</span>
|
||||
</button>
|
||||
))}
|
||||
{docs.length <= 1 && (
|
||||
<div className="p-2 text-center text-[11px] text-zinc-500">
|
||||
Keine weiteren Dokumente vorhanden
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="w-px h-4 bg-border mx-1" />
|
||||
|
||||
{/* Custom Elements: Table & Progress */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addBlock(
|
||||
'table',
|
||||
undefined,
|
||||
'| Spalte 1 | Spalte 2 | Spalte 3 |\n|---|---|---|\n| Inhalt A | Inhalt B | Inhalt C |\n| Wert 1 | Wert 2 | Wert 3 |'
|
||||
)
|
||||
}
|
||||
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-zinc-300 hover:text-white flex items-center gap-1"
|
||||
title="Tabelle einfügen"
|
||||
>
|
||||
<TableIcon className="w-3 h-3 text-accent" />
|
||||
<span>Tabelle</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('progress', undefined, '50')}
|
||||
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-zinc-300 hover:text-white flex items-center gap-1"
|
||||
title="Fortschrittsbalken einfügen"
|
||||
>
|
||||
<Percent className="w-3 h-3 text-accent" />
|
||||
<span>Fortschritt</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('divider')}
|
||||
className="p-1 hover:bg-panel text-zinc-400 hover:text-white"
|
||||
title="Trennlinie"
|
||||
>
|
||||
<Minus className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* BLOCKS STACK */}
|
||||
<div className="space-y-3 pt-2">
|
||||
{selectedDoc.blocks.map((block, idx) => (
|
||||
<div key={block.id} className="group flex items-start gap-2">
|
||||
{/* Block Renderer */}
|
||||
<div
|
||||
key={block.id}
|
||||
onClick={() => setLastFocusedBlockId(block.id)}
|
||||
className="group flex items-start gap-2"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* H1 */}
|
||||
{block.type === 'h1' && (
|
||||
<input
|
||||
type="text"
|
||||
@@ -769,6 +950,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* H2 */}
|
||||
{block.type === 'h2' && (
|
||||
<input
|
||||
type="text"
|
||||
@@ -779,16 +961,36 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
{block.type === 'paragraph' && (
|
||||
<textarea
|
||||
rows={Math.max(1, Math.ceil(block.content.length / 75))}
|
||||
{/* H3 */}
|
||||
{block.type === 'h3' && (
|
||||
<input
|
||||
type="text"
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Text schreiben…"
|
||||
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
|
||||
placeholder="Unterabschnitt…"
|
||||
className="w-full bg-transparent text-sm font-semibold text-zinc-200 focus:outline-none pt-1"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* PARAGRAPH with Wiki-Link support */}
|
||||
{block.type === 'paragraph' && (
|
||||
<div className="space-y-1">
|
||||
<textarea
|
||||
rows={Math.max(1, Math.ceil((block.content || '').length / 75))}
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Text schreiben… (nutze [[Dokument]] für Wiki-Links)"
|
||||
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
|
||||
/>
|
||||
{block.content.includes('[[') && (
|
||||
<div className="text-xs text-zinc-400 pt-0.5">
|
||||
{renderTextWithWikiLinks(block.content)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TODO */}
|
||||
{block.type === 'todo' && (
|
||||
<div className="flex items-center gap-2.5 py-1">
|
||||
<input
|
||||
@@ -797,48 +999,72 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
|
||||
className="w-3.5 h-3.5 accent-accent cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="To-Do Punkt…"
|
||||
className={`w-full bg-transparent text-xs sm:text-sm focus:outline-none ${
|
||||
block.checked ? 'line-through text-zinc-500' : 'text-white'
|
||||
}`}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="To-Do Punkt…"
|
||||
className={`w-full bg-transparent text-xs sm:text-sm focus:outline-none ${
|
||||
block.checked ? 'line-through text-zinc-500' : 'text-white'
|
||||
}`}
|
||||
/>
|
||||
{block.content.includes('[[') && (
|
||||
<div className="text-xs text-zinc-400">
|
||||
{renderTextWithWikiLinks(block.content)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BULLET */}
|
||||
{block.type === 'bullet' && (
|
||||
<div className="flex items-center gap-2.5 py-0.5">
|
||||
<span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Listenpunkt…"
|
||||
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Listenpunkt…"
|
||||
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none"
|
||||
/>
|
||||
{block.content.includes('[[') && (
|
||||
<div className="text-xs text-zinc-400">
|
||||
{renderTextWithWikiLinks(block.content)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CALLOUT */}
|
||||
{block.type === 'callout' && (
|
||||
<div className="p-2.5 bg-canvas border border-accent/40 flex items-start gap-2">
|
||||
<Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
|
||||
<textarea
|
||||
rows={2}
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Wichtiger Hinweis oder Zusammenfassung…"
|
||||
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none resize-none"
|
||||
/>
|
||||
<div className="flex-1 space-y-1">
|
||||
<textarea
|
||||
rows={2}
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Wichtiger Hinweis oder Zusammenfassung…"
|
||||
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none resize-none"
|
||||
/>
|
||||
{block.content.includes('[[') && (
|
||||
<div className="text-xs text-zinc-400">
|
||||
{renderTextWithWikiLinks(block.content)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CODE */}
|
||||
{block.type === 'code' && (
|
||||
<div className="p-2.5 bg-canvas border border-border font-mono text-xs text-zinc-200">
|
||||
<textarea
|
||||
rows={Math.max(2, block.content.split('\n').length)}
|
||||
rows={Math.max(2, (block.content || '').split('\n').length)}
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="// Code oder Shell-Kommando…"
|
||||
@@ -846,9 +1072,62 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TABLE */}
|
||||
{block.type === 'table' && (
|
||||
<div className="p-2.5 bg-canvas border border-border space-y-2">
|
||||
<div className="flex items-center justify-between text-[11px] text-zinc-400 border-b border-border pb-1">
|
||||
<span className="flex items-center gap-1 font-semibold text-zinc-300">
|
||||
<TableIcon className="w-3 h-3 text-accent" /> Markdown Tabelle
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
rows={Math.max(3, (block.content || '').split('\n').length)}
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="| Spalte 1 | Spalte 2 |\n|---|---|\n| Inhalt | Wert |"
|
||||
className="w-full bg-transparent font-mono text-xs text-zinc-200 focus:outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PROGRESS BAR */}
|
||||
{block.type === 'progress' && (
|
||||
<div className="p-2.5 bg-canvas border border-border space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-zinc-300 font-medium flex items-center gap-1">
|
||||
<Percent className="w-3 h-3 text-accent" /> Fortschritt
|
||||
</span>
|
||||
<span className="font-mono text-accent font-semibold">
|
||||
{parseInt(block.content) || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-panel h-2.5 overflow-hidden border border-border">
|
||||
<div
|
||||
className="bg-accent h-full transition-all"
|
||||
style={{ width: `${Math.min(100, Math.max(0, parseInt(block.content) || 0))}%` }}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={parseInt(block.content) || 0}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
className="w-full accent-accent cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* DIVIDER */}
|
||||
{block.type === 'divider' && (
|
||||
<div className="py-2">
|
||||
<hr className="border-border" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Block Reorder & Delete Controls */}
|
||||
{/* Block Controls */}
|
||||
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity pt-1">
|
||||
<button
|
||||
type="button"
|
||||
@@ -879,9 +1158,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Block Toolbar */}
|
||||
{/* Bottom Add Block Toolbar */}
|
||||
<div className="mt-4 pt-3 border-t border-border flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-xs text-zinc-400 mr-1">+ Block:</span>
|
||||
<span className="text-xs text-zinc-400 mr-1">+ Neuer Block:</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@@ -933,10 +1212,32 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('h1')}
|
||||
onClick={() =>
|
||||
addBlock(
|
||||
'table',
|
||||
undefined,
|
||||
'| Spalte 1 | Spalte 2 |\n|---|---|\n| Inhalt A | Inhalt B |'
|
||||
)
|
||||
}
|
||||
className="btn-action h-6 px-2 text-xs"
|
||||
>
|
||||
<Heading1 className="w-3 h-3 text-accent" /> H1
|
||||
<TableIcon className="w-3 h-3 text-accent" /> Tabelle
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('progress', undefined, '50')}
|
||||
className="btn-action h-6 px-2 text-xs"
|
||||
>
|
||||
<Percent className="w-3 h-3 text-accent" /> Fortschritt
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('divider')}
|
||||
className="btn-action h-6 px-2 text-xs"
|
||||
>
|
||||
<Minus className="w-3 h-3 text-accent" /> Trennlinie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+157
-4
@@ -4,9 +4,14 @@ import {
|
||||
Document,
|
||||
DocumentBlock,
|
||||
ListItem,
|
||||
Organization,
|
||||
PriorityLevel,
|
||||
SharedList,
|
||||
Space,
|
||||
SystemSettings,
|
||||
Team,
|
||||
TeamMember,
|
||||
TaskList,
|
||||
Thought,
|
||||
User,
|
||||
} from './types';
|
||||
@@ -97,7 +102,7 @@ async function request<T>(path: string, options: RequestInit = {}, isRetry = fal
|
||||
}
|
||||
|
||||
export const api = {
|
||||
// --- AUTH ---
|
||||
// --- AUTH & SETTINGS ---
|
||||
async quickStart(): Promise<{ token: string; user: User }> {
|
||||
const res = await request<{ token: string; user: User }>('/api/v1/auth/quickstart', {
|
||||
method: 'POST',
|
||||
@@ -128,6 +133,19 @@ export const api = {
|
||||
return request<{ user: User; stats: DashboardStats }>('/api/v1/auth/me');
|
||||
},
|
||||
|
||||
async updateSettings(patch: {
|
||||
displayName?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
discordWebhookUrl?: string;
|
||||
notifyBeforeMinutes?: number;
|
||||
}): Promise<User> {
|
||||
return request<User>('/api/v1/auth/settings', {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(patch),
|
||||
});
|
||||
},
|
||||
|
||||
async getStats(): Promise<DashboardStats> {
|
||||
return request<DashboardStats>('/api/v1/stats');
|
||||
},
|
||||
@@ -141,6 +159,7 @@ export const api = {
|
||||
options?: {
|
||||
target?: 'inbox' | 'task' | 'list_item' | 'document';
|
||||
targetListId?: string;
|
||||
taskListId?: string;
|
||||
}
|
||||
): Promise<Thought> {
|
||||
try {
|
||||
@@ -153,6 +172,7 @@ export const api = {
|
||||
dueDate,
|
||||
target: options?.target || 'inbox',
|
||||
targetListId: options?.targetListId || '',
|
||||
taskListId: options?.taskListId || '',
|
||||
}),
|
||||
});
|
||||
return thought;
|
||||
@@ -169,6 +189,7 @@ export const api = {
|
||||
status: 'inbox',
|
||||
isCompleted: false,
|
||||
dueDate,
|
||||
taskListId: options?.taskListId || '',
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
queue.push(offlineThought);
|
||||
@@ -193,6 +214,7 @@ export const api = {
|
||||
priority: item.priority,
|
||||
source: item.source,
|
||||
dueDate: item.dueDate || '',
|
||||
taskListId: item.taskListId || '',
|
||||
}),
|
||||
});
|
||||
synced++;
|
||||
@@ -220,6 +242,7 @@ export const api = {
|
||||
options?: {
|
||||
convertTo?: 'task' | 'document' | 'list_item';
|
||||
targetListId?: string;
|
||||
taskListId?: string;
|
||||
dueDate?: string;
|
||||
}
|
||||
): Promise<Thought> {
|
||||
@@ -229,18 +252,28 @@ export const api = {
|
||||
action,
|
||||
convertTo: options?.convertTo || '',
|
||||
targetListId: options?.targetListId || '',
|
||||
taskListId: options?.taskListId || '',
|
||||
dueDate: options?.dueDate || '',
|
||||
}),
|
||||
});
|
||||
},
|
||||
|
||||
async getTasks(): Promise<Thought[]> {
|
||||
return request<Thought[]>('/api/v1/tasks');
|
||||
async getTasks(taskListId?: string): Promise<Thought[]> {
|
||||
const query = taskListId ? `?taskListId=${encodeURIComponent(taskListId)}` : '';
|
||||
return request<Thought[]>(`/api/v1/tasks${query}`);
|
||||
},
|
||||
|
||||
async updateThought(
|
||||
thoughtId: string,
|
||||
patch: { content?: string; isCompleted?: boolean; dueDate?: string; priority?: PriorityLevel }
|
||||
patch: {
|
||||
content?: string;
|
||||
isCompleted?: boolean;
|
||||
dueDate?: string;
|
||||
priority?: PriorityLevel;
|
||||
taskListId?: string;
|
||||
kanbanStatus?: 'todo' | 'in_progress' | 'done';
|
||||
notes?: string;
|
||||
}
|
||||
): Promise<Thought> {
|
||||
return request<Thought>(`/api/v1/thoughts/${thoughtId}`, {
|
||||
method: 'PATCH',
|
||||
@@ -256,6 +289,42 @@ export const api = {
|
||||
return request<{ purged: number }>('/api/v1/thoughts/discarded/purge', { method: 'DELETE' });
|
||||
},
|
||||
|
||||
// --- TASK LISTS ---
|
||||
async getTaskLists(): Promise<TaskList[]> {
|
||||
return request<TaskList[]>('/api/v1/task-lists');
|
||||
},
|
||||
|
||||
async createTaskList(payload: {
|
||||
title: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
spaceId?: string;
|
||||
}): Promise<TaskList> {
|
||||
return request<TaskList>('/api/v1/task-lists', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
},
|
||||
|
||||
async updateTaskList(
|
||||
id: string,
|
||||
patch: {
|
||||
title?: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
spaceId?: string;
|
||||
}
|
||||
): Promise<TaskList> {
|
||||
return request<TaskList>(`/api/v1/task-lists/${id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(patch),
|
||||
});
|
||||
},
|
||||
|
||||
async deleteTaskList(id: string): Promise<void> {
|
||||
await request(`/api/v1/task-lists/${id}`, { method: 'DELETE' });
|
||||
},
|
||||
|
||||
// --- WORKSPACE DOCUMENTS ---
|
||||
async getDocuments(): Promise<Document[]> {
|
||||
return request<Document[]>('/api/v1/documents');
|
||||
@@ -268,6 +337,7 @@ export const api = {
|
||||
async createDocument(payload: {
|
||||
title: string;
|
||||
icon?: string;
|
||||
folderPath?: string;
|
||||
blocks?: DocumentBlock[];
|
||||
tags?: string[];
|
||||
isPinned?: boolean;
|
||||
@@ -283,6 +353,7 @@ export const api = {
|
||||
patch: {
|
||||
title?: string;
|
||||
icon?: string;
|
||||
folderPath?: string;
|
||||
blocks?: DocumentBlock[];
|
||||
tags?: string[];
|
||||
isPinned?: boolean;
|
||||
@@ -360,6 +431,88 @@ export const api = {
|
||||
});
|
||||
},
|
||||
|
||||
// --- ORGANIZATIONS & TEAMS ---
|
||||
async getOrganizations(): Promise<Organization[]> {
|
||||
return request<Organization[]>('/api/v1/organizations');
|
||||
},
|
||||
|
||||
async createOrganization(name: string): Promise<Organization> {
|
||||
return request<Organization>('/api/v1/organizations', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
},
|
||||
|
||||
async getOrgTeams(orgId: string): Promise<Team[]> {
|
||||
return request<Team[]>(`/api/v1/organizations/${orgId}/teams`);
|
||||
},
|
||||
|
||||
async createOrgTeam(orgId: string, name: string, description: string): Promise<Team> {
|
||||
return request<Team>(`/api/v1/organizations/${orgId}/teams`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name, description }),
|
||||
});
|
||||
},
|
||||
|
||||
async getUserTeams(): Promise<Team[]> {
|
||||
return request<Team[]>('/api/v1/teams');
|
||||
},
|
||||
|
||||
async addTeamMember(teamId: string, userId: string, role = 'editor'): Promise<void> {
|
||||
await request(`/api/v1/teams/${teamId}/members`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ userId, role }),
|
||||
});
|
||||
},
|
||||
|
||||
async removeTeamMember(teamId: string, userId: string): Promise<void> {
|
||||
await request(`/api/v1/teams/${teamId}/members/${userId}`, { method: 'DELETE' });
|
||||
},
|
||||
|
||||
// --- ADMIN PANEL ---
|
||||
async adminGetUsers(): Promise<User[]> {
|
||||
return request<User[]>('/api/v1/admin/users');
|
||||
},
|
||||
|
||||
async adminCreateUser(payload: { email: string; password: string; displayName: string; role: string }): Promise<User> {
|
||||
return request<User>('/api/v1/admin/users', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
},
|
||||
|
||||
async adminUpdateUser(
|
||||
id: string,
|
||||
patch: { displayName?: string; email?: string; role?: string; isActive?: boolean; discordWebhookUrl?: string }
|
||||
): Promise<User> {
|
||||
return request<User>(`/api/v1/admin/users/${id}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(patch),
|
||||
});
|
||||
},
|
||||
|
||||
async adminResetPassword(id: string, password: string): Promise<void> {
|
||||
await request(`/api/v1/admin/users/${id}/password`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ password }),
|
||||
});
|
||||
},
|
||||
|
||||
async adminDeleteUser(id: string): Promise<void> {
|
||||
await request(`/api/v1/admin/users/${id}`, { method: 'DELETE' });
|
||||
},
|
||||
|
||||
async adminGetSettings(): Promise<SystemSettings> {
|
||||
return request<SystemSettings>('/api/v1/admin/settings');
|
||||
},
|
||||
|
||||
async adminUpdateSettings(settings: SystemSettings): Promise<SystemSettings> {
|
||||
return request<SystemSettings>('/api/v1/admin/settings', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(settings),
|
||||
});
|
||||
},
|
||||
|
||||
// --- API KEYS, WEBHOOKS & EXPORT ---
|
||||
async getAPIKeys(): Promise<APIKey[]> {
|
||||
return request<APIKey[]>('/api/v1/keys');
|
||||
|
||||
@@ -5,6 +5,10 @@ export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
displayName: string;
|
||||
role: 'admin' | 'member';
|
||||
isActive: boolean;
|
||||
discordWebhookUrl?: string;
|
||||
notifyBeforeMinutes?: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
@@ -20,11 +24,58 @@ export interface Thought {
|
||||
convertedType?: 'task' | 'document' | 'list_item';
|
||||
convertedRefId?: string;
|
||||
dueDate?: string;
|
||||
taskListId?: string;
|
||||
kanbanStatus?: 'todo' | 'in_progress' | 'done';
|
||||
notes?: string;
|
||||
alarmSent?: boolean;
|
||||
createdAt: string;
|
||||
triagedAt?: string;
|
||||
}
|
||||
|
||||
export type BlockType = 'h1' | 'h2' | 'h3' | 'paragraph' | 'todo' | 'bullet' | 'code' | 'callout' | 'divider';
|
||||
export interface TaskList {
|
||||
id: string;
|
||||
userId: string;
|
||||
spaceId?: string;
|
||||
title: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
tasksCount?: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface Organization {
|
||||
id: string;
|
||||
name: string;
|
||||
ownerId: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Team {
|
||||
id: string;
|
||||
orgId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
members?: TeamMember[];
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface TeamMember {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
displayName: string;
|
||||
email: string;
|
||||
role: 'owner' | 'editor' | 'viewer';
|
||||
joinedAt: string;
|
||||
}
|
||||
|
||||
export interface SystemSettings {
|
||||
sharingMode: 'open' | 'teams_only' | 'strict_private';
|
||||
allowRegistration: boolean;
|
||||
instanceName: string;
|
||||
}
|
||||
|
||||
export type BlockType = 'h1' | 'h2' | 'h3' | 'paragraph' | 'todo' | 'bullet' | 'code' | 'callout' | 'divider' | 'table' | 'progress';
|
||||
|
||||
export interface DocumentBlock {
|
||||
id: string;
|
||||
@@ -43,6 +94,7 @@ export interface Document {
|
||||
content: string;
|
||||
blocks: DocumentBlock[];
|
||||
tags: string[];
|
||||
folderPath?: string;
|
||||
isPinned: boolean;
|
||||
isArchived: boolean;
|
||||
createdAt: string;
|
||||
|
||||
Reference in new issue
Block a user