fix(shared-ui): fix reactivity in NavVisibilitySettings

The navigation visibility toggles in settings were not updating the UI
reactively when toggled. This was because isRouteHidden() was a regular
function that wasn't tracked by Svelte's reactivity system.

Changed to use a $derived variable that directly accesses
userSettings.nav.hiddenNavItems, which ensures the component re-renders
when the settings change.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-12-10 20:43:14 +01:00
parent 1040b54058
commit a86b907049

View file

@ -28,10 +28,8 @@
// Check if there are any routes to configure
const hasRoutes = $derived(hideableItems.length > 0);
function isRouteHidden(href: string): boolean {
const hidden = userSettings.getHiddenNavItemsForApp(appId);
return hidden.includes(href);
}
// Reactive: get hidden items from nav settings (triggers re-render when hiddenNavItems changes)
const hiddenItems = $derived(userSettings.nav.hiddenNavItems?.[appId] || []);
async function handleToggle(href: string): Promise<void> {
await userSettings.toggleNavItemVisibility(appId, href);
@ -129,7 +127,7 @@
<div class="space-y-1">
{#each hideableItems as item (item.href)}
{@const hidden = isRouteHidden(item.href)}
{@const hidden = hiddenItems.includes(item.href)}
{@const iconPath = item.icon ? getIconPath(item.icon) : ''}
<label
class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-[hsl(var(--muted))]/50 cursor-pointer transition-colors border border-transparent hover:border-[hsl(var(--border))]"