highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-04-05 10:28:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ren Amamiya 2023-10-03 16:24:09 +07:00
parent cdeb5afd28
commit 428d52f175
13 changed files with 146 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.tsx
View File

@ -128,6 +128,13 @@ export default function App() {
return { Component: RelayScreen };
},
},
{
path: 'communities',
async lazy() {
const { CommunitiesScreen } = await import('@app/communities');
return { Component: CommunitiesScreen };
},
},
],
},
{

7
src/app/communities/index.tsx Normal file
View File

@ -0,0 +1,7 @@
export function CommunitiesScreen() {
return (
<div>
<p>TODO</p>
</div>
);
}

4
src/index.css
View File

@ -50,11 +50,11 @@ input::-ms-clear {
}
.markdown {
@apply prose prose-white max-w-none select-text hyphens-auto text-white prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
@apply prose prose-white max-w-none select-text text-white prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
}
.markdown-article {
@apply prose prose-white max-w-none select-text hyphens-auto text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
@apply prose prose-white max-w-none select-text text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
}
.markdown-simple {

23
src/shared/icons/explore.tsx Normal file
View File

@ -0,0 +1,23 @@
import { SVGProps } from 'react';
export function ExploreIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<g fill="currentColor" clipPath="url(#clip0_6331_51560)">
<path d="M3.625 17.47c2.3 3.522 6.68 5.337 10.963 4.189 4.284-1.148 7.169-4.91 7.4-9.11-.35.192-.716.375-1.086.55-2.036.963-4.814 1.946-7.867 2.764-3.053.819-5.951 1.355-8.196 1.54-.408.033-.815.057-1.214.067zM9.411 2.34c4.311-1.155 8.717.69 11.004 4.254.532.007 1.015.05 1.42.141.273.062.566.158.825.32.264.165.557.443.672.873.14.52-.054.97-.242 1.256-.192.29-.46.545-.738.764-.563.443-1.363.898-2.305 1.343-1.898.897-4.556 1.844-7.53 2.64-2.973.797-5.749 1.307-7.841 1.479-1.038.085-1.959.092-2.668-.011-.35-.051-.71-.137-1.02-.293-.306-.153-.699-.446-.838-.966-.116-.43-.001-.818.145-1.093a2.66 2.66 0 01.555-.69c.305-.28.702-.559 1.158-.83.2-4.23 3.093-8.032 7.403-9.187z"></path>
</g>
<defs>
<clipPath id="clip0_6331_51560">
<path fill="#fff" d="M0 0H24V24H0z"></path>
</clipPath>
</defs>
</svg>
);
}

21
src/shared/icons/explore2.tsx Normal file
View File

@ -0,0 +1,21 @@
import { SVGProps } from 'react';
export function Explore2Icon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
fillRule="evenodd"
d="M18.128 2.78c1.886-.538 3.63 1.205 3.09 3.091l-2.8 9.801a4 4 0 01-2.747 2.748l-9.801 2.8c-1.886.539-3.63-1.205-3.091-3.09l2.8-9.802a4 4 0 012.748-2.747l9.8-2.8zM9.498 12a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"
clipRule="evenodd"
></path>
</svg>
);
}

21
src/shared/icons/home.tsx Normal file
View File

@ -0,0 +1,21 @@
import { SVGProps } from 'react';
export function HomeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
fillRule="evenodd"
d="M10.108 1.999a3 3 0 013.784 0l6 4.875A3 3 0 0121 9.202V18a3 3 0 01-3 3H6a3 3 0 01-3-3V9.202a3 3 0 011.108-2.328l6-4.875zM8 15a1 1 0 100 2h8a1 1 0 100-2H8z"
clipRule="evenodd"
></path>
</svg>
);
}

3
src/shared/icons/index.ts
View File

@ -68,3 +68,6 @@ export * from './timeline';
export * from './dots';
export * from './handArrowDown';
export * from './relay';
export * from './explore';
export * from './explore2';
export * from './home';

9
src/shared/icons/nwc.tsx
View File

