updated UI/UX

2024-09-18 11:13:30 +00:00 · 2023-03-18 08:19:30 +07:00 · 2023-03-18 08:19:30 +07:00 · 8b2c6e67f5
commit 8b2c6e67f5
parent e9aa7bd4ff
8 changed files with 89 additions and 27 deletions
--- 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 (
-    <div data-tauri-drag-region className="flex h-full w-full items-center">
-      <div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
-      <div className="flex w-full flex-1 items-center justify-between px-2">
-        <div className="flex h-full gap-2">
-          <button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
-            <ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
-          </button>
-          <button onClick={() => goForward()} className="group rounded-md p-1 hover:bg-zinc-900">
-            <ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
-          </button>
-        </div>
-        <div>
-          <NoteConnector />
-        </div>
+    <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center justify-between px-2">
+      <div className="flex h-full items-center gap-2 pl-[68px]">
+        <button
+          onClick={() => goBack()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+        <button
+          onClick={() => goForward()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+        <button
+          onClick={() => reload()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+      </div>
+      <div>
+        <NoteConnector />
      </div>
    </div>
  );
--- 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 (
-    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-full">
-      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
+    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
+      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
    </button>
  );
 });
--- 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 (
    <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
      <div className="flex flex-col gap-4">
+        <Link
+          href="/explore"
+          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-zinc-900 hover:bg-zinc-800"
+        >
+          <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
+        </Link>
        {users.map((user, index) => (
          <Account key={index} user={user} />
        ))}
        <Link
          href="/onboarding"
-          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-zinc-600 hover:border-zinc-400"
+          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
        >
          <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
        </Link>
      </div>
-      <div className="flex flex-col gap-4">
-        <LumeSymbol className="h-8 w-auto text-zinc-700" />
+      <div className="flex flex-col gap-0.5 text-center">
+        <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-sm font-black uppercase leading-tight text-transparent">
+          Lume
+        </span>
+        <span className="text-xs font-medium text-zinc-700">v{version}</span>
      </div>
    </div>
  );
--- 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"
          >
            <div className="inline-flex h-5 w-5 items-center justify-center">
-              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
+              <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
            </div>
            <span>Following</span>
          </ActiveLink>
@ -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"
          >
            <div className="inline-flex h-5 w-5 items-center justify-center">
-              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
+              <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
            </div>
            <span>Circle</span>
          </ActiveLink>
--- 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']}
        />
      ) : (
--- 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 (
    <div className="relative flex items-start gap-4">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
        {profile.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
+          <ImageWithFallback
+            src={profile.picture}
+            alt={pubkey}
+            fill={true}
+            className="rounded-md border border-white/10 object-cover"
+          />
        ) : (
          <Avatar
            size={44}
            name={pubkey}
            variant="beam"
+            square={true}
            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
          />
        )}
--- 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 (
    <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded-full">
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
        {profile.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
+          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
        ) : (
          <Avatar
            size={20}
            name={pubkey}
            variant="beam"
+            square={true}
            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
          />
        )}
--- a/src/pages/explore.tsx
+++ 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<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
+    </BaseLayout>
+  );
+};