feat: add initial add article command

islands/KMenu.tsx

@@ -4,10 +4,6 @@ import { useEventListener } from "@lib/hooks/useEventListener.ts";
 import { menus } from "@islands/KMenu/commands.ts";
 import { MenuEntry } from "@islands/KMenu/types.ts";
 
-function filterMenu(menu: MenuEntry[], activeMenu?: string) {
-  return menu;
-}
-
 const KMenuEntry = (
   { entry, activeIndex, index }: {
     entry: MenuEntry;
@@ -34,15 +30,42 @@ export const KMenu = (
 ) => {
   const activeMenuType = useSignal(type);
   const activeMenu = menus[activeMenuType.value || "main"];
-
   const activeState = useSignal<"normal" | "loading" | "error">("normal");
-
   const activeIndex = useSignal(-1);
 
-  const visible = useSignal(false);
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
+  const visible = useSignal(false);
+  if (visible.value === false) {
+    setTimeout(() => {
+      activeMenuType.value = "main";
+      activeState.value = "normal";
+      if (input.current) {
+        input.current.value = "";
+      }
+      commandInput.value = "";
+    }, 100);
+  }
+
+  const entries = activeMenu?.entries?.filter((entry) => {
+    const entryVisible = typeof entry["visible"] === "boolean"
+      ? entry.visible
+      : typeof entry["visible"] === "function"
+      ? entry.visible?.(context)
+      : true;
+
+    const search = commandInput?.value?.toLowerCase();
+    const searchMatches = entry.title.toLowerCase().includes(search) ||
+      entry.meta?.toLowerCase()?.includes(search);
+
+    return entryVisible && searchMatches;
+  });
+
+  if (entries.length === 1) {
+    activeIndex.value = 0;
+  }
+
   function activateEntry(menuEntry?: MenuEntry) {
     if (!menuEntry) return;
 
@@ -50,6 +73,7 @@ export const KMenu = (
       activeMenu: activeMenuType,
       menus,
       activeState,
+      commandInput,
       visible,
     }, context);
   }
@@ -60,7 +84,6 @@ export const KMenu = (
     }
 
     if (ev.key === "ArrowDown") {
-      const entries = filterMenu(activeMenu.entries);
       const index = activeIndex.value;
       if (index + 1 >= entries.length) {
         activeIndex.value = 0;
@@ -70,12 +93,10 @@ export const KMenu = (
     }
 
     if (ev.key === "Enter") {
-      const entries = filterMenu(activeMenu.entries);
       activateEntry(entries[activeIndex.value]);
     }
 
     if (ev.key === "ArrowUp") {
-      const entries = filterMenu(activeMenu.entries);
       const index = activeIndex.value;
       if (index - 1 < 0) {
         activeIndex.value = entries.length - 1;
@@ -140,7 +161,7 @@ export const KMenu = (
         {activeState.value === "normal" &&
           (
             <div class="" style={{ maxHeight: "12rem", overflowY: "auto" }}>
-              {filterMenu(activeMenu.entries, input.current?.value).map(
+              {entries.map(
                 (k, index) => {
                   return (
                     <KMenuEntry

islands/KMenu/commands.ts

@@ -1,6 +1,7 @@
 import { Menu } from "@islands/KMenu/types.ts";
 import { Movie } from "@lib/resource/movies.ts";
 import { TMDBMovie } from "@lib/types.ts";
+import { isValidUrl } from "@lib/helpers.ts";
 
 export const menus: Record<string, Menu> = {
   main: {
@@ -14,6 +15,35 @@ export const menus: Record<string, Menu> = {
         },
         visible: () => false,
       },
+      {
+        title: "Create new article",
+        meta: "",
+        cb: (state) => {
+          state.menus["input_link"] = {
+            title: "Link:",
+            entries: [],
+          };
+          state.activeMenu.value = "input_link";
+
+          const unsub = state.commandInput.subscribe(async (value) => {
+            if (isValidUrl(value)) {
+              unsub();
+
+              state.activeState.value = "loading";
+
+              const response = await fetch("/api/articles/create?url=" + value);
+              const newArticle = await response.json();
+
+              if (newArticle?.id) {
+                window.location.href = "/articles/" + newArticle.id;
+              }
+
+              state.visible.value = false;
+            }
+          });
+        },
+        visible: () => true,
+      },
       {
         title: "Clear Cache",
         cb: async (state) => {
@@ -59,13 +89,14 @@ export const menus: Record<string, Menu> = {
             })),
           };
 
-          console.log({ state });
-
           state.activeMenu.value = menuID;
 
           state.activeState.value = "normal";
         },
-        visible: () => false,
+        visible: () => {
+          const loc = globalThis["location"];
+          return loc?.pathname?.includes("movie");
+        },
       },
       {
         title: "Reload Page",

islands/KMenu/types.ts

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