From f73c7321d70702fb6c8c39e5528be31d6dd24fb7 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Sun, 21 May 2023 08:49:08 +0700 Subject: [PATCH] multi columns layout --- src/app/channel/components/createModal.tsx | 2 +- src/app/channel/components/item.tsx | 2 +- src/app/channel/components/list.tsx | 2 +- src/app/channel/layout.tsx | 20 +--- src/app/chat/components/item.tsx | 2 +- src/app/chat/components/list.tsx | 2 +- src/app/chat/components/self.tsx | 2 +- src/app/chat/layout.tsx | 20 +--- src/app/note/layout.tsx | 20 +--- src/app/space/_default.page.tsx | 2 +- src/app/space/layout.tsx | 23 +--- src/app/space/pages/index.page.tsx | 127 +++++++++++---------- src/app/threads/layout.tsx | 21 +--- src/renderer/_default.page.server.tsx | 2 +- src/shared/accounts/active.tsx | 8 +- src/shared/accounts/inactive.tsx | 4 +- src/shared/appHeader.tsx | 35 ++---- src/shared/eventCollector.tsx | 4 +- src/shared/multiAccounts.tsx | 4 +- src/shared/navigation.tsx | 24 ++-- 20 files changed, 127 insertions(+), 199 deletions(-) diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx index a2fa4f7e..e2958cb8 100644 --- a/src/app/channel/components/createModal.tsx +++ b/src/app/channel/components/createModal.tsx @@ -92,7 +92,7 @@ export default function ChannelCreateModal() {
-
+
Add a new channel
diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx index 938bac9a..6270c73f 100644 --- a/src/app/channel/components/item.tsx +++ b/src/app/channel/components/item.tsx @@ -32,7 +32,7 @@ export default function ChannelsListItem({ data }: { data: any }) { #
-
{channel?.name}
+
{channel?.name}
); diff --git a/src/app/channel/components/list.tsx b/src/app/channel/components/list.tsx index 8b11467d..8e556211 100644 --- a/src/app/channel/components/list.tsx +++ b/src/app/channel/components/list.tsx @@ -11,7 +11,7 @@ export default function ChannelsList() { const { data, error }: any = useSWR("channels", fetcher); return ( -
+
{!data || error ? ( <>
diff --git a/src/app/channel/layout.tsx b/src/app/channel/layout.tsx index 6c7a8bb4..3e654982 100644 --- a/src/app/channel/layout.tsx +++ b/src/app/channel/layout.tsx @@ -4,22 +4,12 @@ import Navigation from "@shared/navigation"; export function LayoutChannel({ children }: { children: React.ReactNode }) { return ( -
-
-
- -
-
-
- - -
-
{children}
-
+
+
+ +
+
{children}
); } diff --git a/src/app/chat/components/item.tsx b/src/app/chat/components/item.tsx index 81881aee..370e3682 100644 --- a/src/app/chat/components/item.tsx +++ b/src/app/chat/components/item.tsx @@ -44,7 +44,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) { />
-
+
{user.nip05 || user.name || shortenKey(pubkey)}
diff --git a/src/app/chat/components/list.tsx b/src/app/chat/components/list.tsx index d325bdd3..e2dcb4cd 100644 --- a/src/app/chat/components/list.tsx +++ b/src/app/chat/components/list.tsx @@ -16,7 +16,7 @@ export default function ChatsList() { ); return ( -
+
{!chats || error ? ( <> diff --git a/src/app/chat/components/self.tsx b/src/app/chat/components/self.tsx index 70faf836..58148fc5 100644 --- a/src/app/chat/components/self.tsx +++ b/src/app/chat/components/self.tsx @@ -45,7 +45,7 @@ export default function ChatsListSelfItem() { />
-
+
{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}{" "} (you)
diff --git a/src/app/chat/layout.tsx b/src/app/chat/layout.tsx index 1bf6cf15..76b5be93 100644 --- a/src/app/chat/layout.tsx +++ b/src/app/chat/layout.tsx @@ -4,22 +4,12 @@ import Navigation from "@shared/navigation"; export function LayoutChat({ children }: { children: React.ReactNode }) { return ( -
-
-
- -
-
-
- - -
-
{children}
-
+
+
+ +
+
{children}
); } diff --git a/src/app/note/layout.tsx b/src/app/note/layout.tsx index 66492eb2..b4f1782b 100644 --- a/src/app/note/layout.tsx +++ b/src/app/note/layout.tsx @@ -4,22 +4,12 @@ import Navigation from "@shared/navigation"; export function LayoutNewsfeed({ children }: { children: React.ReactNode }) { return ( -
-
-
- -
-
-
- - -
-
{children}
-
+
+
+ +
+
{children}
); } diff --git a/src/app/space/_default.page.tsx b/src/app/space/_default.page.tsx index a2814770..a737ae55 100644 --- a/src/app/space/_default.page.tsx +++ b/src/app/space/_default.page.tsx @@ -1 +1 @@ -export { LayoutNewsfeed as Layout } from "./layout"; +export { LayoutSpace as Layout } from "./layout"; diff --git a/src/app/space/layout.tsx b/src/app/space/layout.tsx index 66492eb2..b2ca9b0c 100644 --- a/src/app/space/layout.tsx +++ b/src/app/space/layout.tsx @@ -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 ( -
-
-
- -
-
-
- - -
-
{children}
-
+
+
+ +
+
{children}
); } diff --git a/src/app/space/pages/index.page.tsx b/src/app/space/pages/index.page.tsx index ff538183..d9c4c95e 100644 --- a/src/app/space/pages/index.page.tsx +++ b/src/app/space/pages/index.page.tsx @@ -58,73 +58,76 @@ export function Page() { }, [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 ? ( +
+
+
+

Following

+
+
+ {status === "loading" ? (
- ) : null} + ) : ( +
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => { + const note = allRows[virtualRow.index]; + if (note) { + if (note.kind === 1) { + return ( +
+ +
+ ); + } else { + return ( +
+ +
+ ); + } + } + })} +
+
+ )} +
+ {isFetching && !isFetchingNextPage && ( +
+
+ +
+
+ )} +
diff --git a/src/app/threads/layout.tsx b/src/app/threads/layout.tsx index 66492eb2..ad04db56 100644 --- a/src/app/threads/layout.tsx +++ b/src/app/threads/layout.tsx @@ -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 ( -
-
-
- -
-
-
- - -
-
{children}
-
+
+
+ +
+
{children}
); } diff --git a/src/renderer/_default.page.server.tsx b/src/renderer/_default.page.server.tsx index 27ab4134..ce6090fa 100644 --- a/src/renderer/_default.page.server.tsx +++ b/src/renderer/_default.page.server.tsx @@ -36,7 +36,7 @@ export function render(pageContext: PageContextServer) { - +
${dangerouslySkipEscape(pageHtml)}
`; diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx index 2ecb8297..e3774207 100644 --- a/src/shared/accounts/active.tsx +++ b/src/shared/accounts/active.tsx @@ -6,15 +6,11 @@ export default function ActiveAccount({ user }: { user: any }) { const userData = JSON.parse(user.metadata); return ( - ); diff --git a/src/shared/accounts/inactive.tsx b/src/shared/accounts/inactive.tsx index 3051b0b1..f0bee53b 100644 --- a/src/shared/accounts/inactive.tsx +++ b/src/shared/accounts/inactive.tsx @@ -6,11 +6,11 @@ export default function InactiveAccount({ user }: { user: any }) { const userData = JSON.parse(user.metadata); return ( -
+
user's avatar
); diff --git a/src/shared/appHeader.tsx b/src/shared/appHeader.tsx index 7e52f6f9..62f79103 100644 --- a/src/shared/appHeader.tsx +++ b/src/shared/appHeader.tsx @@ -1,7 +1,6 @@ import ArrowLeftIcon from "@icons/arrowLeft"; import ArrowRightIcon from "@icons/arrowRight"; -import RefreshIcon from "@icons/refresh"; - +import EventCollector from "@shared/eventCollector"; import useSWR from "swr"; const fetcher = async () => { @@ -27,47 +26,33 @@ export default function AppHeader() { return (
-
+
-
+
); } diff --git a/src/shared/eventCollector.tsx b/src/shared/eventCollector.tsx index fd4c1c3b..d24267df 100644 --- a/src/shared/eventCollector.tsx +++ b/src/shared/eventCollector.tsx @@ -136,8 +136,8 @@ export default function EventCollector() { ); return ( -
- +
+
); } diff --git a/src/shared/multiAccounts.tsx b/src/shared/multiAccounts.tsx index 2970bfcf..df0af826 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 ( -
+
<> @@ -31,7 +31,7 @@ export default function MultiAccounts() {