feat: polish

This commit is contained in:
2024-03-13 08:40:18 +07:00
parent ccab78ca11
commit e928f2ee37
10 changed files with 65 additions and 163 deletions

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

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"

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" />

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";

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) => (