[TOOL-4483] Move changelog to team landing page from notifications

apps/dashboard/src/@/components/blocks/dismissible-alert.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { XIcon } from "lucide-react";
+import { useLocalStorage } from "../../../hooks/useLocalStorage";
+import { Button } from "../ui/button";
+
+export function DismissibleAlert(props: {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  localStorageId: string;
+}) {
+  const [isVisible, setIsVisible] = useLocalStorage(
+    props.localStorageId,
+    true,
+    false,
+  );
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="relative rounded-lg border border-border bg-card p-4">
+      <Button
+        onClick={() => setIsVisible(false)}
+        className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
+        aria-label="Close alert"
+        variant="ghost"
+      >
+        <XIcon className="size-5" />
+      </Button>
+      <div>
+        <h2 className="mb-0.5 font-semibold">{props.title} </h2>
+        <div className="text-muted-foreground text-sm">{props.description}</div>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx

@@ -11,7 +11,6 @@ import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { doLogout } from "../../login/auth-actions";
 import {
-  getChangelogNotifications,
   getInboxNotifications,
   markNotificationAsRead,
 } from "../../team/components/NotificationButton/fetch-notifications";
@@ -59,7 +58,6 @@ export function AccountHeader(props: {
     account: props.account,
     client,
     accountAddress: props.accountAddress,
-    getChangelogNotifications: getChangelogNotifications,
     getInboxNotifications: getInboxNotifications,
     markNotificationAsRead: markNotificationAsRead,
   };

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx

@@ -64,7 +64,6 @@ function Variants(props: {
                 email: "[email protected]",
               }}
               client={storybookThirdwebClient}
-              getChangelogNotifications={() => Promise.resolve([])}
               getInboxNotifications={() => Promise.resolve([])}
               markNotificationAsRead={() => Promise.resolve()}
             />

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx

@@ -24,7 +24,6 @@ export type AccountHeaderCompProps = {
   account: Pick<Account, "email" | "id" | "image">;
   client: ThirdwebClient;
   accountAddress: string;
-  getChangelogNotifications: () => Promise<NotificationMetadata[]>;
   getInboxNotifications: () => Promise<NotificationMetadata[]>;
   markNotificationAsRead: (id: string) => Promise<void>;
 };
@@ -78,7 +77,6 @@ export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
         connectButton={props.connectButton}
         client={props.client}
         accountAddress={props.accountAddress}
-        getChangelogs={props.getChangelogNotifications}
         getInboxNotifications={props.getInboxNotifications}
         markNotificationAsRead={props.markNotificationAsRead}
       />
@@ -126,7 +124,6 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
 
       <div className="flex items-center gap-3">
         <NotificationButtonUI
-          getChangelogs={props.getChangelogNotifications}
           getInboxNotifications={props.getInboxNotifications}
           markNotificationAsRead={props.markNotificationAsRead}
         />

apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx

@@ -15,7 +15,6 @@ export function SecondaryNav(props: {
   connectButton: React.ReactNode;
   client: ThirdwebClient;
   accountAddress: string;
-  getChangelogs: () => Promise<NotificationMetadata[]>;
   getInboxNotifications: () => Promise<NotificationMetadata[]>;
   markNotificationAsRead: (id: string) => Promise<void>;
 }) {
@@ -24,7 +23,6 @@ export function SecondaryNav(props: {
       <SecondaryNavLinks />
       <div className="flex items-center gap-3">
         <NotificationButtonUI
-          getChangelogs={props.getChangelogs}
           getInboxNotifications={props.getInboxNotifications}
           markNotificationAsRead={props.markNotificationAsRead}
         />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx

@@ -0,0 +1,64 @@
+import { formatDistance } from "date-fns";
+import { ArrowRightIcon } from "lucide-react";
+import { unstable_cache } from "next/cache";
+import Link from "next/link";
+
+type ChangelogItem = {
+  published_at: string;
+  title: string;
+  url: string;
+};
+
+export async function Changelog() {
+  const changelog = await getChangelog();
+
+  return (
+    <div className="relative flex flex-col gap-6 border-border border-l py-2">
+      {changelog.map((item) => (
+        <div className="flex flex-row gap-2" key={item.title}>
+          <div className="-translate-x-1/2 size-2.5 shrink-0 translate-y-1/2 rounded-full bg-border" />
+
+          <div className="flex flex-col">
+            <Link
+              target="_blank"
+              href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
+              role="group"
+              className="line-clamp-2 text-foreground text-sm hover:underline"
+            >
+              {item.title}
+            </Link>
+            <div className="mt-1 text-muted-foreground text-xs">
+              {formatDistance(new Date(item.published_at), Date.now(), {
+                addSuffix: true,
+              })}
+            </div>
+          </div>
+        </div>
+      ))}
+      <Link
+        href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
+        target="_blank"
+        className="flex items-center gap-2 pl-5 text-foreground text-sm hover:underline"
+      >
+        View More <ArrowRightIcon className="size-4" />
+      </Link>
+    </div>
+  );
+}
+
+const getChangelog = unstable_cache(
+  async () => {
+    const res = await fetch(
+      "https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at&filter=tag:changelog&visibility:public&limit=10",
+    );
+    if (!res.ok) {
+      return [];
+    }
+    const json = await res.json();
+    return json.posts as ChangelogItem[];
+  },
+  ["changelog"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx

@@ -1,13 +1,13 @@
 import { getWalletConnections } from "@/api/analytics";
 import { type Project, getProjects } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { DismissibleAlert } from "@/components/blocks/dismissible-alert";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { subDays } from "date-fns";
-import { CircleAlertIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../login/loginRedirect";
+import { Changelog } from "./_components/Changelog";
 import { InviteTeamMembersButton } from "./_components/invite-team-members-button";
 import {
   type ProjectWithAnalytics,
@@ -52,20 +52,30 @@ export default async function Page(props: {
         </div>
       </div>
 
-      <div className="container flex grow flex-col gap-6 pt-8 pb-20">
-        <Alert variant={"info"}>
-          <CircleAlertIcon className="h-4 w-4" />
-          <AlertTitle>Looking for Engines?</AlertTitle>
-          <AlertDescription>
-            Engines, contracts, project settings, and more are now managed
-            within projects. Open or create a project to access them.
-          </AlertDescription>
-        </Alert>
-        <TeamProjectsPage
-          projects={projectsWithTotalWallets}
-          team={team}
-          client={client}
-        />
+      <div className="container flex grow flex-col gap-4 lg:flex-row">
+        {/* left */}
+        <div className="flex grow flex-col gap-6 pt-8 lg:pb-20">
+          <DismissibleAlert
+            title="Looking for Engines?"
+            description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
+            localStorageId={`${team.id}-engines-alert`}
+          />
+
+          <TeamProjectsPage
+            projects={projectsWithTotalWallets}
+            team={team}
+            client={client}
+          />
+        </div>
+
+        {/* right */}
+        <div className="w-full px-4 py-8 lg:w-[300px]">
+          <h2 className="mb-3 font-semibold text-2xl tracking-tight">
+            Changelog
+          </h2>
+
+          <Changelog />
+        </div>
       </div>
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx

@@ -26,7 +26,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import { formatDate } from "date-fns";
-import { PlusIcon, SearchIcon } from "lucide-react";
+import { ArrowDownNarrowWideIcon, PlusIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -251,10 +251,10 @@ function SearchInput(props: {
   return (
     <div className="relative grow">
       <Input
-        placeholder="Search Projects by name or Client ID"
+        placeholder="Project name or Client ID"
         value={props.value}
         onChange={(e) => props.onValueChange(e.target.value)}
-        className="bg-background pl-9 lg:w-[400px]"
+        className="bg-background pl-9 lg:w-[320px]"
       />
       <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
     </div>
@@ -298,8 +298,8 @@ function SelectBy(props: {
       }}
     >
       <SelectTrigger className="min-w-[200px] bg-background capitalize">
-        <div className="flex items-center gap-1.5">
-          <span className="text-muted-foreground">Sort by</span>
+        <div className="flex items-center gap-2">
+          <ArrowDownNarrowWideIcon className="size-4 text-muted-foreground" />
           {valueToLabel[props.value]}
         </div>
       </SelectTrigger>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx

@@ -1,15 +1,14 @@
 "use client";
 
+import { DismissibleAlert } from "@/components/blocks/dismissible-alert";
 import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import {
   TrackedLinkTW,
   TrackedUnderlineLink,
 } from "@/components/ui/tracked-link";
 import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
-import { useLocalStorage } from "hooks/useLocalStorage";
 import { ArrowRightIcon } from "lucide-react";
-import { XIcon } from "lucide-react";
 import { AAFooter } from "./AAFooterSection";
 
 const TRACKING_CATEGORY = "smart-wallet";
@@ -100,27 +99,12 @@ function GasCreditAlert(props: {
   teamSlug: string;
   projectId: string;
 }) {
-  const [isVisible, setIsVisible] = useLocalStorage(
-    `gas-credit-${props.projectId}`,
-    true,
-    false,
-  );
-
-  if (!isVisible) return null;
-
   return (
-    <div className="relative rounded-lg border border-border bg-card p-4">
-      <Button
-        onClick={() => setIsVisible(false)}
-        className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
-        aria-label="Close alert"
-        variant="ghost"
-      >
-        <XIcon className="size-5" />
-      </Button>
-      <div>
-        <h2 className="mb-0.5 font-semibold">OP Gas Credit Program</h2>
-        <p className="text-muted-foreground text-sm">
+    <DismissibleAlert
+      localStorageId={`${props.projectId}-gas-credit-alert`}
+      title="OP Gas Credit Program"
+      description={
+        <>
           Redeem credits towards gas Sponsorship. <br className="lg:hidden" />
           <TrackedUnderlineLink
             target="_blank"
@@ -130,22 +114,26 @@ function GasCreditAlert(props: {
           >
             Learn More
           </TrackedUnderlineLink>
-        </p>
-
-        <div className="mt-4 flex items-center gap-4">
-          <Button asChild variant="outline" size="sm" className="bg-background">
-            <TrackedLinkTW
-              href={`/team/${props.teamSlug}/~/settings/credits`}
-              target="_blank"
-              className="gap-2"
-              category={TRACKING_CATEGORY}
-              label="claim-credits"
+          <div className="mt-4 flex items-center gap-4">
+            <Button
+              asChild
+              variant="outline"
+              size="sm"
+              className="bg-background"
             >
-              Claim your credits <ArrowRightIcon className="size-4" />
-            </TrackedLinkTW>
-          </Button>
-        </div>
-      </div>
-    </div>
+              <TrackedLinkTW
+                href={`/team/${props.teamSlug}/~/settings/credits`}
+                target="_blank"
+                className="gap-2"
+                category={TRACKING_CATEGORY}
+                label="claim-credits"
+              >
+                Claim your credits <ArrowRightIcon className="size-4" />
+              </TrackedLinkTW>
+            </Button>
+          </div>
+        </>
+      }
+    />
   );
 }