working

website/src/repl/components/incrementor/Incrementor.jsx

@@ -0,0 +1,52 @@
+import { cn } from 'tailwind_utils.mjs';
+import { Textbox } from '../textbox/Textbox';
+
+function IncButton({ children, label, className, ...buttonProps }) {
+  return (
+    <button
+      aria-label={label}
+      className={cn(
+        'rounded-md border border-transparent p-1 text-center text-sm transition-all   hover:bg-foreground active:bg-lineBackground disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none',
+        className,
+      )}
+      type="button"
+      {...buttonProps}
+    >
+      {children ?? label}
+    </button>
+  );
+}
+export function Incrementor({ onChange, value, min = -Infinity, max = Infinity, className }) {
+  value = parseInt(value);
+  value = isNaN(value) ? '' : value;
+  return (
+    <div className={cn('w-fit bg-background relative flex  items-center"> rounded-md', className)}>
+      <Textbox
+        min={min}
+        max={max}
+        onChange={(v) => {
+          if (v.length && v < min) {
+            return;
+          }
+          onChange(v);
+        }}
+        type="number"
+        placeholder=""
+        value={value}
+        className="w-32 my-0 border-none rounded-r-none bg-transparent appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+      />
+      <div className="flex gap-1 ">
+        <IncButton label={'increment'} disabled={value <= min} onClick={() => onChange(value - 1)}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
+            <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
+          </svg>
+        </IncButton>
+        <IncButton label={'decrement'} disabled={value >= max} onClick={() => onChange(value + 1)}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
+            <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+          </svg>
+        </IncButton>
+      </div>
+    </div>
+  );
+}

website/src/repl/components/pagination/Pagination.jsx

@@ -0,0 +1,7 @@
+
+import { Incrementor } from '../incrementor/Incrementor';
+
+export function Pagination({ currPage, onPageChange, className }) {
+  return <Incrementor min={1} value={currPage} onChange={onPageChange} className={className} />;
+}
+

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

@@ -1,6 +1,8 @@
 import {
   exportPatterns,
   importPatterns,
+  loadAndSetFeaturedPatterns,
+  loadAndSetPublicPatterns,
   patternFilterName,
   useActivePattern,
   useViewingPatternData,
@@ -12,6 +14,9 @@ import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { settingsMap, useSettings } from '../../../settings.mjs';
+import { Pagination } from '../pagination/Pagination.jsx';
+import { useState } from 'react';
+import { useDebounce } from '../usedebounce.jsx';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -33,7 +38,9 @@ export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   if (title == null) {
     title = 'unnamed';
   }
-  return <>{`${pattern.id}: ${title} by ${Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'}`}</>;
+
+  const author = Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous';
+  return <>{`${pattern.id}: ${title} by ${author.slice(0, 100)}`.slice(0, 60)}</>;
 }
 
 function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
