build very basic ui

frontend/package.json

@@ -21,7 +21,8 @@
     "@tauri-apps/plugin-dialog": "~2",
     "@tauri-apps/plugin-opener": "^2",
     "clsx": "^2.1.1",
-    "solid-js": "^1.9.3"
+    "solid-js": "^1.9.3",
+    "tailwind-scrollbar-hide": "^2.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

frontend/src-tauri/src/lib.rs

@@ -117,8 +117,8 @@ pub fn run() {
             let win_builder =
               WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
                 .hidden_title(true)
-                .inner_size(480.0, 320.0);
-      
+                .inner_size(480.0, 360.0)
+                .resizable(false);
             // set transparent title bar only when building for macOS
             #[cfg(target_os = "macos")]
             let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);
@@ -135,9 +135,9 @@ pub fn run() {
               unsafe {
                 let bg_color = NSColor::colorWithRed_green_blue_alpha_(
                     nil,
-                    250.0 / 255.0,
-                    250.0 / 255.0,
-                    250.5 / 255.0,
+                    245.0 / 255.0,
+                    245.0 / 255.0,
+                    245.0 / 255.0,
                     1.0,
                 );
                 ns_window.setBackgroundColor_(bg_color);

frontend/src/App.tsx

@@ -27,7 +27,8 @@ function App() {
   };
 
   return (
-    <main class="container px-4 pt-2 pb-4">
+    <main class="container pt-2">
+      <div class="px-4">
         <Search
           triggerMode="focus"
           options={options()}
@@ -35,7 +36,7 @@ function App() {
           onChange={(result) => setEmoji(result)}
           optionValue="name"
           optionLabel="name"
-        placeholder="Search an emoji…"
+          placeholder="Search for stuff..."
           itemComponent={(props) => (
             <Search.Item
               item={props.item}
@@ -80,8 +81,25 @@ function App() {
             </Search.Content>
           </Search.Portal>
         </Search>
-      <div class="mt-4 text-base leading-none">
+      </div>
+      {/* <div class="mt-4 text-base leading-none">
         Emoji selected: {emoji()?.emoji} {emoji()?.name}
+      </div> */}
+      <div class="px-4 mt-4 bg-white rounded-t-2xl">
+        <div class="h-[254px] overflow-scroll scrollbar-hide">
+          <div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
+            <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" />
+            <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+            <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" />
+          </div>
+        </div>
+      </div>
+      <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
+        footer
       </div>
     </main>
   );

frontend/src/index.css

@@ -10,7 +10,7 @@
 }
 
 :root {
-  @apply bg-neutral-50 text-black rounded-xl;
+  @apply bg-neutral-100 text-black rounded-xl;
   font-family: Manrope, sans-serif;
   font-size: 16px;
   line-height: 24px;

frontend/tailwind.config.js

@@ -8,5 +8,8 @@ export default {
       },
     },
   },
-  plugins: [require("@kobalte/tailwindcss")],
+  plugins: [
+    require("@kobalte/tailwindcss"),
+    require("tailwind-scrollbar-hide"),
+  ],
 };