From 5c32be88c5dc772024814aeb77e2849268ed4baf Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jun 2025 02:50:08 -0700
Subject: [PATCH] Filter updates

---
 src/lib/components/admin/AdminFilters.svelte |  44 ++++++
 src/lib/components/admin/Input.svelte        | 117 ++++++++++-----
 src/lib/components/admin/Select.svelte       |   6 +-
 src/routes/admin/albums/+page.svelte         |  27 ++--
 src/routes/admin/media/+page.svelte          | 144 +++++++------------
 src/routes/admin/posts/+page.svelte          |  27 ++--
 src/routes/admin/projects/+page.svelte       |  72 ++++++----
 7 files changed, 254 insertions(+), 183 deletions(-)
 create mode 100644 src/lib/components/admin/AdminFilters.svelte

diff --git a/src/lib/components/admin/AdminFilters.svelte b/src/lib/components/admin/AdminFilters.svelte
new file mode 100644
index 0000000..577f8f7
--- /dev/null
+++ b/src/lib/components/admin/AdminFilters.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		left?: any
+		right?: any
+	}
+
+	let { left, right }: Props = $props()
+</script>
+
+<div class="admin-filters">
+	<div class="filters-left">
+		{#if left}
+			{@render left()}
+		{/if}
+	</div>
+	<div class="filters-right">
+		{#if right}
+			{@render right()}
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.admin-filters {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 $unit-2x 0 $unit;
+		margin-bottom: $unit-2x;
+	}
+
+	.filters-left {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+	}
+
+	.filters-right {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+		flex-shrink: 0;
+	}
+</style>
diff --git a/src/lib/components/admin/Input.svelte b/src/lib/components/admin/Input.svelte
index 4dad249..c1888cd 100644
--- a/src/lib/components/admin/Input.svelte
+++ b/src/lib/components/admin/Input.svelte
@@ -1,22 +1,33 @@
 <script lang="ts">
 	import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements'
-	
+
 	// Type helpers for different input elements
 	type InputProps = HTMLInputAttributes & {
-		type?: 'text' | 'email' | 'password' | 'url' | 'search' | 'number' | 'tel' | 'date' | 'time' | 'color'
+		type?:
+			| 'text'
+			| 'email'
+			| 'password'
+			| 'url'
+			| 'search'
+			| 'number'
+			| 'tel'
+			| 'date'
+			| 'time'
+			| 'color'
 	}
-	
+
 	type TextareaProps = HTMLTextareaAttributes & {
 		type: 'textarea'
 		rows?: number
 		autoResize?: boolean
 	}
-	
+
 	type Props = (InputProps | TextareaProps) & {
 		label?: string
 		error?: string
 		helpText?: string
 		size?: 'small' | 'medium' | 'large'
+		pill?: boolean
 		fullWidth?: boolean
 		required?: boolean
 		class?: string
@@ -34,6 +45,7 @@
 		error,
 		helpText,
 		size = 'medium',
+		pill = false,
 		fullWidth = true,
 		required = false,
 		disabled = false,
@@ -56,30 +68,30 @@
 	let textareaElement: HTMLTextAreaElement | undefined = $state()
 	let charCount = $derived(String(value).length)
 	let charsRemaining = $derived(maxLength ? maxLength - charCount : 0)
-	
+
 	// Color swatch validation and display
 	const isValidHexColor = $derived(() => {
 		if (!colorSwatch || !value) return false
 		const hexRegex = /^#[0-9A-Fa-f]{6}$/
 		return hexRegex.test(String(value))
 	})
-	
+
 	// Color picker functionality
 	let colorPickerInput: HTMLInputElement
-	
+
 	function handleColorSwatchClick() {
 		if (colorPickerInput) {
 			colorPickerInput.click()
 		}
 	}
-	
+
 	function handleColorPickerChange(event: Event) {
 		const target = event.target as HTMLInputElement
 		if (target.value) {
 			value = target.value.toUpperCase()
 		}
 	}
-	
+
 	// Auto-resize textarea
 	$effect(() => {
 		if (type === 'textarea' && textareaElement && isTextarea(restProps) && restProps.autoResize) {
@@ -100,7 +112,8 @@
 		if (prefixIcon) classes.push('has-prefix-icon')
 		if (suffixIcon) classes.push('has-suffix-icon')
 		if (colorSwatch) classes.push('has-color-swatch')
-		if (type === 'textarea' && isTextarea(restProps) && restProps.autoResize) classes.push('has-auto-resize')
+		if (type === 'textarea' && isTextarea(restProps) && restProps.autoResize)
+			classes.push('has-auto-resize')
 		if (wrapperClass) classes.push(wrapperClass)
 		if (className) classes.push(className)
 		return classes.join(' ')
@@ -109,6 +122,7 @@
 	const inputClasses = $derived(() => {
 		const classes = ['input']
 		classes.push(`input-${size}`)
+		if (pill) classes.push('input-pill')
 		if (inputClass) classes.push(inputClass)
 		return classes.join(' ')
 	})
@@ -128,17 +142,17 @@
 			{/if}
 		</label>
 	{/if}
-	
+
 	<div class="input-container">
 		{#if prefixIcon}
 			<span class="input-icon prefix-icon">
 				<slot name="prefix" />
 			</span>
 		{/if}
-		
+
 		{#if colorSwatch && isValidHexColor}
-			<span 
-				class="color-swatch" 
+			<span
+				class="color-swatch"
 				style="background-color: {value}"
 				onclick={handleColorSwatchClick}
 				role="button"
@@ -146,7 +160,7 @@
 				aria-label="Open color picker"
 			></span>
 		{/if}
-		
+
 		{#if type === 'textarea' && isTextarea(restProps)}
 			<textarea
 				bind:this={textareaElement}
@@ -173,13 +187,13 @@
 				{...restProps}
 			/>
 		{/if}
-		
+
 		{#if suffixIcon}
 			<span class="input-icon suffix-icon">
 				<slot name="suffix" />
 			</span>
 		{/if}
-		
+
 		{#if colorSwatch}
 			<input
 				bind:this={colorPickerInput}
@@ -192,7 +206,7 @@
 			/>
 		{/if}
 	</div>
-	
+
 	{#if (error || helpText || showCharCount) && !disabled}
 		<div class="input-footer">
 			{#if error}
@@ -200,9 +214,13 @@
 			{:else if helpText}
 				<span class="input-help">{helpText}</span>
 			{/if}
-			
+
 			{#if showCharCount && maxLength}
-				<span class="char-count" class:warning={charsRemaining < maxLength * 0.1} class:error={charsRemaining < 0}>
+				<span
+					class="char-count"
+					class:warning={charsRemaining < maxLength * 0.1}
+					class:error={charsRemaining < 0}
+				>
 					{charsRemaining}
 				</span>
 			{/if}
@@ -217,7 +235,7 @@
 	.input-wrapper {
 		display: inline-block;
 		position: relative;
-		
+
 		&.full-width {
 			display: block;
 			width: 100%;
@@ -226,7 +244,7 @@
 		&.has-error {
 			.input {
 				border-color: $red-50;
-				
+
 				&:focus {
 					border-color: $red-50;
 				}
@@ -293,7 +311,7 @@
 		border-radius: 6px;
 		background-color: white;
 		transition: all 0.15s ease;
-		
+
 		&::placeholder {
 			color: $grey-50;
 		}
@@ -332,6 +350,31 @@
 		font-size: 16px;
 	}
 
+	// Shape variants - pill vs rounded
+	.input-pill {
+		&.input-small {
+			border-radius: 20px;
+		}
+		&.input-medium {
+			border-radius: 24px;
+		}
+		&.input-large {
+			border-radius: 28px;
+		}
+	}
+
+	.input:not(.input-pill) {
+		&.input-small {
+			border-radius: 6px;
+		}
+		&.input-medium {
+			border-radius: 8px;
+		}
+		&.input-large {
+			border-radius: 10px;
+		}
+	}
+
 	// Icon adjustments
 	.has-prefix-icon .input {
 		padding-left: calc($unit-2x + 24px);
@@ -350,11 +393,11 @@
 		justify-content: center;
 		color: $grey-40;
 		pointer-events: none;
-		
+
 		&.prefix-icon {
 			left: $unit-2x;
 		}
-		
+
 		&.suffix-icon {
 			right: $unit-2x;
 		}
@@ -373,18 +416,18 @@
 		padding-bottom: calc($unit * 1.5);
 		line-height: 1.5;
 		overflow-y: hidden; // Important for auto-resize
-		
+
 		&.input-small {
 			min-height: 60px;
 			padding-top: $unit;
 			padding-bottom: $unit;
 		}
-		
+
 		&.input-large {
 			min-height: 100px;
 		}
 	}
-	
+
 	// Auto-resizing textarea
 	.has-auto-resize textarea.input {
 		resize: none; // Disable manual resize when auto-resize is enabled
@@ -418,11 +461,11 @@
 		color: $grey-50;
 		font-variant-numeric: tabular-nums;
 		margin-left: auto;
-		
+
 		&.warning {
 			color: $universe-color;
 		}
-		
+
 		&.error {
 			color: $red-50;
 			font-weight: 500;
@@ -430,23 +473,23 @@
 	}
 
 	// Special input types
-	input[type="color"].input {
+	input[type='color'].input {
 		padding: $unit;
 		cursor: pointer;
-		
+
 		&::-webkit-color-swatch-wrapper {
 			padding: 0;
 		}
-		
+
 		&::-webkit-color-swatch {
 			border: none;
 			border-radius: 4px;
 		}
 	}
 
-	input[type="number"].input {
+	input[type='number'].input {
 		-moz-appearance: textfield;
-		
+
 		&::-webkit-outer-spin-button,
 		&::-webkit-inner-spin-button {
 			-webkit-appearance: none;
@@ -455,10 +498,10 @@
 	}
 
 	// Search input
-	input[type="search"].input {
+	input[type='search'].input {
 		&::-webkit-search-decoration,
 		&::-webkit-search-cancel-button {
 			-webkit-appearance: none;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/admin/Select.svelte b/src/lib/components/admin/Select.svelte
index 1271547..d35f10f 100644
--- a/src/lib/components/admin/Select.svelte
+++ b/src/lib/components/admin/Select.svelte
@@ -136,7 +136,7 @@
 				font-size: 13px;
 				min-height: 28px;
 				min-width: 120px;
-				border-radius: 8px;
+				border-radius: $corner-radius;
 			}
 
 			&.select-medium {
@@ -144,7 +144,7 @@
 				font-size: 14px;
 				min-height: 36px;
 				min-width: 160px;
-				border-radius: 8px;
+				border-radius: $corner-radius;
 			}
 
 			&.select-large {
@@ -152,7 +152,7 @@
 				font-size: 15px;
 				min-height: 44px;
 				min-width: 180px;
-				border-radius: 8px;
+				border-radius: $card-corner-radius;
 			}
 		}
 
diff --git a/src/routes/admin/albums/+page.svelte b/src/routes/admin/albums/+page.svelte
index 54b66c7..c554bb0 100644
--- a/src/routes/admin/albums/+page.svelte
+++ b/src/routes/admin/albums/+page.svelte
@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte'
 	import AdminPage from '$lib/components/admin/AdminPage.svelte'
 	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
 	import DataTable from '$lib/components/admin/DataTable.svelte'
 	import Button from '$lib/components/admin/Button.svelte'
 	import Select from '$lib/components/admin/Select.svelte'
@@ -145,15 +146,17 @@
 		<div class="error">{error}</div>
 	{:else}
 		<!-- Filters -->
-		<div class="filters">
-			<Select
-				bind:value={photographyFilter}
-				options={filterOptions}
-				size="small"
-				variant="minimal"
-				onchange={handleFilterChange}
-			/>
-		</div>
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={photographyFilter}
+					options={filterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+			{/snippet}
+		</AdminFilters>
 
 		<!-- Albums Table -->
 		{#if isLoading}
@@ -185,12 +188,6 @@
 		margin-bottom: $unit-4x;
 	}
 
-	.filters {
-		display: flex;
-		gap: $unit-2x;
-		align-items: center;
-		margin-bottom: $unit-4x;
-	}
 
 	.loading-container {
 		display: flex;
diff --git a/src/routes/admin/media/+page.svelte b/src/routes/admin/media/+page.svelte
index 3c23bcc..60c917d 100644
--- a/src/routes/admin/media/+page.svelte
+++ b/src/routes/admin/media/+page.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
 	import Input from '$lib/components/admin/Input.svelte'
+	import Select from '$lib/components/admin/Select.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
 	import MediaDetailsModal from '$lib/components/admin/MediaDetailsModal.svelte'
 	import type { Media } from '@prisma/client'
 
@@ -19,6 +23,21 @@
 	let searchQuery = $state('')
 	let searchTimeout: ReturnType<typeof setTimeout>
 
+	// Filter options
+	const typeFilterOptions = [
+		{ value: 'all', label: 'All types' },
+		{ value: 'image', label: 'Images' },
+		{ value: 'video', label: 'Videos' },
+		{ value: 'audio', label: 'Audio' },
+		{ value: 'application/pdf', label: 'PDFs' }
+	]
+
+	const photographyFilterOptions = [
+		{ value: 'all', label: 'All media' },
+		{ value: 'true', label: 'Photography only' },
+		{ value: 'false', label: 'Non-photography' }
+	]
+
 	// Modal states
 	let selectedMedia = $state<Media | null>(null)
 	let isDetailsModalOpen = $state(false)
@@ -286,47 +305,51 @@
 </script>
 
 <AdminPage>
-	<header slot="header">
-		<h1>Media Library</h1>
-		<div class="header-actions">
-			<button
+	<AdminHeader title="Media Library" slot="header">
+		{#snippet actions()}
+			<Button
+				variant="secondary"
+				size="large"
 				onclick={toggleMultiSelectMode}
-				class="btn btn-secondary"
-				class:active={isMultiSelectMode}
+				class={isMultiSelectMode ? 'active' : ''}
 			>
 				{isMultiSelectMode ? '✓' : '☐'}
 				{isMultiSelectMode ? 'Exit Select' : 'Select'}
-			</button>
-			<button
+			</Button>
+			<Button
+				variant="secondary"
+				size="large"
 				onclick={() => (viewMode = viewMode === 'grid' ? 'list' : 'grid')}
-				class="btn btn-secondary"
 			>
 				{viewMode === 'grid' ? '📋' : '🖼️'}
 				{viewMode === 'grid' ? 'List' : 'Grid'}
-			</button>
-			<a href="/admin/media/upload" class="btn btn-primary">Upload Media</a>
-		</div>
-	</header>
+			</Button>
+			<Button variant="primary" size="large" href="/admin/media/upload">Upload Media</Button>
+		{/snippet}
+	</AdminHeader>
 
 	{#if error}
 		<div class="error">{error}</div>
 	{:else}
-		<div class="media-controls">
-			<div class="filters">
-				<select bind:value={filterType} onchange={handleFilterChange} class="filter-select">
-					<option value="all">All types</option>
-					<option value="image">Images</option>
-					<option value="video">Videos</option>
-					<option value="audio">Audio</option>
-					<option value="application/pdf">PDFs</option>
-				</select>
-
-				<select bind:value={photographyFilter} onchange={handleFilterChange} class="filter-select">
-					<option value="all">All media</option>
-					<option value="true">Photography only</option>
-					<option value="false">Non-photography</option>
-				</select>
-
+		<!-- Filters -->
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={filterType}
+					options={typeFilterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+				<Select
+					bind:value={photographyFilter}
+					options={photographyFilterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+			{/snippet}
+			{#snippet right()}
 				<Input
 					type="search"
 					bind:value={searchQuery}
@@ -334,8 +357,8 @@
 					placeholder="Search files..."
 					size="small"
 					fullWidth={false}
+					pill={true}
 					prefixIcon
-					wrapperClass="search-input-wrapper"
 				>
 					<svg
 						slot="prefix"
@@ -352,8 +375,8 @@
 						/>
 					</svg>
 				</Input>
-			</div>
-		</div>
+			{/snippet}
+		</AdminFilters>
 
 		{#if isMultiSelectMode && media.length > 0}
 			<div class="bulk-actions">
@@ -614,25 +637,6 @@
 />
 
 <style lang="scss">
-	header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-
-		h1 {
-			font-size: 1.75rem;
-			font-weight: 700;
-			margin: 0;
-			color: $grey-10;
-		}
-	}
-
-	.header-actions {
-		display: flex;
-		gap: $unit-2x;
-	}
-
 	.btn {
 		padding: $unit-2x $unit-3x;
 		border-radius: 50px;
@@ -668,44 +672,6 @@
 		color: #d33;
 	}
 
-	.media-controls {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		gap: $unit-4x;
-		margin-bottom: $unit-4x;
-		flex-wrap: wrap;
-	}
-
-	.filters {
-		display: flex;
-		gap: $unit-2x;
-		align-items: center;
-	}
-
-	.filter-select {
-		padding: $unit $unit-3x;
-		border: 1px solid $grey-80;
-		border-radius: 50px;
-		background: white;
-		font-size: 0.925rem;
-		color: $grey-20;
-		cursor: pointer;
-
-		&:focus {
-			outline: none;
-			border-color: $grey-40;
-		}
-	}
-
-	.search-input-wrapper {
-		width: 240px;
-
-		:global(.input) {
-			border-radius: 50px;
-		}
-	}
-
 	.loading {
 		text-align: center;
 		padding: $unit-6x;
diff --git a/src/routes/admin/posts/+page.svelte b/src/routes/admin/posts/+page.svelte
index 31d3b42..91996d8 100644
--- a/src/routes/admin/posts/+page.svelte
+++ b/src/routes/admin/posts/+page.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation'
 	import AdminPage from '$lib/components/admin/AdminPage.svelte'
 	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
 	import PostDropdown from '$lib/components/admin/PostDropdown.svelte'
 	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
 	import Select from '$lib/components/admin/Select.svelte'
@@ -239,15 +240,17 @@
 		<div class="error-message">{error}</div>
 	{:else}
 		<!-- Filters -->
-		<div class="filters">
-			<Select
-				bind:value={selectedFilter}
-				options={filterOptions}
-				size="small"
-				variant="minimal"
-				onchange={handleFilterChange}
-			/>
-		</div>
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={selectedFilter}
+					options={filterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+			{/snippet}
+		</AdminFilters>
 
 		<!-- Posts List -->
 		{#if isLoading}
@@ -364,12 +367,6 @@
 <style lang="scss">
 	@import '$styles/variables.scss';
 
-	.filters {
-		display: flex;
-		gap: $unit-2x;
-		align-items: center;
-		margin-bottom: $unit-4x;
-	}
 
 	.error-message {
 		background: rgba(239, 68, 68, 0.1);
diff --git a/src/routes/admin/projects/+page.svelte b/src/routes/admin/projects/+page.svelte
index c984ed2..d33f178 100644
--- a/src/routes/admin/projects/+page.svelte
+++ b/src/routes/admin/projects/+page.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation'
 	import AdminPage from '$lib/components/admin/AdminPage.svelte'
 	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
 	import ProjectListItem from '$lib/components/admin/ProjectListItem.svelte'
 	import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
 	import Button from '$lib/components/admin/Button.svelte'
@@ -15,6 +16,7 @@
 		year: number
 		client: string | null
 		status: string
+		projectType: string
 		backgroundColor: string | null
 		highlightColor: string | null
 		createdAt: string
@@ -31,15 +33,22 @@
 	let statusCounts = $state<Record<string, number>>({})
 
 	// Filter state
-	let selectedFilter = $state<string>('all')
+	let selectedStatusFilter = $state<string>('all')
+	let selectedTypeFilter = $state<string>('all')
 
 	// Create filter options
-	const filterOptions = $derived([
+	const statusFilterOptions = $derived([
 		{ value: 'all', label: 'All projects' },
 		{ value: 'published', label: 'Published' },
 		{ value: 'draft', label: 'Draft' }
 	])
 
+	const typeFilterOptions = [
+		{ value: 'all', label: 'All types' },
+		{ value: 'work', label: 'Work' },
+		{ value: 'labs', label: 'Labs' }
+	]
+
 	onMount(async () => {
 		await loadProjects()
 		// Close dropdown when clicking outside
@@ -167,14 +176,26 @@
 	}
 
 	function applyFilter() {
-		if (selectedFilter === 'all') {
-			filteredProjects = projects
-		} else {
-			filteredProjects = projects.filter((project) => project.status === selectedFilter)
+		let filtered = projects
+
+		// Apply status filter
+		if (selectedStatusFilter !== 'all') {
+			filtered = filtered.filter((project) => project.status === selectedStatusFilter)
 		}
+
+		// Apply type filter based on projectType field
+		if (selectedTypeFilter !== 'all') {
+			filtered = filtered.filter((project) => project.projectType === selectedTypeFilter)
+		}
+
+		filteredProjects = filtered
 	}
 
-	function handleFilterChange() {
+	function handleStatusFilterChange() {
+		applyFilter()
+	}
+
+	function handleTypeFilterChange() {
 		applyFilter()
 	}
 </script>
@@ -190,15 +211,24 @@
 		<div class="error">{error}</div>
 	{:else}
 		<!-- Filters -->
-		<div class="filters">
-			<Select
-				bind:value={selectedFilter}
-				options={filterOptions}
-				size="small"
-				variant="minimal"
-				onchange={handleFilterChange}
-			/>
-		</div>
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={selectedStatusFilter}
+					options={statusFilterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleStatusFilterChange}
+				/>
+				<Select
+					bind:value={selectedTypeFilter}
+					options={typeFilterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleTypeFilterChange}
+				/>
+			{/snippet}
+		</AdminFilters>
 
 		<!-- Projects List -->
 		{#if isLoading}
@@ -209,10 +239,10 @@
 		{:else if filteredProjects.length === 0}
 			<div class="empty-state">
 				<p>
-					{#if selectedFilter === 'all'}
+					{#if selectedStatusFilter === 'all' && selectedTypeFilter === 'all'}
 						No projects found. Create your first project!
 					{:else}
-						No {selectedFilter} projects found. Try a different filter or create a new project.
+						No projects found matching the current filters. Try adjusting your filters or create a new project.
 					{/if}
 				</p>
 			</div>
@@ -245,12 +275,6 @@
 
 <style lang="scss">
 
-	.filters {
-		display: flex;
-		gap: $unit-2x;
-		align-items: center;
-		margin-bottom: $unit-4x;
-	}
 
 	.error {
 		text-align: center;