Updated with shadcn UI

components.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.css",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}

package.json

@@ -31,6 +31,11 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-vercel": "^5.1.0"
+		"@sveltejs/adapter-vercel": "^5.1.0",
+		"bits-ui": "^0.16.0",
+		"clsx": "^2.1.0",
+		"lucide-svelte": "^0.316.0",
+		"tailwind-merge": "^2.2.1",
+		"tailwind-variants": "^0.1.20"
 	}
 }

src/app.css

@@ -1,3 +1,78 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 222.2 84% 4.9%;
+
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 222.2 84% 4.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 222.2 84% 4.9%;
+
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
+
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
+
+		--secondary: 210 40% 96.1%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
+
+		--accent: 210 40% 96.1%;
+		--accent-foreground: 222.2 47.4% 11.2%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 210 40% 98%;
+
+		--ring: 222.2 84% 4.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 222.2 84% 4.9%;
+		--foreground: 210 40% 98%;
+
+		--muted: 217.2 32.6% 17.5%;
+		--muted-foreground: 215 20.2% 65.1%;
+
+		--popover: 222.2 84% 4.9%;
+		--popover-foreground: 210 40% 98%;
+
+		--card: 222.2 84% 4.9%;
+		--card-foreground: 210 40% 98%;
+
+		--border: 217.2 32.6% 17.5%;
+		--input: 217.2 32.6% 17.5%;
+
+		--primary: 210 40% 98%;
+		--primary-foreground: 222.2 47.4% 11.2%;
+
+		--secondary: 217.2 32.6% 17.5%;
+		--secondary-foreground: 210 40% 98%;
+
+		--accent: 217.2 32.6% 17.5%;
+		--accent-foreground: 210 40% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 210 40% 98%;
+
+		--ring: hsl(212.7, 26.8%, 83.9);
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

src/lib/components/Actions.svelte

@@ -5,32 +5,40 @@
 	import { createEventDispatcher } from 'svelte'
 	import Fa from 'svelte-fa'
 
+	import { Button } from '$lib/components/ui/button'
+	import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip'
+
 	const dispatch = createEventDispatcher()
+	$: hasImages = $galleryStore.images?.length
 </script>
 
 <div class="flex flex-row gap-3 justify-end mt-10">
-	<button
-		class:hidden={!$galleryStore.images?.length}
-		class="flex flex-row items-center text-white gap-2 rounded-xl bg-blue-400 hover:bg-blue-600 px-4 py-2"
+	<Button
+		class="flex flex-row items-center text-white gap-2 rounded-xl bg-blue-400 hover:bg-blue-600 px-4 py-2 {!hasImages
+			? 'hidden'
+			: ''}"
 	>
 		<Fa icon={faTag} />
 		<span>Add tag to image</span>
-	</button>
-	<button
-		on:click={() => dispatch('upload')}
-		class="flex flex-row items-center text-white gap-2 rounded-xl bg-blue-400 hover:bg-blue-600 px-4 py-2"
-	>
-		<Fa icon={faImage} />
-		<span>Select images</span>
-	</button>
+	</Button>
+	<Tooltip>
+		<TooltipTrigger>
+			<Button
+				on:click={() => dispatch('upload')}
+				class="flex flex-row items-center text-white gap-2 rounded-xl bg-blue-400 hover:bg-blue-600 px-4 py-2"
+			>
+				<Fa icon={faImage} />
+				<span>Select images</span>
+			</Button>
+		</TooltipTrigger>
+	</Tooltip>
 
-	<button
+	<Button
+		variant={'outline'}
 		disabled={!$galleryStore.selectedImage}
 		on:click={() => dispatch('delete')}
-		class:hidden={!$galleryStore.images?.length}
-		class:cursor-not-allowed={!$galleryStore.selectedImage}
-		class="px-3 bg-slate-200 rounded-lg"
+		class="px-3 bg-gray-200 rounded-lg {!hasImages ? 'hidden' : ''}"
 	>
 		<Fa icon={faTrash} />
-	</button>
+	</Button>
 </div>

src/lib/components/Filter.svelte

@@ -1,17 +1,32 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import { galleryStore } from '$lib/store'
+	import {
+		Select,
+		SelectContent,
+		SelectGroup,
+		SelectItem,
+		SelectLabel,
+		SelectTrigger,
+		SelectValue
+	} from '$lib/components/ui/select'
+	import type { Selected } from 'bits-ui'
 
-	export let filter = ''
+	export let filter: Selected<string> = { value: '' }
 
