From 8b2c6e67f5fdc5a16c3bc4e1eea8e08968ca7ff7 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Sat, 18 Mar 2023 08:19:30 +0700 Subject: [PATCH] updated UI/UX --- src/components/appHeader/index.tsx | 43 ++++++++++++------- src/components/columns/account/account.tsx | 4 +- src/components/columns/account/index.tsx | 25 +++++++++-- .../columns/navigator/newsfeed/index.tsx | 4 +- src/components/imageWithFallback.tsx | 1 + src/components/user/extend.tsx | 10 ++++- src/components/user/mini.tsx | 5 ++- src/pages/explore.tsx | 24 +++++++++++ 8 files changed, 89 insertions(+), 27 deletions(-) create mode 100644 src/pages/explore.tsx diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx index b2aa0a68..d48ed670 100644 --- a/src/components/appHeader/index.tsx +++ b/src/components/appHeader/index.tsx @@ -1,6 +1,6 @@ import { NoteConnector } from '@components/note/connector'; -import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'; +import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons'; import { useRouter } from 'next/router'; export default function AppHeader() { @@ -14,21 +14,34 @@ export default function AppHeader() { window.history.forward(); }; + const reload = () => { + router.reload(); + }; + return ( -
-
{/* macos traffic lights */}
-
-
- - -
-
- -
+
+
+ + + +
+
+
); diff --git a/src/components/columns/account/account.tsx b/src/components/columns/account/account.tsx index 22272863..37b23b88 100644 --- a/src/components/columns/account/account.tsx +++ b/src/components/columns/account/account.tsx @@ -9,8 +9,8 @@ export const Account = memo(function Account({ user }: { user: any }) { }; return ( - ); }); diff --git a/src/components/columns/account/index.tsx b/src/components/columns/account/index.tsx index 0d52d63f..e62fd498 100644 --- a/src/components/columns/account/index.tsx +++ b/src/components/columns/account/index.tsx @@ -2,12 +2,14 @@ import { Account } from '@components/columns/account/account'; import LumeSymbol from '@assets/icons/Lume'; import { PlusIcon } from '@radix-ui/react-icons'; +import { getVersion } from '@tauri-apps/api/app'; import Link from 'next/link'; import { useCallback, useEffect, useState } from 'react'; import Database from 'tauri-plugin-sql-api'; export default function AccountColumn() { const [users, setUsers] = useState([]); + const [version, setVersion] = useState(null); const getAccounts = useCallback(async () => { const db = await Database.load('sqlite:lume.db'); @@ -16,25 +18,40 @@ export default function AccountColumn() { setUsers(result); }, []); + const getAppVersion = useCallback(async () => { + const appVersion = await getVersion(); + setVersion(appVersion); + }, []); + useEffect(() => { getAccounts().catch(console.error); - }, [getAccounts]); + getAppVersion().catch(console.error); + }, [getAccounts, getAppVersion]); return (
+ + + {users.map((user, index) => ( ))}
-
- +
+ + Lume + + v{version}
); diff --git a/src/components/columns/navigator/newsfeed/index.tsx b/src/components/columns/navigator/newsfeed/index.tsx index 7cb204b4..fc2c16e7 100644 --- a/src/components/columns/navigator/newsfeed/index.tsx +++ b/src/components/columns/navigator/newsfeed/index.tsx @@ -29,7 +29,7 @@ export default function Newsfeed() { className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900" >
- +
Following @@ -39,7 +39,7 @@ export default function Newsfeed() { className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900" >
- +
Circle diff --git a/src/components/imageWithFallback.tsx b/src/components/imageWithFallback.tsx index 255eb790..268b908f 100644 --- a/src/components/imageWithFallback.tsx +++ b/src/components/imageWithFallback.tsx @@ -26,6 +26,7 @@ export const ImageWithFallback = memo(function ImageWithFallback({ size={44} name={alt} variant="beam" + square={true} colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']} /> ) : ( diff --git a/src/components/user/extend.tsx b/src/components/user/extend.tsx index a5c6e7c2..1c38917c 100644 --- a/src/components/user/extend.tsx +++ b/src/components/user/extend.tsx @@ -55,14 +55,20 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s return (
-
+
{profile.picture ? ( - + ) : ( )} diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx index 9a449aa7..334cf700 100644 --- a/src/components/user/mini.tsx +++ b/src/components/user/mini.tsx @@ -50,14 +50,15 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) { return (
-
+
{profile.picture ? ( - + ) : ( )} diff --git a/src/pages/explore.tsx b/src/pages/explore.tsx new file mode 100644 index 00000000..f37272fc --- /dev/null +++ b/src/pages/explore.tsx @@ -0,0 +1,24 @@ +import BaseLayout from '@layouts/base'; +import WithSidebarLayout from '@layouts/withSidebar'; + +import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; + +export default function Page() { + return <>; +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return ( + + {page} + + ); +};