Add a section sidebar to the account page

The account page stacked nine sections in one column. A sticky left nav on large screens (and a compact jump list on smaller ones) scrolls to each section and highlights the one in view.

Co-authored-by: John Jeong <ComputelessComputer@users.noreply.github.com>

Author: cursoragent

apps/web/src/routes/_view/app/-account-nav.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+
+import { cn } from "@anlg/utils";
+
+export const ACCOUNT_SECTIONS = [
+  { id: "profile", label: "Profile" },
+  { id: "referrals", label: "Refer friends" },
+  { id: "plan", label: "Your plan" },
+  { id: "integrations", label: "Integrations" },
+  { id: "devices", label: "Synced devices" },
+  { id: "shares", label: "Shared notes" },
+  { id: "api-keys", label: "Cloud API keys" },
+  { id: "session", label: "Session controls" },
+  { id: "danger", label: "Danger area" },
+] as const;
+
+export function useActiveAccountSection() {
+  const [activeId, setActiveId] = useState<string>(ACCOUNT_SECTIONS[0].id);
+
+  useEffect(() => {
+    const elements = ACCOUNT_SECTIONS.map((section) =>
+      document.getElementById(section.id),
+    ).filter((element): element is HTMLElement => element !== null);
+
+    if (elements.length === 0) {
+      return;
+    }
+
+    const visibleIds = new Set<string>();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            visibleIds.add(entry.target.id);
+          } else {
+            visibleIds.delete(entry.target.id);
+          }
+        }
+
+        const next = ACCOUNT_SECTIONS.find((section) =>
+          visibleIds.has(section.id),
+        );
+        if (next) {
+          setActiveId(next.id);
+        }
+      },
+      { rootMargin: "-20% 0px -65% 0px", threshold: [0, 0.25, 0.5] },
+    );
+
+    for (const element of elements) {
+      observer.observe(element);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return activeId;
+}
+
+export function AccountNav({ activeId }: { activeId: string }) {
+  return (
+    <nav aria-label="Account sections">
+      <ul
+        className={cn([
+          "flex gap-1 overflow-x-auto px-5",
+          "lg:flex-col lg:overflow-visible lg:px-0",
+        ])}
+      >
+        {ACCOUNT_SECTIONS.map((section) => {
+          const isActive = section.id === activeId;
+
+          return (
+            <li
+              key={section.id}
+              className={cn([
+                "shrink-0",
+                section.id === "danger" &&
+                  "lg:mt-2 lg:border-t lg:border-[#ede7dc] lg:pt-2",
+              ])}
+            >
+              <a
+                href={`#${section.id}`}
+                aria-current={isActive ? "true" : undefined}
+                className={cn([
+                  "block rounded-full px-3 py-1.5 text-sm whitespace-nowrap transition-colors",
+                  isActive
+                    ? "bg-[#fff0b3] font-medium text-[#181613]"
+                    : "text-[#756b5d] hover:text-[#181613]",
+                  !isActive && section.id === "danger" && "hover:text-red-700",
+                ])}
+              >
+                {section.label}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

apps/web/src/routes/_view/app/account.tsx

@@ -17,6 +17,11 @@ import { ApiKeysSection } from "./-account-api-keys";
 import { DangerAreaSection } from "./-account-danger";
 import { DevicesSection } from "./-account-devices";
 import { IntegrationsSection } from "./-account-integrations";
+import {
+  AccountNav,
+  ACCOUNT_SECTIONS,
+  useActiveAccountSection,
+} from "./-account-nav";
 import { PlanSection } from "./-account-plan";
 import { ProfileInfoSection } from "./-account-profile-info";
 import { ReferralSection } from "./-account-referrals";
@@ -47,6 +52,7 @@ function Component() {
   const search = Route.useSearch();
   const { identify: identifyPosthog, track } = useAnalytics();
   const queryClient = useQueryClient();
+  const activeSectionId = useActiveAccountSection();
 
   useEffect(() => {
     if (!search.success && search.trial !== "started") {
@@ -103,7 +109,7 @@ function Component() {
 
   return (
     <main className="min-h-screen bg-white text-[#181613]">
-      <div className="mx-auto w-full max-w-[700px] px-5 pt-10 pb-16 md:px-8 md:pt-12 md:pb-24">
+      <div className="mx-auto w-full max-w-[700px] px-5 pt-10 pb-16 md:px-8 md:pt-12 md:pb-24 lg:max-w-[980px]">
         <Link to="/" aria-label="Anarlog home" className="inline-flex">
           <AnarlogLogo className="h-8 w-auto" />
         </Link>
@@ -120,89 +126,69 @@ function Component() {
           </h1>
         </header>
 
-        <div className="mt-14 flex flex-col gap-14 md:mt-16">
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Profile
-            </h2>
-            <div className="mt-6">
+        <div className="isolate mt-10 grid items-start gap-8 md:mt-12 lg:mt-16 lg:grid-cols-[12rem_minmax(0,1fr)] lg:gap-x-12 lg:gap-y-0">
+          <div className="sticky top-0 z-10 -mx-5 border-b border-[#ede7dc] bg-white py-3 md:-mx-8 lg:top-10 lg:mx-0 lg:border-0 lg:bg-transparent lg:py-0">
+            <AccountNav activeId={activeSectionId} />
+          </div>
+
+          <div className="flex min-w-0 flex-col gap-14">
+            <AccountSection id="profile">
               <ProfileInfoSection email={user?.email} />
-            </div>
-          </section>
-
-          <section id="referrals" className="scroll-mt-8">
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Refer friends
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="referrals">
               <ReferralSection ineligible={search.referral === "ineligible"} />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Your plan
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="plan">
               <PlanSection perk={search.perk} />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Integrations
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="integrations">
               <IntegrationsSection />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Synced devices
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="devices">
               <DevicesSection />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Shared notes
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="shares">
               <SharedNotesSection />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Cloud API keys
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="api-keys">
               <ApiKeysSection />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Session controls
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="session">
               <AccountAccessSection />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
-              Danger area
-            </h2>
-            <div className="mt-6">
+            </AccountSection>
+
+            <AccountSection id="danger">
               <DangerAreaSection />
-            </div>
-          </section>
+            </AccountSection>
+          </div>
         </div>
       </div>
     </main>
   );
 }
+
+function AccountSection({
+  id,
+  children,
+}: {
+  id: (typeof ACCOUNT_SECTIONS)[number]["id"];
+  children: React.ReactNode;
+}) {
+  const title = ACCOUNT_SECTIONS.find((section) => section.id === id)?.label;
+
+  return (
+    <section id={id} className="scroll-mt-20 lg:scroll-mt-10">
+      <h2 className="font-hand text-3xl leading-none font-semibold text-[#756b5d]">
+        {title}
+      </h2>
+      <div className="mt-6">{children}</div>
+    </section>
+  );
+}