update design
This commit is contained in:
Ren Amamiya
1
src/app/space/_default.page.tsx
Normal file
1
src/app/space/_default.page.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { LayoutNewsfeed as Layout } from "./layout";
|
||||
58
src/app/space/components/header.tsx
Normal file
58
src/app/space/components/header.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { CreateViewModal } from "@app/space/components/views/createModal";
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<div className="flex w-full gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="from-zinc-90 inline-flex h-11 items-center overflow-hidden border-b border-fuchsia-500 hover:bg-zinc-900"
|
||||
>
|
||||
<span className="px-2 text-sm font-semibold text-zinc-300">
|
||||
Following
|
||||
</span>
|
||||
</button>
|
||||
<div className="flex h-11 items-center -space-x-1 overflow-hidden">
|
||||
<img
|
||||
className="inline-block h-6 w-6 rounded ring-2 ring-zinc-950"
|
||||
src="https://133332.xyz/p.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="inline-block h-6 w-6 rounded ring-2 ring-zinc-950"
|
||||
src="https://void.cat/d/3Bp6jSHURFNQ9u3pK8nwtq.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="inline-block h-6 w-6 rounded ring-2 ring-zinc-950"
|
||||
src="https://void.cat/d/8zE9T8a39YfUVjrLM4xcpE.webp"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
|
||||
src="https://nostr.build/i/p/nostr.build_0e412058980ed2ac4adf3de639304c9e970e2745ba9ca19c75f984f4f6da4971.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
|
||||
src="https://davidcoen.it/wp-content/uploads/2020/11/7004972-taglio.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="flex h-11 items-center overflow-hidden">
|
||||
<img
|
||||
className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
|
||||
src="https://void.cat/d/KvAEMvYNmy1rfCH6a7HZzh.webp"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="flex h-11 items-center overflow-hidden">
|
||||
<img
|
||||
className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
|
||||
src="http://nostr.build/i/6369.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<CreateViewModal />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
89
src/app/space/components/views/createModal.tsx
Normal file
89
src/app/space/components/views/createModal.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import CancelIcon from "@icons/cancel";
|
||||
import PlusIcon from "@icons/plus";
|
||||
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { Fragment, useState } from "react";
|
||||
|
||||
export function CreateViewModal() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const closeModal = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openModal}
|
||||
className="inline-flex h-11 items-center overflow-hidden border-b border-transparent hover:bg-zinc-900"
|
||||
>
|
||||
<span className="inline-flex items-center gap-1 px-2 text-sm font-medium text-zinc-500">
|
||||
<PlusIcon width={14} height={14} />
|
||||
View
|
||||
</span>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
|
||||
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
|
||||
>
|
||||
Create a view
|
||||
</Dialog.Title>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
<CancelIcon
|
||||
width={16}
|
||||
height={16}
|
||||
className="text-zinc-400"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<Dialog.Description className="text-sm leading-tight text-zinc-400">
|
||||
View is specific feature help you pin who you want to see
|
||||
in your feed. You can add maximum 5 people in a view.
|
||||
</Dialog.Description>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto pb-5 pt-3" />
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/app/space/layout.tsx
Normal file
25
src/app/space/layout.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user