feat: Filter boards UI

src/lib/components/BoardFilter.component.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { Button, Checkbox, Indicator } from 'flowbite-svelte';
+	import { authStore } from '$lib/store';
+	import { createEventDispatcher } from 'svelte';
+	import { BoardFilterOption } from '$lib/enums/App.enums';
+	import Dropdown from './common/Dropdown/Dropdown.component.svelte';
+
+	let isDropdownOpen = false;
+	let isAnonymous = $authStore.isAnonymous;
+	const dispatch = createEventDispatcher();
+
+	const hanldeDropdownToggle = (): void => {
+		isDropdownOpen = !isDropdownOpen;
+	};
+
+	let filterValues: string[] = [];
+
+	const hanldeChange = (e: Event): void => {
+		const { nodeName } = e.target as HTMLInputElement;
+		if (nodeName === 'INPUT') {
+			dispatch('change', filterValues);
+		}
+	};
+</script>
+
+<Dropdown bind:isDropdownOpen dropdownClass="mt-2 ">
+	<Button
+		slot="action"
+		on:click={hanldeDropdownToggle}
+		outline={true}
+		color="light"
+		class="!px-3"
+		size="lg"
+	>
+		<Icon icon="solar:filter-bold" />
+		{#if filterValues.length > 0}
+			<Indicator color="red" border size="xl" placement="top-right">
+				<span class="text-white text-xs font-bold">{filterValues.length}</span>
+			</Indicator>
+		{/if}
+	</Button>
+
+	<ul
+		on:change={hanldeChange}
+		slot="dropdown"
+		class="bg-white border-2 rounded-lg p-2 flex flex-col gap-2 shadow-2xl"
+	>
+		<li>
+			<Checkbox color="orange" bind:group={filterValues} value={BoardFilterOption.ALL_BOARDS}
+				>All Boards</Checkbox
+			>
+		</li>
+		<li>
+			<Checkbox color="orange" bind:group={filterValues} value={BoardFilterOption.MY_BOARDS}
+				>My Boards</Checkbox
+			>
+		</li>
+		<li>
+			<Checkbox color="orange" bind:group={filterValues} value={BoardFilterOption.PUBLIC}
+				>Public Boards</Checkbox
+			>
+		</li>
+		{#if !isAnonymous}
+			<li id="private">
+				<Checkbox
+					color="orange"
+					bind:group={filterValues}
+					value={BoardFilterOption.PRIVATE}
+					disabled={isAnonymous}>Private Boards</Checkbox
+				>
+			</li>
+		{/if}
+	</ul>
+</Dropdown>

src/lib/components/common/Dropdown/Dropdown.component.svelte

@@ -48,7 +48,6 @@
 		z-index: 20;
 		right: 0;
 		width: max-content;
-		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
 	}
 
 	.dropDownWrapper.active {

src/lib/enums/App.enums.ts

@@ -0,0 +1,8 @@
+// contains enums related to app (frontend)
+export enum BoardFilterOption {
+	PRIVATE = 'Private Boards',
+	PUBLIC = 'Public Boards',
+	MY_BOARDS = 'My Boards',
+	ALL_BOARDS = 'All Boards',
+	COLLABORATED = 'Collaborated Boards',
+}

src/routes/+page.svelte

@@ -6,20 +6,30 @@
 	import type { PageData } from './$types';
 	import boardStore from '$lib/store/boards.store';
 	import Masonry from '$components/Layouts/Masonry.component.svelte';
+	import BoardFilter from '$components/BoardFilter.component.svelte';
+	import { onDestroy } from 'svelte';
 
 	export let data: PageData;
 	let boards = data.boards;
+	$: filteredBoards = data.boards;
 
 	let isModalOpen = false;
 
 	const openModel = (): void => {
 		isModalOpen = true;
 	};
 
-	boardStore.subscribe((boardsData) => {
+	const unsub = boardStore.subscribe((boardsData) => {
 		boards = boardsData.boards;
 		isModalOpen = boardsData.isCreateBoardModalOpen;
 	});
+
+	onDestroy(unsub);
+
+	const hanldeApplyFilter = (e: CustomEvent): void => {
+		const filterValues: string[] = e.detail;
+		console.log(filterValues);
+	};
 </script>
 
 <title>All Boards | Krello</title>
@@ -29,12 +39,15 @@
 		<div class="">
 			<header class="flex items-center justify-between gap-2 px-4">
 				<h1 class="text-xl md:text-2xl font-bold">All Boards</h1>
-				<Button on:click={openModel}>New</Button>
+				<div class="flex items-center gap-x-2">
+					<BoardFilter on:change={hanldeApplyFilter} />
+					<Button on:click={openModel}>New</Button>
+				</div>
 			</header>
 
 			<section class="mt-8">
 				<Masonry gridGap={'1rem'} colWidth={'minmax(Min(22rem, 100%), 1fr)'} items={boards}>
-					{#each boards as board}
+					{#each filteredBoards as board}
 						<div>
 							<Card
 								cardTitle={board.name}