feat: column manager

apps/desktop2/package.json

@@ -32,6 +32,7 @@
     "slate": "^0.102.0",
     "slate-react": "^0.102.0",
     "sonner": "^1.4.3",
+    "use-debounce": "^10.0.0",
     "virtua": "^0.29.0"
   },
   "devDependencies": {

apps/desktop2/src/components/col.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  LogicalPosition,
+  LogicalSize,
+  getCurrent,
+} from "@tauri-apps/api/window";
+import { Webview } from "@tauri-apps/api/webview";
+import { LumeColumn } from "@lume/types";
+import { useDebouncedCallback } from "use-debounce";
+import { type UnlistenFn } from "@tauri-apps/api/event";
+
+export function Col({
+  column,
+  account,
+  isScroll,
+}: {
+  column: LumeColumn;
+  account: string;
+  isScroll: boolean;
+}) {
+  const mainWindow = useMemo(() => getCurrent(), []);
+  const childWindow = useRef<Webview>(null);
+  const container = useRef<HTMLDivElement>(null);
+  const initialRect = useRef<DOMRect>(null);
+  const unlisten = useRef<UnlistenFn>(null);
+  const handleResize = useDebouncedCallback(() => {
+    if (!childWindow.current) return;
+    const newRect = container.current.getBoundingClientRect();
+    if (initialRect.current.height !== newRect.height) {
+      childWindow.current.setSize(
+        new LogicalSize(newRect.width, newRect.height),
+      );
+    }
+  }, 500);
+
+  const trackResize = useCallback(async () => {
+    unlisten.current = await mainWindow.onResized(() => {
+      handleResize();
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!childWindow.current) return;
+    if (isScroll) {
+      const newRect = container.current.getBoundingClientRect();
+      childWindow.current.setPosition(
+        new LogicalPosition(newRect.x, newRect.y),
+      );
+    }
+  }, [isScroll]);
+
+  useEffect(() => {
+    if (!mainWindow) return;
+    if (!container.current) return;
+    if (childWindow.current) return;
+
+    const rect = container.current.getBoundingClientRect();
+    const name = `column-${column.name.toLowerCase().replace(/\W/g, "")}`;
+    const url = column.name + `?account=${account}&name=${column.name}`;
+
+    // create new webview
+    initialRect.current = rect;
+    childWindow.current = new Webview(mainWindow, name, {
+      url,
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      transparent: true,
+      userAgent: "Lume/4.0",
+    });
+
+    // track window resize event
+    trackResize();
+
+    return () => {
+      if (unlisten.current) unlisten.current();
+      if (childWindow.current) childWindow.current.close();
+    };
+  }, []);
+
+  return <div ref={container} className="h-full w-[440px] shrink-0 p-2" />;
+}

apps/desktop2/src/components/toolbar.tsx

@@ -0,0 +1,39 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export function Toolbar({
+  moveLeft,
+  moveRight,
+}: {
+  moveLeft: () => void;
+  moveRight: () => void;
+}) {
+  const [domReady, setDomReady] = useState(false);
+
+  useEffect(() => {
+    setDomReady(true);
+  }, []);
+
+  return domReady
+    ? createPortal(
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => moveLeft()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowLeftIcon className="size-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveRight()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowRightIcon className="size-5" />
+          </button>
+        </div>,
+        document.getElementById("toolbar"),
+      )
+    : null;
+}

apps/desktop2/src/routes/$account.home.tsx

@@ -1,17 +1,17 @@
+import { Col } from "@/components/col";
+import { Toolbar } from "@/components/toolbar";
 import { LoaderIcon } from "@lume/icons";
-import { Column } from "@lume/ui";
 import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { VList, VListHandle } from "virtua";
 
 export const Route = createFileRoute("/$account/home")({
   component: Screen,
   pendingComponent: Pending,
   loader: async () => {
     const columns = [
-      { name: "Tauri v2", content: "https://beta.tauri.app" },
-      { name: "Tauri v1", content: "https://tauri.app" },
-      { name: "Lume", content: "https://lume.nu" },
-      { name: "Snort", content: "https://snort.social" },
+      { name: "Newsfeed", content: "/columns/newsfeed" },
+      { name: "Default", content: "/columns/default" },
     ];
     return columns;
   },
@@ -19,22 +19,71 @@ export const Route = createFileRoute("/$account/home")({
 
 function Screen() {
   const data = Route.useLoaderData();
+  const search = Route.useSearch();
+  const vlistRef = useRef<VListHandle>(null);
+
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isScroll, setIsScroll] = useState(false);
 
+  const moveLeft = () => {
+    const prevIndex = Math.max(selectedIndex - 1, 0);
+    setSelectedIndex(prevIndex);
+    vlistRef.current.scrollToIndex(prevIndex, {
+      align: "start",
+    });
+  };
+
+  const moveRight = () => {
+    const nextIndex = Math.min(selectedIndex + 1, data.length - 1);
+    setSelectedIndex(nextIndex);
+    vlistRef.current.scrollToIndex(nextIndex, {
+      align: "end",
+    });
+  };
+
   return (
-    <div className="relative h-full w-full">
-      <div
-        onScroll={() => setIsScroll((state) => !state)}
-        className="flex h-full w-full flex-nowrap gap-3 overflow-x-auto px-3 pb-3 pt-1.5 focus:outline-none"
+    <div className="h-full w-full">
+      <VList
+        ref={vlistRef}
+        horizontal
+        itemSize={440}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (!vlistRef.current) return;
+          switch (e.code) {
+            case "ArrowUp":
+            case "ArrowLeft": {
+              e.preventDefault();
+              moveLeft();
+              break;
+            }
+            case "ArrowDown":
+            case "ArrowRight": {
+              e.preventDefault();
+              moveRight();
+              break;
+            }
+          }
+        }}
+        onScroll={() => {
+          setIsScroll(true);
+        }}
+        onScrollEnd={() => {
+          setIsScroll(false);
+        }}
+        className="scrollbar-none h-full w-full overflow-x-auto focus:outline-none"
       >
         {data.map((column, index) => (
-          <Column
+          <Col
             key={column.name + index}
             column={column}
+            // @ts-ignore, yolo !!!
+            account={search.acccount}
             isScroll={isScroll}
           />
         ))}
-      </div>
+      </VList>
+      <Toolbar moveLeft={moveLeft} moveRight={moveRight} />
     </div>
   );
 }

apps/desktop2/src/routes/$account.tsx

@@ -1,4 +1,9 @@
-import { ComposeFilledIcon, PlusIcon } from "@lume/icons";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ComposeFilledIcon,
+  PlusIcon,
+} from "@lume/icons";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
 import { Accounts } from "@/components/accounts";
@@ -10,7 +15,7 @@ export const Route = createFileRoute("/$account")({
 
 function App() {
   const ark = useArk();
-  const context = Route.useRouteContext();
+  const { platform } = Route.useRouteContext();
 
   return (
     <div className="flex h-screen w-screen flex-col">
@@ -18,7 +23,7 @@ function App() {
         data-tauri-drag-region
         className={cn(
           "flex h-11 shrink-0 items-center justify-between pr-2",
-          context.platform === "macos" ? "ml-2 pl-20" : "pl-4",
+          platform === "macos" ? "ml-2 pl-20" : "pl-4",
         )}
       >
         <div className="flex items-center gap-3">
@@ -40,6 +45,7 @@ function App() {
             <ComposeFilledIcon className="size-4" />
             New post
           </button>
+          <div id="toolbar" />
         </div>
       </div>
       <div className="flex-1">

apps/desktop2/src/routes/default.lazy.tsx

@@ -0,0 +1,16 @@
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/default")({
+  component: Screen,
+});
+
+function Screen() {
+  return (
+    <Column.Root>
+      <Column.Content className="flex flex-col items-center justify-center">
+        <p>TODO</p>
+      </Column.Content>
+    </Column.Root>
+  );
+}

apps/desktop2/src/routes/newsfeed.lazy.tsx

@@ -1,19 +1,22 @@
 import { RepostNote } from "@/components/repost";
 import { Suggest } from "@/components/suggest";
 import { TextNote } from "@/components/text";
-import { useArk } from "@lume/ark";
+import { useEvents } from "@lume/ark";
 import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";
 import { Column } from "@lume/ui";
-import { FETCH_LIMIT } from "@lume/utils";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link, useParams } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 import { Virtualizer } from "virtua";
 
-export function Newsfeed() {
-  const ark = useArk();
+export const Route = createLazyFileRoute("/newsfeed")({
+  component: Screen,
+});
+
+export function Screen() {
   // @ts-ignore, just work!!!
-  const { account } = useParams({ strict: false });
+  const { name, account } = Route.useSearch();
+  const { t } = useTranslation();
   const {
     data,
     hasNextPage,
@@ -21,26 +24,7 @@ export function Newsfeed() {
     isRefetching,
     isFetchingNextPage,
     fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["local_newsfeed", account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_events(
-        "local",
-        FETCH_LIMIT,
-        pageParam,
-        true,
-      );
-      return events;
-    },
-    getNextPageParam: (lastPage) => {
-      const lastEvent = lastPage?.at(-1);
-      if (!lastEvent) return;
-      return lastEvent.created_at - 1;
-    },
-    select: (data) => data?.pages.flatMap((page) => page),
-    refetchOnWindowFocus: false,
-  });
+  } = useEvents("local", account);
 
   const renderItem = (event: Event) => {
     if (!event) return;
@@ -54,7 +38,7 @@ export function Newsfeed() {
 
   return (
     <Column.Root>
-      <Column.Header title="Newsfeed" />
+      <Column.Header name={name} />
       <Column.Content>
         {isLoading || isRefetching ? (
           <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
@@ -64,15 +48,10 @@ export function Newsfeed() {
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
               <InfoIcon className="size-6" />
-              <p>
-                Empty newsfeed. Or you view the{" "}
-                <Link
-                  to="/$account/home"
-                  className="text-blue-500 hover:text-blue-600"
-                >
-                  Global Newsfeed
-                </Link>
-              </p>
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
             </div>
             <Suggest />
           </div>