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
+96 -49
1 changed files with 96 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3b4a8b125b - Show all commits
frontend/src/features/lists/SharedListsView.tsx
+96 -49
View File
@@ -1,8 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { import {
Plus, Plus,
CheckCircle2,
Circle,
Trash2, Trash2,
Users, Users,
Check, Check,
@@ -497,61 +495,69 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
</form> </form>
)} )}
{/* Active Shared List Card */} {/* Active Shared List View */}
{activeList ? ( {activeList ? (
<div className="p-3 panel-surface"> <div className="space-y-4">
{/* Quick-Add Form */} {/* Quick-Add Form */}
<form onSubmit={handleAddItem} className="space-y-2 mb-3"> <form
<div className="flex flex-col sm:flex-row gap-2"> onSubmit={handleAddItem}
className="flex flex-col sm:flex-row items-center gap-2 panel-surface p-1.5"
>
<div className="flex items-center gap-2 flex-1 w-full px-1.5">
<Plus className="w-4 h-4 text-accent flex-shrink-0" />
<input <input
type="text" type="text"
value={newItemText} value={newItemText}
onChange={(e) => setNewItemText(e.target.value)} onChange={(e) => setNewItemText(e.target.value)}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch #Kühlregal oder #Kaffee)…`} placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch #Kühlregal)…`}
className="flex-1 h-9 px-3 input-field text-sm" className="flex-1 bg-transparent py-1 text-sm text-main placeholder-faint focus:outline-none"
/> />
<div className="flex gap-2"> </div>
<div className="flex items-center gap-1.5 w-full sm:w-auto justify-end px-1 sm:px-0">
<input <input
type="text" type="text"
value={newItemQty} value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)} onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)" placeholder="Menge (z.B. 2x)"
className="w-32 h-9 px-3 input-field text-sm" className="w-28 h-7 px-2 input-field text-xs"
/> />
<button <button
type="submit" type="submit"
disabled={!newItemText.trim()} disabled={!newItemText.trim()}
className="btn-primary h-9 px-4 disabled:opacity-40 disabled:cursor-not-allowed text-xs sm:text-sm flex items-center gap-1.5" className="btn-primary h-7 px-3 text-xs disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1 flex-shrink-0"
> >
<Plus className="w-4 h-4" /> Hinzufügen
<span>Hinzufügen</span>
</button> </button>
</div> </div>
</div>
</form> </form>
{/* Open Items Grouped by Hashtags / Categories */} {/* Open Items Grouped by Hashtags / Categories */}
<div className="border border-border divide-y divide-border rounded-card overflow-hidden">
{openItems.length === 0 ? ( {openItems.length === 0 ? (
<div className="py-6 text-center text-muted text-sm flex flex-col items-center gap-1.5"> <div className="p-8 text-center text-muted text-sm space-y-1 panel-surface">
<p className="font-medium text-main flex items-center justify-center gap-1.5">
<Sparkles className="w-4 h-4 text-accent" /> <Sparkles className="w-4 h-4 text-accent" />
<span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span> <span>Alles erledigt</span>
</p>
<p className="text-xs text-faint">Keine offenen Punkte auf dieser Liste.</p>
</div> </div>
) : ( ) : (
groupedOpenItems.map((group) => ( <div className="space-y-4">
<div key={group.category || 'uncategorized'} className="divide-y divide-border"> {groupedOpenItems.map((group) => (
{/* Category Group Header (only when categories are in use) */} <div key={group.category || 'uncategorized'} className="space-y-1.5">
{/* Category Group Header: white text directly on canvas background */}
{group.label && ( {group.label && (
<div className="px-3 py-1.5 bg-surface-2/70 text-xs font-semibold text-accent flex items-center justify-between"> <div className="flex items-center justify-between px-1">
<span className="flex items-center gap-1"> <span className="text-xs font-semibold text-main tracking-wide">
<span>{group.label}</span> {group.label}
</span> </span>
<span className="text-[10px] text-muted font-normal"> <span className="badge-neutral font-mono text-[10px]">
{group.items.length} {group.items.length === 1 ? 'Eintrag' : 'Einträge'} {group.items.length}
</span> </span>
</div> </div>
)} )}
{/* Lighter panel-surface card container with items */}
<div className="panel-surface divide-y divide-border overflow-hidden">
{group.items.map((item) => { {group.items.map((item) => {
const cat = getItemCategory(item); const cat = getItemCategory(item);
const displayContent = getItemDisplayContent(item); const displayContent = getItemDisplayContent(item);
@@ -560,20 +566,38 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div <div
key={item.id} key={item.id}
onClick={() => handleToggleItem(item)} onClick={() => handleToggleItem(item)}
className="px-3 py-2 bg-canvas hover:bg-panel-elevated flex items-center justify-between gap-3 cursor-pointer transition-colors group" className="px-3 py-2.5 flex items-center justify-between gap-3 cursor-pointer transition-colors hover:bg-panel-hover group"
> >
<div className="flex items-center gap-2.5 min-w-0"> <div className="flex items-center gap-3 min-w-0 flex-1">
<Circle className="w-4 h-4 text-faint group-hover:text-accent flex-shrink-0 transition-colors" /> {/* Eckiges Abhaken */}
<span className="text-sm font-normal text-main truncate"> <button
type="button"
onClick={(e) => {
e.stopPropagation();
handleToggleItem(item);
}}
className={`w-4 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]" />
</button>
<span className="text-sm font-medium text-main truncate">
{displayContent} {displayContent}
</span> </span>
{item.quantity && ( {item.quantity && (
<span className="badge-accent"> <span className="badge-accent">
{item.quantity} {item.quantity}
</span> </span>
)} )}
{cat && (
<span className="px-2 py-0.5 text-xs font-medium text-accent bg-accent/10 border border-accent/25 rounded-full"> {cat && !group.label && (
<span className="px-1.5 py-0.5 text-[10px] font-medium text-accent bg-accent/10 border border-accent/25 rounded-md">
#{cat} #{cat}
</span> </span>
)} )}
@@ -585,23 +609,25 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation(); e.stopPropagation();
handleDeleteItem(item.id); handleDeleteItem(item.id);
}} }}
className="btn-icon btn-icon-danger w-6 h-6" className="btn-icon btn-icon-danger opacity-0 group-hover:opacity-100 transition-opacity"
title="Eintrag löschen"
> >
<Trash2 className="w-3 h-3" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
</div> </div>
); );
})} })}
</div> </div>
))
)}
</div> </div>
))}
</div>
)}
{/* Completed Items Section */} {/* Completed Items Section */}
{completedItems.length > 0 && ( {completedItems.length > 0 && (
<div className="mt-3 pt-2.5 border-t border-border"> <div className="space-y-1.5 pt-2">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between px-1">
<span className="text-xs font-medium uppercase tracking-wider text-muted"> <span className="text-xs font-semibold text-muted uppercase tracking-wider">
Erledigt ({completedItems.length}) Erledigt ({completedItems.length})
</span> </span>
<button <button
@@ -612,34 +638,55 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
</button> </button>
</div> </div>
<div className="border border-border divide-y divide-border opacity-75 rounded-card overflow-hidden"> <div className="panel-surface divide-y divide-border opacity-70 overflow-hidden">
{completedItems.map((item) => { {completedItems.map((item) => {
const cat = getItemCategory(item);
const displayContent = getItemDisplayContent(item); const displayContent = getItemDisplayContent(item);
return ( return (
<div <div
key={item.id} key={item.id}
onClick={() => handleToggleItem(item)} onClick={() => handleToggleItem(item)}
className="px-3 py-1.5 bg-canvas/50 hover:bg-canvas/80 flex items-center justify-between gap-3 cursor-pointer transition-colors" className="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer hover:bg-panel-hover transition-colors group"
> >
<div className="flex items-center gap-2.5 min-w-0"> <div className="flex items-center gap-3 min-w-0 flex-1">
<CheckCircle2 className="w-4 h-4 text-accent flex-shrink-0" /> {/* Eckiges Abhaken */}
<span className="text-sm text-muted line-through truncate"> <button
type="button"
onClick={(e) => {
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"
title="Als offen markieren"
>
<Check className="w-3 h-3 stroke-[3]" />
</button>
<span className="text-sm text-faint line-through truncate">
{displayContent} {displayContent}
</span> </span>
{item.quantity && ( {item.quantity && (
<span className="text-xs text-faint">({item.quantity})</span> <span className="text-xs text-faint">({item.quantity})</span>
)} )}
{cat && (
<span className="text-[11px] px-1.5 py-0.2 badge-neutral text-muted rounded-full">
#{cat}
</span>
)}
</div> </div>
<div className="flex items-center gap-2">
{item.completedByName && ( {item.completedByName && (
<span className="text-xs text-faint">✓ {item.completedByName}</span> <span className="text-xs text-faint">✓ {item.completedByName}</span>
)} )}
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleDeleteItem(item.id);
}}
className="btn-icon btn-icon-danger opacity-0 group-hover:opacity-100 transition-opacity"
title="Löschen"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
</div>
</div> </div>
); );
})} })}