fix(url-preview): guard against undefined query string in YouTube URL parser

Prevent a crash when parseYouTubeUrl is called with a URL that has no query
string (e.g. YouTube Shorts). Fixes undefined access on URLSearchParams get.
Also corrects Shorts videoId extraction and Prettier formatting.

Author: Just-Insane

.changeset/fix-youtube-url-crash.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix crash when previewing non-video YouTube URLs (channels, @handles, etc.) that lack query parameters.

.changeset/fix_pmp_id_handling.md

@@ -168,21 +168,19 @@ function parseYoutubeLink(url: string): YoutubeLink | null {
     [videoId] = split;
     params = split[1]?.split('&');
   } else if (url.includes('/shorts/')) {
-    const split = path.split('/shorts/');
+    const split = path.split('?');
     [videoId] = split;
-    params = split[1]?.split('shorts');
+    params = split[1]?.split('&') ?? [];
   } else if (url.includes('youtube.com')) {
-    params = path.split('?')[1].split('&');
-    videoId = params.find((s) => s.startsWith('v='), params)?.split('v=')[1];
+    params = path.split('?')[1]?.split('&') ?? [];
+    videoId = params.find((s) => s.startsWith('v='))?.split('v=')[1];
   } else return null;
 
   if (!videoId) return null;
 
   // playlist is not used for the embed, it can be appended as is
-  const playlist = params ? params.find((s) => s.startsWith('list='), params) : undefined;
-  const timestamp = params
-    ? params.find((s) => s.startsWith('t='), params)?.split('t=')[1]
-    : undefined;
+  const playlist = params ? params.find((s) => s.startsWith('list=')) : undefined;
+  const timestamp = params ? params.find((s) => s.startsWith('t='))?.split('t=')[1] : undefined;
 
   return {
     videoId,

src/app/components/url-preview/ClientPreview.tsx

@@ -6,7 +6,6 @@ import {
 } from '$hooks/usePerMessageProfile';
 import { useEffect, useState } from 'react';
 import { Box, Button, Text } from 'folds';
-import { generateShortId } from '$utils/shortIdGen';
 import { PerMessageProfileEditor } from './PerMessageProfileEditor';
 
 /**
@@ -37,7 +36,7 @@ export function PerMessageProfileOverview() {
         <Button
           onClick={() => {
             const newProfile: PerMessageProfile = {
-              id: generateShortId(5),
+              id: crypto.randomUUID(),
               name: 'New Profile',
             };
             addOrUpdatePerMessageProfile(mx, newProfile).then(() => {

src/app/features/settings/Persona/PerMessageProfileOverview.tsx

@@ -51,8 +51,8 @@ const FLAG_PAT = String.raw`(?:^|\s)-(\w+)\b`;
 const FLAG_REG = new RegExp(FLAG_PAT);
 const FLAG_REG_G = new RegExp(FLAG_PAT, 'g');
 
-const ADDPMP_REGEX = /(\S+) (name=)?"?([\w\s]*)"? (avatar=)?([\w.:/]+)/;
-const USEPMP_REGEX = /^(\S+)\s*(-g)?(-o)?(-u)?\s*(\d+)?$/;
+const ADDPMP_REGEX = /(\w+) (name=)?"?([\w\s]*)"? (avatar=)?([\w.:/]+)/;
+const USEPMP_REGEX = /^(\w+)\s*(-g)?(-o)?(-u)?\s*(\d+)?$/;
 
 export const splitPayloadContentAndFlags = (payload: string): [string, string | undefined] => {
   const flagMatch = new RegExp(FLAG_REG).exec(payload);

src/app/hooks/useCommands.ts

@@ -8,7 +8,6 @@ import {
 } from '$hooks/usePerMessageProfile';
 import { sendFeedback } from '$utils/sendFeedbackToUser';
 import { MatrixClient, Room } from 'matrix-js-sdk';
-import { generateShortId } from '$utils/shortIdGen';
 
 const pkMemberRenameRegex = /^(pk;member)\s+"?([\w\s]+)"?\s*rename\s+"?([\w\s]+)"?$/;
 const pkMemberNewRegex = /^(pk;member)\s+new\s+"?([\w\s]+)"?$/;
@@ -91,7 +90,7 @@ export class PKitCommandMessageHandler {
         return;
       }
       const memberName = cmdParts[2];
-      const generatedID = generateShortId(5);
+      const generatedID = crypto.randomUUID();
       sendFeedback(
         `adding new member has been created with id: ${generatedID} and name ${memberName}`,
         this.room,