website/src/lib/components/shell/WallpaperMenu.svelte

<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>