Create workspace overlay

.vscode/settings.json

@@ -10,15 +10,15 @@
   },
   "//classRegex": "allow variables to use tailwind intellisense https://stackoverflow.com/a/73655079",
   "tailwindCSS.experimental.classRegex": [
-    ["Classes \\=([^;]*);", "'([^']*)'"],
-    ["Classes \\=([^;]*);", "\"([^\"]*)\""],
-    ["Classes \\=([^;]*);", "\\`([^\\`]*)\\`"],
-    ["Class \\=([^;]*);", "'([^']*)'"],
-    ["Class \\=([^;]*);", "\"([^\"]*)\""],
-    ["Class \\=([^;]*);", "\\`([^\\`]*)\\`"],
-    ["className: '([^']*)'"],
-    ["className: \"([^\"]*)\""],
-    ["className: `([^`]*)`"]
+    ["(?:Class|Classes|className|ClassName) \\=([^;]*);", "'([^']*)'"],
+    ["(?:Class|Classes|className|ClassName) \\=([^;]*);", "\"([^\"]*)\""],
+    ["(?:Class|Classes|className|ClassName) \\=([^;]*);", "\\`([^\\`]*)\\`"],
+    ["(?:Class|Classes|className|ClassName): '([^']*)'"],
+    ["(?:Class|Classes|className|ClassName): \"([^\"]*)\""],
+    ["(?:Class|Classes|className|ClassName): `([^`]*)`"],
+    ["(?:Class|Classes|className|ClassName)\\='([^']*)'"],
+    ["(?:Class|Classes|className|ClassName)\\=\"([^\"]*)\""],
+    ["(?:Class|Classes|className|ClassName)\\=`([^`]*)`"]
   ],
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "[prisma]": {

src/pages/index.page.tsx

@@ -21,43 +21,43 @@ const Home: NextPage = () => {
 
       <div className="flex w-full flex-col divide-y">
         {/* overflow-hidden to keep the background image from going into other sections */}
-        <div className="flex justify-center overflow-hidden odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center overflow-hidden odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <Headline />
           </div>
         </div>
 
-        <div className="flex justify-center odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <CoreIdeasSection />
           </div>
         </div>
 
-        <div className="flex justify-center odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <UseCasesSection />
           </div>
         </div>
 
-        <div className="flex justify-center odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <FeaturesSection />
           </div>
         </div>
 
-        <div className="flex justify-center odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <ImprovingSection />
           </div>
         </div>
 
-        <div className="flex justify-center odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <ConcludingSection />
           </div>
         </div>
 
-        <div className="flex justify-center odd:bg-paper-main even:bg-gray-50">
+        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <Footer />
           </div>

src/web/common/components/Header/Logo.tsx

@@ -0,0 +1,37 @@
+import { Link as MuiLink } from "@mui/material";
+import Image from "next/image";
+
+import { Link } from "@/web/common/components/Link";
+import favicon from "~/public/favicon.png";
+
+interface Props {
+  className?: string;
+  titleClassName?: string;
+}
+
+export const Logo = ({ className, titleClassName }: Props) => {
+  return (
+    <div className={"relative flex" + (className ? ` ${className}` : "")}>
+      <Link href="/" className="flex items-center gap-2" underline="none">
+        {/* use styling to set width and height instead of Image props because otherwise this throws a warning about only having height or width set */}
+        {/* no idea why specifically this favicon throws this warning, and other Image-links in Header don't. */}
+        <Image src={favicon} alt="home" className="size-8" />
+        <span
+          className={
+            "text-xl font-medium text-black" + (titleClassName ? ` ${titleClassName}` : "")
+          }
+        >
+          Ameliorate
+        </span>
+      </Link>
+      <MuiLink
+        href="https://ameliorate.app/docs/release-status"
+        variant="caption"
+        underline="hover"
+        className="absolute -top-0.5 left-0.5 rotate-12 text-text-primary"
+      >
+        Alpha
+      </MuiLink>
+    </div>
+  );
+};

src/web/common/components/Header/ProfileButton.tsx

@@ -0,0 +1,61 @@
+import { IconButton, Tooltip } from "@mui/material";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import { NavLink } from "@/web/common/components/NavLink";
+import { ProfileIcon } from "@/web/common/components/ProfileIcon/ProfileIcon";
+import { UserDrawer } from "@/web/common/components/UserDrawer/UserDrawer";
+import { useSessionUser } from "@/web/common/hooks";
+
+export const ProfileButton = () => {
+  const { sessionUser, authUser } = useSessionUser();
+  const { asPath } = useRouter();
+
+  const [isInitialRender, setIsInitialRender] = useState(true);
+  const [isUserDrawerOpen, setIsUserDrawerOpen] = useState(false);
+
+  useEffect(() => {
+    setIsInitialRender(false);
+  }, []);
+
+  useEffect(() => {
+    // close drawers after navigating
+    setIsUserDrawerOpen(false);
+  }, [asPath]);
+
+  const isAuthed = authUser != null;
+  const isLoggedIn = sessionUser != null;
+
+  return (
+    <>
+      {!isLoggedIn && (
+        <NavLink
+          href={
+            isAuthed
+              ? "/choose-username"
+              : isInitialRender // server-client mismatch if we use `returnTo` on initial render because server doesn't have access to asPath
+                ? "/api/auth/login"
+                : `/api/auth/login?returnTo=${encodeURIComponent(asPath)}`
+          }
+        >
+          {isAuthed ? "Username" : "Log in"}
+        </NavLink>
+      )}
+
+      {isLoggedIn && (
+        <>
+          <Tooltip title="My Profile">
+            <IconButton onClick={() => setIsUserDrawerOpen(true)} className="size-8 p-0">
+              <ProfileIcon username={sessionUser.username} />
+            </IconButton>
+          </Tooltip>
+          <UserDrawer
+            username={sessionUser.username}
+            isUserDrawerOpen={isUserDrawerOpen}
+            setIsUserDrawerOpen={setIsUserDrawerOpen}
+          />
+        </>
+      )}
+    </>
+  );
+};

src/web/common/components/Header/SiteHeader.tsx

@@ -0,0 +1,72 @@
+import { AppBar, Toolbar, useTheme } from "@mui/material";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { Logo } from "@/web/common/components/Header/Logo";
+import { ProfileButton } from "@/web/common/components/Header/ProfileButton";
+import { SiteMenu } from "@/web/common/components/Header/SiteMenu";
+import { Link } from "@/web/common/components/Link";
+import { NavLink } from "@/web/common/components/NavLink";
+import { useSessionUser } from "@/web/common/hooks";
+import { discordInvite, githubRepo } from "@/web/common/urls";
+
+export const SiteHeader = () => {
+  const theme = useTheme();
+
+  // How to always populate user from the server if logged in? should be possible https://auth0.github.io/nextjs-auth0/types/client_use_user.UserProviderProps.html
+  // Without doing so, there's a brief flicker of "Log in" before it changes to "Log out" on the client
+  // Potentially use getInitialProps in _app.tsx because that's for all pages but it seems like that'd
+  // remove automatic usage of static pages https://nextjs.org/docs/pages/api-reference/functions/get-initial-props
+  const { sessionUser } = useSessionUser();
+  const { route } = useRouter();
+
+  // We want a different header for the App, so we can't rely on the root layout for header everywhere.
+  // Moving to nextjs app dir should make it easier to only use SiteHeader vs AppHeader based on
+  // route, without having to `useRouter` with hardcoded values like this.
+  if (route == "/[username]/[topicTitle]" || route == "/playground") return null;
+
+  return (
+    <AppBar position="sticky" className="overflow-x-auto border-b bg-paperShaded-main shadow-none">
+      {/* <Toolbar variant="dense"> */}
+      <Toolbar className="h-12 min-h-[auto]">
+        <div className="flex flex-1 items-center justify-between gap-4 *:shrink-0">
+          <div className="flex items-center gap-4">
+            <SiteMenu className="p-0 sm:hidden" />
+            <Logo />
+            <NavLink href="/playground" className="hidden sm:block">
+              Playground
+            </NavLink>
+            {sessionUser && (
+              <NavLink href={`/${sessionUser.username}`} className="hidden sm:block">
+                My Topics
+              </NavLink>
+            )}
+          </div>
+
+          <div className="flex items-center gap-4">
+            <NavLink href="https://ameliorate.app/docs" target="_blank" className="hidden sm:block">
+              Docs
+            </NavLink>
+            <Link href={discordInvite} target="_blank" className="hidden sm:flex">
+              <Image
+                src={`/${theme.palette.mode}/Discord-Mark.png`}
+                height={24}
+                width={32}
+                alt="discord link"
+              />
+            </Link>
+            <Link href={githubRepo} target="_blank" className="hidden sm:flex">
+              <Image
+                src={`/${theme.palette.mode}/GitHub-Mark.png`}
+                height={32}
+                width={32}
+                alt="github link"
+              />
+            </Link>
+            <ProfileButton />
+          </div>
+        </div>
+      </Toolbar>
+    </AppBar>
+  );
+};