hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reorganize panels

Browse source
This commit is contained in:
Jade (Rose) Rowland 2025-02-17 12:22:45 -05:00
parent aabc82bedd
commit 5cd98880ca
3 changed files with 108 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

179
website/src/repl/components/panel/PatternsTab.jsx
View file

@ -84,82 +84,72 @@ function ActionButton({ children, onClick, label, labelIsHidden }) {
); );
} }
export function PatternsTab({ context }) { const updateCodeWindow = (context, patternData, reset = false) => {
context.handleUpdate(patternData, reset);
};
const autoResetPatternOnChange = !isUdels();
function UserPatterns({ context }) {
const activePattern = useActivePattern(); const activePattern = useActivePattern();
const viewingPatternStore = useViewingPatternData(); const viewingPatternStore = useViewingPatternData();
const viewingPatternData = parseJSON(viewingPatternStore); const viewingPatternData = parseJSON(viewingPatternStore);
const { userPatterns, patternFilter } = useSettings(); const { userPatterns, patternFilter } = useSettings();
const examplePatterns = useExamplePatterns();
const collections = examplePatterns.collections;
const updateCodeWindow = (patternData, reset = false) => {
context.handleUpdate(patternData, reset);
};
const viewingPatternID = viewingPatternData?.id; const viewingPatternID = viewingPatternData?.id;
const autoResetPatternOnChange = !isUdels();
return ( return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-2 flex flex-col overflow-hidden max-h-full h-full"> <div className="flex flex-col flex-grow overflow-clip h-full">
<ButtonGroup <div className="pr-4 space-x-4 border-b border-foreground flex max-w-full overflow-x-auto">
value={patternFilter} <ActionButton
onChange={(value) => settingsMap.setKey('patternFilter', value)} label="new"
items={patternFilterName} onClick={() => {
></ButtonGroup> const { data } = userPattern.createAndAddToDB();
{patternFilter === patternFilterName.user && ( updateCodeWindow(context, data);
<div> }}
<div className="pr-4 space-x-4 border-b border-foreground flex max-w-full overflow-x-auto"> />
<ActionButton <ActionButton
label="new" label="duplicate"
onClick={() => { onClick={() => {
const { data } = userPattern.createAndAddToDB(); const { data } = userPattern.duplicate(viewingPatternData);
updateCodeWindow(data); updateCodeWindow(context, data);
}} }}
/> />
<ActionButton <ActionButton
label="duplicate" label="delete"
onClick={() => { onClick={() => {
const { data } = userPattern.duplicate(viewingPatternData); const { data } = userPattern.delete(viewingPatternID);
updateCodeWindow(data); updateCodeWindow(context, { ...data, collection: userPattern.collection });
}} }}
/> />
<ActionButton <label className="hover:opacity-50 cursor-pointer">
label="delete" <input
onClick={() => { style={{ display: 'none' }}
const { data } = userPattern.delete(viewingPatternID); type="file"
updateCodeWindow({ ...data, collection: userPattern.collection }); multiple
}} accept="text/plain,application/json"
/> onChange={(e) => importPatterns(e.target.files)}
<label className="hover:opacity-50 cursor-pointer"> />
<input import
style={{ display: 'none' }} </label>
type="file" <ActionButton label="export" onClick={exportPatterns} />
multiple
accept="text/plain,application/json"
onChange={(e) => importPatterns(e.target.files)}
/>
import
</label>
<ActionButton label="export" onClick={exportPatterns} />
<ActionButton <ActionButton
label="delete-all" label="delete-all"
onClick={() => { onClick={() => {
const { data } = userPattern.clearAll(); const { data } = userPattern.clearAll();
updateCodeWindow(data); updateCodeWindow(context, data);
}} }}
/> />
</div> </div>
</div>
)}
<section className="flex overflow-y-auto max-h-full flex-grow flex-col"> <div className="overflow-auto h-full">
{patternFilter === patternFilterName.user && ( {patternFilter === patternFilterName.user && (
<PatternButtons <PatternButtons
onClick={(id) => onClick={(id) =>
updateCodeWindow({ ...userPatterns[id], collection: userPattern.collection }, autoResetPatternOnChange) updateCodeWindow(
context,
{ ...userPatterns[id], collection: userPattern.collection },
autoResetPatternOnChange,
)
} }
patterns={userPatterns} patterns={userPatterns}
started={context.started} started={context.started}
@ -167,24 +157,47 @@ export function PatternsTab({ context }) {
viewingPatternID={viewingPatternID} viewingPatternID={viewingPatternID}
/> />
)} )}
{patternFilter !== patternFilterName.user && </div>
Array.from(collections.keys()).map((collection) => { </div>
const patterns = collections.get(collection); );
return ( }
<section key={collection} className="py-2">
<h2 className="text-xl mb-2">{collection}</h2> function PublicPatterns({ context }) {
<div className="font-mono text-sm"> const activePattern = useActivePattern();
<PatternButtons const examplePatterns = useExamplePatterns();
onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, autoResetPatternOnChange)} const collections = examplePatterns.collections;
started={context.started} const { patternFilter } = useSettings();
patterns={patterns} const patterns = collections.get(patternFilter) ?? collections.get(patternFilterName.public);
activePattern={activePattern} return (
/> <div className="overflow-auto flex flex-col flex-grow">
</div> <PatternButtons
</section> onClick={(id) =>
); updateCodeWindow(context, { ...patterns[id], collection: patternFilter }, autoResetPatternOnChange)
})} }
</section> started={context.started}
patterns={patterns}
activePattern={activePattern}
/>
</div>
);
}
export function PatternsTab({ context }) {
const { patternFilter } = useSettings();
return (
<div className="px-4 w-full text-white space-y-2 flex flex-col overflow-hidden max-h-full h-full">
<ButtonGroup
value={patternFilter}
onChange={(value) => settingsMap.setKey('patternFilter', value)}
items={patternFilterName}
></ButtonGroup>
{patternFilter === patternFilterName.user ? (
<UserPatterns context={context} />
) : (
<PublicPatterns context={context} />
)}
</div> </div>
); );
} }

