From 9bd9923e11f5f7647b35c8ee42e80648a40a1cb3 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 23 Dec 2024 21:21:51 +0000
Subject: [PATCH] [TOOL-2816] Nebula - update sidebar + other minor UI
 adjustments (#5823)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the UI components in the `ChatBar`, `ChatSidebar`, and `ContextFilters` by updating styles, modifying button variants, and enhancing layout structures. It also introduces a new `SidebarIconLink` component for better organization.

### Detailed summary
- Removed `variant="primary"` from `Button` in `ChatBar`.
- Simplified `Button` in `NebulaMobileNav`.
- Adjusted class names in `ChatHistoryPage` for responsiveness.
- Updated `Badge` components in `ContextFilters` to use `variant="secondary"`.
- Replaced multiple icons in `ChatSidebar` with new ones.
- Changed `Button` variant to `outline` in `ChatSidebar`.
- Added new `SidebarIconLink` component for navigation links.
- Adjusted layout spacing in `ChatSidebar`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../(app)/chat/history/ChatHistoryPage.tsx    |  5 +-
 .../nebula-app/(app)/components/ChatBar.tsx   |  1 -
 .../(app)/components/ChatSidebar.tsx          | 71 ++++++++++++-------
 .../(app)/components/ContextFilters.tsx       |  8 +--
 .../(app)/components/NebulaMobileNav.tsx      |  6 +-
 5 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
index 2a31f27ea98..7c6969d4674 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
@@ -81,12 +81,13 @@ export function ChatHistoryPageUI(props: {
 
       {filteredSessions.length > 0 && (
         <ScrollShadow
-          className="container max-w-[800px] flex-1"
+          className="flex-1"
           scrollableClassName="max-h-full py-6"
           shadowColor="hsl(var(--background))"
+          shadowClassName="z-10"
         >
           {filteredSessions.length > 0 && (
-            <div className="flex flex-col gap-5">
+            <div className="container flex max-w-[800px] flex-col gap-5">
               {filteredSessions.map((session) => (
                 <SessionCard
                   key={session.id + session.updated_at + session.created_at}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
index a8ef3dc6db1..5f623c2d7c3 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -51,7 +51,6 @@ export function Chatbar(props: {
           <Button
             aria-label="Send"
             disabled={message.trim() === ""}
-            variant="primary"
             className={cn(
               "!h-auto w-auto border border-transparent p-2 disabled:opacity-100",
               message === "" &&
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
index 3fc35bf5add..3a685132ddc 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
@@ -3,11 +3,7 @@ import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  ChevronRightIcon,
-  FlaskConicalIcon,
-  MessageSquareDashedIcon,
-} from "lucide-react";
+import { MessagesSquareIcon, SquareDashedBottomCodeIcon } from "lucide-react";
 import Link from "next/link";
 import type { TruncatedSessionInfo } from "../api/types";
 import { useNewChatPageLink } from "../hooks/useNewChatPageLink";
@@ -33,31 +29,45 @@ export function ChatSidebar(props: {
           <NebulaIcon className="size-8 text-foreground" />
         </Link>
 
-        <Badge variant="outline" className="gap-1">
-          <FlaskConicalIcon className="size-2.5" />
+        <Badge variant="secondary" className="gap-1 py-1">
           Alpha
         </Badge>
       </div>
 
-      <div className="p-2">
-        <div className="h-3" />
-        <Button asChild variant="primary" className="w-full gap-2">
-          <Link href={newChatPage}>
-            <MessageSquareDashedIcon className="size-4" />
-            New Chat
-          </Link>
+      <div className="h-4" />
+
+      <div className="flex flex-col gap-2 px-2">
+        <Button asChild variant="outline" className="w-full gap-2 rounded-lg">
+          <Link href={newChatPage}>New Chat</Link>
         </Button>
       </div>
 
+      <div className="h-4" />
+
+      <div>
+        <SidebarIconLink
+          href="/chat/history"
+          icon={MessagesSquareIcon}
+          label="All Chats"
+        />
+
+        <SidebarIconLink
+          href="https://portal.thirdweb.com/nebula"
+          icon={SquareDashedBottomCodeIcon}
+          label="Documentation"
+          target="_blank"
+        />
+      </div>
+
       {sessionsToShow.length > 0 && (
         <ScrollShadow
-          className="my-5 flex-1 border-t border-dashed pt-2"
+          className="my-4 flex-1 border-t border-dashed pt-2"
           scrollableClassName="max-h-full"
-          shadowColor="hsl(var(--muted))"
+          shadowColor="transparent"
           shadowClassName="z-10"
         >
           <div className="flex flex-col gap-1">
-            <h3 className="px-2 py-3 text-muted-foreground text-sm">
+            <h3 className="px-2 py-3 text-muted-foreground text-xs">
               Recent Chats
             </h3>
             {sessionsToShow.map((session) => {
@@ -70,13 +80,6 @@ export function ChatSidebar(props: {
                 />
               );
             })}
-
-            <Link
-              href="/chat/history"
-              className="inline-flex items-center gap-1.5 px-2 py-3 text-muted-foreground text-sm underline-offset-4 hover:text-foreground hover:underline"
-            >
-              View All <ChevronRightIcon className="size-4 text-foreground" />
-            </Link>
           </div>
         </ScrollShadow>
       )}
@@ -89,3 +92,23 @@ export function ChatSidebar(props: {
     </div>
   );
 }
+
+function SidebarIconLink(props: {
+  icon: React.FC<{ className?: string }>;
+  label: string;
+  target?: "_blank";
+  href: string;
+}) {
+  return (
+    <Button asChild variant="ghost">
+      <Link
+        href={props.href}
+        target={props.target}
+        className="!justify-start !px-3 w-full gap-2.5 rounded-lg text-left"
+      >
+        <props.icon className="size-4" />
+        {props.label}
+      </Link>
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
index d2f9852fbfe..841c967497a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -30,7 +31,6 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { isAddress } from "thirdweb";
 import { z } from "zod";
-import { MultiNetworkSelector } from "../../../../@/components/blocks/NetworkSelectors";
 import type { ContextFilters } from "../api/chat";
 
 export default function ContextFiltersButton(props: {
@@ -55,14 +55,14 @@ export default function ContextFiltersButton(props: {
           Context Filters
           <div className="flex gap-1 overflow-hidden">
             {chainIds && chainIds.length > 0 && (
-              <Badge className="gap-1 truncate">
+              <Badge className="gap-1 truncate" variant="secondary">
                 Chain
                 <span className="max-sm:hidden">{chainIds.join(", ")}</span>
               </Badge>
             )}
 
             {contractAddresses && contractAddresses.length > 0 && (
-              <Badge className="gap-1 truncate">
+              <Badge className="gap-1 truncate" variant="secondary">
                 Contract
                 <span className="max-sm:hidden">
                   {contractAddresses
@@ -73,7 +73,7 @@ export default function ContextFiltersButton(props: {
             )}
 
             {walletAddresses && walletAddresses.length > 0 && (
-              <Badge className="gap-1 truncate">
+              <Badge className="gap-1 truncate" variant="secondary">
                 Wallet
                 <span className="max-sm:hidden">
                   {walletAddresses
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
index 1ecbdaa02cf..cc65bd26596 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
@@ -61,11 +61,7 @@ export function MobileNav(props: {
       </Sheet>
 
       <div className="flex items-center gap-5">
-        <Button
-          asChild
-          variant="primary"
-          className="h-auto w-auto rounded-lg px-2.5 py-1.5"
-        >
+        <Button asChild className="h-auto w-auto rounded-lg px-2.5 py-1.5">
           <Link href={newChatPage}>New Chat</Link>
         </Button>
       </div>