Add wallpaper picker and compression script

src/lib/components/shell/Bar.svelte

@@ -4,6 +4,7 @@
 	import Clock from './Clock.svelte';
 	import Workspaces from './Workspaces.svelte';
 	import ThemeMenu from './ThemeMenu.svelte';
+	import WallpaperMenu from './WallpaperMenu.svelte';
 	import DiscordStatus from './DiscordStatus.svelte';
 	import Battery from './Battery.svelte';
 	import Music from './Music.svelte';
@@ -27,6 +28,7 @@
 		<DiscordStatus />
 		<Battery />
 		<Donate />
+		<WallpaperMenu />
 		<ThemeMenu />
 	</div>
 </header>

src/lib/components/shell/PopupCard.svelte

@@ -2,7 +2,12 @@
 	import { focusTrap } from '#lib/ui/focusTrap';
 	import type { Snippet } from 'svelte';
 
-	let { title, onclose, children }: { title: string; onclose: () => void; children: Snippet } = $props();
+	let {
+		title,
+		wide = false,
+		onclose,
+		children
+	}: { title: string; wide?: boolean; onclose: () => void; children: Snippet } = $props();
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape') onclose();
@@ -12,7 +17,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <button class="backdrop" aria-label="Close {title}" onclick={onclose}></button>
-<div class="popup" role="dialog" aria-modal="true" aria-label={title} tabindex="-1" use:focusTrap>
+<div class="popup" class:wide role="dialog" aria-modal="true" aria-label={title} tabindex="-1" use:focusTrap>
 	<div class="popup-title">{title}</div>
 	<div class="popup-body">
 		{@render children()}
@@ -42,6 +47,10 @@
 		animation: window-pop-in 0.15s ease-out;
 	}
 
+	.popup.wide {
+		width: 560px;
+	}
+
 	.popup-title {
 		padding: 0.4rem 0.6rem;
 		background: var(--background);
@@ -58,7 +67,8 @@
 	}
 
 	@media (max-width: 640px) {
-		.popup {
+		.popup,
+		.popup.wide {
 			position: fixed;
 			top: calc(var(--bar-height) + 6px);
 			right: 8px;

src/lib/components/shell/WallpaperMenu.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { wallpapers } from '#lib/content';
+	import { wallpaperState } from '#lib/theme/wallpaper.svelte';
+	import PopupCard from './PopupCard.svelte';
+
+	let open = $state(false);
+	let search = $state('');
+
+	const filtered = $derived(
+		wallpapers.filter((wallpaper) => wallpaper.name.toLowerCase().includes(search.trim().toLowerCase()))
+	);
+</script>
+
+{#if wallpapers.length}
+	<div class="wallpaper-menu">
+		<button class="tray-button" title="Wallpaper" aria-expanded={open} onclick={() => (open = !open)}>
+			<Icon icon="mdi:image-multiple-outline" width="18" />
+		</button>
+
+		{#if open}
+			<PopupCard title="Wallpapers ({wallpapers.length})" wide onclose={() => (open = false)}>
+				<div class="toolbar">
+					<input class="search" type="search" placeholder="search wallpapers" bind:value={search} />
+					<button class="tool" title="Random wallpaper" onclick={() => wallpaperState.shuffle()}>
+						<Icon icon="mdi:shuffle-variant" width="16" />
+					</button>
+					<button
+						class="tool"
+						class:selected={wallpaperState.currentId === null}
+						title="Use the theme's wallpaper"
+						onclick={() => wallpaperState.set(null)}
+					>
+						<Icon icon="mdi:palette-outline" width="16" />
+						<span>theme</span>
+					</button>
+				</div>
+
+				<div class="grid">
+					{#each filtered as wallpaper (wallpaper.id)}
+						<button
+							class="thumb"
+							class:selected={wallpaper.id === wallpaperState.currentId}
+							title={wallpaper.name}
+							onclick={() => wallpaperState.set(wallpaper.id)}
+						>
+							<img src={wallpaper.thumb} alt={wallpaper.name} loading="lazy" decoding="async" />
+							<span class="name">{wallpaper.name}</span>
+						</button>
+					{:else}
+						<span class="empty muted">No wallpapers match "{search}"</span>
+					{/each}
+				</div>
+			</PopupCard>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.wallpaper-menu {
+		position: relative;
+	}
+
+	.toolbar {
+		display: flex;
+		gap: 0.35rem;
+		margin-bottom: 0.35rem;
+	}
+
+	.search {
+		flex: 1;
+		min-width: 0;
+		padding: 0.3rem 0.5rem;
+		background: var(--dark-background);
+		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+		color: var(--foreground);
+		font: inherit;
+		font-size: 0.8rem;
+	}
+
+	.search:focus {
+		border-color: var(--accent);
+		outline: none;
+	}
+
+	.tool {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0 0.5rem;
+		background: none;
+		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+		color: var(--foreground);
+		font-size: 0.78rem;
+	}
+
+	.tool:hover,
+	.tool.selected {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 0.4rem;
+	}
+
+	.thumb {
+		position: relative;
+		aspect-ratio: 16 / 9;
+		padding: 0;
+		overflow: hidden;
+		background: var(--dark-background);
+		border: 2px solid transparent;
+	}
+
+	.thumb:hover {
+		border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+	}
+
+	.thumb.selected {
+		border-color: var(--accent);
+	}
+
+	.thumb img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.name {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		padding: 0.1rem 0.35rem;
+		background: color-mix(in srgb, var(--background) 85%, transparent);
+		font-size: 0.68rem;
+		text-align: left;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		opacity: 0;
+		transition: opacity 0.15s ease;
+	}
+
+	.thumb:hover .name,
+	.thumb:focus-visible .name,
+	.thumb.selected .name {
+		opacity: 1;
+	}
+
+	.empty {
+		grid-column: 1 / -1;
+		padding: 0.5rem;
+		font-size: 0.8rem;
+	}
+
+	@media (max-width: 640px) {
+		.grid {
+			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+		}
+	}
+</style>