nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-29 16:30:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: polish

Browse Source
This commit is contained in:
reya 2024-03-13 08:40:18 +07:00
parent ccab78ca11
commit e928f2ee37
10 changed files with 65 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/desktop2/src/components/accounts.tsx
View File

@ -61,13 +61,17 @@ function Inactive({ pubkey }: { pubkey: string }) {
}
function Active({ pubkey }: { pubkey: string }) {
const [open, setOpen] = useState(true);
const ark = useArk();
const navigate = useNavigate();
// @ts-ignore, magic !!!
const { guest } = useSearch({ strict: false });
// @ts-ignore, magic !!!
const { account } = useParams({ strict: false });
if (guest) {
return (
<Popover.Root open={open} onOpenChange={setOpen}>
<Popover.Root open={true}>
<Popover.Trigger asChild>
<button type="button">
<User.Provider pubkey={pubkey}>
@ -120,23 +124,20 @@ function Active({ pubkey }: { pubkey: string }) {
>
<DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
Add account
<div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
⌘+Shift+N
</div>
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
<DropdownMenu.Item
onClick={() => ark.open_profile(account)}
className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100"
>
Profile
<div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
⌘+Shift+P
</div>
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
Settings
<div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
⌘+Shift+S
</div>
</DropdownMenu.Item>
<DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
<DropdownMenu.Item
onClick={() => navigate({ to: "/", search: { manually: true } })}
className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100"
>
Logout
<div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
⌘+Shift+L

9
apps/desktop2/src/components/login.tsx
View File

@ -14,6 +14,14 @@ export function LoginDialog() {
const login = async () => {
try {
if (!nsec.length) {
return toast.info("You must enter a valid nsec or ncrypto");
}
if (nsec.startsWith("ncrypto") && !passphase.length) {
return toast.warning("You must provide a passphase for ncrypto key");
}
const save = await ark.save_account(nsec, passphase);
if (save) {
@ -81,6 +89,7 @@ export function LoginDialog() {
<input
name="nsec"
type="text"
placeholder="nsec or ncrypto..."
value={nsec}
onChange={(e) => setNsec(e.target.value)}
className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"

1
apps/desktop2/src/routes/$account.tsx
View File

@ -46,6 +46,7 @@ function App() {
</button>
<button
type="button"
onClick={() => ark.open_settings()}
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" />

2
apps/desktop2/src/routes/$account/home.tsx
View File

@ -1,4 +1,4 @@
import { GlobalIcon, LocalIcon, RefreshIcon } from "@lume/icons";
import { GlobalIcon, LoaderIcon, LocalIcon, RefreshIcon } from "@lume/icons";
import { cn } from "@lume/utils";
import { useQueryClient } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";

14
apps/desktop2/src/routes/index.tsx
View File

@ -6,7 +6,7 @@ import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
export const Route = createFileRoute("/")({
beforeLoad: async ({ context }) => {
beforeLoad: async ({ search, context }) => {
const ark = context.ark;
const accounts = await ark.get_all_accounts();
@ -22,9 +22,13 @@ export const Route = createFileRoute("/")({
});
// Only 1 account, skip account selection screen
case 1:
// @ts-ignore, totally fine !!!
if (search.manually) return;
const account = accounts[0].npub;
const loadAccount = await ark.load_selected_account(account);
if (loadAccount) {
const loadedAccount = await ark.load_selected_account(account);
if (loadedAccount) {
throw redirect({
to: "/$account/home/local",
params: { account },
@ -72,7 +76,9 @@ function Screen() {
</div>
<div className="flex items-center justify-center gap-6">
{loading ? (
<LoaderIcon className="size-6 animate-spin text-white" />
<div className="inline-flex size-6 items-center justify-center">
<LoaderIcon className="size-6 animate-spin text-white" />
</div>
) : (
<>
{ark.accounts.map((account) => (

13
packages/ark/src/ark.ts
View File

@ -569,4 +569,17 @@ export class Ark {
fileDropEnabled: true,
});
}
public open_settings() {
return new WebviewWindow("settings", {
title: "Settings",
url: "/settings",
minWidth: 600,
width: 800,
height: 500,
hiddenTitle: true,
titleBarStyle: "overlay",
fileDropEnabled: true,
});
}
}

14
packages/icons/src/loader.tsx
View File

@ -1,9 +1,15 @@
import { SVGProps } from 'react';
import { SVGProps } from "react";
export function LoaderIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
export function LoaderIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<title id="loading">Loading</title>
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"

70
packages/ui/src/note/child.tsx
View File

@ -1,11 +1,5 @@
import { NOSTR_MENTIONS } from "@lume/utils";
import { nanoid } from "nanoid";
import { ReactNode, useMemo } from "react";
import { useTranslation } from "react-i18next";
import reactStringReplace from "react-string-replace";
import { User } from "../user";
import { Hashtag } from "./mentions/hashtag";
import { MentionUser } from "./mentions/user";
import { useEvent } from "@lume/ark";
export function NoteChild({
@ -18,66 +12,6 @@ export function NoteChild({
const { t } = useTranslation();
const { isLoading, isError, data } = useEvent(eventId);
const richContent = useMemo(() => {
if (!data) return "";
let parsedContent: string | ReactNode[] =
data.content.substring(0, 160) + "...";
const text = data.content;
const words = text.split(/( |\n)/);
const hashtags = words.filter((word) => word.startsWith("#"));
const mentions = words.filter((word) =>
NOSTR_MENTIONS.some((el) => word.startsWith(el)),
);
try {
if (hashtags.length) {
for (const hashtag of hashtags) {
const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
parsedContent = reactStringReplace(parsedContent, regex, () => {
return <Hashtag key={nanoid()} tag={hashtag} />;
});
}
}
if (mentions.length) {
for (const mention of mentions) {
parsedContent = reactStringReplace(
parsedContent,
mention,
(match, i) => <MentionUser key={match + i} pubkey={mention} />,
);
}
}
parsedContent = reactStringReplace(
parsedContent,
/(https?:\/\/\S+)/g,
(match, i) => {
const url = new URL(match);
return (
<a
key={match + i}
href={url.toString()}
target="_blank"
rel="noreferrer"
className="content-break font-normal text-blue-500 hover:text-blue-600"
>
{url.toString()}
</a>
);
},
);
return parsedContent;
} catch (e) {
console.log(e);
return parsedContent;
}
}, [data]);
if (isLoading) {
return (
<div className="relative flex gap-3">
@ -102,8 +36,8 @@ export function NoteChild({
<div className="relative flex gap-3">
<div className="relative flex-1 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
<div className="absolute right-0 top-[18px] h-3 w-3 -translate-y-1/2 translate-x-1/2 rotate-45 transform bg-neutral-100 dark:bg-neutral-900" />
<div className="content-break mt-6 select-text leading-normal text-neutral-900 dark:text-neutral-100">
{richContent}
<div className="content-break mt-6 line-clamp-3 select-text leading-normal text-neutral-900 dark:text-neutral-100">
{data.content}
</div>
</div>
<User.Provider pubkey={data.pubkey}>

5
packages/ui/src/note/content.tsx
View File

@ -10,19 +10,18 @@ import {
import { NIP89 } from "./nip89";
import { useNoteContext } from "./provider";
import { ReactNode, useMemo } from "react";
import reactStringReplace from "react-string-replace";
import { nanoid } from "nanoid";
import { MentionUser } from "./mentions/user";
import { MentionNote } from "./mentions/note";
import { Hashtag } from "./mentions/hashtag";
import { VideoPreview } from "./preview/video";
import { stripHtml } from "string-strip-html";
import { ImagePreview } from "./preview/image";
import reactStringReplace from "react-string-replace";
export function NoteContent({ className }: { className?: string }) {
const event = useNoteContext();
const content = useMemo(() => {
const text = stripHtml(event.content.trim()).result;
const text = event.content.trim();
const words = text.split(/( |\n)/);
// @ts-ignore, kaboom !!!

73
packages/ui/src/note/mentions/note.tsx
View File

@ -1,13 +1,7 @@
import { NOSTR_MENTIONS } from "@lume/utils";
import { ReactNode, useMemo } from "react";
import { useTranslation } from "react-i18next";
import reactStringReplace from "react-string-replace";
import { User } from "../../user";
import { Hashtag } from "./hashtag";
import { MentionUser } from "./user";
import { useArk, useEvent } from "@lume/ark";
import { LinkIcon } from "@lume/icons";
import { stripHtml } from "string-strip-html";
export function MentionNote({
eventId,
@ -16,72 +10,11 @@ export function MentionNote({
eventId: string;
openable?: boolean;
}) {
const ark = useArk();
const { t } = useTranslation();
const { isLoading, isError, data } = useEvent(eventId);
const ark = useArk();
const content = useMemo(() => {
if (!data) return "";
const text = stripHtml(data.content.trim()).result;
const words = text.split(/( |\n)/);
// @ts-ignore, kaboom !!!
let parsedContent: ReactNode[] = text;
const hashtags = words.filter((word) => word.startsWith("#"));
const mentions = words.filter((word) =>
NOSTR_MENTIONS.some((el) => word.startsWith(el)),
);
try {
if (hashtags.length) {
for (const hashtag of hashtags) {
parsedContent = reactStringReplace(
parsedContent,
hashtag,
(match, i) => {
return <Hashtag key={match + i} tag={hashtag} />;
},
);
}
}
if (mentions.length) {
for (const mention of mentions) {
parsedContent = reactStringReplace(
parsedContent,
mention,
(match, i) => <MentionUser key={match + i} pubkey={mention} />,
);
}
}
parsedContent = reactStringReplace(
parsedContent,
/(https?:\/\/\S+)/g,
(match, i) => {
const url = new URL(match);
return (
<a
key={match + i}
href={url.toString()}
target="_blank"
rel="noreferrer"
className="content-break inline-block w-full truncate font-normal text-blue-500 hover:text-blue-600"
>
{url.toString()}
</a>
);
},
);
return parsedContent;
} catch (e) {
return text;
}
}, [data]);
if (isLoading) {
return (
<div
@ -120,7 +53,7 @@ export function MentionNote({
</User.Root>
</User.Provider>
<div className="line-clamp-4 select-text whitespace-normal text-balance leading-normal">
{content}
{data.content}
</div>
{openable ? (
<div className="flex h-10 items-center justify-between">