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

multi columns layout

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-21 08:49:08 +07:00
parent f11fe2d349
commit f73c7321d7
20 changed files with 127 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/channel/components/createModal.tsx
View File

@@ -92,7 +92,7 @@ export default function ChannelCreateModal() {
<PlusIcon width={12} height={12} className="text-zinc-500" />
</div>
<div>
<h5 className="text-[13px] font-semibold text-zinc-500 group-hover:text-zinc-400">
<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
Add a new channel
</h5>
</div>

2
src/app/channel/components/item.tsx
View File

@@ -32,7 +32,7 @@ export default function ChannelsListItem({ data }: { data: any }) {
<span className="text-base text-white">#</span>
</div>
<div>
<h5 className="truncate font-medium text-zinc-400">{channel?.name}</h5>
<h5 className="truncate font-medium text-zinc-200">{channel?.name}</h5>
</div>
</a>
);

2
src/app/channel/components/list.tsx
View File

@@ -11,7 +11,7 @@ export default function ChannelsList() {
const { data, error }: any = useSWR("channels", fetcher);
return (
<div className="flex flex-col gap-px">
<div className="flex flex-col gap-1">
{!data || error ? (
<>
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">

20
src/app/channel/layout.tsx
View File

@@ -4,22 +4,12 @@ import Navigation from "@shared/navigation";
export function LayoutChannel({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
<div className="flex w-screen h-screen">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

2
src/app/chat/components/item.tsx
View File

@@ -44,7 +44,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
/>
</div>
<div>
<h5 className="truncate font-medium text-zinc-400 group-hover:text-white">
<h5 className="truncate font-medium text-zinc-200 group-hover:text-white">
{user.nip05 || user.name || shortenKey(pubkey)}
</h5>
</div>

2
src/app/chat/components/list.tsx
View File

@@ -16,7 +16,7 @@ export default function ChatsList() {
);
return (
<div className="flex flex-col gap-px">
<div className="flex flex-col gap-1">
<ChatsListSelfItem />
{!chats || error ? (
<>

2
src/app/chat/components/self.tsx
View File

@@ -45,7 +45,7 @@ export default function ChatsListSelfItem() {
/>
</div>
<div>
<h5 className="truncate font-medium text-zinc-400">
<h5 className="truncate font-medium text-zinc-200">
{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}{" "}
<span className="text-zinc-600">(you)</span>
</h5>

20
src/app/chat/layout.tsx
View File

@@ -4,22 +4,12 @@ import Navigation from "@shared/navigation";
export function LayoutChat({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
<div className="flex w-screen h-screen">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

20
src/app/note/layout.tsx
View File

@@ -4,22 +4,12 @@ import Navigation from "@shared/navigation";
export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
<div className="flex w-screen h-screen">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

2
src/app/space/_default.page.tsx
View File

@@ -1 +1 @@
export { LayoutNewsfeed as Layout } from "./layout";
export { LayoutSpace as Layout } from "./layout";

23
src/app/space/layout.tsx
View File

@@ -1,25 +1,14 @@
import AppHeader from "@shared/appHeader";
import MultiAccounts from "@shared/multiAccounts";
import Navigation from "@shared/navigation";
export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
export function LayoutSpace({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
<div className="flex w-screen h-screen">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

127
src/app/space/pages/index.page.tsx
View File

@@ -58,73 +58,76 @@ export function Page() {
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
return (
<div
ref={parentRef}
className="scrollbar-hide flex h-full flex-col justify-between gap-1.5 overflow-y-auto"
style={{ contain: "strict" }}
>
<div className="pt-1.5">
{status === "loading" ? (
<div className="px-3 py-1.5">
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
<NoteSkeleton />
</div>
</div>
) : status === "error" ? (
<div>{error.message}</div>
) : (
<div
className="relative w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
<div
className="absolute left-0 top-0 w-full"
style={{
transform: `translateY(${
itemsVirtualizer[0].start -
rowVirtualizer.options.scrollMargin
}px)`,
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = allRows[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteBase key={note.event_id} event={note} />
</div>
);
} else {
return (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteQuoteRepost key={note.event_id} event={note} />
</div>
);
}
}
})}
</div>
</div>
)}
<div>
{isFetching && !isFetchingNextPage ? (
<div className="h-full w-full flex flex-nowrap overflow-x-auto">
<div className="shrink-0 w-[420px] border-r border-zinc-900">
<div className="h-11 w-full inline-flex items-center justify-center border-b border-zinc-900">
<h3 className="font-semibold text-zinc-100">Following</h3>
</div>
<div
ref={parentRef}
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 overflow-y-auto"
style={{ contain: "strict" }}
>
{status === "loading" ? (
<div className="px-3 py-1.5">
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
<NoteSkeleton />
</div>
</div>
) : null}
) : (
<div
className="relative w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
<div
className="absolute left-0 top-0 w-full"
style={{
transform: `translateY(${
itemsVirtualizer[0].start -
rowVirtualizer.options.scrollMargin
}px)`,
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = allRows[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteBase key={note.event_id} event={note} />
</div>
);
} else {
return (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteQuoteRepost key={note.event_id} event={note} />
</div>
);
}
}
})}
</div>
</div>
)}
<div>
{isFetching && !isFetchingNextPage && (
<div className="px-3 py-1.5">
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
<NoteSkeleton />
</div>
</div>
)}
</div>
</div>
</div>
</div>

21
src/app/threads/layout.tsx
View File

@@ -1,25 +1,14 @@
import AppHeader from "@shared/appHeader";
import MultiAccounts from "@shared/multiAccounts";
import Navigation from "@shared/navigation";
export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
<div className="flex w-screen h-screen">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}