Tweak some layout stuff

src/app/components/GroupCompose.svelte

@@ -160,7 +160,7 @@
   })
 </script>
 
-<div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-neutral">
+<div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-base-100">
   <Button on:click={addFile} class="bg-base-300 rounded-box w-10 h-10 center">
     {#if uploading}
       <span class="loading loading-spinner loading-xs"></span>

src/app/components/InfoNip29.svelte

@@ -24,7 +24,7 @@
     as a user.
   </p>
   {#each DEFAULT_RELAYS as url}
-    <div class="alert !flex items-center justify-between">
+    <div class="card2 card2-alt card2-sm flex items-center justify-between">
       <div class="flex items-center gap-2">
         <Icon icon="remote-controller-minimalistic" />
         {displayRelayUrl(url)}

src/app/components/PrimaryNav.svelte

@@ -37,7 +37,7 @@
   }
 </script>
 
-<div class="relative w-14 bg-base-100 flex-shrink-0" bind:this={element}>
+<div class="relative w-14 bg-base-100 flex-shrink-0 pt-4" bind:this={element}>
   <div
     class="absolute z-nav-active ml-2 h-[144px] w-12 bg-base-300"
     style={`top: ${$activeOffset}px`} />

src/app/state.ts

@@ -204,7 +204,6 @@ export const load = (request: SubscribeRequest) =>
     const events: TrustedEvent[] = []
 
     sub.emitter.on("event", (url: string, e: SignedEvent) => events.push(e))
-
     sub.emitter.on("complete", () => resolve(events))
   })
 
@@ -339,6 +338,15 @@ export const {
   }),
 })
 
+export const searchRelays = derived(relays, $relays =>
+  createSearch($relays, {
+    getValue: (relay: Relay) => relay.url,
+    fuseOptions: {
+      keys: ["url", "name", {name: "description", weight: 0.3}],
+    },
+  }),
+)
+
 // Handles
 
 export const handles = writable<Handle[]>([])