fix paginator

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

@@ -6,7 +6,7 @@ function IncButton({ children, label, className, ...buttonProps }) {
     <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',
+        '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"
@@ -36,12 +36,12 @@ export function Incrementor({ onChange, value, min = -Infinity, max = Infinity,
         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)}>
+        <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)}>
+        <IncButton label={'decrement'} className="rounded-r-md" 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>

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

@@ -1,7 +1,5 @@
-
 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

@@ -17,10 +17,7 @@ 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(' ');
-}
+import { cn } from 'tailwind_utils.mjs';
 
 export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
@@ -46,7 +43,7 @@ export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
 function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
   return (
     <a
-      className={classNames(
+      className={cn(
         'mr-4 hover:opacity-50 cursor-pointer block',
         showOutline && 'outline outline-1',
         showHiglight && 'bg-selection',
@@ -169,8 +166,8 @@ function UserPatterns({ context }) {
   );
 }
 
-function PatternPageWithPagination({ patterns, patternOnClick, context, paginationOnChange }) {
-  const [page, setPage] = useState(1);
+function PatternPageWithPagination({ patterns, patternOnClick, context, paginationOnChange, initialPage }) {
+  const [page, setPage] = useState(initialPage);
   const debouncedPageChange = useDebounce(() => {
     paginationOnChange(page);
   });
@@ -192,13 +189,14 @@ function PatternPageWithPagination({ patterns, patternOnClick, context, paginati
         />
       </div>
       <div className="flex items-center gap-2 py-2">
-        <label htmlFor="pattern pagination">Page</label>{' '}
+        <label htmlFor="pattern pagination">Page</label>
         <Pagination id="pattern pagination" currPage={page} onPageChange={onPageChange} />
       </div>
     </div>
   );
 }
 
+let featuredPageNum = 1
 function FeaturedPatterns({ context }) {
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
@@ -207,6 +205,7 @@ function FeaturedPatterns({ context }) {
     <PatternPageWithPagination
       patterns={patterns}
       context={context}
+      initialPage={featuredPageNum}
       patternOnClick={(id) => {
         updateCodeWindow(
           context,
@@ -216,11 +215,13 @@ function FeaturedPatterns({ context }) {
       }}
       paginationOnChange={async (pageNum) => {
         await loadAndSetFeaturedPatterns(pageNum);
+        featuredPageNum = pageNum
       }}
     />
   );
 }
 
+let latestPageNum = 1
 function LatestPatterns({ context }) {
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
@@ -229,15 +230,13 @@ function LatestPatterns({ context }) {
     <PatternPageWithPagination
       patterns={patterns}
       context={context}
+      initialPage={latestPageNum}
       patternOnClick={(id) => {
-        updateCodeWindow(
-          context,
-          { ...patterns[id], collection: patternFilterName.public },
-          autoResetPatternOnChange,
-        );
+        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, autoResetPatternOnChange);
       }}
       paginationOnChange={async (pageNum) => {
         await loadAndSetPublicPatterns(pageNum);
+        latestPageNum = pageNum
       }}
     />
   );

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

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

website/tailwind_utils.mjs

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