reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions 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
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,

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

@@ -7,10 +7,11 @@ 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="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)]">
<div className="h-full flex-1"> <div className="h-full flex-1">
<Outlet /> <Outlet />
<ScrollRestoration <ScrollRestoration
@@ -21,5 +22,6 @@ export function AppLayout() {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

204
src/shared/navigation.tsx
View File

@@ -16,128 +16,150 @@ 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
className="inline-flex h-16 w-full items-center justify-between px-3"
>
<div className="inline-flex items-center gap-4 pl-2">
<button
type="button"
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"
>
<ArrowLeftIcon className="h-5 w-5" />
</button>
<button
type="button"
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"
>
<ArrowRightIcon className="h-5 w-5" />
</button>
</div>
<ComposerModal />
</div>
<div
data-tauri-drag-region
className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pr-3"
>
<div className="flex flex-col">
<NavLink <NavLink
to="/" to="/"
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className="inline-flex flex-col items-center justify-center text-sm font-medium"
twMerge( >
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', {({ isActive }) => (
isActive <>
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' <div
: 'border-transparent text-zinc-500 dark:text-zinc-500' 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'
)}
>
<HomeIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
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">
<HomeIcon className="h-5 w-5" />
</span>
Home Home
</div>
</>
)}
</NavLink> </NavLink>
<NavLink <NavLink
to="/chats" to="/chats"
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className="inline-flex flex-col items-center justify-center text-sm font-medium"
twMerge( >
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', {({ isActive }) => (
isActive <>
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' <div
: 'border-transparent text-zinc-500 dark:text-zinc-500' 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'
)}
>
<ChatsIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
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">
<ChatsIcon className="h-5 w-5" />
</span>
Chats Chats
</div>
</>
)}
</NavLink> </NavLink>
<NavLink <NavLink
to="/communities" to="/communities"
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className="inline-flex flex-col items-center justify-center text-sm font-medium"
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
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'
)
}
> >
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center"> {({ isActive }) => (
<CommunityIcon className="h-5 w-5" /> <>
</span> <div
Communities 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'
)}
>
<CommunityIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Groups
</div>
</>
)}
</NavLink> </NavLink>
<NavLink <NavLink
to="/relays" to="/relays"
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className="inline-flex flex-col items-center justify-center text-sm font-medium"
twMerge( >
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', {({ isActive }) => (
isActive <>
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' <div
: 'border-transparent text-zinc-500 dark:text-zinc-500' 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'
)}
>
<RelayIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
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">
<RelayIcon className="h-5 w-5" />
</span>
Relays Relays
</div>
</>
)}
</NavLink> </NavLink>
<NavLink <NavLink
to="/explore" to="/explore"
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className="inline-flex flex-col items-center justify-center text-sm font-medium"
twMerge( >
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium', {({ isActive }) => (
isActive <>
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100' <div
: 'border-transparent text-zinc-500 dark:text-zinc-500' 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'
)}
> >
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
<ExploreIcon className="h-5 w-5" />
</span>
Explore Explore
</div>
</>
)}
</NavLink> </NavLink>
</div> </div>
</div> </div>
<div className="relative shrink-0">
<ActiveAccount />
</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: {