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

chore(app): update config, dependencies, storybook, and app shell

Browse Source
This commit is contained in:
Ilia Mashkov
2026-03-02 22:21:19 +03:00
parent 55e2efc222
commit 87bba388dc
11 changed files with 369 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/App.svelte
View File

@@ -1,3 +1,7 @@
<!--
Component: App
Application root with query provider and layout
-->
<script lang="ts">
/**
* App Component

3
src/app/providers/QueryProvider.svelte
View File

@@ -11,6 +11,9 @@ import { QueryClientProvider } from '@tanstack/svelte-query';
import type { Snippet } from 'svelte';
interface Props {
/**
* Content snippet
*/
children?: Snippet;
}

121
src/app/styles/app.css
View File

@@ -306,81 +306,72 @@
animation: nudge 10s ease-in-out infinite;
}
* {
scrollbar-width: thin;
scrollbar-color: hsl(0 0% 70% / 0.4) transparent;
/* ============================================
SCROLLBAR STYLES
============================================ */
/* ---- Modern API: color + width (Chrome 121+, FF 64+) ---- */
@supports (scrollbar-width: auto) {
* {
scrollbar-width: thin;
scrollbar-color: hsl(0 0% 70% / 0.4) var(--color-surface);
}
.dark * {
scrollbar-color: hsl(0 0% 40% / 0.5) var(--color-surface);
}
}
.dark * {
scrollbar-color: hsl(0 0% 40% / 0.5) transparent;
/* ---- Webkit layer: runs ON TOP in Chrome, standalone in old Safari ---- */
/* Handles things scrollbar-width can't: hiding buttons, exact sizing */
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button {
display: none; /* kills arrows */
}
::-webkit-scrollbar-track {
background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
background: hsl(0 0% 70% / 0.4);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(0 0% 50% / 0.6);
}
::-webkit-scrollbar-thumb:active {
background: hsl(0 0% 40% / 0.8);
}
::-webkit-scrollbar-corner {
background: var(--color-surface);
}
.dark ::-webkit-scrollbar-thumb { background: hsl(0 0% 40% / 0.5); }
.dark ::-webkit-scrollbar-thumb:hover { background: hsl(0 0% 55% / 0.6); }
.dark ::-webkit-scrollbar-thumb:active { background: hsl(0 0% 65% / 0.7); }
}
/* ---- Webkit / Blink ---- */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: hsl(0 0% 70% / 0);
border-radius: 3px;
transition: background 0.2s ease;
}
/* Show thumb when container is hovered or actively scrolling */
:hover > ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover,
*:hover::-webkit-scrollbar-thumb {
background: hsl(0 0% 70% / 0.4);
}
::-webkit-scrollbar-thumb:hover {
background: hsl(0 0% 50% / 0.6);
}
::-webkit-scrollbar-thumb:active {
background: hsl(0 0% 40% / 0.8);
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* Dark mode */
.dark ::-webkit-scrollbar-thumb {
background: hsl(0 0% 40% / 0);
}
.dark :hover > ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb:hover,
.dark *:hover::-webkit-scrollbar-thumb {
background: hsl(0 0% 40% / 0.5);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: hsl(0 0% 55% / 0.6);
}
.dark ::-webkit-scrollbar-thumb:active {
background: hsl(0 0% 65% / 0.7);
}
/* ---- Behavior ---- */
* {
html {
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
html { scroll-behavior: auto; }
}
body {
overscroll-behavior-y: none;
}
.scroll-stable {
scrollbar-gutter: stable;
}

57
src/app/ui/Layout.svelte
View File

@@ -1,3 +1,7 @@
<!--
Component: Layout
Application shell with providers and page wrapper
-->
<script lang="ts">
/**
* Layout Component
@@ -11,13 +15,9 @@
* - Footer area (currently empty, reserved for future use)
*/
import { BreadcrumbHeader } from '$entities/Breadcrumb';
import {
ThemeSwitch,
themeManager,
} from '$features/ChangeAppTheme';
import { themeManager } from '$features/ChangeAppTheme';
import GD from '$shared/assets/GD.svg';
import { ResponsiveProvider } from '$shared/lib';
import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
@@ -27,36 +27,16 @@ import {
} from 'svelte';
interface Props {
/**
* Content snippet
*/
children: Snippet;
}
let { children }: Props = $props();
let fontsReady = $state(false);
let fontsReady = $state(true);
const theme = $derived(themeManager.value);
/**
* Sets fontsReady flag to true when font for the page logo is loaded.
*/
onMount(async () => {
if (!('fonts' in document)) {
fontsReady = true;
return;
}
const required = ['100'];
const missing = required.filter(
w => !document.fonts.check(`${w} 1em Barlow`),
);
if (missing.length > 0) {
await Promise.all(
missing.map(w => document.fonts.load(`${w} 1em Barlow`)),
);
}
fontsReady = true;
});
onMount(() => themeManager.init());
onDestroy(() => themeManager.destroy());
</script>
@@ -94,30 +74,29 @@ onDestroy(() => themeManager.destroy());
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
/>
</noscript>
<title>Compare Typography & Typefaces | GlyphDiff</title>
<title>GlyphDiff | Typography & Typefaces</title>
</svelte:head>
<ResponsiveProvider>
<div
id="app-root"
class={cn(
'min-h-screen flex flex-col bg-surface dark:bg-dark-bg',
'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg',
theme === 'dark' ? 'dark' : '',
)}
>
<header>
<BreadcrumbHeader />
<ThemeSwitch />
</header>
<!-- <ScrollArea class="h-screen w-screen"> -->
<main class="flex-1 w-full mx-auto px-4 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative">
<TooltipProvider>
{#if fontsReady}
{@render children?.()}
{/if}
</TooltipProvider>
</main>
<!-- <main class="flex-1 w-full mx-auto relative"> -->
<TooltipProvider>
{#if fontsReady}
{@render children?.()}
{/if}
</TooltipProvider>
<!-- </main> -->
<!-- </ScrollArea> -->
<footer></footer>
</div>