Handle error in AssigneeInput when chars outside of the bs58 charset — radicle-explorer

Also improves the UX and only shows validation errors on submit, and not during input.

 ): { prefix: string; pubkey: string } | undefined {
   const match = /^(did:key:)?(z[a-zA-Z0-9]+)$/.exec(nid);
   if (match) {
     const hex = bs58.decode(match[2].substring(1));
     let hex: Uint8Array | undefined = undefined;
     try {
       hex = bs58.decode(match[2].substring(1));
     } catch (error) {
       console.error("utils.parseNodId: Not able to decode received NID", error);
       return undefined;
     }
     // This checks also that the first 2 bytes are equal
     // to the ed25519 public key type used.
     if (!(hex.byteLength === 34 && hex[0] === 0xed && hex[1] === 1)) {
     if (hex && !(hex.byteLength === 34 && hex[0] === 0xed && hex[1] === 1)) {
       return undefined;
     }

   let updatedAssignees: Reaction["authors"] = assignees;
   let inputValue = "";
   let validationMessage: string | undefined = undefined;
   let valid: boolean = false;
   let assignee: string | undefined = undefined;
   const removeToggles: Record<string, boolean> = {};
   // Clear validationMessage if inputValue changes
   $: {
     if (inputValue !== "") {
     inputValue;
     validationMessage = undefined;
   }
   function validateInput(input: string): boolean {
     if (input !== "") {
       const parsedNodeId = parseNodeId(inputValue);
       if (parsedNodeId) {
         assignee = `${parsedNodeId.prefix}${parsedNodeId.pubkey}`;
         if (updatedAssignees.find(({ id }) => id === assignee)) {
           valid = false;
           validationMessage = "This assignee is already added";
           return false;
         } else {
           valid = true;
           validationMessage = undefined;
           return true;
         }
       } else {
         valid = false;
         validationMessage = "This assignee is not valid";
       }
     } else {
       valid = false;
       validationMessage = "";
     }
     return false;
   }
   function addAssignee() {
     const valid = validateInput(inputValue);
     if (valid && assignee) {
       updatedAssignees = [...updatedAssignees, { id: assignee }];
       inputValue = "";

         <div
           style="width:100%; display: flex; align-items: center; gap: 0.5rem;">
           <TextInput
             {valid}
             autofocus
             disabled={submitInProgress}
             bind:value={inputValue}

             title="discard assignee"
             on:click={() => {
               inputValue = "";
               validationMessage = undefined;
               showInput = false;
             }}>
             <IconSmall name="cross" />

             <IconSmall name="checkmark" />
           </IconButton>
         </div>
         {#if !valid && validationMessage}
         {#if validationMessage}
           <div class="validation-message">
             <IconSmall name="exclamation-circle" />{validationMessage}
           </div>

   await page
     .getByPlaceholder("Add assignee")
     .fill("z6MktULudTtAsAhRegYPiZ6631RV3viv12qd4GQF8z1xB22S");
   await page.getByRole("button", { name: "save assignee" }).click();
   await expect(page.getByText("This assignee is already added")).toBeVisible();
   await page.getByPlaceholder("Add assignee").clear();
   await expect(page.getByText("This assignee is already added")).toBeHidden();

       expected: undefined,
     },
     {
       input: "zlatan",
       expected: undefined,
     },
     {
       input: "z6MkmzRwg47UWQxczLLLFfkEwpBGitjzJ1vKPE8U9ymd6fz6",
       expected: {
         prefix: "did:key:",