Ilia Mashkov
7ddf232e3a
Convert the eager layoutManager singleton to getLayoutManager() (+ __resetLayoutManager for tests), so its persisted layout preference is read on first access rather than at module load. Update the model barrels and consumers (LayoutSwitch, SampleListSection, SampleList) with $derived reads; the LayoutSwitch test resolves via the accessor.
41 lines
1016 B
Svelte
41 lines
1016 B
Svelte
<!--
|
|
Component: LayoutSwitch
|
|
Toggles between list and grid layout modes
|
|
-->
|
|
<script lang="ts">
|
|
import { ButtonGroup } from '$shared/ui';
|
|
import { IconButton } from '$shared/ui';
|
|
import GridIcon from '@lucide/svelte/icons/layout-grid';
|
|
import ListIcon from '@lucide/svelte/icons/stretch-horizontal';
|
|
import { getLayoutManager } from '../../model';
|
|
|
|
interface Props {
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
class?: string;
|
|
}
|
|
|
|
const { class: className }: Props = $props();
|
|
|
|
const layoutManager = getLayoutManager();
|
|
const mode = $derived(layoutManager.mode);
|
|
|
|
function handleClick() {
|
|
layoutManager.toggleMode();
|
|
}
|
|
</script>
|
|
|
|
<ButtonGroup class={className}>
|
|
<IconButton active={mode === 'list'} onclick={handleClick}>
|
|
{#snippet icon()}
|
|
<ListIcon class="size-4" />
|
|
{/snippet}
|
|
</IconButton>
|
|
<IconButton active={mode === 'grid'} onclick={handleClick}>
|
|
{#snippet icon()}
|
|
<GridIcon class="size-4" />
|
|
{/snippet}
|
|
</IconButton>
|
|
</ButtonGroup>
|