mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-29 16:30:55 +00:00
feat: readd default columns
This commit is contained in:
parent
5d59040224
commit
cb565ff35b
@ -24,6 +24,7 @@
|
|||||||
"@tanstack/react-router": "^1.20.0",
|
"@tanstack/react-router": "^1.20.0",
|
||||||
"i18next": "^23.10.1",
|
"i18next": "^23.10.1",
|
||||||
"i18next-resources-to-backend": "^1.2.0",
|
"i18next-resources-to-backend": "^1.2.0",
|
||||||
|
"nanoid": "^5.0.6",
|
||||||
"nostr-tools": "^2.3.1",
|
"nostr-tools": "^2.3.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-currency-input-field": "^3.8.0",
|
"react-currency-input-field": "^3.8.0",
|
||||||
|
@ -15,7 +15,7 @@ export function Col({
|
|||||||
const window = useMemo(() => getCurrent(), []);
|
const window = useMemo(() => getCurrent(), []);
|
||||||
const container = useRef<HTMLDivElement>(null);
|
const container = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const [webview, setWebview] = useState("");
|
const [webview, setWebview] = useState<string>(null);
|
||||||
|
|
||||||
const createWebview = async () => {
|
const createWebview = async () => {
|
||||||
const rect = container.current.getBoundingClientRect();
|
const rect = container.current.getBoundingClientRect();
|
||||||
@ -36,6 +36,7 @@ export function Col({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const closeWebview = async () => {
|
const closeWebview = async () => {
|
||||||
|
if (!webview) return;
|
||||||
await invoke("close_column", {
|
await invoke("close_column", {
|
||||||
label: webview,
|
label: webview,
|
||||||
});
|
});
|
||||||
@ -67,7 +68,7 @@ export function Col({
|
|||||||
return () => {
|
return () => {
|
||||||
closeWebview();
|
closeWebview();
|
||||||
};
|
};
|
||||||
}, [window]);
|
}, []);
|
||||||
|
|
||||||
return <div ref={container} className="h-full w-[440px] shrink-0 p-2" />;
|
return <div ref={container} className="h-full w-[440px] shrink-0 p-2" />;
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,7 @@ export const Route = createFileRoute("/$account/home")({
|
|||||||
|
|
||||||
const COLS: LumeColumn[] = [
|
const COLS: LumeColumn[] = [
|
||||||
{ id: 1, name: "Newsfeed", content: "/newsfeed" },
|
{ id: 1, name: "Newsfeed", content: "/newsfeed" },
|
||||||
{ id: 2, name: "Lume Store", content: "/store/official" },
|
{ id: 9999, name: "Lume Store", content: "/store/official" },
|
||||||
];
|
];
|
||||||
|
|
||||||
function Screen() {
|
function Screen() {
|
||||||
@ -43,18 +43,21 @@ function Screen() {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const add = async (column: LumeColumn) => {
|
const add = (column: LumeColumn) => {
|
||||||
|
const col = columns.find((item) => item.id === column.id);
|
||||||
|
if (!col) {
|
||||||
setColumns((prev) => [...prev, column]);
|
setColumns((prev) => [...prev, column]);
|
||||||
vlistRef?.current.scrollToIndex(columns.length);
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const remove = async (id: number) => {
|
const remove = (id: number) => {
|
||||||
setColumns((prev) => prev.filter((t) => t.id !== id));
|
setColumns((prev) => prev.filter((t) => t.id !== id));
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function listenUpdateColumn() {
|
const listenColumnEvent = async () => {
|
||||||
const mainWindow = getCurrent();
|
const mainWindow = getCurrent();
|
||||||
|
if (!unlisten) {
|
||||||
unlisten.current = await mainWindow.listen<EventColumns>(
|
unlisten.current = await mainWindow.listen<EventColumns>(
|
||||||
"columns",
|
"columns",
|
||||||
(data) => {
|
(data) => {
|
||||||
@ -63,14 +66,13 @@ function Screen() {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// listen for column changes
|
// listen for column changes
|
||||||
listenUpdateColumn();
|
listenColumnEvent();
|
||||||
|
|
||||||
// clean up
|
// clean up
|
||||||
return () => {
|
return () => unlisten.current?.();
|
||||||
if (unlisten.current) unlisten.current();
|
|
||||||
};
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -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 { Outlet, createFileRoute } from "@tanstack/react-router";
|
||||||
import { cn } from "@lume/utils";
|
import { cn } from "@lume/utils";
|
||||||
import { Accounts } from "@/components/accounts";
|
import { Accounts } from "@/components/accounts";
|
||||||
@ -27,7 +27,7 @@ function App() {
|
|||||||
type="button"
|
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"
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
85
apps/desktop2/src/routes/antenas.lazy.tsx
Normal file
85
apps/desktop2/src/routes/antenas.lazy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
85
apps/desktop2/src/routes/foryou.lazy.tsx
Normal file
85
apps/desktop2/src/routes/foryou.lazy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
85
apps/desktop2/src/routes/global.lazy.tsx
Normal file
85
apps/desktop2/src/routes/global.lazy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
85
apps/desktop2/src/routes/group.lazy.tsx
Normal file
85
apps/desktop2/src/routes/group.lazy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -6,7 +6,7 @@ export const Route = createFileRoute("/store/community")({
|
|||||||
|
|
||||||
function Screen() {
|
function Screen() {
|
||||||
return (
|
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>
|
<p>Coming Soon</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,48 +1,96 @@
|
|||||||
|
import { LumeColumn } from "@lume/types";
|
||||||
import { createFileRoute } from "@tanstack/react-router";
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
|
import { getCurrent } from "@tauri-apps/api/window";
|
||||||
|
|
||||||
export const Route = createFileRoute("/store/official")({
|
export const Route = createFileRoute("/store/official")({
|
||||||
component: Screen,
|
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() {
|
function Screen() {
|
||||||
/*
|
const data = Route.useLoaderData();
|
||||||
const add = async (column: LumeColumn) => {
|
|
||||||
|
const install = async (column: LumeColumn) => {
|
||||||
const mainWindow = getCurrent();
|
const mainWindow = getCurrent();
|
||||||
await mainWindow.emit("columns", { type: "add", column });
|
await mainWindow.emit("columns", { type: "add", column });
|
||||||
};
|
};
|
||||||
*/
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-3 px-3 pt-3">
|
<div className="flex flex-col gap-3 p-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">
|
{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="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 className="flex h-full items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="font-semibold text-white">Group Feeds</h1>
|
<h1 className="font-semibold text-white">{column.name}</h1>
|
||||||
<p className="max-w-[18rem] truncate text-sm text-white/80">
|
<p className="max-w-[18rem] truncate text-sm text-white/80">
|
||||||
Collective of people you're interested in.
|
{column.description}
|
||||||
</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 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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="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"
|
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
|
Add
|
||||||
@ -50,6 +98,7 @@ function Screen() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { GroupFeedsIcon, LaurelIcon } from "@lume/icons";
|
import { GlobalIcon, LaurelIcon } from "@lume/icons";
|
||||||
import { Column } from "@lume/ui";
|
import { Column } from "@lume/ui";
|
||||||
import { cn } from "@lume/utils";
|
import { cn } from "@lume/utils";
|
||||||
import { Link } from "@tanstack/react-router";
|
import { Link } from "@tanstack/react-router";
|
||||||
@ -38,7 +38,7 @@ function Screen() {
|
|||||||
: "opacity-50",
|
: "opacity-50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<GroupFeedsIcon className="size-5" />
|
<GlobalIcon className="size-5" />
|
||||||
Community
|
Community
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
85
apps/desktop2/src/routes/trending.lazy.tsx
Normal file
85
apps/desktop2/src/routes/trending.lazy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
18
apps/desktop2/src/routes/waifu.lazy.tsx
Normal file
18
apps/desktop2/src/routes/waifu.lazy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -2,12 +2,11 @@ export function GlobalIcon(props: JSX.IntrinsicElements["svg"]) {
|
|||||||
return (
|
return (
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
stroke="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"
|
strokeLinecap="round"
|
||||||
/>
|
strokeLinejoin="round"
|
||||||
<path
|
strokeWidth="1.5"
|
||||||
fill="currentColor"
|
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"
|
||||||
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"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
@ -4,8 +4,8 @@ export function PlusIcon(props: JSX.IntrinsicElements["svg"]) {
|
|||||||
<path
|
<path
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeWidth="2"
|
strokeWidth="1.5"
|
||||||
d="M12 4v8m0 0v8m0-8H4m8 0h8"
|
d="M12 6.75V12m0 0v5.25M12 12H6.75M12 12h5.25"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
5
packages/types/index.d.ts
vendored
5
packages/types/index.d.ts
vendored
@ -82,11 +82,12 @@ export interface RichContent {
|
|||||||
|
|
||||||
export interface LumeColumn {
|
export interface LumeColumn {
|
||||||
id: number;
|
id: number;
|
||||||
content: string;
|
|
||||||
name: string;
|
name: string;
|
||||||
|
content: URL | string;
|
||||||
description?: string;
|
description?: string;
|
||||||
author?: string;
|
author?: string;
|
||||||
logo?: string;
|
logo?: URL | string;
|
||||||
|
cover?: URL | string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface EventColumns {
|
export interface EventColumns {
|
||||||
|
@ -52,7 +52,7 @@ export function MentionNote({
|
|||||||
</div>
|
</div>
|
||||||
</User.Root>
|
</User.Root>
|
||||||
</User.Provider>
|
</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}
|
{data.content}
|
||||||
</div>
|
</div>
|
||||||
{openable ? (
|
{openable ? (
|
||||||
|
@ -5,7 +5,9 @@ export * from "./src/editor";
|
|||||||
export * from "./src/nip01";
|
export * from "./src/nip01";
|
||||||
export * from "./src/nip94";
|
export * from "./src/nip94";
|
||||||
export * from "./src/notification";
|
export * from "./src/notification";
|
||||||
export * from "./src/hooks/useNetworkStatus";
|
|
||||||
export * from "./src/hooks/useOpenGraph";
|
|
||||||
export * from "./src/cn";
|
export * from "./src/cn";
|
||||||
export * from "./src/image";
|
export * from "./src/image";
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
export * from "./src/hooks/useNetworkStatus";
|
||||||
|
export * from "./src/hooks/useOpenGraph";
|
||||||
|
@ -105,6 +105,9 @@ importers:
|
|||||||
i18next-resources-to-backend:
|
i18next-resources-to-backend:
|
||||||
specifier: ^1.2.0
|
specifier: ^1.2.0
|
||||||
version: 1.2.0
|
version: 1.2.0
|
||||||
|
nanoid:
|
||||||
|
specifier: ^5.0.6
|
||||||
|
version: 5.0.6
|
||||||
nostr-tools:
|
nostr-tools:
|
||||||
specifier: ^2.3.1
|
specifier: ^2.3.1
|
||||||
version: 2.3.1(typescript@5.4.2)
|
version: 2.3.1(typescript@5.4.2)
|
||||||
|
@ -13,7 +13,7 @@ pub fn create_column(
|
|||||||
) -> Result<String, String> {
|
) -> Result<String, String> {
|
||||||
match app_handle.get_window("main") {
|
match app_handle.get_window("main") {
|
||||||
Some(main_window) => match app_handle.get_webview(label) {
|
Some(main_window) => match app_handle.get_webview(label) {
|
||||||
Some(_) => Err("Webview is exist".into()),
|
Some(_) => Ok(label.into()),
|
||||||
None => {
|
None => {
|
||||||
let path = PathBuf::from(url);
|
let path = PathBuf::from(url);
|
||||||
let webview_url = WebviewUrl::App(path);
|
let webview_url = WebviewUrl::App(path);
|
||||||
@ -27,7 +27,7 @@ pub fn create_column(
|
|||||||
LogicalSize::new(width, height),
|
LogicalSize::new(width, height),
|
||||||
) {
|
) {
|
||||||
Ok(webview) => Ok(webview.label().into()),
|
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]
|
#[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) {
|
match app_handle.get_webview(label) {
|
||||||
Some(webview) => {
|
Some(webview) => {
|
||||||
if let Ok(_) = webview.close() {
|
if let Ok(_) = webview.close() {
|
||||||
@ -45,7 +45,7 @@ pub fn close_column(label: &str, app_handle: tauri::AppHandle) -> Result<bool, S
|
|||||||
Ok(false)
|
Ok(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
None => Err("Webview not found".into()),
|
None => Ok(true),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user