highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-17 21:32:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: small updates

Browse Source
This commit is contained in:
reya 2024-02-20 10:26:19 +07:00
parent e2cdc5b576
commit d0c9f93ebb
14 changed files with 165 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
apps/desktop2/package.json
View File

@ -1,46 +1,44 @@
{
"name": "@lume/desktop2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@lume/ark": "workspace:^",
"@lume/icons": "workspace:^",
"@lume/storage": "workspace:^",
"@lume/ui": "workspace:^",
"@lume/utils": "workspace:^",
"@radix-ui/react-checkbox": "^1.0.4",
"@tanstack/react-query": "^5.20.5",
"@tanstack/react-router": "^1.16.2",
"i18next": "^23.8.2",
"i18next-resources-to-backend": "^1.2.0",
"jotai": "^2.6.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^14.0.5",
"sonner": "^1.4.0",
"virtua": "^0.27.0"
},
"devDependencies": {
"@lume/tailwindcss": "workspace:^",
"@lume/tsconfig": "workspace:^",
"@lume/types": "workspace:^",
"@tanstack/router-devtools": "^1.16.2",
"@tanstack/router-vite-plugin": "^1.16.3",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.6.0",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3",
"vite": "^5.1.2",
"vite-plugin-top-level-await": "^1.4.1",
"vite-tsconfig-paths": "^4.3.1"
}
"name": "@lume/desktop2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@lume/ark": "workspace:^",
"@lume/icons": "workspace:^",
"@lume/ui": "workspace:^",
"@lume/utils": "workspace:^",
"@radix-ui/react-checkbox": "^1.0.4",
"@tanstack/react-query": "^5.20.5",
"@tanstack/react-router": "^1.16.2",
"i18next": "^23.8.2",
"i18next-resources-to-backend": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^14.0.5",
"sonner": "^1.4.0",
"virtua": "^0.27.0"
},
"devDependencies": {
"@lume/tailwindcss": "workspace:^",
"@lume/tsconfig": "workspace:^",
"@lume/types": "workspace:^",
"@tanstack/router-devtools": "^1.16.2",
"@tanstack/router-vite-plugin": "^1.16.3",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.6.0",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3",
"vite": "^5.1.2",
"vite-plugin-top-level-await": "^1.4.1",
"vite-tsconfig-paths": "^4.3.1"
}
}

20
apps/desktop2/src/app.tsx
View File

