mejorar pagepicker

src/components/Modal.svelte

@@ -21,8 +21,8 @@
   <div class="backdrop" />
 
   <div class="content-alignment" on:click={click} on:keydown={keydown}>
-    <div class="content">
+    <div class="content shadow-xl">
-      <h3 id="modal-title">
+      <h3 class="text-2xl" id="modal-title">
         <slot name="title" />
       </h3>
       <slot />
@@ -127,13 +127,6 @@
     background: var(--background);
     padding: 16px 20px;
     border-radius: 16px;
-    min-width: 50%;
-    min-height: 50%;
-
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   h3 {

src/components/PagePicker.svelte

@@ -6,6 +6,7 @@
   import { makeYdocStore } from "../lib/makeYdocStore";
   import { lastUpdated } from "../lib/lastUpdated";
   import { nanoid } from "nanoid";
+  import PlusIcon from "eva-icons/fill/svg/plus.svg";
 
   type Entry = {
     id: string;
@@ -52,14 +53,31 @@
   const deriveEntries = makeYdocStore((_, __, ydoc) => getDocs(ydoc));
 </script>
 
-<input type="text" bind:value={filter} placeholder="Buscar..." autofocus />
+<!-- https://devdojo.com/pines/docs/text-input -->
-<ul>
+<input
-  <button type="button" on:click={() => onChoose(nanoid())}>Página nueva</button
+  type="text"
+  bind:value={filter}
+  placeholder="Buscar..."
+  autofocus
+  class="h-10 w-full rounded-md rounded-b-none border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 placeholder:dark:text-neutral-300"
+/>
+<ul
+  class="flex flex-col rounded-b-md border border-t-0 border-neutral-300 bg-white p-2 dark:border-neutral-600 dark:bg-neutral-700"
 >
-  {#each sortedEntries as entry}
+  <button
+    type="button"
+    class="flex items-center gap-2 rounded px-2 py-2 text-left hover:bg-neutral-200 dark:hover:bg-neutral-600"
+    on:click={() => onChoose(nanoid())}
+  >
+    <PlusIcon class="w-6 fill-current" />
+    Página nueva
+  </button>
+  {#each sortedEntries as entry, index (entry.id)}
     <li>
-      <button type="button" on:click={() => onChoose(entry.id)}
+      <button
-        >{entry.title ?? entry.id}</button
+        type="button"
+        class="flex w-full items-center gap-2 rounded px-2 py-2 text-left hover:bg-neutral-200 dark:hover:bg-neutral-600"
+        on:click={() => onChoose(entry.id)}>{entry.title ?? entry.id}</button
       >
     </li>
   {/each}