Add shortcut to publish user profile (#1140)

* add profile visibility button and checkbox to /people

* remove checkbox if unauthenticated

* adjust checbox removal if unauthenticated

* remove content jumping, add note about delay, remove button option

app/people/ProfileVisibilityPrefs.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { signIn, useSession } from "next-auth/react";
+
+import { usePatchedJSONResource } from "~/components/hooks/resource";
+import { type UserProfile } from "~/src/data/user-profile";
+import { setFlag } from "~/src/flags";
+import { Route } from "~/src/routing";
+
+export const ProfileVisibilityPrefs = () => {
+  const { status: sessionStatus } = useSession();
+  return (
+    <div className="mb-10">
+      {sessionStatus === "loading" && <LoadingSpinner />}
+      {sessionStatus === "authenticated" && <ProfileVisibilityButton />}
+      {sessionStatus === "unauthenticated" && <SignedOutText />}
+    </div>
+  );
+};
+
+const Note = ({ children }: { children: React.ReactNode }) => (
+  <p className="typo-caption ml-6 mt-1 text-balance">{children}</p>
+);
+
+const ProfileVisibilityButton = () => {
+  const {
+    model: model,
+    updating,
+    setModel,
+  } = usePatchedJSONResource<UserProfile>({
+    url: "/account/me",
+    writeKeys: ["privacyFlags"],
+  });
+
+  return (
+    <div>
+      <label className="mb-1 flex items-center">
+        <input
+          checked={!!model?.privacyFlags.includes("enablePublicProfile")}
+          type="checkbox"
+          className="mr-3"
+          disabled={updating}
+          onChange={(e) => {
+            if (model) {
+              setModel({
+                ...model,
+                privacyFlags: setFlag(
+                  model.privacyFlags,
+                  "enablePublicProfile",
+                  e.target.checked,
+                ),
+              });
+            }
+          }}
+        ></input>
+        Chci mít veřejný profil
+      </label>
+      <Note>Může pár minut trvat, než se tato změna projeví.</Note>
+    </div>
+  );
+};
+
+const LoadingSpinner = () => (
+  <>
+    <div className="w-[50ex] animate-pulse rounded-lg bg-gray indent-[-9999px]">
+      Načítám…
+    </div>
+    <Note>Načítám…</Note>
+  </>
+);
+
+const SignedOutText = () => (
+  <>
+    <div>
+      Tip:{" "}
+      <a
+        className="typo-link"
+        onClick={(e) => {
+          e.preventDefault();
+          return signIn();
+        }}
+      >
+        Když se přihlásíš
+      </a>
+      , můžeš tady zveřejnit svůj profil.
+    </div>
+    <Note>
+      <a className="typo-link" href={Route.register()}>
+        Nebo si založ nový účet
+      </a>
+      , pokud žádný nemáš.
+    </Note>
+  </>
+);

app/people/page.tsx

@@ -2,6 +2,7 @@ import { Suspense } from "react";
 import { type Metadata } from "next";
 
 import { stripNonPublicFields } from "~/app/people/matching";
+import { ProfileVisibilityPrefs } from "~/app/people/ProfileVisibilityPrefs";
 import { SearchablePeopleBox } from "~/app/people/SearchablePeopleBox";
 import { Breadcrumbs } from "~/components/Breadcrumbs";
 import { getAllUserProfiles } from "~/src/data/user-profile";
@@ -21,11 +22,13 @@ export const metadata: Metadata = {
 async function Page() {
   const profiles = await getAllUserProfiles("Public Profiles");
   const strippedProfiles = profiles.map(stripNonPublicFields);
+
   return (
     <main className="m-auto max-w-content px-7 py-20">
       <Breadcrumbs currentPage="Lidé" />
       <h1 className="typo-title mb-10 mt-7">Lidé</h1>
-      <p className="mb-10 max-w-prose">{metadata.description}</p>
+      <p className="mb-5 max-w-prose">{metadata.description}</p>
+      <ProfileVisibilityPrefs />
       <Suspense fallback="Načítám data…">
         <SearchablePeopleBox allUserProfiles={strippedProfiles} />
       </Suspense>