reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
reya
2024-10-27 15:57:32 +07:00
parent eb6e3e52df
commit 0518389f50
17 changed files with 306 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/commands.gen.ts
View File

@@ -200,9 +200,9 @@ async getGroup(id: string) : Promise<Result<string, string>> {
else return { status: "error", error: e as any };
}
},
async getAllGroups(id: string) : Promise<Result<RichEvent[], string>> {
async getAllNewsfeeds(id: string) : Promise<Result<RichEvent[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_all_groups", { id }) };
return { status: "ok", data: await TAURI_INVOKE("get_all_newsfeeds", { id }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
@@ -456,14 +456,6 @@ async createColumn(column: Column) : Promise<Result<string, string>> {
else return { status: "error", error: e as any };
}
},
async updateColumn(label: string, width: number, height: number, x: number, y: number) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("update_column", { label, width, height, x, y }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async reloadColumn(label: string) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("reload_column", { label }) };
@@ -480,6 +472,14 @@ async closeColumn(label: string) : Promise<Result<boolean, string>> {
else return { status: "error", error: e as any };
}
},
async closeAllColumns() : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("close_all_columns") };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async openWindow(window: NewWindow) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("open_window", { window }) };

67
src/components/column.tsx
View File

@@ -4,67 +4,32 @@ import type { LumeColumn } from "@/types";
import { CaretDown, Check } from "@phosphor-icons/react";
import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { useCallback, useEffect, useLayoutEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { User } from "./user";
export function Column({ column }: { column: LumeColumn }) {
const [rect, ref] = useRect();
const [_error, setError] = useState<string>("");
const [error, setError] = useState("");
useEffect(() => {
(async () => {
if (rect) {
const res = await commands.updateColumn(
column.label,
rect.width,
rect.height,
rect.x,
rect.y,
);
const res = await commands.createColumn({
label: column.label,
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
url: `${column.url}?label=${column.label}&name=${column.name}`,
});
if (res.status === "ok") {
console.log("webview is updated: ", column.label);
} else {
console.log("webview error: ", res.error);
if (res.status === "error") {
setError(res.error);
}
}
})();
}, [rect]);
useLayoutEffect(() => {
console.log(column.label);
if (ref.current) {
const initialRect = ref.current.getBoundingClientRect();
commands
.createColumn({
label: column.label,
x: initialRect.x,
y: initialRect.y,
width: initialRect.width,
height: initialRect.height,
url: `${column.url}?label=${column.label}&name=${column.name}`,
})
.then((res) => {
if (res.status === "ok") {
console.log("webview is created: ", column.label);
} else {
setError(res.error);
}
});
return () => {
commands.closeColumn(column.label).then((res) => {
if (res.status === "ok") {
console.log("webview is closed: ", column.label);
} else {
console.log("webview error: ", res.error);
}
});
};
}
}, []);
return (
<div className="h-full w-[440px] shrink-0 border-r border-black/5 dark:border-white/5">
<div className="flex flex-col gap-px size-full">
@@ -73,7 +38,13 @@ export function Column({ column }: { column: LumeColumn }) {
name={column.name}
account={column.account}
/>
<div ref={ref} className="flex-1 size-full" />
<div ref={ref} className="flex-1 size-full">
<div className="size-full flex flex-col items-center justify-center">
<div className="text-red-500 text-sm break-all">
{error?.length ? error : null}
</div>
</div>
</div>
</div>
</div>
);

102
src/routes.gen.ts
View File

@@ -13,14 +13,14 @@ import { createFileRoute } from '@tanstack/react-router'
// Import Routes
import { Route as rootRoute } from './routes/__root'
import { Route as SetInterestImport } from './routes/set-interest'
import { Route as SetGroupImport } from './routes/set-group'
import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
import { Route as AppImport } from './routes/_app'
import { Route as NewPostIndexImport } from './routes/new-post/index'
import { Route as AppIndexImport } from './routes/_app/index'
import { Route as ZapIdImport } from './routes/zap.$id'
import { Route as ColumnsLayoutImport } from './routes/columns/_layout'
import { Route as IdSetInterestImport } from './routes/$id.set-interest'
import { Route as IdSetGroupImport } from './routes/$id.set-group'
import { Route as SettingsIdWalletImport } from './routes/settings.$id/wallet'
import { Route as SettingsIdRelayImport } from './routes/settings.$id/relay'
import { Route as SettingsIdProfileImport } from './routes/settings.$id/profile'
@@ -79,16 +79,6 @@ const NewLazyRoute = NewLazyImport.update({
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/new.lazy').then((d) => d.Route))
const SetInterestRoute = SetInterestImport.update({
path: '/set-interest',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/set-interest.lazy').then((d) => d.Route))
const SetGroupRoute = SetGroupImport.update({
path: '/set-group',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/set-group.lazy').then((d) => d.Route))
const BootstrapRelaysRoute = BootstrapRelaysImport.update({
path: '/bootstrap-relays',
getParentRoute: () => rootRoute,
@@ -149,6 +139,18 @@ const ColumnsLayoutRoute = ColumnsLayoutImport.update({
getParentRoute: () => ColumnsRoute,
} as any)
const IdSetInterestRoute = IdSetInterestImport.update({
path: '/$id/set-interest',
getParentRoute: () => rootRoute,
} as any).lazy(() =>
import('./routes/$id.set-interest.lazy').then((d) => d.Route),
)
const IdSetGroupRoute = IdSetGroupImport.update({
path: '/$id/set-group',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/$id.set-group.lazy').then((d) => d.Route))
const ColumnsLayoutTrendingLazyRoute = ColumnsLayoutTrendingLazyImport.update({
path: '/trending',
getParentRoute: () => ColumnsLayoutRoute,
@@ -309,20 +311,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof BootstrapRelaysImport
parentRoute: typeof rootRoute
}
'/set-group': {
id: '/set-group'
path: '/set-group'
fullPath: '/set-group'
preLoaderRoute: typeof SetGroupImport
parentRoute: typeof rootRoute
}
'/set-interest': {
id: '/set-interest'
path: '/set-interest'
fullPath: '/set-interest'
preLoaderRoute: typeof SetInterestImport
parentRoute: typeof rootRoute
}
'/new': {
id: '/new'
path: '/new'
@@ -330,6 +318,20 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof NewLazyImport
parentRoute: typeof rootRoute
}
'/$id/set-group': {
id: '/$id/set-group'
path: '/$id/set-group'
fullPath: '/$id/set-group'
preLoaderRoute: typeof IdSetGroupImport
parentRoute: typeof rootRoute
}
'/$id/set-interest': {
id: '/$id/set-interest'
path: '/$id/set-interest'
fullPath: '/$id/set-interest'
preLoaderRoute: typeof IdSetInterestImport
parentRoute: typeof rootRoute
}
'/columns': {
id: '/columns'
path: '/columns'
@@ -636,9 +638,9 @@ const SettingsIdLazyRouteWithChildren = SettingsIdLazyRoute._addFileChildren(
export interface FileRoutesByFullPath {
'': typeof AppRouteWithChildren
'/bootstrap-relays': typeof BootstrapRelaysRoute
'/set-group': typeof SetGroupRoute
'/set-interest': typeof SetInterestRoute
'/new': typeof NewLazyRoute
'/$id/set-group': typeof IdSetGroupRoute
'/$id/set-interest': typeof IdSetInterestRoute
'/columns': typeof ColumnsLayoutRouteWithChildren
'/zap/$id': typeof ZapIdRoute
'/new-account/connect': typeof NewAccountConnectLazyRoute
@@ -671,9 +673,9 @@ export interface FileRoutesByFullPath {
export interface FileRoutesByTo {
'/bootstrap-relays': typeof BootstrapRelaysRoute
'/set-group': typeof SetGroupRoute
'/set-interest': typeof SetInterestRoute
'/new': typeof NewLazyRoute
'/$id/set-group': typeof IdSetGroupRoute
'/$id/set-interest': typeof IdSetInterestRoute
'/columns': typeof ColumnsLayoutRouteWithChildren
'/zap/$id': typeof ZapIdRoute
'/new-account/connect': typeof NewAccountConnectLazyRoute
@@ -708,9 +710,9 @@ export interface FileRoutesById {
__root__: typeof rootRoute
'/_app': typeof AppRouteWithChildren
'/bootstrap-relays': typeof BootstrapRelaysRoute
'/set-group': typeof SetGroupRoute
'/set-interest': typeof SetInterestRoute
'/new': typeof NewLazyRoute
'/$id/set-group': typeof IdSetGroupRoute
'/$id/set-interest': typeof IdSetInterestRoute
'/columns': typeof ColumnsRouteWithChildren
'/columns/_layout': typeof ColumnsLayoutRouteWithChildren
'/zap/$id': typeof ZapIdRoute
@@ -747,9 +749,9 @@ export interface FileRouteTypes {
fullPaths:
| ''
| '/bootstrap-relays'
| '/set-group'
| '/set-interest'
| '/new'
| '/$id/set-group'
| '/$id/set-interest'
| '/columns'
| '/zap/$id'
| '/new-account/connect'
@@ -781,9 +783,9 @@ export interface FileRouteTypes {
fileRoutesByTo: FileRoutesByTo
to:
| '/bootstrap-relays'
| '/set-group'
| '/set-interest'
| '/new'
| '/$id/set-group'
| '/$id/set-interest'
| '/columns'
| '/zap/$id'
| '/new-account/connect'
@@ -816,9 +818,9 @@ export interface FileRouteTypes {
| '__root__'
| '/_app'
| '/bootstrap-relays'
| '/set-group'
| '/set-interest'
| '/new'
| '/$id/set-group'
| '/$id/set-interest'
| '/columns'
| '/columns/_layout'
| '/zap/$id'
@@ -854,9 +856,9 @@ export interface FileRouteTypes {
export interface RootRouteChildren {
AppRoute: typeof AppRouteWithChildren
BootstrapRelaysRoute: typeof BootstrapRelaysRoute
SetGroupRoute: typeof SetGroupRoute
SetInterestRoute: typeof SetInterestRoute
NewLazyRoute: typeof NewLazyRoute
IdSetGroupRoute: typeof IdSetGroupRoute
IdSetInterestRoute: typeof IdSetInterestRoute
ColumnsRoute: typeof ColumnsRouteWithChildren
ZapIdRoute: typeof ZapIdRoute
NewAccountConnectLazyRoute: typeof NewAccountConnectLazyRoute
@@ -869,9 +871,9 @@ export interface RootRouteChildren {
const rootRouteChildren: RootRouteChildren = {
AppRoute: AppRouteWithChildren,
BootstrapRelaysRoute: BootstrapRelaysRoute,
SetGroupRoute: SetGroupRoute,
SetInterestRoute: SetInterestRoute,
NewLazyRoute: NewLazyRoute,
IdSetGroupRoute: IdSetGroupRoute,
IdSetInterestRoute: IdSetInterestRoute,
ColumnsRoute: ColumnsRouteWithChildren,
ZapIdRoute: ZapIdRoute,
NewAccountConnectLazyRoute: NewAccountConnectLazyRoute,
@@ -895,9 +897,9 @@ export const routeTree = rootRoute
"children": [
"/_app",
"/bootstrap-relays",
"/set-group",
"/set-interest",
"/new",
"/$id/set-group",
"/$id/set-interest",
"/columns",
"/zap/$id",
"/new-account/connect",
@@ -916,15 +918,15 @@ export const routeTree = rootRoute
"/bootstrap-relays": {
"filePath": "bootstrap-relays.tsx"
},
"/set-group": {
"filePath": "set-group.tsx"
},
"/set-interest": {
"filePath": "set-interest.tsx"
},
"/new": {
"filePath": "new.lazy.tsx"
},
"/$id/set-group": {
"filePath": "$id.set-group.tsx"
},
"/$id/set-interest": {
"filePath": "$id.set-interest.tsx"
},
"/columns": {
"filePath": "columns",
"children": [

11
src/routes/set-group.lazy.tsx → src/routes/$id.set-group.lazy.tsx
View File

@@ -8,13 +8,13 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/set-group")({
export const Route = createLazyFileRoute("/$id/set-group")({
component: Screen,
});
function Screen() {
const contacts = Route.useLoaderData();
const { account } = Route.useSearch();
const { id } = Route.useParams();
const { queryClient } = Route.useRouteContext();
const [title, setTitle] = useState("");
@@ -40,11 +40,11 @@ function Screen() {
const submit = () => {
startTransition(async () => {
const signer = await commands.hasSigner(account);
const signer = await commands.hasSigner(id);
if (signer.status === "ok") {
if (!signer.data) {
const res = await commands.setSigner(account);
const res = await commands.setSigner(id);
if (res.status === "error") {
await message(res.error, { kind: "error" });
@@ -63,7 +63,7 @@ function Screen() {
// Invalidate cache
await queryClient.invalidateQueries({
queryKey: ["mygroups", account],
queryKey: ["others", "newsfeeds", id],
});
// Create column in the main window
@@ -72,6 +72,7 @@ function Screen() {
column: {
label: res.data,
name: title,
account: id,
url: `/columns/groups/${res.data}`,
},
});

14
src/routes/$id.set-group.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { commands } from "@/commands.gen";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$id/set-group")({
loader: async ({ params }) => {
const res = await commands.getContactList(params.id);
if (res.status === "ok") {
return res.data;
} else {
throw new Error(res.error);
}
},
});

11
src/routes/set-interest.lazy.tsx → src/routes/$id.set-interest.lazy.tsx
View File

@@ -23,7 +23,7 @@ const TOPICS = [
},
];
export const Route = createLazyFileRoute("/set-interest")({
export const Route = createLazyFileRoute("/$id/set-interest")({
component: Screen,
});
@@ -33,7 +33,7 @@ function Screen() {
const [hashtags, setHashtags] = useState<string[]>([]);
const [isPending, startTransition] = useTransition();
const { account } = Route.useSearch();
const { id } = Route.useParams();
const { queryClient } = Route.useRouteContext();
const toggleHashtag = (tag: string) => {
@@ -52,11 +52,11 @@ function Screen() {
const submit = () => {
startTransition(async () => {
const signer = await commands.hasSigner(account);
const signer = await commands.hasSigner(id);
if (signer.status === "ok") {
if (!signer.data) {
const res = await commands.setSigner(account);
const res = await commands.setSigner(id);
if (res.status === "error") {
await message(res.error, { kind: "error" });
@@ -79,7 +79,7 @@ function Screen() {
// Invalidate cache
await queryClient.invalidateQueries({
queryKey: ["myinterests", account],
queryKey: ["interests", id],
});
// Create column in the main window
@@ -88,6 +88,7 @@ function Screen() {
column: {
label: res.data,
name: title,
account: id,
url: `/columns/interests/${res.data}`,
},
});

3
src/routes/$id.set-interest.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$id/set-interest")({});

31
src/routes/_app/index.lazy.tsx
View File

@@ -4,11 +4,12 @@ import { Column, Spinner } from "@/components";
import { LumeWindow } from "@/system";
import type { ColumnEvent, LumeColumn, Metadata } from "@/types";
import { ArrowLeft, ArrowRight, Plus } from "@phosphor-icons/react";
import { createLazyFileRoute } from "@tanstack/react-router";
import { createLazyFileRoute, useRouter } from "@tanstack/react-router";
import { useStore } from "@tanstack/react-store";
import { listen } from "@tauri-apps/api/event";
import { Menu, MenuItem } from "@tauri-apps/api/menu";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { message } from "@tauri-apps/plugin-dialog";
import useEmblaCarousel from "embla-carousel-react";
import {
type ReactNode,
@@ -26,6 +27,7 @@ export const Route = createLazyFileRoute("/_app/")({
function Screen() {
const initialAppColumns = Route.useLoaderData();
const router = useRouter();
const columns = useStore(appColumns, (state) => state);
const [emblaRef, emblaApi] = useEmblaCarousel({
@@ -45,6 +47,19 @@ function Screen() {
getCurrentWindow().emit("scrolling", {});
}, []);
const remove = useCallback(
async (label: string) => {
const res = await commands.closeColumn(label);
if (res.status === "ok") {
appColumns.setState((prev) => prev.filter((t) => t.label !== label));
} else {
await message(res.error, { kind: "errror" });
}
},
[columns],
);
const add = useDebouncedCallback((column: LumeColumn) => {
const exist = columns.find((col) => col.label === column.label);
@@ -57,10 +72,6 @@ function Screen() {
}
}, 150);
const remove = useDebouncedCallback((label: string) => {
appColumns.setState((prev) => prev.filter((t) => t.label !== label));
}, 150);
const move = useDebouncedCallback(
(label: string, direction: "left" | "right") => {
const newCols = [...columns];
@@ -122,6 +133,16 @@ function Screen() {
};
}, []);
useEffect(() => {
const unsubscribeFn = router.subscribe("onBeforeNavigate", async () => {
await commands.closeAllColumns();
});
return () => {
unsubscribeFn();
};
}, []);
useEffect(() => {
if (initialAppColumns) {
appColumns.setState(() => initialAppColumns);

197
src/routes/columns/_layout/launchpad.$id.lazy.tsx
View File

@@ -3,7 +3,7 @@ import { cn, toLumeEvents } from "@/commons";
import { Spinner, User } from "@/components";
import { LumeWindow } from "@/system";
import type { LumeColumn, NostrEvent } from "@/types";
import { ArrowClockwise, Plus } from "@phosphor-icons/react";
import { ArrowClockwise, ArrowRight, Plus } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
@@ -24,7 +24,7 @@ function Screen() {
className="overflow-hidden size-full"
>
<ScrollArea.Viewport className="relative h-full px-3 pb-3">
<Groups />
<Newsfeeds />
<Interests />
<Core />
</ScrollArea.Viewport>
@@ -39,80 +39,12 @@ function Screen() {
);
}
/*
function SyncProgress() {
const { id } = Route.useParams();
const { queryClient } = Route.useRouteContext();
const [error, setError] = useState("");
const [progress, setProgress] = useState(0);
useEffect(() => {
(async () => {
if (progress >= 100) {
await queryClient.invalidateQueries();
}
})();
}, [progress]);
useEffect(() => {
const channel = new Channel<number>();
channel.onmessage = (message) => {
setProgress(message);
};
(async () => {
const res = await commands.syncAccount(id, channel);
if (res.status === "error") {
setError(res.error);
}
})();
}, []);
return (
<div className="size-full">
<div className="flex flex-col gap-3">
<div className="h-32 flex flex-col items-center justify-center rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800">
<div className="w-2/3 flex flex-col gap-2">
<Progress.Root
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
style={{
transform: "translateZ(0)",
}}
value={progress}
>
<Progress.Indicator
className="bg-blue-500 size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
style={{ transform: `translateX(-${100 - progress}%)` }}
/>
</Progress.Root>
<span className="text-center text-xs">
{error ? error : "Syncing in Progress..."}
</span>
</div>
</div>
<a
href="https://github.com/hoytech/strfry/blob/nextneg/docs/negentropy.md"
target="_blank"
className="text-center !underline text-xs font-medium text-blue-500"
rel="noreferrer"
>
Learn more about Negentropy
</a>
</div>
</div>
);
}
*/
function Groups() {
function Newsfeeds() {
const { id } = Route.useParams();
const { isLoading, isError, error, data, refetch, isRefetching } = useQuery({
queryKey: ["others", "groups", id],
queryKey: ["others", "newsfeeds", id],
queryFn: async () => {
const res = await commands.getAllGroups(id);
const res = await commands.getAllNewsfeeds(id);
if (res.status === "ok") {
const data = toLumeEvents(res.data);
@@ -131,8 +63,14 @@ function Groups() {
const renderItem = useCallback(
(item: NostrEvent) => {
const name =
item.tags.find((tag) => tag[0] === "title")?.[1] || "Unnamed";
const label = item.tags.find((tag) => tag[0] === "d")?.[1] || nanoid();
item.kind === 3
? "Contacts"
: item.tags.find((tag) => tag[0] === "title")?.[1] || "Unnamed";
const label =
item.kind === 3
? `newsfeed-${id.slice(0, 5)}`
: item.tags.find((tag) => tag[0] === "d")?.[1] || nanoid();
return (
<div
@@ -140,19 +78,34 @@ function Groups() {
className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
>
<div className="px-2 pt-2">
<div className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg flex flex-wrap items-center justify-center gap-2 overflow-y-auto">
{item.tags
.filter((tag) => tag[0] === "p")
.map((tag) => (
<div key={tag[1]}>
<User.Provider pubkey={tag[1]}>
<User.Root>
<User.Avatar className="size-8 rounded-full" />
</User.Root>
</User.Provider>
</div>
))}
</div>
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="overflow-hidden size-full"
>
<ScrollArea.Viewport className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
<div className="flex flex-wrap items-center justify-center gap-2">
{item.tags
.filter((tag) => tag[0] === "p")
.map((tag) => (
<div key={tag[1]}>
<User.Provider pubkey={tag[1]}>
<User.Root>
<User.Avatar className="size-8 rounded-full" />
</User.Root>
</User.Provider>
</div>
))}
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
</div>
<div className="p-2 flex items-center justify-between">
<div className="inline-flex items-center gap-2">
@@ -170,10 +123,14 @@ function Groups() {
LumeWindow.openColumn({
label,
name,
url: `/columns/groups/${item.id}`,
account: id,
url:
item.kind === 3
? `/columns/newsfeed/${id}`
: `/columns/groups/${item.id}`,
})
}
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-blue-600 hover:bg-blue-500 text-white"
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-100 group-hover:bg-blue-600 dark:group-hover:bg-blue-400 group-hover:text-white"
>
Add
</button>
@@ -188,7 +145,7 @@ function Groups() {
return (
<div className="mb-12 flex flex-col gap-3">
<div className="flex items-center justify-between px-2">
<h3 className="font-semibold">Groups</h3>
<h3 className="font-semibold">Newsfeeds</h3>
<div className="inline-flex items-center justify-center gap-2">
<button
type="button"
@@ -202,7 +159,7 @@ function Groups() {
</button>
<button
type="button"
onClick={() => LumeWindow.openPopup("/set-group", "New group")}
onClick={() => LumeWindow.openPopup(`${id}/set-group`, "New group")}
className="h-7 w-max px-2 inline-flex items-center justify-center gap-1 text-sm font-medium rounded-full bg-neutral-300 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
<Plus className="size-3" weight="bold" />
@@ -227,6 +184,10 @@ function Groups() {
) : (
data?.map((item) => renderItem(item))
)}
<div className="h-12 px-3 flex items-center justify-between items-betwe bg-neutral-200/50 rounded-xl text-blue-600 dark:text-blue-400">
<span className="text-sm font-medium">Discover newsfeeds</span>
<ArrowRight className="size-4" weight="bold" />
</div>
</div>
</div>
);
@@ -266,15 +227,30 @@ function Interests() {
className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
>
<div className="px-2 pt-2">
<div className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg flex flex-wrap items-center justify-center gap-4 overflow-y-auto">
{item.tags
.filter((tag) => tag[0] === "t")
.map((tag) => (
<div key={tag[1]} className="text-sm font-medium">
{tag[1]}
</div>
))}
</div>
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="overflow-hidden size-full"
>
<ScrollArea.Viewport className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
<div className="flex flex-wrap items-center justify-center gap-2">
{item.tags
.filter((tag) => tag[0] === "t")
.map((tag) => (
<div key={tag[1]} className="text-sm font-medium">
{tag[1].includes("#") ? tag[1] : `#${tag[1]}`}
</div>
))}
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
</div>
<div className="p-3 flex items-center justify-between">
<div className="inline-flex items-center gap-2">
@@ -292,10 +268,11 @@ function Interests() {
LumeWindow.openColumn({
label,
name,
account: id,
url: `/columns/interests/${item.id}`,
})
}
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-blue-600 hover:bg-blue-500 text-white"
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-100 group-hover:bg-blue-600 dark:group-hover:bg-blue-400 group-hover:text-white"
>
Add
</button>
@@ -325,7 +302,7 @@ function Interests() {
<button
type="button"
onClick={() =>
LumeWindow.openPopup("/set-interest", "New interest")
LumeWindow.openPopup(`${id}/set-interest`, "New interest")
}
className="h-7 w-max px-2 inline-flex items-center justify-center gap-1 text-sm font-medium rounded-full bg-neutral-300 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
@@ -351,6 +328,10 @@ function Interests() {
) : (
data?.map((item) => renderItem(item))
)}
<div className="h-12 px-3 flex items-center justify-between items-betwe bg-neutral-200/50 rounded-xl text-blue-600 dark:text-blue-400">
<span className="text-sm font-medium">Discover interests</span>
<ArrowRight className="size-4" weight="bold" />
</div>
</div>
</div>
);
@@ -380,16 +361,6 @@ function Core() {
</div>
<div className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800">
<div className="flex flex-col gap-2 p-2">
<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
<div className="text-sm font-medium">Newsfeed</div>
<button
type="button"
onClick={() => LumeWindow.openNewsfeed(id)}
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
Add
</button>
</div>
<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
<div className="text-sm font-medium">Stories</div>
<button

23
src/routes/set-group.tsx
View File

@@ -1,23 +0,0 @@
import { commands } from "@/commands.gen";
import { createFileRoute } from "@tanstack/react-router";
type RouteSearch = {
account: string;
};
export const Route = createFileRoute("/set-group")({
validateSearch: (search: Record<string, string>): RouteSearch => {
return {
account: search.account,
};
},
loader: async () => {
const res = await commands.getContactList();
if (res.status === "ok") {
return res.data;
} else {
throw new Error(res.error);
}
},
});

13
src/routes/set-interest.tsx
View File

@@ -1,13 +0,0 @@
import { createFileRoute } from "@tanstack/react-router";
type RouteSearch = {
account: string;
};
export const Route = createFileRoute("/set-interest")({
validateSearch: (search: Record<string, string>): RouteSearch => {
return {
account: search.account,
};
},
});

2
src/system/window.ts
View File

@@ -15,7 +15,7 @@ export const LumeWindow = {
await getCurrentWindow().emit("columns", {
type: "add",
column: {
label: "launchpad",
label: `launchpad-${account.slice(0, 5)}`,
name: "Launchpad",
url: `/columns/launchpad/${account}`,
account,