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

Dev #4

Merged
sandrodach merged 12 commits from dev into main 2026-10-25 21:09:45 +01:00
Conversation 0 Commits 12 Files Changed 27
+943 -111
8 changed files with 943 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 212cb32bb0 - Show all commits

No files matched your search

frontend/src/App.tsx
+137 -9
View File
@@ -44,6 +44,8 @@ import { UserSettingsView } from './features/settings/UserSettingsView';
import { AdminSettingsView } from './features/settings/AdminSettingsView';
import { HelpView } from './features/help/HelpView';
import { GroupsView } from './features/teams/GroupsView';
import { useMobileActions } from './context/MobileActionContext';
import { MobileHeaderMenu } from './components/MobileHeaderMenu';
type ActiveTab =
| 'triage'
@@ -129,6 +131,107 @@ export const App: React.FC = () => {
// Mobile Navigation & Quick-Action State
const [showMobileCapture, setShowMobileCapture] = useState(false);
const [showMobileProfile, setShowMobileProfile] = useState(false);
const { isMenuOpen, setIsMenuOpen, closeMenu, setGroups } = useMobileActions();
useEffect(() => {
closeMenu();
if (activeTab === 'triage') {
setGroups([
{
id: 'triage-actions',
title: 'Schnellaktionen',
items: [
{
id: 'new-thought',
label: 'Neuen Gedanken erfassen',
icon: <Plus className="w-4 h-4" />,
variant: 'accent',
onClick: () => setShowMobileCapture(true),
},
{
id: 'refresh-deck',
label: 'Inbox aktualisieren',
icon: <RotateCcw className="w-4 h-4" />,
badge: stats.inboxCount,
onClick: () => refreshAll(),
},
],
},
{
id: 'triage-nav',
title: 'Bereiche wechseln',
items: [
{
id: 'goto-tasks',
label: 'Aufgaben & Kanban',
icon: <CheckSquare className="w-4 h-4" />,
badge: stats.tasksOpenCount,
onClick: () => setActiveTab('tasks'),
},
{
id: 'goto-workspace',
label: 'Notizen & Workspace',
icon: <FileText className="w-4 h-4" />,
badge: stats.docsCount,
onClick: () => setActiveTab('workspace'),
},
{
id: 'goto-lists',
label: 'Einkaufslisten',
icon: <ShoppingCart className="w-4 h-4" />,
badge: stats.listsCount,
onClick: () => setActiveTab('lists'),
},
{
id: 'goto-groups',
label: 'Teams & Gruppen',
icon: <Users className="w-4 h-4" />,
onClick: () => setActiveTab('groups'),
},
],
},
]);
} else if (
activeTab === 'groups' ||
activeTab === 'user_settings' ||
activeTab === 'admin_settings' ||
activeTab === 'help'
) {
setGroups([
{
id: 'subview-nav',
title: 'Navigation',
items: [
{
id: 'back-triage',
label: 'Zurück zur Triage (Startseite)',
icon: <Layers className="w-4 h-4" />,
variant: 'accent',
onClick: () => setActiveTab('triage'),
},
{
id: 'goto-tasks',
label: 'Zu den Aufgaben',
icon: <CheckSquare className="w-4 h-4" />,
onClick: () => setActiveTab('tasks'),
},
{
id: 'goto-workspace',
label: 'Zum Workspace',
icon: <FileText className="w-4 h-4" />,
onClick: () => setActiveTab('workspace'),
},
{
id: 'goto-lists',
label: 'Zu den Listen',
icon: <ShoppingCart className="w-4 h-4" />,
onClick: () => setActiveTab('lists'),
},
],
},
]);
}
}, [activeTab, stats.inboxCount, stats.tasksOpenCount, stats.docsCount, stats.listsCount]);
// Mobile Web-App (PWA) Installation State
const [isStandaloneApp, setIsStandaloneApp] = useState<boolean>(() => {
@@ -409,27 +512,50 @@ export const App: React.FC = () => {
const isServerAdmin = user.role === 'admin';
const roleLabel = isServerAdmin ? 'Server-Admin' : 'Mitglied';
const activeTabLabelMap: Record<ActiveTab, string> = {
triage: 'Triage',
tasks: 'Aufgaben',
workspace: 'Workspace',
lists: 'Listen',
groups: 'Teams & Gruppen',
user_settings: 'Einstellungen',
admin_settings: 'Administration',
help: 'Hilfe',
};
return (
<div className="min-h-screen bg-canvas text-main flex flex-col font-sans selection:bg-accent/30">
{/* Top Header Bar: Floating on mobile, solid panel on desktop */}
<header className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm">
{/* Mobile Header: Floating Bar with Larger Logo Left (Triage Home) & Profile Avatar Right */}
{/* Mobile Header: Floating Bar with Logo Action Dropdown Left & Profile Avatar Right */}
<div className="sm:hidden flex items-center justify-between h-14 px-4 pt-1">
<button
type="button"
onClick={() => {
triggerHaptic(10);
setActiveTab('triage');
triggerHaptic(12);
setIsMenuOpen((prev) => !prev);
}}
className="h-11 px-2 -ml-2 rounded-xl flex items-center gap-2.5 cursor-pointer select-none active:scale-95 transition-transform"
title="Zur Startseite (Triage)"
className={`min-h-[44px] px-2.5 -ml-2 rounded-xl flex items-center gap-2.5 cursor-pointer select-none active:scale-95 transition-all ${
isMenuOpen ? 'bg-panel border border-accent/40 shadow-sm' : 'hover:bg-panel/60'
}`}
title="Menü & Ansichts-Optionen öffnen"
>
<div className="w-8 h-8 bg-accent text-on-accent rounded-xl shadow-sm flex items-center justify-center">
<div className="w-8 h-8 bg-accent text-on-accent rounded-xl shadow-sm flex items-center justify-center flex-shrink-0">
<Brain className="w-4 h-4" />
</div>
<span className="font-bold text-base text-main tracking-tight">
{authStatus.instanceName || 'MindSift'}
</span>
<div className="flex items-center gap-1.5">
<span className="font-bold text-base text-main tracking-tight">
{authStatus.instanceName || 'MindSift'}
</span>
<span className="text-[11px] font-semibold text-accent bg-accent/15 px-1.5 py-0.5 rounded-md">
{activeTabLabelMap[activeTab]}
</span>
<ChevronDown
className={`w-4 h-4 text-muted transition-transform duration-150 ${
isMenuOpen ? 'rotate-180 text-accent' : ''
}`}
/>
</div>
</button>
<div className="flex items-center gap-1.5">
@@ -715,6 +841,8 @@ export const App: React.FC = () => {
</nav>
</header>
<MobileHeaderMenu activeTabLabel={activeTabLabelMap[activeTab]} />
{/* Main Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-24 sm:pb-6">
<ViewErrorBoundary onReset={() => setActiveTab('triage')}>
frontend/src/components/MobileHeaderMenu.tsx
+140
View File
@@ -0,0 +1,140 @@
import React from 'react';
import { Check, X } from 'lucide-react';
import { useMobileActions } from '../context/MobileActionContext';
import { triggerHaptic } from '../lib/api';
interface MobileHeaderMenuProps {
activeTabLabel: string;
}
export const MobileHeaderMenu: React.FC<MobileHeaderMenuProps> = ({ activeTabLabel }) => {
const { groups, isMenuOpen, closeMenu } = useMobileActions();
if (!isMenuOpen) return null;
return (
<div className="sm:hidden fixed inset-0 z-50">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
onClick={() => {
triggerHaptic(8);
closeMenu();
}}
/>
{/* Menu Sheet below Header */}
<div className="fixed top-14 left-2.5 right-2.5 max-h-[80vh] overflow-y-auto bg-panel border border-border rounded-2xl shadow-2xl p-3 space-y-3.5 z-50 animate-in fade-in slide-in-from-top-2 duration-150">
{/* Menu Header */}
<div className="flex items-center justify-between px-2 pb-2 border-b border-border">
<div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent"></span>
<span className="text-xs font-bold uppercase tracking-wider text-muted">
{activeTabLabel} — Optionen & Aktionen
</span>
</div>
<button
type="button"
onClick={() => {
triggerHaptic(8);
closeMenu();
}}
className="w-9 h-9 rounded-xl flex items-center justify-center text-muted hover:text-main hover:bg-canvas active:scale-95 transition-all"
title="Menü schließen"
>
<X className="w-4 h-4" />
</button>
</div>
{groups.length === 0 ? (
<div className="py-6 text-center text-xs text-muted">
Keine spezifischen Optionen für diese Ansicht verfügbar.
</div>
) : (
<div className="space-y-4">
{groups.map((group) => (
<div key={group.id} className="space-y-1.5">
{group.title && (
<div className="px-2 text-[11px] font-bold uppercase tracking-wider text-faint">
{group.title}
</div>
)}
<div className="space-y-1">
{group.items.map((item) => {
const isAccent = item.variant === 'accent';
const isDanger = item.variant === 'danger';
const isActive = item.active;
let btnClass =
'bg-canvas/70 hover:bg-canvas text-main border border-border/60';
if (isAccent) {
btnClass =
'bg-accent text-on-accent border border-accent font-semibold shadow-sm';
} else if (isDanger) {
btnClass =
'bg-status-err/10 text-status-err border border-status-err/30 font-medium';
} else if (isActive) {
btnClass =
'bg-accent/15 text-accent border border-accent/40 font-semibold';
}
return (
<button
key={item.id}
type="button"
onClick={() => {
triggerHaptic(12);
closeMenu();
item.onClick();
}}
className={`w-full min-h-[46px] px-3.5 py-2.5 rounded-xl flex items-center justify-between gap-3 text-sm transition-all active:scale-[0.98] cursor-pointer ${btnClass}`}
>
<div className="flex items-center gap-3 min-w-0 flex-1 text-left">
{item.icon && (
<span
className={`flex-shrink-0 flex items-center justify-center w-5 h-5 ${
isAccent
? 'text-on-accent'
: isDanger
? 'text-status-err'
: isActive
? 'text-accent'
: 'text-muted'
}`}
>
{item.icon}
</span>
)}
<span className="truncate">{item.label}</span>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
{item.badge !== undefined && item.badge !== '' && (
<span
className={`px-2 py-0.5 rounded-full text-xs font-mono font-semibold ${
isAccent
? 'bg-black/20 text-on-accent'
: isActive
? 'bg-accent/20 text-accent'
: 'bg-panel text-muted border border-border'
}`}
>
{item.badge}
</span>
)}
{isActive && !isAccent && (
<Check className="w-4 h-4 text-accent flex-shrink-0" />
)}
</div>
</button>
);
})}
</div>
</div>
))}
</div>
)}
</div>
</div>
);
};
frontend/src/context/MobileActionContext.tsx
+62
View File
@@ -0,0 +1,62 @@
import React, { createContext, useContext, useState, useCallback } from 'react';
export interface MobileActionItem {
id: string;
label: string;
icon?: React.ReactNode;
badge?: string | number;
variant?: 'default' | 'accent' | 'danger';
active?: boolean;
onClick: () => void;
}
export interface MobileMenuGroup {
id: string;
title?: string;
items: MobileActionItem[];
}
interface MobileActionContextValue {
groups: MobileMenuGroup[];
setGroups: (groups: MobileMenuGroup[]) => void;
isMenuOpen: boolean;
setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
closeMenu: () => void;
}
const MobileActionContext = createContext<MobileActionContextValue>({
groups: [],
setGroups: () => {},
isMenuOpen: false,
setIsMenuOpen: () => {},
closeMenu: () => {},
});
export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [groups, setGroupsState] = useState<MobileMenuGroup[]>([]);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const setGroups = useCallback((newGroups: MobileMenuGroup[]) => {
setGroupsState(newGroups);
}, []);
const closeMenu = useCallback(() => {
setIsMenuOpen(false);
}, []);
return (
<MobileActionContext.Provider
value={{
groups,
setGroups,
isMenuOpen,
setIsMenuOpen,
closeMenu,
}}
>
{children}
</MobileActionContext.Provider>
);
};
export const useMobileActions = () => useContext(MobileActionContext);
frontend/src/features/lists/SharedListsView.tsx
+133 -19
View File
@@ -12,6 +12,7 @@ import {
import { ListItem, SharedList, ListShare, Team, User, WSMessage } from '../../lib/types';
import { api, buildWebSocketURL, triggerHaptic } from '../../lib/api';
import { UnifiedShareModal } from '../../components/UnifiedShareModal';
import { useMobileActions } from '../../context/MobileActionContext';
interface SharedListsViewProps {
onRefreshGlobal: () => void;
@@ -76,6 +77,7 @@ export function deduplicateItems(items: ListItem[]): ListItem[] {
}
export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGlobal, currentUser }) => {
const { setGroups } = useMobileActions();
const [lists, setLists] = useState<SharedList[]>([]);
const [activeListId, setActiveListId] = useState<string>('');
@@ -710,10 +712,122 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
return result;
}, [openItems]);
// Register context-sensitive mobile menu groups behind the MindSift logo
useEffect(() => {
setGroups([
{
id: 'lists-actions',
title: 'Aktionen',
items: [
{
id: 'list-new-item',
label: 'Neuen Eintrag hinzufügen',
icon: <Plus className="w-4 h-4 text-accent" />,
variant: 'accent',
onClick: () => {
setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 60);
},
},
{
id: 'list-new-list',
label: 'Neue Einkaufsliste erstellen',
icon: <Plus className="w-4 h-4" />,
onClick: () => setShowNewListModal(true),
},
...(activeList
? [
{
id: 'list-share',
label: `Liste "${activeList.title}" teilen`,
icon: <Users className="w-4 h-4" />,
onClick: () => openShareModal(),
},
]
: []),
...(completedItems.length > 0
? [
{
id: 'list-clear-completed',
label: `Erledigte aufräumen (${completedItems.length})`,
icon: <Sparkles className="w-4 h-4" />,
onClick: () => handleClearCompleted(),
},
]
: []),
...(activeList && lists.length > 1
? [
{
id: 'list-delete',
label: `Liste "${activeList.title}" löschen`,
icon: <Trash2 className="w-4 h-4" />,
variant: 'danger' as const,
onClick: () => handleDeleteList(activeList.id),
},
]
: []),
],
},
{
id: 'lists-switcher',
title: 'Einkaufslisten wechseln',
items: lists.map((lst) => {
const openCount = deduplicateItems(lst.items || []).filter((i) => !i.isCompleted).length;
return {
id: `select-list-${lst.id}`,
label: lst.title,
icon: <span className="text-base">{lst.icon}</span>,
badge: openCount > 0 ? openCount : undefined,
active: activeList?.id === lst.id,
onClick: () => setActiveListId(lst.id),
};
}),
},
]);
}, [lists, activeList, completedItems.length, setGroups]);
return (
<div className="w-full space-y-3">
{/* Top Header: List Tabs & Actions */}
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
{/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
<div className="flex items-center gap-2 min-w-0">
<span className="text-sm font-semibold text-main truncate">
{activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
</span>
{openItems.length > 0 && (
<span className="badge-neutral text-[11px] flex-shrink-0">
{openItems.length} offen
</span>
)}
</div>
<div className="flex items-center gap-1.5 flex-shrink-0">
{activeList && (
<button
type="button"
onClick={openShareModal}
className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
title="Liste teilen"
>
<Users className="w-4 h-4 text-accent" />
</button>
)}
<div
className={`h-9 w-9 flex items-center justify-center rounded-btn border ${
wsConnected
? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
: 'bg-canvas border-border text-muted'
}`}
title={wsConnected ? 'Live synchronisiert (Online)' : 'Offline'}
>
<Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
</div>
</div>
</div>
{/* Top Header: List Tabs & Actions (Desktop) */}
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
{/* List Tabs */}
<div className="flex flex-wrap items-center gap-1">
{lists.map((lst) => {
@@ -862,7 +976,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Quick-Add Form */}
<form
onSubmit={handleAddItem}
className="flex flex-col sm:flex-row items-center gap-2 panel-surface p-1.5 relative"
className="flex flex-col sm:flex-row items-center gap-2 panel-surface p-2 sm:p-1.5 relative"
>
<div className="relative flex items-center gap-2 flex-1 w-full px-1.5">
<Plus className="w-4 h-4 text-accent flex-shrink-0" />
@@ -888,7 +1002,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
setTimeout(() => setShowSuggestions(false), 200);
}}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch #Kühlregal)…`}
className="flex-1 bg-transparent py-1 text-sm text-main placeholder-faint focus:outline-none"
className="flex-1 bg-transparent py-1.5 sm:py-1 text-sm text-main placeholder-faint focus:outline-none"
/>
{/* Hashtag Autocomplete Suggestions Dropdown */}
@@ -907,7 +1021,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.preventDefault();
applySuggestion(tag);
}}
className={`w-full text-left px-3 py-1.5 text-xs flex items-center justify-between transition-colors ${
className={`w-full text-left px-3 py-2 sm:py-1.5 text-xs flex items-center justify-between transition-colors ${
isSelected
? 'bg-accent/20 text-accent font-medium'
: 'text-main hover:bg-panel-hover'
@@ -932,12 +1046,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)"
className="w-28 h-7 px-2 input-field text-xs"
className="flex-1 sm:flex-none sm:w-28 h-9 sm:h-7 px-2.5 sm:px-2 input-field text-xs"
/>
<button
type="submit"
disabled={isSubmittingItem || !newItemText.trim()}
className="btn-primary h-7 px-3 text-xs disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1 flex-shrink-0"
className="btn-primary h-9 sm:h-7 px-3.5 sm:px-3 text-xs disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1 flex-shrink-0"
>
{isSubmittingItem ? 'Wird hinzugefügt…' : 'Hinzufügen'}
</button>
@@ -1005,7 +1119,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onDragLeave={(e) => handleItemDragLeave(e, item.id)}
onDrop={(e) => handleDropOnItem(e, item, group.category)}
onClick={() => handleToggleItem(item)}
className={`px-3 py-2.5 flex items-center justify-between gap-3 cursor-pointer cursor-grab active:cursor-grabbing select-none transition-colors hover:bg-panel-hover group relative ${
className={`px-3.5 py-3.5 sm:px-3 sm:py-2.5 flex items-center justify-between gap-3 cursor-pointer cursor-grab active:cursor-grabbing select-none transition-colors hover:bg-panel-hover group relative ${
isDragging ? 'opacity-30 border border-dashed border-accent/40' : ''
}`}
>
@@ -1017,7 +1131,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent z-20 pointer-events-none rounded-full shadow-[0_0_8px_rgba(var(--accent-rgb),0.6)]" />
)}
<div className="flex items-center gap-2.5 min-w-0 flex-1">
<div className="flex items-center gap-3 sm:gap-2.5 min-w-0 flex-1">
{/* Eckiges Abhaken */}
<button
type="button"
@@ -1027,14 +1141,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleToggleItem(item);
}}
className={`w-4 h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
className={`w-5 h-5 sm:w-4 sm:h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
item.isCompleted
? 'bg-status-ok border-status-ok text-on-accent'
: 'border-strong hover:border-accent text-transparent'
}`}
title={item.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
>
<Check className="w-3 h-3 stroke-[3]" />
<Check className="w-3.5 h-3.5 sm:w-3 sm:h-3 stroke-[3]" />
</button>
<span className="text-sm font-medium text-main truncate">
@@ -1062,10 +1176,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleDeleteItem(item.id);
}}
className="btn-icon btn-icon-danger opacity-0 group-hover:opacity-100 transition-opacity"
className="btn-icon btn-icon-danger p-2 sm:p-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
title="Eintrag löschen"
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
</button>
</div>
);
@@ -1085,7 +1199,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
</span>
<button
onClick={handleClearCompleted}
className="btn-action text-xs"
className="btn-action min-h-[36px] sm:min-h-0 text-xs"
>
Erledigte aufräumen
</button>
@@ -1099,7 +1213,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer hover:bg-panel-hover transition-colors group"
className="px-3.5 py-3 sm:px-3 sm:py-2 flex items-center justify-between gap-3 cursor-pointer hover:bg-panel-hover transition-colors group"
>
<div className="flex items-center gap-3 min-w-0 flex-1">
{/* Eckiges Abhaken */}
@@ -1109,10 +1223,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleToggleItem(item);
}}
className="w-4 h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border bg-status-ok border-status-ok text-on-accent"
className="w-5 h-5 sm:w-4 sm:h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border bg-status-ok border-status-ok text-on-accent"
title="Als offen markieren"
>
<Check className="w-3 h-3 stroke-[3]" />
<Check className="w-3.5 h-3.5 sm:w-3 sm:h-3 stroke-[3]" />
</button>
<span className="text-sm text-faint line-through truncate">
@@ -1134,10 +1248,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleDeleteItem(item.id);
}}
className="btn-icon btn-icon-danger opacity-0 group-hover:opacity-100 transition-opacity"
className="btn-icon btn-icon-danger p-2 sm:p-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
title="Löschen"
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
</button>
</div>
</div>
frontend/src/features/triage/TaskDetailModal.tsx
+8 -7
View File
@@ -194,7 +194,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
</span>
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1.5">
<button
type="button"
onClick={() => {
@@ -202,9 +202,9 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
onConvertToDoc(task);
}}
title="Als Dokument / Notiz vertiefen"
className="btn-action h-7 px-2 text-xs flex items-center gap-1"
className="btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5"
>
<FileText className="w-3.5 h-3.5 text-accent" />
<FileText className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-accent" />
<span className="hidden sm:inline">Als Notiz vertiefen</span>
</button>
<button
@@ -216,17 +216,18 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
}
}}
title="Aufgabe löschen"
className="text-muted hover:text-status-err p-1.5 transition-colors"
className="btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs text-status-err border-status-err/30 hover:bg-status-err/10 flex items-center gap-1"
>
<Trash2 className="w-4 h-4" />
<Trash2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
<span className="sm:hidden font-medium">Löschen</span>
</button>
<button
type="button"
onClick={onClose}
className="text-muted hover:text-main p-1.5 transition-colors"
className="text-muted hover:text-main p-2 sm:p-1.5 min-h-[38px] min-w-[38px] sm:min-h-0 sm:min-w-0 flex items-center justify-center transition-colors"
title="Schließen"
>
<X className="w-4 h-4" />
<X className="w-5 h-5 sm:w-4 sm:h-4" />
</button>
</div>
</div>
frontend/src/features/triage/TasksView.tsx
+187 -20
View File
@@ -30,6 +30,7 @@ import { UnifiedShareModal } from '../../components/UnifiedShareModal';
import { TaskDetailModal } from './TaskDetailModal';
import { ManageColumnsModal, DEFAULT_KANBAN_COLUMNS } from './ManageColumnsModal';
import { UserAutocomplete } from '../UserAutocomplete';
import { useMobileActions } from '../../context/MobileActionContext';
const getInitials = (name?: string): string => {
if (!name) return '?';
@@ -71,6 +72,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
// Quick Task Add state
const [quickTitle, setQuickTitle] = useState('');
const [quickDueDate, setQuickDueDate] = useState('');
const quickInputRef = useRef<HTMLInputElement | null>(null);
const { setGroups } = useMobileActions();
// New TaskList modal state
const [showNewListModal, setShowNewListModal] = useState(false);
@@ -811,6 +814,141 @@ export const TasksView: React.FC<TasksViewProps> = ({
}
};
useEffect(() => {
const actionItems: any[] = [
{
id: 'new-task',
label: 'Neue Aufgabe erstellen',
icon: <Plus className="w-4 h-4" />,
variant: 'accent',
onClick: () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
setTimeout(() => quickInputRef.current?.focus(), 100);
},
},
{
id: 'new-task-list',
label: 'Neue Aufgabenliste anlegen',
icon: <Folder className="w-4 h-4" />,
onClick: () => setShowNewListModal(true),
},
];
if (currentSelectedList) {
actionItems.push({
id: 'share-task-list',
label: `Liste „${currentSelectedList.title}“ teilen`,
icon: <Users className="w-4 h-4" />,
onClick: () => handleOpenShareModal(currentSelectedList),
});
actionItems.push({
id: 'delete-task-list',
label: `Liste „${currentSelectedList.title}“ löschen`,
icon: <Trash2 className="w-4 h-4" />,
variant: 'danger',
onClick: () => handleDeleteTaskList(currentSelectedList.id),
});
}
const viewItems: any[] = [
{
id: 'filter-open',
label: 'Offene Aufgaben (Liste)',
icon: <LayoutList className="w-4 h-4" />,
badge: openTasks.length,
active: viewMode === 'list' && filter === 'open',
onClick: () => {
setViewMode('list');
setFilter('open');
},
},
{
id: 'filter-done',
label: 'Erledigte Aufgaben',
icon: <Check className="w-4 h-4" />,
badge: doneTasks.length,
active: viewMode === 'list' && filter === 'done',
onClick: () => {
setViewMode('list');
setFilter('done');
},
},
{
id: 'filter-discarded',
label: 'Papierkorb',
icon: <Trash2 className="w-4 h-4" />,
badge: safeDiscarded.length,
active: viewMode === 'list' && filter === 'discarded',
onClick: () => {
setViewMode('list');
setFilter('discarded');
},
},
{
id: 'view-kanban',
label: 'Kanban-Board Ansicht',
icon: <Columns className="w-4 h-4" />,
badge: kanbanTasks.length,
active: viewMode === 'kanban',
onClick: () => setViewMode('kanban'),
},
];
if (viewMode === 'kanban') {
viewItems.push({
id: 'manage-columns',
label: 'Kanban-Spalten verwalten',
icon: <Settings className="w-4 h-4" />,
onClick: () => setShowManageColumnsModal(true),
});
}
const listItems: any[] = [
{
id: 'list-all',
label: 'Alle Aufgaben',
icon: <Layers className="w-4 h-4" />,
active: selectedListId === 'all',
onClick: () => setSelectedListId('all'),
},
...safeTaskLists.map((tl) => ({
id: `list-${tl.id}`,
label: `${tl.icon || '📋'} ${tl.title}`,
badge: tl.tasksCount || undefined,
active: selectedListId === tl.id,
onClick: () => setSelectedListId(tl.id),
})),
];
setGroups([
{
id: 'tasks-actions',
title: 'Aktionen',
items: actionItems,
},
{
id: 'tasks-views',
title: 'Ansicht & Status',
items: viewItems,
},
{
id: 'tasks-lists',
title: 'Aufgabenlisten',
items: listItems,
},
]);
}, [
viewMode,
filter,
selectedListId,
openTasks.length,
doneTasks.length,
safeDiscarded.length,
kanbanTasks.length,
safeTaskLists,
currentSelectedList,
]);
const renderTaskProgressBar = (task: Thought) => {
if (!task.subtasks || task.subtasks.length === 0) return null;
const total = task.subtasks.length;
@@ -868,7 +1006,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
setDetailTaskId(task.id);
setShowDetailModal(true);
}}
className={`px-3 py-2.5 flex items-center justify-between gap-3 transition-colors hover:bg-panel-hover group border-b border-border last:border-b-0 relative cursor-pointer cursor-grab active:cursor-grabbing select-none ${
className={`px-3.5 py-3.5 sm:px-3 sm:py-2.5 flex items-center justify-between gap-3 transition-colors hover:bg-panel-hover group border-b border-border last:border-b-0 relative cursor-pointer cursor-grab active:cursor-grabbing select-none ${
isCompleted ? 'opacity-65' : ''
} ${isDragging ? 'opacity-30 border border-dashed border-accent/40' : ''}`}
>
@@ -880,8 +1018,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent z-20 pointer-events-none rounded-full shadow-[0_0_8px_rgba(var(--accent-rgb),0.6)]" />
)}
<div className="flex items-center gap-2.5 min-w-0 flex-1">
{/* Checkbox */}
<div className="flex items-center gap-3 sm:gap-2.5 min-w-0 flex-1">
{/* Checkbox (larger touch target on mobile) */}
<button
type="button"
draggable={false}
@@ -890,14 +1028,14 @@ export const TasksView: React.FC<TasksViewProps> = ({
e.stopPropagation();
handleToggleDone(task);
}}
className={`w-4 h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
className={`w-5 h-5 sm:w-4 sm:h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
isCompleted
? 'bg-status-ok border-status-ok text-on-accent'
: 'border-strong hover:border-accent text-transparent'
}`}
title={isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
>
<Check className="w-3 h-3 stroke-[3]" />
<Check className="w-3.5 h-3.5 sm:w-3 sm:h-3 stroke-[3]" />
</button>
{/* Clickable Title & Metadata */}
@@ -1006,8 +1144,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
</div>
</div>
{/* Action Controls */}
<div className="flex items-center gap-1 flex-shrink-0" onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
{/* Action Controls (Desktop only - on mobile, tapping the task opens Detail Modal) */}
<div className="hidden sm:flex items-center gap-1 flex-shrink-0" onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
<button
type="button"
draggable={false}
@@ -1045,8 +1183,36 @@ export const TasksView: React.FC<TasksViewProps> = ({
return (
<div className="w-full space-y-3">
{/* Top Header: Task Lists Tabs & View Mode Switcher */}
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
{/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
<div className="flex items-center gap-2 min-w-0">
<span className="text-sm font-semibold text-main truncate">
{currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
</span>
<span className="badge-neutral text-[11px] flex-shrink-0">
{viewMode === 'kanban'
? 'Kanban'
: filter === 'open'
? `Offen (${openTasks.length})`
: filter === 'done'
? `Erledigt (${doneTasks.length})`
: `Papierkorb (${safeDiscarded.length})`}
</span>
</div>
{currentSelectedList && (
<button
type="button"
onClick={() => handleOpenShareModal(currentSelectedList)}
className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
title="Aufgabenliste teilen"
>
<Users className="w-4 h-4 text-accent" />
</button>
)}
</div>
{/* Top Header: Task Lists Tabs & View Mode Switcher (Desktop) */}
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
{/* Task Lists selector tabs */}
<div className="flex flex-wrap items-center gap-1">
<button
@@ -1200,32 +1366,33 @@ export const TasksView: React.FC<TasksViewProps> = ({
{/* Quick Add Task Input */}
<form
onSubmit={handleQuickAddTask}
className="flex items-center gap-1.5 panel-surface p-1.5"
className="flex items-center gap-1.5 panel-surface p-2 sm:p-1.5"
>
<Plus className="w-4 h-4 text-accent ml-1 flex-shrink-0" />
<input
ref={quickInputRef}
type="text"
value={quickTitle}
onChange={(e) => setQuickTitle(e.target.value)}
placeholder={
currentSelectedList
? `Aufgabe zu "${currentSelectedList.title}" hinzufügen… (Enter)`
: 'Neue Aufgabe anlegen… (Enter)'
? `Aufgabe zu "${currentSelectedList.title}" hinzufügen…`
: 'Neue Aufgabe anlegen…'
}
className="flex-1 bg-transparent px-2 py-1 text-sm text-main placeholder-faint focus:outline-none"
className="flex-1 bg-transparent px-2 py-1.5 sm:py-1 text-sm text-main placeholder-faint focus:outline-none min-w-0"
/>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1 flex-shrink-0">
<input
type="date"
value={quickDueDate}
onChange={(e) => setQuickDueDate(e.target.value)}
className="h-7 px-2 input-field text-xs"
className="hidden sm:block h-7 px-2 input-field text-xs"
title="Fälligkeitsdatum"
/>
<button
type="submit"
disabled={!quickTitle.trim()}
className="btn-primary h-7 px-3 text-xs disabled:opacity-40"
className="btn-primary h-9 sm:h-7 px-3.5 sm:px-3 text-xs disabled:opacity-40"
>
Hinzufügen
</button>
@@ -1559,7 +1726,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
>
{task.content}
</p>
<div className="flex items-center gap-1 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
<div className="hidden sm:flex items-center gap-1 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => handleConvertToDoc(task)}
title="Als Notiz vertiefen"
@@ -1689,9 +1856,9 @@ export const TasksView: React.FC<TasksViewProps> = ({
) : (
/* STANDARD LIST VIEW (CLEAN & UNCLUTTERED) */
<div className="space-y-2">
{/* Subfilter tabs for List View */}
{/* Subfilter tabs for List View (Desktop; on mobile controlled via MindSift Logo Menu) */}
<div className="flex items-center justify-between gap-2">
<div className="flex items-center border border-border rounded-btn bg-canvas overflow-hidden">
<div className="hidden sm:flex items-center border border-border rounded-btn bg-canvas overflow-hidden">
<button
onClick={() => setFilter('open')}
className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
@@ -1721,7 +1888,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
</div>
{filter === 'discarded' && safeDiscarded.length > 0 && (
<button onClick={handlePurgeAllDiscarded} className="btn-action">
<button onClick={handlePurgeAllDiscarded} className="btn-action min-h-[38px] sm:min-h-0">
<Trash2 className="w-3.5 h-3.5" />
Papierkorb leeren
</button>
frontend/src/features/workspace/WorkspaceView.tsx
+271 -55
View File
@@ -53,6 +53,7 @@ import { api, getToken, triggerHaptic } from '../../lib/api';
import { CodeBlockItem } from './CodeBlockItem';
import { UserAutocomplete } from '../UserAutocomplete';
import { UnifiedShareModal } from '../../components/UnifiedShareModal';
import { useMobileActions } from '../../context/MobileActionContext';
interface WorkspaceViewProps {
currentUser?: User | null;
@@ -99,6 +100,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
initialDocId,
onStatsChange,
}) => {
const { setGroups } = useMobileActions();
const [showMobileFileDrawer, setShowMobileFileDrawer] = useState(false);
// Top Workspace Tab Mode: 'editor' vs 'todos' vs 'tags'
const [workspaceMode, setWorkspaceMode] = useState<'editor' | 'todos' | 'tags'>('editor');
const [selectedTag, setSelectedTag] = useState<string | null>(null);
@@ -2714,6 +2718,132 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return workspaceTags.filter((t) => t.tag.toLowerCase().includes(q));
}, [workspaceTags, tagSearchQuery]);
// Register context-sensitive mobile menu groups behind the MindSift logo
useEffect(() => {
const openTodosCount = allWorkspaceTodos.filter((t) => !t.block.checked).length;
setGroups([
{
id: 'ws-view-files',
title: 'Workspace-Ansicht & Dateien',
items: [
{
id: 'ws-open-tree',
label: 'Dateibaum & Ordner öffnen',
icon: <FolderTree className="w-4 h-4 text-accent" />,
badge: docs.length,
variant: 'accent',
active: showMobileFileDrawer,
onClick: () => {
setWorkspaceMode('editor');
setShowMobileFileDrawer(true);
},
},
{
id: 'ws-mode-editor',
label: 'Notizen & Editor',
icon: <Layers className="w-4 h-4" />,
active: workspaceMode === 'editor' && !showMobileFileDrawer,
onClick: () => {
setWorkspaceMode('editor');
setShowMobileFileDrawer(false);
},
},
{
id: 'ws-mode-tags',
label: 'Themen & Hashtags',
icon: <Hash className="w-4 h-4" />,
badge: workspaceTags.length,
active: workspaceMode === 'tags',
onClick: () => {
setWorkspaceMode('tags');
setShowMobileFileDrawer(false);
},
},
{
id: 'ws-mode-todos',
label: 'Globale To-Dos',
icon: <CheckSquare className="w-4 h-4" />,
badge: openTodosCount,
active: workspaceMode === 'todos',
onClick: () => {
setWorkspaceMode('todos');
setShowMobileFileDrawer(false);
},
},
],
},
{
id: 'ws-doc-actions',
title: 'Erstellen & Dokument-Aktionen',
items: [
{
id: 'ws-new-doc',
label: 'Neue Datei erstellen',
icon: <FilePlus className="w-4 h-4 text-accent" />,
onClick: () => {
setShowMobileFileDrawer(false);
handleCreateDoc(null);
},
},
{
id: 'ws-new-folder',
label: 'Neuer Ordner',
icon: <FolderPlus className="w-4 h-4" />,
onClick: () => {
setWorkspaceMode('editor');
setShowMobileFileDrawer(true);
handleStartCreateFolder(null);
},
},
...(selectedDoc
? [
{
id: 'ws-share-doc',
label: `Notiz "${selectedDoc.title || 'Unbenannt'}" teilen`,
icon: <Users className="w-4 h-4" />,
onClick: () => openShareModal(),
},
{
id: 'ws-pin-doc',
label: selectedDoc.isPinned ? 'Von Favoriten lösen' : 'Oben in Favoriten anpinnen',
icon: <Pin className="w-4 h-4" />,
active: Boolean(selectedDoc.isPinned),
onClick: () => persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned }, true),
},
{
id: 'ws-export-md',
label: 'Als Markdown exportieren (.md)',
icon: <Download className="w-4 h-4" />,
onClick: () => handleExportMarkdown(),
},
{
id: 'ws-delete-doc',
label: selectedDoc.isOwner !== false ? 'Notiz löschen' : 'Geteilte Notiz verlassen',
icon: <Trash2 className="w-4 h-4" />,
variant: 'danger' as const,
onClick: () => {
if (selectedDoc.isOwner !== false) {
handleDeleteDoc(selectedDoc.id);
} else {
handleLeaveShare();
}
},
},
]
: []),
],
},
]);
}, [
workspaceMode,
showMobileFileDrawer,
docs.length,
workspaceTags.length,
allWorkspaceTodos,
selectedDoc,
setGroups,
]);
const renderDocItem = (doc: Document, depth: number) => {
const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
const isDragging = draggingDocId === doc.id;
@@ -2732,9 +2862,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
setSelectedDoc(doc);
setZoomedBlockId(null);
setWorkspaceMode('editor');
setShowMobileFileDrawer(false);
}}
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 ${
className={`group flex items-center justify-between py-2.5 sm:py-1.5 pr-2 border-l-2 transition-all cursor-pointer text-sm sm:text-xs ${
isDragging ? 'opacity-40 scale-[0.98]' : ''
} ${
isSelected
@@ -2744,15 +2875,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
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="text-base sm: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.isPinned && <Pin className="w-3 h-3 sm:w-2.5 sm: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" />
<Users className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
</span>
)}
</div>
@@ -2816,7 +2947,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
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 ${
className={`group flex items-center justify-between py-2.5 sm:py-1.5 pr-2 cursor-pointer transition-colors text-sm sm:text-xs ${
isDraggingThisFolder ? 'opacity-40 scale-[0.98]' : ''
} ${
isDragOver
@@ -2828,31 +2959,32 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<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" />
<ChevronDown className="w-3.5 h-3.5 sm:w-3 sm:h-3 flex-shrink-0" />
) : (
<ChevronRight className="w-3 h-3 flex-shrink-0" />
<ChevronRight className="w-3.5 h-3.5 sm:w-3 sm:h-3 flex-shrink-0" />
)}
</span>
{isExpanded ? (
<FolderOpen className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<FolderOpen className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-accent flex-shrink-0" />
) : (
<Folder className="w-3.5 h-3.5 text-muted flex-shrink-0" />
<Folder className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted flex-shrink-0" />
)}
<span className="font-medium text-xs text-main truncate">{node.name}</span>
<span className="font-medium text-sm sm: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">
<div className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 flex items-center gap-1 transition-opacity">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
setShowMobileFileDrawer(false);
handleCreateDoc(node.path);
}}
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
className="p-1.5 sm: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" />
<FilePlus className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
</button>
<button
type="button"
@@ -2860,10 +2992,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleStartCreateFolder(node.path);
}}
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
className="p-1.5 sm:p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Neuer Unterordner"
>
<FolderPlus className="w-3 h-3" />
<FolderPlus className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
</button>
<button
type="button"
@@ -2871,10 +3003,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
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"
className="p-1.5 sm: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" />
<Trash2 className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
</button>
</div>
</div>
@@ -2882,9 +3014,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{isCreatingSubfolder && (
<div
style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
className="py-1 pr-2 flex items-center gap-1 bg-canvas"
className="py-1.5 sm:py-1 pr-2 flex items-center gap-1 bg-canvas"
>
<Folder className="w-3 h-3 text-muted flex-shrink-0" />
<Folder className="w-3.5 h-3.5 sm:w-3 sm:h-3 text-muted flex-shrink-0" />
<input
type="text"
autoFocus
@@ -2895,23 +3027,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Unterordner…"
className="flex-1 h-6 px-1.5 input-field text-xs"
className="flex-1 h-8 sm:h-6 px-2 sm:px-1.5 input-field text-xs"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-accent hover:text-main rounded-btn"
className="p-1.5 sm:p-1 text-accent hover:text-main rounded-btn"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
<Check className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
</button>
<button
type="button"
onClick={() => setIsCreatingFolder(false)}
className="p-1 text-muted hover:text-main rounded-btn"
className="p-1.5 sm:p-1 text-muted hover:text-main rounded-btn"
title="Abbrechen"
>
<X className="w-3.5 h-3.5" />
<X className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
</button>
</div>
)}
@@ -2938,8 +3070,52 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
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">
{/* Mobile Compact Workspace Bar (Options & mode switching live in MindSift Logo Menu) */}
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
<button
type="button"
onClick={() => {
setWorkspaceMode('editor');
setShowMobileFileDrawer(true);
}}
className="flex items-center gap-2 min-w-0 text-left py-0.5"
title="Dateibaum & Ordner öffnen"
>
<FolderTree className="w-4 h-4 text-accent flex-shrink-0" />
<span className="text-sm font-semibold text-main truncate">
{workspaceMode === 'tags'
? 'Themen & Hashtags'
: workspaceMode === 'todos'
? 'Globale To-Dos'
: selectedDoc
? `${selectedDoc.icon || '📄'} ${selectedDoc.title || 'Unbenannt'}`
: 'Dateibaum öffnen'}
</span>
</button>
<div className="flex items-center gap-1.5 flex-shrink-0">
{workspaceMode === 'editor' && selectedDoc && (
<span className="badge-accent text-[10px]">
<Check className="w-2.5 h-2.5" />
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
</span>
)}
<button
type="button"
onClick={() => {
setWorkspaceMode('editor');
setShowMobileFileDrawer(true);
}}
className="btn-action min-h-[36px] px-2.5 text-xs flex items-center gap-1"
>
<Folder className="w-3.5 h-3.5 text-accent" />
<span>Dateien</span>
</button>
</div>
</div>
{/* Top Navigation Mode Switcher: Notizen & Outliner vs. Globales To-Do Dashboard (Desktop) */}
<div className="hidden sm: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"
@@ -3015,38 +3191,71 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* ===================================================================== */}
{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">
{/* Mobile Backdrop for File Tree Slide-Over Drawer */}
{showMobileFileDrawer && (
<div
className="fixed inset-0 bg-black/50 backdrop-blur-xs z-40 lg:hidden animate-in fade-in duration-150"
onClick={() => setShowMobileFileDrawer(false)}
/>
)}
{/* Left Document & Folder Explorer Tree (Desktop Sidebar + Mobile Slide-Over Drawer) */}
<div
className={`${
showMobileFileDrawer
? 'fixed inset-y-0 left-0 z-50 w-[86vw] max-w-sm bg-panel border-r border-border shadow-2xl flex'
: 'hidden lg:flex'
} lg:col-span-4 panel-surface flex-col self-start max-h-screen lg:max-h-none`}
>
{/* Mobile Drawer Top Header */}
<div className="flex lg:hidden items-center justify-between px-3.5 py-3 border-b border-border bg-panel">
<div className="flex items-center gap-2">
<FolderTree className="w-4 h-4 text-accent" />
<span className="text-sm font-bold text-main">Dateibaum & Ordner</span>
</div>
<button
type="button"
onClick={() => setShowMobileFileDrawer(false)}
className="p-1.5 text-muted hover:text-main rounded-btn"
title="Schließen"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="p-2.5 sm: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" />
<Search className="w-4 h-4 sm:w-3.5 sm: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"
className="w-full h-9 sm:h-7 pl-8 sm:pl-7 pr-2 input-field text-sm sm:text-xs"
/>
</div>
<div className="flex items-center gap-1.5">
<button
type="button"
onClick={() => handleCreateDoc(null)}
className="flex-1 btn-action"
onClick={() => {
setShowMobileFileDrawer(false);
handleCreateDoc(null);
}}
className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center"
title="Neue Datei erstellen"
>
<FilePlus className="w-3.5 h-3.5 text-muted" />
<FilePlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
<span>Neue Datei</span>
</button>
<button
type="button"
onClick={() => handleStartCreateFolder(null)}
className="flex-1 btn-action"
className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center"
title="Neuen Ordner erstellen"
>
<FolderPlus className="w-3.5 h-3.5 text-muted" />
<FolderPlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
<span>Neuer Ordner</span>
</button>
</div>
@@ -3054,7 +3263,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{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" />
<Folder className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted flex-shrink-0" />
<input
type="text"
autoFocus
@@ -3065,23 +3274,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Neuer Ordnername…"
className="flex-1 h-6 px-1.5 input-field text-xs"
className="flex-1 h-8 sm:h-6 px-2 sm:px-1.5 input-field text-xs"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-accent hover:text-main rounded-btn"
className="p-1.5 sm:p-1 text-accent hover:text-main rounded-btn"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
<Check className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
</button>
<button
type="button"
onClick={() => setIsCreatingFolder(false)}
className="p-1 text-muted hover:text-main rounded-btn"
className="p-1.5 sm:p-1 text-muted hover:text-main rounded-btn"
title="Abbrechen"
>
<X className="w-3.5 h-3.5" />
<X className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
</button>
</div>
)}
@@ -3096,8 +3305,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div className="flex items-center justify-center gap-2">
<button
type="button"
onClick={() => handleCreateDoc(null)}
className="btn-action"
onClick={() => {
setShowMobileFileDrawer(false);
handleCreateDoc(null);
}}
className="btn-action min-h-[38px] sm:min-h-0"
>
<FilePlus className="w-3.5 h-3.5 text-muted" />
<span>Neue Datei</span>
@@ -3105,7 +3317,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleStartCreateFolder(null)}
className="btn-action"
className="btn-action min-h-[38px] sm:min-h-0"
>
<FolderPlus className="w-3.5 h-3.5 text-muted" />
<span>Neuer Ordner</span>
@@ -3113,7 +3325,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div>
</div>
) : (
<div className="py-1 max-h-[calc(100vh-240px)] overflow-y-auto">
<div className="py-1 flex-1 lg:max-h-[calc(100vh-240px)] overflow-y-auto">
{/* Drag target for Root when dragging a note or a folder */}
{(draggingDocId || draggingFolderPath) && (
<div
@@ -3160,7 +3372,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<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"
className="w-full px-2 py-1.5 sm: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">
@@ -3192,8 +3404,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
setSelectedDoc(doc);
setZoomedBlockId(null);
setWorkspaceMode('editor');
setShowMobileFileDrawer(false);
}}
className={`group flex items-center justify-between px-2 py-1.5 rounded-btn transition-colors cursor-pointer text-xs ${
className={`group flex items-center justify-between px-2 py-2.5 sm:py-1.5 rounded-btn transition-colors cursor-pointer text-sm sm:text-xs ${
isSelected
? 'bg-panel-elevated border-l-2 border-accent text-main font-medium'
: 'text-muted hover:text-main hover:bg-canvas/50'
@@ -3201,7 +3414,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
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="text-base sm:text-sm flex-shrink-0">{doc.icon || '📄'}</span>
<span className="truncate">{doc.title || 'Unbenannt'}</span>
</div>
<button
@@ -3210,10 +3423,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
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"
className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 p-1 sm:p-0.5 text-muted hover:text-accent rounded transition-opacity"
title="Von Angepinnt entfernen"
>
<Pin className="w-3 h-3 text-accent" />
<Pin className="w-3.5 h-3.5 sm:w-3 sm:h-3 text-accent" />
</button>
</div>
);
@@ -3229,7 +3442,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<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"
className="w-full px-2 py-1.5 sm: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">
@@ -3243,13 +3456,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
/>
</button>
{!isTagsCollapsed && (
<div className="flex flex-wrap gap-1 px-1.5 py-1 mt-1 max-h-36 overflow-y-auto">
<div className="flex flex-wrap gap-1.5 sm: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 ${
onClick={() => {
setShowMobileFileDrawer(false);
openTagPage(wt.tag);
}}
className={`px-2.5 py-1 sm:px-2 sm:py-0.5 rounded-pill text-xs sm: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'
frontend/src/main.tsx
+5 -1
View File
@@ -1,10 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { MobileActionProvider } from './context/MobileActionContext';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
<MobileActionProvider>
<App />
</MobileActionProvider>
</React.StrictMode>
);