feat: better layout in a lot of places

islands/KMenu.tsx

@@ -30,7 +30,9 @@ export const KMenu = (
 ) => {
   const activeMenuType = useSignal(type);
   const activeMenu = menus[activeMenuType.value || "main"];
-  const activeState = useSignal<"normal" | "loading" | "error">("normal");
+  const activeState = useSignal<"normal" | "loading" | "error" | "input">(
+    "normal",
+  );
   const activeIndex = useSignal(-1);
 
   const input = useRef<HTMLInputElement>(null);
@@ -127,14 +129,14 @@ export const KMenu = (
       style={{ background: "#1f1f1f88" }}
     >
       <div
-        class={`relative w-1/2 max-h-64 rounded-2xl shadow-2xl nnoisy-gradient overflow-hidden after:opacity-10 border border-gray-500`}
+        class={`relative w-1/2 max-h-64 max-w-[400px] rounded-2xl shadow-2xl nnoisy-gradient overflow-hidden after:opacity-10`}
         style={{ background: "#1f1f1f" }}
       >
         <div
           class="grid h-12 text-gray-400 border-b border-gray-500 "
           style={{ gridTemplateColumns: "4em 1fr" }}
         >
-          {activeState.value === "normal" &&
+          {(activeState.value === "normal" || activeState.value === "input") &&
             (
               <>
                 <div class="grid place-items-center border-r border-gray-500">
@@ -161,6 +163,11 @@ export const KMenu = (
         {activeState.value === "normal" &&
           (
             <div class="" style={{ maxHeight: "12rem", overflowY: "auto" }}>
+              {entries?.length === 0 && (
+                <div class="text-gray-400 px-4 py-2">
+                  No Entries
+                </div>
+              )}
               {entries.map(
                 (k, index) => {
                   return (