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

update design

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-19 08:37:56 +07:00
parent 064700bd5d
commit 4be64f7730
15 changed files with 200 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,17 +13,11 @@ export function LayoutChannel({ children }: { children: React.ReactNode }) {
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">
{children}
</div>
</div>
<div className="w-full h-full">{children}</div>
</div>
</div>
</div>

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

@@ -13,17 +13,11 @@ export function LayoutChat({ children }: { children: React.ReactNode }) {
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">
{children}
</div>
</div>
<div className="w-full h-full">{children}</div>
</div>
</div>
</div>

2
src/app/inital-data/pages/index.page.tsx
View File

@@ -191,7 +191,7 @@ export function Page() {
() => {
updateLastLogin(dateToUnix(now.current));
timeout = setTimeout(() => {
navigate("/app/today", { overwriteLastHistoryEntry: true });
navigate("/app/space", { overwriteLastHistoryEntry: true });
}, 5000);
},
);

23
src/app/note/components/metadata.tsx
View File

@@ -14,7 +14,10 @@ import useSWRSubscription from "swr/subscription";
export default function NoteMetadata({
id,
eventPubkey,
}: { id: string; eventPubkey: string }) {
}: {
id: string;
eventPubkey: string;
}) {
const pool: any = useContext(RelayContext);
const [replies, setReplies] = useState(0);
@@ -63,20 +66,10 @@ export default function NoteMetadata({
});
return (
<div className="mt-4 flex h-12 items-center justify-between border-t border-zinc-800/50">
<div className="flex items-center gap-16">
<NoteReply id={id} replies={replies} />
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
<NoteZap zaps={zaps} />
</div>
<Tooltip message="Save to Space">
<button
type="button"
className="inline-flex w-4 h-4 rounded justify-center items-center gap-1 hover:bg-zinc-800"
>
<PlusIcon className="w-3 h-3 text-zinc-400" />
</button>
</Tooltip>
<div className="mt-4 flex h-12 items-center gap-4 border-t border-zinc-800/50">
<NoteReply id={id} replies={replies} />
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
<NoteZap zaps={zaps} />
</div>
);
}

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

@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 overflow-hidden xl:col-span-4">
{children}
</div>
</div>
<div className="w-full h-full">{children}</div>
</div>
</div>
</div>

0
src/app/today/_default.page.tsx → src/app/space/_default.page.tsx
View File

2
src/app/today/components/header.tsx → src/app/space/components/header.tsx
View File

@@ -1,4 +1,4 @@
import { CreateViewModal } from "@app/today/components/views/createModal";
import { CreateViewModal } from "@app/space/components/views/createModal";
export function Header() {
return (

0
src/app/today/components/views/createModal.tsx → src/app/space/components/views/createModal.tsx
View File

12
src/app/today/layout.tsx → src/app/space/layout.tsx
View File

@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 overflow-hidden xl:col-span-4">
{children}
</div>
</div>
<div className="w-full h-full">{children}</div>
</div>
</div>
</div>

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

@@ -1,7 +1,132 @@
import { NoteBase } from "@app/note/components/base";
import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
import { NoteSkeleton } from "@app/note/components/skeleton";
import { Header } from "@app/space/components/header";
import { getNotes } from "@utils/storage";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useEffect, useRef } from "react";
const ITEM_PER_PAGE = 10;
const TIME = Math.floor(Date.now() / 1000);
export function Page() {
const {
status,
error,
data,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
}: any = useInfiniteQuery({
queryKey: ["following"],
queryFn: async ({ pageParam = 0 }) => {
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
count: hasNextPage ? allRows.length + 1 : allRows.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
if (!lastItem) {
return;
}
if (
lastItem.index >= allRows.length - 1 &&
hasNextPage &&
!isFetchingNextPage
) {
fetchNextPage();
}
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
return (
<div>
<p>Space</p>
<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="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>
</div>
</div>
);
}

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

@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 overflow-hidden xl:col-span-4">
{children}
</div>
</div>
<div className="w-full h-full">{children}</div>
</div>
</div>
</div>

135
src/app/today/pages/index.page.tsx
View File

@@ -1,135 +0,0 @@
import { NoteBase } from "@app/note/components/base";
import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
import { NoteSkeleton } from "@app/note/components/skeleton";
import { Header } from "@app/today/components/header";
import { getNotes } from "@utils/storage";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useEffect, useRef } from "react";
const ITEM_PER_PAGE = 10;
const TIME = Math.floor(Date.now() / 1000);
export function Page() {
const {
status,
error,
data,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
}: any = useInfiniteQuery({
queryKey: ["following"],
queryFn: async ({ pageParam = 0 }) => {
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
count: hasNextPage ? allRows.length + 1 : allRows.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
if (!lastItem) {
return;
}
if (
lastItem.index >= allRows.length - 1 &&
hasNextPage &&
!isFetchingNextPage
) {
fetchNextPage();
}
}, [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="flex h-11 w-full shrink-0 items-center justify-between border-b border-zinc-900 px-3">
<Header />
</div>
<div className="flex-1">
{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="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>
</div>
</div>
);
}