Merge branch 'preview'

pdelfan · Oct 27, 2024 · 0431749 · 0431749
2 parents 8b8eab0 + 827fea8
commit 0431749
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 68 deletions.
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -21,20 +21,14 @@ export default async function DashboardLayout({
   const profile = await getProfile(session?.user.bskySession.handle);
 
   return (
-    <main className="bg-skin-base flex justify-center gap-6 pb-20 md:mt-6 lg:gap-12 animate-fade">
+    <main className="bg-skin-base flex justify-center gap-6 pb-20 md:mt-6 lg:gap-16 animate-fade">
       {profile && <Composer author={profile} />}
       <SidePanel />
       <section className="w-full md:max-w-xl">
         {profile && <TopBar profile={profile} />}
         {children}
       </section>
-      {profile && (
-        <Aside
-          avatar={profile?.avatar}
-          displayName={profile?.displayName}
-          handle={profile?.handle}
-        />
-      )}
+      {profile && <Aside avatar={profile?.avatar} handle={profile?.handle} />}
       <AppBar />
     </main>
   );

diff --git a/src/components/actions/signOut/SignOut.tsx b/src/components/actions/signOut/SignOut.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { signOut } from "next-auth/react";
+import { BiLogOut } from "react-icons/bi";
 
 export default function SignOut() {
   return (
     <button
       onClick={() => signOut({ callbackUrl: "/" })}
       className="text-skin-tertiary hover:text-skin-base font-medium"
     >
-      Sign out
+      <BiLogOut className="text-2xl text-skin-secondary hover:text-skin-base" />
     </button>
   );
 }
diff --git a/src/components/navigational/appBar/AppBar.tsx b/src/components/navigational/appBar/AppBar.tsx
@@ -6,7 +6,7 @@ import { useScrollContext } from "@/app/providers/scroll";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
 import { useQuery } from "@tanstack/react-query";
-import { BiCloud, BiHome, BiSolidCloud, BiSolidHome } from "react-icons/bi";
+import { BiHome, BiPlanet, BiSolidHome, BiSolidPlanet } from "react-icons/bi";
 import { PiMagnifyingGlassBold, PiMagnifyingGlassFill } from "react-icons/pi";
 import { FaRegBell } from "react-icons/fa6";
 import { FaBell } from "react-icons/fa";
@@ -51,8 +51,8 @@ export default function AppBar() {
       />
       <NavItem
         href="/dashboard/feeds"
-        icon={<BiCloud className="text-2xl md:text-3xl" />}
-        activeIcon={<BiSolidCloud className="text-2xl md:text-3xl" />}
+        icon={<BiPlanet className="text-2xl md:text-3xl" />}
+        activeIcon={<BiSolidPlanet className="text-2xl md:text-3xl" />}
         title="Feeds"
         isActive={pathname === "/dashboard/feeds"}
       />

diff --git a/src/components/navigational/aside/Aside.tsx b/src/components/navigational/aside/Aside.tsx
@@ -1,28 +1,44 @@
+"use client";
+
 import Avatar from "@/components/dataDisplay/avatar/Avatar";
-import SignOut from "@/components/actions/signOut/SignOut";
 import Link from "next/link";
+import NavItem from "../navbar/NavItem";
+import { FaRegBell } from "react-icons/fa6";
+import useAgent from "@/lib/hooks/bsky/useAgent";
+import { useQuery } from "@tanstack/react-query";
+import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
+import { BiCog } from "react-icons/bi";
 
 interface Props {
   handle: string;
-  displayName?: string;
   avatar?: string;
 }
 
 export default function Aside(props: Props) {
-  const { displayName, handle, avatar } = props;
+  const { handle, avatar } = props;
+  const agent = useAgent();
+  const {
+    data: notificationsCount,
+    error,
+    isFetching,
+  } = useQuery({
+    queryKey: ["notificationsCount"],
+    queryFn: () => getUnreadNotificationsCount(agent),
+    refetchInterval: 10000,
+  });
 
   return (
     <aside className="sticky top-6 hidden h-full md:block">
-      <div className="flex flex-col items-center gap-1 lg:flex-row lg:gap-3">
-        <div className="order-last flex flex-col items-end lg:order-first">
-          <Link
-            href={`/dashboard/user/${handle}`}
-            className="text-skin-base hover:text-skin-secondary hidden max-w-[7rem] truncate font-semibold lg:inline"
-          >
-            {displayName || handle}
-          </Link>
-          <SignOut />
-        </div>
+      <div className="flex flex-col items-center gap-3 lg:flex-row border px-2 py-3 lg:px-3 lg:py-2 rounded-full">
+        <NavItem
+          href="/dashboard/settings"
+          icon={<BiCog className="text-2xl" />}
+        />
+        <NavItem
+          href="/dashboard/notifications"
+          icon={<FaRegBell className="text-2xl" />}
+          badge={notificationsCount ?? 0}
+        />
         <Link
           href={`/dashboard/user/${handle}`}
           className="max-w-[7rem] truncate hover:brightness-90"

diff --git a/src/components/navigational/navbar/NavItem.tsx b/src/components/navigational/navbar/NavItem.tsx
@@ -4,10 +4,10 @@ import { ReactElement } from "react";
 
 interface Props {
   href: string;
-  title: string;
   icon: ReactElement;
-  activeIcon: ReactElement;
-  isActive: boolean;
+  title?: string;
+  activeIcon?: ReactElement;
+  isActive?: boolean;
   badge?: number;
 }
 
@@ -16,9 +16,9 @@ export default function NavItem(props: Props) {
   return (
     <Link
       href={href}
-      className={`hover:text-skin-base flex items-center gap-3 ${
+      className={`hover:text-skin-base flex items-center ${
         isActive ? "text-skin-base" : "text-skin-secondary"
-      }`}
+      } ${title && "gap-3"}`}
     >
       <div className="relative m-2 md:m-0">
         {isActive ? activeIcon : icon}

diff --git a/src/components/navigational/navbar/Navbar.tsx b/src/components/navigational/navbar/Navbar.tsx
@@ -3,36 +3,21 @@
 import { useSession } from "next-auth/react";
 import NavItem from "./NavItem";
 import { usePathname } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
-import useAgent from "@/lib/hooks/bsky/useAgent";
+
 import {
-  BiCog,
-  BiCloud,
   BiHome,
-  BiSolidCog,
   BiSolidHome,
   BiSolidUser,
   BiUser,
-  BiSolidCloud,
+  BiPlanet,
+  BiSolidPlanet,
 } from "react-icons/bi";
 import { PiMagnifyingGlassBold, PiMagnifyingGlassFill } from "react-icons/pi";
-import { FaBell, FaRegBell } from "react-icons/fa6";
 import { HiClipboardList, HiOutlineClipboardList } from "react-icons/hi";
 
 export default function Navbar() {
   const pathname = usePathname();
   const { data: session } = useSession();
-  const agent = useAgent();
-  const {
-    data: notificationsCount,
-    error,
-    isFetching,
-  } = useQuery({
-    queryKey: ["notificationsCount"],
-    queryFn: () => getUnreadNotificationsCount(agent),
-    refetchInterval: 10000,
-  });
 
   return (
     <nav className="inline-flex flex-col gap-5 lg:ml-1.5">
@@ -52,8 +37,8 @@ export default function Navbar() {
       />
       <NavItem
         href="/dashboard/feeds"
-        icon={<BiCloud className="text-2xl md:text-3xl" />}
-        activeIcon={<BiSolidCloud className="text-2xl md:text-3xl" />}
+        icon={<BiPlanet className="text-2xl md:text-3xl" />}
+        activeIcon={<BiSolidPlanet className="text-2xl md:text-3xl" />}
         title="Feeds"
         isActive={pathname === "/dashboard/feeds"}
       />
@@ -64,29 +49,13 @@ export default function Navbar() {
         title="Lists"
         isActive={pathname === "/dashboard/lists"}
       />
-      <NavItem
-        href="/dashboard/notifications"
-        icon={<FaRegBell className="text-2xl md:text-3xl" />}
-        activeIcon={<FaBell className="text-2xl md:text-3xl" />}
-        title="Notifications"
-        isActive={pathname.includes("notifications")}
-        badge={notificationsCount ?? 0}
-      />
-
       <NavItem
         href={`/dashboard/user/${session?.user.handle}`}
         icon={<BiUser className="text-2xl md:text-3xl" />}
         activeIcon={<BiSolidUser className="text-2xl md:text-3xl" />}
         title="Profile"
         isActive={pathname.includes(`/dashboard/user/${session?.user.handle}`)}
       />
-      <NavItem
-        href="/dashboard/settings"
-        icon={<BiCog className="text-2xl md:text-3xl" />}
-        activeIcon={<BiSolidCog className="text-2xl md:text-3xl" />}
-        title="Settings"
-        isActive={pathname.includes("settings")}
-      />
     </nav>
   );
 }
diff --git a/src/containers/settings/settingsContainer/SettingsContainer.tsx b/src/containers/settings/settingsContainer/SettingsContainer.tsx
@@ -4,10 +4,10 @@ import { ImBubbles2 } from "react-icons/im";
 import {
   BiLogoGithub,
   BiSolidCheckCircle,
-  BiSolidCloud,
   BiSolidEnvelope,
   BiSolidXCircle,
   BiSolidPalette,
+  BiSolidPlanet,
 } from "react-icons/bi";
 import { MdRemoveRedEye } from "react-icons/md";
 import { BiSolidBellOff } from "react-icons/bi";
@@ -115,7 +115,7 @@ export default async function SettingsContainer() {
             href="/dashboard/settings/my-feeds"
             className="border-skin-base text-skin-base hover:bg-skin-secondary flex items-center gap-2 border border-x-0 p-3 last:border-b md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
           >
-            <BiSolidCloud className="text-skin-icon-base text-xl" />
+            <BiSolidPlanet className="text-skin-icon-base text-xl" />
             My Feeds
           </Link>
         </div>