-	const filters = ['date', 'map', 'name', 'size', 'tag']
+	const filters = [
+		{ value: 'date', label: 'date' },
+		{ value: 'map', label: 'map' },
+		{ value: 'name', label: 'name' },
+		{ value: 'size', label: 'size' },
+		{ value: 'tag', label: 'tag' }
+	]
+	let tmr: number
 
 	const updateFilter = async () => {
 		let _images = $galleryStore.images
 
-		// $page.url.searchParams.set('filter', filter)
+		switch (filter.value) {
 
-		switch (filter) {
 			case 'date':
 				_images.sort((a: File, b: File) => {
 					return a.lastModified - b.lastModified
@@ -35,16 +50,39 @@
 			default:
 				break
 		}
-		$galleryStore.images = _images
+
+		if (tmr) clearTimeout(tmr)
+		tmr = setTimeout(() => {
+			$galleryStore.images = _images
+		}, 10)
 	}
+	$: filter, updateFilter()
 </script>
 
-<div class="flex flex-row items-center w-full rounded-full shadow-lg bg-white py-3 px-10">
+<div class="flex flex-row items-center w-full rounded-full shadow-lg bg-white py-2 px-10">
 	<p>Show</p>
-	<select bind:value={filter} on:change={() => updateFilter()} class="outline-none px-1 pb-[1px]">
+
+	<!-- <select bind:value={filter} on:change={() => updateFilter()} class="outline-none px-1 pb-[1px]">
 		<option value="">All photos</option>
 		{#each filters as _filter}
 			<option value={_filter}>By {_filter}</option>
 		{/each}
-	</select>
+	</select> -->
+
+	<Select bind:selected={filter}>
+		<SelectTrigger class="w-32 flex border-none focus:ring-0 focus:ring-offset-0">
+			<SelectValue class="text-base" placeholder="All photos"></SelectValue>
+		</SelectTrigger>
+		<SelectContent>
+			<SelectGroup>
+				<SelectLabel class="pl-7">All photos</SelectLabel>
+				{#each filters as filter}
+					<SelectItem class="cursor-pointer" value={filter.value} label={filter.label}
+						>by {filter.label}</SelectItem
+					>
+				{/each}
+			</SelectGroup>
+		</SelectContent>
+	</Select>
+
 </div>

src/lib/components/Gallery.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { galleryStore } from "$lib/store"
-	import Image from "$lib/components/Image.svelte"
-
+	import { galleryStore } from '$lib/store'
+	import Image from '$lib/components/Image.svelte'
 </script>
 
 {#if $galleryStore.images?.length}
-<div class="grid grid-cols-4 md:grid-cols-5 xl:grid-cols-7 gap-3 mt-10">
-	{#each $galleryStore.images as image, i}
-		<Image bind:image />
-	{/each}
-</div>
+	<div
+		class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 px-2 gap-3 mt-10 max-h-[520px] overflow-auto"
+	>
+		{#each $galleryStore.images as image, i}
+			<Image bind:image />
+		{/each}
+	</div>
 {/if}

src/lib/components/Image.svelte

@@ -5,14 +5,19 @@
 
 	export let image: any
 	let hasHover = false
+
+	$: imageHeight = $galleryStore.zoomLevel + 80
+
 </script>
 
 <div
 	role="img"
 	on:focus
 	on:mouseover={() => (hasHover = true)}
 	on:mouseleave={() => (hasHover = false)}
-	class="flex flex-col relative rounded-md h-36 bg-gray-100"
+	class="flex flex-col relative rounded-md bg-gray-100"
+	style="height: {imageHeight}px;"
+
 >
 	<button
 		on:click={() => ($galleryStore.selectedImage = image)}

src/lib/components/Modal.svelte

@@ -3,10 +3,17 @@
 	import Fa from 'svelte-fa'
 	import { onMount } from 'svelte'
 	import { galleryStore } from '$lib/store'
+	import Button from './ui/button/button.svelte'
+
 
 	let data: any
 	let disabled: boolean = false
 
+	const handleYes = () => {
+		$galleryStore.isDeleteImage = true
+		$galleryStore.modal = false
+	}
+
 </script>
 
 <div
@@ -15,25 +22,21 @@
 	class="flex overflow-y-auto overflow-x-hidden backdrop-blur-sm fixed bg-black bg-opacity-40 z-50 justify-center items-center w-screen h-screen"
 >
 	<div class="flex flex-col min-w-96 rounded-xl border shadow-sm pb-5 px-5 bg-white">
-		<div class="flex flex-row justify-between">
-			<p class="capitalize font-semibold text-lg py-4">Questions here</p>
-			<button on:click={() => $galleryStore.modal = false}>
+		<div class="flex flex-row mt-2 justify-end">
+			<button on:click={() => ($galleryStore.modal = false)}>
 				<Fa icon={faMultiply} />
 			</button>
 		</div>
-		<hr class="py-1" />
+		<div class="p-2">
+			<p class="text text-center py-4">{$galleryStore.modalQuestion}</p>
+		</div>
+		<!-- <hr class="py-1" /> -->
 		<!-- <div>Body</div> -->
-		<div class="flex flex-row gap-5 w-full py-2">
-			<button
-				class="bg-white outline outline-1 outline-gray-400 text-black w-full rounded-lg py-2 disabled:cursor-not-allowed disabled:bg-opacity-60"
-			>
+		<div class="flex flex-row gap-5 justify-center py-2">
+			<Button on:click={() => ($galleryStore.modal = false)} variant={'outline'} class="w-32">
 				No
-			</button>
-			<button
-				class="bg-black w-full rounded-lg text-white py-2 disabled:cursor-not-allowed disabled:bg-opacity-60"
-			>
-				Yes
-			</button>
+			</Button>
+			<Button class="w-32" on:click={() => handleYes()}>Yes</Button>
 		</div>
 	</div>
 </div>

src/lib/components/ui/button/button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props, type Events } from ".";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>