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>

src/lib/content/index.ts

@@ -12,6 +12,7 @@ import researchData from '#content/projects/research.json';
 import organizationsData from '#content/projects/organizations.json';
 import tcgDecksData from '#content/tcgDecks.json';
 import booksData from '#content/books.json';
+import wallpapersData from '#content/wallpapers.json';
 import type {
 	AboutContent,
 	BlogSettings,
@@ -25,7 +26,8 @@ import type {
 	ProjectCategory,
 	ProjectCategoryId,
 	ResearchGroup,
-	TcgDeck
+	TcgDeck,
+	Wallpaper
 } from './types';
 
 export type * from './types';
@@ -40,6 +42,7 @@ export const playlist: Playlist = musicData;
 export const researchGroups: ResearchGroup[] = researchData;
 export const tcgDecks: TcgDeck[] = tcgDecksData as TcgDeck[];
 export const books: Book[] = booksData as Book[];
+export const wallpapers: Wallpaper[] = wallpapersData as Wallpaper[];
 
 function featuredFirst(projects: Project[]): Project[] {
 	return [...projects].sort((first, second) => Number(!!second.featured) - Number(!!first.featured));

src/lib/content/types.ts

@@ -251,3 +251,10 @@ export interface TcgDeck {
 	name: string;
 	cards: DeckCard[];
 }
+
+export interface Wallpaper {
+	id: string;
+	name: string;
+	image: string;
+	thumb: string;
+}

src/lib/theme/wallpaper.svelte.ts

@@ -0,0 +1,52 @@
+import { wallpapers, type Wallpaper } from '#lib/content';
+
+const wallpaperStorageKey = 'wallpaper';
+
+function readStoredWallpaperId(): string | null {
+	try {
+		return localStorage.getItem(wallpaperStorageKey);
+	} catch {
+		return null;
+	}
+}
+
+function storeWallpaperId(wallpaperId: string | null) {
+	try {
+		if (wallpaperId) localStorage.setItem(wallpaperStorageKey, wallpaperId);
+		else localStorage.removeItem(wallpaperStorageKey);
+	} catch {}
+}
+
+function findWallpaper(wallpaperId: string | null): Wallpaper | null {
+	return wallpapers.find((wallpaper) => wallpaper.id === wallpaperId) ?? null;
+}
+
+function applyWallpaper(wallpaper: Wallpaper | null) {
+	const rootStyle = document.documentElement.style;
+	if (wallpaper) rootStyle.setProperty('--wallpaper', `url('${wallpaper.image}')`);
+	else rootStyle.removeProperty('--wallpaper');
+}
+
+class WallpaperState {
+	currentId = $state<string | null>(null);
+
+	restore() {
+		const stored = findWallpaper(readStoredWallpaperId());
+		this.currentId = stored?.id ?? null;
+		applyWallpaper(stored);
+	}
+
+	set(wallpaperId: string | null) {
+		const wallpaper = findWallpaper(wallpaperId);
+		this.currentId = wallpaper?.id ?? null;
+		applyWallpaper(wallpaper);
+		storeWallpaperId(this.currentId);
+	}
+
+	shuffle() {
+		const choices = wallpapers.filter((wallpaper) => wallpaper.id !== this.currentId);
+		if (choices.length) this.set(choices[Math.floor(Math.random() * choices.length)].id);
+	}
+}
+
+export const wallpaperState = new WallpaperState();

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 	import { desktop, profile } from '#lib/content';
 	import { buildThemeStylesheet } from '#lib/theme/stylesheet';
 	import { themeState } from '#lib/theme/theme.svelte';
+	import { wallpaperState } from '#lib/theme/wallpaper.svelte';
 	import { pageWindowId, windowManager } from '#lib/desktop/windows.svelte';
 	import { handleKeybind } from '#lib/desktop/keybinds';
 	import { handleImageClick } from '#lib/desktop/imageViewer';
@@ -27,6 +28,7 @@
 
 	onMount(() => {
 		themeState.restore();
+		wallpaperState.restore();
 		const isWideScreen = window.innerWidth >= 768;
 		if (!pageOpen && isWideScreen && desktop.startupCommand) windowManager.openTerminal(desktop.startupCommand, { floating: true });
 		window.addEventListener('click', handleImageClick, true);