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

fix(ui): even footer line, mode switch fits the user menu and shows every choice
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m23s
Details

Browse Source 
chore(release): v0.14.1

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-10-30 23:58:53 +01:00
1 parent 3f0e596356
commit 61541b2851
5 files changed
+32 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/ThemeQuickPicker.tsx
+12 -7
View File
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { Monitor, Moon, Sun } from 'lucide-react';
import {
AVAILABLE_THEMES,
@@ -25,13 +25,14 @@ export const ThemeQuickPicker: React.FC<ThemeQuickPickerProps> = ({ activeTheme,
const mode = active?.mode ?? 'dark';
const customThemes = themes.filter((t) => t.isCustom);
const dot = touch ? 'w-9 h-9' : 'w-7 h-7';
const followSystem = getFollowSystem();
// Kept in state: choosing "System" may not change the theme, but the selection must still show
const [followSystem, setFollow] = useState(getFollowSystem);
const pick = (id: ThemeId) => onChange(resolveTheme(id));
return (
<div className="space-y-2">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-1.5" role="radiogroup" aria-label="Farbfamilie">
<div className="flex items-center justify-between gap-1">
<div className="flex w-full items-center justify-between" role="radiogroup" aria-label="Farbfamilie">
{THEME_FAMILIES.map((f) => {
const preview = AVAILABLE_THEMES.find((t) => t.id === (mode === 'light' ? f.light : f.dark));
const selected = active?.family === f.id;
@@ -53,7 +54,9 @@ export const ThemeQuickPicker: React.FC<ThemeQuickPickerProps> = ({ activeTheme,
);
})}
</div>
<div className="flex items-center rounded-full bg-panel-elevated p-0.5" role="radiogroup" aria-label="Hell oder dunkel">
</div>
{/* Own row: three labelled segments, so it fits narrow menus */}
<div className="grid grid-cols-3 rounded-full bg-panel-elevated p-0.5" role="radiogroup" aria-label="Hell oder dunkel">
{(['light', 'dark', 'auto'] as const).map((m) => {
const family = active?.family ? THEME_FAMILIES.find((f) => f.id === active.family) : undefined;
const selected = m === 'auto' ? followSystem : !followSystem && !!active && mode === m;
@@ -68,11 +71,12 @@ export const ThemeQuickPicker: React.FC<ThemeQuickPickerProps> = ({ activeTheme,
onClick={() => {
if (!family) return;
setFollowSystem(m === 'auto');
setFollow(m === 'auto');
onChange(m === 'auto' ? resolveTheme(family.dark) : family[m]);
}}
title={m === 'light' ? 'Hell' : m === 'dark' ? 'Dunkel' : 'Wie System'}
aria-label={m === 'light' ? 'Hell' : m === 'dark' ? 'Dunkel' : 'Wie System'}
className={`${touch ? 'h-9 w-9' : 'h-7 w-7'} rounded-full flex items-center justify-center transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${
className={`${touch ? 'h-9' : 'h-7'} rounded-full flex items-center justify-center gap-1 text-[11px] font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${
selected ? 'bg-panel text-accent shadow-sm' : 'text-muted hover:text-main'
}`}
>
@@ -83,10 +87,10 @@ export const ThemeQuickPicker: React.FC<ThemeQuickPickerProps> = ({ activeTheme,
) : (
<Monitor className="w-3.5 h-3.5" />
)}
<span>{m === 'light' ? 'Hell' : m === 'dark' ? 'Dunkel' : 'System'}</span>
</button>
);
})}
</div>
</div>
{customThemes.length > 0 && (
<div className="flex flex-wrap gap-1">
@@ -96,6 +100,7 @@ export const ThemeQuickPicker: React.FC<ThemeQuickPickerProps> = ({ activeTheme,
type="button"
onClick={() => {
setFollowSystem(false);
setFollow(false);
onChange(t.id);
}}
className={`h-7 px-2 rounded-full text-[11px] flex items-center gap-1.5 border transition-colors cursor-pointer ${