fix: minor corrections

Author: mikededo

bun.lockb

@@ -16,46 +16,46 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@eslint/js": "9.3.0",
+    "@eslint/js": "9.6.0",
     "@melt-ui/pp": "^0.3.2",
-    "@melt-ui/svelte": "0.81.0",
+    "@melt-ui/svelte": "0.83.0",
     "@sveltejs/adapter-auto": "3.2.2",
-    "@sveltejs/adapter-vercel": "5.3.2",
-    "@sveltejs/enhanced-img": "0.2.1",
+    "@sveltejs/adapter-vercel": "5.4.0",
+    "@sveltejs/enhanced-img": "0.3.0",
     "@sveltejs/kit": "2.5.18",
     "@sveltejs/vite-plugin-svelte": "3.1.1",
     "@types/eslint": "8.56.10",
-    "@types/node": "20.12.14",
-    "@typescript-eslint/eslint-plugin": "7.11.0",
-    "@typescript-eslint/parser": "7.11.0",
+    "@types/node": "20.14.9",
+    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/parser": "7.15.0",
     "autoprefixer": "10.4.19",
     "concurrently": "8.2.2",
-    "eslint": "9.3.0",
+    "eslint": "9.6.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-svelte": "2.39.4",
+    "eslint-plugin-svelte": "2.41.0",
     "husky": "9.0.11",
     "lint-staged": "15.2.7",
     "postcss": "8.4.39",
-    "prettier": "3.2.5",
+    "prettier": "3.3.2",
     "prettier-plugin-svelte": "3.2.5",
     "prettier-plugin-tailwindcss": "0.6.5",
     "svelte": "5.0.0-next.169",
     "svelte-check": "3.8.4",
     "tailwindcss": "3.4.4",
     "tslib": "2.6.3",
-    "typescript": "5.4.5",
-    "typescript-eslint": "7.11.0",
-    "vite": "5.2.13",
+    "typescript": "5.5.3",
+    "typescript-eslint": "7.15.0",
+    "vite": "5.3.2",
     "vitest": "1.6.0"
   },
   "type": "module",
   "dependencies": {
-    "@supabase/ssr": "0.3.0",
-    "@supabase/supabase-js": "2.43.6",
-    "@tanstack/svelte-query": "5.40.3",
-    "@tanstack/svelte-query-devtools": "5.40.3",
-    "lucide-svelte": "0.350.0",
+    "@supabase/ssr": "0.4.0",
+    "@supabase/supabase-js": "2.44.2",
+    "@tanstack/svelte-query": "5.49.1",
+    "@tanstack/svelte-query-devtools": "5.49.1",
+    "lucide-svelte": "0.399.0",
     "tailwind-merge": "2.3.0"
   }
 }

package.json

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { XIcon } from 'lucide-svelte';
     import type { Snippet } from 'svelte';
-    import { sineInOut } from 'svelte/easing';
+    import { cubicOut } from 'svelte/easing';
     import { fade, slide } from 'svelte/transition';
 
     import { page } from '$app/stores';
@@ -38,7 +38,7 @@
         ></div>
         <div
             class="overlflow-hidden fixed bottom-0 left-0 right-0 z-[51] max-h-[90vh] rounded-t-2xl bg-white transition"
-            transition:slide={{ axis: 'y', duration: 300, easing: sineInOut }}
+            transition:slide={{ axis: 'y', duration: 250, easing: cubicOut }}
         >
             <div class="px-6 py-4">
                 <div class="mb-3 flex items-center justify-between">

src/lib/components/bottom-sheet/bottom-sheet.svelte

@@ -2,38 +2,55 @@
     import { XIcon } from 'lucide-svelte';
 
     import { page } from '$app/stores';
+    import { type Agencies, DEFAULT_NONE_AGENCY_ID } from '$lib/db';
     import { Filters, getEuro } from '$lib/helpers';
 
+    type Props = { agencies: NonNullable<Agencies> };
+    let { agencies }: Props = $props();
+
+    const onClearFilter = (rating: Parameters<typeof Filters.remove>[0]) => () => {
+        Filters.remove(rating);
+    };
+
     let params = $derived($page.url.searchParams);
     let appliedFilters = $derived.by(() => {
-        const result: string[] = [];
+        const result: Record<string, () => void> = {};
         const filters = Filters.filters(params);
 
         if (filters.jRating) {
-            result.push(`J Rating: ${filters.jRating}`);
+            result[`J Rating: ${filters.jRating}`] = onClearFilter('jRating');
         }
         if (filters.mRating) {
-            result.push(`M Rating: ${filters.mRating}`);
+            result[`M Rating: ${filters.jRating}`] = onClearFilter('mRating');
+        }
+
+        if (filters.realStateAgency && filters.realStateAgency !== DEFAULT_NONE_AGENCY_ID) {
+            const agency = agencies.find(({ id }) => id === filters.realStateAgency);
+            if (agency) {
+                result[`Agency: ${agency.name}`] = onClearFilter('realStateAgency');
+            }
         }
 
         const [priceMin, priceMax] = filters.priceRange;
         if (priceMin !== Filters.PRICE_RANGE_MIN || priceMax !== Filters.PRICE_RANGE_MAX) {
-            result.push(`${getEuro(priceMin)} - ${getEuro(priceMax)}`);
+            result[`${getEuro(priceMin)} - ${getEuro(priceMax)}`] = onClearFilter('priceRange');
         }
 
         return result;
     });
 </script>
 
-{#if appliedFilters.length}
+{#if Object.keys(appliedFilters).length}
     <div class="mt-2 flex flex-wrap gap-1">
-        {#each appliedFilters as filter}
-            <div
+        {#each Object.entries(appliedFilters) as [filter, onClick]}
+            <button
                 class="flex cursor-pointer items-center gap-1.5 rounded-full bg-primary px-2 py-0.5 text-xs text-white"
+                onclick={onClick}
             >
                 <span>{filter}</span>
                 <XIcon size={14} />
-            </div>
+            </button>
         {/each}
+        <!-- TODO: Add reset filter  -->
     </div>
 {/if}

src/lib/domain/applied-filters.svelte

@@ -72,7 +72,10 @@
         </div>
     </div>
 
-    <AppliedFilters />
+    {#if $agenciesQuery.data}
+        <AppliedFilters agencies={$agenciesQuery.data} />
+    {/if}
+
     {#if $appartmentsQuery.isLoading}
         <AppartmentsSkeleton />
     {:else if $appartmentsQuery.isError}
@@ -81,9 +84,9 @@
         {#if $appartmentsQuery.data.length}
             <AppartmentsList appartments={$appartmentsQuery.data} />
         {:else}
-            <ErrorBanner Icon={SquirrelIcon}
-                >No results found! Try changing the filters or performing a different search!</ErrorBanner
-            >
+            <ErrorBanner Icon={SquirrelIcon}>
+                No results found! Try changing the filters or performing a different search!
+            </ErrorBanner>
         {/if}
     {/if}
 </div>