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

feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
Conversation 0 Commits 129 Files Changed 106 +18 -36
11 changed files with 18 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 75ea5ab382 - Show all commits

4
dprint.json
View File

@@ -16,7 +16,7 @@
"https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm"
],
"typescript": {
"lineWidth": 100,
"lineWidth": 120,
"indentWidth": 4,
"useTabs": false,
"semiColons": "prefer",
@@ -41,7 +41,7 @@
"lineWidth": 100
},
"markup": {
"printWidth": 100,
"printWidth": 120,
"indentWidth": 4,
"useTabs": false,
"quotes": "double",

6
src/entities/Font/lib/normalize/normalize.test.ts
View File

@@ -24,11 +24,9 @@ describe('Font Normalization', () => {
subsets: ['latin', 'latin-ext'],
files: {
regular: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2',
'700':
'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1Mu72xWUlvAx05IsDqlA.woff2',
'700': 'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1Mu72xWUlvAx05IsDqlA.woff2',
italic: 'https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzI.woff2',
'700italic':
'https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2',
'700italic': 'https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2',
},
version: 'v30',
lastModified: '2022-01-01',

4
src/features/GetFonts/lib/mapper/mapManagerToParams.ts
View File

@@ -26,9 +26,7 @@ import type { FilterManager } from '../filterManager/filterManager.svelte';
*/
export function mapManagerToParams(manager: FilterManager): Partial<ProxyFontsParams> {
const providers = manager.getGroup('providers')?.instance.selectedProperties.map(p => p.value);
const categories = manager.getGroup('categories')?.instance.selectedProperties.map(p =>
p.value
);
const categories = manager.getGroup('categories')?.instance.selectedProperties.map(p => p.value);
const subsets = manager.getGroup('subsets')?.instance.selectedProperties.map(p => p.value);
return {

4
src/routes/Page.svelte
View File

@@ -32,7 +32,7 @@ $effect(() => {
</script>
<!-- Font List -->
<div class="p-2 h-full flex flex-col gap-3 overflow-hidden">
<div class="p-2 h-full flex flex-col gap-3">
{#key isEmptyScreen}
<div
class={cn(
@@ -53,7 +53,7 @@ $effect(() => {
</div>
{/key}
<div class="my-2 mx-10">
<div class="my-6">
<ComparisonSlider />
</div>

3
src/shared/api/api.ts
View File

@@ -56,6 +56,5 @@ export const api = {
body: JSON.stringify(body),
}),
delete: <T>(url: string, options?: RequestInit) =>
request<T>(url, { ...options, method: 'DELETE' }),
delete: <T>(url: string, options?: RequestInit) => request<T>(url, { ...options, method: 'DELETE' }),
};

6
src/shared/shadcn/ui/badge/badge.svelte
View File

@@ -9,10 +9,8 @@ export const badgeVariants = tv({
'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
variants: {
variant: {
default:
'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
secondary:
'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
destructive:
'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',

3
src/shared/shadcn/ui/sidebar/sidebar-provider.svelte
View File

@@ -33,8 +33,7 @@ const sidebar = setSidebar({
onOpenChange(value);
// This sets the cookie to keep the sidebar state.
document.cookie =
`${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
});
</script>

7
src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
View File

@@ -59,8 +59,7 @@ const hasSelection = $derived(selectedCount > 0);
class={buttonVariants({
variant: 'ghost',
size: 'sm',
class:
'flex-1 justify-between gap-2 hover:bg-transparent focus-visible:ring-1 focus-visible:ring-ring',
class: 'flex-1 justify-between gap-2 hover:bg-transparent focus-visible:ring-1 focus-visible:ring-ring',
})}
>
<h4 class="text-sm font-semibold">{displayedLabel}</h4>
@@ -107,9 +106,7 @@ const hasSelection = $derived(selectedCount > 0);
active:scale-[0.98] active:transition-transform active:duration-75
"
>
<!--
Checkbox handles toggle, styled for accessibility with focus rings
-->
<!-- Checkbox handles toggle, styled for accessibility with focus rings -->
<Checkbox
id={property.id}
bind:checked={property.selected}

3
src/shared/ui/ExpandableWrapper/ExpandableWrapper.stories.svelte
View File

@@ -32,8 +32,7 @@ const { Story } = defineMeta({
parameters: {
docs: {
description: {
component:
'Animated styled wrapper for content that can be expanded and collapsed.',
component: 'Animated styled wrapper for content that can be expanded and collapsed.',
},
story: { inline: false }, // Render stories in iframe for state isolation
},

3
src/shared/ui/VirtualList/VirtualList.svelte
View File

@@ -55,8 +55,7 @@ interface Props {
children: Snippet<[{ item: T; index: number; isVisible: boolean; proximity: number }]>;
}
let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
Props = $props();
let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }: Props = $props();
const virtualizer = createVirtualizer(() => ({
count: items.length,

11
src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte
View File

@@ -138,20 +138,15 @@ $effect(() => {
});
</script>
{#snippet renderLine(line: LineData, lineIndex: number)}
{#snippet renderLine(line: LineData, index: number)}
<div
bind:this={lineElements[lineIndex]}
bind:this={lineElements[index]}
class="relative flex w-full justify-center items-center whitespace-nowrap"
style:height={`${heightControl.value}em`}
style:line-height={`${heightControl.value}em`}
>
{#each line.text.split('') as char, charIndex}
{@const { proximity, isPast } = charComparison.getCharState(
charIndex,
sliderPos,
lineElements[lineIndex],
container,
),}
{@const { proximity, isPast } = charComparison.getCharState(charIndex, sliderPos, lineElements[index], container)}
<!--
Single Character Span
- Font Family switches based on `isPast`