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

style: reduce padding, adopt crisp square tabs/cards, keep round buttons and single accent
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 51s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 19:43:59 +02:00
1 parent 3263b07e72
commit da82caf82c
7 files changed
+345 -371
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/lists/SharedListsView.tsx
+53 -53
View File
@@ -264,18 +264,18 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
const completedItems = activeList?.items.filter((i) => i.isCompleted) || [];
return (
<div className="max-w-4xl mx-auto space-y-6">
<div className="w-full space-y-3">
{/* Top Space Bar & Realtime Indicator */}
<div className="p-4 sm:p-5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-2">
<div className="px-3 py-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-1.5">
{spaces.map((sp) => (
<button
key={sp.id}
onClick={() => setActiveSpace(sp)}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border ${
activeSpace?.id === sp.id
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'bg-[#16171a] text-zinc-300 hover:text-white border border-white/[0.06]'
? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-300 hover:text-white border-white/[0.08]'
}`}
>
<span>{sp.icon}</span>
@@ -285,14 +285,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => setShowNewSpaceModal((prev) => !prev)}
className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
>
<Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
</button>
<button
onClick={() => setShowJoinModal((prev) => !prev)}
className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
>
<UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
</button>
@@ -302,7 +302,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{activeSpace && (
<div className="flex items-center gap-2">
<div
className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
className={`h-8 px-3 text-xs flex items-center gap-1.5 ${
wsConnected
? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
: 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewSpaceModal && (
<form
onSubmit={handleCreateSpace}
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
>
<input
type="text"
value={newSpaceName}
onChange={(e) => setNewSpaceName(e.target.value)}
placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
autoFocus
/>
<button
type="submit"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
>
Space anlegen
</button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showJoinModal && (
<form
onSubmit={handleJoinSpace}
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
>
<input
type="text"
value={joinCode}
onChange={(e) => setJoinCode(e.target.value)}
placeholder="Invite-Code des Partners eingeben…"
className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
autoFocus
/>
<button
type="submit"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
>
Beitreten
</button>
@@ -375,7 +375,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
)}
{/* List Tabs within Active Space */}
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center gap-1.5">
{lists.map((lst) => {
const openCount = lst.items.filter((i) => !i.isCompleted).length;
const isSelected = activeList?.id === lst.id;
@@ -383,15 +383,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
key={lst.id}
onClick={() => setActiveListId(lst.id)}
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${
className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border ${
isSelected
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'bg-[#222428] text-zinc-300 hover:text-white border border-white/[0.06]'
? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
: 'bg-[#222428] text-zinc-300 hover:text-white border-white/[0.08]'
}`}
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
<span className={`px-2 py-0.2 rounded-full text-xs ${
<span className={`px-1.5 py-0.2 text-[10px] font-semibold ${
isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
}`}>
{openCount}
@@ -402,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => setShowNewListModal((prev) => !prev)}
className="h-10 px-4 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.06] text-xs sm:text-sm text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="h-8 px-3 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
>
<Plus className="w-4 h-4 text-[#1d8cf8]" />
<Plus className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Neue Liste</span>
</button>
</div>
@@ -412,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewListModal && (
<form
onSubmit={handleCreateList}
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-3"
className="p-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-2"
>
<div className="flex items-center gap-1.5">
{['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -435,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newListTitle}
onChange={(e) => setNewListTitle(e.target.value)}
placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
autoFocus
/>
<button
type="submit"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
>
Liste erstellen
</button>
@@ -449,16 +449,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Active Shared List Card */}
{activeList ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
<div className="p-3 bg-[#222428] border border-white/[0.08]">
{/* Quick-Add Pill Form */}
<form onSubmit={handleAddItem} className="space-y-3 mb-6">
<div className="flex flex-col sm:flex-row gap-2.5">
<form onSubmit={handleAddItem} className="space-y-2 mb-3">
<div className="flex flex-col sm:flex-row gap-2">
<input
type="text"
value={newItemText}
onChange={(e) => setNewItemText(e.target.value)}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
className="flex-1 h-11 px-5 rounded-full bg-[#16171a] text-sm sm:text-base text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/>
<div className="flex gap-2">
<input
@@ -466,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)"
className="w-32 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="w-32 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/>
<button
type="submit"
disabled={!newItemText.trim()}
className="h-11 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
className="h-10 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
>
<Plus className="w-4 h-4" />
<span>Hinzufügen</span>
@@ -487,10 +487,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
key={cat}
type="button"
onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
className={`px-3 py-1 rounded-full text-xs transition-colors ${
className={`px-2.5 py-0.5 text-xs transition-colors border ${
newItemCategory === cat
? 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
? 'bg-[#1d8cf8] text-white border-[#1d8cf8] font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border-white/[0.08]'
}`}
>
{cat}
@@ -500,10 +500,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
</form>
{/* Open Items */}
<div className="space-y-2">
<div className="border border-white/[0.08] divide-y divide-white/[0.06]">
{openItems.length === 0 ? (
<div className="py-8 text-center text-zinc-400 text-sm flex flex-col items-center gap-2">
<Sparkles className="w-5 h-5 text-[#22c55e]" />
<div className="py-6 text-center text-zinc-400 text-sm flex flex-col items-center gap-1.5">
<Sparkles className="w-4 h-4 text-[#1d8cf8]" />
<span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
</div>
) : (
@@ -511,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="p-3.5 sm:p-4 rounded-2xl bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.06] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
className="px-3 py-2 bg-[#16171a] hover:bg-[#282a2f] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
>
<div className="flex items-center gap-3.5 min-w-0">
<Circle className="w-5 h-5 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
<span className="text-sm sm:text-base font-normal text-white truncate">
<div className="flex items-center gap-2.5 min-w-0">
<Circle className="w-4 h-4 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
<span className="text-sm font-normal text-white truncate">
{item.content}
</span>
{item.quantity && (
<span className="px-2.5 py-0.5 rounded-full bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
<span className="px-2 py-0.2 bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
{item.quantity}
</span>
)}
{item.category && (
<span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#222428] text-zinc-400 text-xs">
<span className="hidden sm:inline px-2 py-0.2 bg-[#222428] text-zinc-400 text-xs">
{item.category}
</span>
)}
@@ -536,9 +536,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleDeleteItem(item.id);
}}
className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className="w-3 h-3" />
</button>
</div>
))
@@ -547,28 +547,28 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Completed Items Section */}
{completedItems.length > 0 && (
<div className="mt-8 pt-6 border-t border-white/[0.06]">
<div className="flex items-center justify-between mb-3">
<div className="mt-3 pt-2.5 border-t border-white/[0.06]">
<div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
Bereits im Einkaufswagen / Erledigt ({completedItems.length})
Erledigt ({completedItems.length})
</span>
<button
onClick={handleClearCompleted}
className="px-3.5 py-1 rounded-full bg-[#16171a] hover:bg-[#ef4444]/15 border border-white/[0.06] text-xs text-zinc-400 hover:text-[#ef4444] transition-colors"
className="px-3 py-0.5 rounded-full bg-[#16171a] hover:bg-white/[0.08] border border-white/[0.06] text-xs text-zinc-400 hover:text-white transition-colors"
>
Erledigte aufräumen
</button>
</div>
<div className="space-y-1.5 opacity-75">
<div className="border border-white/[0.06] divide-y divide-white/[0.04] opacity-75">
{completedItems.map((item) => (
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="p-3 rounded-2xl bg-[#16171a]/50 border border-white/[0.04] hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
className="px-3 py-1.5 bg-[#16171a]/50 hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
>
<div className="flex items-center gap-3 min-w-0">
<CheckCircle2 className="w-5 h-5 text-[#22c55e] flex-shrink-0" />
<div className="flex items-center gap-2.5 min-w-0">
<CheckCircle2 className="w-4 h-4 text-[#1d8cf8] flex-shrink-0" />
<span className="text-sm text-zinc-400 line-through truncate">
{item.content}
</span>