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

redesign sidebar

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-01 14:26:16 +07:00
parent 9941305998
commit e97d0281e2
22 changed files with 310 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/accounts/active.tsx
View File

@@ -16,7 +16,7 @@ import { sendNativeNotification } from '@utils/notification';
const lastLogin = await getLastLogin();
export function ActiveAccount({ data }: { data: any }) {
export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
const queryClient = useQueryClient();
const { ndk } = useNDK();

49
src/shared/appHeader.tsx
View File

@@ -1,49 +0,0 @@
import { useNavigate } from 'react-router-dom';
import { ArrowLeftIcon, ArrowRightIcon } from '@shared/icons';
export function AppHeader({ reverse }: { reverse?: boolean }) {
const navigate = useNavigate();
const goBack = () => {
navigate(-1);
};
const goForward = () => {
navigate(1);
};
return (
<div
data-tauri-drag-region
className={`flex h-11 w-full shrink-0 items-center border-b border-zinc-900 px-3 ${
reverse ? 'justify-start' : 'justify-end'
}`}
>
<div className="flex gap-2.5">
<button
type="button"
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
>
<ArrowLeftIcon
width={16}
height={16}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
<button
type="button"
onClick={() => goForward()}
className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
>
<ArrowRightIcon
width={16}
height={16}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
</div>
</div>
);
}

4
src/shared/appLayout.tsx
View File

@@ -5,10 +5,10 @@ import { Navigation } from '@shared/navigation';
export function AppLayout() {
return (
<div className="flex h-screen w-screen">
<div className="relative flex shrink-0 flex-row">
<div className="shrink-0">
<Navigation />
</div>
<div className="h-full w-full">
<div className="h-full w-full flex-1 bg-black">
<Outlet />
<ScrollRestoration />
</div>

2
src/shared/button.tsx
View File

@@ -16,7 +16,7 @@ export function Button({
switch (preset) {
case 'small':
preClass =
'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600';
'w-min h-9 px-4 bg-white/10 rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
break;
case 'publish':
preClass =

4
src/shared/logout.tsx
View File

@@ -34,9 +34,9 @@ export function Logout() {
type="button"
onClick={() => openModal()}
aria-label="Logout"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
>
<LogoutIcon className="h-4 w-4 text-zinc-400" />
<LogoutIcon className="h-4 w-4 text-white" />
</button>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>

6
src/shared/lumeBar.tsx
View File

@@ -11,7 +11,7 @@ export function LumeBar() {
const { status, account } = useAccount();
return (
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900/80 p-2 backdrop-blur-md">
<div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
<div className="flex items-center justify-between">
{status === 'loading' ? (
<>
@@ -26,9 +26,9 @@ export function LumeBar() {
)}
<Link
to="/settings/general"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
>
<SettingsIcon className="h-4 w-4 text-zinc-400" />
<SettingsIcon className="h-4 w-4 text-white" />
</Link>
<Logout />
</div>

171
src/shared/navigation.tsx
View File

@@ -1,62 +1,123 @@
import { Disclosure } from '@headlessui/react';
import { NavLink } from 'react-router-dom';
import * as Collapsible from '@radix-ui/react-collapsible';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ChatsList } from '@app/chats/components/list';
import { AppHeader } from '@shared/appHeader';
import { ComposerModal } from '@shared/composer/modal';
import { NavArrowDownIcon, SpaceIcon, TrendingIcon } from '@shared/icons';
import {
ArrowLeftIcon,
ArrowRightIcon,
NavArrowDownIcon,
SpaceIcon,
TrendingIcon,
} from '@shared/icons';
import { LumeBar } from '@shared/lumeBar';
export function Navigation() {
const navigate = useNavigate();
const [feeds, setFeeds] = useState(true);
const [chats, setChats] = useState(true);
return (
<div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
<AppHeader />
<div className="relative h-full w-[232px] bg-black/80">
<div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
<div className="inlin-lflex h-8 px-3.5">
<div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
<ComposerModal />
</div>
{/* Newsfeed */}
<div className="flex flex-col gap-0.5 px-1.5">
<div className="px-2.5">
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
Feeds
</h3>
</div>
<div className="flex flex-col">
<NavLink
to="/app/space"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
isActive ? 'bg-zinc-900/50' : ''
)
}
<div className="flex gap-2.5">
<button
type="button"
onClick={() => navigate(-1)}
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<SpaceIcon width={12} height={12} className="text-zinc-100" />
</span>
<span className="font-medium">Spaces</span>
</NavLink>
<NavLink
to="/app/trending"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
isActive ? 'bg-zinc-900/50' : ''
)
}
<ArrowLeftIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
</button>
<button
type="button"
onClick={() => navigate(1)}
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<TrendingIcon width={12} height={12} className="text-zinc-100" />
</span>
<span className="font-medium">Trending</span>
</NavLink>
<ArrowRightIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
</button>
</div>
</div>
<Collapsible.Root open={feeds} onOpenChange={setFeeds}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
open ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon width={12} height={12} className="text-white/50" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Feeds
</h3>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<div className="flex flex-col">
<NavLink
to="/app/space"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<SpaceIcon className="h-3 w-3 text-white" />
</span>
<span className="font-medium">Spaces</span>
</NavLink>
<NavLink
to="/app/trending"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2 ',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<TrendingIcon className="h-3 w-3 text-white" />
</span>
<span className="font-medium">Trending</span>
</NavLink>
</div>
</Collapsible.Content>
</div>
</Collapsible.Root>
<Collapsible.Root open={chats} onOpenChange={setChats}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
open ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon width={12} height={12} className="text-white/50" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Chats
</h3>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<ChatsList />
</Collapsible.Content>
</div>
</Collapsible.Root>
{/* Channels
<Disclosure defaultOpen={true}>
{({ open }) => (
@@ -84,28 +145,6 @@ export function Navigation() {
)}
</Disclosure>
*/}
{/* Chats */}
<Disclosure defaultOpen={true}>
{({ open }) => (
<div className="flex flex-col gap-0.5 px-1.5 pb-6">
<Disclosure.Button className="flex items-center gap-1 px-3">
<div
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? '' : 'rotate-180'
}`}
>
<NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
Chats
</h3>
</Disclosure.Button>
<Disclosure.Panel>
<ChatsList />
</Disclosure.Panel>
</div>
)}
</Disclosure>
</div>
<div className="absolute bottom-3 left-0 w-full px-10">
<LumeBar />

4
src/shared/notification/modal.tsx
View File

@@ -51,9 +51,9 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
<Dialog.Trigger asChild>
<button
type="button"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
>
<BellIcon className="h-4 w-4 text-zinc-400" />
<BellIcon className="h-4 w-4 text-white" />
</button>
</Dialog.Trigger>
<Dialog.Portal className="relative z-10">

2
src/shared/settingsLayout.tsx
View File

@@ -1,7 +1,6 @@
import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { AppHeader } from '@shared/appHeader';
import { LumeBar } from '@shared/lumeBar';
export function SettingsLayout() {
@@ -9,7 +8,6 @@ export function SettingsLayout() {
<div className="flex h-screen w-screen">
<div className="relative flex shrink-0 flex-row">
<div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
<AppHeader />
<div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
<div className="flex flex-col gap-0.5 px-1.5">
<div className="px-2.5">