nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: new sidebar

Browse Source
This commit is contained in:
Ren Amamiya 2023-10-08 18:01:19 +07:00
parent 0946e9125e
commit ced23341d2
9 changed files with 209 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,10 +1,10 @@
<html lang="en" class="dark"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lume</title> <title>Lume</title>
</head> </head>
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen"> <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-black dark:text-white">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>

1
src-tauri/tauri.linux.conf.json
View File

@ -19,7 +19,6 @@
"minHeight": 800, "minHeight": 800,
"decorations": false, "decorations": false,
"resizable": true, "resizable": true,
"theme": "Dark",
"title": "Lume", "title": "Lume",
"transparent": false, "transparent": false,
"center": true, "center": true,

1
src-tauri/tauri.macos.conf.json
View File

@ -20,7 +20,6 @@
"minWidth": 1080, "minWidth": 1080,
"minHeight": 800, "minHeight": 800,
"resizable": true, "resizable": true,
"theme": "Dark",
"title": "Lume", "title": "Lume",
"titleBarStyle": "Overlay", "titleBarStyle": "Overlay",
"transparent": false, "transparent": false,

1
src-tauri/tauri.windows.conf.json
View File

@ -19,7 +19,6 @@
"minHeight": 800, "minHeight": 800,
"decorations": false, "decorations": false,
"resizable": true, "resizable": true,
"theme": "Dark",
"title": "Lume", "title": "Lume",
"center": true, "center": true,
"fullscreen": false, "fullscreen": false,

20
src/shared/layouts/app.tsx
View File

@ -7,17 +7,19 @@ export function AppLayout() {
return ( return (
<div className="flex h-screen w-screen flex-col"> <div className="flex h-screen w-screen flex-col">
<WindowTitlebar /> <WindowTitlebar />
<div className="flex h-full min-h-0 w-full bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950"> <div className="flex h-full min-h-0 w-full">
<div className="h-full shrink-0"> <div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
<Navigation /> <Navigation />
</div> </div>
<div className="h-full flex-1"> <div className="flex h-full min-h-0 flex-1 rounded-tl-lg 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-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
<Outlet /> <div className="h-full flex-1">
<ScrollRestoration <Outlet />
getKey={(location) => { <ScrollRestoration
return location.pathname; getKey={(location) => {
}} return location.pathname;
/> }}
/>
</div>
</div> </div>
</div> </div>
</div> </div>

262
src/shared/navigation.tsx
View File

@ -16,127 +16,149 @@ import {
} from '@shared/icons'; } from '@shared/icons';
export function Navigation() { export function Navigation() {
const { db } = useStorage();
const navigate = useNavigate();
return ( return (
<div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800"> <div className="flex h-full w-full flex-col justify-between p-3">
<div <div className="flex flex-col gap-5">
data-tauri-drag-region <NavLink
className="inline-flex h-16 w-full items-center justify-between px-3" to="/"
> preventScrollReset={true}
<div className="inline-flex items-center gap-4 pl-2"> className="inline-flex flex-col items-center justify-center text-sm font-medium"
<button >
type="button" {({ isActive }) => (
onClick={() => navigate(-1)} <>
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100" <div
> className={twMerge(
<ArrowLeftIcon className="h-5 w-5" /> 'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
</button> isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
<button )}
type="button" >
onClick={() => navigate(1)} <HomeIcon className="h-6 w-6" />
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100" </div>{' '}
> <div
<ArrowRightIcon className="h-5 w-5" /> className={twMerge(
</button> '',
</div> isActive
<ComposerModal /> ? 'text-black dark:text-white'
</div> : 'text-black/50 dark:text-white/50'
<div )}
data-tauri-drag-region >
className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pr-3" Home
> </div>
<div className="flex flex-col"> </>
<NavLink )}
to="/" </NavLink>
preventScrollReset={true} <NavLink
className={({ isActive }) => to="/chats"
twMerge( preventScrollReset={true}
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', className="inline-flex flex-col items-center justify-center text-sm font-medium"
isActive >
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' {({ isActive }) => (
: 'border-transparent text-zinc-500 dark:text-zinc-500' <>
) <div
} className={twMerge(
> 'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center"> isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
<HomeIcon className="h-5 w-5" /> )}
</span> >
Home <ChatsIcon className="h-6 w-6" />
</NavLink> </div>{' '}
<NavLink <div
to="/chats" className={twMerge(
preventScrollReset={true} '',
className={({ isActive }) => isActive
twMerge( ? 'text-black dark:text-white'
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', : 'text-black/50 dark:text-white/50'
isActive )}
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' >
: 'border-transparent text-zinc-500 dark:text-zinc-500' Chats
) </div>
} </>
> )}
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center"> </NavLink>
<ChatsIcon className="h-5 w-5" /> <NavLink
</span> to="/communities"
Chats preventScrollReset={true}
</NavLink> className="inline-flex flex-col items-center justify-center text-sm font-medium"
<NavLink >
to="/communities" {({ isActive }) => (
preventScrollReset={true} <>
className={({ isActive }) => <div
twMerge( className={twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', 'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' )}
: 'border-transparent text-zinc-500 dark:text-zinc-500' >
) <CommunityIcon className="h-6 w-6" />
} </div>{' '}
> <div
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center"> className={twMerge(
<CommunityIcon className="h-5 w-5" /> '',
</span> isActive
Communities ? 'text-black dark:text-white'
</NavLink> : 'text-black/50 dark:text-white/50'
<NavLink )}
to="/relays" >
preventScrollReset={true} Groups
className={({ isActive }) => </div>
twMerge( </>
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', )}
isActive </NavLink>
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' <NavLink
: 'border-transparent text-zinc-500 dark:text-zinc-500' to="/relays"
) preventScrollReset={true}
} className="inline-flex flex-col items-center justify-center text-sm font-medium"
> >
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center"> {({ isActive }) => (
<RelayIcon className="h-5 w-5" /> <>
</span> <div
Relays className={twMerge(
</NavLink> 'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
<NavLink isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
to="/explore" )}
preventScrollReset={true} >
className={({ isActive }) => <RelayIcon className="h-6 w-6" />
twMerge( </div>{' '}
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', <div
isActive className={twMerge(
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' '',
: 'border-transparent text-zinc-500 dark:text-zinc-500' isActive
) ? 'text-black dark:text-white'
} : 'text-black/50 dark:text-white/50'
> )}
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center"> >
<ExploreIcon className="h-5 w-5" /> Relays
</span> </div>
Explore </>
</NavLink> )}
</div> </NavLink>
</div> <NavLink
<div className="relative shrink-0"> to="/explore"
<ActiveAccount /> preventScrollReset={true}
className="inline-flex flex-col items-center justify-center text-sm font-medium"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
)}
>
<ExploreIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Explore
</div>
</>
)}
</NavLink>
</div> </div>
</div> </div>
); );