8
website/src/repl/useExamplePatterns.jsx
View file

@ -1,4 +1,4 @@
import { $featuredPatterns, $publicPatterns, collectionName } from '../user_pattern_utils.mjs'; import { $featuredPatterns, $publicPatterns, patternFilterName } from '../user_pattern_utils.mjs';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import * as tunes from '../repl/tunes.mjs'; import * as tunes from '../repl/tunes.mjs';
@ -12,9 +12,9 @@ export const useExamplePatterns = () => {
const publicPatterns = useStore($publicPatterns); const publicPatterns = useStore($publicPatterns);
const collections = useMemo(() => { const collections = useMemo(() => {
const pats = new Map(); const pats = new Map();
pats.set(collectionName.featured, featuredPatterns); pats.set(patternFilterName.featured, featuredPatterns);
pats.set(collectionName.public, publicPatterns); pats.set(patternFilterName.public, publicPatterns);
// pats.set(collectionName.stock, stockPatterns); // pats.set(patternFilterName.stock, stockPatterns);
return pats; return pats;
}, [featuredPatterns, publicPatterns]); }, [featuredPatterns, publicPatterns]);

19
website/src/user_pattern_utils.mjs
View file

@ -8,16 +8,13 @@ import { confirmDialog, parseJSON, supabase } from './repl/util.mjs';
export let $publicPatterns = atom([]); export let $publicPatterns = atom([]);
export let $featuredPatterns = atom([]); export let $featuredPatterns = atom([]);
export const collectionName = {
user: 'user',
public: 'Last Creations',
stock: 'Stock Examples',
featured: 'Featured',
};
export const patternFilterName = { export const patternFilterName = {
community: 'community', public: 'latest',
featured: 'featured',
user: 'user', user: 'user',
// stock: 'stock examples',
}; };
const sessionAtom = (name, initial = undefined) => { const sessionAtom = (name, initial = undefined) => {
@ -36,7 +33,7 @@ const sessionAtom = (name, initial = undefined) => {
export let $viewingPatternData = sessionAtom('viewingPatternData', { export let $viewingPatternData = sessionAtom('viewingPatternData', {
id: '', id: '',
code: '', code: '',
collection: collectionName.user, collection: patternFilterName.user,
created_at: Date.now(), created_at: Date.now(),
}); });
@ -52,11 +49,11 @@ export const setViewingPatternData = (data) => {
}; };
export function loadPublicPatterns() { export function loadPublicPatterns() {
return supabase.from('code_v1').select().eq('public', true).limit(20).order('id', { ascending: false }); return supabase.from('code_v1').select().eq('public', true).limit(40).order('id', { ascending: false });
} }
export function loadFeaturedPatterns() { export function loadFeaturedPatterns() {
return supabase.from('code_v1').select().eq('featured', true).limit(20).order('id', { ascending: false }); return supabase.from('code_v1').select().eq('featured', true).limit(40).order('id', { ascending: false });
} }
export async function loadDBPatterns() { export async function loadDBPatterns() {
@ -92,7 +89,7 @@ export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);
const defaultCode = ''; const defaultCode = '';
export const userPattern = { export const userPattern = {
collection: collectionName.user, collection: patternFilterName.user,
getAll() { getAll() {
const patterns = parseJSON(settingsMap.get().userPatterns); const patterns = parseJSON(settingsMap.get().userPatterns);
return patterns ?? {}; return patterns ?? {};