mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-24 02:16:41 +02:00
♻️ refactor(todo,contacts): remove sidebar mode from PillNavigation
Simplify navigation by removing unused sidebar mode from both apps: Todo App: - Remove isSidebarMode state, handlers, and localStorage persistence - Remove sidebar-related CSS classes and styles - Simplify TodoToolbar to pure wrapper component Contacts App: - Remove isSidebarMode state, handlers, and localStorage persistence - Remove sidebar-related CSS from ContactsToolbar and ContactAlphabetView - Always show view-mode-pill (no longer conditional on sidebar mode) This removes ~250 lines of unused code across 5 files.
This commit is contained in:
Till-JS
parent
12a900346c
commit
bf0e788cba
5 changed files with 66 additions and 322 deletions
|
|
@ -3,30 +3,17 @@
|
|||
import TodoToolbarContent from './TodoToolbarContent.svelte';
|
||||
|
||||
interface Props {
|
||||
isSidebarMode?: boolean;
|
||||
isCollapsed?: boolean;
|
||||
bottomOffset?: string;
|
||||
onModeChange?: (isSidebar: boolean) => void;
|
||||
onCollapsedChange?: (isCollapsed: boolean) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
isSidebarMode = false,
|
||||
isCollapsed = true,
|
||||
bottomOffset = '70px',
|
||||
onModeChange,
|
||||
onCollapsedChange,
|
||||
}: Props = $props();
|
||||
|
||||
function toggleSidebarMode() {
|
||||
onModeChange?.(!isSidebarMode);
|
||||
}
|
||||
let { isCollapsed = true, bottomOffset = '70px', onCollapsedChange }: Props = $props();
|
||||
</script>
|
||||
|
||||
<ExpandableToolbar
|
||||
{isCollapsed}
|
||||
{onCollapsedChange}
|
||||
{isSidebarMode}
|
||||
{bottomOffset}
|
||||
collapsedTitle="Aufgaben-Optionen"
|
||||
expandedTitle="Schließen"
|
||||
|
|
@ -42,62 +29,4 @@
|
|||
{/snippet}
|
||||
|
||||
<TodoToolbarContent />
|
||||
|
||||
{#snippet rightActions()}
|
||||
<button
|
||||
onclick={toggleSidebarMode}
|
||||
class="layout-btn"
|
||||
title={isSidebarMode ? 'Zur Bottom-Navigation' : 'Zur Sidebar-Navigation'}
|
||||
>
|
||||
<svg class="layout-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{#if isSidebarMode}
|
||||
<!-- Bottom bar layout icon -->
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 3h18v9H3V3zm0 12h18v6H3v-6z"
|
||||
/>
|
||||
{:else}
|
||||
<!-- Sidebar layout icon -->
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 3h7v18H3V3zm9 0h9v18h-9V3z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
</button>
|
||||
{/snippet}
|
||||
</ExpandableToolbar>
|
||||
|
||||
<style>
|
||||
/* Layout toggle button - app-specific style */
|
||||
.layout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
border-radius: 9999px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.layout-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
:global(.dark) .layout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.layout-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,7 @@
|
|||
import { labelsStore } from '$lib/stores/labels.svelte';
|
||||
import { tasksStore } from '$lib/stores/tasks.svelte';
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import {
|
||||
isSidebarMode as sidebarModeStore,
|
||||
isNavCollapsed as collapsedStore,
|
||||
isToolbarCollapsed as toolbarCollapsedStore,
|
||||
} from '$lib/stores/navigation';
|
||||
import { isToolbarCollapsed as toolbarCollapsedStore } from '$lib/stores/navigation';
|
||||
import TodoToolbar from '$lib/components/TodoToolbar.svelte';
|
||||
import {
|
||||
THEME_DEFINITIONS,
|
||||
|
|
@ -106,8 +102,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
let isSidebarMode = $state(false);
|
||||
let isCollapsed = $state(false);
|
||||
let isToolbarCollapsed = $state(true);
|
||||
|
||||
// Use theme store's isDark directly
|
||||
|
|
@ -166,28 +160,10 @@
|
|||
{ href: '/feedback', label: 'Feedback', icon: 'chat' },
|
||||
];
|
||||
|
||||
// Navigation items (base items + dynamic label items in sidebar mode, filtered by visibility settings)
|
||||
const navItems = $derived.by(() => {
|
||||
// Start with base items, filter out hidden ones (with fallback for guest mode)
|
||||
let items = filterHiddenNavItems('todo', baseNavItems, userSettings.nav?.hiddenNavItems || {});
|
||||
|
||||
// In sidebar mode, add tags as sub-items if available
|
||||
if (isSidebarMode && labelsStore.labels.length > 0) {
|
||||
const tagItems: PillNavItem[] = labelsStore.labels.slice(0, 5).map((label) => ({
|
||||
href: `/tag/${label.id}`,
|
||||
label: label.name,
|
||||
icon: 'tag',
|
||||
}));
|
||||
|
||||
// Insert tag items after "Tags" nav item
|
||||
const tagsIndex = items.findIndex((i) => i.href === '/tags');
|
||||
if (tagsIndex !== -1 && tagItems.length > 0) {
|
||||
items = [...items];
|
||||
items.splice(tagsIndex + 1, 0, ...tagItems);
|
||||
}
|
||||
}
|
||||
return items;
|
||||
});
|
||||
// Navigation items filtered by visibility settings (with fallback for guest mode)
|
||||
const navItems = $derived(
|
||||
filterHiddenNavItems('todo', baseNavItems, userSettings.nav?.hiddenNavItems || {})
|
||||
);
|
||||
|
||||
// Navigation shortcuts (Ctrl+1-6) - use base items for consistent shortcuts
|
||||
const navRoutes = baseNavItems.map((item) => item.href);
|
||||
|
|
@ -223,26 +199,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function handleModeChange(isSidebar: boolean) {
|
||||
isSidebarMode = isSidebar;
|
||||
sidebarModeStore.set(isSidebar);
|
||||
try {
|
||||
localStorage?.setItem('todo-nav-sidebar', String(isSidebar));
|
||||
} catch {
|
||||
// localStorage not available or quota exceeded
|
||||
}
|
||||
}
|
||||
|
||||
function handleCollapsedChange(collapsed: boolean) {
|
||||
isCollapsed = collapsed;
|
||||
collapsedStore.set(collapsed);
|
||||
try {
|
||||
localStorage?.setItem('todo-nav-collapsed', String(collapsed));
|
||||
} catch {
|
||||
// localStorage not available or quota exceeded
|
||||
}
|
||||
}
|
||||
|
||||
function handleToolbarCollapsedChange(collapsed: boolean) {
|
||||
isToolbarCollapsed = collapsed;
|
||||
toolbarCollapsedStore?.set(collapsed);
|
||||
|
|
@ -292,28 +248,6 @@
|
|||
goto(userSettings.startPage, { replaceState: true });
|
||||
}
|
||||
|
||||
// Initialize sidebar mode from localStorage (with error handling for private browsing)
|
||||
try {
|
||||
const savedSidebar = localStorage?.getItem('todo-nav-sidebar');
|
||||
if (savedSidebar === 'true') {
|
||||
isSidebarMode = true;
|
||||
sidebarModeStore.set(true);
|
||||
}
|
||||
} catch {
|
||||
// localStorage not available (private browsing, quota exceeded, etc.)
|
||||
}
|
||||
|
||||
// Initialize collapsed state from localStorage
|
||||
try {
|
||||
const savedCollapsed = localStorage?.getItem('todo-nav-collapsed');
|
||||
if (savedCollapsed === 'true') {
|
||||
isCollapsed = true;
|
||||
collapsedStore.set(true);
|
||||
}
|
||||
} catch {
|
||||
// localStorage not available
|
||||
}
|
||||
|
||||
// Initialize toolbar collapsed state from localStorage
|
||||
try {
|
||||
const savedToolbarCollapsed = localStorage?.getItem('todo-toolbar-collapsed');
|
||||
|
|
@ -365,10 +299,6 @@
|
|||
homeRoute="/"
|
||||
onToggleTheme={handleToggleTheme}
|
||||
{isDark}
|
||||
{isSidebarMode}
|
||||
onModeChange={handleModeChange}
|
||||
{isCollapsed}
|
||||
onCollapsedChange={handleCollapsedChange}
|
||||
desktopPosition={userSettings.nav?.desktopPosition || 'bottom'}
|
||||
showThemeToggle={true}
|
||||
showThemeVariants={true}
|
||||
|
|
@ -410,10 +340,8 @@
|
|||
|
||||
<!-- Todo Toolbar (ExpandableToolbar FAB) -->
|
||||
<TodoToolbar
|
||||
{isSidebarMode}
|
||||
isCollapsed={isToolbarCollapsed}
|
||||
onCollapsedChange={handleToolbarCollapsedChange}
|
||||
onModeChange={handleModeChange}
|
||||
bottomOffset="70px"
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -424,12 +352,7 @@
|
|||
onToggle={() => todoSettings.toggleImmersiveMode()}
|
||||
/>
|
||||
|
||||
<main
|
||||
class="main-content bg-background"
|
||||
class:sidebar-mode={isSidebarMode && !isCollapsed}
|
||||
class:floating-mode={!isSidebarMode && !isCollapsed}
|
||||
class:immersive={todoSettings.immersiveModeEnabled}
|
||||
>
|
||||
<main class="main-content bg-background" class:immersive={todoSettings.immersiveModeEnabled}>
|
||||
<div
|
||||
class="content-wrapper"
|
||||
class:full-width={$page.url.pathname === '/kanban'}
|
||||
|
|
@ -455,14 +378,6 @@
|
|||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.main-content.floating-mode {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.main-content.sidebar-mode {
|
||||
padding-left: 180px;
|
||||
}
|
||||
|
||||
/* Immersive mode - fullscreen, no padding */
|
||||
.main-content.immersive {
|
||||
padding: 0 !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue