Add FAQ page with Plus Server info

.gitignore

@@ -8,4 +8,6 @@ node_modules
 db*.sqlite3*
 
 /cypress/videos
-/cypress/screenshots
+/cypress/screenshots
+
+.DS_Store

app/routes/faq.tsx

@@ -0,0 +1,38 @@
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import { Main } from "~/components/Main";
+import styles from "~/styles/faq.css";
+import { makeTitle } from "~/utils/remix";
+
+export const meta: MetaFunction = () => {
+  return {
+    title: makeTitle("FAQ"),
+    description: "Frequently asked questions",
+  };
+};
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export default function FAQPage() {
+  return (
+    <Main>
+      <details className="faq__details">
+        <summary className="faq__summary">What is the Plus Server?</summary>
+        <p>
+          Plus Server is a Discord server for high level western players to look
+          for people to play with and against. It was founded on September 2017.
+          Divided into three tiers of which +1 is the highest. You get access
+          when a member of the server suggests you and you pass the monthly
+          voting.
+        </p>
+        <p>
+          In the voting you get a percentage based on your result. 0% would mean
+          everyone who participated in the voting downvoted you while 100% would
+          be the opposite. 50% is required to pass the voting. If a member gets
+          a score below 50% they get demoted a tier or in the case of +3 kicked.
+        </p>
+      </details>
+    </Main>
+  );
+}

app/routes/plus/suggestions.tsx

@@ -18,7 +18,7 @@ import { nextNonCompletedVoting } from "~/modules/plus-server";
 import { db } from "~/db";
 import type * as plusSuggestions from "~/db/models/plusSuggestions.server";
 import type { PlusSuggestion, User } from "~/db/types";
-import { requireUser, useUser } from "~/modules/auth";
+import { getUser, requireUser, useUser } from "~/modules/auth";
 import {
   canAddCommentToSuggestionFE,
   canSuggestNewUserFE,
@@ -28,7 +28,7 @@ import {
 import { makeTitle, parseRequestFormData, validate } from "~/utils/remix";
 import { discordFullName } from "~/utils/strings";
 import { actualNumber } from "~/utils/zod";
-import { userPage } from "~/utils/urls";
+import { FAQ_PAGE, LOG_IN_URL, userPage } from "~/utils/urls";
 import { RelativeTime } from "~/components/RelativeTime";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { PLUS_TIERS } from "~/constants";
@@ -115,7 +115,13 @@ export interface PlusSuggestionsLoaderData {
 }
 
 export const loader: LoaderFunction = async ({ request }) => {
-  const user = await requireUser(request);
+  const user = await getUser(request);
+
+  if (!user) {
+    return json<PlusSuggestionsLoaderData>({
+      suggestedForTiers: [],
+    });
+  }
 
   return json<PlusSuggestionsLoaderData>({
     suggestions: db.plusSuggestions.findVisibleForUser({
@@ -139,6 +145,23 @@ export default function PlusSuggestionsPage() {
 
   useSetSelectedTierForFirstSuggestEffect({ tierVisible, setTierVisible });
 
+  if (!user) {
+    return (
+      <form className="text-sm" action={LOG_IN_URL} method="post">
+        <p className="button-text-paragraph">
+          To view your suggestion status{" "}
+          <Button type="submit" variant="minimal">
+            log in
+          </Button>
+        </p>
+        <p className="mt-2">
+          Not sure what the Plus Server is about? Read the{" "}
+          <Link to={FAQ_PAGE}>FAQ</Link>
+        </p>
+      </form>
+    );
+  }
+
   if (!data.suggestions) {
     return <SuggestedForInfo />;
   }

app/styles/common.css

@@ -5,6 +5,9 @@
 
 .button-text-paragraph > button {
   font-size: var(--fonts-md);
+  font-weight: var(--semi-bold);
+  font-size: var(--fonts-sm);
+  margin-block-end: 0.125rem;
 }
 
 .sub-nav__container {

app/styles/faq.css

@@ -0,0 +1,12 @@
+.faq__summary {
+  background-color: var(--bg-lighter);
+  padding: var(--s-3);
+  border-radius: var(--rounded);
+  font-size: var(--fonts-lg);
+  font-weight: var(--bold);
+}
+
+.faq__details > p {
+  padding-block: var(--s-3);
+  margin-inline: var(--s-4);
+}

app/utils/urls.ts

@@ -6,6 +6,7 @@ export const LOG_IN_URL = "/auth";
 export const LOG_OUT_URL = "/auth/logout";
 export const PLUS_SUGGESTIONS_PAGE = "/plus/suggestions";
 export const ADMIN_PAGE = "/admin";
+export const FAQ_PAGE = "/faq";
 export const BADGES_PAGE = "/badges";
 export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";