mirror of
https://github.com/lumehq/lume.git
synced 2025-03-19 14:21:45 +01:00
feat: improve dark mode and some copy
This commit is contained in:
reya
parent
d80534c51f
commit
5655a8136d
@ -13,7 +13,6 @@ import { createFileRoute } from '@tanstack/react-router'
|
||||
// Import Routes
|
||||
|
||||
import { Route as rootRoute } from './routes/__root'
|
||||
import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
|
||||
import { Route as AppImport } from './routes/_app'
|
||||
import { Route as NewPostIndexImport } from './routes/new-post/index'
|
||||
import { Route as AppIndexImport } from './routes/_app/index'
|
||||
@ -91,14 +90,6 @@ const NewLazyRoute = NewLazyImport.update({
|
||||
getParentRoute: () => rootRoute,
|
||||
} as any).lazy(() => import('./routes/new.lazy').then((d) => d.Route))
|
||||
|
||||
const BootstrapRelaysRoute = BootstrapRelaysImport.update({
|
||||
id: '/bootstrap-relays',
|
||||
path: '/bootstrap-relays',
|
||||
getParentRoute: () => rootRoute,
|
||||
} as any).lazy(() =>
|
||||
import('./routes/bootstrap-relays.lazy').then((d) => d.Route),
|
||||
)
|
||||
|
||||
const AppRoute = AppImport.update({
|
||||
id: '/_app',
|
||||
getParentRoute: () => rootRoute,
|
||||
@ -389,13 +380,6 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AppImport
|
||||
parentRoute: typeof rootRoute
|
||||
}
|
||||
'/bootstrap-relays': {
|
||||
id: '/bootstrap-relays'
|
||||
path: '/bootstrap-relays'
|
||||
fullPath: '/bootstrap-relays'
|
||||
preLoaderRoute: typeof BootstrapRelaysImport
|
||||
parentRoute: typeof rootRoute
|
||||
}
|
||||
'/new': {
|
||||
id: '/new'
|
||||
path: '/new'
|
||||
@ -758,7 +742,6 @@ const SettingsIdLazyRouteWithChildren = SettingsIdLazyRoute._addFileChildren(
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'': typeof AppRouteWithChildren
|
||||
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
||||
'/new': typeof NewLazyRoute
|
||||
'/$id/set-group': typeof IdSetGroupRoute
|
||||
'/$id/set-interest': typeof IdSetInterestRoute
|
||||
@ -797,7 +780,6 @@ export interface FileRoutesByFullPath {
|
||||
}
|
||||
|
||||
export interface FileRoutesByTo {
|
||||
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
||||
'/new': typeof NewLazyRoute
|
||||
'/$id/set-group': typeof IdSetGroupRoute
|
||||
'/$id/set-interest': typeof IdSetInterestRoute
|
||||
@ -838,7 +820,6 @@ export interface FileRoutesByTo {
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRoute
|
||||
'/_app': typeof AppRouteWithChildren
|
||||
'/bootstrap-relays': typeof BootstrapRelaysRoute
|
||||
'/new': typeof NewLazyRoute
|
||||
'/$id/set-group': typeof IdSetGroupRoute
|
||||
'/$id/set-interest': typeof IdSetInterestRoute
|
||||
@ -881,7 +862,6 @@ export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths:
|
||||
| ''
|
||||
| '/bootstrap-relays'
|
||||
| '/new'
|
||||
| '/$id/set-group'
|
||||
| '/$id/set-interest'
|
||||
@ -919,7 +899,6 @@ export interface FileRouteTypes {
|
||||
| '/columns/users/$id'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
| '/bootstrap-relays'
|
||||
| '/new'
|
||||
| '/$id/set-group'
|
||||
| '/$id/set-interest'
|
||||
@ -958,7 +937,6 @@ export interface FileRouteTypes {
|
||||
id:
|
||||
| '__root__'
|
||||
| '/_app'
|
||||
| '/bootstrap-relays'
|
||||
| '/new'
|
||||
| '/$id/set-group'
|
||||
| '/$id/set-interest'
|
||||
@ -1000,7 +978,6 @@ export interface FileRouteTypes {
|
||||
|
||||
export interface RootRouteChildren {
|
||||
AppRoute: typeof AppRouteWithChildren
|
||||
BootstrapRelaysRoute: typeof BootstrapRelaysRoute
|
||||
NewLazyRoute: typeof NewLazyRoute
|
||||
IdSetGroupRoute: typeof IdSetGroupRoute
|
||||
IdSetInterestRoute: typeof IdSetInterestRoute
|
||||
@ -1016,7 +993,6 @@ export interface RootRouteChildren {
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
AppRoute: AppRouteWithChildren,
|
||||
BootstrapRelaysRoute: BootstrapRelaysRoute,
|
||||
NewLazyRoute: NewLazyRoute,
|
||||
IdSetGroupRoute: IdSetGroupRoute,
|
||||
IdSetInterestRoute: IdSetInterestRoute,
|
||||
@ -1043,7 +1019,6 @@ export const routeTree = rootRoute
|
||||
"filePath": "__root.tsx",
|
||||
"children": [
|
||||
"/_app",
|
||||
"/bootstrap-relays",
|
||||
"/new",
|
||||
"/$id/set-group",
|
||||
"/$id/set-interest",
|
||||
@ -1063,9 +1038,6 @@ export const routeTree = rootRoute
|
||||
"/_app/"
|
||||
]
|
||||
},
|
||||
"/bootstrap-relays": {
|
||||
"filePath": "bootstrap-relays.tsx"
|
||||
},
|
||||
"/new": {
|
||||
"filePath": "new.lazy.tsx"
|
||||
},
|
||||
|
||||
@ -1,159 +0,0 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { GoBack } from "@/components";
|
||||
import { Frame } from "@/components/frame";
|
||||
import { Spinner } from "@/components/spinner";
|
||||
import { ArrowLeft, Plus, X } from "@phosphor-icons/react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { relaunch } from "@tauri-apps/plugin-process";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/bootstrap-relays")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const bootstrapRelays = Route.useLoaderData();
|
||||
|
||||
const [relays, setRelays] = useState<string[]>([]);
|
||||
const [newRelay, setNewRelay] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const add = () => {
|
||||
try {
|
||||
let url = newRelay;
|
||||
|
||||
if (!url.startsWith("wss://")) {
|
||||
url = `wss://${url}`;
|
||||
}
|
||||
|
||||
// Validate URL
|
||||
const relay = new URL(url);
|
||||
|
||||
// Update
|
||||
setRelays((prev) => [...prev, relay.toString()]);
|
||||
setNewRelay("");
|
||||
} catch {
|
||||
message("URL is not valid.", { kind: "error" });
|
||||
}
|
||||
};
|
||||
|
||||
const remove = (relay: string) => {
|
||||
setRelays((prev) => prev.filter((item) => item !== relay));
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
startTransition(async () => {
|
||||
if (!relays.length) {
|
||||
await message("You need to add at least 1 relay", {
|
||||
title: "Manage Relays",
|
||||
kind: "info",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const merged = relays.join("\r\n");
|
||||
const res = await commands.setBootstrapRelays(merged);
|
||||
|
||||
if (res.status === "ok") {
|
||||
return await relaunch();
|
||||
} else {
|
||||
await message(res.error, {
|
||||
title: "Manage Relays",
|
||||
kind: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setRelays(bootstrapRelays);
|
||||
}, [bootstrapRelays]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="relative size-full flex items-center justify-center"
|
||||
>
|
||||
<div className="w-[320px] flex flex-col gap-8">
|
||||
<div className="flex flex-col gap-1 text-center">
|
||||
<h1 className="leading-tight text-xl font-semibold">Manage Relays</h1>
|
||||
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
||||
The default relays that Lume will connected.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Frame
|
||||
className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
|
||||
shadow
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
name="relay"
|
||||
type="text"
|
||||
placeholder="ex: relay.nostr.net, ..."
|
||||
value={newRelay}
|
||||
onChange={(e) => setNewRelay(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") add();
|
||||
}}
|
||||
className="flex-1 px-3 rounded-lg h-9 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
onClick={() => add()}
|
||||
className="inline-flex items-center justify-center size-9 rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
||||
>
|
||||
<Plus className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{relays.map((relay) => (
|
||||
<div
|
||||
key={relay}
|
||||
className="flex items-center justify-between h-9 px-2 rounded-lg bg-neutral-100 dark:bg-neutral-900"
|
||||
>
|
||||
<div className="text-sm font-medium">{relay}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(relay)}
|
||||
className="inline-flex items-center justify-center rounded-md size-7 text-neutral-700 dark:text-white/20 hover:bg-black/10 dark:hover:bg-white/10"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs text-neutral-600 dark:text-neutral-400">
|
||||
<p>
|
||||
Lume is heavily depend on Negentropy for syncing data. You need
|
||||
to use at least 1 relay that support Negentropy. If you not
|
||||
sure, you can keep using the default relay list.
|
||||
</p>
|
||||
</div>
|
||||
</Frame>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit()}
|
||||
disabled={isPending || !relays.length}
|
||||
className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{isPending ? <Spinner /> : "Save & Restart"}
|
||||
</button>
|
||||
<span className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
|
||||
Lume will relaunch after saving.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<GoBack className="fixed top-11 left-2 flex items-center gap-1.5 text-sm font-medium">
|
||||
<ArrowLeft className="size-5" />
|
||||
Back
|
||||
</GoBack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/bootstrap-relays")({
|
||||
loader: async () => {
|
||||
const res = await commands.getBootstrapRelays();
|
||||
|
||||
if (res.status === "ok") {
|
||||
return res.data.map((item) => item.replace(",", ""));
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
},
|
||||
});
|
||||
@ -143,12 +143,14 @@ function Screen() {
|
||||
</p>
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
|
||||
<p className="text-sm text-center">{error?.message ?? "Error"}</p>
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
{error?.message ?? "Error"}
|
||||
</p>
|
||||
</div>
|
||||
) : !data?.length ? (
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
|
||||
<p className="text-sm text-center">
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
Nothing to show yet, you can use Lume more and comeback lack to
|
||||
see new events.
|
||||
</p>
|
||||
@ -156,6 +158,13 @@ function Screen() {
|
||||
) : (
|
||||
data?.map((item) => renderItem(item))
|
||||
)}
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
Lume running sync in the background,
|
||||
<br />
|
||||
the more you use the more event you see.
|
||||
</p>
|
||||
</div>
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -137,12 +137,14 @@ function Screen() {
|
||||
</p>
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
|
||||
<p className="text-sm text-center">{error?.message ?? "Error"}</p>
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
{error?.message ?? "Error"}
|
||||
</p>
|
||||
</div>
|
||||
) : !data?.length ? (
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
|
||||
<p className="text-sm text-center">
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
Nothing to show yet, you can use Lume more and comeback lack to
|
||||
see new events.
|
||||
</p>
|
||||
@ -150,6 +152,13 @@ function Screen() {
|
||||
) : (
|
||||
data?.map((item) => renderItem(item))
|
||||
)}
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
Lume running sync in the background,
|
||||
<br />
|
||||
the more you use the more event you see.
|
||||
</p>
|
||||
</div>
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -115,12 +115,14 @@ function Screen() {
|
||||
</p>
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
|
||||
<p className="text-sm text-center">{error?.message ?? "Error"}</p>
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
{error?.message ?? "Error"}
|
||||
</p>
|
||||
</div>
|
||||
) : !data?.length ? (
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
|
||||
<p className="text-sm text-center">
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
Nothing to show yet, you can use Lume more and comeback lack to
|
||||
see new events.
|
||||
</p>
|
||||
@ -128,6 +130,13 @@ function Screen() {
|
||||
) : (
|
||||
data?.map((item) => renderItem(item))
|
||||
)}
|
||||
<div className="mb-3 flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/20">
|
||||
<p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
|
||||
Lume running sync in the background,
|
||||
<br />
|
||||
the more you use the more event you see.
|
||||
</p>
|
||||
</div>
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -175,7 +175,6 @@ function ReplyList() {
|
||||
|
||||
return events.filter((ev) => !removeQueues.has(ev.id));
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -27,32 +27,32 @@ function Screen() {
|
||||
<div className="flex flex-col gap-4">
|
||||
<a
|
||||
href="/new-account/connect"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-600 ring-1 ring-black/5 dark:ring-white/5"
|
||||
>
|
||||
<h3 className="mb-1 font-medium">Continue with Nostr Connect</h3>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-500">
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Your account will be handled by a remote signer. Lume will not
|
||||
store your account keys.
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/new-account/import"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-600 ring-1 ring-black/5 dark:ring-white/5"
|
||||
>
|
||||
<h3 className="mb-1 font-medium">Continue with Secret Key</h3>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-500">
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Lume will store your keys in secure storage. You can provide a
|
||||
password to add extra security.
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/new-account/watch"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-600 ring-1 ring-black/5 dark:ring-white/5"
|
||||
>
|
||||
<h3 className="mb-1 font-medium">
|
||||
Continue with Public Key (Watch Mode)
|
||||
</h3>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-500">
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Use for experience without provide your private key, you can add
|
||||
it later to publish new note.
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user