mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-24 02:56:43 +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
|
|
@ -7,11 +7,10 @@
|
|||
import type { Contact } from '$lib/api/contacts';
|
||||
|
||||
interface Props {
|
||||
isSidebarMode?: boolean;
|
||||
contacts: Contact[];
|
||||
}
|
||||
|
||||
let { isSidebarMode = false, contacts }: Props = $props();
|
||||
let { contacts }: Props = $props();
|
||||
|
||||
// Use store for collapsed state
|
||||
let isCollapsed = $derived(contactsFilterStore.isToolbarCollapsed);
|
||||
|
|
@ -25,7 +24,6 @@
|
|||
<ExpandableToolbar
|
||||
{isCollapsed}
|
||||
onCollapsedChange={handleCollapsedChange}
|
||||
{isSidebarMode}
|
||||
collapsedTitle="Filter & Optionen"
|
||||
expandedTitle="Schließen"
|
||||
>
|
||||
|
|
@ -33,58 +31,56 @@
|
|||
</ExpandableToolbar>
|
||||
|
||||
<!-- View Mode Pill - positioned to the LEFT of the FAB -->
|
||||
{#if !isSidebarMode}
|
||||
<div class="view-mode-pill" class:expanded={!isCollapsed}>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'grid'}
|
||||
onclick={() => viewModeStore.setMode('grid')}
|
||||
title={$_('views.grid')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'alphabet'}
|
||||
onclick={() => viewModeStore.setMode('alphabet')}
|
||||
title={$_('views.alphabet')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'network'}
|
||||
onclick={() => viewModeStore.setMode('network')}
|
||||
title={$_('views.network')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="view-mode-pill" class:toolbar-expanded={!isCollapsed}>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'grid'}
|
||||
onclick={() => viewModeStore.setMode('grid')}
|
||||
title={$_('views.grid')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'alphabet'}
|
||||
onclick={() => viewModeStore.setMode('alphabet')}
|
||||
title={$_('views.alphabet')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="view-btn"
|
||||
class:active={viewModeStore.mode === 'network'}
|
||||
onclick={() => viewModeStore.setMode('network')}
|
||||
title={$_('views.network')}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* View Mode Pill - positioned to the LEFT of the FAB (which is at right: calc(50% - 350px - 70px)) */
|
||||
|
|
@ -109,7 +105,7 @@
|
|||
}
|
||||
|
||||
/* When toolbar is expanded, move pill up with FAB */
|
||||
.view-mode-pill.expanded {
|
||||
.view-mode-pill.toolbar-expanded {
|
||||
bottom: calc(70px + 70px + 9px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import type { Contact } from '$lib/api/contacts';
|
||||
import type { SortField } from '$lib/components/SortToggle.svelte';
|
||||
import { newContactModalStore } from '$lib/stores/new-contact-modal.svelte';
|
||||
import { isSidebarMode } from '$lib/stores/navigation';
|
||||
import { contactsFilterStore } from '$lib/stores/filter.svelte';
|
||||
import { contactsSettings } from '$lib/stores/settings.svelte';
|
||||
import AlphabetNavContextMenu from '$lib/components/AlphabetNavContextMenu.svelte';
|
||||
|
|
@ -279,11 +278,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Alphabet FAB (when collapsed) - positioned left of InputBar -->
|
||||
<div
|
||||
class="alphabet-fab-container"
|
||||
class:sidebar-mode={$isSidebarMode}
|
||||
class:toolbar-expanded={isToolbarExpanded}
|
||||
>
|
||||
<div class="alphabet-fab-container" class:toolbar-expanded={isToolbarExpanded}>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<button
|
||||
onclick={toggleAlphabetNav}
|
||||
|
|
@ -315,11 +310,7 @@
|
|||
|
||||
<!-- Alphabet Quick Jump (like DateStrip) - hidden when collapsed -->
|
||||
{#if !isAlphabetNavCollapsed}
|
||||
<div
|
||||
class="alphabet-nav"
|
||||
class:sidebar-mode={$isSidebarMode}
|
||||
class:toolbar-expanded={isToolbarExpanded}
|
||||
>
|
||||
<div class="alphabet-nav" class:toolbar-expanded={isToolbarExpanded}>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="alphabet-nav-container"
|
||||
|
|
@ -583,16 +574,6 @@
|
|||
bottom: calc(210px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
/* When PillNav is in sidebar mode, only InputBar at bottom */
|
||||
.alphabet-nav.sidebar-mode {
|
||||
bottom: calc(70px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
/* Sidebar mode + toolbar expanded */
|
||||
.alphabet-nav.sidebar-mode.toolbar-expanded {
|
||||
bottom: calc(140px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.alphabet-nav-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -726,11 +707,6 @@
|
|||
left 0.2s ease;
|
||||
}
|
||||
|
||||
/* Sidebar mode - InputBar is 700px wide, position accordingly */
|
||||
.alphabet-fab-container.sidebar-mode {
|
||||
left: calc(50% - 350px - 8px - 54px); /* Left of 700px InputBar */
|
||||
}
|
||||
|
||||
/* Responsive positioning for FAB */
|
||||
@media (max-width: 900px) {
|
||||
.alphabet-fab-container {
|
||||
|
|
@ -743,15 +719,6 @@
|
|||
bottom: calc(140px + 9px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
/* Sidebar mode */
|
||||
.alphabet-fab-container.sidebar-mode {
|
||||
bottom: calc(9px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.alphabet-fab-container.sidebar-mode.toolbar-expanded {
|
||||
bottom: calc(70px + 9px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.alphabet-fab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -25,10 +25,6 @@
|
|||
} from '@manacore/shared-theme';
|
||||
import type { ThemeVariant } from '@manacore/shared-theme';
|
||||
import { filterHiddenNavItems } from '@manacore/shared-theme';
|
||||
import {
|
||||
isSidebarMode as sidebarModeStore,
|
||||
isNavCollapsed as collapsedStore,
|
||||
} from '$lib/stores/navigation';
|
||||
import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
|
||||
import { getPillAppItems } from '@manacore/shared-branding';
|
||||
import { setLocale, supportedLocales } from '$lib/i18n';
|
||||
|
|
@ -68,11 +64,8 @@
|
|||
|
||||
let { children } = $props();
|
||||
|
||||
let isSidebarMode = $state(false);
|
||||
let isCollapsed = $state(false);
|
||||
|
||||
// Show toolbar only on main contacts page
|
||||
const showContactsToolbar = $derived($page.url.pathname === '/' && !isSidebarMode);
|
||||
const showContactsToolbar = $derived($page.url.pathname === '/');
|
||||
|
||||
// Check if toolbar is expanded
|
||||
const isToolbarExpanded = $derived(
|
||||
|
|
@ -80,9 +73,7 @@
|
|||
);
|
||||
|
||||
// Dynamic bottom offset based on toolbar state
|
||||
const inputBarBottomOffset = $derived(
|
||||
isSidebarMode ? '0px' : isToolbarExpanded ? '140px' : '70px'
|
||||
);
|
||||
const inputBarBottomOffset = $derived(isToolbarExpanded ? '140px' : '70px');
|
||||
|
||||
// Use theme store's isDark directly
|
||||
let isDark = $derived(theme.isDark);
|
||||
|
|
@ -181,22 +172,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function handleModeChange(isSidebar: boolean) {
|
||||
isSidebarMode = isSidebar;
|
||||
sidebarModeStore.set(isSidebar);
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('contacts-nav-sidebar', String(isSidebar));
|
||||
}
|
||||
}
|
||||
|
||||
function handleCollapsedChange(collapsed: boolean) {
|
||||
isCollapsed = collapsed;
|
||||
collapsedStore.set(collapsed);
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('contacts-nav-collapsed', String(collapsed));
|
||||
}
|
||||
}
|
||||
|
||||
function handleToggleTheme() {
|
||||
theme.toggleMode();
|
||||
}
|
||||
|
|
@ -295,28 +270,6 @@
|
|||
} catch (e) {
|
||||
console.error('Failed to load tags:', e);
|
||||
}
|
||||
|
||||
// Initialize sidebar mode from localStorage
|
||||
try {
|
||||
const savedSidebar = localStorage?.getItem('contacts-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('contacts-nav-collapsed');
|
||||
if (savedCollapsed === 'true') {
|
||||
isCollapsed = true;
|
||||
collapsedStore.set(true);
|
||||
}
|
||||
} catch {
|
||||
// localStorage not available
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -327,7 +280,7 @@
|
|||
<div class="layout-container">
|
||||
<!-- UI Elements (hidden in immersive mode) -->
|
||||
{#if !contactsSettings.immersiveModeEnabled}
|
||||
<!-- Floating/Sidebar Pill Navigation (at bottom) -->
|
||||
<!-- Floating Pill Navigation (at bottom) -->
|
||||
<PillNavigation
|
||||
items={navItems}
|
||||
currentPath={$page.url.pathname}
|
||||
|
|
@ -335,10 +288,6 @@
|
|||
homeRoute="/"
|
||||
onToggleTheme={handleToggleTheme}
|
||||
{isDark}
|
||||
{isSidebarMode}
|
||||
onModeChange={handleModeChange}
|
||||
{isCollapsed}
|
||||
onCollapsedChange={handleCollapsedChange}
|
||||
desktopPosition="bottom"
|
||||
showThemeToggle={true}
|
||||
showThemeVariants={true}
|
||||
|
|
@ -381,7 +330,7 @@
|
|||
|
||||
<!-- Contacts Toolbar (FAB + expandable bar) - only on main page -->
|
||||
{#if showContactsToolbar}
|
||||
<ContactsToolbar {isSidebarMode} contacts={contactsStore.contacts} />
|
||||
<ContactsToolbar contacts={contactsStore.contacts} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
|
|
@ -391,11 +340,9 @@
|
|||
onToggle={() => contactsSettings.toggleImmersiveMode()}
|
||||
/>
|
||||
|
||||
<!-- Main Content with dynamic padding based on nav mode -->
|
||||
<!-- Main Content -->
|
||||
<main
|
||||
class="main-content bg-background"
|
||||
class:sidebar-mode={isSidebarMode && !isCollapsed}
|
||||
class:floating-mode={!isSidebarMode}
|
||||
class:immersive={contactsSettings.immersiveModeEnabled}
|
||||
>
|
||||
<div class="content-wrapper" class:immersive={contactsSettings.immersiveModeEnabled}>
|
||||
|
|
@ -429,11 +376,6 @@
|
|||
padding-bottom: calc(150px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* Floating nav mode - nav is at bottom, no top padding needed */
|
||||
.main-content.floating-mode {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Extra bottom padding on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
|
|
@ -441,11 +383,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Sidebar mode - add left padding for sidebar nav */
|
||||
.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