Merge pull request #971 from mnfst/pagination

feat: add pagination to Messages and Model Prices

Author: brunobuddy

.changeset/loud-pillows-melt.md

@@ -1,2 +1,5 @@
 ---
+"manifest": minor
 ---
+
+Add pagination to Messages and Model Prices pages with shared Pagination component, cursor-based and client-side pagination primitives, filter empty state improvements, and unified provider icon system in filter bar

packages/frontend/src/components/ModelPricesFilterBar.tsx

@@ -1,4 +1,6 @@
-import { createSignal, createMemo, For, Show, onCleanup, type Component } from "solid-js";
+import { createSignal, createMemo, For, Show, onCleanup, type Component } from 'solid-js';
+import { resolveProviderId } from '../services/routing-utils.js';
+import { providerIcon } from './ProviderIcon.jsx';
 
 interface ModelPricesFilterBarProps {
   allModels: string[];
@@ -15,66 +17,53 @@ interface ModelPricesFilterBarProps {
 }
 
 interface Suggestion {
-  type: "Provider" | "Model";
+  type: 'Provider' | 'Model';
   value: string;
 }
 
 interface Tag {
-  type: "Provider" | "Model";
+  type: 'Provider' | 'Model';
   value: string;
 }
 
-/** Maps provider display names to icon filenames in /icons/providers/ */
-const providerIconMap: Record<string, string> = {
-  OpenAI: "openai",
-  Anthropic: "anthropic",
-  Google: "google",
-  DeepSeek: "deepseek",
-  Mistral: "mistral",
-  Meta: "meta",
-  Amazon: "amazon",
-  Alibaba: "alibaba",
-  Moonshot: "moonshot",
-  Zhipu: "zhipu",
-  Cohere: "cohere",
-  xAI: "xai",
-};
-
-/** Providers whose icons are monochrome (dark fill) and need inversion in dark mode */
-const monoProviders = new Set(["OpenAI", "Anthropic", "Moonshot", "xAI"]);
-
-const getProviderIconSrc = (provider: string): string | null => {
-  const key = providerIconMap[provider];
-  return key ? `/icons/providers/${key}.svg` : null;
-};
-
-const ProviderIcon: Component<{ provider: string; size?: number }> = (props) => {
-  const src = () => getProviderIconSrc(props.provider);
+const FilterProviderIcon: Component<{ provider: string; size?: number }> = (props) => {
   const size = () => props.size ?? 16;
-  const isMono = () => monoProviders.has(props.provider);
+  const id = () => resolveProviderId(props.provider);
+  const icon = () => {
+    const pid = id();
+    return pid ? providerIcon(pid, size()) : null;
+  };
 
   return (
-    <Show when={src()} fallback={
-      <svg class="model-filter__provider-icon" width={size()} height={size()} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <rect x="3" y="3" width="18" height="18" rx="3" />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-    }>
-      <img
-        class="model-filter__provider-icon"
-        classList={{ "model-filter__provider-icon--mono": isMono() }}
-        src={src()!}
-        alt=""
-        width={size()}
-        height={size()}
-        aria-hidden="true"
-      />
+    <Show
+      when={icon()}
+      fallback={
+        <svg
+          class="model-filter__provider-icon"
+          width={size()}
+          height={size()}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="3" y="3" width="18" height="18" rx="3" />
+          <circle cx="12" cy="12" r="3" />
+        </svg>
+      }
+    >
+      <span class="model-filter__provider-icon" aria-hidden="true">
+        {icon()}
+      </span>
     </Show>
   );
 };
 
 const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
-  const [query, setQuery] = createSignal("");
+  const [query, setQuery] = createSignal('');
   const [dropdownOpen, setDropdownOpen] = createSignal(false);
   const [highlightIndex, setHighlightIndex] = createSignal(-1);
   let comboboxRef: HTMLDivElement | undefined;
@@ -85,10 +74,10 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
   const activeTags = createMemo<Tag[]>(() => {
     const tags: Tag[] = [];
     for (const p of props.selectedProviders) {
-      tags.push({ type: "Provider", value: p });
+      tags.push({ type: 'Provider', value: p });
     }
     for (const m of props.selectedModels) {
-      tags.push({ type: "Model", value: m });
+      tags.push({ type: 'Model', value: m });
     }
     return tags;
   });
@@ -112,28 +101,28 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
   const flatSuggestions = createMemo<Suggestion[]>(() => {
     const suggestions: Suggestion[] = [];
     for (const p of matchingProviders()) {
-      suggestions.push({ type: "Provider", value: p });
+      suggestions.push({ type: 'Provider', value: p });
     }
     for (const m of matchingModels()) {
-      suggestions.push({ type: "Model", value: m });
+      suggestions.push({ type: 'Model', value: m });
     }
     return suggestions;
   });
 
   const selectSuggestion = (suggestion: Suggestion) => {
-    if (suggestion.type === "Provider") {
+    if (suggestion.type === 'Provider') {
       props.onAddProvider(suggestion.value);
     } else {
       props.onAddModel(suggestion.value);
     }
-    setQuery("");
+    setQuery('');
     setDropdownOpen(false);
     setHighlightIndex(-1);
     inputRef?.focus();
   };
 
   const removeTag = (tag: Tag) => {
-    if (tag.type === "Provider") {
+    if (tag.type === 'Provider') {
       props.onRemoveProvider(tag.value);
     } else {
       props.onRemoveModel(tag.value);
@@ -150,25 +139,25 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
   const handleKeyDown = (e: KeyboardEvent) => {
     const suggestions = flatSuggestions();
 
-    if (e.key === "ArrowDown") {
+    if (e.key === 'ArrowDown') {
       e.preventDefault();
       if (!dropdownOpen() && query().trim().length >= 2) {
         setDropdownOpen(true);
       }
       setHighlightIndex((i) => Math.min(i + 1, suggestions.length - 1));
-    } else if (e.key === "ArrowUp") {
+    } else if (e.key === 'ArrowUp') {
       e.preventDefault();
       setHighlightIndex((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Enter") {
+    } else if (e.key === 'Enter') {
       e.preventDefault();
       const idx = highlightIndex();
       if (idx >= 0 && idx < suggestions.length) {
         selectSuggestion(suggestions[idx]!);
       }
-    } else if (e.key === "Escape") {
+    } else if (e.key === 'Escape') {
       setDropdownOpen(false);
       setHighlightIndex(-1);
-    } else if (e.key === "Backspace" && query() === "") {
+    } else if (e.key === 'Backspace' && query() === '') {
       const tags = activeTags();
       if (tags.length > 0) {
         removeTag(tags[tags.length - 1]!);
@@ -183,10 +172,10 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
     }
   };
 
-  if (typeof document !== "undefined") {
-    document.addEventListener("click", handleClickOutside);
+  if (typeof document !== 'undefined') {
+    document.addEventListener('click', handleClickOutside);
     onCleanup(() => {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
     });
   }
 
@@ -231,19 +220,24 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
                   <div class="model-filter__dropdown-label">Providers</div>
                   <For each={matchingProviders()}>
                     {(provider) => {
-                      const idx = () => flatSuggestions().findIndex((s) => s.type === "Provider" && s.value === provider);
+                      const idx = () =>
+                        flatSuggestions().findIndex(
+                          (s) => s.type === 'Provider' && s.value === provider,
+                        );
                       return (
                         <button
                           class="model-filter__dropdown-item"
-                          classList={{ "model-filter__dropdown-item--highlighted": highlightIndex() === idx() }}
-                          onClick={() => selectSuggestion({ type: "Provider", value: provider })}
+                          classList={{
+                            'model-filter__dropdown-item--highlighted': highlightIndex() === idx(),
+                          }}
+                          onClick={() => selectSuggestion({ type: 'Provider', value: provider })}
                           onMouseEnter={() => setHighlightIndex(idx())}
                           type="button"
                           role="option"
                           aria-selected={highlightIndex() === idx()}
                         >
                           <span class="model-filter__dropdown-item-name">
-                            <ProviderIcon provider={provider} size={16} />
+                            <FilterProviderIcon provider={provider} size={16} />
                             {provider}
                           </span>
                           <span class="model-filter__dropdown-item-type">Provider</span>
@@ -258,12 +252,15 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
                   <div class="model-filter__dropdown-label">Models</div>
                   <For each={matchingModels()}>
                     {(model) => {
-                      const idx = () => flatSuggestions().findIndex((s) => s.type === "Model" && s.value === model);
+                      const idx = () =>
+                        flatSuggestions().findIndex((s) => s.type === 'Model' && s.value === model);
                       return (
                         <button
                           class="model-filter__dropdown-item"
-                          classList={{ "model-filter__dropdown-item--highlighted": highlightIndex() === idx() }}
-                          onClick={() => selectSuggestion({ type: "Model", value: model })}
+                          classList={{
+                            'model-filter__dropdown-item--highlighted': highlightIndex() === idx(),
+                          }}
+                          onClick={() => selectSuggestion({ type: 'Model', value: model })}
                           onMouseEnter={() => setHighlightIndex(idx())}
                           type="button"
                           role="option"
@@ -281,13 +278,17 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
           </Show>
         </div>
         <div class="model-filter__summary">
-          <Show when={hasActiveFilters()} fallback={
-            <span>{props.totalCount} models</span>
-          }>
-            <span>{props.filteredCount} of {props.totalCount} models</span>
+          <Show when={hasActiveFilters()} fallback={<span>{props.totalCount} models</span>}>
+            <span>
+              {props.filteredCount} of {props.totalCount} models
+            </span>
             <button
               class="model-filter__clear-all"
-              onClick={() => { props.onClearFilters(); setQuery(""); setDropdownOpen(false); }}
+              onClick={() => {
+                props.onClearFilters();
+                setQuery('');
+                setDropdownOpen(false);
+              }}
               type="button"
             >
               Clear filters
@@ -299,11 +300,14 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
         <div class="model-filter__tags">
           <For each={activeTags()}>
             {(tag) => (
-              <span class="model-filter__tag" classList={{ "model-filter__tag--provider": tag.type === "Provider" }}>
-                <Show when={tag.type === "Provider"}>
-                  <ProviderIcon provider={tag.value} size={16} />
+              <span
+                class="model-filter__tag"
+                classList={{ 'model-filter__tag--provider': tag.type === 'Provider' }}
+              >
+                <Show when={tag.type === 'Provider'}>
+                  <FilterProviderIcon provider={tag.value} size={16} />
                 </Show>
-                <Show when={tag.type === "Model"}>
+                <Show when={tag.type === 'Model'}>
                   <span class="model-filter__tag-type">Model:</span>
                 </Show>
                 <span class="model-filter__tag-value">{tag.value}</span>
@@ -313,7 +317,17 @@ const ModelPricesFilterBar: Component<ModelPricesFilterBarProps> = (props) => {
                   type="button"
                   aria-label={`Remove ${tag.type} ${tag.value}`}
                 >
-                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <svg
+                    width="10"
+                    height="10"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
                     <path d="M18 6 6 18" />
                     <path d="m6 6 12 12" />
                   </svg>

packages/frontend/src/components/Pagination.tsx

@@ -0,0 +1,45 @@
+import { Show, type Component, type Accessor } from 'solid-js';
+
+export interface PaginationProps {
+  currentPage: Accessor<number>;
+  totalItems: Accessor<number>;
+  pageSize: number;
+  hasNextPage: Accessor<boolean>;
+  isLoading?: Accessor<boolean>;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+
+const Pagination: Component<PaginationProps> = (props) => {
+  const start = () => (props.currentPage() - 1) * props.pageSize + 1;
+  const end = () => Math.min(props.currentPage() * props.pageSize, props.totalItems());
+  const loading = () => props.isLoading?.() ?? false;
+
+  return (
+    <Show when={props.totalItems() > props.pageSize}>
+      <nav class="pagination" role="navigation" aria-label="Pagination">
+        <span class="pagination__summary">
+          Showing {start()}&ndash;{end()} of {props.totalItems()}
+        </span>
+        <div class="pagination__controls">
+          <button
+            class="btn btn--outline btn--sm pagination__btn"
+            disabled={props.currentPage() <= 1 || loading()}
+            onClick={props.onPrevious}
+          >
+            Previous
+          </button>
+          <button
+            class="btn btn--outline btn--sm pagination__btn"
+            disabled={!props.hasNextPage() || loading()}
+            onClick={props.onNext}
+          >
+            Next
+          </button>
+        </div>
+      </nav>
+    </Show>
+  );
+};
+
+export default Pagination;