From 2c279bb68f2dabd0ee1417c8a2bef071b48c4a3a Mon Sep 17 00:00:00 2001
From: Dmytro Kondakov <dmytro@attio.com>
Date: Sun, 23 Mar 2025 19:10:18 +0100
Subject: [PATCH] refactor(frontend): clean up App component and improve search
 functionality

---
 frontend/src-tauri/src/lib.rs |  1 +
 frontend/src/App.tsx          | 97 +++++++++++++++--------------------
 2 files changed, 42 insertions(+), 56 deletions(-)

diff --git a/frontend/src-tauri/src/lib.rs b/frontend/src-tauri/src/lib.rs
index daa3d04..b30297d 100644
--- a/frontend/src-tauri/src/lib.rs
+++ b/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 {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 078f7d9..6d901c4 100644
--- a/frontend/src/App.tsx
+++ b/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,40 +45,34 @@ function App() {
 
     return (
         <main class="container pt-2">
-            <div class="px-4">
-                <Search
-                    triggerMode="focus"
-                    options={searchResults() ?? []}
-                    onInputChange={onInputChange}
-                    onChange={(item) => {
-                        if (item?.ImageID == null) {
-                            console.error("ImageID was null");
-                            return;
-                        }
+            <Search
+                triggerMode="focus"
+                options={searchResults() ?? []}
+                onInputChange={onInputChange}
+                onChange={(item) => {
+                    if (item?.ImageID == null) {
+                        console.error("ImageID was null");
+                        return;
+                    }
 
-                        nav(`/image/${item.ImageID}`);
-                    }}
-                    optionValue="ID"
-                    optionLabel="ImageText"
-                    placeholder="Search for stuff..."
-                    itemComponent={(props) => (
-                        <Search.Item
-                            item={props.item}
-                            class={clsx(
-                                "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 ?? ""}
-                            </Search.ItemLabel>
-                        </Search.Item>
-                    )}
-                >
-                    <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"
+                    nav(`/image/${item.ImageID}`);
+                }}
+                optionValue="ID"
+                optionLabel="ImageText"
+                placeholder="Search for stuff..."
+                itemComponent={(props) => (
+                    <Search.Item
+                        item={props.item}
+                        class="col-span-3 row-span-3 bg-red-200 rounded-xl"
                     >
+                        <Search.ItemLabel class="mx-[-100px]">
+                            {props.item.rawValue.ImageText ?? ""}
+                        </Search.ItemLabel>
+                    </Search.Item>
+                )}
+            >
+                <div class="px-4">
+                    <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">
                         <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> */}
-            <ImageViewer />
-            <div class="px-4 mt-4 bg-white rounded-t-2xl">
+                </div>
+
+                <div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
+                    <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> */}
+                </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 class="w-full border-t h-10 bg-white px-4 border-neutral-100">
+            </div> */}
+            <div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
                 footer
             </div>
         </main>