feat: add icons to kmenu

islands/KMenu.tsx

@@ -3,7 +3,7 @@ import { useRef } from "preact/hooks";
 import { useEventListener } from "@lib/hooks/useEventListener.ts";
 import { menus } from "@islands/KMenu/commands.ts";
 import { MenuEntry } from "@islands/KMenu/types.ts";
-
+import * as icons from "@components/icons.tsx";
 const KMenuEntry = (
   { entry, activeIndex, index }: {
     entry: MenuEntry;
@@ -14,12 +14,13 @@ const KMenuEntry = (
   return (
     <div
       onClick={() => activeIndex.value = index}
-      class={`px-4 py-2 ${
+      class={`px-4 py-2 flex items-center gap-1 ${
         activeIndex.value === index
           ? "bg-gray-100 text-gray-900"
           : "text-gray-400"
       }`}
     >
+      {entry?.icon && icons[entry.icon]({ class: "w-4 h-4 mr-1" })}
       {entry.title}
     </div>
   );
@@ -38,7 +39,7 @@ export const KMenu = (
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
-  const visible = useSignal(false);
+  const visible = useSignal(true);
   if (visible.value === false) {
     setTimeout(() => {
       activeMenuType.value = "main";
@@ -126,11 +127,10 @@ export const KMenu = (
       class={`opacity-${visible.value ? 100 : 0} pointer-events-${
         visible.value ? "auto" : "none"
       } transition grid place-items-center w-full h-full fixed top-0 left-0 z-50`}
-      style={{ background: "#1f1f1f88" }}
+      style={{ background: "#141217ee" }}
     >
       <div
-        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" }}
+        class={`relative w-1/2 max-h-64 max-w-[400px] rounded-2xl shadow-2xl nnoisy-gradient overflow-hidden after:opacity-10 bg-gray-700`}
       >
         <div
           class="grid h-12 text-gray-400 border-b border-gray-500 "
@@ -149,8 +149,9 @@ export const KMenu = (
                   onInput={() => {
                     commandInput.value = input.current?.value || "";
                   }}
+                  style={{ outline: "none !important" }}
                   placeholder="Command"
-                  class="bg-transparent color pl-4 border-0"
+                  class="bg-transparent color pl-4 outline outline outline-2  outline-offset-2"
                 />
               </>
             )}

islands/KMenu/commands.ts

@@ -18,6 +18,7 @@ export const menus: Record<string, Menu> = {
       {
         title: "Create new article",
         meta: "",
+        icon: "IconSquareRoundedPlus",
         cb: (state) => {
           state.menus["input_link"] = {
             title: "Link:",
@@ -48,6 +49,7 @@ export const menus: Record<string, Menu> = {
       },
       {
         title: "Clear Cache",
+        icon: "IconRefresh",
         cb: async (state) => {
           state.activeState.value = "loading";
           await fetch("/api/cache", {
@@ -60,6 +62,7 @@ export const menus: Record<string, Menu> = {
       {
         title: "Add Movie infos",
         meta: "",
+        icon: "IconReportSearch",
         cb: async (state, context) => {
           state.activeState.value = "loading";
           const movie = context as Movie;

islands/KMenu/types.ts

@@ -1,4 +1,7 @@
 import { Signal } from "@preact/signals";
+import * as icons from "@components/icons.tsx";
+
+type IconKey = keyof typeof icons;
 
 export type MenuState = {
   activeMenu: Signal<string>;
@@ -10,10 +13,10 @@ export type MenuState = {
 
 export type MenuEntry = {
   cb: (state: MenuState, context: unknown) => void;
+  icon?: IconKey;
   meta?: string;
   visible?: boolean | ((context: unknown) => boolean);
   title: string;
-  icon?: string;
 };
 
 export type Menu = {