From 9fc084b291487a1a54f52252bd14a659bce51aed Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 21 Jan 2026 22:47:15 +0100
Subject: [PATCH] tweaks: consistent font sizes and row heights, persist
 selected reference tag, add wrap prop to ButtonGroup

---
 website/src/repl/components/Header.jsx        |  2 +-
 .../repl/components/button/action-button.jsx  |  2 +-
 website/src/repl/components/panel/Forms.jsx   |  6 +-
 website/src/repl/components/panel/Panel.jsx   |  2 +-
 .../src/repl/components/panel/PatternsTab.jsx | 26 +++----
 .../src/repl/components/panel/Reference.jsx   | 73 +++++++++++--------
 .../src/repl/components/panel/SettingsTab.jsx |  8 +-
 .../src/repl/components/panel/SoundsTab.jsx   |  3 +-
 website/src/settings.mjs                      |  1 +
 9 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index e113cea0a..faef01856 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -69,7 +69,7 @@ export function Header({ context, isEmbedded = false }) {
             <button
               onClick={handleTogglePlay}
               title={started ? 'stop' : 'play'}
-              className={cx('hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
+              className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
             >
               {!pending ? (
                 <span className={cx('flex items-center space-x-2')}>
diff --git a/website/src/repl/components/button/action-button.jsx b/website/src/repl/components/button/action-button.jsx
index 846d36c7e..245cf961e 100644
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@@ -2,7 +2,7 @@ import cx from '@src/cx.mjs';
 
 export function ActionButton({ children, label, labelIsHidden, className, ...buttonProps }) {
   return (
-    <button className={cx('hover:opacity-50 text-nowrap w-fit', className)} title={label} {...buttonProps}>
+    <button className={cx('hover:opacity-50 text-xs text-nowrap w-fit', className)} title={label} {...buttonProps}>
       {labelIsHidden !== true && label}
       {children}
     </button>
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index e4a3c15f5..8b4e8c0fe 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -1,15 +1,15 @@
 import cx from '@src/cx.mjs';
 
-export function ButtonGroup({ value, onChange, items }) {
+export function ButtonGroup({ value, onChange, items, wrap = false }) {
   return (
-    <div className="flex max-w-lg space-x-0">
+    <div className={cx('flex max-w-lg space-x-0 text-xs', wrap && 'flex-wrap')}>
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
           id={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b-2 h-8 whitespace-nowrap',
+            'px-2 border-b-2 h-8 whitespace-nowrap border-box max-h-8 hover:opacity-50',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 7e7ae86cd..78bd8a784 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -137,7 +137,7 @@ function PanelTab({ label, isSelected, onClick }) {
       <button
         onClick={onClick}
         className={cx(
-          'h-8 px-2 text-sm text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
+          'h-8 px-2 text-xs text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
           isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 2fc0f67d9..3423c57ab 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -8,7 +8,7 @@ import {
   useViewingPatternData,
   userPattern,
 } from '../../../user_pattern_utils.mjs';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
@@ -123,10 +123,11 @@ export function PatternsTab({ context }) {
     );
   }, [search, viewingPatternStore]);
 
+  const importRef = useRef();
   return (
     <div className="w-full h-full text-foreground flex flex-col overflow-hidden">
-      <Textbox className="w-full border-0" placeholder="Search" value={search} onChange={setSearch} />
-      <div className="px-2 shrink-0 py-2 space-x-4 flex max-w-full overflow-x-auto border-y border-muted">
+      <Textbox className="w-full border-0" placeholder="Search..." value={search} onChange={setSearch} />
+      <div className="px-2 shrink-0 h-8 space-x-4 flex max-w-full overflow-x-auto border-y border-muted">
         <ActionButton
           label="new"
           onClick={() => {
@@ -148,16 +149,15 @@ export function PatternsTab({ context }) {
             updateCodeWindow(context, { ...data, collection: userPattern.collection });
           }}
         />
-        <label className="hover:opacity-50 cursor-pointer">
-          <input
-            style={{ display: 'none' }}
-            type="file"
-            multiple
-            accept="text/plain,text/x-markdown,application/json"
-            onChange={(e) => importPatterns(e.target.files)}
-          />
-          import
-        </label>
+        <input
+          ref={importRef}
+          style={{ display: 'none' }}
+          type="file"
+          multiple
+          accept="text/plain,text/x-markdown,application/json"
+          onChange={(e) => importPatterns(e.target.files)}
+        />
+        <ActionButton label="import" onClick={() => importRef.current.click()} />
         <ActionButton label="export" onClick={exportPatterns} />
 
         <ActionButton
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index 5b297853f..7bea07afa 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useState, Fragment } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
 import { Textbox } from '@src/repl/components/panel/SettingsTab';
+import { settingsMap, useSettings } from '@src/settings.mjs';
 
 const isValid = ({ name, description }) => name && !name.startsWith('_') && !!description;
 
@@ -37,6 +38,19 @@ const availableFunctions = (() => {
   return functions.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 })();
 
+const tagCounts = {};
+// const tagOptions = { all: `all (${availableFunctions.length})` };
+const tagOptions = { all: `all` };
+for (const doc of availableFunctions) {
+  (doc.tags || ['untagged']).forEach((t) => {
+    if (typeof t === 'string' && t) {
+      tagCounts[t] = (tagCounts[t] || 0) + 1;
+      //tagOptions[t] = `${t} (${tagCounts[t]})`;
+      tagOptions[t] = t;
+    }
+  });
+}
+
 const getInnerText = (html) => {
   var div = document.createElement('div');
   div.innerHTML = html;
@@ -45,40 +59,38 @@ const getInnerText = (html) => {
 
 export const Reference = memo(function Reference() {
   const [search, setSearch] = useState('');
-  const [selectedTag, setSelectedTag] = useState(null);
   const [selectedFunction, setSelectedFunction] = useState(null);
+  const { referenceTag } = useSettings();
 
   const toggleTag = (tag) => {
-    if (selectedTag === tag) {
-      setSelectedTag(null);
+    if (referenceTag === tag) {
+      setReferenceTag('all');
     } else {
-      setSelectedTag(tag);
+      setReferenceTag(tag);
     }
   };
 
   const searchVisibleFunctions = useMemo(() => {
     return availableFunctions.filter((entry) => {
-      if (selectedTag) {
-        if (!(entry.tags || ['untagged']).includes(selectedTag)) {
+      if (referenceTag && referenceTag !== 'all') {
+        if (!(entry.tags || ['untagged']).includes(referenceTag)) {
           return false;
         }
       }
-
       if (!search) {
         return true;
       }
-
       const lowerCaseSearch = search.toLowerCase();
       return (
         entry.name.toLowerCase().includes(lowerCaseSearch) ||
         (entry.synonyms?.some((s) => s.toLowerCase().includes(lowerCaseSearch)) ?? false)
       );
     });
-  }, [search, selectedTag]);
+  }, [search, referenceTag]);
 
   const detailVisibleFunctions = useMemo(() => {
     return searchVisibleFunctions.filter((x) => {
-      if (selectedTag === null) {
+      if (referenceTag === null || referenceTag === 'all') {
         if (search) {
           return true;
         }
@@ -87,19 +99,10 @@ export const Reference = memo(function Reference() {
         return true;
       }
     });
-  }, [searchVisibleFunctions, selectedFunction, selectedTag]);
-
-  const tagCounts = {};
-  for (const doc of availableFunctions) {
-    (doc.tags || ['untagged']).forEach((t) => {
-      if (typeof t === 'string' && t) {
-        tagCounts[t] = (tagCounts[t] || 0) + 1;
-      }
-    });
-  }
+  }, [searchVisibleFunctions, selectedFunction, referenceTag]);
 
   const onSearchTagFilterClick = () => {
-    setSelectedTag(null);
+    setReferenceTag('all');
     setSelectedFunction(null);
   };
 
@@ -111,6 +114,8 @@ export const Reference = memo(function Reference() {
     }
   }, [selectedFunction]);
 
+  let setReferenceTag = (value) => settingsMap.setKey('referenceTag', value);
+
   return (
     <div className="flex h-full w-full overflow-hidden">
       <div className="h-full text-foreground flex flex-col w-1/3  border-r border-muted">
@@ -118,30 +123,35 @@ export const Reference = memo(function Reference() {
         <div className="w-full flex">
           <Textbox
             className="w-full border-0 border-b border-muted"
-            placeholder="Search"
+            placeholder="Search..."
             value={search}
             onChange={(e) => {
               setSelectedFunction(null);
+              setReferenceTag('all');
               setSearch(e);
             }}
           />
         </div>
-        {selectedTag && (
+
+        {/* <div className="flex shrink-0 flex-wrap w-full overflow-auto border-y border-muted">
+          <ButtonGroup wrap value={referenceTag} onChange={setReferenceTag} items={tagOptions}></ButtonGroup>
+        </div> */}
+        {referenceTag && referenceTag !== 'all' && (
           <div className="w-72">
             <span
               className="text-foreground border border-muted border-t-0 border-l-0 px-1 py-0.5 my-2 cursor-pointer font-sans"
               onClick={onSearchTagFilterClick}
             >
-              {selectedTag}
+              {referenceTag}
             </span>
           </div>
         )}
-        <div className="flex flex-col h-full py-2 overflow-y-auto gap-1.5 bg-opacity-50">
+        <div className="h-full p-2 overflow-y-auto bg-opacity-50">
           {searchVisibleFunctions.map((entry, i) => (
             <Fragment key={`entry-${entry.name}`}>
               <a
                 className={
-                  'cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis ' +
+                  'cursor-pointer hover:opacity-50 text-ellipsis block' +
                   (entry.name === selectedFunction ? 'bg-lineHighlight font-bold' : '')
                 }
                 onClick={() => {
@@ -159,7 +169,7 @@ export const Reference = memo(function Reference() {
         </div>
       </div>
       <div
-        className="break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
+        className="w-2/3 break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
         id="reference-container"
       >
         <div className="prose dark:prose-invert min-w-full px-1 text-sm">
@@ -169,6 +179,7 @@ export const Reference = memo(function Reference() {
             that you can already make music with a small set of functions!
           </p>
           <div>
+            {/* <ButtonGroup wrap value={referenceTag} onChange={setReferenceTag} items={tagOptions}/>*/}
             {Object.entries(tagCounts)
               .sort(([a], [b]) => a.localeCompare(b))
               .map(([t, count]) => (
@@ -176,7 +187,7 @@ export const Reference = memo(function Reference() {
                   <a
                     className={[
                       'select-none text-white border border-muted px-1 py-0.5 my-2 cursor-pointer text-sm/8 no-underline font-sans',
-                      `${selectedTag === t ? 'bg-muted text-foreground' : ''}`,
+                      `${referenceTag === t ? 'bg-muted text-foreground' : ''}`,
                     ].join(' ')}
                     onClick={() => toggleTag(t)}
                   >
@@ -188,7 +199,7 @@ export const Reference = memo(function Reference() {
           {detailVisibleFunctions.map((entry, i) => (
             <section key={i} className="font-sans">
               <div className="flex flex-row items-center mt-8 justify-between">
-                <h3 className="font-mono my-0" id={`doc-${entry.name}`}>
+                <h3 className="font-mono my-0 pt-4" id={`doc-${entry.name}`}>
                   {entry.name}
                 </h3>
                 {entry.tags && (
@@ -202,7 +213,7 @@ export const Reference = memo(function Reference() {
                   Synonyms: <code>{entry.synonyms_text}</code>
                 </p>
               )}
-              {/* <small>{entry.meta.filename}</small> */}
+
               <p dangerouslySetInnerHTML={{ __html: entry.description }}></p>
               <ul>
                 {entry.params?.map(({ name, type, description }, i) => (
@@ -212,7 +223,7 @@ export const Reference = memo(function Reference() {
                 ))}
               </ul>
               {entry.examples?.map((example, j) => (
-                <pre className="bg-background" key={j}>
+                <pre className="bg-background border border-muted" key={j}>
                   {example}
                 </pre>
               ))}
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 69d4bb60a..113873a55 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -15,17 +15,17 @@ function cx(...classes) {
 }
 
 const inputClass =
-  'bg-background text-sm border rounded-0 text-foreground border-muted placeholder-foreground focus:outline-none focus:ring-0 focus:border-foreground';
+  'bg-background text-xs h-8 max-h-8 border border-box rounded-0 text-foreground border-muted placeholder-muted focus:outline-none focus:ring-0 focus:border-foreground';
 
 export function Textbox({ onChange, className, ...inputProps }) {
   return (
-    <input className={cx('p-2', inputClass, className)} onChange={(e) => onChange(e.target.value)} {...inputProps} />
+    <input className={cx('px-2', inputClass, className)} onChange={(e) => onChange(e.target.value)} {...inputProps} />
   );
 }
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
-    <label className="text-sm">
+    <label className="text-xs">
       <input
         className={cx(
           'bg-background text-sm border border-muted focus:outline-none focus:ring-0 focus:border-foreground',
@@ -96,7 +96,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
 
 function FormItem({ label, children, sublabel }) {
   return (
-    <div className="grid gap-2 text-sm">
+    <div className="grid gap-2 text-xs">
       <label className="text-sm">{label}</label>
       {children}
     </div>
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 7b8d154db..0a856f811 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -78,10 +78,11 @@ export function SoundsTab() {
   });
   return (
     <div id="sounds-tab" className="flex flex-col w-full h-full text-foreground">
-      <Textbox placeholder="Search" className="border-0" value={search} onChange={(v) => setSearch(v)} />
+      <Textbox placeholder="Search..." className="border-0" value={search} onChange={(v) => setSearch(v)} />
 
       <div className="flex shrink-0 flex-wrap border-y border-muted">
         <ButtonGroup
+          wrap
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
           items={{
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 65c142683..16175efb1 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -38,6 +38,7 @@ export const defaultSettings = {
   latestCode: '',
   isZen: false,
   soundsFilter: soundFilterType.ALL,
+  referenceTag: 'all',
   patternFilter: 'community',
   // panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom', //FIX: does not work on astro
   panelPosition: 'right',