From 2d6641abdb4510015bee36aa4d9f3238775207d0 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 22 Aug 2024 23:32:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Update=20layout=20styles=20and?=
 =?UTF-8?q?=20add=20clear=20search=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte |  6 +++---
 src/routes/+page.svelte   | 18 +++++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index febb947..940052b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,7 +30,7 @@
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
-    import WarningNewApi from '@/components/warningNewApi.svelte';
+  import WarningNewApi from '@/components/warningNewApi.svelte';
 </script>
 
 <ModeWatcher />
@@ -39,10 +39,10 @@
   <aside
     class={cn(
       'z-50 w-full overflow-y-auto overflow-x-hidden',
-      'dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-56 md:pb-10',
+      'dark:border-neutral-800 md:fixed md:left-0 md:w-56 md:pb-0 md:h-[calc(100vh-63px)]',
       'bg-white dark:bg-neutral-900',
       'backdrop-blur-md opacity-95',
-      'border-r border-neutral-200 dark:border-neutral-800'
+      'border-b md:border-r border-neutral-200 dark:border-neutral-800'
     )}
   >
     <div class="md:px-3 md:py-6">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f56dcf1..021e713 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,7 +18,7 @@
   const searchParam = queryParam('search');
 
   // Icons:
-  import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
+  import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon, TrashIcon } from 'lucide-svelte';
   import { buttonStyles } from '@/ui/styles';
 
   let sorted: boolean = false;
@@ -104,10 +104,22 @@
 />
 
 <Container>
-  <div class="flex items-center justify-end mb-4">
+  <div class={cn('flex items-center mb-4 justify-end', searchTerm.length > 0 && 'justify-between')}>
+    {#if searchTerm.length > 0}
+      <button
+        class={cn(
+          'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
+          filteredSvgs.length === 0 && 'hidden'
+        )}
+        on:click={() => clearSearch()}
+      >
+        <TrashIcon size={16} strokeWidth={2} class="mr-1" />
+        <span>Clear results</span>
+      </button>
+    {/if}
     <button
       class={cn(
-        'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
+        'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
         filteredSvgs.length === 0 && 'hidden'
       )}
       on:click={() => sort()}