Image editing toolbar (Rotate, Blur)

package.json

@@ -30,6 +30,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"autoprefixer": "^10.4.17",
 		"dayjs": "^1.11.10",
+		"image-js": "^0.35.5",
 		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",

src/lib/components/DropPlaceholder.svelte

@@ -0,0 +1,5 @@
+<div
+	class="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-blue-300 bg-opacity-50"
+>
+	<p class="text-2xl font-bold text-white">Drop your images here</p>
+</div>

src/lib/components/gallery/ActionButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { trimString } from '$lib/utils/tools'
 	import type { IconDefinition } from '@fortawesome/free-regular-svg-icons'
 	import Fa from 'svelte-fa'
 
@@ -7,19 +8,26 @@
 	export let text: string = ''
 	export let icon: IconDefinition | null = null
 	export let onClick: Method | null = null
+	export let isActive: string = ''
+	export let borderDown: boolean = false
 
 	let hover = false
 </script>
 
 <button
 	on:mouseenter={() => (hover = true)}
 	on:mouseleave={() => (hover = false)}
-	class="flex flex-col items-center gap-3 hover:text-gray-500"
+	class="flex flex-col items-center gap-3 hover:text-gray-500
+	{isActive == trimString(text) && !borderDown ? 'border-l-[3px] border-blue-500' : ''}"
 	on:click={() => (onClick ? onClick() : '')}
 >
 	{#if icon}
 		<Fa {icon} class="text-gray-700 {hover && 'text-gray-500'}" />
 	{/if}
 
 	<span class="text-sm font-light">{text}</span>
+	<span
+		class="h-[2px] w-[50%]
+	{borderDown && isActive == trimString(text) ? 'border-b-[1.5px] border-blue-500' : ''}"
+	/>
 </button>

src/lib/components/gallery/BlurImagePanel.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Slider from '$lib/components/ui/slider/slider.svelte'
+
+	let blurValue: number = 0
+	let blur: number[] = [blurValue]
+	export let blurLevel: number = blurValue
+
+	$: blurLevel = blurValue
+</script>
+
+<div class="flex w-56 flex-col gap-3 rounded-xl bg-white px-6 py-5 shadow-lg">
+	<p>Blur</p>
+	<div class="w-full rounded-lg bg-blue-300 px-5 py-1">
+		<Slider
+			bind:value={blur}
+			onValueChange={(e) => (blurValue = e[0])}
+			class="w-80"
+			max={100}
+			min={0}
+			step={5}
+		/>
+	</div>
+</div>

src/lib/components/gallery/Header.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
-	import {
-		faHomeAlt,
-		faInfoCircle,
-		faMultiply,
-		faRedo,
-		faUndo
-	} from '@fortawesome/free-solid-svg-icons'
+	import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'
+	import { faHomeAlt, faInfoCircle, faMultiply } from '@fortawesome/free-solid-svg-icons'
 	import Fa from 'svelte-fa'
 	import { createEventDispatcher } from 'svelte'
+	import { Undo, Redo, Download } from 'lucide-svelte'
 	import { goto } from '$app/navigation'
 	import type { ImageType } from '$lib/utils/types'
 	import Tooltip from '../elements/Tooltip.svelte'
-	import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'
 
 	export let showInfo = false
 	export let tabs: ImageType[] = []
@@ -59,11 +54,11 @@
 	</div>
 	<div class="flex h-16 bg-blue-400 px-5 text-white">
 		<div class="mx-auto flex w-full max-w-7xl flex-row items-center justify-end gap-4">
-			<button class="h-8">
-				<Fa icon={faUndo} />
+			<button class="h-8" disabled>
+				<Undo />
 			</button>
-			<button class="h-8">
-				<Fa icon={faRedo} />
+			<button class="h-8" disabled>
+				<Redo />
 			</button>
 			<button
 				class="h-8 {showInfo && 'border-b border-white'}"
@@ -79,6 +74,11 @@
 			>
 				<Fa icon={faTrashAlt} />
 			</button>
+			<!-- {#if $galleryStore.isEditing}
+				<button class="h-8">
+					<Download size="18" />
+				</button>
+			{/if} -->
 		</div>
 	</div>
 </div>