From 431f21e02cc1ce01c1bd982344798ea5f97429f6 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Mon, 13 Mar 2023 21:43:22 +0700 Subject: [PATCH] added app-header and updated navigation bar --- src-tauri/src/main.rs | 4 +- src/components/columns/account/index.tsx | 2 +- src/components/columns/navigator/index.tsx | 70 ++++++++++--------- .../columns/navigator/messages/index.tsx | 32 +++++++++ .../columns/navigator/userDropdownMenu.tsx | 61 ---------------- src/layouts/newsfeed.tsx | 21 ------ src/layouts/withSidebar.tsx | 29 ++++++++ src/pages/index.tsx | 4 +- src/pages/newsfeed/circle.tsx | 4 +- src/pages/newsfeed/following.tsx | 4 +- 10 files changed, 106 insertions(+), 125 deletions(-) create mode 100644 src/components/columns/navigator/messages/index.tsx delete mode 100644 src/components/columns/navigator/userDropdownMenu.tsx delete mode 100644 src/layouts/newsfeed.tsx create mode 100644 src/layouts/withSidebar.tsx diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 4b0c9868..45f470a0 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -20,7 +20,7 @@ fn main() { .setup(|app| { let main_window = app.get_window("main").unwrap(); // set inset for traffic lights - main_window.position_traffic_lights(8.0, 16.0); + main_window.position_traffic_lights(8.0, 20.0); Ok(()) }) @@ -41,7 +41,7 @@ fn main() { .on_window_event(|e| { let apply_offset = || { let win = e.window(); - win.position_traffic_lights(8.0, 16.0); + win.position_traffic_lights(8.0, 20.0); }; match e.event() { diff --git a/src/components/columns/account/index.tsx b/src/components/columns/account/index.tsx index 36d5470d..d7c5669d 100644 --- a/src/components/columns/account/index.tsx +++ b/src/components/columns/account/index.tsx @@ -23,7 +23,7 @@ export default function AccountColumn() { }, [getAccounts]); return ( -
+
{users.map((user, index) => ( diff --git a/src/components/columns/navigator/index.tsx b/src/components/columns/navigator/index.tsx index 57906d18..94997151 100644 --- a/src/components/columns/navigator/index.tsx +++ b/src/components/columns/navigator/index.tsx @@ -1,72 +1,74 @@ import ActiveLink from '@components/activeLink'; -import CreatePost from '@components/columns/navigator/createPost'; -import { UserDropdownMenu } from '@components/columns/navigator/userDropdownMenu'; +import Messages from '@components/columns/navigator/messages'; import { PlusIcon } from '@radix-ui/react-icons'; -import { useLocalStorage } from '@rehooks/local-storage'; export default function NavigatorColumn() { - const [currentUser]: any = useLocalStorage('current-user'); - const profile = JSON.parse(currentUser.metadata); - return ( -
+
- {/* Create post */} -
-
-
-
{profile.display_name || ''}
- + {/* Create post +
+
+
+
{profile.display_name || ''}
+ +
+ @{profile.username || ''} +
+
+
- @{profile.username || ''}
-
- -
-
+ */} {/* Newsfeed */} -
+
-

Newsfeed

+

Newsfeed

-
+
- # +
+ +
following - # - global +
+ +
+ circle
{/* Messages */} -
+
-

Direct Messages

+

Messages

-
+
+ +
diff --git a/src/components/columns/navigator/messages/index.tsx b/src/components/columns/navigator/messages/index.tsx new file mode 100644 index 00000000..4e288a3e --- /dev/null +++ b/src/components/columns/navigator/messages/index.tsx @@ -0,0 +1,32 @@ +import Avatar from 'boring-avatars'; +import { useState } from 'react'; +import { Config, names, uniqueNamesGenerator } from 'unique-names-generator'; + +const config: Config = { + dictionaries: [names], +}; + +export default function Messages() { + const [data] = useState([...Array(15)]); + + return ( + <> + {data.map((item, index) => ( +
+ +
+

{uniqueNamesGenerator(config).toString()}

+
+
+ ))} + + ); +} diff --git a/src/components/columns/navigator/userDropdownMenu.tsx b/src/components/columns/navigator/userDropdownMenu.tsx deleted file mode 100644 index c377d7f0..00000000 --- a/src/components/columns/navigator/userDropdownMenu.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; -import { DotsHorizontalIcon } from '@radix-ui/react-icons'; -import { writeText } from '@tauri-apps/api/clipboard'; -import { useRouter } from 'next/router'; -import { nip19 } from 'nostr-tools'; -import { memo } from 'react'; - -export const UserDropdownMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) { - const router = useRouter(); - - const viewProfile = () => { - router.push(`/profile/${pubkey}`); - }; - - const updateProfile = () => { - router.push('/profile/update'); - }; - - const copyPubkey = async () => { - const npub = nip19.npubEncode(pubkey); - await writeText(npub); - }; - - return ( - - - - - - - viewProfile()} - className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400" - > - View profile - - updateProfile()} - className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400" - > - Update profile - - copyPubkey()} - className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400" - > - Copy public key - - - Log out - - - - - ); -}); diff --git a/src/layouts/newsfeed.tsx b/src/layouts/newsfeed.tsx deleted file mode 100644 index c49447f5..00000000 --- a/src/layouts/newsfeed.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import AccountColumn from '@components/columns/account'; -import NavigatorColumn from '@components/columns/navigator'; - -export default function NewsFeedLayout({ children }: { children: React.ReactNode }) { - return ( -
-
-
- -
-
-
- -
-
-
{children}
-
-
-
- ); -} diff --git a/src/layouts/withSidebar.tsx b/src/layouts/withSidebar.tsx new file mode 100644 index 00000000..4e2b6ed7 --- /dev/null +++ b/src/layouts/withSidebar.tsx @@ -0,0 +1,29 @@ +import AccountColumn from '@components/columns/account'; +import NavigatorColumn from '@components/columns/navigator'; + +export default function WithSidebarLayout({ children }: { children: React.ReactNode }) { + return ( +
+
+

Header

+
+
+
+
+ +
+
+
+ +
+
+
{children}
+
+
+
+
+ ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b8b09403..ca7aa418 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -40,9 +40,9 @@ export default function Page() {
-

Did you know?

+

Did you know?

- no one can't stop you use bitcoin and nostr + No one can't stop you use bitcoin and nostr

diff --git a/src/pages/newsfeed/circle.tsx b/src/pages/newsfeed/circle.tsx index 98f3d23e..c14a205a 100644 --- a/src/pages/newsfeed/circle.tsx +++ b/src/pages/newsfeed/circle.tsx @@ -1,5 +1,5 @@ import BaseLayout from '@layouts/base'; -import NewsFeedLayout from '@layouts/newsfeed'; +import WithSidebarLayout from '@layouts/withSidebar'; import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; @@ -22,7 +22,7 @@ Page.getLayout = function getLayout( ) { return ( - {page} + {page} ); }; diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx index 71b5bddc..022b57d7 100644 --- a/src/pages/newsfeed/following.tsx +++ b/src/pages/newsfeed/following.tsx @@ -1,5 +1,5 @@ import BaseLayout from '@layouts/base'; -import NewsFeedLayout from '@layouts/newsfeed'; +import WithSidebarLayout from '@layouts/withSidebar'; import { DatabaseContext } from '@components/contexts/database'; import { NoteConnector } from '@components/note/connector'; @@ -137,7 +137,7 @@ Page.getLayout = function getLayout( ) { return ( - {page} + {page} ); };