[TOOL-3299] Playground: Update Sidebar, Minor improvements and fixes

apps/playground-web/package.json

@@ -10,7 +10,8 @@
     "prelint": "biome check ./src",
     "lint": "eslint ./src",
     "prefix": "biome check ./src --fix",
-    "fix": "eslint ./src --fix"
+    "fix": "eslint ./src --fix",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@abstract-foundation/agw-client": "^1.4.0",
@@ -36,6 +37,7 @@
     "lucide-react": "0.474.0",
     "next": "15.1.6",
     "next-themes": "^0.4.4",
+    "nextjs-toploader": "^1.6.12",
     "prettier": "3.3.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",

apps/playground-web/src/app/AppSidebar.tsx

@@ -2,33 +2,32 @@ import thirdwebIconSrc from "@/../public/thirdweb.svg";
 import { Sidebar } from "@/components/ui/sidebar";
 import Image from "next/image";
 import Link from "next/link";
+import { ScrollShadow } from "../components/ui/ScrollShadow/ScrollShadow";
 import { navLinks } from "./navLinks";
 import { otherLinks } from "./otherLinks";
 
 export function AppSidebar() {
   return (
-    <div className="sticky top-0 z-10 hidden h-dvh w-[300px] flex-col border-border/50 border-r-2 xl:flex">
-      <div className="px-6 pt-6">
-        <Link
-          className="flex items-center gap-2"
-          href="/"
-          aria-label="thirdweb Docs"
-          title="thirdweb Docs"
-        >
-          <Image src={thirdwebIconSrc} className="size-6" alt="" />
+    <div className="z-10 hidden h-dvh w-[300px] flex-col border-border/50 border-r-2 xl:flex">
+      <div className="border-b px-6 py-5">
+        <div className="flex items-center gap-2">
+          <Image src={thirdwebIconSrc} className="size-6" alt="thirdweb" />
           <span className="font-bold text-lg leading-none tracking-tight">
             Playground
           </span>
-        </Link>
+        </div>
       </div>
 
-      <div className="h-5" />
-
-      <div className="px-6">
-        <Sidebar links={navLinks} />
+      <div className="relative flex max-h-full flex-1 flex-col overflow-hidden">
+        <ScrollShadow
+          className="grow pr-4 pl-6"
+          scrollableClassName="max-h-full pt-6"
+        >
+          <Sidebar links={navLinks} />
+        </ScrollShadow>
       </div>
 
-      <div className="mt-auto flex flex-col gap-4 p-6">
+      <div className="mt-auto flex flex-col gap-4 border-t px-6 py-6">
         {otherLinks.map((link) => {
           return (
             <Link

apps/playground-web/src/app/MobileHeader.tsx

@@ -5,6 +5,7 @@ import { MenuIcon, XIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
+import { ScrollShadow } from "../components/ui/ScrollShadow/ScrollShadow";
 import { Button } from "../components/ui/button";
 import { Sidebar } from "../components/ui/sidebar";
 import { navLinks } from "./navLinks";
@@ -60,9 +61,17 @@ export function MobileHeader() {
         )}
       </Button>
       {isOpen && (
-        <div className="fade-in-0 slide-in-from-top-5 fixed top-[75px] right-0 bottom-0 left-0 z-50 flex animate-in flex-col gap-6 overflow-auto bg-background p-6 duration-200">
-          <Sidebar links={navLinks} />
-          <div className="mt-auto flex flex-col gap-4">
+        <div className="fade-in-0 slide-in-from-top-5 fixed top-[75px] right-0 bottom-0 left-0 z-50 flex animate-in flex-col bg-background duration-200">
+          <div className="relative flex max-h-full flex-1 flex-col overflow-hidden">
+            <ScrollShadow
+              className="grow px-6"
+              scrollableClassName="max-h-full pt-6"
+            >
+              <Sidebar links={navLinks} />
+            </ScrollShadow>
+          </div>
+
+          <div className="mt-auto flex flex-col gap-4 border-t px-6 py-6">
             {otherLinks.map((link) => {
               return (
                 <Link

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -1,7 +1,7 @@
 import { abstractWallet } from "@abstract-foundation/agw-react/thirdweb";
 import { XIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo } from "react";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import {
   arbitrumSepolia,
   baseSepolia,
@@ -25,21 +25,26 @@ import { cn } from "../../../../lib/utils";
 import { CodeGen } from "../components/CodeGen";
 import type { ConnectPlaygroundOptions } from "../components/types";
 
+type Tab = "modal" | "button" | "code";
+
 export function RightSection(props: {
   connectOptions: ConnectPlaygroundOptions;
   tab?: string;
 }) {
-  const router = useRouter();
-  const previewTab = useMemo(
-    () =>
-      ["modal", "button", "code"].includes(props.tab || "")
-        ? (props.tab as "modal" | "button" | "code")
-        : "modal",
-    [props.tab],
-  );
-  const setPreviewTab = (tab: "modal" | "button" | "code") => {
-    router.push(`/connect/sign-in?tab=${tab}`);
-  };
+  const pathname = usePathname();
+  const [previewTab, _setPreviewTab] = useState<Tab>(() => {
+    return props.tab === "code"
+      ? "code"
+      : props.tab === "button"
+        ? "button"
+        : "modal";
+  });
+
+  function setPreviewTab(tab: "modal" | "button" | "code") {
+    _setPreviewTab(tab);
+    window.history.replaceState({}, "", `${pathname}?tab=${tab}`);
+  }
+
   const { connectOptions } = props;
   const wallet = useActiveWallet();
   const account = useActiveAccount();

apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx

@@ -134,7 +134,7 @@ function WalletButton(props: {
     >
       <span className="flex items-center gap-3">
         <Img
-          src={walletImage.data || ""}
+          src={walletImage.data}
           alt=""
           className="size-7 rounded-lg"
           loading="lazy"

apps/playground-web/src/app/globals.css

@@ -79,3 +79,17 @@ html.dark .shiki span {
   font-weight: var(--shiki-dark-font-weight) !important;
   text-decoration: var(--shiki-dark-text-decoration) !important;
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar,
+  .no-scrollbar *::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar,
+  .no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

apps/playground-web/src/app/layout.tsx

@@ -6,6 +6,7 @@ import Script from "next/script";
 import { AppSidebar } from "./AppSidebar";
 import { Providers } from "./providers";
 import "./globals.css";
+import NextTopLoader from "nextjs-toploader";
 import { MobileHeader } from "./MobileHeader";
 
 const sansFont = Inter({
@@ -49,14 +50,18 @@ export default function RootLayout({
           monoFont.variable,
         )}
       >
+        <NextTopLoader
+          color="hsl(var(--foreground))"
+          height={2}
+          shadow={false}
+          showSpinner={false}
+        />
         <MobileHeader />
-        <div className="relative">
-          <div className="flex flex-col lg:flex-row">
-            <AppSidebar />
-            <div className="flex grow flex-col">
-              <div className="container relative grow px-4 md:px-6">
-                <Providers>{children}</Providers>
-              </div>
+        <div className="flex h-dvh flex-col lg:flex-row">
+          <AppSidebar />
+          <div className="flex grow flex-col overflow-auto">
+            <div className="container relative grow px-4 md:px-6">
+              <Providers>{children}</Providers>
             </div>
           </div>
         </div>