@@ -57,7 +64,7 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
   const viewingPatternID = viewingPatternData.id;
   return (
     <div className="font-mono text-sm">
-      {Object.values(patterns)
+      {Object.values(patterns ?? {})
         .reverse()
         .map((pattern) => {
           const id = pattern.id;
@@ -97,8 +104,8 @@ function UserPatterns({ context }) {
   const { userPatterns, patternFilter } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
   return (
-    <div className="flex flex-col flex-grow overflow-clip h-full">
+    <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">
-      <div className="pr-4 space-x-4 border-b border-foreground flex max-w-full overflow-x-auto">
+      <div className="pr-4 space-x-4  flex max-w-full overflow-x-auto">
         <ActionButton
           label="new"
           onClick={() => {
@@ -141,7 +148,7 @@ function UserPatterns({ context }) {
         />
       </div>
 
-      <div className="overflow-auto h-full">
+      <div className="overflow-auto h-full bg-background p-2 rounded-md">
         {patternFilter === patternFilterName.user && (
           <PatternButtons
             onClick={(id) =>
@@ -162,31 +169,93 @@ function UserPatterns({ context }) {
   );
 }
 
-function PublicPatterns({ context }) {
+function PatternPageWithPagination({ patterns, patternOnClick, context, paginationOnChange }) {
+  const [page, setPage] = useState(1);
+  const debouncedPageChange = useDebounce(() => {
+    paginationOnChange(page);
+  });
+
+  const onPageChange = (pageNum) => {
+    setPage(pageNum);
+    debouncedPageChange();
+  };
+
   const activePattern = useActivePattern();
-  const examplePatterns = useExamplePatterns();
-  const collections = examplePatterns.collections;
-  const { patternFilter } = useSettings();
-  const patterns = collections.get(patternFilter) ?? collections.get(patternFilterName.public);
   return (
-    <div className="overflow-auto flex flex-col flex-grow">
+    <div className="flex flex-grow flex-col  h-full overflow-hidden justify-between">
-      <PatternButtons
+      <div className="overflow-auto flex flex-col flex-grow bg-background p-2 rounded-md ">
-        onClick={(id) =>
+        <PatternButtons
-          updateCodeWindow(context, { ...patterns[id], collection: patternFilter }, autoResetPatternOnChange)
+          onClick={(id) => patternOnClick(id)}
-        }
+          started={context.started}
-        started={context.started}
+          patterns={patterns}
-        patterns={patterns}
+          activePattern={activePattern}
-        activePattern={activePattern}
+        />
-      />
+      </div>
+      <div className="flex items-center gap-2 py-2">
+        <label htmlFor="pattern pagination">Page</label>{' '}
+        <Pagination id="pattern pagination" currPage={page} onPageChange={onPageChange} />
+      </div>
     </div>
   );
 }
 
+function FeaturedPatterns({ context }) {
+  const examplePatterns = useExamplePatterns();
+  const collections = examplePatterns.collections;
+  const patterns = collections.get(patternFilterName.featured);
+  return (
+    <PatternPageWithPagination
+      patterns={patterns}
+      context={context}
+      patternOnClick={(id) => {
+        updateCodeWindow(
+          context,
+          { ...patterns[id], collection: patternFilterName.featured },
+          autoResetPatternOnChange,
+        );
+      }}
+      paginationOnChange={async (pageNum) => {
+        await loadAndSetFeaturedPatterns(pageNum);
+      }}
+    />
+  );
+}
+
+function LatestPatterns({ context }) {
+  const examplePatterns = useExamplePatterns();
+  const collections = examplePatterns.collections;
+  const patterns = collections.get(patternFilterName.public);
+  return (
+    <PatternPageWithPagination
+      patterns={patterns}
+      context={context}
+      patternOnClick={(id) => {
+        updateCodeWindow(
+          context,
+          { ...patterns[id], collection: patternFilterName.public },
+          autoResetPatternOnChange,
+        );
+      }}
+      paginationOnChange={async (pageNum) => {
+        await loadAndSetPublicPatterns(pageNum);
+      }}
+    />
+  );
+}
+
+function PublicPatterns({ context }) {
+  const { patternFilter } = useSettings();
+  if (patternFilter === patternFilterName.featured) {
+    return <FeaturedPatterns context={context} />;
+  }
+  return <LatestPatterns context={context} />;
+}
+
 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">
+    <div className="px-4 w-full text-foreground  space-y-2  flex flex-col overflow-hidden max-h-full h-full">
       <ButtonGroup
         value={patternFilter}
         onChange={(value) => settingsMap.setKey('patternFilter', value)}

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

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
+import { Textbox } from '../textbox/Textbox';
 const availableFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
@@ -28,12 +29,7 @@ export function Reference() {
     <div className="flex h-full w-full p-2 text-foreground overflow-hidden">
       <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
         <div class="w-full flex">
-          <input
+          <Textbox placeholder="Search" value={search} onChange={setSearch}/>
-            className="w-full p-1 bg-background rounded-md border-none"
-            placeholder="Search"
-            value={search}
-            onInput={(event) => setSearch(event.target.value)}
-          />
         </div>
         <div className="flex flex-col h-full overflow-y-auto  gap-1.5 bg-background bg-opacity-50  rounded-md">
           {visibleFunctions.map((entry, i) => (

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

@@ -5,6 +5,7 @@ import { useMemo, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
+import { Textbox } from '../textbox/Textbox.jsx';
 
 const getSamples = (samples) =>
   Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
@@ -53,11 +54,10 @@ export function SoundsTab() {
 
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full  dark:text-white text-stone-900">
-      <input
+      <Textbox
-        className="w-full p-1 bg-background rounded-md my-2"
         placeholder="Search"
         value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        onChange={(v) => setSearch(v)}
       />
 
       <div className="pb-2 flex shrink-0 flex-wrap">

website/src/repl/components/textbox/Textbox.jsx

@@ -0,0 +1,15 @@
+import { cn } from 'tailwind_utils.mjs';
+// type TextboxProps = {
+//     onChange: (val: string | number) => void;
+//     ...inputProps
+// }
+export function Textbox(props) {
+  const {onChange, className, ...inputProps} = props
+  return (
+    <input
+      className={cn('p-1 bg-background rounded-md my-2 border-foreground', props.className)}
+      onChange={(e) => props.onChange(e.target.value)} 
+      {...inputProps}
+    />
+  );
+}

website/src/repl/components/usedebounce.jsx

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { useEffect } from 'react';
+import { useRef } from 'react';
+
+function debounce(fn, wait) {
+  let timer;
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => fn(...args), wait);
+  };
+}
+
+export function useDebounce(callback) {
+  const ref = useRef;
+  useEffect(() => {
+    ref.current = callback;
+  }, [callback]);
+
+  const debouncedCallback = useMemo(() => {
+    const func = () => {
+      ref.current?.();
+    };
+
+    return debounce(func, 1000);
+  }, []);
+
+  return debouncedCallback;
+}

website/src/repl/util.mjs

@@ -199,3 +199,4 @@ export function setVersionDefaultsFrom(code) {
     console.error(err);
   }
 }
+

website/src/settings.mjs

@@ -40,6 +40,8 @@ export const defaultSettings = {
   audioEngineTarget: audioEngineTargets.webaudio,
   isButtonRowHidden: false,
   isCSSAnimationDisabled: false,
+  publicPatternPage: 1,
+  featuredPatternPage: 1,
 };
 
 let search = null;

website/src/user_pattern_utils.mjs

@@ -9,7 +9,7 @@ export let $publicPatterns = atom([]);
 export let $featuredPatterns = atom([]);
 
 
-
+const patternQueryLimit = 20
 export const patternFilterName = {
   public: 'latest',
   featured: 'featured',
@@ -48,25 +48,41 @@ export const setViewingPatternData = (data) => {
   $viewingPatternData.set(JSON.stringify(data));
 };
 
-export function loadPublicPatterns() {
+function parsePageNum(page) {
-  return supabase.from('code_v1').select().eq('public', true).limit(40).order('id', { ascending: false });
+ return isNaN(page) ? 0 : page
+}
+export function loadPublicPatterns(page) {
+  page = parsePageNum(page)
+  const offset = page * patternQueryLimit
+  return supabase.from('code_v1').select().eq('public', true).range(offset, offset + patternQueryLimit ).order('id', { ascending: false });
 }
 
-export function loadFeaturedPatterns() {
+export function loadFeaturedPatterns(page = 0) {
-  return supabase.from('code_v1').select().eq('featured', true).limit(40).order('id', { ascending: false });
+  page = parsePageNum(page)
+  const offset = page * patternQueryLimit
+  return supabase.from('code_v1').select().eq('featured', true).range(offset, offset + patternQueryLimit).order('id', { ascending: false });
+}
+
+export async function loadAndSetPublicPatterns(page) {
+  const p = await loadPublicPatterns(page);
+  const data = p?.data
+  const pats = {}
+  data?.forEach((data, key) => (pats[data.id ?? key] = data));
+  $publicPatterns.set(pats)
+}
+export async function loadAndSetFeaturedPatterns(page) {
+
+  const p = await loadFeaturedPatterns(page);
+  const data = p?.data
+  const pats = {}
+  data?.forEach((data, key) => (pats[data.id ?? key] = data));
+  $featuredPatterns.set(pats)
 }
 
 export async function loadDBPatterns() {
   try {
-    const { data: publicPatterns } = await loadPublicPatterns();
+    await loadAndSetPublicPatterns()
-    const { data: featuredPatterns } = await loadFeaturedPatterns();
+    await loadAndSetFeaturedPatterns()
-    const featured = {};
-    const pub = {};
-
-    publicPatterns?.forEach((data, key) => (pub[data.id ?? key] = data));
-    featuredPatterns?.forEach((data, key) => (featured[data.id ?? key] = data));
-    $publicPatterns.set(pub);
-    $featuredPatterns.set(featured);
   } catch (err) {
     console.error('error loading patterns', err);
   }

website/tailwind.config.cjs

@@ -2,6 +2,8 @@
 
 const defaultTheme = require('tailwindcss/defaultTheme');
 
+
+
 module.exports = {
   darkMode: 'class',
   content: [

website/tailwind_utils.mjs

@@ -0,0 +1,4 @@
+// utility for combining class names
+export function cn(...classNameStrings) {
+    return classNameStrings.join(' ')
+  }