feat: file badge

src/app.scss

@@ -36,6 +36,7 @@
 	--fg: hsl(0, 0%, 0%);
 	--fg-muted: hsl(0, 0%, 50%);
 	--fg-on-accent: hsl(0, 0%, 0%);
+	--fg-on-badge: hsl(0, 0%, 100%);
 
 	// backgrounds
 	--bg: hsl(0, 0%, 95%);
@@ -59,6 +60,7 @@
 	--bg-panel-accented: hsl(300, 25%, 91%);
 	--bg-separator: hsl(0, 0%, 88%);
 	--bg-button: var(--bg-panel-accented);
+	--bg-badge: hsl(0, 0%, 0%);
 
 	--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
 }
@@ -71,6 +73,7 @@
 	--fg: hsl(0, 0%, 100%);
 	--fg-muted: hsl(0, 0%, 50%);
 	--fg-on-accent: hsl(0, 0%, 0%);
+	--fg-on-badge: hsl(0, 0%, 0%);
 
 	// backgrounds
 	--bg: hsl(220, 5%, 12%);
@@ -93,6 +96,7 @@
 	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
 	--bg-panel-alt: hsl(220, 6%, 25%);
 	--bg-separator: hsl(220, 4%, 28%);
+	--bg-badge: hsl(0, 0%, 100%);
 
 	--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
 

src/lib/components/functional/Navbar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount, type SvelteComponentTyped } from "svelte";
 	import Panel from "../visual/Panel.svelte";
 	import Logo from "../visual/svg/Logo.svelte";
 	import clsx from "clsx";
@@ -15,6 +14,7 @@
 			url: string;
 			activeMatch: (pathname: string) => boolean;
 			icon: any;
+			badge?: number;
 		}[];
 	};
 
@@ -33,11 +33,10 @@
 			},
 		)}
 	>
-		<Icon />
 		<div class="grid grid-rows-1 grid-cols-1">
 			{#key item.name}
-				<p
+				<div
-					class="row-start-1 col-start-1 font-medium"
+					class="w-full row-start-1 col-start-1 h-full flex items-center justify-center gap-3"
 					in:blur={{
 						blurMultiplier: 6,
 						duration,
@@ -57,8 +56,30 @@
 						},
 					}}
 				>
+					<div class="relative">
+						<Icon />
+						{#if item.badge}
+							<div
+								class="absolute -top-1 font-display -right-1 w-fit px-1.5 h-4 rounded-full bg-badge text-on-badge flex items-center justify-center font-medium"
+								style="font-size: 0.7rem;"
+								transition:blur={{
+									blurMultiplier: 4,
+									duration,
+									easing: quintOut,
+									scale: {
+										start: 0.5,
+										end: 1,
+									},
+								}}
+							>
+								{item.badge}
+							</div>
+						{/if}
+					</div>
+					<p class=" font-medium">
 						{item.name}
 					</p>
+				</div>
 			{/key}
 		</div>
 	</a>

src/routes/+layout.svelte

@@ -41,6 +41,7 @@
 			url: string;
 			activeMatch: (pathname: string) => boolean;
 			icon: any;
+			badge?: number;
 		}[]
 	>([
 		{
@@ -50,13 +51,11 @@
 			icon: UploadIcon,
 		},
 		{
-			name:
+			name: "Convert",
-				files.files.length > 0
-					? `Convert (${files.files.length})`
-					: `Convert`,
 			url: "/convert",
 			activeMatch: (pathname) => pathname === "/convert",
 			icon: RefreshCw,
+			badge: files.files.length,
 		},
 		{
 			name: "Settings",
@@ -105,7 +104,7 @@
 		></script>{/if}
 </svelte:head>
 
-<div class="absolute top-8 left-0 w-full flex justify-center">
+<div class="absolute top-8 left-0 w-screen flex justify-center">
 	<div class="flex flex-col gap-4">
 		<Navbar {items} />
 		{#if items

tailwind.config.ts

@@ -11,6 +11,7 @@ export default {
 				separator: "var(--bg-separator)",
 				button: "var(--bg-button)",
 				"panel-alt": "var(--bg-panel-alt)",
+				badge: "var(--bg-badge)",
 			},
 			borderColor: {
 				separator: "var(--bg-separator)",
@@ -19,6 +20,7 @@ export default {
 				foreground: "var(--fg)",
 				muted: "var(--fg-muted)",
 				"on-accent": "var(--fg-on-accent)",
+				"on-badge": "var(--fg-on-badge)",
 			},
 			colors: {
 				accent: "var(--accent)",