80
src/shared/user.tsx
View File

@ -76,18 +76,22 @@ export const User = memo(function User({
className="h-6 w-6 rounded" className="h-6 w-6 rounded"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img src={svgURI} alt={pubkey} className="h-6 w-6 rounded bg-black" /> <img
src={svgURI}
alt={pubkey}
className="h-6 w-6 rounded bg-black dark:bg-white"
/>
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex flex-1 items-baseline gap-2"> <div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold text-white"> <h5 className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
displayNpub(pubkey, 16)} displayNpub(pubkey, 16)}
</h5> </h5>
<span className="text-white/50">·</span> <span className="text-zinc-500 dark:text-zinc-300">·</span>
<span className="text-white/50">{createdAt}</span> <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
</div> </div>
</div> </div>
); );
@ -106,12 +110,16 @@ export const User = memo(function User({
className="h-14 w-14 rounded-lg" className="h-14 w-14 rounded-lg"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img src={svgURI} alt={pubkey} className="h-14 w-14 rounded-lg bg-black" /> <img
src={svgURI}
alt={pubkey}
className="h-14 w-14 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex h-full flex-col items-start justify-between"> <div className="flex h-full flex-col items-start justify-between">
<div className="flex flex-col items-start gap-1 text-start"> <div className="flex flex-col items-start gap-1 text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold text-white"> <p className="max-w-[15rem] truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100">
{user?.name || user?.display_name || user?.displayName} {user?.name || user?.display_name || user?.displayName}
</p> </p>
<ReactMarkdown <ReactMarkdown
@ -129,7 +137,7 @@ export const User = memo(function User({
<Link <Link
to={user?.website} to={user?.website}
target="_blank" target="_blank"
className="inline-flex items-center gap-2 text-sm text-white/70" className="inline-flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100/70"
> >
<WorldIcon className="h-4 w-4" /> <WorldIcon className="h-4 w-4" />
<p className="max-w-[10rem] truncate">{user?.website}</p> <p className="max-w-[10rem] truncate">{user?.website}</p>
@ -154,14 +162,18 @@ export const User = memo(function User({
className="h-10 w-10 rounded-lg" className="h-10 w-10 rounded-lg"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" /> <img
src={svgURI}
alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex w-full flex-col items-start"> <div className="flex w-full flex-col items-start">
<h3 className="max-w-[15rem] truncate font-medium text-white"> <h3 className="max-w-[15rem] truncate font-medium text-zinc-900 dark:text-zinc-100">
{user?.name || user?.display_name || user?.displayName} {user?.name || user?.display_name || user?.displayName}
</h3> </h3>
<p className="max-w-[10rem] truncate text-sm text-white/70"> <p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)} {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
</p> </p>
</div> </div>
@ -181,7 +193,11 @@ export const User = memo(function User({
className="h-12 w-12 rounded-lg" className="h-12 w-12 rounded-lg"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img src={svgURI} alt={pubkey} className="h-12 w-12 rounded-lg bg-black" /> <img
src={svgURI}
alt={pubkey}
className="h-12 w-12 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
); );
@ -202,7 +218,7 @@ export const User = memo(function User({
<img <img
src={svgURI} src={svgURI}
alt={pubkey} alt={pubkey}
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black" className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
@ -226,11 +242,15 @@ export const User = memo(function User({
className="h-6 w-6 rounded" className="h-6 w-6 rounded"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img src={svgURI} alt={pubkey} className="h-6 w-6 rounded bg-black" /> <img
src={svgURI}
alt={pubkey}
className="h-6 w-6 rounded bg-black dark:bg-white"
/>
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="inline-flex items-baseline gap-1"> <div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate font-medium text-white/80"> <h5 className="max-w-[10rem] truncate font-medium text-zinc-900 dark:text-zinc-100/80">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
@ -256,17 +276,23 @@ export const User = memo(function User({
className="h-10 w-10 rounded-lg" className="h-10 w-10 rounded-lg"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" /> <img
src={svgURI}
alt={pubkey}
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/>
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex flex-1 flex-col gap-2"> <div className="flex flex-1 flex-col gap-2">
<h5 className="max-w-[15rem] truncate font-semibold text-white"> <h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
{user?.name || user?.display_name || user?.displayName || 'Anon'} {user?.name || user?.display_name || user?.displayName || 'Anon'}
</h5> </h5>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<span className="text-white/50">{createdAt}</span> <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
<span className="text-white/50">·</span> <span className="text-zinc-500 dark:text-zinc-300">·</span>
<span className="text-white/50">{displayNpub(pubkey, 16)}</span> <span className="text-zinc-500 dark:text-zinc-300">
{displayNpub(pubkey, 16)}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -290,20 +316,20 @@ export const User = memo(function User({
<img <img
src={svgURI} src={svgURI}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg border border-white/5 bg-black" className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
</HoverCard.Trigger> </HoverCard.Trigger>
<div className="flex flex-1 items-center gap-2"> <div className="flex flex-1 items-center gap-2">
<h5 className="max-w-[15rem] truncate font-semibold text-white"> <h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
displayNpub(pubkey, 16)} displayNpub(pubkey, 16)}
</h5> </h5>
<span className="text-white/50">·</span> <span className="text-zinc-500 dark:text-zinc-300">·</span>
<span className="text-white/50">{createdAt}</span> <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
</div> </div>
</div> </div>
<HoverCard.Portal> <HoverCard.Portal>
@ -325,7 +351,7 @@ export const User = memo(function User({
<img <img
src={svgURI} src={svgURI}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg border border-white/5 bg-black" className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
@ -341,16 +367,16 @@ export const User = memo(function User({
<NIP05 <NIP05
pubkey={pubkey} pubkey={pubkey}
nip05={user?.nip05} nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-white/50" className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300"
/> />
) : ( ) : (
<span className="max-w-[15rem] truncate text-sm text-white/50"> <span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300">
{displayNpub(pubkey, 16)} {displayNpub(pubkey, 16)}
</span> </span>
)} )}
</div> </div>
<div> <div>
<p className="line-clamp-3 break-all text-sm leading-tight text-white"> <p className="line-clamp-3 break-all text-sm leading-tight text-zinc-900 dark:text-zinc-100">
{user?.about} {user?.about}
</p> </p>
</div> </div>

2
src/shared/widgets/eventLoader.tsx
View File

@ -57,7 +57,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
</div> </div>
) : ( ) : (
<div className="text-center"> <div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500"> <h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
Downloading all events while you&apos;re away... Downloading all events while you&apos;re away...
</h3> </h3>
</div> </div>

1
tailwind.config.js
View File

@ -4,7 +4,6 @@ const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = { module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'], content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'],
darkMode: 'class',
theme: { theme: {
extend: { extend: {
colors: { colors: {