fix: hashtag extraction and make remote links absolute

islands/KMenu.tsx

@@ -34,6 +34,7 @@ export const KMenu = (
   const activeState = useSignal<"normal" | "loading" | "error" | "input">(
     "normal",
   );
+  const loadingText = useSignal("");
   const activeIndex = useSignal(-1);
 
   const input = useRef<HTMLInputElement>(null);
@@ -74,6 +75,7 @@ export const KMenu = (
 
     menuEntry.cb({
       activeMenu: activeMenuType,
+      loadingText,
       menus,
       activeState,
       commandInput,
@@ -133,8 +135,14 @@ export const KMenu = (
         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 "
-          style={{ gridTemplateColumns: "4em 1fr" }}
+          class={`grid h-12 text-gray-400 ${
+            activeState.value !== "loading" && "border-b"
+          } border-gray-500 `}
+          style={{
+            gridTemplateColumns: activeState.value !== "loading"
+              ? "4em 1fr"
+              : "1fr",
+          }}
         >
           {(activeState.value === "normal" || activeState.value === "input") &&
             (
@@ -156,8 +164,9 @@ export const KMenu = (
               </>
             )}
           {activeState.value === "loading" && (
-            <div class="p-4">
-              Loading...
+            <div class="py-3 px-4 flex items-center gap-2">
+              <icons.IconLoader2 class="animate-spin w-4 h-4" />
+              {loadingText.value || "Loading..."}
             </div>
           )}
         </div>

islands/KMenu/commands.ts

@@ -1,7 +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";
+import { fetchStream, isValidUrl } from "@lib/helpers.ts";
 
 export const menus: Record<string, Menu> = {
   main: {
@@ -28,20 +28,24 @@ export const menus: Record<string, Menu> = {
           state.activeMenu.value = "input_link";
           state.activeState.value = "input";
 
-          const unsub = state.commandInput.subscribe(async (value) => {
+          const unsub = state.commandInput.subscribe((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;
+              fetchStream("/api/articles/create?url=" + value, (chunk) => {
+                console.log({ chunk: chunk.split("\n") });
+                if (chunk.startsWith("id:")) {
+                  state.loadingText.value = "Finished";
+                  setTimeout(() => {
+                    window.location.href = "/articles/" +
+                      chunk.replace("id:", "").trim();
+                  }, 500);
+                } else {
+                  state.loadingText.value = chunk;
+                }
+              });
             }
           });
         },

islands/KMenu/types.ts

@@ -6,6 +6,7 @@ type IconKey = keyof typeof icons;
 export type MenuState = {
   activeMenu: Signal<string>;
   activeState: Signal<"input" | "error" | "normal" | "loading">;
+  loadingText:Signal<string>;
   commandInput: Signal<string>;
   visible: Signal<boolean>;
   menus: Record<string, Menu>;