Fix PMP ID handling and generation (#583)

### Description

This pull request addresses issues with ID handling and generation for
Personas by standardizing the way short IDs are generated and used
throughout the codebase. It replaces the use of `crypto.randomUUID()`
with a new utility function, `generateShortId`, ensuring IDs are shorter
and more consistent. Additionally, it improves command parsing for
Persona-related commands.

#### ID Generation Improvements

- Introduced a new utility function `generateShortId` in
`src/app/utils/shortIdGen.ts` to generate short, consistent IDs by
truncating UUIDs.
- Replaced all instances of `crypto.randomUUID()` with
`generateShortId(5)` when creating new Persona or member IDs in
`PerMessageProfileOverview.tsx` and `PKitCommandMessageHandler.ts`,
ensuring all IDs are now short and uniform.

#### Command Parsing Enhancements

- Updated regular expressions in `useCommands.ts` to use `\S+` instead
of `\w+` for Persona IDs, allowing IDs with a broader set of characters
and improving robustness of command parsing.

Fixes #582

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

No AI was used for this PR

Author: 7w1

.changeset/fix_pmp_id_handling.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+fix id handling and id generation for Personas

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

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

src/app/hooks/useCommands.ts

@@ -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 = /(\w+) (name=)?"?([\w\s]*)"? (avatar=)?([\w.:/]+)/;
-const USEPMP_REGEX = /^(\w+)\s*(-g)?(-o)?(-u)?\s*(\d+)?$/;
+const ADDPMP_REGEX = /(\S+) (name=)?"?([\w\s]*)"? (avatar=)?([\w.:/]+)/;
+const USEPMP_REGEX = /^(\S+)\s*(-g)?(-o)?(-u)?\s*(\d+)?$/;
 
 export const splitPayloadContentAndFlags = (payload: string): [string, string | undefined] => {
   const flagMatch = new RegExp(FLAG_REG).exec(payload);

src/app/plugins/pluralkit-handler/PKitCommandMessageHandler.ts

@@ -8,6 +8,7 @@ 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]+)"?$/;
@@ -90,7 +91,7 @@ export class PKitCommandMessageHandler {
         return;
       }
       const memberName = cmdParts[2];
-      const generatedID = crypto.randomUUID();
+      const generatedID = generateShortId(5);
       sendFeedback(
         `adding new member has been created with id: ${generatedID} and name ${memberName}`,
         this.room,

src/app/utils/shortIdGen.ts

@@ -0,0 +1,4 @@
+export function generateShortId(length: number): string {
+  const uuid = crypto.randomUUID();
+  return uuid.replaceAll('-', '').substring(0, length);
+}