Add /plus link to menu

app/components/layout/Menu.tsx

@@ -7,7 +7,6 @@ import { PatreonIcon } from "../icons/Patreon";
 import { TwitterIcon } from "../icons/Twitter";
 import DrawingSection from "./DrawingSection";
 import * as React from "react";
-import { navItemsGrouped } from "~/constants";
 import { useOnClickOutside } from "~/hooks/useOnClickOutside";
 import {
   SENDOU_INK_DISCORD_URL,
@@ -16,8 +15,10 @@ import {
   SENDOU_INK_TWITTER_URL,
 } from "~/utils/urls";
 import { layoutIcon } from "~/utils/images";
+import { useUser } from "~/hooks/useUser";
 
 export function Menu({ close }: { close: () => void }) {
+  const user = useUser();
   const ref = React.useRef(null);
   useOnClickOutside(ref, close);
 
@@ -40,7 +41,7 @@ export function Menu({ close }: { close: () => void }) {
           </Button>
         </div>
         <nav className="menu__nav">
-          {navItemsGrouped
+          {navItemsGrouped(Boolean(user?.plusTier))
             .flatMap((group) => group.items)
             .map((navItem) => (
               <Link
@@ -79,3 +80,62 @@ export function Menu({ close }: { close: () => void }) {
     </div>
   );
 }
+
+export function navItemsGrouped(isPlusMember: boolean): {
+  title: string;
+  items: {
+    name: string;
+    disabled: boolean;
+    displayName?: string;
+    url?: string;
+  }[];
+}[] {
+  return [
+    {
+      title: "builds",
+      items: [
+        { name: "builds", disabled: true },
+        { name: "gear", disabled: true },
+        { name: "analyzer", disabled: true },
+      ],
+    },
+    {
+      title: "play",
+      items: [
+        { name: "calendar", disabled: true },
+        {
+          name: "sendouq",
+          disabled: false,
+          displayName: "SendouQ",
+          url: "play",
+        },
+        { name: "leaderboards", disabled: false },
+      ],
+    },
+    {
+      title: "tools",
+      items: [
+        { name: "planner", disabled: true },
+        { name: "rotations", disabled: true },
+        { name: "top 500", disabled: true },
+      ],
+    },
+    {
+      title: "misc",
+      items: [
+        { name: "badges", disabled: true },
+        { name: "links", disabled: true },
+        ...(isPlusMember
+          ? [
+              {
+                name: "plus",
+                displayName: "Plus Server",
+                url: "plus/suggestions",
+                disabled: false,
+              },
+            ]
+          : []),
+      ],
+    },
+  ];
+}

app/components/layout/MobileMenu.tsx

@@ -1,7 +1,8 @@
 import clsx from "clsx";
 import { Fragment } from "react";
 import { Link } from "@remix-run/react";
-import { navItemsGrouped } from "~/constants";
+import { useUser } from "~/hooks/useUser";
+import { navItemsGrouped } from "./Menu";
 
 export function MobileMenu({
   expanded,
@@ -10,13 +11,15 @@ export function MobileMenu({
   expanded: boolean;
   closeMenu: () => void;
 }) {
+  const user = useUser();
+
   return (
     <div className={clsx("layout__mobile-nav", { expanded })}>
       <div className="layout__mobile-nav__top-action">
         {/* <SearchInput /> */}
       </div>
       <div className="layout__mobile-nav__links">
-        {navItemsGrouped.map((navGroup) => (
+        {navItemsGrouped(Boolean(user?.plusTier)).map((navGroup) => (
           <Fragment key={navGroup.title}>
             <div className="layout__mobile-nav__group-title">
               {navGroup.title}

app/constants.ts

@@ -5,47 +5,4 @@ export const USER_BIO_MAX_LENGTH = DISCORD_MESSAGE_MAX_LENGTH;
 export const PlUS_SUGGESTION_FIRST_COMMENT_MAX_LENGTH = 500;
 export const PlUS_SUGGESTION_COMMENT_MAX_LENGTH = TWEET_LENGTH_MAX_LENGTH;
 
-export const navItemsGrouped: {
-  title: string;
-  items: {
-    name: string;
-    disabled: boolean;
-    displayName?: string;
-    url?: string;
-  }[];
-}[] = [
-  {
-    title: "builds",
-    items: [
-      { name: "builds", disabled: true },
-      { name: "gear", disabled: true },
-      { name: "analyzer", disabled: true },
-    ],
-  },
-  {
-    title: "play",
-    items: [
-      { name: "calendar", disabled: true },
-      { name: "sendouq", disabled: false, displayName: "SendouQ", url: "play" },
-      { name: "leaderboards", disabled: false },
-    ],
-  },
-  {
-    title: "tools",
-    items: [
-      { name: "planner", disabled: true },
-      { name: "rotations", disabled: true },
-      { name: "top 500", disabled: true },
-    ],
-  },
-  {
-    title: "misc",
-    items: [
-      { name: "badges", disabled: true },
-      { name: "links", disabled: true },
-    ],
-  },
-  // xxx: plus server if member
-];
-
 export const PLUS_TIERS = [1, 2, 3];

app/routes/plus/suggestions.tsx

@@ -253,6 +253,7 @@ function SuggestedUser({
 
   invariant(data.suggestions);
 
+  // xxx: name should link to user page
   return (
     <div className="stack md">
       <div className="plus__suggested-user-info">