@ -1,4 +1,3 @@
import { StorageProvider } from "@lume/storage";
import { useArk } from "@lume/ark";
import { ArkProvider } from "./ark";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@ -8,17 +7,21 @@ import ReactDOM from "react-dom/client";
import { I18nextProvider } from "react-i18next";
import "./app.css";
import i18n from "./locale";
// Import the generated route tree
import { routeTree } from "./router.gen";
import { Toaster } from "sonner";
import { locale, platform } from "@tauri-apps/plugin-os";
import { routeTree } from "./router.gen"; // auto generated file
const queryClient = new QueryClient();
const platformName = await platform();
const osLocale = (await locale()).slice(0, 2);
// Set up a Router instance
const router = createRouter({
routeTree,
context: {
ark: undefined!,
platform: platformName,
locale: osLocale,
queryClient,
},
});
@ -51,11 +54,10 @@ if (!rootElement.innerHTML) {
root.render(
<I18nextProvider i18n={i18n} defaultNS={"translation"}>
<QueryClientProvider client={queryClient}>
<StorageProvider>
<StrictMode>
<App />
</StrictMode>
</StorageProvider>
<StrictMode>
<Toaster position="top-center" richColors />
<App />
</StrictMode>
</QueryClientProvider>
</I18nextProvider>,
);

3
apps/desktop2/src/routes/__root.tsx
View File

@ -6,10 +6,13 @@ import {
} from "@tanstack/react-router";
import { type Ark } from "@lume/ark";
import { type QueryClient } from "@tanstack/react-query";
import { type Platform } from "@tauri-apps/plugin-os";
interface RouterContext {
ark: Ark;
queryClient: QueryClient;
platform: Platform;
locale: string;
}
export const Route = createRootRouteWithContext<RouterContext>()({

9
apps/desktop2/src/routes/app.tsx
View File

@ -6,7 +6,6 @@ import {
SpaceFilledIcon,
SpaceIcon,
} from "@lume/icons";
import { useStorage } from "@lume/storage";
import { Link } from "@tanstack/react-router";
import { Outlet, createFileRoute } from "@tanstack/react-router";
import { cn } from "@lume/utils";
@ -17,15 +16,15 @@ export const Route = createFileRoute("/app")({
});
function App() {
const storage = useStorage();
const context = Route.useRouteContext();
return (
<div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
<div
data-tauri-drag-region
className={cn(
"flex h-11 shrink-0 items-center justify-between",
storage.platform === "macos" ? "pl-24" : "",
"flex h-11 shrink-0 items-center justify-between pr-4",
context.platform === "macos" ? "pl-24" : "pl-4",
)}
>
<div
@ -84,7 +83,7 @@ function App() {
)}
</Link>
</div>
<div data-tauri-drag-region className="flex items-center gap-2 pr-4">
<div data-tauri-drag-region className="flex items-center gap-2">
<ActiveAccount />
</div>
</div>

7
apps/desktop2/src/routes/app/home.lazy.tsx
View File

@ -18,7 +18,12 @@ function Home() {
queryKey: ["timeline"],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const events = await ark.get_text_events(FETCH_LIMIT, pageParam, true);
const events = await ark.get_text_events(
FETCH_LIMIT,
pageParam,
undefined,
true,
);
return events;
},
getNextPageParam: (lastPage) => {

4
apps/desktop2/src/routes/auth/create/index.lazy.tsx
View File

@ -28,7 +28,7 @@ function Screen() {
return (
<div className="flex h-full w-full items-center justify-center">
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
<div className="flex flex-col items-center gap-2 text-center">
<div className="flex flex-col items-center gap-1 text-center">
<h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
<p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
{t("signup.subtitle")}
@ -69,7 +69,7 @@ function Screen() {
<button
type="button"
onClick={next}
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
>
{loading ? (
<LoaderIcon className="size-5 animate-spin" />

70
apps/desktop2/src/routes/auth/create/self.lazy.tsx
View File

@ -1,7 +1,6 @@
import { useArk } from "@lume/ark";
import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
import { Keys } from "@lume/types";
import { onboardingAtom } from "@lume/utils";
import * as Checkbox from "@radix-ui/react-checkbox";
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
@ -24,18 +23,17 @@ function Create() {
const submit = async () => {
setLoading(true);
const save = await ark.save_account(keys);
if (!save) {
try {
await ark.save_account(keys);
navigate({
to: "/app/home",
search: { onboarding: true },
replace: true,
});
} catch (e) {
setLoading(false);
toast.error("Save account keys failed, please try again later.");
toast.error(e);
}
// update state
setLoading(false);
// next step
navigate({ to: "/app/space", replace: true });
};
useEffect(() => {
@ -49,7 +47,7 @@ function Create() {
return (
<div className="flex h-full w-full items-center justify-center">
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
<div className="flex flex-col items-center gap-2 text-center">
<div className="flex flex-col items-center gap-1 text-center">
<h1 className="text-2xl font-semibold">
{t("signupWithSelfManage.title")}
</h1>
@ -58,20 +56,20 @@ function Create() {
</p>
</div>
<div className="mb-0 flex flex-col gap-6">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<div className="relative">
{keys ? (
<input
readOnly
value={keys.nsec}
type={showKey ? "text" : "password"}
className="h-11 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-14 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
/>
) : null}
<button
type="button"
onClick={() => setShowKey((state) => !state)}
className="absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
className="absolute right-2 top-2 inline-flex size-8 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
>
{showKey ? (
<EyeOnIcon className="size-4" />
@ -101,26 +99,6 @@ function Create() {
{t("signupWithSelfManage.confirm1")}
</label>
</div>
<div className="flex items-center gap-2">
<Checkbox.Root
checked={confirm.c2}
onCheckedChange={() =>
setConfirm((state) => ({ ...state, c2: !state.c2 }))
}
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
id="confirm2"
>
<Checkbox.Indicator className="text-blue-500">
<CheckIcon className="size-4" />
</Checkbox.Indicator>
</Checkbox.Root>
<label
className="text-sm text-neutral-700 dark:text-neutral-400"
htmlFor="confirm2"
>
{t("signupWithSelfManage.confirm2")}
</label>
</div>
<div className="flex items-center gap-2">
<Checkbox.Root
checked={confirm.c3}
@ -141,13 +119,33 @@ function Create() {
{t("signupWithSelfManage.confirm3")}
</label>
</div>
<div className="flex items-center gap-2">
<Checkbox.Root
checked={confirm.c2}
onCheckedChange={() =>
setConfirm((state) => ({ ...state, c2: !state.c2 }))
}
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
id="confirm2"
>
<Checkbox.Indicator className="text-blue-500">
<CheckIcon className="size-4" />
</Checkbox.Indicator>
</Checkbox.Root>
<label
className="text-sm text-neutral-700 dark:text-neutral-400"
htmlFor="confirm2"
>
{t("signupWithSelfManage.confirm2")}
</label>
</div>
</div>
</div>
<button
type="button"
onClick={submit}
disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="size-5 animate-spin" />

81
apps/desktop2/src/routes/auth/import.lazy.tsx
View File

@ -1,9 +1,10 @@
import { useArk } from "@lume/ark";
import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
import { LoaderIcon } from "@lume/icons";
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
import { invoke } from "@tauri-apps/api/core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
export const Route = createLazyFileRoute("/auth/import")({
component: Import,
@ -15,8 +16,8 @@ function Import() {
const [t] = useTranslation();
const [key, setKey] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [showKey, setShowKey] = useState(false);
const submit = async () => {
if (!key.startsWith("nsec1")) return;
@ -24,61 +25,67 @@ function Import() {
setLoading(true);
const npub: string = await invoke("get_public_key", { nsec: key });
const keys = {
npub,
nsec: key,
};
const save = await ark.save_account(keys);
if (save) {
navigate({ to: "/" });
} else {
console.log("import failed");
try {
const npub: string = await invoke("get_public_key", { nsec: key });
await ark.save_account({
npub,
nsec: key,
});
navigate({
to: "/app/home",
search: { onboarding: true },
replace: true,
});
} catch (e) {
setLoading(false);
toast.error(e);
}
// update state
setLoading(false);
// next step
navigate({ to: "/app/space", replace: true });
};
const isNip05 = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(key);
const isNip49 = key.startsWith("ncryptsec");
return (
<div className="flex h-full w-full items-center justify-center">
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
<div className="flex flex-col items-center gap-2 text-center">
<div className="flex flex-col items-center gap-1 text-center">
<h1 className="text-2xl font-semibold">{t("login.title")}</h1>
<p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
{t("login.subtitle")}
</p>
</div>
<div className="mb-0 flex flex-col gap-6">
<div className="flex flex-col gap-6">
<div className="relative">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<div>
<input
value={key}
type={showKey ? "text" : "password"}
type="text"
onChange={(e) => setKey(e.target.value)}
className="h-11 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
/>
<button
type="button"
onClick={() => setShowKey((state) => !state)}
className="absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
>
{showKey ? (
<EyeOnIcon className="size-4" />
) : (
<EyeOffIcon className="size-4" />
)}
</button>
</div>
{isNip05 || isNip49 ? (
<div className="flex flex-col gap-1.5">
<label
htmlFor="password"
className="font-medium text-neutral-900 dark:text-neutral-100"
>
Password *
</label>
<input
value={password}
name="password"
type="password"
onChange={(e) => setPassword(e.target.value)}
className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
/>
</div>
) : null}
</div>
<button
type="button"
onClick={submit}
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="size-5 animate-spin" />

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

@ -69,7 +69,7 @@ function Screen() {
</div>
<div className="flex items-center justify-center gap-6">
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
<LoaderIcon className="size-6 animate-spin text-white" />
) : (
<>
{ark.accounts.map((account) => (

11
apps/desktop2/src/routes/landing/index.tsx
View File

@ -1,4 +1,3 @@
import { useStorage } from "@lume/storage";
import { Link, createFileRoute } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
@ -7,7 +6,7 @@ export const Route = createFileRoute("/landing/")({
});
function Screen() {
const storage = useStorage();
const context = Route.useRouteContext();
const { t } = useTranslation();
return (
@ -17,8 +16,8 @@ function Screen() {
<div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
<div className="flex flex-col items-center text-center">
<img
src={`/heading-${storage.locale}.png`}
srcSet={`/heading-${storage.locale}@2x.png 2x`}
src={`/heading-${context.locale}.png`}
srcSet={`/heading-${context.locale}@2x.png 2x`}
alt="lume"
className="w-2/3"
/>
@ -29,13 +28,13 @@ function Screen() {
<div className="mx-auto flex w-full max-w-sm flex-col gap-2">
<Link
to="/auth/create"
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
>
{t("welcome.signup")}
</Link>
<Link
to="/auth/import"
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
>
{t("welcome.login")}
</Link>

5
apps/desktop2/src/routes/select.tsx
View File

@ -1,5 +0,0 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/select')({
component: () => <div>Hello /select!</div>
})

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

@ -13,7 +13,7 @@ export class Ark {
public accounts: Array<Account>;
constructor() {
this.account = { npub: "" };
this.account = { npub: "", contacts: [] };
}
public async get_all_accounts() {
@ -68,12 +68,12 @@ export class Ark {
if (cmd) {
await invoke("update_signer", { nsec: keys.nsec });
const contacts: string[] = await invoke("get_contact_list");
this.account.npub = keys.npub;
return true;
this.account.contacts = contacts;
}
return false;
return cmd;
} catch (e) {
console.error(String(e));
}
@ -106,17 +106,24 @@ export class Ark {
}
}
public async get_text_events(limit: number, asOf?: number, dedup?: boolean) {
public async get_text_events(
limit: number,
asOf?: number,
authors?: string[],
dedup?: boolean,
) {
try {
let until: string = undefined;
if (asOf && asOf > 0) until = asOf.toString();
const seenIds = new Set<string>();
const dedupQueue = new Set<string>();
const contact_list = authors ?? this.account.contacts;
const nostrEvents: Event[] = await invoke("get_text_events", {
limit,
until,
contact_list,
});
if (dedup) {

6
pnpm-lock.yaml generated
View File

@ -66,9 +66,6 @@ importers:
'@lume/icons':
specifier: workspace:^
version: link:../../packages/icons
'@lume/storage':
specifier: workspace:^
version: link:../../packages/storage
'@lume/ui':
specifier: workspace:^
version: link:../../packages/ui
@ -90,9 +87,6 @@ importers:
i18next-resources-to-backend:
specifier: ^1.2.0
version: 1.2.0
jotai:
specifier: ^2.6.4
version: 2.6.4(@types/react@18.2.55)(react@18.2.0)
react:
specifier: ^18.2.0
version: 18.2.0

1
src-tauri/locales/en.json
View File

@ -105,6 +105,7 @@
},
"login": {
"title": "Welcome back, anon!",
"subtitle": "We're so excited to see you again!",
"footer": "Lume will put your Private Key in Secure Storage depended on your OS Platform. It will be secured by Password or Biometric ID",
"loginWithAddress": "Login with Nostr Address",
"loginWithBunker": "Login with nsecBunker",