Add more info to album page

package.json

@@ -38,11 +38,12 @@
   "type": "module",
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
-    "bits-ui": "^0.21.4",
+    "bits-ui": "^0.21.7",
     "clsx": "^2.1.0",
     "formsnap": "^1.0.0",
     "js-cookie": "^3.0.5",
     "radix-icons-svelte": "^1.2.1",
+    "svelte-radix": "^1.1.0",
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "^0.2.1",
     "ts-md5": "^1.3.1",

src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import Check from "svelte-radix/Check.svelte";
+	import Minus from "svelte-radix/Minus.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	on:click
+	{...$$restProps}
+>
+	<CheckboxPrimitive.Indicator
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isIndeterminate}
+			<Minus class="h-3.5 w-3.5" />
+		{:else}
+			<Check class={cn("h-3.5 w-3.5", !isChecked && "text-transparent")} />
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>

src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

src/routes/album/[albumId]/+page.svelte

@@ -14,6 +14,7 @@
     import {Button} from "$lib/components/ui/button";
     import {shuffle} from "$lib/utilities";
     import {displayTime} from "$lib/utilities.js";
+    import {Checkbox} from "$lib/components/ui/checkbox";
     class AlbumData {
         data: AlbumID3WithSongs = $state({})
     }
@@ -123,6 +124,19 @@
         }
     }
 
+    async function toggleStarred() {
+        const parameters = [
+            {key: "albumId", value: album.data.id}
+        ];
+        if (album.data.starred) {
+            await OpenSubsonic.get("unstar", parameters);
+        }
+        else {
+            await OpenSubsonic.get("star", parameters)
+        }
+        fetchAlbumInfos();
+    }
+
     onMount(() => {
         fetchAlbumInfos();
     })
@@ -140,6 +154,9 @@
             <p>{album.info.lastFmUrl}</p>
             <p>{album.info.musicBrainzId}</p>
             <p>Length: {displayTime(album.data.duration)}</p>
+            <p>{album.data.genre}</p>
+            <p>{"*".repeat(album.data.userRating)}</p>
+            <Checkbox id="starred" checked={album.data.starred} onclick={() => toggleStarred()} />
         </div>
     </div>
     <div class="flex">

yarn.lock

@@ -805,10 +805,10 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
-bits-ui@^0.21.4:
-  version "0.21.4"
-  resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.21.4.tgz#dac98b85f8a5bd01a12169ca1f2ce45a4aa63d1f"
-  integrity sha512-IL+7s19GW561jwkeYk23dwkTfQ9606I062qqv2AtjCdhhIdoOEJNVBX0kjP5xefSaS6ojL0HGG54att0aRTcAQ==
+bits-ui@^0.21.7:
+  version "0.21.7"
+  resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.21.7.tgz#bd43ee86194802396823880385e7575fbd2b3c3a"
+  integrity sha512-1PKp90ly1R6jexIiAUj1Dk4u2pln7ok+L8Vc0rHMY7pi7YZvadFNZvkp1G5BtmL8qh2xsn4MVNgKjPAQMCxW0A==
   dependencies:
     "@internationalized/date" "^3.5.1"
     "@melt-ui/svelte" "0.76.2"
@@ -2286,6 +2286,11 @@ svelte-preprocess@^5.1.3:
     sorcery "^0.11.0"
     strip-indent "^3.0.0"
 
+svelte-radix@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-radix/-/svelte-radix-1.1.0.tgz#5fb0c8d37422ea4863649180f6277af2d8b70dd3"
+  integrity sha512-kyE9wZiJV937INGb+wiBkAjmGtQUUYRPkVL2Q+/gj+9Vog1Ewd2wNvNmpNMUd+c+euxoc5u5YZMuCUgky9EUPw==
+
 svelte@^5.0.0-next:
   version "5.0.0-next.115"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.0.0-next.115.tgz#43fe80829eb6c783e891888a7df07a5d8f854a64"