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/AppFooter.tsx
+9 -25
View File
@@ -9,37 +9,21 @@ interface AppFooterProps {
}
export const AppFooter: React.FC<AppFooterProps> = ({ legal, onOpenAbout }) => {
// One small, even line: same font, size and weight for every part (mixed mono/bold looked crooked)
const item = 'leading-none hover:text-muted transition-colors cursor-pointer';
return (
<footer className="hidden sm:flex shrink-0 w-full max-w-6xl mx-auto px-4 py-2 items-center justify-between text-[11px] text-faint select-none">
<div className="flex items-center gap-3">
<button
type="button"
onClick={onOpenAbout}
className="font-semibold text-muted hover:text-main transition-colors cursor-pointer"
>
MindSift
<footer className="hidden sm:flex shrink-0 w-full max-w-6xl mx-auto px-4 py-1.5 items-center justify-between text-[10px] leading-none text-faint select-none">
<div className="flex items-center gap-1.5">
<button type="button" onClick={onOpenAbout} className={item} title="Über MindSift & Versionsdetails">
MindSift {APP_VERSION}
</button>
<button
type="button"
onClick={onOpenAbout}
className="font-mono hover:text-main transition-colors cursor-pointer"
title="Über MindSift & Versionsdetails"
>
{APP_VERSION}
</button>
<span className="text-border">·</span>
<button
type="button"
onClick={onOpenAbout}
className="hover:text-main transition-colors cursor-pointer underline-offset-2 hover:underline"
>
<span aria-hidden>·</span>
<button type="button" onClick={onOpenAbout} className={item}>
Über MindSift
</button>
</div>
<div className="flex items-center gap-3">
<LegalLinks legal={legal} className="!text-faint gap-3" />
</div>
<LegalLinks legal={legal} className="!text-[10px] !text-faint !gap-x-3 leading-none" />
</footer>
);
};
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 ${