feat: polish
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
Reference in New Issue
Block a user