@ -13,10 +13,15 @@ export function NwcIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
<path
fill="currentColor"
fillRule="evenodd"
d="M3 6.5A3.5 3.5 0 016.5 3h8.969C16.314 3 17 3.686 17 4.531V8h2.25c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0119.25 21h-7a.75.75 0 010-1.5h7a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H6a2.986 2.986 0 01-1.5-.401v2.151a.75.75 0 01-1.5 0V6.5zm1.5 0A1.5 1.5 0 006 8h9.5V4.531a.031.031 0 00-.031-.031H6.5a2 2 0 00-2 2zm-1 9.285v2.93L6 20.173l2.5-1.458v-2.93L6 14.327l-2.5 1.458zm2.122-2.975a.75.75 0 01.756 0l3.25 1.896a.75.75 0 01.372.648v3.792a.75.75 0 01-.372.648l-3.25 1.895a.75.75 0 01-.756 0l-3.25-1.895A.75.75 0 012 19.146v-3.792a.75.75 0 01.372-.648l3.25-1.896z"
d="M5.496 12.886a1 1 0 011.008 0l3 1.75A1 1 0 0110 15.5V19a1 1 0 01-.496.864l-3 1.75a1 1 0 01-1.008 0l-3-1.75A1 1 0 012 19v-3.5a1 1 0 01.496-.864l3-1.75zM4 16.074v2.352l2 1.166 2-1.166v-2.352l-2-1.166-2 1.166z"
clipRule="evenodd"
></path>
<path
fill="currentColor"
fillRule="evenodd"
d="M17 8a4 4 0 014 4v5a4 4 0 01-4 4h-5v-5.5a3 3 0 00-1.488-2.591l-3-1.75a3 3 0 00-3.024 0L3 12.027V6.5A3.5 3.5 0 016.5 3H14a3 3 0 013 3v2zM6.5 5a1.5 1.5 0 100 3H15V6a1 1 0 00-1-1H6.5zm9 11a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
clipRule="evenodd"
></path>
<path fill="currentColor" d="M15.5 15.5a1 1 0 100-2 1 1 0 000 2z"></path>
</svg>
);
}

15
src/shared/icons/relay.tsx
View File

@ -10,19 +10,12 @@ export function RelayIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElemen
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round"
strokeWidth="1.5"
d="M21.25 12V5.75a1 1 0 00-1-1H3.75a1 1 0 00-1 1V12m18.5 0H2.75m18.5 0v6.25a1 1 0 01-1 1H3.75a1 1 0 01-1-1V12"
/>
<path
fill="currentColor"
stroke="currentColor"
strokeWidth="0.5"
d="M6.5 9.125a.75.75 0 100-1.5.75.75 0 000 1.5zm0 7.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
/>
fillRule="evenodd"
d="M4 5a3 3 0 013-3h10a3 3 0 013 3v11c0 .889-.386 1.687-1 2.236V20a2 2 0 01-2 2H7a2 2 0 01-2-2v-1.75-.014c-.614-.55-1-1.348-1-2.236V5zm3-1a1 1 0 00-1 1v11a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1H7zm0 2a1 1 0 011-1h8a1 1 0 011 1v6a1 1 0 01-1 1H8a1 1 0 01-1-1V6zm6 9a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z"
clipRule="evenodd"
></path>
</svg>
);
}

15
src/shared/icons/space.tsx
View File

@ -3,17 +3,18 @@ import { SVGProps } from 'react';
export function SpaceIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
d="M2.79055 12.1075C1.4706 12.8201 0.744814 13.464 0.86677 13.9192C1.16059 15.0158 6.26396 14.6011 12.2655 12.993C18.2669 11.3849 22.8939 9.19232 22.6001 8.09576C22.4781 7.64061 21.5276 7.44582 20.0282 7.48865M2.79055 12.1075C2.80163 12.8595 2.90491 13.6226 3.10854 14.3825C4.43075 19.3171 9.48321 22.2508 14.3935 20.935C19.3038 19.6193 22.2126 14.5525 20.8904 9.61792C20.6867 8.85797 20.3946 8.14547 20.0282 7.48865M2.79055 12.1075C2.72972 7.9763 5.45127 4.1785 9.60537 3.06541C13.7595 1.95233 18.0153 3.88054 20.0282 7.48865"
stroke="currentColor"
strokeWidth={1.5}
fill="currentColor"
fillRule="evenodd"
d="M14.522 2.261a4 4 0 00-5.044 0l-5 4.062A4 4 0 003 9.428V17a4 4 0 004 4h10a4 4 0 004-4V9.428a4 4 0 00-1.478-3.105l-5-4.062zM8 15a1 1 0 100 2h8a1 1 0 100-2H8z"
clipRule="evenodd"
/>
</svg>
);

170
src/shared/navigation.tsx
View File

