Public user profiles 1.0 (#1043)

* Empty commit to jumpstart PR

* Add support for new “enablePublicProfile” privacy flag

* Add first draft of people directory

* Improve breadcrumbs

* Add navigation menu item for People

* Add page intro placeholder

* Link user profile card to detail page

* Add basic user profile details

* Add project engagement section to user profile

* User shared UserProfileCard for team engagements

* Add links to user profiles where appropriate

* Add basic Slack contact button

* Display user locations in hashtags

* Filter out the #Other category from hashtags

* Improve user profile responsivity

* Display user bio on profile if available

* Hide non-public user profiles

* feat: opt-in public profile in user registration

* Toggle public profile visibility in user settings (#1057)

* add checkbox to enable public profile, adjust texts

* delete console log

* adjust copy to less formal

* Trivial type refactoring

* Improve shared button styles

* Add user bio during registration (#1060)

* refactor: move user profile related types to model definition

* fix: unify public profile checkbox description

* fix: unify input labels

So that each input and its corresponding label looks the same.

* refactor: extract checkbox into its own component

* feat: short bio in user profile registration

* Improve private profile layout

* Tighten the withDefault higher-order decoder

* Improve user avatar handling

* Update /profile/me API endpoint to also accept bio changes

* Update bio in user profile (#1062)

* add text field with bio, add possibility to change bio

* use clsx, refactoring

* Fix updateUserProfile to also save bio changes

* Limit textarea width, set default height

* refactoring based on review

---------

Co-authored-by: Tomáš Znamenáček <[email protected]>

* Move BioState type to usage site

* Improve user profile wording

* Refactor user profile tab into sections

* Merge district selection into user profile tab

* Improve copy

* Merge privacy settings into profile page

* Add link to user profile to profile settings page

* Improve profile link display logic

* Honor project engagement opt-out on public user profile

* Add Edit button to public user profile

* Remove unused import

* Improve copy

* Rename /profile/* to /account/*

* Only display e-mail contact if we have a public contact address

* Add UI to change public contact e-mail in user profile, fixes #1064

* Update copy

* Improve checkbox logic & copy

* Add error logging to user profile fetch function

* Be more precise in copy about registration e-mail

* Add professional profile link to user profile page

* Improve registration form copy

* Improve registration form copy

---------

Co-authored-by: Jakub Drahoš <[email protected]>
Co-authored-by: laurabaluchova <[email protected]>

app/SessionToolbar.tsx

@@ -8,6 +8,7 @@ import { type Session } from "next-auth";
 import { signIn, useSession } from "next-auth/react";
 
 import { Route } from "~/src/routing";
+import { defaultAvatarUrl } from "~/src/utils";
 
 export const SessionToolbar = () => {
   const { data: session, status } = useSession();
@@ -21,9 +22,7 @@ export const SessionToolbar = () => {
 };
 
 const SignedInButtons = ({ session }: { session: Session }) => {
-  const avatarImage =
-    session.user?.image ??
-    "https://data.cesko.digital/people/generic-profile.jpg";
+  const avatarImage = session.user?.image ?? defaultAvatarUrl;
   const avatarTitle =
     session.user?.name && session.user?.email
       ? `${session.user?.name} (${session.user?.email})`
@@ -32,18 +31,18 @@ const SignedInButtons = ({ session }: { session: Session }) => {
   return (
     <div className="flex flex-row gap-7 text-base md:-mb-[3px]">
       <Link
-        href={Route.userProfile}
+        href={Route.account}
         className="typo-link flex flex-row-reverse items-center gap-4 lg:flex-row"
       >
         <Image
           className="rounded-full bg-gray shadow"
           src={avatarImage}
-          alt={session.user?.name ?? "Uživatelský profil"}
+          alt={session.user?.name ?? "Můj účet"}
           title={avatarTitle}
           width={30}
           height={30}
         />
-        Můj profil
+        Můj účet
       </Link>
     </div>
   );

app/SiteNav.tsx

@@ -29,6 +29,11 @@ export const SecondLevelNav = () => {
           Akce
         </Link>
       </li>
+      <li>
+        <Link href={Route.people} className={activeOnPrefix("/people")}>
+          Lidé
+        </Link>
+      </li>
     </ul>
   );
 };

app/profile/NewsletterTab.tsx → app/account/NewsletterTab.tsx

@@ -22,7 +22,7 @@ type Props = { userMail: string };
 
 export const NewsletterTab = ({ userMail }: Props) => {
   const { model, setModel, updating } = useJSONResource({
-    url: "/profile/newsletters",
+    url: "/account/newsletters",
     decoder: decodeNewsletterPreferences,
   });
 

app/profile/NotificationsTab.tsx → app/account/NotificationsTab.tsx

@@ -12,7 +12,7 @@ type Props = {
 
 export const NotificationsTab = ({ userEmail }: Props) => {
   const { model, updating, setModel } = usePatchedJSONResource<UserProfile>({
-    url: "/profile/me",
+    url: "/account/me",
     writeKeys: ["notificationFlags"],
   });
 

app/profile/SignedInPage.tsx → app/account/SignedInPage.tsx

@@ -6,18 +6,16 @@ import SlackIcon from "~/components/icons/slack";
 import { SimpleTabBar } from "~/components/TabBar";
 import { Route } from "~/src/routing";
 
-import { MapTab } from "./MapTab";
 import { NewsletterTab } from "./NewsletterTab";
 import { NotificationsTab } from "./NotificationsTab";
-import { PrivacyTab } from "./PrivacyTab";
-import { SkillsTab } from "./SkillsTab";
+import { UserProfileTab } from "./UserProfileTab";
 
 export const SignedInPage = ({ session }: { session: Session }) => {
   const tabs = [
     {
-      title: "Dovednosti",
-      hash: "skills",
-      content: <SkillsTab />,
+      title: "Profil",
+      hash: "profile",
+      content: <UserProfileTab />,
     },
     {
       title: "Newslettery",
@@ -29,16 +27,6 @@ export const SignedInPage = ({ session }: { session: Session }) => {
       hash: "notifications",
       content: <NotificationsTab userEmail={session.user!.email!} />,
     },
-    {
-      title: "Mapa komunity",
-      hash: "community-map",
-      content: <MapTab />,
-    },
-    {
-      title: "Soukromí",
-      hash: "privacy",
-      content: <PrivacyTab />,
-    },
     {
       title: "Nástroje",
       hash: "tools",
@@ -47,7 +35,7 @@ export const SignedInPage = ({ session }: { session: Session }) => {
   ];
   return (
     <section>
-      <h1 className="typo-title mb-4 mt-7">{session.user?.name}</h1>
+      <h1 className="typo-title mb-4 mt-7">Můj účet</h1>
       <SimpleTabBar items={tabs} />
     </section>
   );

app/profile/SignedOutPage.tsx → app/account/SignedOutPage.tsx

@@ -8,7 +8,7 @@ import { Route } from "~/src/routing";
 export const SignedOutPage = () => {
   const handleSignIn = async () => {
     trackCustomEvent("SignIn");
-    await signIn(undefined, { callbackUrl: Route.userProfile });
+    await signIn(undefined, { callbackUrl: Route.account });
   };
   return (
     <section className="m-auto mt-10 flex max-w-[80ex] flex-col gap-7 rounded-2xl border-2 border-gray p-7 pb-10 text-center lg:mt-20">