wip: desktop2
This commit is contained in:
@@ -15,31 +15,31 @@
|
||||
"@lume/ui": "workspace:^",
|
||||
"@lume/utils": "workspace:^",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@tanstack/react-query": "^5.18.1",
|
||||
"@tanstack/react-router": "^1.16.0",
|
||||
"@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.2",
|
||||
"react-i18next": "^14.0.5",
|
||||
"sonner": "^1.4.0",
|
||||
"virtua": "^0.23.3"
|
||||
"virtua": "^0.27.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lume/tailwindcss": "workspace:^",
|
||||
"@lume/tsconfig": "workspace:^",
|
||||
"@lume/types": "workspace:^",
|
||||
"@tanstack/router-devtools": "^1.16.0",
|
||||
"@tanstack/router-vite-plugin": "^1.16.1",
|
||||
"@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.5.0",
|
||||
"@vitejs/plugin-react-swc": "^3.6.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.0",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.1.2",
|
||||
"vite-plugin-top-level-await": "^1.4.1",
|
||||
"vite-tsconfig-paths": "^4.3.1"
|
||||
}
|
||||
|
||||
@@ -5,8 +5,7 @@ import { EmptyFeed, TextNote } from "@lume/ui";
|
||||
import { FETCH_LIMIT } from "@lume/utils";
|
||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { CacheSnapshot, Virtualizer, VListHandle } from "virtua";
|
||||
import { Virtualizer } from "virtua";
|
||||
|
||||
export const Route = createLazyFileRoute("/app/home")({
|
||||
component: Home,
|
||||
@@ -14,15 +13,6 @@ export const Route = createLazyFileRoute("/app/home")({
|
||||
|
||||
function Home() {
|
||||
const ark = useArk();
|
||||
const ref = useRef<VListHandle>();
|
||||
const cacheKey = "timeline-vlist";
|
||||
|
||||
const [offset, cache] = useMemo(() => {
|
||||
const serialized = sessionStorage.getItem(cacheKey);
|
||||
if (!serialized) return [];
|
||||
return JSON.parse(serialized) as [number, CacheSnapshot];
|
||||
}, []);
|
||||
|
||||
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ["timeline"],
|
||||
@@ -49,22 +39,6 @@ function Home() {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
const handle = ref.current;
|
||||
|
||||
if (offset) {
|
||||
handle.scrollTo(offset);
|
||||
}
|
||||
|
||||
return () => {
|
||||
sessionStorage.setItem(
|
||||
cacheKey,
|
||||
JSON.stringify([handle.scrollOffset, handle.cache]),
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
|
||||
<div className="h-full w-full overflow-y-auto pt-10">
|
||||
@@ -85,7 +59,7 @@ function Home() {
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<Virtualizer ref={ref} cache={cache} overscan={2}>
|
||||
<Virtualizer overscan={2}>
|
||||
{data.map((item) => renderItem(item))}
|
||||
</Virtualizer>
|
||||
)}
|
||||
|
||||
@@ -4,7 +4,6 @@ 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 { useSetAtom } from "jotai";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
@@ -15,7 +14,6 @@ export const Route = createLazyFileRoute("/auth/create/self")({
|
||||
|
||||
function Create() {
|
||||
const ark = useArk();
|
||||
const setOnboarding = useSetAtom(onboardingAtom);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [t] = useTranslation();
|
||||
@@ -25,8 +23,9 @@ function Create() {
|
||||
const [keys, setKeys] = useState<Keys>(null);
|
||||
|
||||
const submit = async () => {
|
||||
const save = await ark.save_account(keys);
|
||||
setLoading(true);
|
||||
|
||||
const save = await ark.save_account(keys);
|
||||
if (!save) {
|
||||
setLoading(false);
|
||||
toast.error("Save account keys failed, please try again later.");
|
||||
@@ -34,7 +33,6 @@ function Create() {
|
||||
|
||||
// update state
|
||||
setLoading(false);
|
||||
setOnboarding({ open: true, newUser: true });
|
||||
|
||||
// next step
|
||||
navigate({ to: "/app/space", replace: true });
|
||||
|
||||
@@ -1,55 +1,93 @@
|
||||
import { useArk } from "@lume/ark";
|
||||
import { EyeOffIcon, EyeOnIcon, 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";
|
||||
|
||||
export const Route = createLazyFileRoute("/auth/import")({
|
||||
component: Import,
|
||||
component: Import,
|
||||
});
|
||||
|
||||
function Import() {
|
||||
const ark = useArk();
|
||||
const navigate = useNavigate();
|
||||
const ark = useArk();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [key, setKey] = useState("");
|
||||
const [t] = useTranslation();
|
||||
const [key, setKey] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
|
||||
const submit = async () => {
|
||||
if (!key.startsWith("nsec1")) return;
|
||||
if (key.length < 30) return;
|
||||
const submit = async () => {
|
||||
if (!key.startsWith("nsec1")) return;
|
||||
if (key.length < 30) return;
|
||||
|
||||
const npub: string = await invoke("get_public_key", { nsec: key });
|
||||
const keys = {
|
||||
npub,
|
||||
nsec: key,
|
||||
};
|
||||
setLoading(true);
|
||||
|
||||
const save = await ark.save_account(keys);
|
||||
if (save) {
|
||||
navigate({ to: "/" });
|
||||
} else {
|
||||
console.log("import failed");
|
||||
}
|
||||
};
|
||||
const npub: string = await invoke("get_public_key", { nsec: key });
|
||||
const keys = {
|
||||
npub,
|
||||
nsec: key,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center w-screen h-screen">
|
||||
<div>
|
||||
<h3>Import your key</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
<input
|
||||
name="nsec"
|
||||
value={key}
|
||||
onChange={(e) => setKey(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
className="w-full h-11 bg-gray-3 hover:bg-gray-4"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const save = await ark.save_account(keys);
|
||||
if (save) {
|
||||
navigate({ to: "/" });
|
||||
} else {
|
||||
console.log("import failed");
|
||||
}
|
||||
|
||||
// update state
|
||||
setLoading(false);
|
||||
|
||||
// next step
|
||||
navigate({ to: "/app/space", replace: true });
|
||||
};
|
||||
|
||||
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">
|
||||
<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">
|
||||
<input
|
||||
value={key}
|
||||
type={showKey ? "text" : "password"}
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
</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"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
) : (
|
||||
"Import"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"@astrojs/check": "^0.4.1",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@fontsource/geist-mono": "^5.0.1",
|
||||
"astro": "^4.3.2",
|
||||
"astro": "^4.3.7",
|
||||
"astro-seo-meta": "^4.1.0",
|
||||
"astro-seo-schema": "^4.0.0",
|
||||
"schema-dts": "^1.1.2",
|
||||
|
||||
Reference in New Issue
Block a user