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 (

islands/KMenu/commands.ts

@@ -23,7 +23,9 @@ export const menus: Record<string, Menu> = {
             title: "Link:",
             entries: [],
           };
+
           state.activeMenu.value = "input_link";
+          state.activeState.value = "input";
 
           const unsub = state.commandInput.subscribe(async (value) => {
             if (isValidUrl(value)) {

islands/KMenu/types.ts

@@ -2,7 +2,7 @@ import { Signal } from "@preact/signals";
 
 export type MenuState = {
   activeMenu: Signal<string>;
-  activeState: Signal<"error" | "normal" | "loading">;
+  activeState: Signal<"input" | "error" | "normal" | "loading">;
   commandInput: Signal<string>;
   visible: Signal<boolean>;
   menus: Record<string, Menu>;