refactor(frontend): clean up App component and improve search functionality

frontend/src-tauri/src/lib.rs

@@ -7,6 +7,7 @@ use std::sync::Arc;
 use std::sync::Mutex;
 use tauri::AppHandle;
 use tauri::Emitter;
+use tauri::TitleBarStyle;
 use tauri::{WebviewUrl, WebviewWindowBuilder};
 
 struct WatcherState {

frontend/src/App.tsx

@@ -1,11 +1,10 @@
 import { Search } from "@kobalte/core/search";
-import { A, useNavigate } from "@solidjs/router";
+import { useNavigate } from "@solidjs/router";
 import { IconRefresh, IconSearch } from "@tabler/icons-solidjs";
 import clsx from "clsx";
 import Fuse from "fuse.js";
-import { createEffect, createResource, createSignal, For } from "solid-js";
+import { createEffect, createResource, createSignal } from "solid-js";
 import { getUserImages } from "./network";
-import { ImageViewer } from "./components/ImageViewer";
 
 type UserImages = Awaited<ReturnType<typeof getUserImages>>;
 
@@ -46,7 +45,6 @@ function App() {
 
     return (
         <main class="container pt-2">
-            <div class="px-4">
             <Search
                 triggerMode="focus"
                 options={searchResults() ?? []}
@@ -65,10 +63,7 @@ function App() {
                 itemComponent={(props) => (
                     <Search.Item
                         item={props.item}
-                            class={clsx(
+                        class="col-span-3 row-span-3 bg-red-200 rounded-xl"
-                                "text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-full box-border",
-                                "hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
-                            )}
                     >
                         <Search.ItemLabel class="mx-[-100px]">
                             {props.item.rawValue.ImageText ?? ""}
@@ -76,10 +71,8 @@ function App() {
                     </Search.Item>
                 )}
             >
-                    <Search.Control
+                <div class="px-4">
-                        class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
+                    <Search.Control class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500">
-                        aria-label="Emoji"
-                    >
                         <Search.Indicator
                             class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
                             loadingComponent={
@@ -97,24 +90,16 @@ function App() {
                         </Search.Indicator>
                         <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
                     </Search.Control>
-                    <Search.Portal>
-                        <Search.Content
-                            class="h-[254px] overflow-scroll scrollbar-hide"
-                            onCloseAutoFocus={(e) => e.preventDefault()}
-                        >
-                            <Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
-                            <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
-                                No results found
-                            </Search.NoResult>
-                        </Search.Content>
-                    </Search.Portal>
-                </Search>
                 </div>
-            {/* <div class="mt-4 text-base leading-none">
+
-        Emoji selected: {emoji()?.emoji} {emoji()?.name}
+                <div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
-      </div> */}
+                    <Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
-            <ImageViewer />
+                    {/* <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
-            <div class="px-4 mt-4 bg-white rounded-t-2xl">
+                        No results found
+                    </Search.NoResult> */}
+                </div>
+            </Search>
+            {/* <div class="px-4 mt-4 bg-white rounded-t-2xl">
                 <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
                 <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
                 <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
@@ -122,7 +107,7 @@ function App() {
                 <div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
                 <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
                 <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
-                {/* {JSON.stringify(images())} */}
+
                 <For each={images()}>
                     {(image) => (
                         <A href={`/image/${image.ID}`}>
@@ -134,8 +119,8 @@ function App() {
                         </A>
                     )}
                 </For>
-            </div>
+            </div> */}
-            <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
+            <div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
                 footer
             </div>
         </main>