glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/ux-improvements #26

Merged
ilia merged 73 commits from feature/ux-improvements into main 2026-02-18 14:43:05 +00:00
Conversation 0 Commits 73 Files Changed 52 +52 -25
1 changed files with 52 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 23831efbe6 - Show all commits

77
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
View File

@@ -8,10 +8,13 @@
<script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { getFontUrl } from '$entities/Font/lib';
import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { SidebarMenu } from '$shared/ui';
import Drawer from '$shared/ui/Drawer/Drawer.svelte';
import { comparisonStore } from '$widgets/ComparisonSlider/model';
import ComparisonList from './FontList.svelte';
import { getContext } from 'svelte';
import FontList from './FontList.svelte';
import ToggleMenuButton from './ToggleMenuButton.svelte';
import TypographyControls from './TypographyControls.svelte';
@@ -33,6 +36,7 @@ const fontA = $derived(comparisonStore.fontA);
const fontB = $derived(comparisonStore.fontB);
const typography = $derived(comparisonStore.typography);
let menuWrapper = $state<HTMLElement | null>(null);
const responsive = getContext<ResponsiveManager>('responsive');
$effect(() => {
if (!fontA || !fontB) {
@@ -64,28 +68,51 @@ $effect(() => {
});
</script>
<SidebarMenu
class={cn(
'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
'relative h-full transition-all duration-700 ease-out',
className,
)}
bind:visible
bind:wrapper={menuWrapper}
onClickOutside={handleToggle}
>
{#snippet action()}
<!-- Always-visible mode switch -->
<div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
<ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
</div>
{/snippet}
<div class="h-2/3 overflow-hidden">
<ComparisonList />
</div>
{#if responsive.isMobile}
<Drawer>
{#snippet trigger({ onClick })}
<div class={cn('absolute bottom-2 inset-x-0 z-50')}>
<ToggleMenuButton bind:isActive={visible} {onClick} />
</div>
{/snippet}
{#snippet content({ className })}
<div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
<div class="h-full overflow-hidden">
<FontList />
</div>
<div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
<div class="mr-4 sm:mr-6">
<TypographyControls />
</div>
</SidebarMenu>
<div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10 flex-shrink-0">
</div>
<div class="mr-4 sm:mr-6 flex-shrink-0">
<TypographyControls />
</div>
</div>
{/snippet}
</Drawer>
{:else}
<SidebarMenu
class={cn(
'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
'relative h-full transition-all duration-700 ease-out',
className,
)}
bind:visible
bind:wrapper={menuWrapper}
onClickOutside={handleToggle}
>
{#snippet action()}
<!-- Always-visible mode switch -->
<div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
<ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
</div>
{/snippet}
<div class="h-2/3 overflow-hidden">
<FontList />
</div>
<div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
<div class="mr-4 sm:mr-6">
<TypographyControls />
</div>
</SidebarMenu>
{/if}