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

feat: add zap setup screen

Browse Source
This commit is contained in:
reya
2024-03-10 16:39:23 +07:00
parent 0c4b309a11
commit bb6badfed6
17 changed files with 121 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/package.json
View File

@@ -33,7 +33,6 @@
"react-hook-form": "^7.51.0",
"react-hotkeys-hook": "^4.5.0",
"react-i18next": "^14.0.5",
"react-router-dom": "^6.22.2",
"react-string-replace": "^1.1.1",
"slate": "^0.101.5",
"slate-react": "^0.101.6",

6
packages/ui/src/column/content.tsx
View File

@@ -1,6 +0,0 @@
import { ReactNode } from "react";
import { Routes } from "react-router-dom";
export function ColumnContent({ children }: { children: ReactNode }) {
return <Routes>{children}</Routes>;
}

80
packages/ui/src/column/header.tsx
View File

@@ -1,80 +0,0 @@
import {
ChevronDownIcon,
MoveLeftIcon,
MoveRightIcon,
RefreshIcon,
TrashIcon,
} from "@lume/icons";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useQueryClient } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
export function ColumnHeader({ queryKey }: { queryKey?: string[] }) {
const { t } = useTranslation();
const queryClient = useQueryClient();
const refresh = async () => {
if (queryKey) await queryClient.refetchQueries({ queryKey });
};
return (
<DropdownMenu.Root>
<div className="flex h-11 w-full shrink-0 items-center justify-center gap-2 border-b border-neutral-100 px-3 dark:border-neutral-900">
<DropdownMenu.Trigger asChild>
<div className="inline-flex items-center gap-1.5">
<div className="text-[13px] font-medium">{column.title}</div>
<ChevronDownIcon className="size-5" />
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
sideOffset={5}
className="flex w-[200px] flex-col overflow-hidden rounded-2xl bg-white/50 p-2 ring-1 ring-black/10 backdrop-blur-2xl focus:outline-none dark:bg-black/50 dark:ring-white/10"
>
<DropdownMenu.Item asChild>
<button
type="button"
onClick={refresh}
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
<RefreshIcon className="size-4" />
{t("global.refresh")}
</button>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<button
type="button"
onClick={() => move(column.id, "left")}
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
<MoveLeftIcon className="size-4" />
{t("global.moveLeft")}
</button>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<button
type="button"
onClick={() => move(column.id, "right")}
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
<MoveRightIcon className="size-4" />
{t("global.moveRight")}
</button>
</DropdownMenu.Item>
<DropdownMenu.Separator className="my-1 h-px bg-black/10 dark:bg-white/10" />
<DropdownMenu.Item asChild>
<button
type="button"
onClick={() => remove(column.id)}
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-red-500 hover:bg-red-500 hover:text-red-50 focus:outline-none"
>
<TrashIcon className="size-4" />
{t("global.delete")}
</button>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</div>
</DropdownMenu.Root>
);
}

15
packages/ui/src/column/index.ts
View File

@@ -1,15 +0,0 @@
import { Route } from "react-router-dom";
import { ColumnContent } from "./content";
import { ColumnHeader } from "./header";
import { ColumnLiveWidget } from "./live";
import { ColumnProvider } from "./provider";
import { ColumnRoot } from "./root";
export const Column = {
Provider: ColumnProvider,
Root: ColumnRoot,
Live: ColumnLiveWidget,
Header: ColumnHeader,
Content: ColumnContent,
Route: Route,
};

46
packages/ui/src/column/live.tsx
View File

@@ -1,46 +0,0 @@
import { ArrowUpIcon } from "@lume/icons";
import { useEffect, useState } from "react";
export function ColumnLiveWidget({
filter,
onClick,
}: {
filter: NDKFilter;
onClick: (event: NDKEvent[]) => void;
}) {
const ark = useArk();
const [events, setEvents] = useState<NDKEvent[]>([]);
const update = async () => {
onClick(events);
// reset
setEvents([]);
};
useEffect(() => {
const sub = ark.subscribe({
filter,
closeOnEose: false,
cb: (event: NDKEvent) => setEvents((prev) => [...prev, event]),
});
return () => {
if (sub) sub.stop();
};
}, []);
if (!events.length) return null;
return (
<div className="absolute left-0 z-40 flex items-center justify-center w-full top-12 h-11">
<button
type="button"
onClick={update}
className="inline-flex items-center justify-center h-9 gap-1 pl-4 pr-3 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
>
{events.length} {events.length === 1 ? "new note" : "new notes"}
<ArrowUpIcon className="size-4" />
</button>
</div>
);
}

23
packages/ui/src/column/provider.tsx
View File

@@ -1,23 +0,0 @@
import { LumeColumn } from "@lume/types";
import { ReactNode, createContext, useContext } from "react";
const ColumnContext = createContext<LumeColumn>(null);
export function ColumnProvider({
column,
children,
}: { column: LumeColumn; children: ReactNode }) {
return (
<ColumnContext.Provider value={column}>{children}</ColumnContext.Provider>
);
}
export function useColumnContext() {
const context = useContext(ColumnContext);
if (!context) {
throw new Error(
"Please import Column Provider to use useColumnContext() hook",
);
}
return context;
}

37
packages/ui/src/column/root.tsx
View File

@@ -1,37 +0,0 @@
import { cn } from "@lume/utils";
import { Resizable } from "re-resizable";
import { ReactNode, useState } from "react";
import { MemoryRouter, UNSAFE_LocationContext } from "react-router-dom";
export function ColumnRoot({
children,
className,
}: {
children: ReactNode;
className?: string;
}) {
const [width, setWidth] = useState(420);
return (
<UNSAFE_LocationContext.Provider value={null}>
<Resizable
size={{ width, height: "100%" }}
onResizeStart={(e) => e.preventDefault()}
onResizeStop={(_e, _direction, _ref, d) => {
setWidth((prevWidth) => prevWidth + d.width);
}}
minWidth={420}
maxWidth={600}
className={cn(
"relative flex flex-col border-r-2 border-neutral-50 hover:border-neutral-100 dark:border-neutral-950 dark:hover:border-neutral-900",
className,
)}
enable={{ right: true }}
>
<MemoryRouter future={{ v7_startTransition: true }}>
{children}
</MemoryRouter>
</Resizable>
</UNSAFE_LocationContext.Provider>
);
}

1
packages/ui/src/index.ts
View File

@@ -1,6 +1,5 @@
export * from "./user";
export * from "./note";
export * from "./column";
// UI
export * from "./container";

13
packages/ui/src/note/buttons/zap.tsx
View File

@@ -1,9 +1,22 @@
import { useArk } from "@lume/ark";
import { ZapIcon } from "@lume/icons";
export function NoteZap() {
const ark = useArk();
const zap = async () => {
const nwc = await ark.nwc_status();
if (!nwc) {
ark.open_nwc();
} else {
ark.open_zap();
}
};
return (
<button
type="button"
onClick={zap}
className="group inline-flex size-7 items-center justify-center text-neutral-800 dark:text-neutral-200"
>
<ZapIcon className="size-5 group-hover:text-blue-500" />