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

chore: clean up

Browse Source
This commit is contained in:
reya
2024-01-03 11:03:56 +07:00
parent 698f5a5d6d
commit 9f27d68533
29 changed files with 322 additions and 1944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ark/src/components/column/header.tsx
View File

@@ -44,7 +44,6 @@ export function ColumnHeader({
return (
<div className="flex items-center justify-between w-full px-3 border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
<div className="inline-flex items-center gap-4">
<div className="w-1 h-5 bg-blue-500 rounded-full shrink-0" />
<div className="inline-flex items-center flex-1 gap-2 text-neutral-800 dark:text-neutral-200">
{icon ? icon : <ThreadIcon className="size-4" />}
<div className="text-sm font-medium">{title}</div>
@@ -61,7 +60,7 @@ export function ColumnHeader({
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[220px] flex-col overflow-hidden rounded-xl border border-neutral-100 bg-white p-2 shadow-lg shadow-neutral-200/50 focus:outline-none dark:border-neutral-900 dark:bg-neutral-950 dark:shadow-neutral-900/50">
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 dark:bg-neutral-950 focus:outline-none dark:border-neutral-900">
<DropdownMenu.Item asChild>
<button
type="button"

6
packages/ark/src/components/column/live.tsx
View File

@@ -34,13 +34,13 @@ export function ColumnLiveWidget({
if (!events.length) return null;
return (
<div className="absolute left-0 top-11 z-50 flex h-11 w-full items-center justify-center">
<div className="absolute left-0 z-50 flex items-center justify-center w-full top-11 h-11">
<button
type="button"
onClick={update}
className="inline-flex h-9 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-2.5 text-sm font-semibold text-white hover:bg-blue-600"
className="inline-flex items-center justify-center h-8 gap-1 pl-2 pr-2.5 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"
>
<ChevronUpIcon className="h-4 w-4" />
<ChevronUpIcon className="w-4 h-4" />
{events.length} {events.length === 1 ? "new event" : "new events"}
</button>
</div>

14
packages/ark/src/components/note/menu.tsx
View File

@@ -1,4 +1,4 @@
import { HorizontalDotsIcon } from "@lume/icons";
import { HorizontalDotsIcon, ShareIcon } from "@lume/icons";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { nip19 } from "nostr-tools";
@@ -40,9 +40,9 @@ export function NoteMenu() {
<DropdownMenu.Trigger asChild>
<button
type="button"
className="inline-flex h-6 w-6 items-center justify-center"
className="inline-flex items-center justify-center w-6 h-6"
>
<HorizontalDotsIcon className="h-4 w-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
<HorizontalDotsIcon className="w-4 h-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
@@ -51,7 +51,7 @@ export function NoteMenu() {
<button
type="button"
onClick={() => copyLink()}
className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
className="inline-flex items-center h-10 px-4 text-sm text-white rounded-lg hover:bg-neutral-900 focus:outline-none"
>
Copy shareable link
</button>
@@ -60,7 +60,7 @@ export function NoteMenu() {
<button
type="button"
onClick={() => copyID()}
className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
className="inline-flex items-center h-10 px-4 text-sm text-white rounded-lg hover:bg-neutral-900 focus:outline-none"
>
Copy note ID
</button>
@@ -69,7 +69,7 @@ export function NoteMenu() {
<button
type="button"
onClick={() => copyRaw()}
className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
className="inline-flex items-center h-10 px-4 text-sm text-white rounded-lg hover:bg-neutral-900 focus:outline-none"
>
Copy raw event
</button>
@@ -77,7 +77,7 @@ export function NoteMenu() {
<DropdownMenu.Item asChild>
<Link
to={`/users/${event.pubkey}`}
className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
className="inline-flex items-center h-10 px-4 text-sm text-white rounded-lg hover:bg-neutral-900 focus:outline-none"
>
View profile
</Link>

34
packages/ark/src/components/note/thread.tsx
View File

@@ -1,6 +1,9 @@
import { PinIcon } from "@lume/icons";
import { COL_TYPES } from "@lume/utils";
import { Link } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import { Note } from ".";
import { useColumnContext } from "../column";
export function NoteThread({
thread,
@@ -9,23 +12,40 @@ export function NoteThread({
thread: { rootEventId: string; replyEventId: string };
className?: string;
}) {
const { addColumn } = useColumnContext();
if (!thread) return null;
return (
<div className={twMerge("w-full px-3", className)}>
<div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
<div className="flex flex-col w-full gap-3 p-3 rounded-lg h-min bg-neutral-100 dark:bg-neutral-900">
{thread.rootEventId ? (
<Note.Child eventId={thread.rootEventId} isRoot />
) : null}
{thread.replyEventId ? (
<Note.Child eventId={thread.replyEventId} />
) : null}
<Link
to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
className="self-start text-blue-500 hover:text-blue-600"
>
Show thread
</Link>
<div className="inline-flex items-center justify-between">
<Link
to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
className="self-start text-blue-500 hover:text-blue-600"
>
Show thread
</Link>
<button
type="button"
onClick={async () =>
await addColumn({
kind: COL_TYPES.thread,
title: "Thread",
content: thread?.rootEventId || thread?.replyEventId,
})
}
className="inline-flex items-center justify-center rounded-md text-neutral-600 dark:text-neutral-400 size-6 bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
>
<PinIcon className="size-4" />
</button>
</div>
</div>
</div>
);

7
packages/ark/src/provider.tsx
View File

@@ -1,7 +1,7 @@
import { LoaderIcon } from "@lume/icons";
import { NDKCacheAdapterTauri } from "@lume/ndk-cache-tauri";
import { LumeStorage } from "@lume/storage";
import { QUOTES, delay } from "@lume/utils";
import { QUOTES, delay, sendNativeNotification } from "@lume/utils";
import NDK, {
NDKNip46Signer,
NDKPrivateKeySigner,
@@ -20,7 +20,6 @@ import {
normalizeRelayUrlSet,
} from "nostr-fetch";
import { PropsWithChildren, useEffect, useState } from "react";
import { toast } from "sonner";
import { createContext, useContextSelector } from "use-context-selector";
import { Ark } from "./ark";
@@ -161,7 +160,9 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
const signIn = NDKRelayAuthPolicies.signIn({ ndk, signer });
const event = await signIn(relay, challenge);
if (event) {
toast.success(`You've sign in sucessfully to relay: ${relay.url}`);
sendNativeNotification(
`You've sign in sucessfully to relay: ${relay.url}`,
);
return event;
}
};

41
packages/icons/src/share.tsx
View File

@@ -1,21 +1,24 @@
import { SVGProps } from 'react';
import { SVGProps } from "react";
export function ShareIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="1.5"
d="M22.085 11.628l-8.501-7.63a.5.5 0 00-.834.373V8.5C4.25 8.5 2 11.75 2 20.25c1.5-3 2.25-4.75 10.75-4.75v4.129a.5.5 0 00.834.372l8.501-7.63a.5.5 0 000-.744z"
></path>
</svg>
);
export function ShareIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15.41 6.51c-2.583.773-4.925 2.033-6.82 3.98m6.82 7c-2.583-.773-4.925-2.033-6.82-3.98M21 5a3 3 0 11-6 0 3 3 0 016 0zM9 12a3 3 0 11-6 0 3 3 0 016 0zm12 7a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
);
}

3
packages/ui/package.json
View File

@@ -7,8 +7,10 @@
"@lume/ark": "workspace:^",
"@lume/icons": "workspace:^",
"@lume/utils": "workspace:^",
"@nostr-dev-kit/ndk": "^2.3.2",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-hover-card": "^1.0.7",
"@tanstack/react-query": "^5.17.0",
@@ -16,6 +18,7 @@
"@tauri-apps/plugin-http": "2.0.0-alpha.6",
"@tauri-apps/plugin-os": "2.0.0-alpha.6",
"minidenticons": "^4.2.0",
"nostr-tools": "1.17",
"react": "^18.2.0",
"react-router-dom": "^6.21.1",
"sonner": "^1.3.1"

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

@@ -7,7 +7,6 @@ export * from "./user";
export * from "./titlebar";
export * from "./layouts/app";
export * from "./layouts/auth";
export * from "./layouts/composer";
export * from "./layouts/home";
export * from "./layouts/settings";
export * from "./mentions";

52
packages/ui/src/layouts/composer.tsx
View File

@@ -1,52 +0,0 @@
import { NavLink, Outlet, useLocation } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
export function ComposerLayout() {
const location = useLocation();
return (
<div className="container mx-auto h-full px-8 pt-8">
<div className="mb-8 flex h-10 shrink-0 items-center gap-3">
{location.pathname !== '/new/privkey' ? (
<div className="flex h-10 items-center gap-2 rounded-lg bg-neutral-100 px-0.5 dark:bg-neutral-800">
<NavLink
to="/new/"
end
className={({ isActive }) =>
twMerge(
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
)
}
>
Post
</NavLink>
<NavLink
to="/new/article"
className={({ isActive }) =>
twMerge(
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
)
}
>
Article
</NavLink>
<NavLink
to="/new/file"
className={({ isActive }) =>
twMerge(
'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium',
isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
)
}
>
File Sharing
</NavLink>
</div>
) : null}
</div>
<Outlet />
</div>
);
}

28
packages/ui/src/navigation.tsx
View File

@@ -5,19 +5,17 @@ import {
HomeIcon,
NwcFilledIcon,
NwcIcon,
PlusIcon,
RelayFilledIcon,
RelayIcon,
SearchIcon,
} from "@lume/icons";
import { cn } from "@lume/utils";
import { Link, NavLink } from "react-router-dom";
import { NavLink } from "react-router-dom";
import { ActiveAccount } from "./account/active";
export function Navigation() {
return (
<div className="flex h-full w-20 shrink-0 flex-col justify-between px-4 py-3">
<div className="flex flex-1 flex-col gap-5">
<div className="flex flex-col justify-between w-20 h-full px-4 py-3 shrink-0">
<div className="flex flex-col flex-1 gap-5">
<NavLink
to="/"
preventScrollReset={true}
@@ -34,7 +32,7 @@ export function Navigation() {
)}
>
{isActive ? (
<HomeFilledIcon className="size-6 text-black dark:text-white" />
<HomeFilledIcon className="text-black size-6 dark:text-white" />
) : (
<HomeIcon className="size-6" />
)}
@@ -102,7 +100,7 @@ export function Navigation() {
)}
>
{isActive ? (
<DepotFilledIcon className="size-6 text-black dark:text-white" />
<DepotFilledIcon className="text-black size-6 dark:text-white" />
) : (
<DepotIcon className="size-6" />
)}
@@ -136,7 +134,7 @@ export function Navigation() {
)}
>
{isActive ? (
<NwcFilledIcon className="size-6 text-black dark:text-white" />
<NwcFilledIcon className="text-black size-6 dark:text-white" />
) : (
<NwcIcon className="size-6" />
)}
@@ -155,19 +153,7 @@ export function Navigation() {
)}
</NavLink>
</div>
<div className="flex shrink-0 flex-col gap-3 p-1">
<Link
to="/new/"
className="flex aspect-square h-auto w-full items-center justify-center rounded-xl bg-black/10 text-black hover:bg-blue-500 hover:text-white dark:bg-white/10 dark:text-white dark:hover:bg-blue-500"
>
<PlusIcon className="h-5 w-5" />
</Link>
<Link
to="/nwc"
className="flex aspect-square h-auto w-full items-center justify-center rounded-xl bg-black/10 hover:bg-blue-500 hover:text-white dark:bg-white/10 dark:hover:bg-blue-500"
>
<SearchIcon className="h-5 w-5" />
</Link>
<div className="flex flex-col gap-3 p-1 shrink-0">
<ActiveAccount />
</div>
</div>