fix: encode profile ids #280

apps/start/src/components/events/table/columns.tsx

@@ -106,7 +106,7 @@ export function useColumns() {
         if (profile) {
           return (
             <ProjectLink
-              href={`/profiles/${profile.id}`}
+              href={`/profiles/${encodeURIComponent(profile.id)}`}
               className="whitespace-nowrap font-medium hover:underline"
             >
               {getProfileName(profile)}
@@ -117,7 +117,7 @@ export function useColumns() {
         if (profileId && profileId !== deviceId) {
           return (
             <ProjectLink
-              href={`/profiles/${profileId}`}
+              href={`/profiles/${encodeURIComponent(profileId)}`}
               className="whitespace-nowrap font-medium hover:underline"
             >
               Unknown
@@ -128,7 +128,7 @@ export function useColumns() {
         if (deviceId) {
           return (
             <ProjectLink
-              href={`/profiles/${deviceId}`}
+              href={`/profiles/${encodeURIComponent(deviceId)}`}
               className="whitespace-nowrap font-medium hover:underline"
             >
               Anonymous

apps/start/src/components/notifications/table/columns.tsx

@@ -149,7 +149,7 @@ export function useColumns() {
         }
         return (
           <ProjectLink
-            href={`/profiles/${event.profileId}`}
+            href={`/profiles/${encodeURIComponent(event.profileId)}`}
             className="inline-flex min-w-full flex-none items-center gap-2"
           >
             {event.profileId}

apps/start/src/components/profiles/table/columns.tsx

@@ -20,7 +20,7 @@ export function useColumns(type: 'profiles' | 'power-users') {
         const profile = row.original;
         return (
           <ProjectLink
-            href={`/profiles/${profile.id}`}
+            href={`/profiles/${encodeURIComponent(profile.id)}`}
             className="flex items-center gap-2 font-medium"
             title={getProfileName(profile, false)}
           >

apps/start/src/components/sessions/table/columns.tsx

@@ -62,7 +62,7 @@ export function useColumns() {
         if (session.profile) {
           return (
             <ProjectLink
-              href={`/profiles/${session.profile.id}`}
+              href={`/profiles/${encodeURIComponent(session.profile.id)}`}
               className="font-medium"
             >
               {getProfileName(session.profile)}
@@ -71,7 +71,7 @@ export function useColumns() {
         }
         return (
           <ProjectLink
-            href={`/profiles/${session.profileId}`}
+            href={`/profiles/${encodeURIComponent(session.profileId)}`}
             className="font-mono font-medium"
           >
             {session.profileId}

apps/start/src/modals/event-details.tsx

@@ -232,7 +232,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
         {profile && (
           <ProjectLink
             onClick={() => popModal()}
-            href={`/profiles/${profile.id}`}
+            href={`/profiles/${encodeURIComponent(profile.id)}`}
             className="card p-4 py-2 col gap-2 hover:bg-def-100"
           >
             <div className="row items-center gap-2 justify-between">

apps/start/src/modals/view-chart-users.tsx

@@ -25,7 +25,7 @@ const ProfileItem = ({ profile }: { profile: any }) => {
   return (
     <ProjectLink
       preload={false}
-      href={`/profiles/${profile.id}`}
+      href={`/profiles/${encodeURIComponent(profile.id)}`}
       title={getProfileName(profile, false)}
       className="col gap-2 rounded-lg border p-2 bg-card"
       onClick={(e) => {