From 4d8bafb8c3ed62ad97863dde4548e2a76cf5edb7 Mon Sep 17 00:00:00 2001
From: Niels Mokkenstorm <niels@riotbyte.com>
Date: Sat, 30 May 2026 12:23:07 +0200
Subject: [PATCH] feat(cvg-81): mount ProfileSwitcher in Navbar + profile
 picker on CreateCVPage (#72)

---
 apps/client/src/components/Navbar.tsx      |  2 ++
 apps/client/src/pages/cvs/CreateCVPage.tsx | 41 ++++++++++++++++++++--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/components/Navbar.tsx b/apps/client/src/components/Navbar.tsx
index c1d79c0..4535d50 100644
--- a/apps/client/src/components/Navbar.tsx
+++ b/apps/client/src/components/Navbar.tsx
@@ -1,5 +1,6 @@
 import { ViewTransitionLink } from "@cv/routing";
 import { useLocation } from "react-router-dom";
+import { ProfileSwitcher } from "@/features/profile/components/ProfileSwitcher";
 import { cn } from "@/utils/cn";
 import type { NavLink } from "./navLinks";
 import { UserProfileDrawer } from "./UserProfileDrawer";
@@ -48,6 +49,7 @@ export const Navbar = ({ user, onLogout, links }: NavbarProps) => {
           </div>
 
           <div className="flex items-center gap-2">
+            <ProfileSwitcher />
             <UserProfileDrawer user={user} onLogout={onLogout} />
           </div>
         </div>
diff --git a/apps/client/src/pages/cvs/CreateCVPage.tsx b/apps/client/src/pages/cvs/CreateCVPage.tsx
index 9cf8931..bfa66d0 100644
--- a/apps/client/src/pages/cvs/CreateCVPage.tsx
+++ b/apps/client/src/pages/cvs/CreateCVPage.tsx
@@ -2,11 +2,12 @@ import { Button, Page, Placeholder, TextInput, useToast } from "@cv/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useActiveProfileId } from "@/contexts/ProfileProvider";
+import { useActiveProfileId, useProfile } from "@/contexts/ProfileProvider";
 import { useCreateCvMutation, useCvTemplatesQuery } from "@/generated/graphql";
 
 const CreateCVPage = () => {
-  const profileId = useActiveProfileId();
+  const activeProfileId = useActiveProfileId();
+  const { profiles } = useProfile();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { data: templatesData, isLoading: templatesLoading } =
@@ -17,6 +18,7 @@ const CreateCVPage = () => {
   const [formData, setFormData] = useState({
     title: "",
     templateId: "",
+    profileId: activeProfileId,
     isPublic: false,
   });
 
@@ -37,7 +39,7 @@ const CreateCVPage = () => {
     try {
       const result = await createCV({
         input: {
-          profileId,
+          profileId: formData.profileId,
           title: formData.title,
           templateId: formData.templateId,
         },
@@ -88,6 +90,39 @@ const CreateCVPage = () => {
             required
           />
 
+          {profiles.length > 1 && (
+            <div className="mt-4">
+              <label
+                htmlFor="cv-profile-select"
+                className="mb-1 block text-sm font-medium text-ctp-text"
+              >
+                Profile
+              </label>
+              <select
+                id="cv-profile-select"
+                value={formData.profileId}
+                onChange={(e) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    profileId: e.target.value,
+                  }))
+                }
+                className="w-full rounded-md border border-ctp-surface1 bg-ctp-base px-3 py-2 text-sm text-ctp-text focus:border-ctp-blue focus:outline-none focus:ring-1 focus:ring-ctp-blue"
+              >
+                {profiles.map((profile) => (
+                  <option key={profile.id} value={profile.id}>
+                    {profile.name}
+                    {profile.id === activeProfileId ? " (active)" : ""}
+                  </option>
+                ))}
+              </select>
+              <p className="mt-1 text-xs text-ctp-subtext0">
+                Defaults to your active profile. CVs belong to one profile and
+                pull their job experience / education from it.
+              </p>
+            </div>
+          )}
+
           <div className="mt-4">
             <label className="flex items-center gap-2 cursor-pointer">
               <input
-- 
2.51.2