sandrodach
354129b2d4
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 18s
4880 lines
202 KiB
TypeScript
4880 lines
202 KiB
TypeScript
import React, { useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
|
|
import {
|
|
FilePlus,
|
|
FolderPlus,
|
|
Folder,
|
|
FolderOpen,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
Search,
|
|
Pin,
|
|
Trash2,
|
|
Download,
|
|
CheckSquare,
|
|
Heading1,
|
|
Heading2,
|
|
Heading3,
|
|
List,
|
|
Code,
|
|
Sparkles,
|
|
AlignLeft,
|
|
Check,
|
|
X,
|
|
ArrowUp,
|
|
ArrowDown,
|
|
Bold,
|
|
Italic,
|
|
Strikethrough,
|
|
Link,
|
|
FileText,
|
|
Table as TableIcon,
|
|
Percent,
|
|
Minus,
|
|
ExternalLink,
|
|
ArrowLeft,
|
|
GripVertical,
|
|
Layers,
|
|
Filter,
|
|
CheckCircle2,
|
|
Circle,
|
|
FolderTree,
|
|
Plus,
|
|
HelpCircle,
|
|
Users,
|
|
Lock,
|
|
Unlock,
|
|
Eye,
|
|
Edit3,
|
|
Share,
|
|
Share2,
|
|
Hash,
|
|
User as UserIcon,
|
|
} from 'lucide-react';
|
|
import { BlockType, Document, DocumentBlock, DocLockInfo, DocShare, TagDetails, TagSummary, Team, User } from '../../lib/types';
|
|
import { api, getToken, triggerHaptic } from '../../lib/api';
|
|
import { CodeBlockItem } from './CodeBlockItem';
|
|
import { UserAutocomplete } from '../UserAutocomplete';
|
|
|
|
interface WorkspaceViewProps {
|
|
currentUser?: User | null;
|
|
initialDocId?: string | null;
|
|
onStatsChange: () => void;
|
|
}
|
|
|
|
const ICONS = ['📄', '📝', '💡', '🚀', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦', '📑', '⚙️', '📊'];
|
|
|
|
interface FolderTreeItem {
|
|
path: string;
|
|
name: string;
|
|
depth: number;
|
|
subfolders: FolderTreeItem[];
|
|
docs: Document[];
|
|
}
|
|
|
|
interface SlashCommandItem {
|
|
type?: BlockType;
|
|
action?: 'insert_link' | 'insert_note' | 'insert_weblink';
|
|
label: string;
|
|
desc: string;
|
|
icon: string;
|
|
}
|
|
|
|
const SLASH_COMMANDS: SlashCommandItem[] = [
|
|
{ action: 'insert_link', label: '/link', desc: 'Webseite oder Notiz verlinken', icon: '🔗' },
|
|
{ action: 'insert_note', label: '/notiz', desc: 'Notiz verlinken [[Notiz]]', icon: '📄' },
|
|
{ action: 'insert_weblink', label: '/web', desc: 'Externe Webseite verlinken [Name](url)', icon: '🌐' },
|
|
{ type: 'todo', label: '/todo', desc: 'Aufgabe mit Checkbox', icon: '☑️' },
|
|
{ type: 'h1', label: '/h1', desc: 'Große Überschrift', icon: 'H1' },
|
|
{ type: 'h2', label: '/h2', desc: 'Abschnitts-Überschrift', icon: 'H2' },
|
|
{ type: 'h3', label: '/h3', desc: 'Unterabschnitt', icon: 'H3' },
|
|
{ type: 'bullet', label: '/bullet', desc: 'Standard Listenpunkt', icon: '•' },
|
|
{ type: 'callout', label: '/callout', desc: 'Hervorgehobene Hinweisbox', icon: '💡' },
|
|
{ type: 'code', label: '/code', desc: 'Code-Block mit Syntax', icon: '💻' },
|
|
{ type: 'table', label: '/table', desc: 'Markdown-Tabelle', icon: '📊' },
|
|
{ type: 'progress', label: '/progress', desc: 'Fortschrittsbalken', icon: '📈' },
|
|
{ type: 'divider', label: '/divider', desc: 'Horizontale Trennlinie', icon: '—' },
|
|
];
|
|
|
|
export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
|
currentUser,
|
|
initialDocId,
|
|
onStatsChange,
|
|
}) => {
|
|
// Top Workspace Tab Mode: 'editor' vs 'todos' vs 'tags'
|
|
const [workspaceMode, setWorkspaceMode] = useState<'editor' | 'todos' | 'tags'>('editor');
|
|
const [selectedTag, setSelectedTag] = useState<string | null>(null);
|
|
const [tagDetails, setTagDetails] = useState<TagDetails | null>(null);
|
|
const [workspaceTags, setWorkspaceTags] = useState<TagSummary[]>([]);
|
|
const [isLoadingTag, setIsLoadingTag] = useState(false);
|
|
const [tagSearchQuery, setTagSearchQuery] = useState('');
|
|
const [tagNoteContent, setTagNoteContent] = useState('');
|
|
const [tagNoteSaveState, setTagNoteSaveState] = useState<'saved' | 'saving'>('saved');
|
|
const tagNoteSaveTimerRef = useRef<any>(null);
|
|
|
|
// Collapsible sidebar sections
|
|
const [isPinnedCollapsed, setIsPinnedCollapsed] = useState(false);
|
|
const [isTagsCollapsed, setIsTagsCollapsed] = useState(false);
|
|
|
|
const [docs, setDocs] = useState<Document[]>([]);
|
|
const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
|
|
const [showIconPicker, setShowIconPicker] = useState(false);
|
|
const [showWikiLinkMenu, setShowWikiLinkMenu] = useState(false);
|
|
|
|
// Folder state (synchronized with server)
|
|
const [customFolders, setCustomFolders] = useState<string[]>([]);
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.removeItem('mindsift_workspace_folders');
|
|
} catch {}
|
|
}, []);
|
|
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
|
const [isCreatingFolder, setIsCreatingFolder] = useState(false);
|
|
const [newFolderParent, setNewFolderParent] = useState<string | null>(null);
|
|
const [newFolderName, setNewFolderName] = useState('');
|
|
|
|
// Sidebar Document & Folder Drag and Drop state
|
|
const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
|
|
const [draggingFolderPath, setDraggingFolderPath] = useState<string | null>(null);
|
|
const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
|
|
|
|
// Active focused block ref
|
|
const [lastFocusedBlockId, setLastFocusedBlockId] = useState<string | null>(null);
|
|
|
|
// --- LOGSEQ OUTLINER SPECIFIC STATE ---
|
|
// Zoom-in / Focus mode (Hoisting to a bullet)
|
|
const [zoomedBlockId, setZoomedBlockId] = useState<string | null>(null);
|
|
// Floating Slash Command menu
|
|
const [slashBlockId, setSlashBlockId] = useState<string | null>(null);
|
|
const [slashSearch, setSlashSearch] = useState('');
|
|
const [slashSelectedIndex, setSlashSelectedIndex] = useState(0);
|
|
const slashMenuRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
// Link Insertion Modal state (/link, /notiz, /web)
|
|
const [linkModalBlockId, setLinkModalBlockId] = useState<string | null>(null);
|
|
const [linkModalTab, setLinkModalTab] = useState<'note' | 'web'>('note');
|
|
const [linkSearchQuery, setLinkSearchQuery] = useState('');
|
|
const [linkWebTitle, setLinkWebTitle] = useState('');
|
|
const [linkWebUrl, setLinkWebUrl] = useState('');
|
|
const [activeEditingBlockId, setActiveEditingBlockId] = useState<string | null>(null);
|
|
const [activeCursorOffset, setActiveCursorOffset] = useState<number>(0);
|
|
const activeCursorOffsetRef = useRef<number>(0);
|
|
const [editingLinkOriginalRaw, setEditingLinkOriginalRaw] = useState<string | null>(null);
|
|
|
|
const setBlockCursor = (blockId: string | null, offset: number) => {
|
|
activeCursorOffsetRef.current = offset;
|
|
setActiveEditingBlockId(blockId);
|
|
setActiveCursorOffset(offset);
|
|
};
|
|
|
|
// Drag and Drop reordering state for blocks
|
|
const [draggingBlockId, setDraggingBlockId] = useState<string | null>(null);
|
|
|
|
// --- GLOBAL TO-DO ROLLUP STATE ---
|
|
const [todoFilter, setTodoFilter] = useState<'all' | 'open' | 'done'>('open');
|
|
const [todoFolderDrilldown, setTodoFolderDrilldown] = useState<string | null>(null);
|
|
const [collapsedTodoFolders, setCollapsedTodoFolders] = useState<Set<string>>(new Set());
|
|
|
|
// --- DOCUMENT SHARING STATE ---
|
|
const [showShareModal, setShowShareModal] = useState(false);
|
|
const [docShares, setDocShares] = useState<DocShare[]>([]);
|
|
const [collaborators, setCollaborators] = useState<User[]>([]);
|
|
const [shareTeams, setShareTeams] = useState<Team[]>([]);
|
|
const [addShareType, setAddShareType] = useState<'team' | 'user'>('team');
|
|
const [selectedShareTeamId, setSelectedShareTeamId] = useState('');
|
|
const [selectedShareUser, setSelectedShareUser] = useState<User | null>(null);
|
|
const [sharePermission, setSharePermission] = useState<'read' | 'write'>('read');
|
|
const [sharingLoading, setSharingLoading] = useState(false);
|
|
const [shareError, setShareError] = useState<string | null>(null);
|
|
|
|
// --- DOCUMENT LOCKING STATE ---
|
|
const [activeLock, setActiveLock] = useState<DocLockInfo | null>(null);
|
|
const [holdsLock, setHoldsLock] = useState(false);
|
|
const holdsLockRef = useRef(false);
|
|
const heartbeatTimerRef = useRef<any>(null);
|
|
const idleUnlockTimerRef = useRef<any>(null);
|
|
const currentDocIdRef = useRef<string | null>(null);
|
|
const isEditorFocusedRef = useRef(false);
|
|
|
|
const blockInputRefs = useRef<Record<string, HTMLTextAreaElement | HTMLInputElement | null>>({});
|
|
|
|
const isLockedByOther = !!(activeLock && activeLock.userId !== currentUser?.id);
|
|
const isReadOnly = selectedDoc?.permission === 'read' || isLockedByOther;
|
|
|
|
const stopHeartbeat = () => {
|
|
if (heartbeatTimerRef.current) {
|
|
clearInterval(heartbeatTimerRef.current);
|
|
heartbeatTimerRef.current = null;
|
|
}
|
|
};
|
|
|
|
const startHeartbeat = (docId: string) => {
|
|
stopHeartbeat();
|
|
heartbeatTimerRef.current = setInterval(async () => {
|
|
if (!holdsLockRef.current) {
|
|
stopHeartbeat();
|
|
return;
|
|
}
|
|
const res = await api.heartbeatDocLock(docId);
|
|
if (!res.extended) {
|
|
holdsLockRef.current = false;
|
|
setHoldsLock(false);
|
|
stopHeartbeat();
|
|
}
|
|
}, 4000);
|
|
};
|
|
|
|
const releaseMyLock = async (docId?: string) => {
|
|
const targetDocId = docId || currentDocIdRef.current;
|
|
if (!targetDocId) return;
|
|
const wasHolding = holdsLockRef.current;
|
|
stopHeartbeat();
|
|
if (idleUnlockTimerRef.current) {
|
|
clearTimeout(idleUnlockTimerRef.current);
|
|
idleUnlockTimerRef.current = null;
|
|
}
|
|
holdsLockRef.current = false;
|
|
setHoldsLock(false);
|
|
if (wasHolding || docId) {
|
|
try {
|
|
await api.unlockDocument(targetDocId);
|
|
} catch {}
|
|
}
|
|
};
|
|
|
|
const ensureLock = async (): Promise<boolean> => {
|
|
if (!selectedDoc || selectedDoc.permission === 'read') return false;
|
|
if (holdsLockRef.current) {
|
|
return true;
|
|
}
|
|
try {
|
|
const res = await api.lockDocument(selectedDoc.id);
|
|
if (res.acquired) {
|
|
holdsLockRef.current = true;
|
|
setHoldsLock(true);
|
|
setActiveLock(null);
|
|
startHeartbeat(selectedDoc.id);
|
|
return true;
|
|
} else if (res.lock) {
|
|
setActiveLock(res.lock);
|
|
holdsLockRef.current = false;
|
|
setHoldsLock(false);
|
|
return false;
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to acquire lock', e);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const handleBlockFocus = () => {
|
|
isEditorFocusedRef.current = true;
|
|
if (idleUnlockTimerRef.current) {
|
|
clearTimeout(idleUnlockTimerRef.current);
|
|
idleUnlockTimerRef.current = null;
|
|
}
|
|
if (!isReadOnly) {
|
|
ensureLock();
|
|
}
|
|
};
|
|
|
|
const handleBlockBlur = () => {
|
|
isEditorFocusedRef.current = false;
|
|
if (idleUnlockTimerRef.current) {
|
|
clearTimeout(idleUnlockTimerRef.current);
|
|
}
|
|
// Short grace period: if user clicked into another block in the doc, focus will cancel this.
|
|
// If user clicked outside or stopped editing, save and release the lock immediately!
|
|
idleUnlockTimerRef.current = setTimeout(async () => {
|
|
if (!isEditorFocusedRef.current && holdsLockRef.current) {
|
|
await flushPendingSave();
|
|
await releaseMyLock();
|
|
}
|
|
}, 1500);
|
|
};
|
|
|
|
// Debounced auto-save refs (500ms delay to avoid writing every keystroke to SSD)
|
|
const debounceSaveTimerRef = useRef<any>(null);
|
|
const pendingSaveDocRef = useRef<Document | null>(null);
|
|
|
|
const executeSaveToBackend = async (docToSave: Document) => {
|
|
if (isReadOnly) return;
|
|
try {
|
|
const saved = await api.updateDocument(docToSave.id, {
|
|
title: docToSave.title,
|
|
icon: docToSave.icon,
|
|
folderPath: docToSave.folderPath,
|
|
blocks: docToSave.blocks,
|
|
tags: docToSave.tags,
|
|
isPinned: docToSave.isPinned,
|
|
});
|
|
setSelectedDoc((prev) =>
|
|
prev && prev.id === saved.id
|
|
? {
|
|
...prev,
|
|
...saved,
|
|
permission: prev.permission,
|
|
isOwner: prev.isOwner,
|
|
ownerName: prev.ownerName,
|
|
sharedWith: prev.sharedWith,
|
|
}
|
|
: prev
|
|
);
|
|
onStatsChange();
|
|
api.getWorkspaceTags().then(setWorkspaceTags).catch(() => {});
|
|
if (selectedTag) {
|
|
api.getTagDetails(selectedTag).then(setTagDetails).catch(() => {});
|
|
}
|
|
} catch (e: any) {
|
|
if (e.message && e.message.includes('423')) {
|
|
api.getDocLock(docToSave.id).then((res) => {
|
|
if (res.lock) setActiveLock(res.lock);
|
|
});
|
|
}
|
|
} finally {
|
|
if (pendingSaveDocRef.current === null || pendingSaveDocRef.current === docToSave) {
|
|
pendingSaveDocRef.current = null;
|
|
setSaveState('saved');
|
|
}
|
|
if (!isEditorFocusedRef.current && holdsLockRef.current) {
|
|
releaseMyLock();
|
|
}
|
|
}
|
|
};
|
|
|
|
const flushPendingSave = async () => {
|
|
if (debounceSaveTimerRef.current) {
|
|
clearTimeout(debounceSaveTimerRef.current);
|
|
debounceSaveTimerRef.current = null;
|
|
}
|
|
if (pendingSaveDocRef.current) {
|
|
const doc = pendingSaveDocRef.current;
|
|
pendingSaveDocRef.current = null;
|
|
await executeSaveToBackend(doc);
|
|
}
|
|
};
|
|
|
|
const persistDocument = async (updatedDoc: Document, immediate = false) => {
|
|
if (isReadOnly) return;
|
|
await ensureLock();
|
|
|
|
// 1. Update local UI state immediately for responsive, instant typing
|
|
setSelectedDoc(updatedDoc);
|
|
setDocs((prev) => prev.map((d) => (d.id === updatedDoc.id ? updatedDoc : d)));
|
|
setSaveState('saving');
|
|
|
|
pendingSaveDocRef.current = updatedDoc;
|
|
|
|
if (debounceSaveTimerRef.current) {
|
|
clearTimeout(debounceSaveTimerRef.current);
|
|
debounceSaveTimerRef.current = null;
|
|
}
|
|
|
|
if (immediate) {
|
|
await flushPendingSave();
|
|
} else {
|
|
// 500 ms debounced delay after last keystroke so disk/SSD is only written after typing pauses
|
|
debounceSaveTimerRef.current = setTimeout(async () => {
|
|
debounceSaveTimerRef.current = null;
|
|
if (pendingSaveDocRef.current) {
|
|
const doc = pendingSaveDocRef.current;
|
|
pendingSaveDocRef.current = null;
|
|
await executeSaveToBackend(doc);
|
|
}
|
|
}, 500);
|
|
}
|
|
};
|
|
|
|
const loadDocs = async (selectId?: string | null) => {
|
|
try {
|
|
const [list, serverFolders, tags] = await Promise.all([
|
|
api.getDocuments(),
|
|
api.getFolders(),
|
|
api.getWorkspaceTags().catch(() => []),
|
|
]);
|
|
setDocs(list);
|
|
setCustomFolders(serverFolders);
|
|
setWorkspaceTags(tags);
|
|
if (selectId) {
|
|
const found = list.find((d) => d.id === selectId);
|
|
if (found) {
|
|
setSelectedDoc(found);
|
|
return;
|
|
}
|
|
}
|
|
if (!selectedDoc && list.length > 0) {
|
|
setSelectedDoc(list[0]);
|
|
} else if (selectedDoc) {
|
|
const updated = list.find((d) => d.id === selectedDoc.id);
|
|
if (updated) setSelectedDoc(updated);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error loading documents or folders:', err);
|
|
}
|
|
};
|
|
|
|
const openTagPage = async (tag: string) => {
|
|
const clean = tag.replace(/^#/, '').toLowerCase();
|
|
if (tagNoteSaveTimerRef.current) {
|
|
clearTimeout(tagNoteSaveTimerRef.current);
|
|
tagNoteSaveTimerRef.current = null;
|
|
}
|
|
setSelectedTag(clean);
|
|
setWorkspaceMode('tags');
|
|
setIsLoadingTag(true);
|
|
try {
|
|
const details = await api.getTagDetails(clean);
|
|
setTagDetails(details);
|
|
setTagNoteContent(details.noteContent || '');
|
|
setTagNoteSaveState('saved');
|
|
} catch (err) {
|
|
console.error('Failed to load tag details', err);
|
|
} finally {
|
|
setIsLoadingTag(false);
|
|
}
|
|
};
|
|
|
|
const handleTagNoteChange = (newContent: string) => {
|
|
setTagNoteContent(newContent);
|
|
if (!selectedTag) return;
|
|
const targetTag = selectedTag;
|
|
setTagNoteSaveState('saving');
|
|
if (tagNoteSaveTimerRef.current) {
|
|
clearTimeout(tagNoteSaveTimerRef.current);
|
|
}
|
|
tagNoteSaveTimerRef.current = setTimeout(async () => {
|
|
try {
|
|
await api.updateTagPageNote(targetTag, newContent);
|
|
setTagDetails((prev) =>
|
|
prev && prev.tag === targetTag ? { ...prev, noteContent: newContent } : prev
|
|
);
|
|
setTagNoteSaveState('saved');
|
|
} catch (err) {
|
|
console.error('Failed to save tag note', err);
|
|
setTagNoteSaveState('saved');
|
|
}
|
|
}, 450);
|
|
};
|
|
|
|
const handleExportTagMarkdown = () => {
|
|
if (!selectedTag) return;
|
|
const md = `# #${selectedTag}\n\n${tagNoteContent || ''}\n`;
|
|
const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `tag-${selectedTag}.md`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadDocs(initialDocId);
|
|
}, [initialDocId]);
|
|
|
|
const selectedDocIdRef = useRef<string | null>(null);
|
|
selectedDocIdRef.current = selectedDoc?.id || null;
|
|
const currentUserIdRef = useRef<string | null>(null);
|
|
currentUserIdRef.current = currentUser?.id || null;
|
|
|
|
// Handle document switch and lock status checks
|
|
useEffect(() => {
|
|
const prevId = currentDocIdRef.current;
|
|
if (prevId && prevId !== selectedDoc?.id) {
|
|
flushPendingSave();
|
|
releaseMyLock(prevId);
|
|
}
|
|
currentDocIdRef.current = selectedDoc?.id || null;
|
|
|
|
if (selectedDoc) {
|
|
api
|
|
.getDocLock(selectedDoc.id)
|
|
.then((res) => {
|
|
if (res.locked && res.lock && res.lock.userId !== currentUser?.id) {
|
|
setActiveLock(res.lock);
|
|
} else {
|
|
setActiveLock(null);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
} else {
|
|
setActiveLock(null);
|
|
}
|
|
|
|
return () => {
|
|
flushPendingSave();
|
|
if (currentDocIdRef.current) {
|
|
releaseMyLock(currentDocIdRef.current);
|
|
}
|
|
};
|
|
}, [selectedDoc?.id]);
|
|
|
|
// Window blur / visibility change listener: release lock when user leaves tab/window
|
|
useEffect(() => {
|
|
const handleWindowBlur = () => {
|
|
if (!isEditorFocusedRef.current && holdsLockRef.current) {
|
|
flushPendingSave();
|
|
releaseMyLock();
|
|
}
|
|
};
|
|
const handleVisibilityChange = () => {
|
|
if (document.visibilityState === 'hidden') {
|
|
isEditorFocusedRef.current = false;
|
|
flushPendingSave();
|
|
releaseMyLock();
|
|
}
|
|
};
|
|
window.addEventListener('blur', handleWindowBlur);
|
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
|
return () => {
|
|
window.removeEventListener('blur', handleWindowBlur);
|
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
};
|
|
}, []);
|
|
|
|
// Flush pending save and release lock before tab closes or unmounts
|
|
useEffect(() => {
|
|
const handleBeforeUnload = () => {
|
|
flushPendingSave();
|
|
if (currentDocIdRef.current && holdsLockRef.current) {
|
|
try {
|
|
const token = getToken();
|
|
fetch(`/api/v1/documents/${currentDocIdRef.current}/lock`, {
|
|
method: 'DELETE',
|
|
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
|
keepalive: true,
|
|
}).catch(() => {});
|
|
} catch {}
|
|
}
|
|
};
|
|
window.addEventListener('beforeunload', handleBeforeUnload);
|
|
return () => {
|
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
flushPendingSave();
|
|
if (currentDocIdRef.current && holdsLockRef.current) {
|
|
releaseMyLock(currentDocIdRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Real-time WebSocket listener for Document & Lock events
|
|
useEffect(() => {
|
|
const handleWs = (e: any) => {
|
|
const msg = e.detail;
|
|
if (!msg || !msg.event) return;
|
|
|
|
if (msg.event === 'DOC_LOCKED') {
|
|
const payload = msg.payload as DocLockInfo;
|
|
if (payload && payload.docId === selectedDocIdRef.current) {
|
|
if (payload.userId !== currentUserIdRef.current) {
|
|
setActiveLock(payload);
|
|
}
|
|
}
|
|
} else if (msg.event === 'DOC_UNLOCKED') {
|
|
const payload = msg.payload as { docId?: string; doc_id?: string; id?: string };
|
|
const unlockedDocId = payload?.docId || payload?.doc_id || payload?.id;
|
|
if (unlockedDocId && unlockedDocId === selectedDocIdRef.current) {
|
|
setActiveLock(null);
|
|
// Fetch fresh document from backend so updates made by the other user are immediately visible
|
|
api.getDocument(unlockedDocId).then((freshDoc) => {
|
|
if (freshDoc && freshDoc.id === selectedDocIdRef.current) {
|
|
setSelectedDoc((prev) => (prev && prev.id === freshDoc.id ? { ...prev, ...freshDoc, isPinned: prev.isPinned } : prev));
|
|
setDocs((prev) => prev.map((d) => (d.id === freshDoc.id ? { ...d, ...freshDoc, isPinned: d.isPinned } : d)));
|
|
}
|
|
}).catch(() => {});
|
|
}
|
|
} else if (msg.event === 'DOC_CREATED') {
|
|
const created = msg.payload as Document;
|
|
if (created && created.id) {
|
|
setDocs((prev) => (prev.some((d) => d.id === created.id) ? prev : [created, ...prev]));
|
|
onStatsChange();
|
|
}
|
|
} else if (msg.event === 'DOC_UPDATED') {
|
|
const updated = msg.payload as Document;
|
|
if (updated && updated.id) {
|
|
setDocs((prev) =>
|
|
prev.map((d) => (d.id === updated.id ? { ...d, ...updated, isPinned: d.isPinned } : d))
|
|
);
|
|
if (selectedDocIdRef.current === updated.id) {
|
|
if (!holdsLockRef.current) {
|
|
setSelectedDoc((prev) => (prev ? { ...prev, ...updated, isPinned: prev.isPinned } : updated));
|
|
}
|
|
}
|
|
onStatsChange();
|
|
}
|
|
} else if (msg.event === 'DOC_DELETED') {
|
|
const deletedId = typeof msg.payload === 'string' ? msg.payload : msg.payload?.id;
|
|
if (deletedId) {
|
|
setDocs((prev) => prev.filter((d) => d.id !== deletedId));
|
|
if (selectedDocIdRef.current === deletedId) {
|
|
setSelectedDoc(null);
|
|
}
|
|
onStatsChange();
|
|
}
|
|
} else if (msg.event === 'WORKSPACE_FOLDERS_UPDATED') {
|
|
api.getFolders().then(setCustomFolders).catch(() => {});
|
|
}
|
|
};
|
|
|
|
window.addEventListener('mindsift:ws', handleWs);
|
|
return () => window.removeEventListener('mindsift:ws', handleWs);
|
|
}, [onStatsChange]);
|
|
|
|
const openShareModal = async () => {
|
|
if (!selectedDoc) return;
|
|
setShowShareModal(true);
|
|
setShareError(null);
|
|
setSharingLoading(true);
|
|
setSelectedShareUser(null);
|
|
setSelectedShareTeamId('');
|
|
try {
|
|
const [sharesList, usersList, teamsList] = await Promise.all([
|
|
api.getDocShares(selectedDoc.id).catch(() => []),
|
|
api.getUsersDirectory ? api.getUsersDirectory().catch(() => api.getCollaborators().catch(() => [])) : api.getCollaborators().catch(() => []),
|
|
api.getUserTeams().catch(() => []),
|
|
]);
|
|
setDocShares(sharesList);
|
|
setCollaborators(usersList);
|
|
setShareTeams(teamsList);
|
|
} finally {
|
|
setSharingLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleAddShare = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedDoc) return;
|
|
setSharingLoading(true);
|
|
setShareError(null);
|
|
try {
|
|
if (addShareType === 'team') {
|
|
if (!selectedShareTeamId) {
|
|
setShareError('Bitte ein Team oder eine Gruppe auswählen');
|
|
setSharingLoading(false);
|
|
return;
|
|
}
|
|
await api.createDocShare(selectedDoc.id, {
|
|
teamId: selectedShareTeamId,
|
|
permission: sharePermission,
|
|
});
|
|
setSelectedShareTeamId('');
|
|
} else {
|
|
if (!selectedShareUser) {
|
|
setShareError('Bitte einen bestehenden Benutzer auswählen');
|
|
setSharingLoading(false);
|
|
return;
|
|
}
|
|
await api.createDocShare(selectedDoc.id, {
|
|
userId: selectedShareUser.id,
|
|
permission: sharePermission,
|
|
});
|
|
setSelectedShareUser(null);
|
|
}
|
|
|
|
const sharesList = await api.getDocShares(selectedDoc.id).catch(() => []);
|
|
setDocShares(sharesList);
|
|
setSelectedDoc((prev) =>
|
|
prev
|
|
? {
|
|
...prev,
|
|
sharedWith: sharesList,
|
|
}
|
|
: prev
|
|
);
|
|
} catch (err: any) {
|
|
setShareError(err.message || 'Freigabe konnte nicht erstellt werden');
|
|
} finally {
|
|
setSharingLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdateSharePerm = async (targetUserId: string, newPerm: 'read' | 'write') => {
|
|
if (!selectedDoc) return;
|
|
setSharingLoading(true);
|
|
try {
|
|
const updated = await api.createDocShare(selectedDoc.id, {
|
|
userId: targetUserId,
|
|
permission: newPerm,
|
|
});
|
|
setDocShares((prev) => prev.map((s) => (s.userId === targetUserId ? updated : s)));
|
|
setSelectedDoc((prev) =>
|
|
prev
|
|
? {
|
|
...prev,
|
|
sharedWith: (prev.sharedWith || []).map((s) =>
|
|
s.userId === targetUserId ? updated : s
|
|
),
|
|
}
|
|
: prev
|
|
);
|
|
} catch (err: any) {
|
|
setShareError(err.message || 'Berechtigung konnte nicht geändert werden');
|
|
} finally {
|
|
setSharingLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRemoveShare = async (targetId: string) => {
|
|
if (!selectedDoc) return;
|
|
if (!window.confirm('Freigabe wirklich aufheben?')) return;
|
|
setSharingLoading(true);
|
|
try {
|
|
await api.deleteDocShare(selectedDoc.id, targetId);
|
|
setDocShares((prev) => prev.filter((s) => (s.targetId || s.userId || s.id) !== targetId && s.userId !== targetId));
|
|
setSelectedDoc((prev) =>
|
|
prev
|
|
? {
|
|
...prev,
|
|
sharedWith: (prev.sharedWith || []).filter((s) => (s.targetId || s.userId || s.id) !== targetId && s.userId !== targetId),
|
|
}
|
|
: prev
|
|
);
|
|
} catch (err: any) {
|
|
setShareError(err.message || 'Freigabe konnte nicht entfernt werden');
|
|
} finally {
|
|
setSharingLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleLeaveShare = async () => {
|
|
if (!selectedDoc || !currentUser) return;
|
|
const totalBlocks = selectedDoc.blocks?.length || 0;
|
|
const subpointsCount = (selectedDoc.blocks || []).filter((b) => (b.level || 0) > 0).length;
|
|
const title = selectedDoc.title || 'Geteilte Notiz';
|
|
|
|
let confirmMsg = 'Möchtest du diese freigegebene Notiz wirklich aus deinem Workspace entfernen?';
|
|
if (totalBlocks > 0 && subpointsCount > 0) {
|
|
confirmMsg = `Möchtest du die geteilte Notiz "${title}" mit allen ${totalBlocks} Punkten (inklusive ${subpointsCount} Unterpunkten) wirklich aus deinem Workspace entfernen?`;
|
|
} else if (totalBlocks > 0) {
|
|
confirmMsg = `Möchtest du die geteilte Notiz "${title}" wirklich aus deinem Workspace entfernen?`;
|
|
}
|
|
|
|
if (!window.confirm(confirmMsg)) return;
|
|
try {
|
|
await api.deleteDocument(selectedDoc.id);
|
|
setShowShareModal(false);
|
|
const remaining = docs.filter((d) => d.id !== selectedDoc.id);
|
|
setDocs(remaining);
|
|
setSelectedDoc(remaining[0] || null);
|
|
onStatsChange();
|
|
} catch (err: any) {
|
|
alert(err.message || 'Konnte Freigabe nicht verlassen');
|
|
}
|
|
};
|
|
|
|
|
|
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:', '') : '';
|
|
};
|
|
|
|
// Compute all unique folder paths
|
|
const allFolderPaths = useMemo(() => {
|
|
const set = new Set<string>(customFolders);
|
|
docs.forEach((doc) => {
|
|
const f = getDocFolder(doc);
|
|
if (f) {
|
|
const parts = f.split('/');
|
|
let cur = '';
|
|
for (const p of parts) {
|
|
cur = cur ? `${cur}/${p}` : p;
|
|
set.add(cur);
|
|
}
|
|
}
|
|
});
|
|
return Array.from(set).sort((a, b) => a.localeCompare(b));
|
|
}, [customFolders, docs]);
|
|
|
|
// Keep folders expanded by default
|
|
useEffect(() => {
|
|
setExpandedFolders((prev) => {
|
|
const next = new Set(prev);
|
|
allFolderPaths.forEach((p) => next.add(p));
|
|
return next;
|
|
});
|
|
}, [allFolderPaths.join(',')]);
|
|
|
|
const handleCreateDoc = async (folderPath?: string | null) => {
|
|
triggerHaptic(15);
|
|
const tags = ['notiz'];
|
|
const path = folderPath || '';
|
|
if (path) {
|
|
tags.push(`folder:${path}`);
|
|
}
|
|
const created = await api.createDocument({
|
|
title: 'Neue Notiz',
|
|
icon: '📄',
|
|
folderPath: path,
|
|
blocks: [
|
|
{
|
|
id: `blk_${Date.now()}_1`,
|
|
type: 'bullet',
|
|
content: '',
|
|
level: 0,
|
|
},
|
|
],
|
|
tags,
|
|
isPinned: false,
|
|
});
|
|
|
|
await loadDocs(created.id);
|
|
onStatsChange();
|
|
setWorkspaceMode('editor');
|
|
};
|
|
|
|
const handleDeleteDoc = async (id: string) => {
|
|
const docToDelete = docs.find((d) => d.id === id) || (selectedDoc?.id === id ? selectedDoc : null);
|
|
const title = docToDelete?.title || selectedDoc?.title || 'Notiz';
|
|
const totalBlocks = docToDelete?.blocks?.length || 0;
|
|
const subpointsCount = (docToDelete?.blocks || []).filter((b) => (b.level || 0) > 0).length;
|
|
|
|
let confirmMsg = `Möchtest du die Notiz "${title}" wirklich löschen?`;
|
|
if (totalBlocks > 0) {
|
|
if (subpointsCount > 0) {
|
|
confirmMsg = `Möchtest du die Notiz "${title}" mit allen ${totalBlocks} Aufzählungspunkten (inklusive ${subpointsCount} Unterpunkten) wirklich unwiderruflich löschen?`;
|
|
} else {
|
|
confirmMsg = `Möchtest du die Notiz "${title}" mit allen ${totalBlocks} Aufzählungspunkten wirklich löschen?`;
|
|
}
|
|
}
|
|
|
|
if (!window.confirm(confirmMsg)) return;
|
|
triggerHaptic(20);
|
|
await api.deleteDocument(id);
|
|
const remaining = docs.filter((d) => d.id !== id);
|
|
setDocs(remaining);
|
|
setSelectedDoc(remaining[0] || null);
|
|
onStatsChange();
|
|
};
|
|
|
|
const handleChangeDocFolder = async (folderPath: string) => {
|
|
if (!selectedDoc) return;
|
|
const cleanPath = folderPath.trim();
|
|
const updatedTags = (selectedDoc.tags || []).filter((t) => !t.startsWith('folder:'));
|
|
if (cleanPath) {
|
|
updatedTags.push(`folder:${cleanPath}`);
|
|
}
|
|
const updatedDoc = {
|
|
...selectedDoc,
|
|
folderPath: cleanPath,
|
|
tags: updatedTags,
|
|
};
|
|
await persistDocument(updatedDoc, true);
|
|
};
|
|
|
|
// Global drag cleanup so drag states never get stuck if dragend is lost during re-render
|
|
useEffect(() => {
|
|
const handleGlobalDragEnd = () => {
|
|
setDraggingDocId(null);
|
|
setDraggingFolderPath(null);
|
|
setDragOverFolder(null);
|
|
setDraggingBlockId(null);
|
|
};
|
|
window.addEventListener('dragend', handleGlobalDragEnd);
|
|
window.addEventListener('drop', handleGlobalDragEnd);
|
|
return () => {
|
|
window.removeEventListener('dragend', handleGlobalDragEnd);
|
|
window.removeEventListener('drop', handleGlobalDragEnd);
|
|
};
|
|
}, []);
|
|
|
|
const handleMoveFolder = async (sourcePath: string, targetParentPath: string) => {
|
|
const cleanSource = sourcePath.trim();
|
|
const cleanTarget = targetParentPath.trim();
|
|
|
|
// Cannot move to self or into own subfolder
|
|
if (!cleanSource || cleanSource === cleanTarget || cleanTarget.startsWith(cleanSource + '/')) {
|
|
return;
|
|
}
|
|
|
|
// Name of the folder being moved
|
|
const folderName = cleanSource.split('/').pop() || cleanSource;
|
|
const newFolderPath = cleanTarget ? `${cleanTarget}/${folderName}` : folderName;
|
|
|
|
if (newFolderPath === cleanSource) return;
|
|
|
|
triggerHaptic(15);
|
|
|
|
// 1. Update all documents that are in cleanSource or any subfolder of cleanSource
|
|
const docsToUpdate = docs.filter((d) => {
|
|
const f = getDocFolder(d);
|
|
return f === cleanSource || f.startsWith(cleanSource + '/');
|
|
});
|
|
|
|
const updatedDocsList = docs.map((d) => {
|
|
const f = getDocFolder(d);
|
|
if (f === cleanSource) {
|
|
const nextFolder = newFolderPath;
|
|
const updatedTags = (d.tags || []).filter((t) => !t.startsWith('folder:'));
|
|
if (nextFolder) updatedTags.push(`folder:${nextFolder}`);
|
|
return { ...d, folderPath: nextFolder, tags: updatedTags };
|
|
} else if (f.startsWith(cleanSource + '/')) {
|
|
const suffix = f.slice(cleanSource.length);
|
|
const nextFolder = `${newFolderPath}${suffix}`;
|
|
const updatedTags = (d.tags || []).filter((t) => !t.startsWith('folder:'));
|
|
if (nextFolder) updatedTags.push(`folder:${nextFolder}`);
|
|
return { ...d, folderPath: nextFolder, tags: updatedTags };
|
|
}
|
|
return d;
|
|
});
|
|
|
|
setDocs(updatedDocsList);
|
|
if (selectedDoc) {
|
|
const found = updatedDocsList.find((d) => d.id === selectedDoc.id);
|
|
if (found) setSelectedDoc(found);
|
|
}
|
|
|
|
// Persist all affected docs to backend
|
|
for (const d of docsToUpdate) {
|
|
const f = getDocFolder(d);
|
|
let nextFolder = newFolderPath;
|
|
if (f.startsWith(cleanSource + '/')) {
|
|
const suffix = f.slice(cleanSource.length);
|
|
nextFolder = `${newFolderPath}${suffix}`;
|
|
}
|
|
const updatedTags = (d.tags || []).filter((t) => !t.startsWith('folder:'));
|
|
if (nextFolder) updatedTags.push(`folder:${nextFolder}`);
|
|
|
|
api
|
|
.updateDocument(d.id, {
|
|
folderPath: nextFolder,
|
|
tags: updatedTags,
|
|
})
|
|
.catch((err) => console.error('Failed to update doc folder', err));
|
|
}
|
|
|
|
// 2. Sync folder structure with server
|
|
api
|
|
.createFolder(newFolderPath)
|
|
.then(() => api.deleteFolder(cleanSource))
|
|
.then(() => api.getFolders())
|
|
.then(setCustomFolders)
|
|
.catch((err) => console.error('Error syncing moved folders with server', err));
|
|
|
|
// Expand the new folder path and its parent
|
|
setExpandedFolders((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(newFolderPath);
|
|
if (cleanTarget) next.add(cleanTarget);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleDropDocToFolder = async (folderPath: string, e: React.DragEvent) => {
|
|
const docId = e.dataTransfer.getData('application/mindsift-doc-id') || draggingDocId;
|
|
setDraggingDocId(null);
|
|
setDragOverFolder(null);
|
|
if (!docId) return;
|
|
const doc = docs.find((d) => d.id === docId);
|
|
if (!doc) return;
|
|
const cleanPath = folderPath.trim();
|
|
if (getDocFolder(doc) === cleanPath) return;
|
|
|
|
triggerHaptic(15);
|
|
const updatedTags = (doc.tags || []).filter((t) => !t.startsWith('folder:'));
|
|
if (cleanPath) {
|
|
updatedTags.push(`folder:${cleanPath}`);
|
|
}
|
|
const updatedDoc: Document = {
|
|
...doc,
|
|
folderPath: cleanPath,
|
|
tags: updatedTags,
|
|
};
|
|
await persistDocument(updatedDoc, true);
|
|
if (cleanPath) {
|
|
setExpandedFolders((prev) => new Set([...prev, cleanPath]));
|
|
}
|
|
};
|
|
|
|
const handleStartCreateFolder = (parentPath?: string | null) => {
|
|
setNewFolderParent(parentPath || null);
|
|
setNewFolderName('');
|
|
setIsCreatingFolder(true);
|
|
if (parentPath) {
|
|
setExpandedFolders((prev) => new Set([...prev, parentPath]));
|
|
}
|
|
};
|
|
|
|
const handleConfirmCreateFolder = async () => {
|
|
const trimmed = newFolderName.trim();
|
|
if (!trimmed) {
|
|
setIsCreatingFolder(false);
|
|
return;
|
|
}
|
|
const fullPath = newFolderParent ? `${newFolderParent}/${trimmed}` : trimmed;
|
|
try {
|
|
await api.createFolder(fullPath);
|
|
const serverFolders = await api.getFolders();
|
|
setCustomFolders(serverFolders);
|
|
} catch (err) {
|
|
console.error('Failed to create folder on server', err);
|
|
if (!customFolders.includes(fullPath)) {
|
|
setCustomFolders((prev) => [...prev, fullPath].sort((a, b) => a.localeCompare(b)));
|
|
}
|
|
}
|
|
setExpandedFolders((prev) => new Set([...prev, fullPath]));
|
|
setIsCreatingFolder(false);
|
|
setNewFolderName('');
|
|
setNewFolderParent(null);
|
|
};
|
|
|
|
const handleDeleteFolder = async (folderPath: string, folderName: string) => {
|
|
// Find all documents in this folder and subfolders
|
|
const docsInFolder = docs.filter((d) => {
|
|
const f = getDocFolder(d);
|
|
return f === folderPath || f.startsWith(`${folderPath}/`);
|
|
});
|
|
|
|
const confirmMsg =
|
|
docsInFolder.length > 0
|
|
? `Möchtest du den Ordner "${folderName}" wirklich löschen? Alle ${docsInFolder.length} darin enthaltenen Notizen werden unwiderruflich gelöscht!`
|
|
: `Möchtest du den leeren Ordner "${folderName}" wirklich löschen?`;
|
|
|
|
if (!window.confirm(confirmMsg)) return;
|
|
|
|
try {
|
|
const res = await api.deleteFolder(folderPath);
|
|
const deletedIds = new Set(res.deletedDocIds || docsInFolder.map((d) => d.id));
|
|
|
|
const nextDocs = docs.filter((d) => !deletedIds.has(d.id));
|
|
setDocs(nextDocs);
|
|
|
|
if (selectedDoc && deletedIds.has(selectedDoc.id)) {
|
|
setSelectedDoc(nextDocs.length > 0 ? nextDocs[0] : null);
|
|
}
|
|
|
|
const serverFolders = await api.getFolders();
|
|
setCustomFolders(serverFolders);
|
|
onStatsChange();
|
|
} catch (err) {
|
|
console.error('Failed to delete folder', err);
|
|
alert('Fehler beim Löschen des Ordners');
|
|
}
|
|
};
|
|
|
|
const toggleFolder = (folderPath: string) => {
|
|
setExpandedFolders((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(folderPath)) {
|
|
next.delete(folderPath);
|
|
} else {
|
|
next.add(folderPath);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
// ============================================================================
|
|
// LOGSEQ OUTLINER CORE LOGIC
|
|
// ============================================================================
|
|
|
|
// Zoom-in / Hoisting Calculation
|
|
const { visibleBlocks, breadcrumbBlocks, zoomedBlock } = useMemo(() => {
|
|
if (!selectedDoc) return { visibleBlocks: [], breadcrumbBlocks: [], zoomedBlock: null };
|
|
const all = selectedDoc.blocks;
|
|
|
|
if (!zoomedBlockId) {
|
|
// Normal view: filter out children of collapsed blocks
|
|
const list: { block: DocumentBlock; originalIndex: number }[] = [];
|
|
let hideUntilLevel = -1;
|
|
|
|
for (let i = 0; i < all.length; i++) {
|
|
const b = all[i];
|
|
const lvl = b.level || 0;
|
|
|
|
if (hideUntilLevel !== -1) {
|
|
if (lvl > hideUntilLevel) {
|
|
continue; // Skip collapsed child
|
|
} else {
|
|
hideUntilLevel = -1; // End of collapsed subtree
|
|
}
|
|
}
|
|
|
|
list.push({ block: b, originalIndex: i });
|
|
|
|
if (b.collapsed) {
|
|
hideUntilLevel = lvl;
|
|
}
|
|
}
|
|
|
|
return { visibleBlocks: list, breadcrumbBlocks: [], zoomedBlock: null };
|
|
}
|
|
|
|
// Zoomed view: find zoomed block and its descendants
|
|
const zoomIdx = all.findIndex((b) => b.id === zoomedBlockId);
|
|
if (zoomIdx === -1) {
|
|
return { visibleBlocks: [], breadcrumbBlocks: [], zoomedBlock: null };
|
|
}
|
|
|
|
const target = all[zoomIdx];
|
|
const targetLevel = target.level || 0;
|
|
|
|
// Build breadcrumbs: find parents with strictly decreasing levels
|
|
const crumbs: DocumentBlock[] = [];
|
|
let curLevel = targetLevel;
|
|
for (let i = zoomIdx - 1; i >= 0; i--) {
|
|
const b = all[i];
|
|
const lvl = b.level || 0;
|
|
if (lvl < curLevel) {
|
|
crumbs.unshift(b);
|
|
curLevel = lvl;
|
|
}
|
|
}
|
|
|
|
// Descendants of zoomed block (respecting collapsed sub-branches inside the zoomed view)
|
|
const descendants: { block: DocumentBlock; originalIndex: number }[] = [];
|
|
let hideUntilLevel = -1;
|
|
for (let i = zoomIdx + 1; i < all.length; i++) {
|
|
const b = all[i];
|
|
const lvl = b.level || 0;
|
|
if (lvl <= targetLevel) {
|
|
break;
|
|
}
|
|
if (hideUntilLevel !== -1) {
|
|
if (lvl > hideUntilLevel) {
|
|
continue;
|
|
} else {
|
|
hideUntilLevel = -1;
|
|
}
|
|
}
|
|
descendants.push({ block: b, originalIndex: i });
|
|
if (b.collapsed) {
|
|
hideUntilLevel = lvl;
|
|
}
|
|
}
|
|
|
|
return { visibleBlocks: descendants, breadcrumbBlocks: crumbs, zoomedBlock: target };
|
|
}, [selectedDoc, zoomedBlockId]);
|
|
|
|
// Helper: check if a block has children (i.e. next block has greater level)
|
|
const hasChildren = (blocks: DocumentBlock[], index: number): boolean => {
|
|
if (index + 1 >= blocks.length) return false;
|
|
const currentLevel = blocks[index].level || 0;
|
|
return (blocks[index + 1].level || 0) > currentLevel;
|
|
};
|
|
|
|
// Zoom into a bullet (or back out to parent/root) and ensure childless bullets get an editable sub-bullet
|
|
const handleZoomTo = (targetBlockId: string | null) => {
|
|
if (!selectedDoc) {
|
|
setZoomedBlockId(targetBlockId);
|
|
return;
|
|
}
|
|
|
|
let workingBlocks = [...selectedDoc.blocks];
|
|
let blocksChanged = false;
|
|
|
|
// If zooming out/away from a zoomed block whose only descendant is a completely empty bullet, clean it up
|
|
if (!isReadOnly && zoomedBlock && targetBlockId !== zoomedBlock.id) {
|
|
const curZoomIdx = workingBlocks.findIndex((b) => b.id === zoomedBlock.id);
|
|
if (curZoomIdx !== -1) {
|
|
const curZoomLevel = workingBlocks[curZoomIdx].level || 0;
|
|
const descIndices: number[] = [];
|
|
for (let i = curZoomIdx + 1; i < workingBlocks.length; i++) {
|
|
if ((workingBlocks[i].level || 0) > curZoomLevel) {
|
|
descIndices.push(i);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
if (descIndices.length === 1) {
|
|
const onlyChild = workingBlocks[descIndices[0]];
|
|
if (
|
|
onlyChild.id !== targetBlockId &&
|
|
onlyChild.type === 'bullet' &&
|
|
(!onlyChild.content || onlyChild.content.trim() === '')
|
|
) {
|
|
workingBlocks.splice(descIndices[0], 1);
|
|
blocksChanged = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (targetBlockId && !isReadOnly) {
|
|
const targetIdx = workingBlocks.findIndex((b) => b.id === targetBlockId);
|
|
if (targetIdx !== -1 && !hasChildren(workingBlocks, targetIdx)) {
|
|
const childLevel = (workingBlocks[targetIdx].level || 0) + 1;
|
|
const newChild: DocumentBlock = {
|
|
id: `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
|
|
type: 'bullet',
|
|
content: '',
|
|
level: childLevel,
|
|
checked: false,
|
|
};
|
|
workingBlocks.splice(targetIdx + 1, 0, newChild);
|
|
persistDocument({ ...selectedDoc, blocks: workingBlocks });
|
|
setZoomedBlockId(targetBlockId);
|
|
setLastFocusedBlockId(newChild.id);
|
|
setBlockCursor(newChild.id, 0);
|
|
setTimeout(() => {
|
|
const el = blockInputRefs.current[newChild.id];
|
|
if (el) {
|
|
el.focus();
|
|
if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
|
|
(el as any).setSelectionRange(0, 0);
|
|
}
|
|
}
|
|
}, 30);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (blocksChanged) {
|
|
persistDocument({ ...selectedDoc, blocks: workingBlocks });
|
|
}
|
|
setZoomedBlockId(targetBlockId);
|
|
};
|
|
|
|
// Insert a new bullet immediately after index, inheriting level
|
|
const insertNewBulletAfter = (
|
|
afterIndex: number,
|
|
level: number,
|
|
type: BlockType = 'bullet',
|
|
initialContent: string = '',
|
|
updatedCurrentBlock?: { id: string; content: string }
|
|
) => {
|
|
if (isReadOnly || !selectedDoc) return;
|
|
const newBlock: DocumentBlock = {
|
|
id: `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
|
|
type,
|
|
content: initialContent,
|
|
level,
|
|
checked: false,
|
|
};
|
|
|
|
const nextBlocks = selectedDoc.blocks.map((b) =>
|
|
updatedCurrentBlock && b.id === updatedCurrentBlock.id
|
|
? { ...b, content: updatedCurrentBlock.content }
|
|
: b
|
|
);
|
|
nextBlocks.splice(afterIndex + 1, 0, newBlock);
|
|
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
|
setLastFocusedBlockId(newBlock.id);
|
|
setBlockCursor(newBlock.id, 0);
|
|
|
|
// Focus into the new element next tick
|
|
setTimeout(() => {
|
|
const el = blockInputRefs.current[newBlock.id];
|
|
if (el) {
|
|
el.focus();
|
|
if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
|
|
(el as any).setSelectionRange(0, 0);
|
|
}
|
|
}
|
|
}, 20);
|
|
};
|
|
|
|
// Indent block (Tab): increase level by 1
|
|
const indentBlock = (index: number) => {
|
|
if (isReadOnly || !selectedDoc || index === 0) return;
|
|
const block = selectedDoc.blocks[index];
|
|
const prevBlock = selectedDoc.blocks[index - 1];
|
|
const currentLevel = block.level || 0;
|
|
const maxLevel = (prevBlock.level || 0) + 1;
|
|
if (currentLevel < maxLevel) {
|
|
updateBlock(block.id, { level: currentLevel + 1 });
|
|
}
|
|
};
|
|
|
|
// Outdent block (Shift+Tab): decrease level by 1 (without leaving active zoomed subtree)
|
|
const outdentBlock = (blockId: string) => {
|
|
if (isReadOnly || !selectedDoc) return;
|
|
const block = selectedDoc.blocks.find((b) => b.id === blockId);
|
|
if (!block) return;
|
|
const currentLevel = block.level || 0;
|
|
const minLevel = zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0;
|
|
if (currentLevel > minLevel) {
|
|
updateBlock(blockId, { level: currentLevel - 1 });
|
|
}
|
|
};
|
|
|
|
// Delete block and all its descendant sub-bullets with confirmation
|
|
const removeBlock = (blockId: string): boolean => {
|
|
if (isReadOnly || !selectedDoc) return false;
|
|
const blocks = selectedDoc.blocks;
|
|
const index = blocks.findIndex((b) => b.id === blockId);
|
|
if (index === -1) return false;
|
|
|
|
const targetBlock = blocks[index];
|
|
const targetLevel = targetBlock.level || 0;
|
|
|
|
// Find all descendant sub-bullets directly or indirectly nested under this block
|
|
const descendantIds: string[] = [];
|
|
for (let i = index + 1; i < blocks.length; i++) {
|
|
const cur = blocks[i];
|
|
const curLevel = cur.level || 0;
|
|
if (curLevel <= targetLevel) break;
|
|
descendantIds.push(cur.id);
|
|
}
|
|
|
|
if (descendantIds.length > 0) {
|
|
const count = descendantIds.length;
|
|
const snippet = targetBlock.content?.trim() ? ` "${targetBlock.content.trim().slice(0, 30)}..."` : '';
|
|
const confirmText =
|
|
count === 1
|
|
? `Dieser Aufzählungspunkt${snippet} enthält 1 Unterpunkt. Möchtest du ihn mitsamt dem Unterpunkt wirklich löschen?`
|
|
: `Dieser Aufzählungspunkt${snippet} enthält ${count} Unterpunkte. Möchtest du ihn mitsamt allen ${count} Unterpunkten wirklich löschen?`;
|
|
if (!window.confirm(confirmText)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
triggerHaptic(15);
|
|
const idsToDelete = new Set([blockId, ...descendantIds]);
|
|
let nextBlocks = blocks.filter((b) => !idsToDelete.has(b.id));
|
|
|
|
if (nextBlocks.length === 0) {
|
|
nextBlocks = [
|
|
{
|
|
id: `blk_${Date.now()}_1`,
|
|
type: 'bullet',
|
|
content: '',
|
|
level: 0,
|
|
},
|
|
];
|
|
}
|
|
|
|
// Determine fallback block to focus
|
|
let prevBlock: DocumentBlock | undefined;
|
|
if (zoomedBlock) {
|
|
const zoomIdx = blocks.findIndex((b) => b.id === zoomedBlock.id);
|
|
if (index > zoomIdx + 1) {
|
|
prevBlock = blocks[index - 1];
|
|
} else {
|
|
const nextFirstChild = nextBlocks[zoomIdx + 1];
|
|
if (nextFirstChild && (nextFirstChild.level || 0) > (zoomedBlock.level || 0)) {
|
|
prevBlock = nextFirstChild;
|
|
}
|
|
}
|
|
} else {
|
|
prevBlock = index > 0 ? blocks[index - 1] : nextBlocks[0];
|
|
}
|
|
|
|
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
|
|
|
if (prevBlock) {
|
|
setLastFocusedBlockId(prevBlock.id);
|
|
setBlockCursor(prevBlock.id, (prevBlock.content || '').length);
|
|
setTimeout(() => {
|
|
const el = blockInputRefs.current[prevBlock.id];
|
|
if (el) {
|
|
el.focus();
|
|
if ('setSelectionRange' in el && typeof el.value === 'string') {
|
|
el.setSelectionRange(el.value.length, el.value.length);
|
|
}
|
|
}
|
|
}, 30);
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
// Delete block and focus the preceding one
|
|
const deleteBlockAndFocusPrev = (index: number) => {
|
|
if (isReadOnly || !selectedDoc) return;
|
|
const targetBlock = selectedDoc.blocks[index];
|
|
if (!targetBlock) return;
|
|
removeBlock(targetBlock.id);
|
|
};
|
|
|
|
const updateBlock = (blockId: string, patch: Partial<DocumentBlock>) => {
|
|
if (isReadOnly || !selectedDoc) return;
|
|
const nextBlocks = selectedDoc.blocks.map((b) =>
|
|
b.id === blockId ? { ...b, ...patch } : b
|
|
);
|
|
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
|
};
|
|
|
|
const toggleCollapse = (blockId: string) => {
|
|
if (!selectedDoc) return;
|
|
const block = selectedDoc.blocks.find((b) => b.id === blockId);
|
|
if (block) {
|
|
updateBlock(blockId, { collapsed: !block.collapsed });
|
|
}
|
|
};
|
|
|
|
useLayoutEffect(() => {
|
|
if (!activeEditingBlockId) return;
|
|
const el = blockInputRefs.current[activeEditingBlockId];
|
|
if (!el) return;
|
|
const segStartAttr = el.getAttribute('data-seg-start');
|
|
if (segStartAttr !== null && 'setSelectionRange' in el && typeof el.value === 'string') {
|
|
const segStart = parseInt(segStartAttr, 10) || 0;
|
|
const desiredOffset = activeCursorOffsetRef.current;
|
|
const localPos = Math.max(0, Math.min(el.value.length, desiredOffset - segStart));
|
|
if (document.activeElement !== el) {
|
|
el.focus();
|
|
}
|
|
try {
|
|
if (el.selectionStart !== localPos || el.selectionEnd !== localPos) {
|
|
el.setSelectionRange(localPos, localPos);
|
|
}
|
|
} catch {
|
|
// Ignore selection range errors on unsupported inputs
|
|
}
|
|
}
|
|
}, [activeEditingBlockId, activeCursorOffset, selectedDoc]);
|
|
|
|
// Keyboard Navigation: Enter, Shift+Enter, Tab, Shift+Tab, Backspace, / Slash Commands
|
|
const handleKeyDown = (
|
|
e: React.KeyboardEvent,
|
|
block: DocumentBlock,
|
|
index: number,
|
|
segStart = 0
|
|
) => {
|
|
if (isReadOnly) return;
|
|
ensureLock();
|
|
|
|
if (slashBlockId === block.id) {
|
|
if (filteredSlashCommands.length === 0) {
|
|
if (e.key === 'Escape') {
|
|
setSlashBlockId(null);
|
|
}
|
|
return;
|
|
}
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
setSlashSelectedIndex((prev) => (prev + 1) % filteredSlashCommands.length);
|
|
return;
|
|
}
|
|
if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
setSlashSelectedIndex((prev) =>
|
|
prev === 0 ? filteredSlashCommands.length - 1 : prev - 1
|
|
);
|
|
return;
|
|
}
|
|
if (e.key === 'Enter' || e.key === 'Tab') {
|
|
e.preventDefault();
|
|
const selected = filteredSlashCommands[slashSelectedIndex];
|
|
if (selected) {
|
|
applySlashCommand(block.id, selected);
|
|
}
|
|
return;
|
|
}
|
|
if (e.key === 'Escape') {
|
|
setSlashBlockId(null);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (e.key === 'Enter' && e.shiftKey) {
|
|
// Shift+Enter: insert a newline within the current bullet point
|
|
if (block.type === 'bullet' || block.type === 'paragraph' || block.type === 'todo') {
|
|
e.preventDefault();
|
|
setSlashBlockId(null);
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
const localPos =
|
|
target && typeof target.selectionStart === 'number'
|
|
? target.selectionStart
|
|
: (target?.value || '').length;
|
|
const cursor = segStart + localPos;
|
|
const fullContent = block.content || '';
|
|
const nextContent = fullContent.slice(0, cursor) + '\n' + fullContent.slice(cursor);
|
|
const nextCursor = cursor + 1;
|
|
setBlockCursor(block.id, nextCursor);
|
|
updateBlock(block.id, { content: nextContent });
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
setSlashBlockId(null);
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
const fullContent = block.content || '';
|
|
let afterContent = '';
|
|
let updatedCurrent: { id: string; content: string } | undefined = undefined;
|
|
|
|
if (!fullContent.includes('\n') && target && typeof target.selectionStart === 'number') {
|
|
const cursor = segStart + target.selectionStart;
|
|
const before = fullContent.slice(0, cursor);
|
|
const after = fullContent.slice(cursor);
|
|
if (after.length > 0) {
|
|
updatedCurrent = { id: block.id, content: before };
|
|
afterContent = after;
|
|
}
|
|
} else if (fullContent.endsWith('\n')) {
|
|
// Clean up trailing empty line if user pressed Shift+Enter then immediately Enter
|
|
const trimmedTrailing = fullContent.replace(/\n+$/, '');
|
|
if (trimmedTrailing !== fullContent) {
|
|
updatedCurrent = { id: block.id, content: trimmedTrailing };
|
|
}
|
|
}
|
|
|
|
insertNewBulletAfter(
|
|
index,
|
|
block.level || 0,
|
|
block.type === 'todo' ? 'todo' : 'bullet',
|
|
afterContent,
|
|
updatedCurrent
|
|
);
|
|
return;
|
|
} else if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
if (e.shiftKey) {
|
|
outdentBlock(block.id);
|
|
} else {
|
|
indentBlock(index);
|
|
}
|
|
} else if (e.key === 'Backspace') {
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
const fullContent = block.content || '';
|
|
if (!fullContent || fullContent === '') {
|
|
const minLevel = zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0;
|
|
if ((block.level || 0) > minLevel) {
|
|
e.preventDefault();
|
|
outdentBlock(block.id);
|
|
} else if (
|
|
zoomedBlock
|
|
? visibleBlocks.length > 1
|
|
: selectedDoc?.blocks && selectedDoc.blocks.length > 1
|
|
) {
|
|
e.preventDefault();
|
|
setSlashBlockId(null);
|
|
deleteBlockAndFocusPrev(index);
|
|
}
|
|
} else if (
|
|
segStart > 0 &&
|
|
target &&
|
|
target.selectionStart === 0 &&
|
|
target.selectionEnd === 0
|
|
) {
|
|
e.preventDefault();
|
|
if (fullContent[segStart - 1] === '\n') {
|
|
// Join current line with previous line within the same bullet
|
|
const joined = fullContent.slice(0, segStart - 1) + fullContent.slice(segStart);
|
|
setBlockCursor(block.id, segStart - 1);
|
|
handleContentChange(block, joined);
|
|
} else {
|
|
// Move cursor into preceding inline token to unwrap it
|
|
setBlockCursor(block.id, segStart - 1);
|
|
}
|
|
}
|
|
} else if (!e.shiftKey && e.key === 'ArrowLeft') {
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
if (segStart > 0 && target && target.selectionStart === 0 && target.selectionEnd === 0) {
|
|
e.preventDefault();
|
|
setBlockCursor(block.id, segStart - 1);
|
|
return;
|
|
}
|
|
requestAnimationFrame(() => {
|
|
if (target && typeof target.selectionStart === 'number') {
|
|
setBlockCursor(block.id, segStart + target.selectionStart);
|
|
}
|
|
});
|
|
} else if (!e.shiftKey && e.key === 'ArrowRight') {
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
const fullContent = block.content || '';
|
|
if (
|
|
target &&
|
|
typeof target.selectionStart === 'number' &&
|
|
target.selectionStart === target.value.length &&
|
|
segStart + target.value.length < fullContent.length
|
|
) {
|
|
e.preventDefault();
|
|
setBlockCursor(block.id, segStart + target.value.length + 1);
|
|
return;
|
|
}
|
|
requestAnimationFrame(() => {
|
|
if (target && typeof target.selectionStart === 'number') {
|
|
setBlockCursor(block.id, segStart + target.selectionStart);
|
|
}
|
|
});
|
|
} else if (!e.shiftKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
const fullContent = block.content || '';
|
|
if (fullContent.includes('\n') && target && typeof target.selectionStart === 'number') {
|
|
const cursor = segStart + target.selectionStart;
|
|
const rawLines = fullContent.split('\n');
|
|
let run = 0;
|
|
const lineMeta = rawLines.map((lt) => {
|
|
const start = run;
|
|
const end = start + lt.length;
|
|
run = end + 1;
|
|
return { start, end, len: lt.length };
|
|
});
|
|
const curLineIdx = lineMeta.findIndex((m) => cursor >= m.start && cursor <= m.end);
|
|
if (curLineIdx !== -1) {
|
|
const col = cursor - lineMeta[curLineIdx].start;
|
|
if (e.key === 'ArrowUp' && curLineIdx > 0) {
|
|
e.preventDefault();
|
|
const prevLine = lineMeta[curLineIdx - 1];
|
|
setBlockCursor(block.id, prevLine.start + Math.min(col, prevLine.len));
|
|
return;
|
|
}
|
|
if (e.key === 'ArrowDown' && curLineIdx < lineMeta.length - 1) {
|
|
e.preventDefault();
|
|
const nextLine = lineMeta[curLineIdx + 1];
|
|
setBlockCursor(block.id, nextLine.start + Math.min(col, nextLine.len));
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
} else if (!e.shiftKey && (e.key === 'Home' || e.key === 'End')) {
|
|
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
|
|
requestAnimationFrame(() => {
|
|
if (target && typeof target.selectionStart === 'number') {
|
|
setBlockCursor(block.id, segStart + target.selectionStart);
|
|
}
|
|
});
|
|
} else if (e.key === 'Escape') {
|
|
setActiveEditingBlockId(null);
|
|
(e.target as HTMLElement)?.blur();
|
|
}
|
|
};
|
|
|
|
const handleContentChange = (block: DocumentBlock, newContent: string) => {
|
|
if (isReadOnly) return;
|
|
ensureLock();
|
|
|
|
// Markdown shortcut: typing '---' creates a divider and inserts a new bullet below
|
|
if (newContent.trim() === '---') {
|
|
const blkIdx = selectedDoc ? selectedDoc.blocks.findIndex((b) => b.id === block.id) : -1;
|
|
if (selectedDoc && blkIdx !== -1) {
|
|
const curLevel = block.level || 0;
|
|
const newBlockId = `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
|
|
const newBullet: DocumentBlock = {
|
|
id: newBlockId,
|
|
type: 'bullet',
|
|
content: '',
|
|
level: curLevel,
|
|
checked: false,
|
|
};
|
|
const nextBlocks = [...selectedDoc.blocks];
|
|
nextBlocks[blkIdx] = {
|
|
...block,
|
|
type: 'divider',
|
|
content: '',
|
|
};
|
|
nextBlocks.splice(blkIdx + 1, 0, newBullet);
|
|
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
|
setSlashBlockId(null);
|
|
focusBlock(newBlockId);
|
|
return;
|
|
}
|
|
}
|
|
|
|
updateBlock(block.id, { content: newContent });
|
|
|
|
// Check if user just typed '/'
|
|
if (newContent.endsWith('/') || newContent.includes('/')) {
|
|
const match = newContent.match(/\/([a-z0-9]*)$/i);
|
|
if (match) {
|
|
setSlashBlockId(block.id);
|
|
setSlashSearch(match[1]);
|
|
setSlashSelectedIndex(0);
|
|
return;
|
|
}
|
|
}
|
|
if (slashBlockId === block.id) {
|
|
setSlashBlockId(null);
|
|
}
|
|
};
|
|
|
|
const filteredSlashCommands = useMemo(() => {
|
|
if (!slashSearch) return SLASH_COMMANDS;
|
|
const q = slashSearch.toLowerCase();
|
|
return SLASH_COMMANDS.filter(
|
|
(c) => c.label.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
|
|
);
|
|
}, [slashSearch]);
|
|
|
|
useEffect(() => {
|
|
if (slashBlockId && slashMenuRef.current) {
|
|
const container = slashMenuRef.current;
|
|
const activeBtn = container.querySelector<HTMLElement>(
|
|
`[data-slash-index="${slashSelectedIndex}"]`
|
|
);
|
|
if (activeBtn) {
|
|
const itemTop = activeBtn.offsetTop;
|
|
const itemBottom = itemTop + activeBtn.offsetHeight;
|
|
const containerTop = container.scrollTop;
|
|
const containerBottom = containerTop + container.clientHeight;
|
|
|
|
if (itemTop < containerTop) {
|
|
container.scrollTop = itemTop;
|
|
} else if (itemBottom > containerBottom) {
|
|
container.scrollTop = itemBottom - container.clientHeight;
|
|
}
|
|
}
|
|
}
|
|
}, [slashSelectedIndex, slashBlockId]);
|
|
|
|
const focusBlock = (blockId: string, customOffset?: number) => {
|
|
setLastFocusedBlockId(blockId);
|
|
const blk = selectedDoc?.blocks.find((b) => b.id === blockId);
|
|
const targetOffset = customOffset !== undefined ? customOffset : (blk?.content || '').length;
|
|
setBlockCursor(blockId, targetOffset);
|
|
|
|
const tryFocus = () => {
|
|
const el = blockInputRefs.current[blockId];
|
|
if (el) {
|
|
el.focus();
|
|
if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
|
|
const segStartAttr = el.getAttribute('data-seg-start');
|
|
const segStart = segStartAttr !== null ? parseInt(segStartAttr, 10) || 0 : 0;
|
|
const len = (el as any).value.length;
|
|
const localPos = Math.max(0, Math.min(len, targetOffset - segStart));
|
|
(el as any).setSelectionRange(localPos, localPos);
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
setTimeout(() => {
|
|
if (!tryFocus()) {
|
|
setTimeout(tryFocus, 30);
|
|
}
|
|
}, 20);
|
|
};
|
|
|
|
const handleCanvasBottomClick = () => {
|
|
if (isReadOnly || !selectedDoc) return;
|
|
|
|
if (zoomedBlock) {
|
|
const zoomIdx = selectedDoc.blocks.findIndex((b) => b.id === zoomedBlock.id);
|
|
if (zoomIdx === -1) return;
|
|
const minChildLevel = (zoomedBlock.level || 0) + 1;
|
|
|
|
let lastDescendantIndex = zoomIdx;
|
|
for (let i = zoomIdx + 1; i < selectedDoc.blocks.length; i++) {
|
|
if ((selectedDoc.blocks[i].level || 0) >= minChildLevel) {
|
|
lastDescendantIndex = i;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (lastDescendantIndex === zoomIdx) {
|
|
insertNewBulletAfter(zoomIdx, minChildLevel);
|
|
return;
|
|
}
|
|
|
|
const lastVisible = visibleBlocks[visibleBlocks.length - 1];
|
|
if (
|
|
lastVisible &&
|
|
lastVisible.block.type !== 'divider' &&
|
|
(!lastVisible.block.content || lastVisible.block.content.trim() === '')
|
|
) {
|
|
focusBlock(lastVisible.block.id);
|
|
} else {
|
|
insertNewBulletAfter(lastDescendantIndex, minChildLevel);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (selectedDoc.blocks.length === 0) {
|
|
insertNewBulletAfter(-1, 0);
|
|
return;
|
|
}
|
|
const lastIndex = selectedDoc.blocks.length - 1;
|
|
const lastBlock = selectedDoc.blocks[lastIndex];
|
|
if (lastBlock && lastBlock.type !== 'divider' && (!lastBlock.content || lastBlock.content.trim() === '')) {
|
|
focusBlock(lastBlock.id);
|
|
} else {
|
|
insertNewBulletAfter(lastIndex, 0);
|
|
}
|
|
};
|
|
|
|
const applySlashCommand = (blockId: string, cmd: SlashCommandItem) => {
|
|
if (isReadOnly || !selectedDoc) return;
|
|
const block = selectedDoc.blocks.find((b) => b.id === blockId);
|
|
if (!block) return;
|
|
const cleanContent = block.content.replace(/\/([a-z0-9]*)$/i, '').trim();
|
|
|
|
setSlashBlockId(null);
|
|
setSlashSearch('');
|
|
|
|
if (cmd.action) {
|
|
updateBlock(blockId, { content: cleanContent });
|
|
setEditingLinkOriginalRaw(null);
|
|
setLinkModalBlockId(blockId);
|
|
setLinkModalTab(cmd.action === 'insert_weblink' ? 'web' : 'note');
|
|
setLinkSearchQuery('');
|
|
setLinkWebTitle('');
|
|
setLinkWebUrl('');
|
|
return;
|
|
}
|
|
|
|
if (cmd.type) {
|
|
if (cmd.type === 'divider') {
|
|
const blkIdx = selectedDoc.blocks.findIndex((b) => b.id === blockId);
|
|
const curLevel = block.level || 0;
|
|
const newBlockId = `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
|
|
const newBullet: DocumentBlock = {
|
|
id: newBlockId,
|
|
type: 'bullet',
|
|
content: '',
|
|
level: curLevel,
|
|
checked: false,
|
|
};
|
|
const nextBlocks = [...selectedDoc.blocks];
|
|
nextBlocks[blkIdx] = {
|
|
...block,
|
|
type: 'divider',
|
|
content: '',
|
|
};
|
|
nextBlocks.splice(blkIdx + 1, 0, newBullet);
|
|
persistDocument({ ...selectedDoc, blocks: nextBlocks });
|
|
focusBlock(newBlockId);
|
|
return;
|
|
}
|
|
|
|
updateBlock(blockId, {
|
|
type: cmd.type,
|
|
content: cleanContent,
|
|
checked: cmd.type === 'todo' ? false : undefined,
|
|
lang: cmd.type === 'code' ? (block.lang || 'javascript') : block.lang,
|
|
});
|
|
focusBlock(blockId);
|
|
}
|
|
};
|
|
|
|
const handleInsertNoteLink = (docTitle: string) => {
|
|
if (!linkModalBlockId || !selectedDoc) return;
|
|
const targetBlockId = linkModalBlockId;
|
|
const block = selectedDoc.blocks.find((b) => b.id === targetBlockId);
|
|
let nextCursor = 0;
|
|
if (block) {
|
|
let newContent: string;
|
|
if (editingLinkOriginalRaw && block.content.includes(editingLinkOriginalRaw)) {
|
|
newContent = block.content.replace(editingLinkOriginalRaw, `[[${docTitle}]]`);
|
|
if (!newContent.endsWith(' ')) newContent += ' ';
|
|
} else {
|
|
const base = block.content || '';
|
|
const space = base.length > 0 && !base.endsWith(' ') ? ' ' : '';
|
|
newContent = `${base}${space}[[${docTitle}]] `;
|
|
}
|
|
nextCursor = newContent.length;
|
|
updateBlock(targetBlockId, { content: newContent });
|
|
}
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
focusBlock(targetBlockId, nextCursor);
|
|
};
|
|
|
|
const handleInsertWebLink = () => {
|
|
if (!linkModalBlockId || !selectedDoc) return;
|
|
const targetBlockId = linkModalBlockId;
|
|
const block = selectedDoc.blocks.find((b) => b.id === targetBlockId);
|
|
let title = linkWebTitle.trim();
|
|
let url = linkWebUrl.trim();
|
|
if (!url) return;
|
|
if (!/^https?:\/\//i.test(url)) {
|
|
url = `https://${url}`;
|
|
}
|
|
if (!title) {
|
|
try {
|
|
title = new URL(url).hostname;
|
|
} catch {
|
|
title = url;
|
|
}
|
|
}
|
|
let nextCursor = 0;
|
|
if (block) {
|
|
let newContent: string;
|
|
if (editingLinkOriginalRaw && block.content.includes(editingLinkOriginalRaw)) {
|
|
newContent = block.content.replace(editingLinkOriginalRaw, `[${title}](${url})`);
|
|
if (!newContent.endsWith(' ')) newContent += ' ';
|
|
} else {
|
|
const base = block.content || '';
|
|
const space = base.length > 0 && !base.endsWith(' ') ? ' ' : '';
|
|
newContent = `${base}${space}[${title}](${url}) `;
|
|
}
|
|
nextCursor = newContent.length;
|
|
updateBlock(targetBlockId, { content: newContent });
|
|
}
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
setLinkWebTitle('');
|
|
setLinkWebUrl('');
|
|
focusBlock(targetBlockId, nextCursor);
|
|
};
|
|
|
|
const getDirectChildTodos = (blocks: DocumentBlock[], parentIndex: number): DocumentBlock[] => {
|
|
const parent = blocks[parentIndex];
|
|
if (!parent) return [];
|
|
const parentLevel = parent.level || 0;
|
|
const childTodos: DocumentBlock[] = [];
|
|
for (let i = parentIndex + 1; i < blocks.length; i++) {
|
|
const cur = blocks[i];
|
|
const curLevel = cur.level || 0;
|
|
if (curLevel <= parentLevel) break;
|
|
if (cur.type === 'todo') {
|
|
childTodos.push(cur);
|
|
}
|
|
}
|
|
return childTodos;
|
|
};
|
|
|
|
// Drag & Drop Handlers on the Bullet Dot
|
|
const handleDragStart = (e: React.DragEvent, blockId: string) => {
|
|
e.dataTransfer.setData('text/plain', blockId);
|
|
setDraggingBlockId(blockId);
|
|
};
|
|
|
|
const handleDropOnBlock = (e: React.DragEvent, targetBlockId: string) => {
|
|
e.preventDefault();
|
|
const sourceId = e.dataTransfer.getData('text/plain') || draggingBlockId;
|
|
if (!selectedDoc || !sourceId || sourceId === targetBlockId) {
|
|
setDraggingBlockId(null);
|
|
return;
|
|
}
|
|
|
|
const blocks = [...selectedDoc.blocks];
|
|
const sourceIdx = blocks.findIndex((b) => b.id === sourceId);
|
|
const targetIdx = blocks.findIndex((b) => b.id === targetBlockId);
|
|
if (sourceIdx === -1 || targetIdx === -1) {
|
|
setDraggingBlockId(null);
|
|
return;
|
|
}
|
|
|
|
const [moved] = blocks.splice(sourceIdx, 1);
|
|
// Align moved block's level to target
|
|
moved.level = blocks[targetIdx]?.level || 0;
|
|
blocks.splice(targetIdx, 0, moved);
|
|
|
|
persistDocument({ ...selectedDoc, blocks }, true);
|
|
setDraggingBlockId(null);
|
|
};
|
|
|
|
// Export full document as portable Logseq-indented Markdown
|
|
const handleExportMarkdown = () => {
|
|
if (!selectedDoc) return;
|
|
const lines: string[] = [`# ${selectedDoc.icon} ${selectedDoc.title}`, ''];
|
|
for (const b of selectedDoc.blocks) {
|
|
const indent = ' '.repeat(b.level || 0);
|
|
switch (b.type) {
|
|
case 'h1':
|
|
lines.push(`${indent}- # ${b.content}`);
|
|
break;
|
|
case 'h2':
|
|
lines.push(`${indent}- ## ${b.content}`);
|
|
break;
|
|
case 'h3':
|
|
lines.push(`${indent}- ### ${b.content}`);
|
|
break;
|
|
case 'todo':
|
|
lines.push(`${indent}- [${b.checked ? 'x' : ' '}] ${b.content}`);
|
|
break;
|
|
case 'callout':
|
|
lines.push(`${indent}- > 💡 ${b.content}`);
|
|
break;
|
|
case 'code':
|
|
lines.push(`${indent}- \`\`\`${b.lang || ''}\n${indent} ${b.content}\n${indent} \`\`\``);
|
|
break;
|
|
case 'table':
|
|
case 'bullet':
|
|
case 'paragraph':
|
|
default:
|
|
lines.push(`${indent}- ${b.content}`);
|
|
}
|
|
}
|
|
|
|
const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${selectedDoc.title.toLowerCase().replace(/[^a-z0-9äöüß]+/g, '-')}.md`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const findRichTokens = (text: string): { start: number; end: number; raw: string }[] => {
|
|
if (!text) return [];
|
|
const regex = /(\[\[[^\]]+\]\]|\[[^\]]*\]\(https?:\/\/[^\s)]+\)|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g;
|
|
const tokens: { start: number; end: number; raw: string }[] = [];
|
|
let match: RegExpExecArray | null;
|
|
while ((match = regex.exec(text)) !== null) {
|
|
tokens.push({
|
|
start: match.index,
|
|
end: match.index + match[0].length,
|
|
raw: match[0],
|
|
});
|
|
}
|
|
return tokens;
|
|
};
|
|
|
|
const renderSingleRichToken = (part: string, blockId: string | undefined, key: React.Key) => {
|
|
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={key}
|
|
className={`inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 border text-xs font-medium rounded-btn transition-colors align-baseline ${
|
|
target
|
|
? 'bg-accent/20 border-accent/40 text-accent hover:bg-accent/30'
|
|
: 'badge-neutral hover:text-main'
|
|
}`}
|
|
>
|
|
<span
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (target) {
|
|
setSelectedDoc(target);
|
|
setZoomedBlockId(null);
|
|
setWorkspaceMode('editor');
|
|
}
|
|
}}
|
|
className="inline-flex items-center gap-1 cursor-pointer"
|
|
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>
|
|
{!isReadOnly && blockId && (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setEditingLinkOriginalRaw(part);
|
|
setLinkModalBlockId(blockId);
|
|
setLinkModalTab('note');
|
|
setLinkSearchQuery(linkTitle);
|
|
}}
|
|
className="ml-0.5 p-0.5 rounded hover:bg-black/10 dark:hover:bg-white/10 opacity-60 hover:opacity-100 transition-opacity cursor-pointer"
|
|
title="Notiz-Link bearbeiten"
|
|
>
|
|
<Edit3 className="w-2.5 h-2.5" />
|
|
</button>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const webMatch = part.match(/^\[(.*?)\]\((https?:\/\/[^\s)]+)\)$/);
|
|
if (webMatch) {
|
|
const title = webMatch[1] || webMatch[2];
|
|
const url = webMatch[2];
|
|
return (
|
|
<span
|
|
key={key}
|
|
className="inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 bg-sky-500/10 border border-sky-500/30 text-sky-500 dark:text-sky-400 hover:bg-sky-500/20 text-xs font-medium rounded-btn transition-colors align-baseline"
|
|
>
|
|
<a
|
|
href={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="inline-flex items-center gap-1 cursor-pointer"
|
|
title={`Öffne: ${url}`}
|
|
>
|
|
<span>🌐</span>
|
|
<span>{title}</span>
|
|
<ExternalLink className="w-2.5 h-2.5 opacity-60" />
|
|
</a>
|
|
{!isReadOnly && blockId && (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setEditingLinkOriginalRaw(part);
|
|
setLinkModalBlockId(blockId);
|
|
setLinkModalTab('web');
|
|
setLinkWebTitle(webMatch[1] || '');
|
|
setLinkWebUrl(url);
|
|
}}
|
|
className="ml-0.5 p-0.5 rounded hover:bg-sky-500/20 opacity-60 hover:opacity-100 transition-opacity cursor-pointer"
|
|
title="Link bearbeiten"
|
|
>
|
|
<Edit3 className="w-2.5 h-2.5" />
|
|
</button>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (part.startsWith('#') && part.length > 1) {
|
|
const tagWord = part.slice(1);
|
|
return (
|
|
<span
|
|
key={key}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
openTagPage(tagWord);
|
|
}}
|
|
className="inline-flex items-center gap-0.5 px-1.5 py-0.5 mx-0.5 bg-blue-500/10 border border-blue-500/30 text-blue-500 dark:text-blue-400 hover:bg-blue-500/20 text-xs font-medium cursor-pointer rounded-btn transition-colors align-baseline"
|
|
title={`Öffne Hashtag-Seite: #${tagWord}`}
|
|
>
|
|
<Hash className="w-2.5 h-2.5 opacity-80" />
|
|
<span>{tagWord}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return <span key={key} className="whitespace-pre-wrap">{part}</span>;
|
|
};
|
|
|
|
// Helper to render text with clickable Wiki-Links, Web-Links and Hashtags across multiple lines
|
|
const renderFormattedText = (text: string, blockId?: string) => {
|
|
const rawLines = (text || '').split('\n');
|
|
if (rawLines.length <= 1) {
|
|
const parts = (text || '').split(/(\[\[.*?\]\]|\[.*?\]\(https?:\/\/[^\s)]+\)|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g);
|
|
return parts.map((part, i) => renderSingleRichToken(part, blockId, i));
|
|
}
|
|
return (
|
|
<div className="w-full space-y-0.5">
|
|
{rawLines.map((lineText, lineIdx) => {
|
|
const parts = lineText.split(/(\[\[.*?\]\]|\[.*?\]\(https?:\/\/[^\s)]+\)|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g);
|
|
return (
|
|
<div key={lineIdx} className="flex flex-wrap items-center gap-y-0.5 w-full min-h-[22px]">
|
|
{lineText.length === 0 ? (
|
|
<span> </span>
|
|
) : (
|
|
parts.map((part, i) => renderSingleRichToken(part, blockId, `${lineIdx}-${i}`))
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Live inline token-aware editor: splits multi-line bullets (Shift+Enter) into visual rows and renders
|
|
// completed #hashtags and links inline as pills on each line while unwrapping any token touched by the cursor.
|
|
const renderLiveInlineBlock = (
|
|
block: DocumentBlock,
|
|
originalIndex: number,
|
|
extraTextClass = 'text-main'
|
|
) => {
|
|
const text = block.content || '';
|
|
if (isReadOnly) {
|
|
return (
|
|
<div className={`w-full text-sm leading-relaxed break-words min-h-[22px] cursor-default ${extraTextClass}`}>
|
|
{renderFormattedText(text, block.id)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isEditing = activeEditingBlockId === block.id;
|
|
const cursor = isEditing ? Math.max(0, Math.min(text.length, activeCursorOffset)) : text.length;
|
|
|
|
const rawLines = text.split('\n');
|
|
let runningOffset = 0;
|
|
const lines = rawLines.map((lineText, lineIdx) => {
|
|
const lineStart = runningOffset;
|
|
const lineEnd = lineStart + lineText.length;
|
|
runningOffset = lineEnd + 1; // +1 for the '\n' delimiter
|
|
return { lineIdx, lineText, lineStart, lineEnd };
|
|
});
|
|
|
|
let activeLineIdx = lines.findIndex((l) => cursor >= l.lineStart && cursor <= l.lineEnd);
|
|
if (activeLineIdx === -1) {
|
|
activeLineIdx = lines.length - 1;
|
|
}
|
|
|
|
type InlineSegment =
|
|
| { kind: 'text'; start: number; end: number; text: string }
|
|
| { kind: 'token'; start: number; end: number; raw: string };
|
|
|
|
return (
|
|
<div className={`w-full space-y-0.5 ${extraTextClass}`}>
|
|
{lines.map((line) => {
|
|
const isLineActive = isEditing && line.lineIdx === activeLineIdx;
|
|
const lineTokens = findRichTokens(line.lineText).map((t) => ({
|
|
start: line.lineStart + t.start,
|
|
end: line.lineStart + t.end,
|
|
raw: t.raw,
|
|
}));
|
|
|
|
// Non-active line (or block not currently focused)
|
|
if (!isLineActive) {
|
|
const segments: InlineSegment[] = [];
|
|
let lastIdx = line.lineStart;
|
|
for (const t of lineTokens) {
|
|
if (t.start > lastIdx) {
|
|
segments.push({
|
|
kind: 'text',
|
|
start: lastIdx,
|
|
end: t.start,
|
|
text: text.slice(lastIdx, t.start),
|
|
});
|
|
}
|
|
segments.push({ kind: 'token', start: t.start, end: t.end, raw: t.raw });
|
|
lastIdx = t.end;
|
|
}
|
|
if (lastIdx < line.lineEnd) {
|
|
segments.push({
|
|
kind: 'text',
|
|
start: lastIdx,
|
|
end: line.lineEnd,
|
|
text: text.slice(lastIdx, line.lineEnd),
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={`line-${line.lineIdx}`}
|
|
onMouseDown={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
e.preventDefault();
|
|
focusBlock(block.id, line.lineEnd);
|
|
}
|
|
}}
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
focusBlock(block.id, line.lineEnd);
|
|
}
|
|
}}
|
|
className="flex flex-wrap items-center gap-y-0.5 w-full text-sm leading-relaxed break-words min-h-[22px] cursor-text"
|
|
>
|
|
{segments.length === 0 ? (
|
|
<span
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
focusBlock(block.id, line.lineStart);
|
|
}}
|
|
className="w-full min-h-[22px] inline-block"
|
|
>
|
|
|
|
</span>
|
|
) : (
|
|
segments.map((seg, i) =>
|
|
seg.kind === 'token' ? (
|
|
renderSingleRichToken(seg.raw, block.id, `tok-${seg.start}-${i}`)
|
|
) : (
|
|
<span
|
|
key={`txt-${seg.start}-${i}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
const sel = window.getSelection();
|
|
const localOffset =
|
|
sel && sel.anchorNode && e.currentTarget.contains(sel.anchorNode)
|
|
? sel.anchorOffset
|
|
: seg.text.length;
|
|
focusBlock(block.id, seg.start + localOffset);
|
|
}}
|
|
className="whitespace-pre-wrap"
|
|
>
|
|
{seg.text}
|
|
</span>
|
|
)
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Active line being edited
|
|
const renderedTokens = lineTokens.filter((t) => !(cursor >= t.start && cursor <= t.end));
|
|
const segments: InlineSegment[] = [];
|
|
let lastIdx = line.lineStart;
|
|
for (const t of renderedTokens) {
|
|
segments.push({
|
|
kind: 'text',
|
|
start: lastIdx,
|
|
end: t.start,
|
|
text: text.slice(lastIdx, t.start),
|
|
});
|
|
segments.push({
|
|
kind: 'token',
|
|
start: t.start,
|
|
end: t.end,
|
|
raw: t.raw,
|
|
});
|
|
lastIdx = t.end;
|
|
}
|
|
segments.push({
|
|
kind: 'text',
|
|
start: lastIdx,
|
|
end: line.lineEnd,
|
|
text: text.slice(lastIdx, line.lineEnd),
|
|
});
|
|
|
|
let activeSegIdx = segments.findIndex(
|
|
(s) => s.kind === 'text' && cursor >= s.start && cursor <= s.end
|
|
);
|
|
if (activeSegIdx === -1) {
|
|
activeSegIdx = segments.length - 1;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={`line-${line.lineIdx}`}
|
|
onMouseDown={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
e.preventDefault();
|
|
focusBlock(block.id, line.lineEnd);
|
|
}
|
|
}}
|
|
className="flex flex-wrap items-center gap-y-0.5 w-full min-h-[22px] cursor-text"
|
|
>
|
|
{segments.map((seg, idx) => {
|
|
if (seg.kind === 'token') {
|
|
return renderSingleRichToken(seg.raw, block.id, `tok-${seg.start}-${idx}`);
|
|
}
|
|
if (idx === activeSegIdx) {
|
|
const isLastSeg = idx === segments.length - 1;
|
|
return (
|
|
<input
|
|
key="live-input"
|
|
ref={(el) => (blockInputRefs.current[block.id] = el)}
|
|
data-seg-start={seg.start}
|
|
type="text"
|
|
readOnly={isReadOnly}
|
|
value={seg.text}
|
|
style={
|
|
!isLastSeg
|
|
? { width: `${Math.max(1, seg.text.length + 0.5)}ch` }
|
|
: undefined
|
|
}
|
|
onFocus={(e) => {
|
|
const localPos =
|
|
typeof e.currentTarget.selectionStart === 'number'
|
|
? e.currentTarget.selectionStart
|
|
: seg.text.length;
|
|
setBlockCursor(block.id, seg.start + localPos);
|
|
handleBlockFocus();
|
|
}}
|
|
onClick={(e) => {
|
|
if (
|
|
e.currentTarget.selectionStart === e.currentTarget.selectionEnd &&
|
|
typeof e.currentTarget.selectionStart === 'number'
|
|
) {
|
|
setBlockCursor(block.id, seg.start + e.currentTarget.selectionStart);
|
|
}
|
|
}}
|
|
onBlur={() => {
|
|
setActiveEditingBlockId((prev) => (prev === block.id ? null : prev));
|
|
handleBlockBlur();
|
|
}}
|
|
onChange={(e) => {
|
|
const newSegVal = e.target.value;
|
|
const localCursor =
|
|
typeof e.target.selectionStart === 'number'
|
|
? e.target.selectionStart
|
|
: newSegVal.length;
|
|
const newFull = text.slice(0, seg.start) + newSegVal + text.slice(seg.end);
|
|
const newGlobalCursor = seg.start + localCursor;
|
|
setBlockCursor(block.id, newGlobalCursor);
|
|
handleContentChange(block, newFull);
|
|
}}
|
|
onKeyDown={(e) => handleKeyDown(e, block, originalIndex, seg.start)}
|
|
className={`${
|
|
isLastSeg ? 'flex-1 min-w-[60px]' : 'flex-shrink-0'
|
|
} bg-transparent text-sm leading-relaxed focus:outline-none placeholder:text-faint ${extraTextClass}`}
|
|
/>
|
|
);
|
|
}
|
|
if (!seg.text) return null;
|
|
return (
|
|
<span
|
|
key={`txt-${seg.start}-${idx}`}
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
focusBlock(block.id, seg.end);
|
|
}}
|
|
className="whitespace-pre-wrap text-sm leading-relaxed cursor-text"
|
|
>
|
|
{seg.text}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// --- GLOBAL TO-DO ROLLUP AGGREGATOR ---
|
|
const allWorkspaceTodos = useMemo(() => {
|
|
const items: {
|
|
docId: string;
|
|
docTitle: string;
|
|
docIcon: string;
|
|
folder: string;
|
|
block: DocumentBlock;
|
|
}[] = [];
|
|
|
|
docs.forEach((doc) => {
|
|
const folder = getDocFolder(doc) || 'Root (Unsortiert)';
|
|
(doc.blocks || []).forEach((b) => {
|
|
if (b.type === 'todo' || (b.content && b.content.startsWith('- [ ]'))) {
|
|
items.push({
|
|
docId: doc.id,
|
|
docTitle: doc.title,
|
|
docIcon: doc.icon || '📄',
|
|
folder,
|
|
block: b,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
return items;
|
|
}, [docs]);
|
|
|
|
const filteredTodos = useMemo(() => {
|
|
return allWorkspaceTodos.filter((item) => {
|
|
if (todoFilter === 'open' && item.block.checked) return false;
|
|
if (todoFilter === 'done' && !item.block.checked) return false;
|
|
if (todoFolderDrilldown && item.folder !== todoFolderDrilldown) return false;
|
|
return true;
|
|
});
|
|
}, [allWorkspaceTodos, todoFilter, todoFolderDrilldown]);
|
|
|
|
// Group filtered todos by folder -> docTitle
|
|
const todosByFolder = useMemo(() => {
|
|
const map = new Map<string, typeof filteredTodos>();
|
|
filteredTodos.forEach((item) => {
|
|
const existing = map.get(item.folder) || [];
|
|
existing.push(item);
|
|
map.set(item.folder, existing);
|
|
});
|
|
return map;
|
|
}, [filteredTodos]);
|
|
|
|
// Direct toggle of a To-Do item in the rollup dashboard
|
|
const handleToggleRollupTodo = async (docId: string, blockId: string) => {
|
|
triggerHaptic(15);
|
|
const targetDoc = docs.find((d) => d.id === docId);
|
|
if (!targetDoc) return;
|
|
|
|
const updatedBlocks = targetDoc.blocks.map((b) =>
|
|
b.id === blockId ? { ...b, checked: !b.checked } : b
|
|
);
|
|
const updatedDoc = { ...targetDoc, blocks: updatedBlocks };
|
|
|
|
// Update in local state
|
|
setDocs((prev) => prev.map((d) => (d.id === docId ? updatedDoc : d)));
|
|
if (selectedDoc?.id === docId) {
|
|
setSelectedDoc(updatedDoc);
|
|
}
|
|
|
|
// Also update tagDetails if currently viewing tag page
|
|
setTagDetails((prev) => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
documents: prev.documents.map((dg) => {
|
|
if (dg.docId !== docId) return dg;
|
|
return {
|
|
...dg,
|
|
matchedBlocks: dg.matchedBlocks.map((mb) => ({
|
|
rootBlock:
|
|
mb.rootBlock.id === blockId
|
|
? { ...mb.rootBlock, checked: !mb.rootBlock.checked }
|
|
: mb.rootBlock,
|
|
children: mb.children.map((c) =>
|
|
c.id === blockId ? { ...c, checked: !c.checked } : c
|
|
),
|
|
})),
|
|
};
|
|
}),
|
|
};
|
|
});
|
|
|
|
// Persist immediately to backend & disk
|
|
await api.updateDocument(docId, {
|
|
blocks: updatedBlocks,
|
|
});
|
|
};
|
|
|
|
// Jump directly to document from rollup
|
|
const handleJumpToDoc = (docId: string) => {
|
|
const found = docs.find((d) => d.id === docId);
|
|
if (found) {
|
|
setSelectedDoc(found);
|
|
setZoomedBlockId(null);
|
|
setWorkspaceMode('editor');
|
|
}
|
|
};
|
|
|
|
// --- 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 { 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 pinnedDocs = useMemo(() => {
|
|
return docs.filter((d) => d.isPinned);
|
|
}, [docs]);
|
|
|
|
const filteredWorkspaceTags = useMemo(() => {
|
|
const q = tagSearchQuery.trim().replace(/^#/, '').toLowerCase();
|
|
if (!q) return workspaceTags;
|
|
return workspaceTags.filter((t) => t.tag.toLowerCase().includes(q));
|
|
}, [workspaceTags, tagSearchQuery]);
|
|
|
|
const renderDocItem = (doc: Document, depth: number) => {
|
|
const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
|
|
const isDragging = draggingDocId === doc.id;
|
|
return (
|
|
<div
|
|
key={doc.id}
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.stopPropagation();
|
|
e.dataTransfer.setData('application/mindsift-doc-id', doc.id);
|
|
e.dataTransfer.setData('text/plain', doc.id);
|
|
setDraggingDocId(doc.id);
|
|
}}
|
|
onDragEnd={() => setDraggingDocId(null)}
|
|
onClick={() => {
|
|
setSelectedDoc(doc);
|
|
setZoomedBlockId(null);
|
|
setWorkspaceMode('editor');
|
|
}}
|
|
style={{ paddingLeft: `${depth * 14 + 16}px` }}
|
|
className={`group flex items-center justify-between py-1.5 pr-2 border-l-2 transition-all cursor-pointer text-xs ${
|
|
isDragging ? 'opacity-40 scale-[0.98]' : ''
|
|
} ${
|
|
isSelected
|
|
? 'bg-panel-elevated border-accent text-main font-medium'
|
|
: 'border-transparent text-muted hover:text-main hover:bg-canvas/50'
|
|
}`}
|
|
title={`${doc.title || 'Notiz'} (Ziehen zum Verschieben in Ordner)`}
|
|
>
|
|
<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" />}
|
|
{doc.isOwner === false && (
|
|
<span
|
|
title={`Geteilt von ${doc.ownerName || 'anderem Nutzer'} (${doc.permission === 'read' ? 'Nur Lesen' : 'Schreibrecht'})`}
|
|
className="text-accent flex-shrink-0"
|
|
>
|
|
<Users className="w-3 h-3" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderFolder = (node: FolderTreeItem): React.ReactNode => {
|
|
const isExpanded = expandedFolders.has(node.path);
|
|
const isCreatingSubfolder = isCreatingFolder && newFolderParent === node.path;
|
|
const isDragOver = dragOverFolder === node.path;
|
|
const isDraggingThisFolder = draggingFolderPath === node.path;
|
|
const totalItems = node.docs.length + node.subfolders.length;
|
|
|
|
return (
|
|
<div
|
|
key={node.path}
|
|
className="select-none"
|
|
onDragOver={(e) => {
|
|
if (
|
|
draggingDocId ||
|
|
(draggingFolderPath &&
|
|
draggingFolderPath !== node.path &&
|
|
!node.path.startsWith(draggingFolderPath + '/'))
|
|
) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragOverFolder(node.path);
|
|
}
|
|
}}
|
|
onDragLeave={(e) => {
|
|
e.preventDefault();
|
|
if (dragOverFolder === node.path) {
|
|
setDragOverFolder(null);
|
|
}
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const droppedFolder =
|
|
e.dataTransfer.getData('application/mindsift-folder-path') || draggingFolderPath;
|
|
setDragOverFolder(null);
|
|
setDraggingDocId(null);
|
|
setDraggingFolderPath(null);
|
|
|
|
if (droppedFolder) {
|
|
handleMoveFolder(droppedFolder, node.path);
|
|
} else {
|
|
handleDropDocToFolder(node.path, e);
|
|
}
|
|
}}
|
|
>
|
|
<div
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.stopPropagation();
|
|
e.dataTransfer.setData('application/mindsift-folder-path', node.path);
|
|
e.dataTransfer.setData('text/plain', node.path);
|
|
setDraggingFolderPath(node.path);
|
|
}}
|
|
onDragEnd={() => setDraggingFolderPath(null)}
|
|
onClick={() => toggleFolder(node.path)}
|
|
style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
|
|
className={`group flex items-center justify-between py-1.5 pr-2 cursor-pointer transition-colors text-xs ${
|
|
isDraggingThisFolder ? 'opacity-40 scale-[0.98]' : ''
|
|
} ${
|
|
isDragOver
|
|
? 'bg-accent/20 border-l-2 border-accent text-main font-medium'
|
|
: 'hover:bg-panel-elevated text-muted'
|
|
}`}
|
|
title={`${node.path} (Klick: Öffnen/Schließen · Ziehen: In anderen Ordner verschieben)`}
|
|
>
|
|
<div className="flex items-center gap-1.5 min-w-0">
|
|
<span className="text-faint hover:text-muted">
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-3 h-3 flex-shrink-0" />
|
|
) : (
|
|
<ChevronRight className="w-3 h-3 flex-shrink-0" />
|
|
)}
|
|
</span>
|
|
{isExpanded ? (
|
|
<FolderOpen className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
|
) : (
|
|
<Folder className="w-3.5 h-3.5 text-muted flex-shrink-0" />
|
|
)}
|
|
<span className="font-medium text-xs text-main truncate">{node.name}</span>
|
|
<span className="text-[10px] text-faint font-mono">({totalItems})</span>
|
|
</div>
|
|
|
|
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-opacity">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleCreateDoc(node.path);
|
|
}}
|
|
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
|
|
title="Neue Datei in diesem Ordner"
|
|
>
|
|
<FilePlus className="w-3 h-3" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleStartCreateFolder(node.path);
|
|
}}
|
|
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
|
|
title="Neuer Unterordner"
|
|
>
|
|
<FolderPlus className="w-3 h-3" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteFolder(node.path, node.name);
|
|
}}
|
|
className="p-1 hover:bg-red-500/10 text-muted hover:text-red-400 rounded-btn transition-colors"
|
|
title="Ordner löschen"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isCreatingSubfolder && (
|
|
<div
|
|
style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
|
|
className="py-1 pr-2 flex items-center gap-1 bg-canvas"
|
|
>
|
|
<Folder className="w-3 h-3 text-muted flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
value={newFolderName}
|
|
onChange={(e) => setNewFolderName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') handleConfirmCreateFolder();
|
|
if (e.key === 'Escape') setIsCreatingFolder(false);
|
|
}}
|
|
placeholder="Unterordner…"
|
|
className="flex-1 h-6 px-1.5 input-field text-xs"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleConfirmCreateFolder}
|
|
className="p-1 text-accent hover:text-main rounded-btn"
|
|
title="Bestätigen"
|
|
>
|
|
<Check className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsCreatingFolder(false)}
|
|
className="p-1 text-muted hover:text-main rounded-btn"
|
|
title="Abbrechen"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{isExpanded && (
|
|
<div>
|
|
{node.subfolders.map(renderFolder)}
|
|
{node.docs.map((doc) => renderDocItem(doc, node.depth + 1))}
|
|
{node.subfolders.length === 0 && node.docs.length === 0 && !isCreatingSubfolder && (
|
|
<div
|
|
style={{ paddingLeft: `${(node.depth + 1) * 14 + 14}px` }}
|
|
className="py-1 text-[11px] text-faint italic"
|
|
>
|
|
(leer)
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const isEmpty = docs.length === 0 && allFolderPaths.length === 0;
|
|
|
|
return (
|
|
<div className="w-full space-y-2">
|
|
{/* Top Navigation Mode Switcher: Notizen & Outliner vs. Globales To-Do Dashboard */}
|
|
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => setWorkspaceMode('editor')}
|
|
className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
|
|
workspaceMode === 'editor'
|
|
? 'bg-panel border-accent text-main'
|
|
: 'bg-canvas border-border text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<Layers className="w-3.5 h-3.5 text-accent" />
|
|
<span>Notizen</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setWorkspaceMode('tags')}
|
|
className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
|
|
workspaceMode === 'tags'
|
|
? 'bg-panel border-accent text-main'
|
|
: 'bg-canvas border-border text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<Hash className="w-3.5 h-3.5 text-accent" />
|
|
<span>Themen & Hashtags</span>
|
|
{workspaceTags.length > 0 && (
|
|
<span className="badge-neutral font-mono text-[10px]">
|
|
{workspaceTags.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setWorkspaceMode('todos')}
|
|
className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
|
|
workspaceMode === 'todos'
|
|
? 'bg-panel border-accent text-main'
|
|
: 'bg-canvas border-border text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<CheckSquare className="w-3.5 h-3.5 text-accent" />
|
|
<span>Globale To-Dos</span>
|
|
<span className="badge-neutral font-mono text-[10px]">
|
|
{allWorkspaceTodos.filter((t) => !t.block.checked).length}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-xs text-muted">
|
|
{workspaceMode === 'editor' && selectedDoc && (
|
|
<>
|
|
<span className="badge-accent">
|
|
<Check className="w-3 h-3" />
|
|
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={handleExportMarkdown}
|
|
className="btn-action h-8 px-2.5 text-xs flex items-center gap-1.5"
|
|
title="Als Logseq/Markdown-Datei (.md) herunterladen"
|
|
>
|
|
<Download className="w-3.5 h-3.5 text-accent" />
|
|
<span>Export (.md)</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===================================================================== */}
|
|
{/* VIEW MODE 1: LOGSEQ OUTLINER & EXPLORER */}
|
|
{/* ===================================================================== */}
|
|
{workspaceMode === 'editor' && (
|
|
<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">
|
|
<div className="p-2 panel-header space-y-2">
|
|
<div className="relative">
|
|
<Search className="w-3.5 h-3.5 text-muted absolute left-2.5 top-1/2 -translate-y-1/2" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Dateien durchsuchen…"
|
|
className="w-full h-7 pl-7 pr-2 input-field text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleCreateDoc(null)}
|
|
className="flex-1 btn-action"
|
|
title="Neue Datei erstellen"
|
|
>
|
|
<FilePlus className="w-3.5 h-3.5 text-muted" />
|
|
<span>Neue Datei</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => handleStartCreateFolder(null)}
|
|
className="flex-1 btn-action"
|
|
title="Neuen Ordner erstellen"
|
|
>
|
|
<FolderPlus className="w-3.5 h-3.5 text-muted" />
|
|
<span>Neuer Ordner</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{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-muted flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
value={newFolderName}
|
|
onChange={(e) => setNewFolderName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') handleConfirmCreateFolder();
|
|
if (e.key === 'Escape') setIsCreatingFolder(false);
|
|
}}
|
|
placeholder="Neuer Ordnername…"
|
|
className="flex-1 h-6 px-1.5 input-field text-xs"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleConfirmCreateFolder}
|
|
className="p-1 text-accent hover:text-main rounded-btn"
|
|
title="Bestätigen"
|
|
>
|
|
<Check className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsCreatingFolder(false)}
|
|
className="p-1 text-muted hover:text-main rounded-btn"
|
|
title="Abbrechen"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{isEmpty ? (
|
|
<div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center rounded-card">
|
|
<Folder className="w-7 h-7 text-faint mx-auto mb-2" />
|
|
<h5 className="text-xs font-semibold text-muted mb-1">Keine Dateien vorhanden</h5>
|
|
<p className="text-[11px] text-faint mb-3 max-w-xs mx-auto leading-relaxed">
|
|
Erstelle eine neue Datei oder lege Ordner an, um deine Dokumente übersichtlich zu strukturieren.
|
|
</p>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleCreateDoc(null)}
|
|
className="btn-action"
|
|
>
|
|
<FilePlus className="w-3.5 h-3.5 text-muted" />
|
|
<span>Neue Datei</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleStartCreateFolder(null)}
|
|
className="btn-action"
|
|
>
|
|
<FolderPlus className="w-3.5 h-3.5 text-muted" />
|
|
<span>Neuer Ordner</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="py-1 max-h-[calc(100vh-240px)] overflow-y-auto">
|
|
{/* Drag target for Root when dragging a note or a folder */}
|
|
{(draggingDocId || draggingFolderPath) && (
|
|
<div
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragOverFolder('__root__');
|
|
}}
|
|
onDragLeave={(e) => {
|
|
e.preventDefault();
|
|
if (dragOverFolder === '__root__') setDragOverFolder(null);
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const droppedFolder =
|
|
e.dataTransfer.getData('application/mindsift-folder-path') ||
|
|
draggingFolderPath;
|
|
setDragOverFolder(null);
|
|
setDraggingDocId(null);
|
|
setDraggingFolderPath(null);
|
|
|
|
if (droppedFolder) {
|
|
handleMoveFolder(droppedFolder, '');
|
|
} else {
|
|
handleDropDocToFolder('', e);
|
|
}
|
|
}}
|
|
className={`mx-2 my-1.5 p-2 border-2 border-dashed rounded-btn text-center text-xs transition-colors ${
|
|
dragOverFolder === '__root__'
|
|
? 'border-accent bg-accent/20 text-main font-semibold'
|
|
: 'border-border text-muted bg-canvas'
|
|
}`}
|
|
>
|
|
{draggingFolderPath
|
|
? '📁 Ordner in Hauptverzeichnis verschieben'
|
|
: '📁 In Hauptverzeichnis verschieben (ohne Ordner)'}
|
|
</div>
|
|
)}
|
|
|
|
{/* Angepinnte Notizen (Favorites) - Collapsible */}
|
|
{pinnedDocs.length > 0 && !searchQuery && (
|
|
<div className="mb-2 pb-1.5 border-b border-border">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsPinnedCollapsed((prev) => !prev)}
|
|
className="w-full px-2 py-1 text-[10px] font-bold text-accent uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
|
|
title={isPinnedCollapsed ? 'Angepinnte Notizen aufklappen' : 'Angepinnte Notizen einklappen'}
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
<Pin className="w-3 h-3 text-accent" />
|
|
<span>Angepinnte Notizen ({pinnedDocs.length})</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={`w-3 h-3 text-muted transition-transform duration-200 ${
|
|
isPinnedCollapsed ? '-rotate-90' : ''
|
|
}`}
|
|
/>
|
|
</button>
|
|
{!isPinnedCollapsed && (
|
|
<div className="space-y-0.5 px-1 mt-1">
|
|
{pinnedDocs.map((doc) => {
|
|
const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
|
|
return (
|
|
<div
|
|
key={`pinned-${doc.id}`}
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.stopPropagation();
|
|
e.dataTransfer.setData('application/mindsift-doc-id', doc.id);
|
|
e.dataTransfer.setData('text/plain', doc.id);
|
|
setDraggingDocId(doc.id);
|
|
}}
|
|
onDragEnd={() => setDraggingDocId(null)}
|
|
onClick={() => {
|
|
setSelectedDoc(doc);
|
|
setZoomedBlockId(null);
|
|
setWorkspaceMode('editor');
|
|
}}
|
|
className={`group flex items-center justify-between px-2 py-1.5 rounded-btn transition-colors cursor-pointer text-xs ${
|
|
isSelected
|
|
? 'bg-panel-elevated border-l-2 border-accent text-main font-medium'
|
|
: 'text-muted hover:text-main hover:bg-canvas/50'
|
|
}`}
|
|
title="Angepinnte Notiz öffnen"
|
|
>
|
|
<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>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
persistDocument({ ...doc, isPinned: false }, true);
|
|
}}
|
|
className="opacity-0 group-hover:opacity-100 p-0.5 text-muted hover:text-accent rounded transition-opacity"
|
|
title="Von Angepinnt entfernen"
|
|
>
|
|
<Pin className="w-3 h-3 text-accent" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Themen & Hashtags (Collapsible) - directly under Pinned Notes */}
|
|
{workspaceTags.length > 0 && !searchQuery && (
|
|
<div className="mb-2 pb-1.5 border-b border-border">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsTagsCollapsed((prev) => !prev)}
|
|
className="w-full px-2 py-1 text-[10px] font-bold text-muted uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
|
|
title={isTagsCollapsed ? 'Themen & Hashtags aufklappen' : 'Themen & Hashtags einklappen'}
|
|
>
|
|
<div className="flex items-center gap-1.5 text-accent">
|
|
<Hash className="w-3 h-3" />
|
|
<span>Themen & Hashtags ({workspaceTags.length})</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={`w-3 h-3 text-muted transition-transform duration-200 ${
|
|
isTagsCollapsed ? '-rotate-90' : ''
|
|
}`}
|
|
/>
|
|
</button>
|
|
{!isTagsCollapsed && (
|
|
<div className="flex flex-wrap gap-1 px-1.5 py-1 mt-1 max-h-36 overflow-y-auto">
|
|
{workspaceTags.map((wt) => (
|
|
<button
|
|
key={wt.tag}
|
|
type="button"
|
|
onClick={() => openTagPage(wt.tag)}
|
|
className={`px-2 py-0.5 rounded-pill text-[11px] font-medium border flex items-center gap-1 transition-colors ${
|
|
selectedTag === wt.tag
|
|
? 'bg-accent/20 border-accent text-accent font-semibold'
|
|
: 'bg-canvas border-border text-muted hover:border-accent/40 hover:text-main'
|
|
}`}
|
|
title={`#${wt.tag} (${wt.count} Abschnitte)`}
|
|
>
|
|
<span>#{wt.tag}</span>
|
|
<span className="text-[9px] opacity-60">({wt.count})</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{rootTree.map(renderFolder)}
|
|
{rootDocs.map((doc) => renderDocItem(doc, 0))}
|
|
|
|
{filteredDocs.length === 0 && searchQuery && (
|
|
<div className="p-4 text-center text-xs text-faint">
|
|
Keine Dateien gefunden für "{searchQuery}"
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right Logseq Outliner Editor */}
|
|
<div className="lg:col-span-8">
|
|
{selectedDoc ? (
|
|
<div
|
|
className="p-4 panel-surface space-y-3 min-h-[500px]"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
handleCanvasBottomClick();
|
|
}
|
|
}}
|
|
>
|
|
{/* 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-muted">
|
|
<div className="flex items-center gap-1.5">
|
|
<Folder className="w-3.5 h-3.5 text-faint" />
|
|
<span>{selectedDoc.folderPath || 'Hauptverzeichnis'}</span>
|
|
</div>
|
|
|
|
<span>• {selectedDoc.blocks.length} Bullets</span>
|
|
|
|
{selectedDoc.isOwner === false && (
|
|
<button
|
|
type="button"
|
|
onClick={openShareModal}
|
|
className="px-2 py-0.5 rounded text-[10px] font-medium border border-border text-muted flex items-center gap-1 bg-surface-subtle hover:bg-panel-elevated hover:text-main transition-colors cursor-pointer"
|
|
title="Teilen & Berechtigungen öffnen"
|
|
>
|
|
<Users className="w-2.5 h-2.5" />
|
|
<span>Geteilt von {selectedDoc.ownerName || 'Eigentümer'}</span>
|
|
</button>
|
|
)}
|
|
|
|
{selectedDoc.permission === 'read' && (
|
|
<button
|
|
type="button"
|
|
onClick={openShareModal}
|
|
className="px-2 py-0.5 rounded text-[10px] font-semibold border border-amber-500/30 bg-amber-500/15 text-amber-600 dark:text-amber-400 flex items-center gap-1 hover:bg-amber-500/25 transition-colors cursor-pointer"
|
|
title="Berechtigungsdetails öffnen"
|
|
>
|
|
<Lock className="w-2.5 h-2.5" />
|
|
<span>Nur Lesezugriff</span>
|
|
</button>
|
|
)}
|
|
|
|
{holdsLock && (
|
|
<span className="px-2 py-0.5 rounded text-[10px] font-semibold border border-emerald-500/30 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span>Schreibzugriff aktiv</span>
|
|
</span>
|
|
)}
|
|
|
|
{isLockedByOther && (
|
|
<span className="px-2 py-0.5 rounded text-[10px] font-semibold border border-amber-500/30 bg-amber-500/15 text-amber-600 dark:text-amber-400 flex items-center gap-1 animate-pulse">
|
|
<Lock className="w-2.5 h-2.5" />
|
|
<span>Wird bearbeitet ({activeLock?.userName || 'anderer Nutzer'})</span>
|
|
</span>
|
|
)}
|
|
|
|
{selectedDoc.sharedWith && selectedDoc.sharedWith.length > 0 && selectedDoc.isOwner !== false && (
|
|
<button
|
|
type="button"
|
|
onClick={openShareModal}
|
|
className="px-2 py-0.5 rounded text-[10px] font-semibold bg-accent/15 text-accent border border-accent/30 flex items-center gap-1 hover:bg-accent/25 hover:border-accent/50 transition-colors cursor-pointer"
|
|
title="Teilen-Menü öffnen: Geteilt mit Nutzern anzeigen & verwalten"
|
|
>
|
|
<Users className="w-2.5 h-2.5" />
|
|
<span>Geteilt ({selectedDoc.sharedWith.length})</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={openShareModal}
|
|
className="btn-icon"
|
|
title="Notiz teilen und Berechtigungen"
|
|
>
|
|
<Share className="w-3.5 h-3.5" />
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned }, true)
|
|
}
|
|
className={
|
|
selectedDoc.isPinned
|
|
? 'btn-icon text-accent border-accent/40 bg-accent/10'
|
|
: 'btn-icon'
|
|
}
|
|
title={selectedDoc.isPinned ? 'Von Favoriten / Angepinnt entfernen' : 'Oben in Favoriten anpinnen'}
|
|
>
|
|
<Pin className="w-3.5 h-3.5" />
|
|
</button>
|
|
|
|
{selectedDoc.isOwner !== false ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleDeleteDoc(selectedDoc.id)}
|
|
className="btn-icon btn-icon-danger"
|
|
title="Dokument löschen"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={handleLeaveShare}
|
|
className="btn-icon text-muted hover:text-status-danger"
|
|
title="Geteilte Notiz verlassen"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
{!isLockedByOther && selectedDoc.permission === 'read' && (
|
|
<div className="p-2.5 bg-blue-500/10 border border-blue-500/30 text-blue-700 dark:text-blue-300 rounded-card flex items-center gap-2 text-xs">
|
|
<Eye className="w-4 h-4 text-blue-500 flex-shrink-0" />
|
|
<span>Du hast <strong>Nur-Lesezugriff</strong> auf diese Notiz. Änderungen können nicht vorgenommen werden.</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* ZOOM BREADCRUMB BAR (Hoisting Focus Mode) */}
|
|
{zoomedBlock && (
|
|
<div className="p-2.5 bg-canvas border border-border rounded-card flex items-center gap-2 text-xs">
|
|
<div className="flex flex-wrap items-center gap-1.5 min-w-0">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleZoomTo(null)}
|
|
className="text-muted hover:text-main flex items-center gap-1 font-medium transition-colors"
|
|
>
|
|
<span>{selectedDoc.icon || '📄'}</span>
|
|
<span className="truncate">{selectedDoc.title}</span>
|
|
</button>
|
|
|
|
{breadcrumbBlocks.map((b) => (
|
|
<React.Fragment key={b.id}>
|
|
<ChevronRight className="w-3 h-3 text-faint flex-shrink-0" />
|
|
<button
|
|
type="button"
|
|
onClick={() => handleZoomTo(b.id)}
|
|
className="text-muted hover:text-main truncate max-w-[140px] font-medium transition-colors"
|
|
>
|
|
{b.content || 'Bullet'}
|
|
</button>
|
|
</React.Fragment>
|
|
))}
|
|
|
|
<ChevronRight className="w-3 h-3 text-faint flex-shrink-0" />
|
|
<span className="text-muted font-medium truncate max-w-[180px]">
|
|
{zoomedBlock.content || 'Aktiver Ast'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Document Icon & Title (when not zoomed) */}
|
|
{!zoomedBlock && (
|
|
<div className="flex items-center gap-3 relative pb-2 border-b border-border">
|
|
<button
|
|
type="button"
|
|
disabled={isReadOnly}
|
|
onClick={() => !isReadOnly && setShowIconPicker((prev) => !prev)}
|
|
className={`text-2xl p-0.5 flex items-center justify-center flex-shrink-0 transition-transform ${
|
|
isReadOnly ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 cursor-pointer'
|
|
}`}
|
|
title={isReadOnly ? 'Schreibgeschützt' : 'Icon ändern'}
|
|
>
|
|
{selectedDoc.icon || '📄'}
|
|
</button>
|
|
|
|
{showIconPicker && !isReadOnly && (
|
|
<div className="absolute top-10 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-panel border border-border rounded-card">
|
|
{ICONS.map((ic) => (
|
|
<button
|
|
key={ic}
|
|
type="button"
|
|
onClick={() => {
|
|
persistDocument({ ...selectedDoc, icon: ic }, true);
|
|
setShowIconPicker(false);
|
|
}}
|
|
className="w-8 h-8 hover:bg-panel-elevated text-base flex items-center justify-center rounded-btn transition-colors"
|
|
>
|
|
{ic}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<input
|
|
type="text"
|
|
readOnly={isReadOnly}
|
|
value={selectedDoc.title}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => {
|
|
if (!isReadOnly) {
|
|
ensureLock();
|
|
persistDocument({ ...selectedDoc, title: e.target.value });
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
if (selectedDoc.blocks.length > 0) {
|
|
const firstId = selectedDoc.blocks[0].id;
|
|
blockInputRefs.current[firstId]?.focus();
|
|
} else if (!isReadOnly) {
|
|
insertNewBulletAfter(-1, 0);
|
|
}
|
|
}
|
|
}}
|
|
placeholder="Dokument-Titel…"
|
|
className={`w-full bg-transparent text-xl sm:text-2xl font-bold text-main focus:outline-none placeholder:text-faint ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* If zoomed, show zoomed block as editable prominent header */}
|
|
{zoomedBlock && (
|
|
<div className="pb-2 border-b border-border flex items-center gap-2.5">
|
|
<span className="w-2.5 h-2.5 rounded-pill bg-accent flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
readOnly={isReadOnly}
|
|
value={zoomedBlock.content}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => {
|
|
if (!isReadOnly) {
|
|
ensureLock();
|
|
updateBlock(zoomedBlock.id, { content: e.target.value });
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && !isReadOnly) {
|
|
e.preventDefault();
|
|
if (
|
|
visibleBlocks.length > 0 &&
|
|
(!visibleBlocks[0].block.content || visibleBlocks[0].block.content.trim() === '')
|
|
) {
|
|
focusBlock(visibleBlocks[0].block.id);
|
|
return;
|
|
}
|
|
const zoomIdx = selectedDoc.blocks.findIndex((b) => b.id === zoomedBlock.id);
|
|
if (zoomIdx !== -1) {
|
|
insertNewBulletAfter(zoomIdx, (zoomedBlock.level || 0) + 1);
|
|
}
|
|
}
|
|
}}
|
|
placeholder="Aufzählungspunkt…"
|
|
className={`w-full bg-transparent text-xl font-bold text-main focus:outline-none placeholder:text-faint ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* =========================================================== */}
|
|
{/* LOGSEQ HIERARCHICAL BULLET LIST CANVAS */}
|
|
{/* =========================================================== */}
|
|
<div
|
|
className="space-y-1 pt-2 min-h-[500px] pb-16 flex flex-col cursor-text"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
handleCanvasBottomClick();
|
|
}
|
|
}}
|
|
>
|
|
{zoomedBlock && visibleBlocks.length === 0 && !isReadOnly && (
|
|
<div
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleCanvasBottomClick();
|
|
}}
|
|
className="group flex items-center gap-1 py-1 cursor-text text-faint hover:text-muted transition-colors"
|
|
>
|
|
<div className="w-3 flex-shrink-0" />
|
|
<div className="w-4 flex-shrink-0" />
|
|
<div className="w-4 h-4 rounded-pill flex items-center justify-center flex-shrink-0">
|
|
<span className="w-1.5 h-1.5 rounded-pill bg-muted group-hover:bg-accent transition-colors" />
|
|
</div>
|
|
<span className="text-sm pl-0.5 select-none">
|
|
Klicken, um einen Unterpunkt zu erstellen…
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{visibleBlocks.map(({ block, originalIndex }) => {
|
|
const blockLevel = Math.max(0, (block.level || 0) - (zoomedBlock ? (zoomedBlock.level || 0) + 1 : 0));
|
|
const isChildrenPresent = hasChildren(selectedDoc.blocks, originalIndex);
|
|
|
|
return (
|
|
<div
|
|
key={block.id}
|
|
style={{ paddingLeft: `${blockLevel * 22}px` }}
|
|
className="group flex items-start gap-1 py-0.5 relative transition-all"
|
|
>
|
|
{/* Drag Handle on hover */}
|
|
<div
|
|
className="opacity-0 group-hover:opacity-100 flex items-center pt-1 text-faint hover:text-muted cursor-grab flex-shrink-0"
|
|
title="Ziehen zum Verschieben"
|
|
>
|
|
<GripVertical className="w-3 h-3" />
|
|
</div>
|
|
|
|
{/* Collapse Chevron if block has children */}
|
|
{isChildrenPresent ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleCollapse(block.id)}
|
|
className="w-4 h-4 mt-0.5 flex items-center justify-center text-muted hover:text-main flex-shrink-0"
|
|
title={block.collapsed ? 'Unterpunkte aufklappen' : 'Unterpunkte einklappen'}
|
|
>
|
|
{block.collapsed ? (
|
|
<ChevronRight className="w-3 h-3 text-accent" />
|
|
) : (
|
|
<ChevronDown className="w-3 h-3" />
|
|
)}
|
|
</button>
|
|
) : (
|
|
<div className="w-4 flex-shrink-0" />
|
|
)}
|
|
|
|
{/* Interactive Bullet Dot (Click: Zoom-in! Drag: Reorder!) */}
|
|
<div
|
|
draggable={!isReadOnly}
|
|
onDragStart={(e) => !isReadOnly && handleDragStart(e, block.id)}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => !isReadOnly && handleDropOnBlock(e, block.id)}
|
|
onClick={() => handleZoomTo(block.id)}
|
|
className={`w-4 h-4 mt-1 rounded-pill flex items-center justify-center transition-colors flex-shrink-0 ${
|
|
isReadOnly
|
|
? 'cursor-pointer text-muted'
|
|
: 'hover:bg-accent/20 cursor-pointer text-muted hover:text-accent'
|
|
}`}
|
|
title="Klick: In diesen Ast zoomen · Ziehen: Verschieben"
|
|
>
|
|
<span
|
|
className={`w-1.5 h-1.5 rounded-pill transition-colors ${
|
|
isChildrenPresent
|
|
? 'bg-accent ring-2 ring-accent/30'
|
|
: 'bg-muted group-hover:bg-accent'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Block Content Container */}
|
|
<div className="flex-1 min-w-0 pt-0.5 relative">
|
|
{/* TYPE: TODO */}
|
|
{block.type === 'todo' && (
|
|
<div className="space-y-1">
|
|
<div className="flex items-start gap-2 group/todo">
|
|
<input
|
|
type="checkbox"
|
|
disabled={isReadOnly}
|
|
checked={!!block.checked}
|
|
onChange={(e) => {
|
|
if (!isReadOnly && selectedDoc) {
|
|
const nextBlocks = selectedDoc.blocks.map((b) =>
|
|
b.id === block.id ? { ...b, checked: e.target.checked } : b
|
|
);
|
|
persistDocument({ ...selectedDoc, blocks: nextBlocks }, true);
|
|
onStatsChange();
|
|
}
|
|
}}
|
|
className={`w-4 h-4 mt-1 checkbox-square flex-shrink-0 ${
|
|
isReadOnly ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
|
|
}`}
|
|
/>
|
|
{renderLiveInlineBlock(
|
|
block,
|
|
originalIndex,
|
|
block.checked ? 'line-through text-faint' : 'text-main'
|
|
)}
|
|
{!isReadOnly && (
|
|
<button
|
|
type="button"
|
|
onClick={() => insertNewBulletAfter(originalIndex, (block.level || 0) + 1, 'todo')}
|
|
className="opacity-0 group-hover/todo:opacity-100 p-0.5 text-muted hover:text-accent rounded transition-opacity cursor-pointer flex-shrink-0"
|
|
title="Unteraufgabe erstellen"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Progress bar for child todos if any exist */}
|
|
{(() => {
|
|
const childTodos = getDirectChildTodos(selectedDoc?.blocks || [], originalIndex);
|
|
if (childTodos.length === 0) return null;
|
|
const doneChild = childTodos.filter((c) => c.checked).length;
|
|
const totalChild = childTodos.length;
|
|
const pct = Math.round((doneChild / totalChild) * 100);
|
|
return (
|
|
<div
|
|
className="space-y-0.5 ml-6 pt-0.5 select-none"
|
|
title={`${doneChild} von ${totalChild} Unteraufgaben erledigt (${pct}%)`}
|
|
>
|
|
<div className="flex items-center justify-between text-[10px] text-muted">
|
|
<span>
|
|
{doneChild}/{totalChild} erledigt
|
|
</span>
|
|
<span className={pct === 100 ? 'text-status-ok font-bold' : ''}>
|
|
{pct}%
|
|
</span>
|
|
</div>
|
|
<div className="w-full h-1 bg-border rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-300 ${
|
|
pct === 100 ? 'bg-status-ok' : 'bg-accent'
|
|
}`}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
|
|
{/* TYPE: H1 */}
|
|
{block.type === 'h1' && (
|
|
<input
|
|
ref={(el) => (blockInputRefs.current[block.id] = el)}
|
|
type="text"
|
|
readOnly={isReadOnly}
|
|
value={block.content}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => handleContentChange(block, e.target.value)}
|
|
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
|
|
className={`w-full bg-transparent text-lg font-bold text-main focus:outline-none ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
)}
|
|
|
|
{/* TYPE: H2 */}
|
|
{block.type === 'h2' && (
|
|
<input
|
|
ref={(el) => (blockInputRefs.current[block.id] = el)}
|
|
type="text"
|
|
readOnly={isReadOnly}
|
|
value={block.content}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => handleContentChange(block, e.target.value)}
|
|
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
|
|
className={`w-full bg-transparent text-base font-semibold text-accent focus:outline-none ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
)}
|
|
|
|
{/* TYPE: H3 */}
|
|
{block.type === 'h3' && (
|
|
<input
|
|
ref={(el) => (blockInputRefs.current[block.id] = el)}
|
|
type="text"
|
|
readOnly={isReadOnly}
|
|
value={block.content}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => handleContentChange(block, e.target.value)}
|
|
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
|
|
className={`w-full bg-transparent text-sm font-semibold text-main focus:outline-none ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
)}
|
|
|
|
{/* TYPE: CALLOUT */}
|
|
{block.type === 'callout' && (
|
|
<div className="p-2 bg-canvas border border-accent/40 rounded-card flex items-start gap-2">
|
|
<Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
|
|
<textarea
|
|
ref={(el) => (blockInputRefs.current[block.id] = el)}
|
|
readOnly={isReadOnly}
|
|
rows={Math.max(1, (block.content || '').split('\n').length, Math.ceil((block.content || '').length / 70))}
|
|
value={block.content}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => handleContentChange(block, e.target.value)}
|
|
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
|
|
className={`w-full bg-transparent text-xs text-main focus:outline-none resize-none ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* TYPE: CODE */}
|
|
{block.type === 'code' && (
|
|
<CodeBlockItem
|
|
block={block}
|
|
isReadOnly={isReadOnly}
|
|
inputRef={(el) => (blockInputRefs.current[block.id] = el)}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChangeContent={(content) => handleContentChange(block, content)}
|
|
onChangeLang={(lang) => {
|
|
if (!isReadOnly) {
|
|
ensureLock();
|
|
updateBlock(block.id, { lang });
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* TYPE: TABLE */}
|
|
{block.type === 'table' && (
|
|
<div className="p-2 bg-canvas border border-border rounded-card space-y-1">
|
|
<div className="flex items-center gap-1 text-[11px] text-muted font-semibold">
|
|
<TableIcon className="w-3 h-3 text-accent" /> Markdown Tabelle
|
|
</div>
|
|
<textarea
|
|
ref={(el) => (blockInputRefs.current[block.id] = el)}
|
|
readOnly={isReadOnly}
|
|
rows={Math.max(3, (block.content || '').split('\n').length)}
|
|
value={block.content}
|
|
onFocus={handleBlockFocus}
|
|
onBlur={handleBlockBlur}
|
|
onChange={(e) => handleContentChange(block, e.target.value)}
|
|
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
|
|
className={`w-full bg-transparent font-mono text-xs text-main focus:outline-none resize-none ${
|
|
isReadOnly ? 'cursor-default' : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* TYPE: PROGRESS */}
|
|
{block.type === 'progress' && (
|
|
<div className="p-2 bg-canvas border border-border rounded-card space-y-1.5">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-main 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 overflow-hidden border border-border rounded-pill">
|
|
<div
|
|
className="bg-accent h-full transition-all rounded-pill"
|
|
style={{
|
|
width: `${Math.min(100, Math.max(0, parseInt(block.content) || 0))}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
disabled={isReadOnly}
|
|
value={parseInt(block.content) || 0}
|
|
onChange={(e) => !isReadOnly && updateBlock(block.id, { content: e.target.value })}
|
|
className={`w-full accent-accent ${isReadOnly ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* TYPE: DIVIDER */}
|
|
{block.type === 'divider' && (
|
|
<div
|
|
tabIndex={isReadOnly ? undefined : 0}
|
|
onKeyDown={(e) => {
|
|
if (!isReadOnly && e.key === 'Enter') {
|
|
e.preventDefault();
|
|
insertNewBulletAfter(originalIndex, block.level || 0);
|
|
} else if (!isReadOnly && (e.key === 'Backspace' || e.key === 'Delete')) {
|
|
e.preventDefault();
|
|
deleteBlockAndFocusPrev(originalIndex);
|
|
}
|
|
}}
|
|
onClick={() => {
|
|
if (!isReadOnly) {
|
|
insertNewBulletAfter(originalIndex, block.level || 0);
|
|
}
|
|
}}
|
|
className="py-2.5 my-1 group/divider relative cursor-pointer focus:outline-none"
|
|
title={isReadOnly ? undefined : "Klicken oder Enter drücken, um darunter einen neuen Aufzählungspunkt einzufügen"}
|
|
>
|
|
<div className="h-0.5 w-full bg-border group-hover/divider:bg-accent/70 group-focus/divider:bg-accent transition-colors rounded-full" />
|
|
{!isReadOnly && (
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover/divider:opacity-100 transition-opacity pointer-events-none">
|
|
<span className="bg-panel border border-border text-[10px] text-muted px-2 py-0.5 rounded-full shadow-xs flex items-center gap-1 font-medium">
|
|
<Plus className="w-3 h-3 text-accent" />
|
|
<span>Punkt einfügen</span>
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* TYPE: DEFAULT BULLET / PARAGRAPH */}
|
|
{(block.type === 'bullet' || block.type === 'paragraph') && (
|
|
<div className="space-y-0.5">
|
|
{renderLiveInlineBlock(block, originalIndex, 'text-main')}
|
|
</div>
|
|
)}
|
|
|
|
{/* FLOATING SLASH COMMAND MENU */}
|
|
{!isReadOnly && slashBlockId === block.id && (
|
|
<div className="absolute top-7 left-0 z-40 w-64 bg-panel border border-border shadow-panel rounded-card p-1 space-y-0.5">
|
|
<div className="px-2 py-1 text-[10px] text-faint font-semibold uppercase tracking-wider border-b border-border">
|
|
Block-Typ wählen:
|
|
</div>
|
|
<div ref={slashMenuRef} className="relative max-h-48 overflow-y-auto space-y-0.5">
|
|
{filteredSlashCommands.map((cmd, idx) => (
|
|
<button
|
|
key={cmd.label || idx}
|
|
type="button"
|
|
data-slash-index={idx}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
onClick={() => applySlashCommand(block.id, cmd)}
|
|
className={`w-full text-left px-2 py-1.5 rounded-btn text-xs flex items-center justify-between transition-colors ${
|
|
slashSelectedIndex === idx
|
|
? 'bg-accent text-on-accent'
|
|
: 'text-main hover:bg-panel-elevated'
|
|
}`}
|
|
>
|
|
<span className="font-semibold">{cmd.label}</span>
|
|
<span className="text-[10px] opacity-80">{cmd.desc}</span>
|
|
</button>
|
|
))}
|
|
{filteredSlashCommands.length === 0 && (
|
|
<div className="p-2 text-center text-xs text-faint">
|
|
Kein Befehl gefunden
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Delete Block on Hover */}
|
|
{!isReadOnly && (
|
|
<button
|
|
type="button"
|
|
onClick={() => removeBlock(block.id)}
|
|
className="opacity-0 group-hover:opacity-100 p-0.5 text-faint hover:text-status-err rounded transition-opacity"
|
|
title="Bullet löschen"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Empty area below blocks to click and seamlessly focus or create bullet */}
|
|
{!isReadOnly && (
|
|
<div
|
|
className="flex-1 min-h-[250px] cursor-text"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleCanvasBottomClick();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-8 panel-surface text-center text-muted text-xs">
|
|
Wähle links eine Datei im Datei-Explorer aus oder erstelle eine neue Datei.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ===================================================================== */}
|
|
{/* VIEW MODE 2: GLOBAL WORKSPACE TO-DO ROLLUP DASHBOARD */}
|
|
{/* ===================================================================== */}
|
|
{workspaceMode === 'todos' && (
|
|
<div className="p-4 panel-surface space-y-4">
|
|
{/* Header & Filter Controls */}
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-3">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-main flex items-center gap-2">
|
|
<CheckSquare className="w-4 h-4 text-accent" />
|
|
<span>Globale To-Dos</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex border border-border rounded-btn bg-canvas overflow-hidden text-xs">
|
|
<button
|
|
type="button"
|
|
onClick={() => setTodoFilter('open')}
|
|
className={`px-3 py-1.5 transition-colors border-r border-border ${
|
|
todoFilter === 'open' ? 'bg-panel text-main font-medium' : 'text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
Nur Offene ({allWorkspaceTodos.filter((t) => !t.block.checked).length})
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTodoFilter('all')}
|
|
className={`px-3 py-1.5 transition-colors border-r border-border ${
|
|
todoFilter === 'all' ? 'bg-panel text-main font-medium' : 'text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
Alle ({allWorkspaceTodos.length})
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTodoFilter('done')}
|
|
className={`px-3 py-1.5 transition-colors ${
|
|
todoFilter === 'done' ? 'bg-panel text-main font-medium' : 'text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
Erledigt ({allWorkspaceTodos.filter((t) => t.block.checked).length})
|
|
</button>
|
|
</div>
|
|
|
|
{todoFolderDrilldown && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setTodoFolderDrilldown(null)}
|
|
className="btn-action text-xs"
|
|
>
|
|
← Alle Ordner
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Drilldown Active Notification Banner */}
|
|
{todoFolderDrilldown && (
|
|
<div className="p-2.5 bg-canvas border border-accent/40 rounded-card flex items-center justify-between text-xs">
|
|
<span className="flex items-center gap-1.5 text-main">
|
|
<Folder className="w-3.5 h-3.5 text-accent" />
|
|
<span>Gefiltert auf Ordner: <strong>{todoFolderDrilldown}</strong></span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTodoFolderDrilldown(null)}
|
|
className="text-accent hover:underline"
|
|
>
|
|
Filter entfernen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Folders & Files Hierarchy Accordion */}
|
|
{todosByFolder.size === 0 ? (
|
|
<div className="p-8 text-center text-muted text-xs space-y-1">
|
|
<Sparkles className="w-6 h-6 text-accent mx-auto mb-1" />
|
|
<p className="font-semibold text-main">Keine To-Dos in Notizen gefunden!</p>
|
|
<p className="text-faint">
|
|
Tippe in einem beliebigen Dokument <code>/todo</code> oder <code>- [ ]</code> ein, um Aufgaben anzulegen.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{Array.from(todosByFolder.entries()).map(([folderName, items]) => {
|
|
const isCollapsed = collapsedTodoFolders.has(folderName);
|
|
const openCount = items.filter((i) => !i.block.checked).length;
|
|
|
|
// Group items within this folder by document
|
|
const docsInFolder = new Map<string, typeof items>();
|
|
items.forEach((item) => {
|
|
const arr = docsInFolder.get(item.docId) || [];
|
|
arr.push(item);
|
|
docsInFolder.set(item.docId, arr);
|
|
});
|
|
|
|
return (
|
|
<div key={folderName} className="border border-border rounded-card bg-canvas overflow-hidden">
|
|
{/* Folder Header Accordion */}
|
|
<div className="p-2.5 bg-panel-elevated border-b border-border flex items-center justify-between">
|
|
<div
|
|
onClick={() => {
|
|
setCollapsedTodoFolders((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(folderName)) next.delete(folderName);
|
|
else next.add(folderName);
|
|
return next;
|
|
});
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer select-none"
|
|
>
|
|
{isCollapsed ? (
|
|
<ChevronRight className="w-4 h-4 text-muted" />
|
|
) : (
|
|
<ChevronDown className="w-4 h-4 text-accent" />
|
|
)}
|
|
<Folder className="w-4 h-4 text-accent" />
|
|
<span className="font-bold text-xs text-main">{folderName}</span>
|
|
<span className="badge-neutral text-[10px] font-mono">
|
|
{openCount} offen
|
|
</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setTodoFolderDrilldown(folderName)}
|
|
className="text-[11px] text-muted hover:text-main px-2 py-0.5 rounded hover:bg-canvas/50"
|
|
title="Diesen Ordner isolieren"
|
|
>
|
|
Nur diesen Ordner
|
|
</button>
|
|
</div>
|
|
|
|
{/* Folder Documents & Tasks */}
|
|
{!isCollapsed && (
|
|
<div className="p-3 space-y-3">
|
|
{Array.from(docsInFolder.entries()).map(([docId, docItems]) => {
|
|
const docInfo = docItems[0];
|
|
return (
|
|
<div
|
|
key={docId}
|
|
className="p-2.5 bg-panel border border-border rounded-card space-y-2"
|
|
>
|
|
{/* Document header in rollup */}
|
|
<div className="flex items-center justify-between border-b border-border pb-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleJumpToDoc(docId)}
|
|
className="text-xs font-semibold text-accent hover:underline flex items-center gap-1.5"
|
|
title="Zur Notiz im Editor springen"
|
|
>
|
|
<span>{docInfo.docIcon}</span>
|
|
<span>{docInfo.docTitle}</span>
|
|
<ExternalLink className="w-3 h-3 opacity-60" />
|
|
</button>
|
|
<span className="text-[10px] text-faint font-mono">
|
|
{docItems.filter((i) => !i.block.checked).length} / {docItems.length}
|
|
</span>
|
|
</div>
|
|
|
|
{/* To-Do Items inside Document */}
|
|
<div className="space-y-1.5 pl-1">
|
|
{docItems.map(({ block }) => (
|
|
<div
|
|
key={block.id}
|
|
onClick={() => handleToggleRollupTodo(docId, block.id)}
|
|
className="flex items-center gap-2 cursor-pointer group py-0.5 select-none"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={!!block.checked}
|
|
onChange={() => handleToggleRollupTodo(docId, block.id)}
|
|
className="w-4 h-4 checkbox-square cursor-pointer flex-shrink-0"
|
|
/>
|
|
<span
|
|
className={`text-xs ${
|
|
block.checked
|
|
? 'line-through text-faint'
|
|
: 'text-main group-hover:text-accent'
|
|
} transition-colors`}
|
|
>
|
|
{block.content || '(Leere Aufgabe)'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ===================================================================== */}
|
|
{/* VIEW MODE 3: HASHTAG / THEMEN-SEITE (LOGSEQ STYLE) */}
|
|
{/* ===================================================================== */}
|
|
{workspaceMode === 'tags' && (
|
|
<div className="space-y-4">
|
|
{/* Header Toolbar */}
|
|
<div className="p-4 panel-surface space-y-3 border border-border rounded-card">
|
|
{selectedTag && (
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedTag(null)}
|
|
className="inline-flex items-center gap-1 text-[11px] font-medium text-muted hover:text-accent transition-colors cursor-pointer"
|
|
title="Zurück zur Themen-Übersicht"
|
|
>
|
|
<ArrowLeft className="w-3 h-3 text-accent" />
|
|
<span>Alle Themen</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2.5">
|
|
{selectedTag ? (
|
|
<>
|
|
<div className="w-9 h-9 rounded-lg bg-blue-500/10 border border-blue-500/30 flex items-center justify-center text-blue-500 dark:text-blue-400 font-bold flex-shrink-0">
|
|
<Hash className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-base font-bold text-main leading-tight flex items-center gap-1.5">
|
|
<span>#{selectedTag}</span>
|
|
</h2>
|
|
<p className="text-[11px] text-muted">
|
|
{isLoadingTag
|
|
? 'Wird geladen…'
|
|
: `${tagDetails?.totalMatches || 0} ${
|
|
tagDetails?.totalMatches === 1 ? 'Abschnitt' : 'Abschnitte'
|
|
} in ${tagDetails?.documents.length || 0} ${
|
|
tagDetails?.documents.length === 1 ? 'Notiz' : 'Notizen'
|
|
}`}
|
|
</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="w-9 h-9 rounded-lg bg-accent-dim border border-accent-border flex items-center justify-center text-accent flex-shrink-0">
|
|
<Hash className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-base font-bold text-main leading-tight">Themen & Hashtags</h2>
|
|
<p className="text-[11px] text-muted">
|
|
{workspaceTags.length} {workspaceTags.length === 1 ? 'Thema' : 'Themen'} im gesamten Workspace
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search Bar for tags */}
|
|
<div className="relative flex-1 min-w-[200px] max-w-xs">
|
|
<Search className="w-3.5 h-3.5 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
|
|
<input
|
|
type="text"
|
|
value={tagSearchQuery}
|
|
onChange={(e) => setTagSearchQuery(e.target.value)}
|
|
placeholder="Hashtags durchsuchen…"
|
|
className="w-full h-8 pl-8 pr-7 input-field text-xs rounded-btn"
|
|
/>
|
|
{tagSearchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setTagSearchQuery('')}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-main"
|
|
title="Suche leeren"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick tag hopping pills */}
|
|
{workspaceTags.length > 0 && (
|
|
<div className="flex items-center gap-1.5 flex-wrap pt-1 border-t border-border">
|
|
<span className="text-[11px] text-muted font-medium mr-1">Filter:</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedTag(null)}
|
|
className={`px-2 py-0.5 rounded-pill text-[11px] transition-colors ${
|
|
selectedTag === null
|
|
? 'bg-accent text-white font-semibold'
|
|
: 'badge-neutral hover:border-accent hover:text-main'
|
|
}`}
|
|
>
|
|
Alle ({workspaceTags.length})
|
|
</button>
|
|
{(tagSearchQuery ? filteredWorkspaceTags : workspaceTags).slice(0, 10).map((t) => (
|
|
<button
|
|
key={t.tag}
|
|
type="button"
|
|
onClick={() => openTagPage(t.tag)}
|
|
className={`px-2 py-0.5 rounded-pill text-[11px] transition-colors ${
|
|
selectedTag === t.tag
|
|
? 'badge-accent font-semibold'
|
|
: 'badge-neutral hover:border-accent hover:text-main'
|
|
}`}
|
|
>
|
|
#{t.tag} ({t.count})
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* If NO tag is selected, show the big overview grid! */}
|
|
{!selectedTag ? (
|
|
<div>
|
|
{filteredWorkspaceTags.length === 0 ? (
|
|
<div className="p-12 text-center text-muted text-xs panel-surface space-y-2 border border-border rounded-card">
|
|
<Hash className="w-8 h-8 mx-auto text-faint" />
|
|
<p className="font-medium text-main">
|
|
{tagSearchQuery
|
|
? `Keine Hashtags gefunden für "${tagSearchQuery}"`
|
|
: 'Noch keine Themen oder Hashtags vorhanden'}
|
|
</p>
|
|
<p className="text-xs text-faint">
|
|
Füge einfach in irgendeiner Notiz ein Tag wie <code className="text-accent">#projekt</code> oder <code className="text-accent">#idee</code> ein.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
|
{filteredWorkspaceTags.map((wt) => (
|
|
<div
|
|
key={wt.tag}
|
|
onClick={() => openTagPage(wt.tag)}
|
|
className="group panel-surface p-4 rounded-card border border-border hover:border-accent hover:shadow-md cursor-pointer transition-all flex flex-col justify-between"
|
|
>
|
|
<div className="flex items-start justify-between gap-2 mb-3">
|
|
<div className="w-8 h-8 rounded-lg badge-accent flex items-center justify-center text-accent group-hover:scale-105 transition-transform">
|
|
<Hash className="w-4 h-4" />
|
|
</div>
|
|
<span className="badge-neutral text-[10px] font-mono">
|
|
{wt.count} {wt.count === 1 ? 'Abschnitt' : 'Abschnitte'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-sm text-main group-hover:text-accent transition-colors truncate">
|
|
#{wt.tag}
|
|
</h3>
|
|
<p className="text-[11px] text-muted mt-2 flex items-center justify-between group-hover:text-main">
|
|
<span>Abschnitte ansehen</span>
|
|
<ExternalLink className="w-3 h-3 group-hover:translate-x-0.5 transition-transform text-accent" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : isLoadingTag ? (
|
|
<div className="p-12 text-center text-muted text-xs panel-surface">
|
|
<Sparkles className="w-6 h-6 animate-spin mx-auto mb-2 text-accent" />
|
|
Hashtag-Verknüpfungen werden geladen…
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{/* Dedicated Logseq-Style Hashtag Markdown Note Card (#tag.md) */}
|
|
<div className="panel-surface p-4 space-y-2.5 border border-border rounded-card">
|
|
<div className="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="w-3.5 h-3.5 text-accent" />
|
|
<span className="text-xs font-bold text-main">
|
|
Eigene Notiz zu #{selectedTag}
|
|
</span>
|
|
<span className="badge-neutral text-[10px] font-mono">
|
|
#{selectedTag}.md
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] text-faint font-mono">
|
|
{tagNoteSaveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={handleExportTagMarkdown}
|
|
className="btn-action h-6 px-2 text-[11px] flex items-center gap-1"
|
|
title={`#${selectedTag}.md herunterladen`}
|
|
>
|
|
<Download className="w-3 h-3" />
|
|
<span>.md</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea
|
|
value={tagNoteContent}
|
|
onChange={(e) => handleTagNoteChange(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
const target = e.currentTarget;
|
|
const start = target.selectionStart;
|
|
const end = target.selectionEnd;
|
|
const nextVal =
|
|
tagNoteContent.slice(0, start) + ' ' + tagNoteContent.slice(end);
|
|
handleTagNoteChange(nextVal);
|
|
requestAnimationFrame(() => {
|
|
target.setSelectionRange(start + 2, start + 2);
|
|
});
|
|
}
|
|
}}
|
|
rows={Math.max(4, tagNoteContent.split('\n').length + 1)}
|
|
placeholder={`Eigene Gedanken, Zusammenfassungen oder Markdown-Notizen direkt zum Thema #${selectedTag} festhalten (unabhängig von den anderen Workspace-Notizen)…`}
|
|
className="w-full input-field rounded-card p-3 text-xs text-main leading-relaxed focus:outline-none focus:border-accent resize-y placeholder:text-faint"
|
|
/>
|
|
</div>
|
|
|
|
{/* Linked References / Verknüpfte Bullet Points from Workspace Notes */}
|
|
{!tagDetails || tagDetails.documents.length === 0 ? (
|
|
<div className="p-10 text-center text-muted text-xs panel-surface space-y-2 border border-border rounded-card">
|
|
<Hash className="w-7 h-7 mx-auto text-faint" />
|
|
<p className="font-medium text-main">Keine verknüpften Bullet Points mit #{selectedTag} in anderen Notizen</p>
|
|
<p className="text-xs text-faint">
|
|
Füge einfach in irgendeiner Notiz <code className="text-accent">#{selectedTag}</code> in einen Bullet Point ein, damit er hier automatisch verknüpft wird.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{tagDetails.documents.map((docGroup) => (
|
|
<div
|
|
key={docGroup.docId}
|
|
className="panel-surface p-4 space-y-3 border border-border rounded-card hover:border-strong transition-colors"
|
|
>
|
|
{/* Document Header */}
|
|
<div className="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-border">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<span className="text-base flex-shrink-0">{docGroup.icon || '📄'}</span>
|
|
<span className="font-semibold text-xs text-main truncate">{docGroup.title || 'Unbenannt'}</span>
|
|
{docGroup.folderPath && (
|
|
<span className="badge-neutral text-[10px] flex items-center gap-1 font-mono">
|
|
<Folder className="w-2.5 h-2.5" />
|
|
<span>{docGroup.folderPath}</span>
|
|
</span>
|
|
)}
|
|
<span className="text-[10px] text-faint">
|
|
• {docGroup.matchedBlocks.length}{' '}
|
|
{docGroup.matchedBlocks.length === 1 ? 'Treffer' : 'Treffer'}
|
|
</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const found = docs.find((d) => d.id === docGroup.docId);
|
|
if (found) {
|
|
setSelectedDoc(found);
|
|
setZoomedBlockId(null);
|
|
setWorkspaceMode('editor');
|
|
}
|
|
}}
|
|
className="btn-action h-7 px-2.5 text-xs font-medium text-accent hover:text-main"
|
|
>
|
|
<span>Notiz öffnen</span>
|
|
<ExternalLink className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Matched Bullet Points and their children */}
|
|
<div className="space-y-3 pl-1">
|
|
{docGroup.matchedBlocks.map((mb, idx) => (
|
|
<div
|
|
key={mb.rootBlock.id || idx}
|
|
className="space-y-1.5 bg-canvas p-3 rounded-card border border-border"
|
|
>
|
|
{/* Root Bullet Point */}
|
|
<div className="flex items-start gap-2 group">
|
|
{mb.rootBlock.type === 'todo' ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={!!mb.rootBlock.checked}
|
|
onChange={() => handleToggleRollupTodo(docGroup.docId, mb.rootBlock.id)}
|
|
className="w-4 h-4 mt-0.5 checkbox-square cursor-pointer flex-shrink-0"
|
|
/>
|
|
) : (
|
|
<div className="w-3.5 h-3.5 mt-1 rounded-full bg-accent-dim border border-accent flex items-center justify-center flex-shrink-0">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-accent" />
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
onClick={() => {
|
|
const found = docs.find((d) => d.id === docGroup.docId);
|
|
if (found) {
|
|
setSelectedDoc(found);
|
|
setZoomedBlockId(mb.rootBlock.id);
|
|
setWorkspaceMode('editor');
|
|
}
|
|
}}
|
|
className={`flex-1 text-xs leading-relaxed cursor-pointer hover:text-accent transition-colors ${
|
|
mb.rootBlock.checked ? 'line-through text-faint' : 'text-main'
|
|
}`}
|
|
title="Klick: Zu diesem Bullet Point in der Notiz zoomen"
|
|
>
|
|
{renderFormattedText(mb.rootBlock.content || '(Leerer Bullet Point)')}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Children / Sub-bullets */}
|
|
{mb.children.length > 0 && (
|
|
<div className="space-y-1 mt-1 pl-4 border-l-2 border-border ml-2">
|
|
{mb.children.map((child) => {
|
|
const indentLevel = Math.max(
|
|
0,
|
|
(child.level || 0) - (mb.rootBlock.level || 0) - 1
|
|
);
|
|
return (
|
|
<div
|
|
key={child.id}
|
|
style={{ paddingLeft: `${indentLevel * 14}px` }}
|
|
className="flex items-start gap-2 py-0.5 text-xs text-muted"
|
|
>
|
|
{child.type === 'todo' ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={!!child.checked}
|
|
onChange={() =>
|
|
handleToggleRollupTodo(docGroup.docId, child.id)
|
|
}
|
|
className="w-3.5 h-3.5 mt-0.5 checkbox-square cursor-pointer flex-shrink-0"
|
|
/>
|
|
) : (
|
|
<span className="w-1.5 h-1.5 mt-1.5 rounded-full bg-muted flex-shrink-0" />
|
|
)}
|
|
<div
|
|
onClick={() => {
|
|
const found = docs.find((d) => d.id === docGroup.docId);
|
|
if (found) {
|
|
setSelectedDoc(found);
|
|
setZoomedBlockId(child.id);
|
|
setWorkspaceMode('editor');
|
|
}
|
|
}}
|
|
className={`flex-1 text-xs leading-relaxed cursor-pointer hover:text-accent transition-colors ${
|
|
child.checked ? 'line-through text-faint' : 'text-muted'
|
|
}`}
|
|
title="Klick: In Notiz fokussieren"
|
|
>
|
|
{renderFormattedText(child.content || '')}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ===================================================================== */}
|
|
{/* DOCUMENT SHARING MODAL */}
|
|
{/* ===================================================================== */}
|
|
{showShareModal && selectedDoc && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs">
|
|
<div className="panel-surface w-full max-w-lg p-5 shadow-panel rounded-card border border-border space-y-4">
|
|
{/* Modal Header */}
|
|
<div className="flex items-center justify-between pb-2 border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-5 h-5 text-accent" />
|
|
<h3 className="text-base font-bold text-main">Notiz teilen & Berechtigungen</h3>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowShareModal(false)}
|
|
className="btn-icon"
|
|
title="Schließen"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="text-xs text-muted">
|
|
Dokument: <span className="font-semibold text-main">{selectedDoc.title || 'Unbenannte Notiz'}</span>
|
|
</div>
|
|
|
|
{shareError && (
|
|
<div className="p-2.5 bg-status-danger/10 border border-status-danger/30 text-status-danger rounded text-xs">
|
|
{shareError}
|
|
</div>
|
|
)}
|
|
|
|
{/* If current user is owner: can add shares and manage permissions */}
|
|
{selectedDoc.isOwner !== false ? (
|
|
<div className="space-y-4">
|
|
<form onSubmit={handleAddShare} className="space-y-3 p-3 bg-panel-elevated border border-border rounded-card">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-xs font-semibold text-main">Freigabe hinzufügen:</span>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setAddShareType('team');
|
|
setSelectedShareUser(null);
|
|
}}
|
|
className={`h-7 px-2.5 text-xs rounded-btn font-medium flex items-center gap-1 border transition-colors ${
|
|
addShareType === 'team'
|
|
? 'bg-panel border-accent text-main'
|
|
: 'bg-canvas border-border text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<Users className="w-3 h-3 text-accent" />
|
|
<span>Team / Gruppe</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setAddShareType('user');
|
|
setSelectedShareTeamId('');
|
|
}}
|
|
className={`h-7 px-2.5 text-xs rounded-btn font-medium flex items-center gap-1 border transition-colors ${
|
|
addShareType === 'user'
|
|
? 'bg-panel border-accent text-main'
|
|
: 'bg-canvas border-border text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<UserIcon className="w-3 h-3 text-accent" />
|
|
<span>Einzelner Benutzer</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{addShareType === 'team' ? (
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<select
|
|
value={selectedShareTeamId}
|
|
onChange={(e) => setSelectedShareTeamId(e.target.value)}
|
|
className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs flex-1 cursor-pointer"
|
|
>
|
|
<option value="" className="bg-panel text-muted">-- Team / Gruppe auswählen --</option>
|
|
{shareTeams.map((t) => (
|
|
<option key={t.id} value={t.id} className="bg-panel text-main">
|
|
👥 {t.name} ({t.members?.length || 1} Mitglieder)
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={sharePermission}
|
|
onChange={(e) => setSharePermission(e.target.value as 'read' | 'write')}
|
|
className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs w-full sm:w-40 cursor-pointer"
|
|
>
|
|
<option value="read" className="bg-panel text-main">Nur Lesen (read)</option>
|
|
<option value="write" className="bg-panel text-main">Schreiben (write)</option>
|
|
</select>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<div className="flex-1">
|
|
<UserAutocomplete
|
|
users={collaborators}
|
|
selectedUser={selectedShareUser}
|
|
onSelectUser={setSelectedShareUser}
|
|
excludeUserIds={[
|
|
currentUser?.id || '',
|
|
...docShares.map((s) => s.targetId || s.userId).filter(Boolean),
|
|
]}
|
|
disabled={sharingLoading}
|
|
placeholder="Benutzer suchen (Name oder @Benutzername)…"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={sharePermission}
|
|
onChange={(e) => setSharePermission(e.target.value as 'read' | 'write')}
|
|
className="input-field h-8 px-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs w-full sm:w-40 cursor-pointer shrink-0"
|
|
>
|
|
<option value="read" className="bg-panel text-main">Nur Lesen (read)</option>
|
|
<option value="write" className="bg-panel text-main">Schreiben (write)</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end pt-1">
|
|
<button
|
|
type="submit"
|
|
disabled={
|
|
sharingLoading ||
|
|
(addShareType === 'team' ? !selectedShareTeamId : !selectedShareUser)
|
|
}
|
|
className="btn-primary h-8 px-3 text-xs flex items-center gap-1.5"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
<span>
|
|
{sharingLoading
|
|
? 'Wird geteilt…'
|
|
: addShareType === 'team'
|
|
? 'Team freigeben'
|
|
: 'Benutzer freigeben'}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{/* List of current shares */}
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-semibold text-main">Aktuelle Freigaben ({docShares.length})</div>
|
|
{docShares.length === 0 ? (
|
|
<div className="p-3 bg-panel-elevated border border-border rounded-card text-xs text-muted text-center">
|
|
Diese Notiz ist bisher noch mit niemandem geteilt.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1.5 max-h-56 overflow-y-auto">
|
|
{docShares.map((share) => {
|
|
const isTeam = share.targetType === 'team' || Boolean(share.teamId) || String(share.targetId || '').startsWith('team_');
|
|
const targetKey = share.targetId || share.userId || share.id;
|
|
return (
|
|
<div
|
|
key={share.id || targetKey}
|
|
className="p-2.5 bg-panel-elevated border border-border rounded-card flex items-center justify-between gap-3 text-xs"
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
{isTeam ? (
|
|
<div className="w-6 h-6 rounded-btn bg-accent/20 text-accent flex items-center justify-center shrink-0">
|
|
<Users className="w-3.5 h-3.5" />
|
|
</div>
|
|
) : (
|
|
<div className="w-6 h-6 rounded-full bg-accent/20 text-accent font-bold text-[10px] flex items-center justify-center shrink-0">
|
|
{(share.displayName || share.userEmail || share.targetName || '?')[0].toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<div className="font-semibold text-main truncate flex items-center gap-1.5">
|
|
<span>{share.displayName || share.targetName || share.userEmail || share.userId}</span>
|
|
{isTeam && (
|
|
<span className="badge-neutral text-[9px] uppercase px-1 py-0.2">Gruppe</span>
|
|
)}
|
|
</div>
|
|
{!isTeam && share.userEmail && share.displayName && (
|
|
<div className="text-[11px] text-muted truncate">{share.userEmail}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
{!isTeam && (
|
|
<select
|
|
value={share.permission}
|
|
onChange={(e) => handleUpdateSharePerm(share.userId, e.target.value as 'read' | 'write')}
|
|
className="input-field h-7 px-2 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-[11px] cursor-pointer"
|
|
disabled={sharingLoading}
|
|
>
|
|
<option value="read" className="bg-panel text-main">Nur Lesen</option>
|
|
<option value="write" className="bg-panel text-main">Schreiben</option>
|
|
</select>
|
|
)}
|
|
{isTeam && (
|
|
<span className="badge-neutral text-[10px]">
|
|
{share.permission === 'write' ? 'Schreiben' : 'Nur Lesen'}
|
|
</span>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveShare(targetKey)}
|
|
className="btn-icon btn-icon-danger h-7 w-7"
|
|
title="Freigabe entziehen"
|
|
disabled={sharingLoading}
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* If current user is a collaborator */
|
|
<div className="space-y-3">
|
|
{/* Document & Owner Card */}
|
|
<div className="p-3 bg-panel-elevated border border-border rounded-card space-y-2">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-muted">Eigentümer der Notiz:</span>
|
|
<span className="font-semibold text-main flex items-center gap-1.5">
|
|
<span className="w-5 h-5 rounded-full bg-accent/20 text-accent text-[10px] font-bold flex items-center justify-center">
|
|
{(selectedDoc.ownerName || 'U').slice(0, 1).toUpperCase()}
|
|
</span>
|
|
<span>{selectedDoc.ownerName || 'Unbekannt'}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Permission Card */}
|
|
{selectedDoc.permission === 'write' ? (
|
|
<div className="p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-card flex items-start gap-3">
|
|
<div className="w-8 h-8 rounded-btn bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<Edit3 className="w-4 h-4" />
|
|
</div>
|
|
<div className="text-xs space-y-0.5">
|
|
<div className="font-semibold text-emerald-600 dark:text-emerald-400">Schreibzugriff aktiv</div>
|
|
<div className="text-muted">
|
|
Du hast Bearbeitungsrechte für diese Notiz und kannst Inhalte in Echtzeit anpassen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-3 bg-accent/10 border border-accent/30 rounded-card flex items-start gap-3">
|
|
<div className="w-8 h-8 rounded-btn bg-accent/20 text-accent flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<Eye className="w-4 h-4" />
|
|
</div>
|
|
<div className="text-xs space-y-0.5">
|
|
<div className="font-semibold text-accent">Nur Lesezugriff</div>
|
|
<div className="text-muted">
|
|
Du kannst diese Notiz ansehen und durchsuchen, aber keine Änderungen an den Inhalten vornehmen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action: Leave Share */}
|
|
<div className="pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={handleLeaveShare}
|
|
className="w-full btn-action h-8 px-3 text-xs text-status-err hover:bg-status-err-bg border border-status-err-border rounded-btn flex items-center justify-center gap-1.5 transition-colors"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
<span>Notiz aus meinem Workspace entfernen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end pt-2 border-t border-border">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowShareModal(false)}
|
|
className="btn-action h-8 px-4 text-xs font-medium"
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* LINK INSERTION MODAL (/link, /notiz, /web) */}
|
|
{linkModalBlockId && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
|
|
onClick={() => {
|
|
const blockId = linkModalBlockId;
|
|
const wasEditingLink = Boolean(editingLinkOriginalRaw);
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
if (blockId && !wasEditingLink) focusBlock(blockId);
|
|
}}
|
|
>
|
|
<div
|
|
className="bg-panel border border-border rounded-xl shadow-panel w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-150"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Modal Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-1.5 rounded-btn bg-accent/15 text-accent">
|
|
<ExternalLink className="w-4 h-4" />
|
|
</div>
|
|
<h3 className="text-sm font-semibold text-main">
|
|
{editingLinkOriginalRaw ? 'Link bearbeiten' : 'Link einfügen'}
|
|
</h3>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const blockId = linkModalBlockId;
|
|
const wasEditingLink = Boolean(editingLinkOriginalRaw);
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
if (blockId && !wasEditingLink) focusBlock(blockId);
|
|
}}
|
|
className="p-1 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab Switcher: Notiz vs Webseite */}
|
|
<div className="flex border-b border-border bg-panel-elevated/40 p-1 gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => setLinkModalTab('note')}
|
|
className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${
|
|
linkModalTab === 'note'
|
|
? 'bg-panel text-main shadow-xs font-semibold'
|
|
: 'text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<FileText className="w-3.5 h-3.5" />
|
|
<span>Notiz verlinken</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLinkModalTab('web')}
|
|
className={`flex-1 py-1.5 px-3 rounded-btn text-xs font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${
|
|
linkModalTab === 'web'
|
|
? 'bg-panel text-main shadow-xs font-semibold'
|
|
: 'text-muted hover:text-main'
|
|
}`}
|
|
>
|
|
<ExternalLink className="w-3.5 h-3.5" />
|
|
<span>Webseite verlinken</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div className="p-4">
|
|
{linkModalTab === 'note' ? (
|
|
<div className="space-y-3">
|
|
<div className="relative">
|
|
<Search className="w-4 h-4 absolute left-3 top-2.5 text-muted pointer-events-none" />
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
placeholder="Notiz nach Titel oder Ordner filtern..."
|
|
value={linkSearchQuery}
|
|
onChange={(e) => setLinkSearchQuery(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape') {
|
|
const blockId = linkModalBlockId;
|
|
const wasEditingLink = Boolean(editingLinkOriginalRaw);
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
if (blockId && !wasEditingLink) focusBlock(blockId);
|
|
} else if (e.key === 'Enter') {
|
|
const filtered = docs.filter(
|
|
(d) =>
|
|
d.title.toLowerCase().includes(linkSearchQuery.toLowerCase()) ||
|
|
(d.folderPath && d.folderPath.toLowerCase().includes(linkSearchQuery.toLowerCase()))
|
|
);
|
|
if (filtered.length > 0) {
|
|
handleInsertNoteLink(filtered[0].title);
|
|
}
|
|
}
|
|
}}
|
|
className="input-field w-full pl-9 h-9 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-h-60 overflow-y-auto space-y-1 divide-y divide-border/30">
|
|
{docs
|
|
.filter(
|
|
(d) =>
|
|
!linkSearchQuery.trim() ||
|
|
d.title.toLowerCase().includes(linkSearchQuery.toLowerCase()) ||
|
|
(d.folderPath && d.folderPath.toLowerCase().includes(linkSearchQuery.toLowerCase()))
|
|
)
|
|
.slice(0, 20)
|
|
.map((d) => (
|
|
<button
|
|
key={d.id}
|
|
type="button"
|
|
onClick={() => handleInsertNoteLink(d.title)}
|
|
className="w-full text-left px-2.5 py-2 rounded-btn text-xs hover:bg-panel-elevated flex items-center justify-between gap-2 transition-colors cursor-pointer group"
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<span className="text-base flex-shrink-0">{d.icon || '📄'}</span>
|
|
<div className="min-w-0">
|
|
<div className="font-medium text-main truncate group-hover:text-accent">
|
|
{d.title}
|
|
</div>
|
|
{d.folderPath && (
|
|
<div className="text-[10px] text-faint truncate">
|
|
{d.folderPath}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span className="text-[10px] text-faint group-hover:text-accent flex-shrink-0 font-mono">
|
|
[[{d.title}]]
|
|
</span>
|
|
</button>
|
|
))}
|
|
|
|
{docs.filter(
|
|
(d) =>
|
|
!linkSearchQuery.trim() ||
|
|
d.title.toLowerCase().includes(linkSearchQuery.toLowerCase())
|
|
).length === 0 && (
|
|
<div className="py-6 text-center text-xs text-faint">
|
|
Keine passende Notiz gefunden
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
handleInsertWebLink();
|
|
}}
|
|
className="space-y-3"
|
|
>
|
|
<div className="space-y-1">
|
|
<label className="text-[11px] font-medium text-muted">Titel / Name der Verlinkung</label>
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
placeholder="z.B. Wikipedia oder Referenzseite"
|
|
value={linkWebTitle}
|
|
onChange={(e) => setLinkWebTitle(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape') {
|
|
const blockId = linkModalBlockId;
|
|
const wasEditingLink = Boolean(editingLinkOriginalRaw);
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
if (blockId && !wasEditingLink) focusBlock(blockId);
|
|
}
|
|
}}
|
|
className="input-field w-full h-9 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[11px] font-medium text-muted">Web-Adresse (URL) *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="https://example.com"
|
|
value={linkWebUrl}
|
|
onChange={(e) => setLinkWebUrl(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape') {
|
|
const blockId = linkModalBlockId;
|
|
const wasEditingLink = Boolean(editingLinkOriginalRaw);
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
if (blockId && !wasEditingLink) focusBlock(blockId);
|
|
}
|
|
}}
|
|
className="input-field w-full h-9 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-2 flex justify-end gap-2 border-t border-border">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const blockId = linkModalBlockId;
|
|
const wasEditingLink = Boolean(editingLinkOriginalRaw);
|
|
setLinkModalBlockId(null);
|
|
setEditingLinkOriginalRaw(null);
|
|
if (blockId && !wasEditingLink) focusBlock(blockId);
|
|
}}
|
|
className="btn-action h-8 px-3 text-xs cursor-pointer"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!linkWebUrl.trim()}
|
|
className="btn-primary h-8 px-4 text-xs font-medium cursor-pointer disabled:opacity-50"
|
|
>
|
|
{editingLinkOriginalRaw ? 'Link speichern' : 'Link einfügen'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|