feat: readd default columns

2024-09-29 16:30:55 +00:00 · 2024-03-20 15:12:54 +07:00 · 2024-03-20 15:12:54 +07:00 · cb565ff35b
commit cb565ff35b
parent 5d59040224
20 changed files with 580 additions and 79 deletions
--- a/apps/desktop2/package.json
+++ b/apps/desktop2/package.json
@ -24,6 +24,7 @@
    "@tanstack/react-router": "^1.20.0",
    "i18next": "^23.10.1",
    "i18next-resources-to-backend": "^1.2.0",
+    "nanoid": "^5.0.6",
    "nostr-tools": "^2.3.1",
    "react": "^18.2.0",
    "react-currency-input-field": "^3.8.0",
--- a/apps/desktop2/src/components/col.tsx
+++ b/apps/desktop2/src/components/col.tsx
@ -15,7 +15,7 @@ export function Col({
  const window = useMemo(() => getCurrent(), []);
  const container = useRef<HTMLDivElement>(null);

-  const [webview, setWebview] = useState("");
+  const [webview, setWebview] = useState<string>(null);

  const createWebview = async () => {
    const rect = container.current.getBoundingClientRect();
@ -36,6 +36,7 @@ export function Col({
  };

  const closeWebview = async () => {
+    if (!webview) return;
    await invoke("close_column", {
      label: webview,
    });
@ -67,7 +68,7 @@ export function Col({
    return () => {
      closeWebview();
    };
-  }, [window]);
+  }, []);

  return <div ref={container} className="h-full w-[440px] shrink-0 p-2" />;
 }
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@ -15,7 +15,7 @@ export const Route = createFileRoute("/$account/home")({

 const COLS: LumeColumn[] = [
  { id: 1, name: "Newsfeed", content: "/newsfeed" },
-  { id: 2, name: "Lume Store", content: "/store/official" },
+  { id: 9999, name: "Lume Store", content: "/store/official" },
 ];

 function Screen() {
@ -43,34 +43,36 @@ function Screen() {
    });
  };

-  const add = async (column: LumeColumn) => {
-    setColumns((prev) => [...prev, column]);
-    vlistRef?.current.scrollToIndex(columns.length);
+  const add = (column: LumeColumn) => {
+    const col = columns.find((item) => item.id === column.id);
+    if (!col) {
+      setColumns((prev) => [...prev, column]);
+    }
  };

-  const remove = async (id: number) => {
+  const remove = (id: number) => {
    setColumns((prev) => prev.filter((t) => t.id !== id));
  };

  useEffect(() => {
-    async function listenUpdateColumn() {
+    const listenColumnEvent = async () => {
      const mainWindow = getCurrent();
-      unlisten.current = await mainWindow.listen<EventColumns>(
-        "columns",
-        (data) => {
-          if (data.payload.type === "add") add(data.payload.column);
-          if (data.payload.type === "remove") remove(data.payload.id);
-        },
-      );
-    }
+      if (!unlisten) {
+        unlisten.current = await mainWindow.listen<EventColumns>(
+          "columns",
+          (data) => {
+            if (data.payload.type === "add") add(data.payload.column);
+            if (data.payload.type === "remove") remove(data.payload.id);
+          },
+        );
+      }
+    };

    // listen for column changes
-    listenUpdateColumn();
+    listenColumnEvent();

    // clean up
-    return () => {
-      if (unlisten.current) unlisten.current();
-    };
+    return () => unlisten.current?.();
  }, []);

  return (
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@ -1,4 +1,4 @@
-import { ComposeFilledIcon, HorizontalDotsIcon } from "@lume/icons";
+import { ComposeFilledIcon, HorizontalDotsIcon, PlusIcon } from "@lume/icons";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
 import { Accounts } from "@/components/accounts";
@ -27,7 +27,7 @@ function App() {
            type="button"
            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
          >
-            <HorizontalDotsIcon className="size-5" />
+            <PlusIcon className="size-5" />
          </button>
        </div>
        <div className="flex items-center gap-3">
--- a/apps/desktop2/src/routes/antenas.lazy.tsx
+++ b/apps/desktop2/src/routes/antenas.lazy.tsx
@ -0,0 +1,85 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useEvents } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/antenas")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { name, account } = Route.useSearch();
+  const { t } = useTranslation();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useEvents("local", account);
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header name={name} />
+      <Column.Content>
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <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" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/foryou.lazy.tsx
+++ b/apps/desktop2/src/routes/foryou.lazy.tsx
@ -0,0 +1,85 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useEvents } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/foryou")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { name, account } = Route.useSearch();
+  const { t } = useTranslation();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useEvents("local", account);
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header name={name} />
+      <Column.Content>
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <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" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/global.lazy.tsx
+++ b/apps/desktop2/src/routes/global.lazy.tsx
@ -0,0 +1,85 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useEvents } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/global")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { name, account } = Route.useSearch();
+  const { t } = useTranslation();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useEvents("global", account);
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header name={name} />
+      <Column.Content>
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <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" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/group.lazy.tsx
+++ b/apps/desktop2/src/routes/group.lazy.tsx
@ -0,0 +1,85 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useEvents } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/group")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { name, account } = Route.useSearch();
+  const { t } = useTranslation();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useEvents("local", account);
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header name={name} />
+      <Column.Content>
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <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" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/store.community.tsx
+++ b/apps/desktop2/src/routes/store.community.tsx
@ -6,7 +6,7 @@ export const Route = createFileRoute("/store/community")({

 function Screen() {
  return (
-    <div className="flex flex-col gap-3 px-3 pt-3">
+    <div className="flex flex-col gap-3 p-3">
      <p>Coming Soon</p>
    </div>
  );
--- a/apps/desktop2/src/routes/store.official.tsx
+++ b/apps/desktop2/src/routes/store.official.tsx
@ -1,55 +1,104 @@
+import { LumeColumn } from "@lume/types";
 import { createFileRoute } from "@tanstack/react-router";
+import { getCurrent } from "@tauri-apps/api/window";

 export const Route = createFileRoute("/store/official")({
  component: Screen,
+  loader: () => {
+    const columns: LumeColumn[] = [
+      {
+        id: 10000,
+        name: "For you",
+        content: "/foryou",
+        logo: "",
+        cover: "",
+        author: "Lume",
+        description: "Keep up to date with content based on your interests.",
+      },
+      {
+        id: 10001,
+        name: "Group Feeds",
+        content: "/group",
+        logo: "",
+        cover: "",
+        author: "Lume",
+        description: "Collective of people you're interested in.",
+      },
+      {
+        id: 10002,
+        name: "Antenas",
+        content: "/antenas",
+        logo: "",
+        cover: "",
+        author: "Lume",
+        description: "Keep track to specific content.",
+      },
+      {
+        id: 10003,
+        name: "Trending",
+        content: "/trending",
+        logo: "",
+        cover: "",
+        author: "Lume",
+        description: "What is trending on Nostr?.",
+      },
+      {
+        id: 10004,
+        name: "Global",
+        content: "/global",
+        logo: "",
+        cover: "",
+        author: "Lume",
+        description: "All events from connected relays.",
+      },
+      {
+        id: 10005,
+        name: "Waifu",
+        content: "/waifu",
+        logo: "",
+        cover: "",
+        author: "Lume",
+        description: "Show a random waifu image to boost your morale.",
+      },
+    ];
+    return columns;
+  },
 });

 function Screen() {
-  /*
-  const add = async (column: LumeColumn) => {
+  const data = Route.useLoaderData();
+
+  const install = async (column: LumeColumn) => {
    const mainWindow = getCurrent();
    await mainWindow.emit("columns", { type: "add", column });
  };
-  */

  return (
-    <div className="flex flex-col gap-3 px-3 pt-3">
-      <div className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-orange-100 to-blue-200 px-3 pt-3">
-        <div className="absolute bottom-0 left-0 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
-          <div className="flex h-full items-center justify-between">
-            <div>
-              <h1 className="font-semibold text-white">Group Feeds</h1>
-              <p className="max-w-[18rem] truncate text-sm text-white/80">
-                Collective of people you're interested in.
-              </p>
+    <div className="flex flex-col gap-3 p-3">
+      {data.map((column) => (
+        <div
+          key={column.id}
+          className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-orange-100 to-blue-200 px-3 pt-3"
+        >
+          <div className="absolute bottom-0 left-0 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
+            <div className="flex h-full items-center justify-between">
+              <div>
+                <h1 className="font-semibold text-white">{column.name}</h1>
+                <p className="max-w-[18rem] truncate text-sm text-white/80">
+                  {column.description}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => install(column)}
+                className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
+              >
+                Add
+              </button>
            </div>
-            <button
-              type="button"
-              className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
-            >
-              Add
-            </button>
          </div>
        </div>
-      </div>
-      <div className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-fuchsia-100 to-red-100 px-3 pt-3">
-        <div className="absolute bottom-0 left-0 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
-          <div className="flex h-full items-center justify-between">
-            <div>
-              <h1 className="font-semibold text-white">Antenas</h1>
-              <p className="max-w-[18rem] truncate text-sm text-white/80">
-                Keep track to specific content.
-              </p>
-            </div>
-            <button
-              type="button"
-              className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
-            >
-              Add
-            </button>
-          </div>
-        </div>
-      </div>
+      ))}
    </div>
  );
 }
--- a/apps/desktop2/src/routes/store.tsx
+++ b/apps/desktop2/src/routes/store.tsx
@ -1,4 +1,4 @@
-import { GroupFeedsIcon, LaurelIcon } from "@lume/icons";
+import { GlobalIcon, LaurelIcon } from "@lume/icons";
 import { Column } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { Link } from "@tanstack/react-router";
@ -38,7 +38,7 @@ function Screen() {
                    : "opacity-50",
                )}
              >
-                <GroupFeedsIcon className="size-5" />
+                <GlobalIcon className="size-5" />
                Community
              </div>
            )}
--- a/apps/desktop2/src/routes/trending.lazy.tsx
+++ b/apps/desktop2/src/routes/trending.lazy.tsx
@ -0,0 +1,85 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useEvents } from "@lume/ark";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/trending")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { name, account } = Route.useSearch();
+  const { t } = useTranslation();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useEvents("local", account);
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header name={name} />
+      <Column.Content>
+        {isLoading || isRefetching ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <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" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <div className="flex h-20 items-center justify-center">
+          {hasNextPage ? (
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              {isFetchingNextPage ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/waifu.lazy.tsx
+++ b/apps/desktop2/src/routes/waifu.lazy.tsx
@ -0,0 +1,18 @@
+import { Column } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/waifu")({
+  component: Screen,
+});
+
+function Screen() {
+  // @ts-ignore, just work!!!
+  const { name } = Route.useSearch();
+
+  return (
+    <Column.Root>
+      <Column.Header name={name} />
+      <Column.Content>waifu</Column.Content>
+    </Column.Root>
+  );
+}
--- a/packages/icons/src/global.tsx
+++ b/packages/icons/src/global.tsx
@ -2,12 +2,11 @@ export function GlobalIcon(props: JSX.IntrinsicElements["svg"]) {
  return (
    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
      <path
-        fill="currentColor"
-        d="M12 2a1 1 0 0 0 0 2 8 8 0 0 1 8 8 1 1 0 0 0 2 0c0-5.523-4.477-10-10-10Z"
-      />
-      <path
-        fill="currentColor"
-        d="M12 5a1 1 0 0 0 0 2 5 5 0 0 1 5 5 1 1 0 0 0 2 0 7 7 0 0 0-7-7ZM7.39 6.977a2.9 2.9 0 0 0-2.258-.857c-.83.064-1.632.52-2.065 1.38-1.89 3.749-1.27 8.44 1.862 11.571 3.132 3.132 7.822 3.751 11.57 1.862a2.494 2.494 0 0 0 1.38-2.066 2.9 2.9 0 0 0-.856-2.258L12.914 12.5l.793-.793a1 1 0 0 0-1.414-1.414l-.793.793-4.11-4.11Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.778 4.222 4.222 19.778M21.25 12a9.25 9.25 0 1 1-18.5 0 9.25 9.25 0 0 1 18.5 0Zm-2.734 6.516c-1.2 1.2-5.089-.745-8.688-4.344-3.598-3.599-5.543-7.488-4.344-8.688 1.2-1.2 5.09.745 8.688 4.344 3.599 3.599 5.544 7.489 4.344 8.688Z"
      />
    </svg>
  );
--- a/packages/icons/src/plus.tsx
+++ b/packages/icons/src/plus.tsx
@ -4,8 +4,8 @@ export function PlusIcon(props: JSX.IntrinsicElements["svg"]) {
      <path
        stroke="currentColor"
        strokeLinecap="round"
-        strokeWidth="2"
-        d="M12 4v8m0 0v8m0-8H4m8 0h8"
+        strokeWidth="1.5"
+        d="M12 6.75V12m0 0v5.25M12 12H6.75M12 12h5.25"
      />
    </svg>
  );
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@ -82,11 +82,12 @@ export interface RichContent {

 export interface LumeColumn {
 	id: number;
-	content: string;
 	name: string;
+	content: URL | string;
 	description?: string;
 	author?: string;
-	logo?: string;
+	logo?: URL | string;
+	cover?: URL | string;
 }

 export interface EventColumns {
--- a/packages/ui/src/note/mentions/note.tsx
+++ b/packages/ui/src/note/mentions/note.tsx
@ -52,7 +52,7 @@ export function MentionNote({
          </div>
        </User.Root>
      </User.Provider>
-      <div className="line-clamp-4 select-text whitespace-normal text-balance leading-normal">
+      <div className="line-clamp-3 select-text whitespace-normal text-balance leading-normal">
        {data.content}
      </div>
      {openable ? (
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@ -5,7 +5,9 @@ export * from "./src/editor";
 export * from "./src/nip01";
 export * from "./src/nip94";
 export * from "./src/notification";
-export * from "./src/hooks/useNetworkStatus";
-export * from "./src/hooks/useOpenGraph";
 export * from "./src/cn";
 export * from "./src/image";
+
+// Hooks
+export * from "./src/hooks/useNetworkStatus";
+export * from "./src/hooks/useOpenGraph";
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -105,6 +105,9 @@ importers:
      i18next-resources-to-backend:
        specifier: ^1.2.0
        version: 1.2.0
+      nanoid:
+        specifier: ^5.0.6
+        version: 5.0.6
      nostr-tools:
        specifier: ^2.3.1
        version: 2.3.1(typescript@5.4.2)
--- a/src-tauri/src/commands/window.rs
+++ b/src-tauri/src/commands/window.rs
@ -13,7 +13,7 @@ pub fn create_column(
 ) -> Result<String, String> {
  match app_handle.get_window("main") {
    Some(main_window) => match app_handle.get_webview(label) {
-      Some(_) => Err("Webview is exist".into()),
+      Some(_) => Ok(label.into()),
      None => {
        let path = PathBuf::from(url);
        let webview_url = WebviewUrl::App(path);
@ -27,7 +27,7 @@ pub fn create_column(
          LogicalSize::new(width, height),
        ) {
          Ok(webview) => Ok(webview.label().into()),
-          Err(_) => Err("Something is wrong".into()),
+          Err(_) => Err("Create webview failed".into()),
        }
      }
    },
@ -36,7 +36,7 @@ pub fn create_column(
 }

 #[tauri::command]
-pub fn close_column(label: &str, app_handle: tauri::AppHandle) -> Result<bool, String> {
+pub fn close_column(label: &str, app_handle: tauri::AppHandle) -> Result<bool, ()> {
  match app_handle.get_webview(label) {
    Some(webview) => {
      if let Ok(_) = webview.close() {
@ -45,7 +45,7 @@ pub fn close_column(label: &str, app_handle: tauri::AppHandle) -> Result<bool, S
        Ok(false)
      }
    }
-    None => Err("Webview not found".into()),
+    None => Ok(true),
  }
 }