moves meilisearch indexing to pocketbase

web/src/lib/components/base/search.svelte

@@ -17,6 +17,7 @@
     export let items: SearchItem[] = [];
     export let placeholder: string = "Search...";
     export let large: boolean = false;
+    export let extraClasses: string = "";
 
     const dispatch = createEventDispatcher();
 
@@ -53,13 +54,13 @@
     }
 </script>
 
-<div class="relative text-gray-600">
+<div class="relative text-gray-600 {extraClasses}">
     <span class="absolute top-1/2 -translate-y-1/2 left-0 pl-4">
         <i class="fa fa-search" class:text-xl={large}></i>
     </span>
     {#if value.length > 0}
         <button
-            class="absolute top-1/2 -translate-y-1/2 right-12 h-6 w-6 mr-4 hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
+            class="absolute top-1/2 -translate-y-1/2 right-0 h-6 w-6 mr-4 hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
             on:click={clear}
             in:fade={{ duration: 150 }}
             out:fade={{ duration: 150 }}
@@ -72,12 +73,13 @@
         name="q"
         autocomplete="off"
         extraClasses="{large
-            ? 'pl-12 text-xl min-w-80 w-[33vw] max-w-[532px] rounded-xl'
+            ? 'pl-12 py-4 text-xl min-w-80 w-[33vw] max-w-[532px] rounded-xl'
             : 'pl-10'}"
         {placeholder}
         bind:value
         on:input={onSearchType}
         on:focusin={() => (searching = true)}
+        on:focusout={() => (searching = false)}
     ></TextField>
 
     {#if dropDownOpen}
@@ -92,7 +94,7 @@
                 <li
                     class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
                     tabindex="0"
-                    on:mouseup|stopPropagation={() => handleItemClick(item)}
+                    on:mousedown|stopPropagation={() => handleItemClick(item)}
                     on:keydown|stopPropagation={() => handleItemClick(item)}
                 >
                     <i class="fa fa-{item.icon} mr-6"></i>

web/src/lib/components/earth.svelte

@@ -22,7 +22,7 @@ Command: npx @threlte/gltf@2.0.1 static/models/earth.glb
     <slot name="fallback" />
   {:then gltf}
     <!-- Clouds -->
-    <T.Group rotation={[-rotation / 2, rotation / 2, 0]}>
+    <T.Group rotation={[-rotation / 4, rotation / 4, 0]}>
       <T.Mesh
         geometry={gltf.nodes.Icosphere002.geometry}
         material={gltf.materials.Material}
@@ -94,7 +94,7 @@ Command: npx @threlte/gltf@2.0.1 static/models/earth.glb
       position={[0.5, 2, -0.5]}
       scale={0.88}
     >
-      <T.PointLight position={[2, 0, 0]} color="#f4de51" intensity={4.5}
+      <T.PointLight position={[2, 0, 0]} color="#ffffff" intensity={4.5}
       ></T.PointLight>
 
       <T.DirectionalLight color="#f4de51" intensity={2.5} castShadow

web/src/lib/components/nav_bar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import LogoText from "$lib/components/logo/logo_text.svelte";
-    import { logout, currentUser } from "$lib/stores/user_store";
+    import { ms } from "$lib/meilisearch";
+    import { currentUser, logout } from "$lib/stores/user_store";
     import Dropdown from "./base/dropdown.svelte";
 
     const dropdownItems = [

web/src/lib/components/scene.svelte

@@ -16,6 +16,6 @@
     }}
 />
 
-<T.AmbientLight color="0xffffff" intensity={1.1} />
+<T.AmbientLight color="#ffffff" intensity={1.1} />
 
 <Earth rotation={rotation}></Earth>

web/src/lib/components/trail/trail_card.svelte

@@ -27,7 +27,7 @@
     }
 </script>
 
-<div class="trail-card rounded-2xl shadow-md sm:w-72 cursor-pointer">
+<div class="trail-card rounded-2xl border sm:w-72 cursor-pointer" on:mouseenter on:mouseleave role="listitem">
     <div class="w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl">
         <img src={trail.thumbnail} alt="" />
     </div>
@@ -36,7 +36,10 @@
             <div class="flex justify-between items-center">
                 <h4 class="font-semibold text-lg">{trail.name}</h4>
                 {#if $currentUser && $currentUser.id == trail.author && mode == "edit"}
-                    <Dropdown on:change={(e) => handleDropdownClick(trail, e.detail)} items={dropdownItems}></Dropdown>
+                    <Dropdown
+                        on:change={(e) => handleDropdownClick(trail, e.detail)}
+                        items={dropdownItems}
+                    ></Dropdown>
                 {/if}
             </div>
             <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>

web/src/lib/components/trail/trail_list_item.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <li
-    class="flex gap-8 p-4 rounded-xl shadow-md cursor-pointer hover:bg-gray-100 transition-colors"
+    class="flex gap-8 p-4 rounded-xl border cursor-pointer hover:bg-gray-100 transition-colors"
 >
     <div class="shrink-0">
         <img
@@ -36,7 +36,7 @@
             alt=""
         />
     </div>
-    <div class="min-w-0">
+    <div class="min-w-0 basis-full">
         <div class="flex items-center justify-between">
             <h4 class="font-semibold text-lg">{trail.name}</h4>