reference: show synonyms in the same row, grayed out, instead of adding a row for each synonym

website/src/repl/components/panel/Reference.jsx

@@ -21,23 +21,18 @@ const availableFunctions = (() => {
     // @something is. We only want data from comments like `@tags superdough` here.
     // If nothing is specified, we default to "untagged" for debugging
     doc.tags = doc.tags?.filter((t) => t && typeof t === 'string') || ['untagged'];
-    functions.push(doc);
 
     const synonyms = doc.synonyms || [];
+    let names = [doc.name];
     seen.add(doc.name);
     for (const s of synonyms) {
       if (!s || seen.has(s)) continue;
+      names.push(s);
       seen.add(s);
-      // Swap `doc.name` in for `s` in the list of synonyms
-      const synonymsWithDoc = [doc.name, ...synonyms].filter((x) => x && x !== s);
-      functions.push({
-        ...doc,
-        name: s, // update names for the synonym
-        longname: s,
-        synonyms: synonymsWithDoc,
-        synonyms_text: synonymsWithDoc.join(', '),
-      });
     }
+    doc.allNames = names.join(' ');
+    doc.synonyms = names.slice(1);
+    functions.push(doc);
   }
   return functions.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 })();
@@ -87,7 +82,7 @@ export const Reference = memo(function Reference() {
       }
       const lowerCaseSearch = search.toLowerCase();
       return (
-        entry.name.toLowerCase().includes(lowerCaseSearch) ||
+        (entry.allNames || entry.name).toLowerCase().includes(lowerCaseSearch) ||
         (entry.synonyms?.some((s) => s.toLowerCase().includes(lowerCaseSearch)) ?? false)
       );
     });
@@ -156,7 +151,7 @@ export const Reference = memo(function Reference() {
             <Fragment key={`entry-${entry.name}`}>
               <a
                 className={
-                  'cursor-pointer hover:opacity-50 text-ellipsis block' +
+                  'whitespace-nowrap cursor-pointer hover:opacity-50 text-ellipsis block' +
                   (entry.name === selectedFunction ? 'bg-lineHighlight font-bold' : '')
                 }
                 onClick={() => {
@@ -167,7 +162,7 @@ export const Reference = memo(function Reference() {
                   }
                 }}
               >
-                {entry.name}
+                {entry.name} {entry.synonyms && <small className="opacity-50">{entry.synonyms?.join(', ')}</small>}
               </a>{' '}
             </Fragment>
           ))}