mirror/strudel
1
0
Fork 0
mirror of https://codeberg.org/uzu/strudel synced 2026-07-13 06:19:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

tweaks: consistent font sizes and row heights, persist selected reference tag, add wrap prop to ButtonGroup

Browse Source
This commit is contained in:
Felix Roos
2026-01-21 22:47:15 +01:00
parent cb46dd7840
commit 9fc084b291
9 changed files with 68 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/repl/components/Header.jsx
+1 -1
View File
@@ -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')}>
website/src/repl/components/button/action-button.jsx
+1 -1
View File
@@ -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>
website/src/repl/components/panel/Forms.jsx
+3 -3
View File
@@ -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',
website/src/repl/components/panel/Panel.jsx
+1 -1
View File
@@ -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',
)}
>
website/src/repl/components/panel/PatternsTab.jsx
+13 -13
View File
@@ -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
website/src/repl/components/panel/Reference.jsx
+42 -31
View File
@@ -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>
))}
website/src/repl/components/panel/SettingsTab.jsx
+4 -4
View File
@@ -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>
website/src/repl/components/panel/SoundsTab.jsx
+2 -1
View File
@@ -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={{
website/src/settings.mjs
+1
View File
@@ -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',