feat: SyncIndicator in navbar, cancel button, and responsive polish

Add SyncIndicator to navbar showing sync progress from any page.
Add Cancel button to settings sync section with fire-and-forget sync.
Improve mobile layout with responsive padding and grid breakpoints,
add tabular-nums to prevent number-jitter in sync counters.

Author: arcaartem

src/lib/components/layout/NavBar.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { resolve } from '$app/paths';
 	import { Button } from '$lib/components/ui/button';
+	import SyncIndicator from './SyncIndicator.svelte';
 
 	const searchHref = resolve('/search');
 	const settingsHref = resolve('/settings');
@@ -15,6 +16,7 @@
 <nav class="bg-background border-b">
 	<div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
 		<a href={searchHref} class="text-lg font-semibold tracking-tight">Stargazer</a>
+		<SyncIndicator />
 		<div class="flex gap-1">
 			{#each navItems as item (item.href)}
 				<Button

src/lib/components/search/RepoDetail.svelte

@@ -63,7 +63,7 @@
 					<Separator />
 
 					<!-- Stats -->
-					<div class="grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
+					<div class="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3 md:grid-cols-4">
 						<div>
 							<div class="text-muted-foreground">Stars</div>
 							<div class="font-medium">{formatNumber(repo.stargazersCount)}</div>

src/lib/components/settings/SyncProgress.svelte

@@ -36,7 +36,7 @@
 		<div class="flex items-center justify-between text-sm">
 			<span class="font-medium">{phaseLabel}</span>
 			{#if progress.total > 0}
-				<span class="text-muted-foreground">{progress.current}/{progress.total}</span>
+				<span class="text-muted-foreground tabular-nums">{progress.current}/{progress.total}</span>
 			{/if}
 		</div>
 
@@ -49,6 +49,6 @@
 			</div>
 		{/if}
 
-		<p class="text-muted-foreground text-sm">{progress.message}</p>
+		<p class="text-muted-foreground text-sm tabular-nums">{progress.message}</p>
 	</div>
 {/if}

src/lib/components/ui/dialog/dialog-content.svelte

@@ -27,7 +27,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-4 shadow-lg duration-200 sm:max-w-lg sm:p-6',
 			className
 		)}
 		{...restProps}

src/lib/components/ui/sheet/sheet-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from 'tailwind-variants';
 	export const sheetVariants = tv({
-		base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+		base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 p-4 sm:p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
 		variants: {
 			side: {
 				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',

src/routes/settings/+page.svelte

@@ -22,8 +22,7 @@
 
 	async function handleSync() {
 		await settingsStore.save();
-		await syncStore.startSync();
-		await settingsStore.load();
+		syncStore.startSync();
 	}
 
 	async function handleClearData() {
@@ -35,7 +34,7 @@
 	}
 </script>
 
-<div class="mx-auto max-w-2xl space-y-8 p-6">
+<div class="mx-auto max-w-2xl space-y-8 p-3 sm:p-6">
 	<div>
 		<h1 class="text-2xl font-bold">Settings</h1>
 		<p class="text-muted-foreground mt-1 text-sm">
@@ -66,13 +65,17 @@
 	<section class="space-y-4">
 		<h2 class="text-lg font-semibold">Sync</h2>
 
-		<div class="flex items-center gap-4">
+		<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
 			<SyncButton
 				isSyncing={syncStore.isSyncing}
 				disabled={!settingsStore.isValid}
 				onSync={handleSync}
 			/>
 
+			{#if syncStore.isSyncing}
+				<Button variant="outline" size="sm" onclick={() => syncStore.cancel()}>Cancel</Button>
+			{/if}
+
 			{#if syncStore.error}
 				<p class="text-destructive text-sm">{syncStore.error}</p>
 			{/if}
@@ -83,7 +86,7 @@
 		<!-- Stats -->
 		{#if syncStore.lastSyncedAt || syncStore.repoCount > 0}
 			<div class="rounded-lg border p-4">
-				<div class="grid grid-cols-3 gap-4 text-center">
+				<div class="grid grid-cols-1 gap-4 text-center sm:grid-cols-2 md:grid-cols-3">
 					<div>
 						<div class="text-2xl font-bold">{syncStore.repoCount}</div>
 						<div class="text-muted-foreground text-sm">Repositories</div>