ADD: Nicer list rendering

Author: Robert-K

package.json

@@ -26,7 +26,9 @@
     "@tauri-apps/cli": "^2.2.5",
     "@types/pako": "^2.0.3",
     "autoprefixer": "^10.4.20",
+    "bits-ui": "1.0.0-next.78",
     "clsx": "^2.1.1",
+    "lucide-svelte": "^0.474.0",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tailwind-merge": "^2.6.0",

pnpm-lock.yaml

@@ -5,7 +5,7 @@
   "identifier": "de.kosro.splicerr",
   "build": {
     "beforeDevCommand": "pnpm dev",
-    "devUrl": "http://localhost:1420",
+    "devUrl": "http://localhost:1337",
     "beforeBuildCommand": "pnpm build",
     "frontendDist": "../build"
   },

src-tauri/tauri.conf.json

@@ -74,6 +74,13 @@
   }
 }
 
+@layer base {
+  @font-face {
+    font-family: Inter;
+    src: url('/fonts/Inter-Regular.woff2') format('woff2');
+  }
+}
+
 html,
 body {
     overflow: hidden;

src/app.css

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex select-none items-center rounded-md border px-1 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+				outline: "text-foreground",
+				text:
+				"text-muted-foreground hover:bg-secondary/80 border-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";