From 4be64f77307e1c6b3392c75efbebc6b8b9f76c41 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 19 May 2023 08:37:56 +0700
Subject: [PATCH] update design
---
src/app/channel/layout.tsx | 12 +-
src/app/chat/layout.tsx | 12 +-
src/app/inital-data/pages/index.page.tsx | 2 +-
src/app/note/components/metadata.tsx | 23 ++-
src/app/note/layout.tsx | 12 +-
src/app/{today => space}/_default.page.tsx | 0
.../{today => space}/components/header.tsx | 2 +-
.../components/views/createModal.tsx | 0
src/app/{today => space}/layout.tsx | 12 +-
src/app/space/pages/index.page.tsx | 129 ++++++++++++++++-
src/app/threads/layout.tsx | 12 +-
src/app/today/pages/index.page.tsx | 135 ------------------
src/shared/appHeader.tsx | 90 ++++++------
src/shared/multiAccounts.tsx | 2 +-
src/shared/navigation.tsx | 16 +--
15 files changed, 200 insertions(+), 259 deletions(-)
rename src/app/{today => space}/_default.page.tsx (100%)
rename src/app/{today => space}/components/header.tsx (96%)
rename src/app/{today => space}/components/views/createModal.tsx (100%)
rename src/app/{today => space}/layout.tsx (63%)
delete mode 100644 src/app/today/pages/index.page.tsx
diff --git a/src/app/channel/layout.tsx b/src/app/channel/layout.tsx
index c1f312e9..6c7a8bb4 100644
--- a/src/app/channel/layout.tsx
+++ b/src/app/channel/layout.tsx
@@ -13,17 +13,11 @@ export function LayoutChannel({ children }: { children: React.ReactNode }) {
diff --git a/src/app/chat/layout.tsx b/src/app/chat/layout.tsx
index bcac42da..1bf6cf15 100644
--- a/src/app/chat/layout.tsx
+++ b/src/app/chat/layout.tsx
@@ -13,17 +13,11 @@ export function LayoutChat({ children }: { children: React.ReactNode }) {
diff --git a/src/app/inital-data/pages/index.page.tsx b/src/app/inital-data/pages/index.page.tsx
index 8f74db3d..bbc8e28e 100644
--- a/src/app/inital-data/pages/index.page.tsx
+++ b/src/app/inital-data/pages/index.page.tsx
@@ -191,7 +191,7 @@ export function Page() {
() => {
updateLastLogin(dateToUnix(now.current));
timeout = setTimeout(() => {
- navigate("/app/today", { overwriteLastHistoryEntry: true });
+ navigate("/app/space", { overwriteLastHistoryEntry: true });
}, 5000);
},
);
diff --git a/src/app/note/components/metadata.tsx b/src/app/note/components/metadata.tsx
index 19b47657..ed91df4c 100644
--- a/src/app/note/components/metadata.tsx
+++ b/src/app/note/components/metadata.tsx
@@ -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 (
-
-
-
-
-
-
-
-
-
+
+
+
+
);
}
diff --git a/src/app/note/layout.tsx b/src/app/note/layout.tsx
index 42e6af95..66492eb2 100644
--- a/src/app/note/layout.tsx
+++ b/src/app/note/layout.tsx
@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
diff --git a/src/app/today/_default.page.tsx b/src/app/space/_default.page.tsx
similarity index 100%
rename from src/app/today/_default.page.tsx
rename to src/app/space/_default.page.tsx
diff --git a/src/app/today/components/header.tsx b/src/app/space/components/header.tsx
similarity index 96%
rename from src/app/today/components/header.tsx
rename to src/app/space/components/header.tsx
index 4600a8fb..75797d2d 100644
--- a/src/app/today/components/header.tsx
+++ b/src/app/space/components/header.tsx
@@ -1,4 +1,4 @@
-import { CreateViewModal } from "@app/today/components/views/createModal";
+import { CreateViewModal } from "@app/space/components/views/createModal";
export function Header() {
return (
diff --git a/src/app/today/components/views/createModal.tsx b/src/app/space/components/views/createModal.tsx
similarity index 100%
rename from src/app/today/components/views/createModal.tsx
rename to src/app/space/components/views/createModal.tsx
diff --git a/src/app/today/layout.tsx b/src/app/space/layout.tsx
similarity index 63%
rename from src/app/today/layout.tsx
rename to src/app/space/layout.tsx
index 42e6af95..66492eb2 100644
--- a/src/app/today/layout.tsx
+++ b/src/app/space/layout.tsx
@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
diff --git a/src/app/space/pages/index.page.tsx b/src/app/space/pages/index.page.tsx
index 03e62fa1..ff538183 100644
--- a/src/app/space/pages/index.page.tsx
+++ b/src/app/space/pages/index.page.tsx
@@ -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 (
-
-
Space
+
+
+ {status === "loading" ? (
+
+ ) : status === "error" ? (
+
{error.message}
+ ) : (
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const note = allRows[virtualRow.index];
+ if (note) {
+ if (note.kind === 1) {
+ return (
+
+
+
+ );
+ } else {
+ return (
+
+
+
+ );
+ }
+ }
+ })}
+
+
+ )}
+
+ {isFetching && !isFetchingNextPage ? (
+
+ ) : null}
+
+
);
}
diff --git a/src/app/threads/layout.tsx b/src/app/threads/layout.tsx
index 42e6af95..66492eb2 100644
--- a/src/app/threads/layout.tsx
+++ b/src/app/threads/layout.tsx
@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
diff --git a/src/app/today/pages/index.page.tsx b/src/app/today/pages/index.page.tsx
deleted file mode 100644
index 37de0cf6..00000000
--- a/src/app/today/pages/index.page.tsx
+++ /dev/null
@@ -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 (
-
-
-
-
-
- {status === "loading" ? (
-
- ) : status === "error" ? (
-
{error.message}
- ) : (
-
-
- {rowVirtualizer.getVirtualItems().map((virtualRow) => {
- const note = allRows[virtualRow.index];
- if (note) {
- if (note.kind === 1) {
- return (
-
-
-
- );
- } else {
- return (
-
-
-
- );
- }
- }
- })}
-
-
- )}
-
- {isFetching && !isFetchingNextPage ? (
-
- ) : null}
-
-
-
- );
-}
diff --git a/src/shared/appHeader.tsx b/src/shared/appHeader.tsx
index d48d7191..7e52f6f9 100644
--- a/src/shared/appHeader.tsx
+++ b/src/shared/appHeader.tsx
@@ -2,7 +2,16 @@ import ArrowLeftIcon from "@icons/arrowLeft";
import ArrowRightIcon from "@icons/arrowRight";
import RefreshIcon from "@icons/refresh";
+import useSWR from "swr";
+
+const fetcher = async () => {
+ const { platform } = await import("@tauri-apps/api/os");
+ return await platform();
+};
+
export default function AppHeader() {
+ const { data: platform } = useSWR("platform", fetcher);
+
const goBack = () => {
window.history.back();
};
@@ -21,54 +30,43 @@ export default function AppHeader() {
className="flex h-full w-full flex-1 items-center px-2"
>
-
-
-
-
-
-
goBack()}
+ className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+ >
+
-
-
-
-
+
+
+
);
diff --git a/src/shared/multiAccounts.tsx b/src/shared/multiAccounts.tsx
index 2be5451e..92e7eaeb 100644
--- a/src/shared/multiAccounts.tsx
+++ b/src/shared/multiAccounts.tsx
@@ -18,7 +18,7 @@ export default function MultiAccounts() {
const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
return (
-
+
<>
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 55004e29..4794227c 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -14,7 +14,7 @@ import { Disclosure } from "@headlessui/react";
export default function Navigation() {
return (
-
+
@@ -28,14 +28,14 @@ export default function Navigation() {
- Today
+ Space
Threads
-
-
-
-
- Space
-
{/* Channels */}