@ -1,9 +1,6 @@
import * as Collapsible from '@radix-ui/react-collapsible';
import { NavLink, useNavigate } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ChatsList } from '@app/chats/components/list';
import { useStorage } from '@libs/storage/provider';
import { ActiveAccount } from '@shared/accounts/active';
@ -12,30 +9,14 @@ import { Frame } from '@shared/frame';
import {
ArrowLeftIcon,
ArrowRightIcon,
BellIcon,
NavArrowDownIcon,
NwcIcon,
ExploreIcon,
HomeIcon,
RelayIcon,
SpaceIcon,
WorldIcon,
} from '@shared/icons';
import { useActivities } from '@stores/activities';
import { useSidebar } from '@stores/sidebar';
import { compactNumber } from '@utils/number';
export function Navigation() {
const { db } = useStorage();
const navigate = useNavigate();
const totalNewActivities = useActivities((state) => state.totalNewActivities);
const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
const [integrations, toggleIntegrations] = useSidebar((state) => [
state.integrations,
state.toggleIntegrations,
]);
return (
<Frame
@ -46,26 +27,27 @@ export function Navigation() {
data-tauri-drag-region
className="inline-flex h-16 w-full items-center justify-between px-3"
>
{db.platform !== 'darwin' ? (
<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"
>
<ArrowLeftIcon className="h-5 w-5 text-white/50" />
</button>
<button
type="button"
onClick={() => navigate(1)}
className="inline-flex h-9 items-center justify-center"
>
<ArrowRightIcon className="h-5 w-5 text-white/50" />
</button>
</div>
) : (
<div />
)}
<div
className={twMerge(
'inline-flex items-center gap-4',
db.platform === 'darwin' ? 'pl-20' : 'pl-2'
)}
>
<button
type="button"
onClick={() => navigate(-1)}
className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
>
<ArrowLeftIcon className="h-5 w-5" />
</button>
<button
type="button"
onClick={() => navigate(1)}
className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
>
<ArrowRightIcon className="h-5 w-5" />
</button>
</div>
<ComposerModal />
</div>
<div
@ -78,15 +60,15 @@ export function Navigation() {
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<SpaceIcon className="h-4 w-4 text-white" />
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
<HomeIcon className="h-5 w-5" />
</span>
Home
</NavLink>
@ -95,15 +77,15 @@ export function Navigation() {
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<RelayIcon className="h-4 w-4 text-white" />
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
<RelayIcon className="h-5 w-5" />
</span>
Relays
</NavLink>
@ -112,107 +94,19 @@ export function Navigation() {
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<WorldIcon className="h-4 w-4 text-white" />
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
<ExploreIcon className="h-5 w-5" />
</span>
Explore
</NavLink>
<NavLink
to="/notifications"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center justify-between rounded-r-lg border-l-2 pl-4 pr-3',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
)
}
>
<div className="flex items-center gap-2.5">
{totalNewActivities > 0 ? (
<div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-fuchsia-500/20 backdrop-blur-xl">
<p className="text-sm font-bold text-fuchsia-500">
{compactNumber.format(totalNewActivities)}
</p>
<span className="absolute right-0 top-0 block h-1 w-1 -translate-y-1/2 translate-x-1/2 transform rounded-full bg-fuchsia-500 ring-2 ring-black/80" />
</div>
) : (
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<BellIcon className="h-4 w-4 text-white" />
</span>
)}
Notifications
</div>
</NavLink>
</div>
<Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
<div className="flex flex-col gap-1 pr-3">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1 pl-[20px] pr-4">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
integrations ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon className="h-3 w-3 text-white/50" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Integrations
</h3>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<NavLink
to="/nwc"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
isActive
? 'border-fuchsia-500 bg-white/5 text-white'
: 'border-transparent text-white/70'
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<NwcIcon className="h-4 w-4 text-white" />
</span>
Wallet Connect
</NavLink>
</Collapsible.Content>
</div>
</Collapsible.Root>
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
<div className="flex flex-col gap-1 pr-3">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1 pl-[20px] pr-4">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
chats ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon className="h-3 w-3 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>
</div>
<div className="relative shrink-0">
<ActiveAccount />

4
src/stores/sidebar.ts
View File

@ -4,9 +4,11 @@ import { createJSONStorage, persist } from 'zustand/middleware';
interface SidebarState {
feeds: boolean;
chats: boolean;
communities: boolean;
integrations: boolean;
toggleFeeds: () => void;
toggleChats: () => void;
toggleCommunities: () => void;
toggleIntegrations: () => void;
}
@ -15,9 +17,11 @@ export const useSidebar = create<SidebarState>()(
(set) => ({
feeds: true,
chats: false,
communities: true,
integrations: true,
toggleFeeds: () => set((state) => ({ feeds: !state.feeds })),
toggleChats: () => set((state) => ({ chats: !state.chats })),
toggleCommunities: () => set((state) => ({ communities: !state.communities })),
toggleIntegrations: () => set((state) => ({ integrations: !state.integrations })),
}),
{

8
src/utils/parser.ts
View File

@ -60,10 +60,16 @@ export function parser(eventContent: string) {
}
// boost
if (word.startsWith('$') && word.length > 1) {
if (word.startsWith('$prism') && word.length > 1) {
return word.replace(word, `~boost-${word}~`);
}
// nostr account references (depreciated)
if (word.startsWith('@npub1')) {
const npub = word.replace('@', '').replace(/[^a-zA-Z0-9 ]/g, '');
return word.replace(word, `~pub-${nip19.decode(npub).data}~`);
}
// nostr account references
if (word.startsWith('nostr:npub1') || word.startsWith('npub1')) {
const npub = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');