reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve dark mode and some copy

Browse Source
This commit is contained in:
reya
2024-11-05 19:33:47 +07:00
parent d80534c51f
commit 5655a8136d
8 changed files with 45 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/routes.gen.ts
View File

@@ -13,7 +13,6 @@ import { createFileRoute } from '@tanstack/react-router'
// Import Routes // Import Routes
import { Route as rootRoute } from './routes/__root' 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 AppImport } from './routes/_app'
import { Route as NewPostIndexImport } from './routes/new-post/index' import { Route as NewPostIndexImport } from './routes/new-post/index'
import { Route as AppIndexImport } from './routes/_app/index' import { Route as AppIndexImport } from './routes/_app/index'
@@ -91,14 +90,6 @@ const NewLazyRoute = NewLazyImport.update({
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/new.lazy').then((d) => d.Route)) } 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({ const AppRoute = AppImport.update({
id: '/_app', id: '/_app',
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
@@ -389,13 +380,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AppImport preLoaderRoute: typeof AppImport
parentRoute: typeof rootRoute parentRoute: typeof rootRoute
} }
'/bootstrap-relays': {
id: '/bootstrap-relays'
path: '/bootstrap-relays'
fullPath: '/bootstrap-relays'
preLoaderRoute: typeof BootstrapRelaysImport
parentRoute: typeof rootRoute
}
'/new': { '/new': {
id: '/new' id: '/new'
path: '/new' path: '/new'
@@ -758,7 +742,6 @@ const SettingsIdLazyRouteWithChildren = SettingsIdLazyRoute._addFileChildren(
export interface FileRoutesByFullPath { export interface FileRoutesByFullPath {
'': typeof AppRouteWithChildren '': typeof AppRouteWithChildren
'/bootstrap-relays': typeof BootstrapRelaysRoute
'/new': typeof NewLazyRoute '/new': typeof NewLazyRoute
'/$id/set-group': typeof IdSetGroupRoute '/$id/set-group': typeof IdSetGroupRoute
'/$id/set-interest': typeof IdSetInterestRoute '/$id/set-interest': typeof IdSetInterestRoute
@@ -797,7 +780,6 @@ export interface FileRoutesByFullPath {
} }
export interface FileRoutesByTo { export interface FileRoutesByTo {
'/bootstrap-relays': typeof BootstrapRelaysRoute
'/new': typeof NewLazyRoute '/new': typeof NewLazyRoute
'/$id/set-group': typeof IdSetGroupRoute '/$id/set-group': typeof IdSetGroupRoute
'/$id/set-interest': typeof IdSetInterestRoute '/$id/set-interest': typeof IdSetInterestRoute
@@ -838,7 +820,6 @@ export interface FileRoutesByTo {
export interface FileRoutesById { export interface FileRoutesById {
__root__: typeof rootRoute __root__: typeof rootRoute
'/_app': typeof AppRouteWithChildren '/_app': typeof AppRouteWithChildren
'/bootstrap-relays': typeof BootstrapRelaysRoute
'/new': typeof NewLazyRoute '/new': typeof NewLazyRoute
'/$id/set-group': typeof IdSetGroupRoute '/$id/set-group': typeof IdSetGroupRoute
'/$id/set-interest': typeof IdSetInterestRoute '/$id/set-interest': typeof IdSetInterestRoute
@@ -881,7 +862,6 @@ export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: fullPaths:
| '' | ''
| '/bootstrap-relays'
| '/new' | '/new'
| '/$id/set-group' | '/$id/set-group'
| '/$id/set-interest' | '/$id/set-interest'
@@ -919,7 +899,6 @@ export interface FileRouteTypes {
| '/columns/users/$id' | '/columns/users/$id'
fileRoutesByTo: FileRoutesByTo fileRoutesByTo: FileRoutesByTo
to: to:
| '/bootstrap-relays'
| '/new' | '/new'
| '/$id/set-group' | '/$id/set-group'
| '/$id/set-interest' | '/$id/set-interest'
@@ -958,7 +937,6 @@ export interface FileRouteTypes {
id: id:
| '__root__' | '__root__'
| '/_app' | '/_app'
| '/bootstrap-relays'
| '/new' | '/new'
| '/$id/set-group' | '/$id/set-group'
| '/$id/set-interest' | '/$id/set-interest'
@@ -1000,7 +978,6 @@ export interface FileRouteTypes {
export interface RootRouteChildren { export interface RootRouteChildren {
AppRoute: typeof AppRouteWithChildren AppRoute: typeof AppRouteWithChildren
BootstrapRelaysRoute: typeof BootstrapRelaysRoute
NewLazyRoute: typeof NewLazyRoute NewLazyRoute: typeof NewLazyRoute
IdSetGroupRoute: typeof IdSetGroupRoute IdSetGroupRoute: typeof IdSetGroupRoute
IdSetInterestRoute: typeof IdSetInterestRoute IdSetInterestRoute: typeof IdSetInterestRoute
@@ -1016,7 +993,6 @@ export interface RootRouteChildren {
const rootRouteChildren: RootRouteChildren = { const rootRouteChildren: RootRouteChildren = {
AppRoute: AppRouteWithChildren, AppRoute: AppRouteWithChildren,
BootstrapRelaysRoute: BootstrapRelaysRoute,
NewLazyRoute: NewLazyRoute, NewLazyRoute: NewLazyRoute,
IdSetGroupRoute: IdSetGroupRoute, IdSetGroupRoute: IdSetGroupRoute,
IdSetInterestRoute: IdSetInterestRoute, IdSetInterestRoute: IdSetInterestRoute,
@@ -1043,7 +1019,6 @@ export const routeTree = rootRoute
"filePath": "__root.tsx", "filePath": "__root.tsx",
"children": [ "children": [
"/_app", "/_app",
"/bootstrap-relays",
"/new", "/new",
"/$id/set-group", "/$id/set-group",
"/$id/set-interest", "/$id/set-interest",
@@ -1063,9 +1038,6 @@ export const routeTree = rootRoute
"/_app/" "/_app/"
] ]
}, },
"/bootstrap-relays": {
"filePath": "bootstrap-relays.tsx"
},
"/new": { "/new": {
"filePath": "new.lazy.tsx" "filePath": "new.lazy.tsx"
}, },

159
src/routes/bootstrap-relays.lazy.tsx
View File

@@ -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>
);
}

14
src/routes/bootstrap-relays.tsx
View File

@@ -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);
}
},
});

17
src/routes/columns/_layout/discover-interests.lazy.tsx
View File

@@ -143,12 +143,14 @@ function Screen() {
</p> </p>
</div> </div>
) : isError ? ( ) : 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"> <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-sm text-center">{error?.message ?? "Error"}</p> <p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
{error?.message ?? "Error"}
</p>
</div> </div>
) : !data?.length ? ( ) : !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"> <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-sm text-center"> <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 Nothing to show yet, you can use Lume more and comeback lack to
see new events. see new events.
</p> </p>
@@ -156,6 +158,13 @@ function Screen() {
) : ( ) : (
data?.map((item) => renderItem(item)) 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 ? ( {hasNextPage ? (
<button <button
type="button" type="button"

17
src/routes/columns/_layout/discover-newsfeeds.lazy.tsx
View File

@@ -137,12 +137,14 @@ function Screen() {
</p> </p>
</div> </div>
) : isError ? ( ) : 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"> <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-sm text-center">{error?.message ?? "Error"}</p> <p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
{error?.message ?? "Error"}
</p>
</div> </div>
) : !data?.length ? ( ) : !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"> <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-sm text-center"> <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 Nothing to show yet, you can use Lume more and comeback lack to
see new events. see new events.
</p> </p>
@@ -150,6 +152,13 @@ function Screen() {
) : ( ) : (
data?.map((item) => renderItem(item)) 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 ? ( {hasNextPage ? (
<button <button
type="button" type="button"

17
src/routes/columns/_layout/discover-relays.lazy.tsx
View File

@@ -115,12 +115,14 @@ function Screen() {
</p> </p>
</div> </div>
) : isError ? ( ) : 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"> <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-sm text-center">{error?.message ?? "Error"}</p> <p className="text-xs text-center px-4 text-neutral-500 dark:text-neutral-400">
{error?.message ?? "Error"}
</p>
</div> </div>
) : !data?.length ? ( ) : !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"> <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-sm text-center"> <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 Nothing to show yet, you can use Lume more and comeback lack to
see new events. see new events.
</p> </p>
@@ -128,6 +130,13 @@ function Screen() {
) : ( ) : (
data?.map((item) => renderItem(item)) 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 ? ( {hasNextPage ? (
<button <button
type="button" type="button"

1
src/routes/columns/_layout/events.$id.lazy.tsx
View File

@@ -175,7 +175,6 @@ function ReplyList() {
return events.filter((ev) => !removeQueues.has(ev.id)); return events.filter((ev) => !removeQueues.has(ev.id));
}, },
refetchOnWindowFocus: false,
}); });
useEffect(() => { useEffect(() => {

12
src/routes/new.lazy.tsx
View File

@@ -27,32 +27,32 @@ function Screen() {
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<a <a
href="/new-account/connect" 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> <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 Your account will be handled by a remote signer. Lume will not
store your account keys. store your account keys.
</p> </p>
</a> </a>
<a <a
href="/new-account/import" 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> <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 Lume will store your keys in secure storage. You can provide a
password to add extra security. password to add extra security.
</p> </p>
</a> </a>
<a <a
href="/new-account/watch" 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"> <h3 className="mb-1 font-medium">
Continue with Public Key (Watch Mode) Continue with Public Key (Watch Mode)
</h3> </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 Use for experience without provide your private key, you can add
it later to publish new note. it later to publish new note.
</p> </p>