From 7686b6ef82d77f6c618d3d466d420711cb278817 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Sat, 26 Oct 2024 19:26:20 -0700
Subject: [PATCH 1/3] Move notification and settings links to aside

---
 src/app/dashboard/layout.tsx                  | 10 +----
 src/components/actions/signOut/SignOut.tsx    |  3 +-
 src/components/navigational/appBar/AppBar.tsx |  6 +--
 src/components/navigational/aside/Aside.tsx   | 42 +++++++++++++------
 .../navigational/navbar/NavItem.tsx           | 10 ++---
 src/components/navigational/navbar/Navbar.tsx | 41 +++---------------
 .../settingsContainer/SettingsContainer.tsx   |  4 +-
 7 files changed, 49 insertions(+), 67 deletions(-)

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 484a2bd1..3303fbec 100644
--- 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
index 5cb4c99c..34f6ddc3 100644
--- a/src/components/actions/signOut/SignOut.tsx
+++ b/src/components/actions/signOut/SignOut.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { signOut } from "next-auth/react";
+import { BiLogOut } from "react-icons/bi";
 
 export default function SignOut() {
   return (
@@ -8,7 +9,7 @@ export default function SignOut() {
       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
index 02adbbfd..78c77b0f 100644
--- 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
index 97edb53d..9d08234c 100644
--- a/src/components/navigational/aside/Aside.tsx
+++ b/src/components/navigational/aside/Aside.tsx
@@ -1,28 +1,46 @@
+"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 { FaBell, FaRegBell } from "react-icons/fa6";
+import { usePathname } from "next/navigation";
+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
index 2b5d913b..9ad71520 100644
--- 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
index 8b945df0..d8f7eb47 100644
--- 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,15 +49,6 @@ 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" />}
@@ -80,13 +56,6 @@ export default function Navbar() {
         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
index 337a6de2..8c59c983 100644
--- 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>

From 2bb7b5722778f2fc6834400904f75bcf066bdadc Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Sat, 26 Oct 2024 19:31:33 -0700
Subject: [PATCH 2/3] Remove unused icons

---
 src/components/navigational/aside/Aside.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/navigational/aside/Aside.tsx b/src/components/navigational/aside/Aside.tsx
index 9d08234c..00bd7dd0 100644
--- a/src/components/navigational/aside/Aside.tsx
+++ b/src/components/navigational/aside/Aside.tsx
@@ -1,10 +1,9 @@
 "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 { FaBell, FaRegBell } from "react-icons/fa6";
+import { FaRegBell } from "react-icons/fa6";
 import { usePathname } from "next/navigation";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import { useQuery } from "@tanstack/react-query";

From 827fea8e8bb2c2bdde4a10821007ab356702039b Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Sat, 26 Oct 2024 19:32:26 -0700
Subject: [PATCH 3/3] Remove unused imports

---
 src/components/navigational/aside/Aside.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/navigational/aside/Aside.tsx b/src/components/navigational/aside/Aside.tsx
index 00bd7dd0..e0a33e56 100644
--- a/src/components/navigational/aside/Aside.tsx
+++ b/src/components/navigational/aside/Aside.tsx
@@ -4,7 +4,6 @@ import Avatar from "@/components/dataDisplay/avatar/Avatar";
 import Link from "next/link";
 import NavItem from "../navbar/NavItem";
 import { FaRegBell } from "react-icons/fa6";
-import { usePathname } from "next/navigation";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import { useQuery } from "@tanstack/react-query";
 import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";