Merge branch 'release/1.3' into feature/pagination

.env.sample

@@ -170,6 +170,47 @@
 # Default: parts
 # BK_PARTS_FOLDER=parts
 
+# Optional: Enable server-side pagination for individual pages (recommended for large collections)
+# When enabled, pages use server-side pagination with configurable page sizes
+# When disabled, pages load all data at once with instant client-side search
+# Default: false for all
+# BK_SETS_SERVER_SIDE_PAGINATION=true
+# BK_PARTS_SERVER_SIDE_PAGINATION=true
+# BK_MINIFIGURES_SERVER_SIDE_PAGINATION=true
+# BK_PROBLEMS_SERVER_SIDE_PAGINATION=true
+
+# Optional: Number of parts to show per page on desktop devices (when server-side pagination is enabled)
+# Default: 10
+# BK_PARTS_PAGINATION_SIZE_DESKTOP=10
+
+# Optional: Number of parts to show per page on mobile devices (when server-side pagination is enabled)
+# Default: 5
+# BK_PARTS_PAGINATION_SIZE_MOBILE=5
+
+# Optional: Number of sets to show per page on desktop devices (when server-side pagination is enabled)
+# Should be divisible by 4 for grid layout. Default: 12
+# BK_SETS_PAGINATION_SIZE_DESKTOP=12
+
+# Optional: Number of sets to show per page on mobile devices (when server-side pagination is enabled)
+# Default: 4
+# BK_SETS_PAGINATION_SIZE_MOBILE=4
+
+# Optional: Number of minifigures to show per page on desktop devices (when server-side pagination is enabled)
+# Default: 10
+# BK_MINIFIGURES_PAGINATION_SIZE_DESKTOP=10
+
+# Optional: Number of minifigures to show per page on mobile devices (when server-side pagination is enabled)
+# Default: 5
+# BK_MINIFIGURES_PAGINATION_SIZE_MOBILE=5
+
+# Optional: Number of problems to show per page on desktop devices (when server-side pagination is enabled)
+# Default: 10
+# BK_PROBLEMS_PAGINATION_SIZE_DESKTOP=10
+
+# Optional: Number of problems to show per page on mobile devices (when server-side pagination is enabled)
+# Default: 5
+# BK_PROBLEMS_PAGINATION_SIZE_MOBILE=5
+
 # Optional: Port the server will listen on.
 # Default: 3333
 # BK_PORT=3333

CHANGELOG.md

@@ -1,6 +1,28 @@
 # Changelog
 
-## Unreleased 
+## Unreleased
+
+### 1.3
+
+- Add individual pagination control system per entity type
+  - `BK_SETS_SERVER_SIDE_PAGINATION`: Enable/disable pagination for sets
+  - `BK_PARTS_SERVER_SIDE_PAGINATION`: Enable/disable pagination for parts
+  - `BK_MINIFIGURES_SERVER_SIDE_PAGINATION`: Enable/disable pagination for minifigures
+  - Device-specific pagination sizes (desktop/mobile) for each entity type
+  - Supports search, filtering, and sorting in both server-side and client-side modes
+  - Consolidated duplicate code across parts.js, problems.js, and minifigures.js
+  - Created shared functions in collapsible-state.js for common operations
+- Fixed dynamic sort icons across all pages
+  - Sort icons now properly toggle between ascending/descending states
+- Improved DataTable integration
+  - Disabled column header sorting when server-side pagination is enabled
+  - Prevents conflicting sort mechanisms between DataTable and server-side sorting
+- Enhanced color dropdown functionality
+  - Automatic merging of duplicate color entries with same color_id
+  - Keeps entries with valid RGB data, removes entries with None/empty RGB
+  - Preserves selection state during dropdown consolidation
+  - Consistent search behavior (instant for client-side, Enter key for server-side)
+  - Mobile-friendly pagination navigation
 
 ### 1.2.4
 

bricktracker/app.py

@@ -10,6 +10,7 @@ from bricktracker.configuration_list import BrickConfigurationList
 from bricktracker.login import LoginManager
 from bricktracker.navbar import Navbar
 from bricktracker.sql import close
+from bricktracker.template_filters import replace_query_filter
 from bricktracker.version import __version__
 from bricktracker.views.add import add_page
 from bricktracker.views.admin.admin import admin_page
@@ -121,6 +122,9 @@ def setup_app(app: Flask) -> None:
         # Version
         g.version = __version__
 
+    # Register custom Jinja2 filters
+    app.jinja_env.filters['replace_query'] = replace_query_filter
+
     # Make sure all connections are closed at the end
     @app.teardown_request
     def teardown_request(_: BaseException | None) -> None:

bricktracker/config.py

@@ -37,9 +37,21 @@ CONFIG: Final[list[dict[str, Any]]] = [
     {'n': 'HIDE_WISHES', 'c': bool},
     {'n': 'MINIFIGURES_DEFAULT_ORDER', 'd': '"rebrickable_minifigures"."name" ASC'},  # noqa: E501
     {'n': 'MINIFIGURES_FOLDER', 'd': 'minifigs', 's': True},
+    {'n': 'MINIFIGURES_PAGINATION_SIZE_DESKTOP', 'd': 10, 'c': int},
+    {'n': 'MINIFIGURES_PAGINATION_SIZE_MOBILE', 'd': 5, 'c': int},
+    {'n': 'MINIFIGURES_SERVER_SIDE_PAGINATION', 'c': bool},
     {'n': 'NO_THREADED_SOCKET', 'c': bool},
+    {'n': 'PARTS_SERVER_SIDE_PAGINATION', 'c': bool},
+    {'n': 'SETS_SERVER_SIDE_PAGINATION', 'c': bool},
     {'n': 'PARTS_DEFAULT_ORDER', 'd': '"rebrickable_parts"."name" ASC, "rebrickable_parts"."color_name" ASC, "bricktracker_parts"."spare" ASC'},  # noqa: E501
     {'n': 'PARTS_FOLDER', 'd': 'parts', 's': True},
+    {'n': 'PARTS_PAGINATION_SIZE_DESKTOP', 'd': 10, 'c': int},
+    {'n': 'PARTS_PAGINATION_SIZE_MOBILE', 'd': 5, 'c': int},
+    {'n': 'PROBLEMS_PAGINATION_SIZE_DESKTOP', 'd': 10, 'c': int},
+    {'n': 'PROBLEMS_PAGINATION_SIZE_MOBILE', 'd': 10, 'c': int},
+    {'n': 'PROBLEMS_SERVER_SIDE_PAGINATION', 'c': bool},
+    {'n': 'SETS_PAGINATION_SIZE_DESKTOP', 'd': 12, 'c': int},
+    {'n': 'SETS_PAGINATION_SIZE_MOBILE', 'd': 4, 'c': int},
     {'n': 'PORT', 'd': 3333, 'c': int},
     {'n': 'PURCHASE_DATE_FORMAT', 'd': '%d/%m/%Y'},
     {'n': 'PURCHASE_CURRENCY', 'd': '€'},
@@ -52,6 +64,12 @@ CONFIG: Final[list[dict[str, Any]]] = [
     {'n': 'REBRICKABLE_LINK_PART_PATTERN', 'd': 'https://rebrickable.com/parts/{part}/_/{color}'},  # noqa: E501
     {'n': 'REBRICKABLE_LINK_INSTRUCTIONS_PATTERN', 'd': 'https://rebrickable.com/instructions/{path}'},  # noqa: E501
     {'n': 'REBRICKABLE_USER_AGENT', 'd': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'},  # noqa: E501
+    {'n': 'USER_AGENT', 'd': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'},  # noqa: E501
+    {'n': 'PEERON_DOWNLOAD_DELAY', 'd': 1000, 'c': int},
+    {'n': 'PEERON_INSTRUCTION_PATTERN', 'd': 'http://peeron.com/scans/{set_number}-{version_number}'},
+    {'n': 'PEERON_MIN_IMAGE_SIZE', 'd': 100, 'c': int},
+    {'n': 'PEERON_SCAN_PATTERN', 'd': 'http://belay.peeron.com/scans/{set_number}-{version_number}/'},
+    {'n': 'PEERON_THUMBNAIL_PATTERN', 'd': 'http://belay.peeron.com/thumbs/{set_number}-{version_number}/'},
     {'n': 'REBRICKABLE_LINKS', 'e': 'LINKS', 'c': bool},
     {'n': 'REBRICKABLE_PAGE_SIZE', 'd': 100, 'c': int},
     {'n': 'RETIRED_SETS_FILE_URL', 'd': 'https://docs.google.com/spreadsheets/d/1rlYfEXtNKxUOZt2Mfv0H17DvK7bj6Pe0CuYwq6ay8WA/gviz/tq?tqx=out:csv&sheet=Sorted%20by%20Retirement%20Date'},  # noqa: E501

bricktracker/instructions.py

@@ -253,16 +253,16 @@ class BrickInstructions(object):
 
         raw: list[tuple[str, str]] = []
         for a in soup.find_all('a', href=link_re):
-            img = a.find('img', alt=True)
-            if not img or set not in img['alt']:
+            img = a.find('img', alt=True) # type: ignore
+            if not img or set not in img['alt']: # type: ignore
                 continue
 
             # Turn the alt text into a slug
-            alt_text = img['alt'].removeprefix('LEGO Building Instructions for ')
+            alt_text = img['alt'].removeprefix('LEGO Building Instructions for ') # type: ignore
             slug = re.sub(r'[^A-Za-z0-9]+', '-', alt_text).strip('-')
 
             # Build the absolute download URL
-            download_url = urljoin('https://rebrickable.com', a['href'])
+            download_url = urljoin('https://rebrickable.com', a['href']) # type: ignore
             raw.append((slug, download_url))
 
         if not raw:

bricktracker/minifigure_list.py

@@ -53,6 +53,48 @@ class BrickMinifigureList(BrickRecordList[BrickMinifigure]):
 
         return self
 
+    # Load minifigures with pagination support
+    def all_filtered_paginated(
+        self,
+        owner_id: str | None = None,
+        search_query: str | None = None,
+        page: int = 1,
+        per_page: int = 50,
+        sort_field: str | None = None,
+        sort_order: str = 'asc'
+    ) -> tuple[Self, int]:
+        # Prepare filter context
+        filter_context = {}
+        if owner_id and owner_id != 'all':
+            filter_context['owner_id'] = owner_id
+            list_query = self.all_by_owner_query
+        else:
+            list_query = self.all_query
+
+        if search_query:
+            filter_context['search_query'] = search_query
+
+        # Field mapping for sorting
+        field_mapping = {
+            'name': '"rebrickable_minifigures"."name"',
+            'parts': '"rebrickable_minifigures"."number_of_parts"',
+            'quantity': '"total_quantity"',
+            'missing': '"total_missing"',
+            'damaged': '"total_damaged"',
+            'sets': '"total_sets"'
+        }
+
+        # Use the base pagination method
+        return self.paginate(
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order,
+            list_query=list_query,
+            field_mapping=field_mapping,
+            **filter_context
+        )
+
     # Minifigures with a part damaged part
     def damaged_part(self, part: str, color: int, /) -> Self:
         # Save the parameters to the fields
@@ -95,16 +137,19 @@ class BrickMinifigureList(BrickRecordList[BrickMinifigure]):
             brickset = None
 
         # Prepare template context for owner filtering
-        context = {}
+        context_vars = {}
         if hasattr(self.fields, 'owner_id') and self.fields.owner_id is not None:
-            context['owner_id'] = self.fields.owner_id
+            context_vars['owner_id'] = self.fields.owner_id
+
+        # Merge with any additional context passed in
+        context_vars.update(context)
 
         # Load the sets from the database
         for record in super().select(
             override_query=override_query,
             order=order,
             limit=limit,
-            **context
+            **context_vars
         ):
             minifigure = BrickMinifigure(brickset=brickset, record=record)
 

bricktracker/pagination_helper.py

@@ -0,0 +1,52 @@
+from flask import current_app, request
+from typing import Any, Dict, Tuple
+
+
+def get_pagination_config(entity_type: str) -> Tuple[int, bool]:
+    """Get pagination configuration for an entity type (sets, parts, minifigures)"""
+    # Check if pagination is enabled for this specific entity type
+    pagination_key = f'{entity_type.upper()}_SERVER_SIDE_PAGINATION'
+    use_pagination = current_app.config.get(pagination_key, False)
+
+    if not use_pagination:
+        return 0, False
+
+    # Determine page size based on device type and entity
+    user_agent = request.headers.get('User-Agent', '').lower()
+    is_mobile = any(device in user_agent for device in ['mobile', 'android', 'iphone', 'ipad'])
+
+    # Get appropriate config keys based on entity type
+    entity_upper = entity_type.upper()
+    desktop_key = f'{entity_upper}_PAGINATION_SIZE_DESKTOP'
+    mobile_key = f'{entity_upper}_PAGINATION_SIZE_MOBILE'
+
+    per_page = current_app.config[mobile_key] if is_mobile else current_app.config[desktop_key]
+
+    return per_page, is_mobile
+
+
+def build_pagination_context(page: int, per_page: int, total_count: int, is_mobile: bool) -> Dict[str, Any]:
+    """Build pagination context for templates"""
+    total_pages = (total_count + per_page - 1) // per_page if total_count > 0 else 1
+    has_prev = page > 1
+    has_next = page < total_pages
+
+    return {
+        'page': page,
+        'per_page': per_page,
+        'total_count': total_count,
+        'total_pages': total_pages,
+        'has_prev': has_prev,
+        'has_next': has_next,
+        'is_mobile': is_mobile
+    }
+
+
+def get_request_params() -> Tuple[str, str, str, int]:
+    """Extract common request parameters for pagination"""
+    search_query = request.args.get('search', '').strip()
+    sort_field = request.args.get('sort', '')
+    sort_order = request.args.get('order', 'asc')
+    page = int(request.args.get('page', 1))
+
+    return search_query, sort_field, sort_order, page

bricktracker/part_list.py

@@ -71,11 +71,64 @@ class BrickPartList(BrickRecordList[BrickPart]):
         else:
             query = self.all_query
 
+        # Prepare context for query
+        context = {}
+        if current_app.config.get('SKIP_SPARE_PARTS', False):
+            context['skip_spare_parts'] = True
+
         # Load the parts from the database
-        self.list(override_query=query)
+        self.list(override_query=query, **context)
 
         return self
 
+    # Load parts with pagination support
+    def all_filtered_paginated(
+        self,
+        owner_id: str | None = None,
+        color_id: str | None = None,
+        search_query: str | None = None,
+        page: int = 1,
+        per_page: int = 50,
+        sort_field: str | None = None,
+        sort_order: str = 'asc'
+    ) -> tuple[Self, int]:
+        # Prepare filter context
+        filter_context = {}
+        if owner_id and owner_id != 'all':
+            filter_context['owner_id'] = owner_id
+            list_query = self.all_by_owner_query
+        else:
+            list_query = self.all_query
+
+        if color_id and color_id != 'all':
+            filter_context['color_id'] = color_id
+        if search_query:
+            filter_context['search_query'] = search_query
+        if current_app.config.get('SKIP_SPARE_PARTS', False):
+            filter_context['skip_spare_parts'] = True
+
+        # Field mapping for sorting
+        field_mapping = {
+            'name': '"rebrickable_parts"."name"',
+            'color': '"rebrickable_parts"."color_name"',
+            'quantity': '"total_quantity"',
+            'missing': '"total_missing"',
+            'damaged': '"total_damaged"',
+            'sets': '"total_sets"',
+            'minifigures': '"total_minifigures"'
+        }
+
+        # Use the base pagination method
+        return self.paginate(
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order,
+            list_query=list_query,
+            field_mapping=field_mapping,
+            **filter_context
+        )
+
     # Base part list
     def list(
         self,
@@ -84,6 +137,7 @@ class BrickPartList(BrickRecordList[BrickPart]):
         override_query: str | None = None,
         order: str | None = None,
         limit: int | None = None,
+        offset: int | None = None,
         **context: Any,
     ) -> None:
         if order is None:
@@ -105,12 +159,18 @@ class BrickPartList(BrickRecordList[BrickPart]):
             context_vars['owner_id'] = self.fields.owner_id
         if hasattr(self.fields, 'color_id') and self.fields.color_id is not None:
             context_vars['color_id'] = self.fields.color_id
+        if hasattr(self.fields, 'search_query') and self.fields.search_query:
+            context_vars['search_query'] = self.fields.search_query
+
+        # Merge with any additional context passed in
+        context_vars.update(context)
 
         # Load the sets from the database
         for record in super().select(
             override_query=override_query,
             order=order,
             limit=limit,
+            offset=offset,
             **context_vars
         ):
             part = BrickPart(
@@ -119,9 +179,6 @@ class BrickPartList(BrickRecordList[BrickPart]):
                 record=record,
             )
 
-            if current_app.config['SKIP_SPARE_PARTS'] and part.fields.spare:
-                continue
-
             self.records.append(part)
 
     # List specific parts from a brickset or minifigure
@@ -181,6 +238,70 @@ class BrickPartList(BrickRecordList[BrickPart]):
 
         return self
 
+    def problem_filtered(self, owner_id: str | None = None, color_id: str | None = None, /) -> Self:
+        # Save the filter parameters for client-side filtering
+        if owner_id is not None:
+            self.fields.owner_id = owner_id
+        if color_id is not None:
+            self.fields.color_id = color_id
+
+        # Prepare context for query
+        context = {}
+        if owner_id and owner_id != 'all':
+            context['owner_id'] = owner_id
+        if color_id and color_id != 'all':
+            context['color_id'] = color_id
+        if current_app.config.get('SKIP_SPARE_PARTS', False):
+            context['skip_spare_parts'] = True
+
+        # Load the problematic parts from the database
+        self.list(override_query=self.problem_query, **context)
+
+        return self
+
+    def problem_paginated(
+        self,
+        owner_id: str | None = None,
+        color_id: str | None = None,
+        search_query: str | None = None,
+        page: int = 1,
+        per_page: int = 50,
+        sort_field: str | None = None,
+        sort_order: str = 'asc'
+    ) -> tuple[Self, int]:
+        # Prepare filter context
+        filter_context = {}
+        if owner_id and owner_id != 'all':
+            filter_context['owner_id'] = owner_id
+        if color_id and color_id != 'all':
+            filter_context['color_id'] = color_id
+        if search_query:
+            filter_context['search_query'] = search_query
+        if current_app.config.get('SKIP_SPARE_PARTS', False):
+            filter_context['skip_spare_parts'] = True
+
+        # Field mapping for sorting
+        field_mapping = {
+            'name': '"rebrickable_parts"."name"',
+            'color': '"rebrickable_parts"."color_name"',
+            'quantity': '"total_quantity"',
+            'missing': '"total_missing"',
+            'damaged': '"total_damaged"',
+            'sets': '"total_sets"',
+            'minifigures': '"total_minifigures"'
+        }
+
+        # Use the base pagination method with problem query
+        return self.paginate(
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order,
+            list_query=self.problem_query,
+            field_mapping=field_mapping,
+            **filter_context
+        )
+
     # Return a dict with common SQL parameters for a parts list
     def sql_parameters(self, /) -> dict[str, Any]:
         parameters: dict[str, Any] = super().sql_parameters()

bricktracker/rebrickable_part.py

@@ -98,7 +98,7 @@ class RebrickablePart(BrickRecord):
                 # Use BrickLink color ID if available and not None, otherwise fall back to Rebrickable color
                 bricklink_color = getattr(self.fields, 'bricklink_color_id', None)
                 color_param = bricklink_color if bricklink_color is not None else self.fields.color
-                print(f'BrickLink URL parameters: part={part_param}, color={color_param}')  # Debugging line, can be removed later
+                # print(f'BrickLink URL parameters: part={part_param}, color={color_param}')  # Debugging line, can be removed later
                 return current_app.config['BRICKLINK_LINK_PART_PATTERN'].format(  # noqa: E501
                     part=part_param,
                     color=color_param,

bricktracker/rebrickable_set_list.py

@@ -11,24 +11,19 @@ class RebrickableSetList(BrickRecordList[RebrickableSet]):
     select_query: str = 'rebrickable/set/list'
     refresh_query: str = 'rebrickable/set/need_refresh'
 
-    # All the sets
-    def all(self, /) -> Self:
+    # Implementation of abstract list method
+    def list(self, /, *, override_query: str | None = None, **context) -> None:
         # Load the sets from the database
-        for record in self.select():
+        for record in self.select(override_query=override_query, **context):
             rebrickable_set = RebrickableSet(record=record)
-
             self.records.append(rebrickable_set)
 
+    # All the sets
+    def all(self, /) -> Self:
+        self.list()
         return self
 
     # Sets needing refresh
     def need_refresh(self, /) -> Self:
-        # Load the sets from the database
-        for record in self.select(
-            override_query=self.refresh_query
-        ):
-            rebrickable_set = RebrickableSet(record=record)
-
-            self.records.append(rebrickable_set)
-
+        self.list(override_query=self.refresh_query)
         return self

bricktracker/record_list.py

@@ -1,5 +1,6 @@
+import re
 from sqlite3 import Row
-from typing import Any, Generator, Generic, ItemsView, TypeVar, TYPE_CHECKING
+from typing import Any, Generator, Generic, ItemsView, Self, TypeVar, TYPE_CHECKING
 
 from .fields import BrickRecordFields
 from .sql import BrickSQL
@@ -72,6 +73,90 @@ class BrickRecordList(Generic[T]):
             **context
         )
 
+    # Generic pagination method for all record lists
+    def paginate(
+        self,
+        page: int = 1,
+        per_page: int = 50,
+        sort_field: str | None = None,
+        sort_order: str = 'asc',
+        count_query: str | None = None,
+        list_query: str | None = None,
+        field_mapping: dict[str, str] | None = None,
+        **filter_context: Any
+    ) -> tuple['Self', int]:
+        """Generic pagination implementation for all record lists"""
+        from .sql import BrickSQL
+
+        # Use provided queries or fall back to defaults
+        list_query = list_query or getattr(self, 'all_query', None)
+        if not list_query:
+            raise NotImplementedError("Subclass must define all_query")
+
+        # Calculate offset
+        offset = (page - 1) * per_page
+
+        # Get total count by wrapping the main query
+        if count_query:
+            # Use provided count query
+            count_result = BrickSQL().fetchone(count_query, **filter_context)
+            total_count = count_result['total_count'] if count_result else 0
+        else:
+            # Generate count by wrapping the main query (without ORDER BY, LIMIT, OFFSET)
+            count_context = {k: v for k, v in filter_context.items()
+                           if k not in ['order', 'limit', 'offset']}
+
+            # Get the main query SQL without pagination clauses
+            main_sql = BrickSQL().load_query(list_query, **count_context)
+
+            # Remove ORDER BY, LIMIT, OFFSET clauses for counting
+            # Remove ORDER BY clause and everything after it that's not part of subqueries
+            count_sql = re.sub(r'\s+ORDER\s+BY\s+[^)]*?(\s+LIMIT|\s+OFFSET|$)', r'\1', main_sql, flags=re.IGNORECASE)
+            # Remove LIMIT and OFFSET
+            count_sql = re.sub(r'\s+LIMIT\s+\d+', '', count_sql, flags=re.IGNORECASE)
+            count_sql = re.sub(r'\s+OFFSET\s+\d+', '', count_sql, flags=re.IGNORECASE)
+
+            # Wrap in COUNT(*)
+            wrapped_sql = f"SELECT COUNT(*) as total_count FROM ({count_sql.strip()})"
+
+            count_result = BrickSQL().raw_execute(wrapped_sql, {}).fetchone()
+            total_count = count_result['total_count'] if count_result else 0
+
+        # Prepare sort order
+        order_clause = None
+        if sort_field and field_mapping and sort_field in field_mapping:
+            sql_field = field_mapping[sort_field]
+            direction = 'DESC' if sort_order.lower() == 'desc' else 'ASC'
+            order_clause = f'{sql_field} {direction}'
+
+        # Build pagination context
+        pagination_context = {
+            'limit': per_page,
+            'offset': offset,
+            'order': order_clause or getattr(self, 'order', None),
+            **filter_context
+        }
+
+        # Load paginated results using the existing list() method
+        # Check if this is a set list that needs do_theme parameter
+        if hasattr(self, 'themes'):  # Only BrickSetList has this attribute
+            self.list(override_query=list_query, do_theme=True, **pagination_context)
+        else:
+            self.list(override_query=list_query, **pagination_context)
+
+        return self, total_count
+
+    # Base method that subclasses can override
+    def list(
+        self,
+        /,
+        *,
+        override_query: str | None = None,
+        **context: Any,
+    ) -> None:
+        """Load records from database - should be implemented by subclasses that use pagination"""
+        raise NotImplementedError("Subclass must implement list() method")
+
     # Generic SQL parameters from fields
     def sql_parameters(self, /) -> dict[str, Any]:
         parameters: dict[str, Any] = {}

bricktracker/set_list.py

@@ -13,6 +13,8 @@ from .set_storage_list import BrickSetStorageList
 from .set_tag import BrickSetTag
 from .set_tag_list import BrickSetTagList
 from .set import BrickSet
+from .theme_list import BrickThemeList
+from .instructions_list import BrickInstructionsList
 
 
 # All the sets from the database
@@ -21,6 +23,7 @@ class BrickSetList(BrickRecordList[BrickSet]):
     order: str
 
     # Queries
+    all_query: str = 'set/list/all'
     damaged_minifigure_query: str = 'set/list/damaged_minifigure'
     damaged_part_query: str = 'set/list/damaged_part'
     generic_query: str = 'set/list/generic'
@@ -48,6 +51,267 @@ class BrickSetList(BrickRecordList[BrickSet]):
 
         return self
 
+    # All sets with pagination and filtering
+    def all_filtered_paginated(
+        self,
+        search_query: str | None = None,
+        page: int = 1,
+        per_page: int = 50,
+        sort_field: str | None = None,
+        sort_order: str = 'asc',
+        status_filter: str | None = None,
+        theme_filter: str | None = None,
+        owner_filter: str | None = None,
+        purchase_location_filter: str | None = None,
+        storage_filter: str | None = None,
+        tag_filter: str | None = None
+    ) -> tuple[Self, int]:
+        # Convert theme name to theme ID for filtering
+        theme_id_filter = None
+        if theme_filter:
+            theme_id_filter = self._theme_name_to_id(theme_filter)
+
+        # Check if any filters are applied
+        has_filters = any([status_filter, theme_id_filter, owner_filter, purchase_location_filter, storage_filter, tag_filter])
+
+        # Prepare filter context
+        filter_context = {
+            'search_query': search_query,
+            'status_filter': status_filter,
+            'theme_filter': theme_id_filter,  # Use converted theme ID
+            'owner_filter': owner_filter,
+            'purchase_location_filter': purchase_location_filter,
+            'storage_filter': storage_filter,
+            'tag_filter': tag_filter,
+            'owners': BrickSetOwnerList.as_columns(),
+            'statuses': BrickSetStatusList.as_columns(),
+            'tags': BrickSetTagList.as_columns(),
+        }
+
+        # Field mapping for sorting
+        field_mapping = {
+            'set': '"rebrickable_sets"."set"',
+            'name': '"rebrickable_sets"."name"',
+            'year': '"rebrickable_sets"."year"',
+            'parts': '"rebrickable_sets"."number_of_parts"',
+            'theme': '"rebrickable_sets"."theme_id"',
+            'minifigures': '"total_minifigures"',  # Use the alias from the SQL query
+            'missing': '"total_missing"',  # Use the alias from the SQL query
+            'damaged': '"total_damaged"',  # Use the alias from the SQL query
+            'purchase-date': '"bricktracker_sets"."purchase_date"',
+            'purchase-price': '"bricktracker_sets"."purchase_price"'
+        }
+
+        # Choose query based on whether filters are applied
+        query_to_use = 'set/list/all_filtered' if has_filters else self.all_query
+
+        # Handle instructions filtering
+        if status_filter in ['has-missing-instructions', '-has-missing-instructions']:
+            # For instructions filter, we need to load all sets first, then filter and paginate
+            return self._all_filtered_paginated_with_instructions(
+                search_query, page, per_page, sort_field, sort_order,
+                status_filter, theme_id_filter, owner_filter,
+                purchase_location_filter, storage_filter, tag_filter
+            )
+
+        # Normal SQL-based filtering and pagination
+        result, total_count = self.paginate(
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order,
+            list_query=query_to_use,
+            field_mapping=field_mapping,
+            **filter_context
+        )
+
+        # Populate themes for filter dropdown from ALL sets, not just current page
+        result._populate_themes_global()
+
+        return result, total_count
+
+    def _populate_themes(self) -> None:
+        """Populate themes list from the current records"""
+        themes = set()
+        for record in self.records:
+            if hasattr(record, 'theme') and hasattr(record.theme, 'name'):
+                themes.add(record.theme.name)
+
+        self.themes = list(themes)
+        self.themes.sort()
+
+    def _theme_name_to_id(self, theme_name: str) -> str | None:
+        """Convert a theme name to theme ID for filtering"""
+        try:
+            theme_list = BrickThemeList()
+            for theme_id, theme in theme_list.themes.items():
+                if theme.name.lower() == theme_name.lower():
+                    return str(theme_id)
+            return None
+        except Exception:
+            # If themes can't be loaded, return None to disable theme filtering
+            return None
+
+    def _all_filtered_paginated_with_instructions(
+        self,
+        search_query: str | None,
+        page: int,
+        per_page: int,
+        sort_field: str | None,
+        sort_order: str,
+        status_filter: str,
+        theme_id_filter: str | None,
+        owner_filter: str | None,
+        purchase_location_filter: str | None,
+        storage_filter: str | None,
+        tag_filter: str | None
+    ) -> tuple[Self, int]:
+        """Handle filtering when instructions filter is involved"""
+        try:
+            # Load all sets first (without pagination) with full metadata
+            all_sets = BrickSetList()
+            filter_context = {
+                'owners': BrickSetOwnerList.as_columns(),
+                'statuses': BrickSetStatusList.as_columns(),
+                'tags': BrickSetTagList.as_columns(),
+            }
+            all_sets.list(do_theme=True, **filter_context)
+
+            # Load instructions list
+            instructions_list = BrickInstructionsList()
+            instruction_sets = set(instructions_list.sets.keys())
+
+            # Apply all filters manually
+            filtered_records = []
+            for record in all_sets.records:
+                # Apply instructions filter
+                set_id = record.fields.set
+                has_instructions = set_id in instruction_sets
+
+                if status_filter == 'has-missing-instructions' and has_instructions:
+                    continue  # Skip sets that have instructions
+                elif status_filter == '-has-missing-instructions' and not has_instructions:
+                    continue  # Skip sets that don't have instructions
+
+                # Apply other filters manually
+                if search_query and not self._matches_search(record, search_query):
+                    continue
+                if theme_id_filter and not self._matches_theme(record, theme_id_filter):
+                    continue
+                if owner_filter and not self._matches_owner(record, owner_filter):
+                    continue
+                if purchase_location_filter and not self._matches_purchase_location(record, purchase_location_filter):
+                    continue
+                if storage_filter and not self._matches_storage(record, storage_filter):
+                    continue
+                if tag_filter and not self._matches_tag(record, tag_filter):
+                    continue
+
+                filtered_records.append(record)
+
+            # Apply sorting
+            if sort_field:
+                filtered_records = self._sort_records(filtered_records, sort_field, sort_order)
+
+            # Calculate pagination
+            total_count = len(filtered_records)
+            start_index = (page - 1) * per_page
+            end_index = start_index + per_page
+            paginated_records = filtered_records[start_index:end_index]
+
+            # Create result
+            result = BrickSetList()
+            result.records = paginated_records
+
+            # Copy themes from the source that has all sets
+            result.themes = all_sets.themes if hasattr(all_sets, 'themes') else []
+
+            # If themes weren't populated, populate them globally
+            if not result.themes:
+                result._populate_themes_global()
+
+            return result, total_count
+
+        except Exception:
+            # Fall back to normal pagination without instructions filter
+            return self.all_filtered_paginated(
+                search_query, page, per_page, sort_field, sort_order,
+                None, theme_id_filter, owner_filter,
+                purchase_location_filter, storage_filter, tag_filter
+            )
+
+    def _populate_themes_global(self) -> None:
+        """Populate themes list from ALL sets, not just current page"""
+        try:
+            # Load all sets to get all possible themes
+            all_sets = BrickSetList().all()
+            themes = set()
+            for record in all_sets.records:
+                if hasattr(record, 'theme') and hasattr(record.theme, 'name'):
+                    themes.add(record.theme.name)
+
+            self.themes = list(themes)
+            self.themes.sort()
+        except Exception:
+            # Fall back to current page themes
+            self._populate_themes()
+
+    def _matches_search(self, record, search_query: str) -> bool:
+        """Check if record matches search query"""
+        search_lower = search_query.lower()
+        return (search_lower in record.fields.name.lower() or
+                search_lower in record.fields.set.lower())
+
+    def _matches_theme(self, record, theme_id: str) -> bool:
+        """Check if record matches theme filter"""
+        return str(record.fields.theme_id) == theme_id
+
+    def _matches_owner(self, record, owner_filter: str) -> bool:
+        """Check if record matches owner filter"""
+        if not owner_filter.startswith('owner-'):
+            return True
+
+        # Convert owner-uuid format to owner_uuid column name
+        owner_column = owner_filter.replace('-', '_')
+
+        # Check if record has this owner attribute set to 1
+        return hasattr(record.fields, owner_column) and getattr(record.fields, owner_column) == 1
+
+    def _matches_purchase_location(self, record, location_filter: str) -> bool:
+        """Check if record matches purchase location filter"""
+        return record.fields.purchase_location == location_filter
+
+    def _matches_storage(self, record, storage_filter: str) -> bool:
+        """Check if record matches storage filter"""
+        return record.fields.storage == storage_filter
+
+    def _matches_tag(self, record, tag_filter: str) -> bool:
+        """Check if record matches tag filter"""
+        if not tag_filter.startswith('tag-'):
+            return True
+
+        # Convert tag-uuid format to tag_uuid column name
+        tag_column = tag_filter.replace('-', '_')
+
+        # Check if record has this tag attribute set to 1
+        return hasattr(record.fields, tag_column) and getattr(record.fields, tag_column) == 1
+
+    def _sort_records(self, records, sort_field: str, sort_order: str):
+        """Sort records manually"""
+        reverse = sort_order == 'desc'
+
+        if sort_field == 'set':
+            return sorted(records, key=lambda r: r.fields.set, reverse=reverse)
+        elif sort_field == 'name':
+            return sorted(records, key=lambda r: r.fields.name, reverse=reverse)
+        elif sort_field == 'year':
+            return sorted(records, key=lambda r: r.fields.year, reverse=reverse)
+        elif sort_field == 'parts':
+            return sorted(records, key=lambda r: r.fields.number_of_parts, reverse=reverse)
+        # Add more sort fields as needed
+
+        return records
+
     # Sets with a minifigure part damaged
     def damaged_minifigure(self, figure: str, /) -> Self:
         # Save the parameters to the fields
@@ -102,9 +366,7 @@ class BrickSetList(BrickRecordList[BrickSet]):
             override_query=override_query,
             order=order,
             limit=limit,
-            owners=BrickSetOwnerList.as_columns(),
-            statuses=BrickSetStatusList.as_columns(),
-            tags=BrickSetTagList.as_columns(),
+            **context
         ):
             brickset = BrickSet(record=record)
 

bricktracker/sql/minifigure/base/base.sql

@@ -35,3 +35,7 @@ ORDER BY {{ order }}
 {% if limit %}
 LIMIT {{ limit }}
 {% endif %}
+
+{% if offset %}
+OFFSET {{ offset }}
+{% endif %}

bricktracker/sql/minifigure/list/all.sql

@@ -34,6 +34,12 @@ ON "bricktracker_minifigures"."id" IS NOT DISTINCT FROM "problem_join"."id"
 AND "rebrickable_minifigures"."figure" IS NOT DISTINCT FROM "problem_join"."figure"
 {% endblock %}
 
+{% block where %}
+{% if search_query %}
+WHERE (LOWER("rebrickable_minifigures"."name") LIKE LOWER('%{{ search_query }}%'))
+{% endif %}
+{% endblock %}
+
 {% block group %}
 GROUP BY
     "rebrickable_minifigures"."figure"

bricktracker/sql/minifigure/list/all_by_owner.sql

@@ -60,8 +60,15 @@ AND "rebrickable_minifigures"."figure" IS NOT DISTINCT FROM "problem_join"."figu
 {% endblock %}
 
 {% block where %}
+{% set conditions = [] %}
 {% if owner_id and owner_id != 'all' %}
-WHERE "bricktracker_set_owners"."owner_{{ owner_id }}" = 1
+  {% set _ = conditions.append('"bricktracker_set_owners"."owner_' ~ owner_id ~ '" = 1') %}
+{% endif %}
+{% if search_query %}
+  {% set _ = conditions.append('(LOWER("rebrickable_minifigures"."name") LIKE LOWER(\'%' ~ search_query ~ '%\'))') %}
+{% endif %}
+{% if conditions %}
+WHERE {{ conditions | join(' AND ') }}
 {% endif %}
 {% endblock %}
 

bricktracker/sql/part/base/base.sql

@@ -60,3 +60,7 @@ ORDER BY {{ order }}
 {% if limit %}
 LIMIT {{ limit }}
 {% endif %}
+
+{% if offset %}
+OFFSET {{ offset }}
+{% endif %}

bricktracker/sql/part/colors/list_problem.sql

@@ -0,0 +1,19 @@
+SELECT DISTINCT
+    "rebrickable_parts"."color_id" AS "color_id",
+    "rebrickable_parts"."color_name" AS "color_name",
+    "rebrickable_parts"."color_rgb" AS "color_rgb"
+FROM "rebrickable_parts"
+INNER JOIN "bricktracker_parts"
+ON "bricktracker_parts"."part" IS NOT DISTINCT FROM "rebrickable_parts"."part"
+AND "bricktracker_parts"."color" IS NOT DISTINCT FROM "rebrickable_parts"."color_id"
+{% if owner_id and owner_id != 'all' %}
+INNER JOIN "bricktracker_sets"
+ON "bricktracker_parts"."id" IS NOT DISTINCT FROM "bricktracker_sets"."id"
+INNER JOIN "bricktracker_set_owners"
+ON "bricktracker_sets"."id" IS NOT DISTINCT FROM "bricktracker_set_owners"."id"
+{% endif %}
+WHERE ("bricktracker_parts"."missing" > 0 OR "bricktracker_parts"."damaged" > 0)
+{% if owner_id and owner_id != 'all' %}
+AND "bricktracker_set_owners"."owner_{{ owner_id }}" = 1
+{% endif %}
+ORDER BY "rebrickable_parts"."color_name" ASC

bricktracker/sql/part/list/all.sql

@@ -27,8 +27,19 @@ AND "bricktracker_parts"."figure" IS NOT DISTINCT FROM "bricktracker_minifigures
 {% endblock %}
 
 {% block where %}
+{% set conditions = [] %}
 {% if color_id and color_id != 'all' %}
-WHERE "bricktracker_parts"."color" = {{ color_id }}
+  {% set _ = conditions.append('"bricktracker_parts"."color" = ' ~ color_id) %}
+{% endif %}
+{% if search_query %}
+  {% set search_condition = '(LOWER("rebrickable_parts"."name") LIKE LOWER(\'%' ~ search_query ~ '%\') OR LOWER("rebrickable_parts"."color_name") LIKE LOWER(\'%' ~ search_query ~ '%\') OR LOWER("bricktracker_parts"."part") LIKE LOWER(\'%' ~ search_query ~ '%\'))' %}
+  {% set _ = conditions.append(search_condition) %}
+{% endif %}
+{% if skip_spare_parts %}
+  {% set _ = conditions.append('"bricktracker_parts"."spare" = 0') %}
+{% endif %}
+{% if conditions %}
+WHERE {{ conditions | join(' AND ') }}
 {% endif %}
 {% endblock %}
 

bricktracker/sql/part/list/all_by_owner.sql

@@ -56,17 +56,22 @@ AND "bricktracker_parts"."figure" IS NOT DISTINCT FROM "bricktracker_minifigures
 {% endblock %}
 
 {% block where %}
-{% set has_where = false %}
+{% set conditions = [] %}
 {% if owner_id and owner_id != 'all' %}
-WHERE "bricktracker_set_owners"."owner_{{ owner_id }}" = 1
-{% set has_where = true %}
+  {% set _ = conditions.append('"bricktracker_set_owners"."owner_' ~ owner_id ~ '" = 1') %}
 {% endif %}
 {% if color_id and color_id != 'all' %}
-{% if has_where %}
-AND "bricktracker_parts"."color" = {{ color_id }}
-{% else %}
-WHERE "bricktracker_parts"."color" = {{ color_id }}
+  {% set _ = conditions.append('"bricktracker_parts"."color" = ' ~ color_id) %}
 {% endif %}
+{% if search_query %}
+  {% set search_condition = '(LOWER("rebrickable_parts"."name") LIKE LOWER(\'%' ~ search_query ~ '%\') OR LOWER("rebrickable_parts"."color_name") LIKE LOWER(\'%' ~ search_query ~ '%\') OR LOWER("bricktracker_parts"."part") LIKE LOWER(\'%' ~ search_query ~ '%\'))' %}
+  {% set _ = conditions.append(search_condition) %}
+{% endif %}
+{% if skip_spare_parts %}
+  {% set _ = conditions.append('"bricktracker_parts"."spare" = 0') %}
+{% endif %}
+{% if conditions %}
+WHERE {{ conditions | join(' AND ') }}
 {% endif %}
 {% endblock %}
 

bricktracker/sql/part/list/problem.sql

@@ -1,30 +1,78 @@
 {% extends 'part/base/base.sql' %}
 
 {% block total_missing %}
+{% if owner_id and owner_id != 'all' %}
+SUM(CASE WHEN "bricktracker_set_owners"."owner_{{ owner_id }}" = 1 THEN "bricktracker_parts"."missing" ELSE 0 END) AS "total_missing",
+{% else %}
 SUM("bricktracker_parts"."missing") AS "total_missing",
+{% endif %}
 {% endblock %}
 
 {% block total_damaged %}
+{% if owner_id and owner_id != 'all' %}
+SUM(CASE WHEN "bricktracker_set_owners"."owner_{{ owner_id }}" = 1 THEN "bricktracker_parts"."damaged" ELSE 0 END) AS "total_damaged",
+{% else %}
 SUM("bricktracker_parts"."damaged") AS "total_damaged",
+{% endif %}
+{% endblock %}
+
+{% block total_quantity %}
+{% if owner_id and owner_id != 'all' %}
+SUM(CASE WHEN "bricktracker_set_owners"."owner_{{ owner_id }}" = 1 THEN "bricktracker_parts"."quantity" * IFNULL("bricktracker_minifigures"."quantity", 1) ELSE 0 END) AS "total_quantity",
+{% else %}
+SUM("bricktracker_parts"."quantity" * IFNULL("bricktracker_minifigures"."quantity", 1)) AS "total_quantity",
+{% endif %}
 {% endblock %}
 
 {% block total_sets %}
-IFNULL(COUNT("bricktracker_parts"."id"), 0)  - IFNULL(COUNT("bricktracker_parts"."figure"), 0) AS "total_sets",
+{% if owner_id and owner_id != 'all' %}
+COUNT(DISTINCT CASE WHEN "bricktracker_set_owners"."owner_{{ owner_id }}" = 1 THEN "bricktracker_parts"."id" ELSE NULL END) AS "total_sets",
+{% else %}
+COUNT(DISTINCT "bricktracker_parts"."id") AS "total_sets",
+{% endif %}
 {% endblock %}
 
 {% block total_minifigures %}
+{% if owner_id and owner_id != 'all' %}
+SUM(CASE WHEN "bricktracker_set_owners"."owner_{{ owner_id }}" = 1 THEN IFNULL("bricktracker_minifigures"."quantity", 0) ELSE 0 END) AS "total_minifigures"
+{% else %}
 SUM(IFNULL("bricktracker_minifigures"."quantity", 0)) AS "total_minifigures"
+{% endif %}
 {% endblock %}
 
 {% block join %}
+-- Join with sets to get owner information
+INNER JOIN "bricktracker_sets"
+ON "bricktracker_parts"."id" IS NOT DISTINCT FROM "bricktracker_sets"."id"
+
+-- Left join with set owners (using dynamic columns)
+LEFT JOIN "bricktracker_set_owners"
+ON "bricktracker_sets"."id" IS NOT DISTINCT FROM "bricktracker_set_owners"."id"
+
+-- Left join with minifigures
 LEFT JOIN "bricktracker_minifigures"
 ON "bricktracker_parts"."id" IS NOT DISTINCT FROM "bricktracker_minifigures"."id"
 AND "bricktracker_parts"."figure" IS NOT DISTINCT FROM "bricktracker_minifigures"."figure"
 {% endblock %}
 
 {% block where %}
-WHERE "bricktracker_parts"."missing" > 0
-OR "bricktracker_parts"."damaged" > 0
+{% set conditions = [] %}
+-- Always filter for problematic parts
+{% set _ = conditions.append('("bricktracker_parts"."missing" > 0 OR "bricktracker_parts"."damaged" > 0)') %}
+{% if owner_id and owner_id != 'all' %}
+  {% set _ = conditions.append('"bricktracker_set_owners"."owner_' ~ owner_id ~ '" = 1') %}
+{% endif %}
+{% if color_id and color_id != 'all' %}
+  {% set _ = conditions.append('"bricktracker_parts"."color" = ' ~ color_id) %}
+{% endif %}
+{% if search_query %}
+  {% set search_condition = '(LOWER("rebrickable_parts"."name") LIKE LOWER(\'%' ~ search_query ~ '%\') OR LOWER("rebrickable_parts"."color_name") LIKE LOWER(\'%' ~ search_query ~ '%\') OR LOWER("bricktracker_parts"."part") LIKE LOWER(\'%' ~ search_query ~ '%\'))' %}
+  {% set _ = conditions.append(search_condition) %}
+{% endif %}
+{% if skip_spare_parts %}
+  {% set _ = conditions.append('"bricktracker_parts"."spare" = 0') %}
+{% endif %}
+WHERE {{ conditions | join(' AND ') }}
 {% endblock %}
 
 {% block group %}

bricktracker/sql/set/base/base.sql

@@ -49,3 +49,7 @@ ORDER BY {{ order }}
 {% if limit %}
 LIMIT {{ limit }}
 {% endif %}
+
+{% if offset %}
+OFFSET {{ offset }}
+{% endif %}

bricktracker/sql/set/list/all.sql

@@ -1 +1,8 @@
 {% extends 'set/base/full.sql' %}
+
+{% block where %}
+{% if search_query %}
+WHERE (LOWER("rebrickable_sets"."name") LIKE LOWER('%{{ search_query }}%')
+   OR LOWER("rebrickable_sets"."set") LIKE LOWER('%{{ search_query }}%'))
+{% endif %}
+{% endblock %}

bricktracker/sql/set/list/all_filtered.sql

@@ -0,0 +1,69 @@
+{% extends 'set/base/full.sql' %}
+
+{% block where %}
+WHERE 1=1
+{% if search_query %}
+AND (LOWER("rebrickable_sets"."name") LIKE LOWER('%{{ search_query }}%')
+   OR LOWER("rebrickable_sets"."set") LIKE LOWER('%{{ search_query }}%'))
+{% endif %}
+
+{% if theme_filter %}
+AND "rebrickable_sets"."theme_id" = '{{ theme_filter }}'
+{% endif %}
+
+{% if storage_filter %}
+AND "bricktracker_sets"."storage" = '{{ storage_filter }}'
+{% endif %}
+
+{% if purchase_location_filter %}
+AND "bricktracker_sets"."purchase_location" = '{{ purchase_location_filter }}'
+{% endif %}
+
+{% if status_filter %}
+{% if status_filter == 'has-missing' %}
+AND IFNULL("problem_join"."total_missing", 0) > 0
+{% elif status_filter == '-has-missing' %}
+AND IFNULL("problem_join"."total_missing", 0) = 0
+{% elif status_filter == 'has-damaged' %}
+AND IFNULL("problem_join"."total_damaged", 0) > 0
+{% elif status_filter == '-has-damaged' %}
+AND IFNULL("problem_join"."total_damaged", 0) = 0
+{% elif status_filter == 'has-storage' %}
+AND "bricktracker_sets"."storage" IS NOT NULL AND "bricktracker_sets"."storage" != ''
+{% elif status_filter == '-has-storage' %}
+AND ("bricktracker_sets"."storage" IS NULL OR "bricktracker_sets"."storage" = '')
+{% elif status_filter.startswith('status-') %}
+AND EXISTS (
+    SELECT 1 FROM "bricktracker_set_statuses"
+    WHERE "bricktracker_set_statuses"."id" = "bricktracker_sets"."id"
+    AND "bricktracker_set_statuses"."{{ status_filter.replace('-', '_') }}" = 1
+)
+{% elif status_filter.startswith('-status-') %}
+AND NOT EXISTS (
+    SELECT 1 FROM "bricktracker_set_statuses"
+    WHERE "bricktracker_set_statuses"."id" = "bricktracker_sets"."id"
+    AND "bricktracker_set_statuses"."{{ status_filter[1:].replace('-', '_') }}" = 1
+)
+{% endif %}
+{% endif %}
+
+{% if owner_filter %}
+{% if owner_filter.startswith('owner-') %}
+AND EXISTS (
+    SELECT 1 FROM "bricktracker_set_owners"
+    WHERE "bricktracker_set_owners"."id" = "bricktracker_sets"."id"
+    AND "bricktracker_set_owners"."{{ owner_filter.replace('-', '_') }}" = 1
+)
+{% endif %}
+{% endif %}
+
+{% if tag_filter %}
+{% if tag_filter.startswith('tag-') %}
+AND EXISTS (
+    SELECT 1 FROM "bricktracker_set_tags"
+    WHERE "bricktracker_set_tags"."id" = "bricktracker_sets"."id"
+    AND "bricktracker_set_tags"."{{ tag_filter.replace('-', '_') }}" = 1
+)
+{% endif %}
+{% endif %}
+{% endblock %}

bricktracker/template_filters.py

@@ -0,0 +1,13 @@
+"""Custom Jinja2 template filters for BrickTracker."""
+
+from urllib.parse import urlparse, parse_qs, urlencode, urlunparse
+
+
+def replace_query_filter(url, key, value):
+    """Replace or add a query parameter in a URL"""
+    parsed = urlparse(url)
+    query_dict = parse_qs(parsed.query, keep_blank_values=True)
+    query_dict[key] = [str(value)]
+
+    new_query = urlencode(query_dict, doseq=True)
+    return urlunparse((parsed.scheme, parsed.netloc, parsed.path, parsed.params, new_query, parsed.fragment))

bricktracker/version.py

@@ -1,4 +1,4 @@
 from typing import Final
 
-__version__: Final[str] = '1.2.4'
+__version__: Final[str] = '1.2.5'
 __database_version__: Final[int] = 17

bricktracker/views/minifigure.py

@@ -1,8 +1,9 @@
-from flask import Blueprint, render_template, request
+from flask import Blueprint, current_app, render_template, request
 
 from .exceptions import exception_handler
 from ..minifigure import BrickMinifigure
 from ..minifigure_list import BrickMinifigureList
+from ..pagination_helper import get_pagination_config, build_pagination_context, get_request_params
 from ..set_list import BrickSetList, set_metadata_lists
 from ..set_owner_list import BrickSetOwnerList
 
@@ -13,24 +14,52 @@ minifigure_page = Blueprint('minifigure', __name__, url_prefix='/minifigures')
 @minifigure_page.route('/', methods=['GET'])
 @exception_handler(__file__)
 def list() -> str:
-    # Get owner filter from request
+    # Get filter parameters from request
     owner_id = request.args.get('owner', 'all')
+    search_query, sort_field, sort_order, page = get_request_params()
 
-    # Get minifigures filtered by owner
-    if owner_id == 'all' or owner_id is None or owner_id == '':
-        minifigures = BrickMinifigureList().all()
+    # Get pagination configuration
+    per_page, is_mobile = get_pagination_config('minifigures')
+    use_pagination = per_page > 0
+
+    if use_pagination:
+        # PAGINATION MODE - Server-side pagination with search
+        minifigures, total_count = BrickMinifigureList().all_filtered_paginated(
+            owner_id=owner_id,
+            search_query=search_query,
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order
+        )
+
+        pagination_context = build_pagination_context(page, per_page, total_count, is_mobile)
     else:
-        minifigures = BrickMinifigureList().all_by_owner(owner_id)
+        # ORIGINAL MODE - Single page with all data for client-side search
+        if owner_id == 'all' or owner_id is None or owner_id == '':
+            minifigures = BrickMinifigureList().all()
+        else:
+            minifigures = BrickMinifigureList().all_by_owner(owner_id)
+
+        pagination_context = None
 
     # Get list of owners for filter dropdown
     owners = BrickSetOwnerList.list()
 
-    return render_template(
-        'minifigures.html',
-        table_collection=minifigures,
-        owners=owners,
-        selected_owner=owner_id,
-    )
+    template_context = {
+        'table_collection': minifigures,
+        'owners': owners,
+        'selected_owner': owner_id,
+        'search_query': search_query,
+        'use_pagination': use_pagination,
+        'current_sort': sort_field,
+        'current_order': sort_order
+    }
+
+    if pagination_context:
+        template_context['pagination'] = pagination_context
+
+    return render_template('minifigures.html', **template_context)
 
 
 # Minifigure details

bricktracker/views/part.py

@@ -2,6 +2,7 @@ from flask import Blueprint, render_template, request
 
 from .exceptions import exception_handler
 from ..minifigure_list import BrickMinifigureList
+from ..pagination_helper import get_pagination_config, build_pagination_context, get_request_params
 from ..part import BrickPart
 from ..part_list import BrickPartList
 from ..set_list import BrickSetList, set_metadata_lists
@@ -15,13 +16,32 @@ part_page = Blueprint('part', __name__, url_prefix='/parts')
 @part_page.route('/', methods=['GET'])
 @exception_handler(__file__)
 def list() -> str:
-    
     # Get filter parameters from request
     owner_id = request.args.get('owner', 'all')
     color_id = request.args.get('color', 'all')
+    search_query, sort_field, sort_order, page = get_request_params()
 
-    # Get parts with filters applied
-    parts = BrickPartList().all_filtered(owner_id, color_id)
+    # Get pagination configuration
+    per_page, is_mobile = get_pagination_config('parts')
+    use_pagination = per_page > 0
+
+    if use_pagination:
+        # PAGINATION MODE - Server-side pagination with search
+        parts, total_count = BrickPartList().all_filtered_paginated(
+            owner_id=owner_id,
+            color_id=color_id,
+            search_query=search_query,
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order
+        )
+
+        pagination_context = build_pagination_context(page, per_page, total_count, is_mobile)
+    else:
+        # ORIGINAL MODE - Single page with all data for client-side search
+        parts = BrickPartList().all_filtered(owner_id, color_id)
+        pagination_context = None
 
     # Get list of owners for filter dropdown
     owners = BrickSetOwnerList.list()
@@ -34,23 +54,80 @@ def list() -> str:
 
     colors = BrickSQL().fetchall('part/colors/list', **color_context)
 
-    return render_template(
-        'parts.html',
-        table_collection=parts,
-        owners=owners,
-        selected_owner=owner_id,
-        colors=colors,
-        selected_color=color_id,
-    )
+    template_context = {
+        'table_collection': parts,
+        'owners': owners,
+        'selected_owner': owner_id,
+        'colors': colors,
+        'selected_color': color_id,
+        'search_query': search_query,
+        'use_pagination': use_pagination,
+        'current_sort': sort_field,
+        'current_order': sort_order
+    }
+
+    if pagination_context:
+        template_context['pagination'] = pagination_context
+
+    return render_template('parts.html', **template_context)
+
 
 
 # Problem
 @part_page.route('/problem', methods=['GET'])
 @exception_handler(__file__)
 def problem() -> str:
+    # Get filter parameters from request
+    owner_id = request.args.get('owner', 'all')
+    color_id = request.args.get('color', 'all')
+    search_query, sort_field, sort_order, page = get_request_params()
+
+    # Get pagination configuration
+    per_page, is_mobile = get_pagination_config('problems')
+    use_pagination = per_page > 0
+
+    if use_pagination:
+        # PAGINATION MODE - Server-side pagination with search and filters
+        parts, total_count = BrickPartList().problem_paginated(
+            owner_id=owner_id,
+            color_id=color_id,
+            search_query=search_query,
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order
+        )
+
+        pagination_context = build_pagination_context(page, per_page, total_count, is_mobile)
+    else:
+        # ORIGINAL MODE - Single page with all data for client-side search
+        parts = BrickPartList().problem_filtered(owner_id, color_id)
+        pagination_context = None
+
+    # Get list of owners for filter dropdown
+    owners = BrickSetOwnerList.list()
+
+    # Get list of colors for filter dropdown
+    # Prepare context for color query (filter by owner if selected)
+    color_context = {}
+    if owner_id != 'all':
+        color_context['owner_id'] = owner_id
+
+    # Get colors from problem parts (following same pattern as parts page)
+    colors = BrickSQL().fetchall('part/colors/list_problem', **color_context)
+
     return render_template(
         'problem.html',
-        table_collection=BrickPartList().problem()
+        table_collection=parts,
+        pagination=pagination_context,
+        search_query=search_query,
+        sort_field=sort_field,
+        sort_order=sort_order,
+        use_pagination=use_pagination,
+        owners=owners,
+        colors=colors,
+        selected_owner=owner_id,
+        selected_color=color_id
     )
 
 

bricktracker/views/set.py

@@ -15,6 +15,7 @@ from werkzeug.wrappers.response import Response
 from .exceptions import exception_handler
 from ..exceptions import ErrorException
 from ..minifigure import BrickMinifigure
+from ..pagination_helper import get_pagination_config, build_pagination_context, get_request_params
 from ..part import BrickPart
 from ..rebrickable_set import RebrickableSet
 from ..set import BrickSet
@@ -35,12 +36,63 @@ set_page = Blueprint('set', __name__, url_prefix='/sets')
 @set_page.route('/', methods=['GET'])
 @exception_handler(__file__)
 def list() -> str:
-    return render_template(
-        'sets.html',
-        collection=BrickSetList().all(),
-        brickset_statuses=BrickSetStatusList.list(),
+    # Get filter parameters from request
+    search_query, sort_field, sort_order, page = get_request_params()
+
+    # Get filter parameters
+    status_filter = request.args.get('status')
+    theme_filter = request.args.get('theme')
+    owner_filter = request.args.get('owner')
+    purchase_location_filter = request.args.get('purchase_location')
+    storage_filter = request.args.get('storage')
+    tag_filter = request.args.get('tag')
+
+    # Get pagination configuration
+    per_page, is_mobile = get_pagination_config('sets')
+    use_pagination = per_page > 0
+
+    if use_pagination:
+        # PAGINATION MODE - Server-side pagination with search and filters
+        sets, total_count = BrickSetList().all_filtered_paginated(
+            search_query=search_query,
+            page=page,
+            per_page=per_page,
+            sort_field=sort_field,
+            sort_order=sort_order,
+            status_filter=status_filter,
+            theme_filter=theme_filter,
+            owner_filter=owner_filter,
+            purchase_location_filter=purchase_location_filter,
+            storage_filter=storage_filter,
+            tag_filter=tag_filter
+        )
+
+        pagination_context = build_pagination_context(page, per_page, total_count, is_mobile)
+    else:
+        # ORIGINAL MODE - Single page with all data for client-side search
+        sets = BrickSetList().all()
+        pagination_context = None
+
+    template_context = {
+        'collection': sets,
+        'search_query': search_query,
+        'use_pagination': use_pagination,
+        'current_sort': sort_field,
+        'current_order': sort_order,
+        'current_status_filter': status_filter,
+        'current_theme_filter': theme_filter,
+        'current_owner_filter': owner_filter,
+        'current_purchase_location_filter': purchase_location_filter,
+        'current_storage_filter': storage_filter,
+        'current_tag_filter': tag_filter,
+        'brickset_statuses': BrickSetStatusList.list(),
         **set_metadata_lists(as_class=True)
-    )
+    }
+
+    if pagination_context:
+        template_context['pagination'] = pagination_context
+
+    return render_template('sets.html', **template_context)
 
 
 # Change the value of purchase date

bricktracker/wish_list.py

@@ -19,17 +19,24 @@ class BrickWishList(BrickRecordList[BrickWish]):
     # Queries
     select_query: str = 'wish/list/all'
 
-    # All the wished sets
-    def all(self, /) -> Self:
+    # Implementation of abstract list method
+    def list(self, /, *, override_query: str | None = None, **context) -> None:
+        # Use provided order or default
+        order = context.pop('order', current_app.config['WISHES_DEFAULT_ORDER'])
+
         # Load the wished sets from the database
         for record in self.select(
-            order=current_app.config['WISHES_DEFAULT_ORDER'],
+            override_query=override_query,
+            order=order,
             owners=BrickWishOwnerList.as_columns(),
+            **context
         ):
             brickwish = BrickWish(record=record)
-
             self.records.append(brickwish)
 
+    # All the wished sets
+    def all(self, /) -> Self:
+        self.list()
         return self
 
     # Add a set to the wishlist

static/scripts/collapsible-state.js

@@ -0,0 +1,442 @@
+/**
+ * Shared collapsible state management for filters and sort sections
+ * Handles BK_SHOW_GRID_FILTERS and BK_SHOW_GRID_SORT configuration with user preferences
+ */
+
+// Generic state management for collapsible sections (filter and sort)
+function initializeCollapsibleState(elementId, storageKey) {
+  const element = document.getElementById(elementId);
+  const toggleButton = document.querySelector(`[data-bs-target="#${elementId}"]`);
+
+  if (!element || !toggleButton) return;
+
+  // Restore state on page load
+  const savedState = sessionStorage.getItem(storageKey);
+  if (savedState === 'open') {
+    // User explicitly opened it
+    element.classList.add('show');
+    toggleButton.setAttribute('aria-expanded', 'true');
+  } else if (savedState === 'closed') {
+    // User explicitly closed it, override template state
+    element.classList.remove('show');
+    toggleButton.setAttribute('aria-expanded', 'false');
+  }
+  // If no saved state, keep the template state (respects BK_SHOW_GRID_FILTERS/BK_SHOW_GRID_SORT)
+
+  // Listen for toggle events
+  element.addEventListener('show.bs.collapse', () => {
+    sessionStorage.setItem(storageKey, 'open');
+  });
+
+  element.addEventListener('hide.bs.collapse', () => {
+    sessionStorage.setItem(storageKey, 'closed');
+  });
+}
+
+// Initialize filter and sort states for a specific page
+function initializePageCollapsibleStates(pagePrefix, filterElementId = 'table-filter', sortElementId = 'table-sort') {
+  initializeCollapsibleState(filterElementId, `${pagePrefix}-filter-state`);
+  initializeCollapsibleState(sortElementId, `${pagePrefix}-sort-state`);
+
+  // Initialize sort icons based on current URL parameters (for all pages)
+  const urlParams = new URLSearchParams(window.location.search);
+  const currentSort = urlParams.get('sort');
+  const currentOrder = urlParams.get('order');
+  if (currentSort || currentOrder) {
+    updateSortIcon(currentOrder);
+  }
+}
+
+// Shared function to preserve filter state during filter changes
+function preserveCollapsibleStateOnChange(elementId, storageKey) {
+  const element = document.getElementById(elementId);
+  const wasOpen = element && element.classList.contains('show');
+
+  // Store the state to restore after page reload
+  if (wasOpen) {
+    sessionStorage.setItem(storageKey, 'open');
+  }
+}
+
+// Setup color dropdown with visual indicators (shared implementation)
+function setupColorDropdown() {
+  const colorSelect = document.getElementById('filter-color');
+  if (!colorSelect) return;
+
+  // Merge duplicate color options where one has color_rgb and the other is None
+  const colorMap = new Map();
+  const allOptions = colorSelect.querySelectorAll('option[data-color-id]');
+
+  // First pass: collect all options by color_id
+  allOptions.forEach(option => {
+    const colorId = option.dataset.colorId;
+    const colorRgb = option.dataset.colorRgb;
+    const colorName = option.textContent.trim();
+
+    if (!colorMap.has(colorId)) {
+      colorMap.set(colorId, []);
+    }
+    colorMap.get(colorId).push({
+      element: option,
+      colorRgb: colorRgb,
+      colorName: colorName,
+      selected: option.selected
+    });
+  });
+
+  // Second pass: merge duplicates, keeping the one with color_rgb
+  colorMap.forEach((options, colorId) => {
+    if (options.length > 1) {
+      // Find option with color_rgb (not empty/null/undefined)
+      const withRgb = options.find(opt => opt.colorRgb && opt.colorRgb !== 'None' && opt.colorRgb !== '');
+      const withoutRgb = options.find(opt => !opt.colorRgb || opt.colorRgb === 'None' || opt.colorRgb === '');
+
+      if (withRgb && withoutRgb) {
+        // Keep the selected state from either option
+        const wasSelected = withRgb.selected || withoutRgb.selected;
+
+        // Update the option with RGB to be selected if either was selected
+        if (wasSelected) {
+          withRgb.element.selected = true;
+        }
+
+        // Remove the option without RGB
+        withoutRgb.element.remove();
+      }
+    }
+  });
+
+  // Add color squares to remaining option text
+  const remainingOptions = colorSelect.querySelectorAll('option[data-color-rgb]');
+  remainingOptions.forEach(option => {
+    const colorRgb = option.dataset.colorRgb;
+    const colorId = option.dataset.colorId;
+    const colorName = option.textContent.trim();
+
+    if (colorRgb && colorRgb !== 'None' && colorRgb !== '' && colorId !== '9999') {
+      // Create a visual indicator (using Unicode square)
+      option.textContent = `${colorName}`; //■
+      //option.style.color = `#${colorRgb}`;
+    }
+  });
+}
+
+// Check if pagination mode is enabled for a specific table
+function isPaginationModeForTable(tableId) {
+  const tableElement = document.querySelector(`#${tableId}`);
+  return tableElement && tableElement.getAttribute('data-table') === 'false';
+}
+
+// Update sort icon based on current sort direction
+function updateSortIcon(sortDirection = null) {
+  // Find the main sort icon (could be in grid-sort or table-sort)
+  const sortIcon = document.querySelector('#grid-sort .ri-sort-asc, #grid-sort .ri-sort-desc, #table-sort .ri-sort-asc, #table-sort .ri-sort-desc');
+
+  if (!sortIcon) return;
+
+  // Remove existing sort classes
+  sortIcon.classList.remove('ri-sort-asc', 'ri-sort-desc');
+
+  // Add appropriate class based on sort direction
+  if (sortDirection === 'desc') {
+    sortIcon.classList.add('ri-sort-desc');
+  } else {
+    sortIcon.classList.add('ri-sort-asc');
+  }
+}
+
+// Initialize sort button states and icons for pagination mode
+window.initializeSortButtonStates = function(currentSort, currentOrder) {
+  const sortButtons = document.querySelectorAll('[data-sort-attribute]');
+
+  // Update main sort icon
+  updateSortIcon(currentOrder);
+
+  if (currentSort) {
+    sortButtons.forEach(btn => {
+      // Clear all buttons first
+      btn.classList.remove('btn-primary');
+      btn.classList.add('btn-outline-primary');
+      btn.removeAttribute('data-current-direction');
+
+      // Set active state for current sort
+      if (btn.dataset.sortAttribute === currentSort) {
+        btn.classList.remove('btn-outline-primary');
+        btn.classList.add('btn-primary');
+        btn.dataset.currentDirection = currentOrder || 'asc';
+      }
+    });
+  }
+};
+
+// Shared sort button setup function
+window.setupSharedSortButtons = function(tableId, tableInstanceGlobal, columnMap) {
+  const sortButtons = document.querySelectorAll('[data-sort-attribute]');
+  const clearButton = document.querySelector('[data-sort-clear]');
+  const isPaginationMode = isPaginationModeForTable(tableId);
+
+  sortButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const attribute = button.dataset.sortAttribute;
+      const isDesc = button.dataset.sortDesc === 'true';
+
+      if (isPaginationMode) {
+        // PAGINATION MODE - Server-side sorting via URL parameters
+        const currentUrl = new URL(window.location);
+        const currentSort = currentUrl.searchParams.get('sort');
+        const currentOrder = currentUrl.searchParams.get('order');
+        const isCurrentlyActive = currentSort === attribute;
+
+        let newDirection;
+        if (isCurrentlyActive) {
+          // Toggle direction if same attribute
+          newDirection = currentOrder === 'asc' ? 'desc' : 'asc';
+        } else {
+          // Use default direction for new attribute
+          newDirection = isDesc ? 'desc' : 'asc';
+        }
+
+        // Set sort parameters and reset to first page
+        currentUrl.searchParams.set('sort', attribute);
+        currentUrl.searchParams.set('order', newDirection);
+        currentUrl.searchParams.set('page', '1');
+
+        // Navigate to sorted results
+        window.location.href = currentUrl.toString();
+
+      } else {
+        // ORIGINAL MODE - Client-side sorting via Simple DataTables
+        const columnIndex = columnMap[attribute];
+        const tableInstance = window[tableInstanceGlobal];
+
+        if (columnIndex !== undefined && tableInstance) {
+          // Determine sort direction
+          const isCurrentlyActive = button.classList.contains('btn-primary');
+          const currentDirection = button.dataset.currentDirection || (isDesc ? 'desc' : 'asc');
+          const newDirection = isCurrentlyActive ?
+            (currentDirection === 'asc' ? 'desc' : 'asc') :
+            (isDesc ? 'desc' : 'asc');
+
+          // Clear other active buttons
+          sortButtons.forEach(btn => {
+            btn.classList.remove('btn-primary');
+            btn.classList.add('btn-outline-primary');
+            btn.removeAttribute('data-current-direction');
+          });
+
+          // Mark this button as active
+          button.classList.remove('btn-outline-primary');
+          button.classList.add('btn-primary');
+          button.dataset.currentDirection = newDirection;
+
+          // Apply sort using Simple DataTables API
+          tableInstance.table.columns.sort(columnIndex, newDirection);
+
+          // Update sort icon to reflect new direction
+          updateSortIcon(newDirection);
+        }
+      }
+    });
+  });
+
+  if (clearButton) {
+    clearButton.addEventListener('click', () => {
+      if (isPaginationMode) {
+        // PAGINATION MODE - Clear server-side sorting via URL parameters
+        const currentUrl = new URL(window.location);
+        currentUrl.searchParams.delete('sort');
+        currentUrl.searchParams.delete('order');
+        currentUrl.searchParams.set('page', '1');
+        window.location.href = currentUrl.toString();
+
+      } else {
+        // ORIGINAL MODE - Clear client-side sorting
+        // Clear all sort buttons
+        sortButtons.forEach(btn => {
+          btn.classList.remove('btn-primary');
+          btn.classList.add('btn-outline-primary');
+          btn.removeAttribute('data-current-direction');
+        });
+
+        // Reset sort icon to default ascending
+        updateSortIcon('asc');
+
+        // Reset table sort - remove all sorting
+        const tableInstance = window[tableInstanceGlobal];
+        if (tableInstance) {
+          const tableElement = document.querySelector(`#${tableId}`);
+          const currentPerPage = tableInstance.table.options.perPage;
+          tableInstance.table.destroy();
+
+          setTimeout(() => {
+            // Create new instance using the globally available BrickTable class
+            const newInstance = new window.BrickTable(tableElement, currentPerPage);
+            window[tableInstanceGlobal] = newInstance;
+
+            // Re-enable search functionality
+            newInstance.table.searchable = true;
+          }, 50);
+        }
+      }
+    });
+  }
+};
+
+// =================================================================
+// SHARED FUNCTIONS FOR PAGE-SPECIFIC OPERATIONS
+// =================================================================
+
+// Shared pagination mode detection (works for any table/grid ID)
+window.isPaginationModeForPage = function(elementId, attributeName = 'data-table') {
+  const element = document.querySelector(`#${elementId}`);
+  return element && element.getAttribute(attributeName) === 'false';
+};
+
+// Shared URL parameter update helper
+window.updateUrlParams = function(params, resetPage = true) {
+  const currentUrl = new URL(window.location);
+
+  // Apply parameter updates
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === null || value === undefined || value === '' || value === 'all') {
+      currentUrl.searchParams.delete(key);
+    } else {
+      currentUrl.searchParams.set(key, value);
+    }
+  });
+
+  // Reset to page 1 if requested
+  if (resetPage) {
+    currentUrl.searchParams.set('page', '1');
+  }
+
+  // Navigate to updated URL
+  window.location.href = currentUrl.toString();
+};
+
+// Shared filter application (supports owner and color filters)
+window.applyPageFilters = function(tableId) {
+  const ownerSelect = document.getElementById('filter-owner');
+  const colorSelect = document.getElementById('filter-color');
+  const params = {};
+
+  // Handle owner filter
+  if (ownerSelect) {
+    params.owner = ownerSelect.value;
+  }
+
+  // Handle color filter
+  if (colorSelect) {
+    params.color = colorSelect.value;
+  }
+
+  // Update URL with new parameters
+  window.updateUrlParams(params, true);
+};
+
+// Shared search setup for both pagination and client-side modes
+window.setupPageSearch = function(tableId, searchInputId, clearButtonId, tableInstanceGlobal) {
+  const searchInput = document.getElementById(searchInputId);
+  const searchClear = document.getElementById(clearButtonId);
+
+  if (!searchInput || !searchClear) return;
+
+  const isPaginationMode = window.isPaginationModeForPage(tableId);
+
+  if (isPaginationMode) {
+    // PAGINATION MODE - Server-side search with Enter key
+    searchInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const searchValue = e.target.value.trim();
+        window.updateUrlParams({ search: searchValue }, true);
+      }
+    });
+
+    // Clear search
+    searchClear.addEventListener('click', () => {
+      searchInput.value = '';
+      window.updateUrlParams({ search: null }, true);
+    });
+
+  } else {
+    // ORIGINAL MODE - Client-side instant search via Simple DataTables
+    const setupClientSearch = () => {
+      const tableElement = document.querySelector(`table[data-table="true"]#${tableId}`);
+      const tableInstance = window[tableInstanceGlobal];
+
+      if (tableElement && tableInstance) {
+        // Enable search functionality
+        tableInstance.table.searchable = true;
+
+        // Instant search as user types
+        searchInput.addEventListener('input', (e) => {
+          const searchValue = e.target.value.trim();
+          tableInstance.table.search(searchValue);
+        });
+
+        // Clear search
+        searchClear.addEventListener('click', () => {
+          searchInput.value = '';
+          tableInstance.table.search('');
+        });
+      } else {
+        // If table instance not ready, try again
+        setTimeout(setupClientSearch, 100);
+      }
+    };
+
+    setTimeout(setupClientSearch, 100);
+  }
+};
+
+// Shared function to preserve filter state and apply filters
+window.applyFiltersAndKeepState = function(tableId, storageKey) {
+  const filterElement = document.getElementById('table-filter');
+  const wasOpen = filterElement && filterElement.classList.contains('show');
+
+  // Apply the filters
+  window.applyPageFilters(tableId);
+
+  // Store the state to restore after page reload
+  if (wasOpen) {
+    sessionStorage.setItem(storageKey, 'open');
+  }
+};
+
+// Shared initialization for table pages (parts, problems, minifigures)
+window.initializeTablePage = function(config) {
+  const {
+    pagePrefix,         // e.g., 'parts', 'problems', 'minifigures'
+    tableId,           // e.g., 'parts', 'problems', 'minifigures'
+    searchInputId = 'table-search',
+    clearButtonId = 'table-search-clear',
+    tableInstanceGlobal, // e.g., 'partsTableInstance', 'problemsTableInstance'
+    sortColumnMap,      // Column mapping for sort buttons
+    hasColorDropdown = true
+  } = config;
+
+  // Initialize collapsible states (filter and sort)
+  initializePageCollapsibleStates(pagePrefix);
+
+  // Setup search functionality
+  window.setupPageSearch(tableId, searchInputId, clearButtonId, tableInstanceGlobal);
+
+  // Setup color dropdown if needed
+  if (hasColorDropdown) {
+    setupColorDropdown();
+  }
+
+  // Setup sort buttons with shared functionality
+  if (sortColumnMap) {
+    window.setupSharedSortButtons(tableId, tableInstanceGlobal, sortColumnMap);
+  }
+
+  // Initialize sort button states and icons for pagination mode
+  if (window.isPaginationModeForPage(tableId)) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentSort = urlParams.get('sort');
+    const currentOrder = urlParams.get('order');
+    window.initializeSortButtonStates(currentSort, currentOrder);
+  }
+};

static/scripts/minifigures.js

@@ -1,4 +1,11 @@
 // Minifigures page functionality
+
+// Check if we're in pagination mode (server-side) or original mode (client-side)
+function isPaginationMode() {
+  const tableElement = document.querySelector('#minifigures');
+  return tableElement && tableElement.getAttribute('data-table') === 'false';
+}
+
 function filterByOwner() {
   const select = document.getElementById('filter-owner');
   const selectedOwner = select.value;
@@ -10,21 +17,23 @@ function filterByOwner() {
     currentUrl.searchParams.set('owner', selectedOwner);
   }
 
+  // Reset to page 1 when filtering
+  if (isPaginationMode()) {
+    currentUrl.searchParams.set('page', '1');
+  }
+
   window.location.href = currentUrl.toString();
 }
 
+// Initialize filter and sort states for minifigures page
+function initializeCollapsibleStates() {
+  initializePageCollapsibleStates('minifigures');
+}
+
 // Keep filters expanded after selection
 function filterByOwnerAndKeepOpen() {
-  // Remember if filters were open
-  const filterSection = document.getElementById('table-filter');
-  const wasOpen = filterSection && filterSection.classList.contains('show');
-
+  preserveCollapsibleStateOnChange('table-filter', 'minifigures-filter-state');
   filterByOwner();
-
-  // Store the state to restore after page reload
-  if (wasOpen) {
-    sessionStorage.setItem('keepFiltersOpen', 'true');
-  }
 }
 
 // Setup table search and sort functionality
@@ -32,117 +41,96 @@ document.addEventListener("DOMContentLoaded", () => {
   const searchInput = document.getElementById('table-search');
   const searchClear = document.getElementById('table-search-clear');
 
-  // Restore filter state after page load
-  if (sessionStorage.getItem('keepFiltersOpen') === 'true') {
-    const filterSection = document.getElementById('table-filter');
-    const filterButton = document.querySelector('[data-bs-target="#table-filter"]');
-
-    if (filterSection && filterButton) {
-      filterSection.classList.add('show');
-      filterButton.setAttribute('aria-expanded', 'true');
-    }
-
-    sessionStorage.removeItem('keepFiltersOpen');
-  }
+  // Initialize collapsible states (filter and sort)
+  initializeCollapsibleStates();
 
   if (searchInput && searchClear) {
-    // Wait for table to be initialized by setup_tables
-    setTimeout(() => {
-      const tableElement = document.querySelector('table[data-table="true"]');
-      if (tableElement && window.brickTableInstance) {
-        // Enable custom search for minifigures table
-        window.brickTableInstance.table.searchable = true;
+    if (isPaginationMode()) {
+      // PAGINATION MODE - Server-side search
+      const searchForm = document.createElement('form');
+      searchForm.style.display = 'none';
+      searchInput.parentNode.appendChild(searchForm);
+      searchForm.appendChild(searchInput.cloneNode(true));
 
-        // Connect search input to table
-        searchInput.addEventListener('input', (e) => {
-          window.brickTableInstance.table.search(e.target.value);
-        });
+      // Handle Enter key for search
+      searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          performServerSearch();
+        }
+      });
 
-        // Clear search
-        searchClear.addEventListener('click', () => {
-          searchInput.value = '';
-          window.brickTableInstance.table.search('');
-        });
-
-        // Setup sort buttons
-        setupSortButtons();
+      // Handle search button click (if exists)
+      const searchButton = document.querySelector('[data-search-trigger]');
+      if (searchButton) {
+        searchButton.addEventListener('click', performServerSearch);
       }
-    }, 100);
+
+      // Clear search
+      searchClear.addEventListener('click', () => {
+        searchInput.value = '';
+        performServerSearch();
+      });
+
+      function performServerSearch() {
+        const currentUrl = new URL(window.location);
+        const searchQuery = searchInput.value.trim();
+
+        if (searchQuery) {
+          currentUrl.searchParams.set('search', searchQuery);
+        } else {
+          currentUrl.searchParams.delete('search');
+        }
+
+        // Reset to page 1 when searching
+        currentUrl.searchParams.set('page', '1');
+        window.location.href = currentUrl.toString();
+      }
+
+    } else {
+      // ORIGINAL MODE - Client-side search with Simple DataTables
+      setTimeout(() => {
+        const tableElement = document.querySelector('table[data-table="true"]');
+        if (tableElement && window.brickTableInstance) {
+          // Enable custom search for minifigures table
+          window.brickTableInstance.table.searchable = true;
+
+          // Connect search input to table
+          searchInput.addEventListener('input', (e) => {
+            window.brickTableInstance.table.search(e.target.value);
+          });
+
+          // Clear search
+          searchClear.addEventListener('click', () => {
+            searchInput.value = '';
+            window.brickTableInstance.table.search('');
+          });
+        }
+      }, 100);
+    }
+  }
+
+  // Setup sort buttons for both modes
+  setupSortButtons();
+
+  // Initialize sort button states and icons for pagination mode
+  if (isPaginationMode()) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentSort = urlParams.get('sort');
+    const currentOrder = urlParams.get('order');
+    window.initializeSortButtonStates(currentSort, currentOrder);
   }
 });
 
 function setupSortButtons() {
-  // Sort button functionality
-  const sortButtons = document.querySelectorAll('[data-sort-attribute]');
-  const clearButton = document.querySelector('[data-sort-clear]');
-
-  sortButtons.forEach(button => {
-    button.addEventListener('click', () => {
-      const attribute = button.dataset.sortAttribute;
-      const isDesc = button.dataset.sortDesc === 'true';
-
-      // Get column index based on attribute
-      const columnMap = {
-        'name': 1,
-        'parts': 2,
-        'quantity': 3,
-        'missing': 4,
-        'damaged': 5,
-        'sets': 6
-      };
-
-      const columnIndex = columnMap[attribute];
-      if (columnIndex !== undefined && window.brickTableInstance) {
-        // Determine sort direction
-        const isCurrentlyActive = button.classList.contains('btn-primary');
-        const currentDirection = button.dataset.currentDirection || (isDesc ? 'desc' : 'asc');
-        const newDirection = isCurrentlyActive ?
-          (currentDirection === 'asc' ? 'desc' : 'asc') :
-          (isDesc ? 'desc' : 'asc');
-
-        // Clear other active buttons
-        sortButtons.forEach(btn => {
-          btn.classList.remove('btn-primary');
-          btn.classList.add('btn-outline-primary');
-          btn.removeAttribute('data-current-direction');
-        });
-
-        // Mark this button as active
-        button.classList.remove('btn-outline-primary');
-        button.classList.add('btn-primary');
-        button.dataset.currentDirection = newDirection;
-
-        // Apply sort using Simple DataTables API
-        window.brickTableInstance.table.columns.sort(columnIndex, newDirection);
-      }
-    });
-  });
-
-  if (clearButton) {
-    clearButton.addEventListener('click', () => {
-      // Clear all sort buttons
-      sortButtons.forEach(btn => {
-        btn.classList.remove('btn-primary');
-        btn.classList.add('btn-outline-primary');
-        btn.removeAttribute('data-current-direction');
-      });
-
-      // Reset table sort - remove all sorting
-      if (window.brickTableInstance) {
-        // Destroy and recreate to clear sorting
-        const tableElement = document.querySelector('#minifigures');
-        const currentPerPage = window.brickTableInstance.table.options.perPage;
-        window.brickTableInstance.table.destroy();
-
-        setTimeout(() => {
-          // Create new instance using the globally available BrickTable class
-          const newInstance = new window.BrickTable(tableElement, currentPerPage);
-          window.brickTableInstance = newInstance;
-
-          // Re-enable search functionality
-          newInstance.table.searchable = true;
-        }, 50);
-      }
-    });
-  }
+  const columnMap = {
+    'name': 1,
+    'parts': 2,
+    'quantity': 3,
+    'missing': 4,
+    'damaged': 5,
+    'sets': 6
+  };
+  // Use shared sort buttons setup from collapsible-state.js
+  window.setupSharedSortButtons('minifigures', 'brickTableInstance', columnMap);
 }

static/scripts/parts.js

@@ -1,190 +1,27 @@
-// Parts page functionality
-function applyFilters() {
-  const ownerSelect = document.getElementById('filter-owner');
-  const colorSelect = document.getElementById('filter-color');
-  const currentUrl = new URL(window.location);
-
-  // Handle owner filter
-  if (ownerSelect) {
-    const selectedOwner = ownerSelect.value;
-    if (selectedOwner === 'all') {
-      currentUrl.searchParams.delete('owner');
-    } else {
-      currentUrl.searchParams.set('owner', selectedOwner);
-    }
-  }
-
-  // Handle color filter
-  if (colorSelect) {
-    const selectedColor = colorSelect.value;
-    if (selectedColor === 'all') {
-      currentUrl.searchParams.delete('color');
-    } else {
-      currentUrl.searchParams.set('color', selectedColor);
-    }
-  }
-
-  window.location.href = currentUrl.toString();
-}
-
-function setupColorDropdown() {
-  const colorSelect = document.getElementById('filter-color');
-  if (!colorSelect) return;
-
-  // Add color squares to option text
-  const options = colorSelect.querySelectorAll('option[data-color-rgb]');
-  options.forEach(option => {
-    const colorRgb = option.dataset.colorRgb;
-    const colorId = option.dataset.colorId;
-    const colorName = option.textContent.trim();
-
-    if (colorRgb && colorId !== '9999') {
-      // Create a visual indicator (using Unicode square)
-      option.textContent = `${colorName}`; //■
-      //option.style.color = `#${colorRgb}`;
-    }
-  });
-}
+// Parts page functionality - now uses shared functions
 
 // Keep filters expanded after selection
 function applyFiltersAndKeepOpen() {
-  // Remember if filters were open
-  const filterSection = document.getElementById('table-filter');
-  const wasOpen = filterSection && filterSection.classList.contains('show');
-
-  applyFilters();
-
-  // Store the state to restore after page reload
-  if (wasOpen) {
-    sessionStorage.setItem('keepFiltersOpen', 'true');
-  }
+  window.applyFiltersAndKeepState('parts', 'parts-filter-state');
 }
 
-function setupSortButtons() {
-  // Sort button functionality
-  const sortButtons = document.querySelectorAll('[data-sort-attribute]');
-  const clearButton = document.querySelector('[data-sort-clear]');
-
-  sortButtons.forEach(button => {
-    button.addEventListener('click', () => {
-      const attribute = button.dataset.sortAttribute;
-      const isDesc = button.dataset.sortDesc === 'true';
-
-      // Get column index based on attribute
-      const columnMap = {
-        'name': 1,
-        'color': 2,
-        'quantity': 3,
-        'missing': 4,
-        'damaged': 5,
-        'sets': 6,
-        'minifigures': 7
-      };
-
-      const columnIndex = columnMap[attribute];
-      if (columnIndex !== undefined && window.partsTableInstance) {
-        // Determine sort direction
-        const isCurrentlyActive = button.classList.contains('btn-primary');
-        const currentDirection = button.dataset.currentDirection || (isDesc ? 'desc' : 'asc');
-        const newDirection = isCurrentlyActive ?
-          (currentDirection === 'asc' ? 'desc' : 'asc') :
-          (isDesc ? 'desc' : 'asc');
-
-        // Clear other active buttons
-        sortButtons.forEach(btn => {
-          btn.classList.remove('btn-primary');
-          btn.classList.add('btn-outline-primary');
-          btn.removeAttribute('data-current-direction');
-        });
-
-        // Mark this button as active
-        button.classList.remove('btn-outline-primary');
-        button.classList.add('btn-primary');
-        button.dataset.currentDirection = newDirection;
-
-        // Apply sort using Simple DataTables API
-        window.partsTableInstance.table.columns.sort(columnIndex, newDirection);
-      }
-    });
-  });
-
-  if (clearButton) {
-    clearButton.addEventListener('click', () => {
-      // Clear all sort buttons
-      sortButtons.forEach(btn => {
-        btn.classList.remove('btn-primary');
-        btn.classList.add('btn-outline-primary');
-        btn.removeAttribute('data-current-direction');
-      });
-
-      // Reset table sort - remove all sorting
-      if (window.partsTableInstance) {
-        // Destroy and recreate to clear sorting
-        const tableElement = document.querySelector('#parts');
-        const currentPerPage = window.partsTableInstance.table.options.perPage;
-        window.partsTableInstance.table.destroy();
-
-        setTimeout(() => {
-          // Create new instance using the globally available BrickTable class
-          const newInstance = new window.BrickTable(tableElement, currentPerPage);
-          window.partsTableInstance = newInstance;
-
-          // Re-enable search functionality
-          newInstance.table.searchable = true;
-        }, 50);
-      }
-    });
-  }
-}
-
-// Setup table search and sort functionality
+// Initialize parts page
 document.addEventListener("DOMContentLoaded", () => {
-  const searchInput = document.getElementById('table-search');
-  const searchClear = document.getElementById('table-search-clear');
+  // Use shared table page initialization
+  window.initializeTablePage({
+    pagePrefix: 'parts',
+    tableId: 'parts',
+    tableInstanceGlobal: 'partsTableInstance',
+    sortColumnMap: {
+      'name': 1,
+      'color': 2,
+      'quantity': 3,
+      'missing': 4,
+      'damaged': 5,
+      'sets': 6,
+      'minifigures': 7
+    },
+    hasColorDropdown: true
+  });
+});
 
-  // Setup color dropdown with color squares
-  setupColorDropdown();
-
-  // Restore filter state after page load
-  if (sessionStorage.getItem('keepFiltersOpen') === 'true') {
-    const filterSection = document.getElementById('table-filter');
-    const filterButton = document.querySelector('[data-bs-target="#table-filter"]');
-
-    if (filterSection && filterButton) {
-      filterSection.classList.add('show');
-      filterButton.setAttribute('aria-expanded', 'true');
-    }
-
-    sessionStorage.removeItem('keepFiltersOpen');
-  }
-
-  if (searchInput && searchClear) {
-    // Wait for table to be initialized by setup_tables
-    const setupSearch = () => {
-      const tableElement = document.querySelector('table[data-table="true"]');
-      if (tableElement && window.partsTableInstance) {
-        // Enable custom search for parts table
-        window.partsTableInstance.table.searchable = true;
-
-        // Connect search input to table
-        searchInput.addEventListener('input', (e) => {
-          window.partsTableInstance.table.search(e.target.value);
-        });
-
-        // Clear search
-        searchClear.addEventListener('click', () => {
-          searchInput.value = '';
-          window.partsTableInstance.table.search('');
-        });
-
-        // Setup sort buttons
-        setupSortButtons();
-      } else {
-        // If table instance not ready, try again
-        setTimeout(setupSearch, 100);
-      }
-    };
-
-    setTimeout(setupSearch, 100);
-  }
-});

static/scripts/problems.js

@@ -0,0 +1,26 @@
+// Problems page functionality - now uses shared functions
+
+// Keep filters expanded after selection
+function applyFiltersAndKeepOpen() {
+  window.applyFiltersAndKeepState('problems', 'problems-filter-state');
+}
+
+// Initialize problems page
+document.addEventListener("DOMContentLoaded", () => {
+  // Use shared table page initialization
+  window.initializeTablePage({
+    pagePrefix: 'problems',
+    tableId: 'problems',
+    tableInstanceGlobal: 'problemsTableInstance',
+    sortColumnMap: {
+      'name': 1,
+      'color': 2,
+      'quantity': 3,
+      'missing': 4,
+      'damaged': 5,
+      'sets': 6,
+      'minifigures': 7
+    },
+    hasColorDropdown: true
+  });
+});

static/scripts/sets.js

@@ -0,0 +1,196 @@
+// Sets page functionality
+
+// Check if we're in pagination mode (server-side) or original mode (client-side)
+function isPaginationMode() {
+  const gridElement = document.querySelector('#grid');
+  return gridElement && gridElement.getAttribute('data-grid') === 'false';
+}
+
+// Initialize filter and sort states for sets page
+function initializeCollapsibleStates() {
+  initializePageCollapsibleStates('sets', 'grid-filter', 'grid-sort');
+}
+
+// Setup page functionality
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize collapsible states (filter and sort)
+  initializeCollapsibleStates();
+
+  const searchInput = document.getElementById('grid-search');
+  const searchClear = document.getElementById('grid-search-clear');
+
+  if (searchInput && searchClear) {
+    if (isPaginationMode()) {
+      // PAGINATION MODE - Server-side search
+      const searchForm = document.createElement('form');
+      searchForm.style.display = 'none';
+      searchInput.parentNode.appendChild(searchForm);
+      searchForm.appendChild(searchInput.cloneNode(true));
+
+      // Handle Enter key for search
+      searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          performServerSearch();
+        }
+      });
+
+      // Handle search button click (if exists)
+      const searchButton = document.querySelector('[data-search-trigger]');
+      if (searchButton) {
+        searchButton.addEventListener('click', performServerSearch);
+      }
+
+      // Clear search
+      searchClear.addEventListener('click', () => {
+        searchInput.value = '';
+        performServerSearch();
+      });
+
+      function performServerSearch() {
+        const currentUrl = new URL(window.location);
+        const searchQuery = searchInput.value.trim();
+
+        if (searchQuery) {
+          currentUrl.searchParams.set('search', searchQuery);
+        } else {
+          currentUrl.searchParams.delete('search');
+        }
+
+        // Reset to page 1 when searching
+        currentUrl.searchParams.set('page', '1');
+        window.location.href = currentUrl.toString();
+      }
+
+      // Setup sort buttons for pagination mode
+      setupPaginationSortButtons();
+
+      // Setup filter dropdowns for pagination mode
+      setupPaginationFilterDropdowns();
+
+      // Initialize sort button states and icons for pagination mode
+      const urlParams = new URLSearchParams(window.location.search);
+      const currentSort = urlParams.get('sort');
+      const currentOrder = urlParams.get('order');
+      window.initializeSortButtonStates(currentSort, currentOrder);
+
+    } else {
+      // ORIGINAL MODE - Grid search functionality is handled by existing grid scripts
+      // No additional setup needed here
+    }
+  }
+});
+
+function setupPaginationSortButtons() {
+  // Sort button functionality for pagination mode
+  const sortButtons = document.querySelectorAll('[data-sort-attribute]');
+  const clearButton = document.querySelector('[data-sort-clear]');
+
+  sortButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const attribute = button.dataset.sortAttribute;
+      const isDesc = button.dataset.sortDesc === 'true';
+
+      // PAGINATION MODE - Server-side sorting
+      const currentUrl = new URL(window.location);
+      const currentSort = currentUrl.searchParams.get('sort');
+      const currentOrder = currentUrl.searchParams.get('order');
+
+      // Determine new sort direction
+      let newOrder = isDesc ? 'desc' : 'asc';
+      if (currentSort === attribute) {
+        // Toggle direction if clicking the same column
+        newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
+      }
+
+      currentUrl.searchParams.set('sort', attribute);
+      currentUrl.searchParams.set('order', newOrder);
+
+      // Update sort icon immediately before navigation
+      updateSortIcon(newOrder);
+
+      // Reset to page 1 when sorting
+      currentUrl.searchParams.set('page', '1');
+      window.location.href = currentUrl.toString();
+    });
+  });
+
+  if (clearButton) {
+    clearButton.addEventListener('click', () => {
+      // PAGINATION MODE - Clear server-side sorting
+      const currentUrl = new URL(window.location);
+      currentUrl.searchParams.delete('sort');
+      currentUrl.searchParams.delete('order');
+
+      // Reset sort icon to default ascending
+      updateSortIcon('asc');
+
+      currentUrl.searchParams.set('page', '1');
+      window.location.href = currentUrl.toString();
+    });
+  }
+}
+
+function setupPaginationFilterDropdowns() {
+  // Filter dropdown functionality for pagination mode
+  const filterDropdowns = document.querySelectorAll('#grid-filter select');
+
+  filterDropdowns.forEach(dropdown => {
+    dropdown.addEventListener('change', () => {
+      performServerFilter();
+    });
+  });
+
+  function performServerFilter() {
+    const currentUrl = new URL(window.location);
+
+    // Get all filter values
+    const statusFilter = document.getElementById('grid-status')?.value || '';
+    const themeFilter = document.getElementById('grid-theme')?.value || '';
+    const ownerFilter = document.getElementById('grid-owner')?.value || '';
+    const purchaseLocationFilter = document.getElementById('grid-purchase-location')?.value || '';
+    const storageFilter = document.getElementById('grid-storage')?.value || '';
+    const tagFilter = document.getElementById('grid-tag')?.value || '';
+
+    // Update URL parameters
+    if (statusFilter) {
+      currentUrl.searchParams.set('status', statusFilter);
+    } else {
+      currentUrl.searchParams.delete('status');
+    }
+
+    if (themeFilter) {
+      currentUrl.searchParams.set('theme', themeFilter);
+    } else {
+      currentUrl.searchParams.delete('theme');
+    }
+
+    if (ownerFilter) {
+      currentUrl.searchParams.set('owner', ownerFilter);
+    } else {
+      currentUrl.searchParams.delete('owner');
+    }
+
+    if (purchaseLocationFilter) {
+      currentUrl.searchParams.set('purchase_location', purchaseLocationFilter);
+    } else {
+      currentUrl.searchParams.delete('purchase_location');
+    }
+
+    if (storageFilter) {
+      currentUrl.searchParams.set('storage', storageFilter);
+    } else {
+      currentUrl.searchParams.delete('storage');
+    }
+
+    if (tagFilter) {
+      currentUrl.searchParams.set('tag', tagFilter);
+    } else {
+      currentUrl.searchParams.delete('tag');
+    }
+
+    // Reset to page 1 when filtering
+    currentUrl.searchParams.set('page', '1');
+    window.location.href = currentUrl.toString();
+  }
+}

static/scripts/table.js

@@ -36,14 +36,19 @@ window.BrickTable = class BrickTable {
         // Special configuration for tables with custom search/sort
         const isMinifiguresTable = table.id === 'minifigures';
         const isPartsTable = table.id === 'parts';
-        const hasCustomInterface = isMinifiguresTable || isPartsTable;
+        const isProblemsTable = table.id === 'problems';
+        const isPartsTablePaginationMode = isPartsTable && table.getAttribute('data-table') === 'false';
+        const isProblemsTablePaginationMode = isProblemsTable && table.getAttribute('data-table') === 'false';
+        const hasCustomInterface = isMinifiguresTable || isPartsTablePaginationMode || isProblemsTablePaginationMode;
+        const hasCustomSearch = isPartsTable || isProblemsTable || isMinifiguresTable; // Parts, problems, and minifigures always have custom search
 
         this.table = new simpleDatatables.DataTable(`#${table.id}`, {
             columns: columns,
+            paging: !(isPartsTablePaginationMode || isProblemsTablePaginationMode), // Disable built-in pagination for tables in pagination mode
             pagerDelta: 1,
             perPage: per_page,
             perPageSelect: [10, 25, 50, 100, 500, 1000],
-            searchable: !hasCustomInterface, // Disable built-in search for tables with custom interface
+            searchable: !hasCustomSearch, // Disable built-in search for tables with custom search
             searchMethod: (table => (terms, cell, row, column, source) => table.search(terms, cell, row, column, source))(this),
             searchQuerySeparator: "",
             tableRender: () => {
@@ -105,6 +110,8 @@ const setup_tables = (per_page) => document.querySelectorAll('table[data-table="
             window.brickTableInstance = brickTable;
         } else if (el.id === 'parts') {
             window.partsTableInstance = brickTable;
+        } else if (el.id === 'problems') {
+            window.problemsTableInstance = brickTable;
         }
     }
 );

static/styles.css

@@ -77,4 +77,26 @@
         linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
         linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%)
     ;
+}
+
+/* Mobile Pagination Fixes */
+.mobile-pagination {
+    display: flex !important;
+    width: 100% !important;
+    gap: 2px;
+}
+
+.mobile-pagination .btn:first-child,
+.mobile-pagination .btn:last-child {
+    flex: 0 0 auto;
+    min-width: 90px;
+    max-width: 120px;
+}
+
+.mobile-pagination .btn:nth-child(2) {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
 }

templates/base.html

@@ -81,6 +81,7 @@
     <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.2.1/dist/umd/simple-datatables.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
     <!-- BrickTracker scripts -->
+    <script src="{{ url_for('static', filename='scripts/collapsible-state.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/grid/filter.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/grid/grid.js') }}"></script>
@@ -97,6 +98,13 @@
     {% if request.endpoint == 'part.list' %}
     <script src="{{ url_for('static', filename='scripts/parts.js') }}"></script>
     {% endif %}
+    {% if request.endpoint == 'part.problem' %}
+    <script src="{{ url_for('static', filename='scripts/parts.js') }}"></script>
+    <script src="{{ url_for('static', filename='scripts/problems.js') }}"></script>
+    {% endif %}
+    {% if request.endpoint == 'set.list' %}
+    <script src="{{ url_for('static', filename='scripts/sets.js') }}"></script>
+    {% endif %}
     <script type="text/javascript">
       document.addEventListener("DOMContentLoaded", () => {
         setup_grids();

templates/minifigure/table_body.html

@@ -0,0 +1,22 @@
+{% import 'macro/table.html' as table %}
+
+<tbody>
+  {% for minifigure in table_collection %}
+  <tr>
+    {{ table.image(minifigure.url_for_image(), caption=minifigure.fields.name, alt=minifigure.fields.figure) }}
+    <td data-sort="{{ minifigure.fields.name }}">
+      <a class="text-reset" href="{{ minifigure.url() }}">{{ minifigure.fields.name }}</a>
+      {{ table.rebrickable(minifigure) }}
+    </td>
+    <td data-sort="{{ minifigure.fields.number_of_parts }}">{{ minifigure.fields.number_of_parts }}</td>
+    <td data-sort="{{ minifigure.fields.total_quantity }}">{{ minifigure.fields.total_quantity }}</td>
+    {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+    <td data-sort="{{ minifigure.fields.total_missing }}">{{ minifigure.fields.total_missing }}</td>
+    {% endif %}
+    {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+    <td data-sort="{{ minifigure.fields.total_damaged }}">{{ minifigure.fields.total_damaged }}</td>
+    {% endif %}
+    <td data-sort="{{ minifigure.fields.total_sets }}">{{ minifigure.fields.total_sets }}</td>
+  </tr>
+  {% endfor %}
+</tbody>

templates/minifigures.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% import 'macro/table.html' as table %}
 
 {% block title %} - All minifigures{% endblock %}
 
@@ -10,7 +11,7 @@
       <label class="visually-hidden" for="table-search">Search</label>
       <div class="input-group">
         <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span>
-        <input id="table-search" class="form-control form-control-sm px-1" type="text" placeholder="Figure name, parts count, sets" value="">
+        <input id="table-search" class="form-control form-control-sm px-1" type="text" placeholder="Figure name, parts count, sets" value="{{ search_query or '' }}">
         <button id="table-search-clear" type="button" class="btn btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
       </div>
     </div>
@@ -19,24 +20,159 @@
         <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#table-sort" aria-expanded="{% if config['SHOW_GRID_SORT'] %}true{% else %}false{% endif %}" aria-controls="table-sort">
           <i class="ri-sort-asc"></i> Sort
         </button>
-      </div>
-    </div>
-    {% if owners | length > 1 %}
-    <div class="col-12">
-      <div class="input-group">
         <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#table-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="table-filter">
           <i class="ri-filter-line"></i> Filters
         </button>
       </div>
     </div>
-    {% endif %}
   </div>
   {% include 'minifigure/sort.html' %}
   {% include 'minifigure/filter.html' %}
 
-  {% with all=true %}
-    {% include 'minifigure/table.html' %}
-  {% endwith %}
+  {% if use_pagination %}
+  <!-- PAGINATION MODE -->
+  <div class="table-responsive-sm">
+    <table data-table="false" class="table table-striped align-middle mb-0" id="minifigures">
+      {{ table.header(parts=true, quantity=true, missing=true, damaged=true, sets=true, minifigures=false) }}
+      {% include 'minifigure/table_body.html' %}
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <div>
+    {% if pagination and pagination.total_pages > 1 %}
+    <div class="row mt-4">
+      <div class="col-12">
+      <!-- Desktop Pagination -->
+      <div class="d-none d-md-block">
+        <nav aria-label="Minifigures pagination">
+          <ul class="pagination justify-content-center">
+            {% if pagination.has_prev %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page - 1) }}">
+                  <i class="ri-arrow-left-line"></i> Previous
+                </a>
+              </li>
+            {% endif %}
+
+            <!-- Show page numbers (with smart truncation) -->
+            {% set start_page = [1, pagination.page - 2] | max %}
+            {% set end_page = [pagination.total_pages, pagination.page + 2] | min %}
+
+            {% if start_page > 1 %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', 1) }}">1</a>
+              </li>
+              {% if start_page > 2 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+            {% endif %}
+
+            {% for page_num in range(start_page, end_page + 1) %}
+              {% if page_num == pagination.page %}
+                <li class="page-item active">
+                  <span class="page-link">{{ page_num }}</span>
+                </li>
+              {% else %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ request.url | replace_query('page', page_num) }}">{{ page_num }}</a>
+                </li>
+              {% endif %}
+            {% endfor %}
+
+            {% if end_page < pagination.total_pages %}
+              {% if end_page < pagination.total_pages - 1 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.total_pages) }}">{{ pagination.total_pages }}</a>
+              </li>
+            {% endif %}
+
+            {% if pagination.has_next %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page + 1) }}">
+                  Next <i class="ri-arrow-right-line"></i>
+                </a>
+              </li>
+            {% endif %}
+          </ul>
+        </nav>
+      </div>
+
+      <!-- Mobile Pagination -->
+      <div class="d-md-none">
+        <div class="mobile-pagination" role="group" aria-label="Mobile pagination">
+          {% if pagination.has_prev %}
+            <a href="{{ request.url | replace_query('page', pagination.page - 1) }}"
+               class="btn btn-outline-primary">
+              <i class="ri-arrow-left-line"></i> Previous
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              <i class="ri-arrow-left-line"></i> Previous
+            </button>
+          {% endif %}
+
+          <span class="btn btn-light">
+            Page {{ pagination.page }} of {{ pagination.total_pages }}
+          </span>
+
+          {% if pagination.has_next %}
+            <a href="{{ request.url | replace_query('page', pagination.page + 1) }}"
+               class="btn btn-outline-primary">
+              Next <i class="ri-arrow-right-line"></i>
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              Next <i class="ri-arrow-right-line"></i>
+            </button>
+          {% endif %}
+        </div>
+      </div>
+
+      <!-- Results Info -->
+      <div class="text-center mt-3">
+        <small class="text-muted">
+          Showing {{ ((pagination.page - 1) * pagination.per_page + 1) }} to
+          {{ [pagination.page * pagination.per_page, pagination.total_count] | min }}
+          of {{ pagination.total_count }} minifigures
+        </small>
+      </div>
+    </div>
+    </div>
+    {% endif %}
+  </div>
+
+  {% else %}
+  <!-- ORIGINAL MODE - Single page with client-side search -->
+  <div class="table-responsive-sm">
+    <table data-table="true" class="table table-striped align-middle {% if not all %}sortable mb-0{% endif %}" id="minifigures">
+      {{ table.header(parts=true, quantity=true, missing=true, damaged=true, sets=true, minifigures=false) }}
+      <tbody>
+        {% for minifigure in table_collection %}
+        <tr>
+          {{ table.image(minifigure.url_for_image(), caption=minifigure.fields.name, alt=minifigure.fields.figure) }}
+          <td data-sort="{{ minifigure.fields.name }}">
+            <a class="text-reset" href="{{ minifigure.url() }}">{{ minifigure.fields.name }}</a>
+            {{ table.rebrickable(minifigure) }}
+          </td>
+          <td data-sort="{{ minifigure.fields.number_of_parts }}">{{ minifigure.fields.number_of_parts }}</td>
+          <td data-sort="{{ minifigure.fields.total_quantity }}">{{ minifigure.fields.total_quantity }}</td>
+          {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+          <td data-sort="{{ minifigure.fields.total_missing }}">{{ minifigure.fields.total_missing }}</td>
+          {% endif %}
+          {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+          <td data-sort="{{ minifigure.fields.total_damaged }}">{{ minifigure.fields.total_damaged }}</td>
+          {% endif %}
+          <td data-sort="{{ minifigure.fields.total_sets }}">{{ minifigure.fields.total_sets }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% endif %}
+
 </div>
 {% else %}
   <div class="container-fluid">
@@ -52,4 +188,4 @@
   </div>
 {% endif %}
 
-{% endblock %}
+{% endblock %}

templates/part/table_body.html

@@ -0,0 +1,35 @@
+{% import 'macro/form.html' as form %}
+{% import 'macro/table.html' as table %}
+
+<tbody>
+  {% for item in table_collection %}
+  <tr>
+    {{ table.image(item.url_for_image(), caption=item.fields.name, alt=item.fields.part, accordion=solo) }}
+    <td data-sort="{{ item.fields.name }}">
+      <a class="text-reset" href="{{ item.url() }}">{{ item.fields.name }}</a>
+      {% if item.fields.spare %}<span class="badge rounded-pill text-bg-warning fw-normal"><i class="ri-loop-left-line"></i> Spare</span>{% endif %}
+      {% if all %}
+        {{ table.rebrickable(item) }}
+        {{ table.bricklink(item) }}
+      {% endif %}
+    </td>
+    <td data-sort="{{ item.fields.color_name }}">
+      {% if item.fields.color_rgb %}<span class="color-rgb color-rgb-table {% if item.fields.color == 9999 %}color-any{% endif %} align-middle border border-black" {% if item.fields.color != 9999 %}style="background-color: #{{ item.fields.color_rgb }};"{% endif %}></span>{% endif %}
+      <span class="align-middle">{{ item.fields.color_name }}</span>
+    </td>
+    <td>{{ item.fields.total_quantity }}</td>
+    {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+      <td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
+        {{ form.input('Missing', item.fields.id, item.html_id('missing'), item.url_for_problem('missing'), item.fields.total_missing, all=all, read_only=read_only) }}
+      </td>
+    {% endif %}
+    {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+      <td data-sort="{{ item.fields.total_damaged }}" class="table-td-input">
+        {{ form.input('Damaged', item.fields.id, item.html_id('damaged'), item.url_for_problem('damaged'), item.fields.total_damaged, all=all, read_only=read_only) }}
+      </td>
+    {% endif %}
+    <td>{{ item.fields.total_sets }}</td>
+    <td>{{ item.fields.total_minifigures }}</td>
+  </tr>
+  {% endfor %}
+</tbody>

templates/parts.html

@@ -1,4 +1,6 @@
 {% extends 'base.html' %}
+{% import 'macro/form.html' as form %}
+{% import 'macro/table.html' as table %}
 
 {% block title %} - All parts{% endblock %}
 
@@ -10,7 +12,7 @@
       <label class="visually-hidden" for="table-search">Search</label>
       <div class="input-group">
         <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span>
-        <input id="table-search" class="form-control form-control-sm px-1" type="text" placeholder="Part name, color, quantity, sets" value="">
+        <input id="table-search" class="form-control form-control-sm px-1" type="text" placeholder="Part name, color, quantity, sets" value="{{ search_query or '' }}">
         <button id="table-search-clear" type="button" class="btn btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
       </div>
     </div>
@@ -19,10 +21,6 @@
         <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#table-sort" aria-expanded="{% if config['SHOW_GRID_SORT'] %}true{% else %}false{% endif %}" aria-controls="table-sort">
           <i class="ri-sort-asc"></i> Sort
         </button>
-      </div>
-    </div>
-    <div class="col-12">
-      <div class="input-group">
         <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#table-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="table-filter">
           <i class="ri-filter-line"></i> Filters
         </button>
@@ -32,9 +30,162 @@
   {% include 'part/sort.html' %}
   {% include 'part/filter.html' %}
 
-  {% with all=true %}
-    {% include 'part/table.html' %}
-  {% endwith %}
+  {% if use_pagination %}
+  <!-- PAGINATION MODE -->
+  <div class="table-responsive-sm">
+    <table data-table="false" class="table table-striped align-middle mb-0" id="parts">
+      {{ table.header(color=true, quantity=not no_quantity, sets=true, minifigures=true) }}
+      {% with all=true %}
+        {% include 'part/table_body.html' %}
+      {% endwith %}
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <div>
+    {% if pagination and pagination.total_pages > 1 %}
+    <div class="row mt-4">
+      <div class="col-12">
+      <!-- Desktop Pagination -->
+      <div class="d-none d-md-block">
+        <nav aria-label="Parts pagination">
+          <ul class="pagination justify-content-center">
+            {% if pagination.has_prev %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page - 1) }}">
+                  <i class="ri-arrow-left-line"></i> Previous
+                </a>
+              </li>
+            {% endif %}
+
+            <!-- Show page numbers (with smart truncation) -->
+            {% set start_page = [1, pagination.page - 2] | max %}
+            {% set end_page = [pagination.total_pages, pagination.page + 2] | min %}
+
+            {% if start_page > 1 %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', 1) }}">1</a>
+              </li>
+              {% if start_page > 2 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+            {% endif %}
+
+            {% for page_num in range(start_page, end_page + 1) %}
+              {% if page_num == pagination.page %}
+                <li class="page-item active">
+                  <span class="page-link">{{ page_num }}</span>
+                </li>
+              {% else %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ request.url | replace_query('page', page_num) }}">{{ page_num }}</a>
+                </li>
+              {% endif %}
+            {% endfor %}
+
+            {% if end_page < pagination.total_pages %}
+              {% if end_page < pagination.total_pages - 1 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.total_pages) }}">{{ pagination.total_pages }}</a>
+              </li>
+            {% endif %}
+
+            {% if pagination.has_next %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page + 1) }}">
+                  Next <i class="ri-arrow-right-line"></i>
+                </a>
+              </li>
+            {% endif %}
+          </ul>
+        </nav>
+      </div>
+
+      <!-- Mobile Pagination -->
+      <div class="d-md-none">
+        <div class="mobile-pagination" role="group" aria-label="Mobile pagination">
+          {% if pagination.has_prev %}
+            <a href="{{ request.url | replace_query('page', pagination.page - 1) }}"
+               class="btn btn-outline-primary">
+              <i class="ri-arrow-left-line"></i> Previous
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              <i class="ri-arrow-left-line"></i> Previous
+            </button>
+          {% endif %}
+
+          <span class="btn btn-light">
+            Page {{ pagination.page }} of {{ pagination.total_pages }}
+          </span>
+
+          {% if pagination.has_next %}
+            <a href="{{ request.url | replace_query('page', pagination.page + 1) }}"
+               class="btn btn-outline-primary">
+              Next <i class="ri-arrow-right-line"></i>
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              Next <i class="ri-arrow-right-line"></i>
+            </button>
+          {% endif %}
+        </div>
+      </div>
+
+      <!-- Results Info -->
+      <div class="text-center mt-3">
+        <small class="text-muted">
+          Showing {{ ((pagination.page - 1) * pagination.per_page + 1) }} to
+          {{ [pagination.page * pagination.per_page, pagination.total_count] | min }}
+          of {{ pagination.total_count }} parts
+        </small>
+      </div>
+    </div>
+    </div>
+    {% endif %}
+  </div>
+
+  {% else %}
+  <!-- ORIGINAL MODE - Single page with client-side search -->
+  <div class="table-responsive-sm">
+    <table data-table="true" class="table table-striped align-middle {% if not all %}sortable mb-0{% endif %}" id="parts">
+      {{ table.header(color=true, quantity=not no_quantity, sets=true, minifigures=true) }}
+      <tbody>
+        {% for item in table_collection %}
+        <tr>
+          {{ table.image(item.url_for_image(), caption=item.fields.name, alt=item.fields.part, accordion=solo) }}
+          <td data-sort="{{ item.fields.name }}">
+            <a class="text-reset" href="{{ item.url() }}">{{ item.fields.name }}</a>
+            {% if item.fields.spare %}<span class="badge rounded-pill text-bg-warning fw-normal"><i class="ri-loop-left-line"></i> Spare</span>{% endif %}
+            {{ table.rebrickable(item) }}
+            {{ table.bricklink(item) }}
+          </td>
+          <td data-sort="{{ item.fields.color_name }}">
+            {% if item.fields.color_rgb %}<span class="color-rgb color-rgb-table {% if item.fields.color == 9999 %}color-any{% endif %} align-middle border border-black" {% if item.fields.color != 9999 %}style="background-color: #{{ item.fields.color_rgb }};"{% endif %}></span>{% endif %}
+            <span class="align-middle">{{ item.fields.color_name }}</span>
+          </td>
+          <td>{{ item.fields.total_quantity }}</td>
+          {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+            <td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
+              {{ form.input('Missing', item.fields.id, item.html_id('missing'), item.url_for_problem('missing'), item.fields.total_missing, all=true, read_only=read_only) }}
+            </td>
+          {% endif %}
+          {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+            <td data-sort="{{ item.fields.total_damaged }}" class="table-td-input">
+              {{ form.input('Damaged', item.fields.id, item.html_id('damaged'), item.url_for_problem('damaged'), item.fields.total_damaged, all=true, read_only=read_only) }}
+            </td>
+          {% endif %}
+          <td>{{ item.fields.total_sets }}</td>
+          <td>{{ item.fields.total_minifigures }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% endif %}
+
 </div>
 {% else %}
   <div class="container-fluid">
@@ -50,4 +201,4 @@
   </div>
 {% endif %}
 
-{% endblock %}
+{% endblock %}

templates/problem.html

@@ -1,11 +1,229 @@
 {% extends 'base.html' %}
+{% import 'macro/form.html' as form %}
+{% import 'macro/table.html' as table %}
 
 {% block title %} - Problematic parts{% endblock %}
 
 {% block main %}
-<div class="container-fluid px-0">
-  {% with all=true, no_quantity=true %}
-    {% include 'part/table.html' %}
-  {% endwith %}
+{% if table_collection | length %}
+<div class="container-fluid">
+  <div class="row row-cols-lg-auto g-1 justify-content-center align-items-center pb-2">
+    <div class="col-12 flex-grow-1">
+      <label class="visually-hidden" for="table-search">Search</label>
+      <div class="input-group">
+        <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span>
+        <input id="table-search" class="form-control form-control-sm px-1" type="text" placeholder="Part name, color" value="{{ search_query or '' }}">
+        <button id="table-search-clear" type="button" class="btn btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
+      </div>
+    </div>
+    <div class="col-12">
+      <div class="input-group">
+        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#table-sort" aria-expanded="{% if config['SHOW_GRID_SORT'] %}true{% else %}false{% endif %}" aria-controls="table-sort">
+          <i class="ri-sort-asc"></i> Sort
+        </button>
+        <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#table-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="table-filter">
+          <i class="ri-filter-line"></i> Filters
+        </button>
+      </div>
+    </div>
+  </div>
+  {% include 'problem/sort.html' %}
+  {% include 'problem/filter.html' %}
+
+  {% if use_pagination %}
+  <!-- PAGINATION MODE -->
+  <div class="table-responsive-sm">
+    <table data-table="false" class="table table-striped align-middle mb-0" id="problems">
+      {{ table.header(color=true, quantity=false, sets=true, minifigures=true) }}
+      <tbody>
+        {% for item in table_collection %}
+        <tr>
+          {{ table.image(item.url_for_image(), caption=item.fields.name, alt=item.fields.part) }}
+          <td data-sort="{{ item.fields.name }}">
+            <a class="text-reset" href="{{ item.url() }}">{{ item.fields.name }}</a>
+            {% if item.fields.spare %}<span class="badge rounded-pill text-bg-warning fw-normal"><i class="ri-loop-left-line"></i> Spare</span>{% endif %}
+            {{ table.rebrickable(item) }}
+            {{ table.bricklink(item) }}
+          </td>
+          <td data-sort="{{ item.fields.color_name }}">
+            {% if item.fields.color_rgb %}<span class="color-rgb color-rgb-table {% if item.fields.color == 9999 %}color-any{% endif %} align-middle border border-black" {% if item.fields.color != 9999 %}style="background-color: #{{ item.fields.color_rgb }};"{% endif %}></span>{% endif %}
+            <span class="align-middle">{{ item.fields.color_name }}</span>
+          </td>
+          {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+            <td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
+              {{ form.input('Missing', item.fields.id, item.html_id('missing'), item.url_for_problem('missing'), item.fields.total_missing, all=true, read_only=read_only) }}
+            </td>
+          {% endif %}
+          {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+            <td data-sort="{{ item.fields.total_damaged }}" class="table-td-input">
+              {{ form.input('Damaged', item.fields.id, item.html_id('damaged'), item.url_for_problem('damaged'), item.fields.total_damaged, all=true, read_only=read_only) }}
+            </td>
+          {% endif %}
+          <td>{{ item.fields.total_sets }}</td>
+          <td>{{ item.fields.total_minifigures }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  <div>
+    {% if pagination and pagination.total_pages > 1 %}
+    <div class="row mt-4">
+      <div class="col-12">
+      <!-- Desktop Pagination -->
+      <div class="d-none d-md-block">
+        <nav aria-label="Problems pagination">
+          <ul class="pagination justify-content-center">
+            {% if pagination.has_prev %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page - 1) }}">
+                  <i class="ri-arrow-left-line"></i> Previous
+                </a>
+              </li>
+            {% endif %}
+
+            <!-- Show page numbers (with smart truncation) -->
+            {% set start_page = [1, pagination.page - 2] | max %}
+            {% set end_page = [pagination.total_pages, pagination.page + 2] | min %}
+
+            {% if start_page > 1 %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', 1) }}">1</a>
+              </li>
+              {% if start_page > 2 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+            {% endif %}
+
+            {% for page_num in range(start_page, end_page + 1) %}
+              {% if page_num == pagination.page %}
+                <li class="page-item active">
+                  <span class="page-link">{{ page_num }}</span>
+                </li>
+              {% else %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ request.url | replace_query('page', page_num) }}">{{ page_num }}</a>
+                </li>
+              {% endif %}
+            {% endfor %}
+
+            {% if end_page < pagination.total_pages %}
+              {% if end_page < pagination.total_pages - 1 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.total_pages) }}">{{ pagination.total_pages }}</a>
+              </li>
+            {% endif %}
+
+            {% if pagination.has_next %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page + 1) }}">
+                  Next <i class="ri-arrow-right-line"></i>
+                </a>
+              </li>
+            {% endif %}
+          </ul>
+        </nav>
+      </div>
+
+      <!-- Mobile Pagination -->
+      <div class="d-md-none">
+        <div class="mobile-pagination" role="group" aria-label="Mobile pagination">
+          {% if pagination.has_prev %}
+            <a href="{{ request.url | replace_query('page', pagination.page - 1) }}"
+               class="btn btn-outline-primary">
+              <i class="ri-arrow-left-line"></i> Previous
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              <i class="ri-arrow-left-line"></i> Previous
+            </button>
+          {% endif %}
+
+          <span class="btn btn-light">
+            Page {{ pagination.page }} of {{ pagination.total_pages }}
+          </span>
+
+          {% if pagination.has_next %}
+            <a href="{{ request.url | replace_query('page', pagination.page + 1) }}"
+               class="btn btn-outline-primary">
+              Next <i class="ri-arrow-right-line"></i>
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              Next <i class="ri-arrow-right-line"></i>
+            </button>
+          {% endif %}
+        </div>
+      </div>
+
+      <!-- Results Info -->
+      <div class="text-center mt-3">
+        <small class="text-muted">
+          Showing {{ ((pagination.page - 1) * pagination.per_page + 1) }} to
+          {{ [pagination.page * pagination.per_page, pagination.total_count] | min }}
+          of {{ pagination.total_count }} problematic parts
+        </small>
+      </div>
+    </div>
+    </div>
+    {% endif %}
+  </div>
+
+  {% else %}
+  <!-- ORIGINAL MODE - Single page with client-side search -->
+  <div class="table-responsive-sm">
+    <table data-table="true" class="table table-striped align-middle sortable mb-0" id="problems">
+      {{ table.header(color=true, quantity=false, sets=true, minifigures=true) }}
+      <tbody>
+        {% for item in table_collection %}
+        <tr>
+          {{ table.image(item.url_for_image(), caption=item.fields.name, alt=item.fields.part) }}
+          <td data-sort="{{ item.fields.name }}">
+            <a class="text-reset" href="{{ item.url() }}">{{ item.fields.name }}</a>
+            {% if item.fields.spare %}<span class="badge rounded-pill text-bg-warning fw-normal"><i class="ri-loop-left-line"></i> Spare</span>{% endif %}
+            {{ table.rebrickable(item) }}
+            {{ table.bricklink(item) }}
+          </td>
+          <td data-sort="{{ item.fields.color_name }}">
+            {% if item.fields.color_rgb %}<span class="color-rgb color-rgb-table {% if item.fields.color == 9999 %}color-any{% endif %} align-middle border border-black" {% if item.fields.color != 9999 %}style="background-color: #{{ item.fields.color_rgb }};"{% endif %}></span>{% endif %}
+            <span class="align-middle">{{ item.fields.color_name }}</span>
+          </td>
+          {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+            <td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
+              {{ form.input('Missing', item.fields.id, item.html_id('missing'), item.url_for_problem('missing'), item.fields.total_missing, all=true, read_only=read_only) }}
+            </td>
+          {% endif %}
+          {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+            <td data-sort="{{ item.fields.total_damaged }}" class="table-td-input">
+              {{ form.input('Damaged', item.fields.id, item.html_id('damaged'), item.url_for_problem('damaged'), item.fields.total_damaged, all=true, read_only=read_only) }}
+            </td>
+          {% endif %}
+          <td>{{ item.fields.total_sets }}</td>
+          <td>{{ item.fields.total_minifigures }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% endif %}
+
 </div>
+{% else %}
+  <div class="container-fluid">
+    <div class="row justify-content-center">
+      <div class="col-md-6">
+        <div class="text-center">
+          <i class="ri-error-warning-line" style="font-size: 4rem; color: #6c757d;"></i>
+          <h3 class="mt-3">No problematic parts found</h3>
+          <p class="text-muted">Great! All your parts are in perfect condition.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}
+
 {% endblock %}

templates/problem/filter.html

@@ -0,0 +1,30 @@
+<div id="table-filter" class="collapse {% if config['SHOW_GRID_FILTERS'] %}show{% endif %} row row-cols-lg-auto g-1 justify-content-center align-items-center">
+  {% if owners | length %}
+  <div class="col-12 col-md-6 flex-grow-1">
+    <div class="input-group">
+      <span class="input-group-text"><i class="ri-user-line"></i><span class="ms-1 d-none d-md-inline"> Owner</span></span>
+      <select id="filter-owner" class="form-select" onchange="applyFiltersAndKeepOpen()" autocomplete="off">
+        <option value="all" {% if selected_owner == 'all' %}selected{% endif %}>All owners</option>
+        {% for owner in owners %}
+          <option value="{{ owner.fields.id }}" {% if selected_owner == owner.fields.id %}selected{% endif %}>{{ owner.fields.name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+  {% endif %}
+  {% if colors | length %}
+  <div class="col-12 col-md-6 flex-grow-1">
+    <div class="input-group">
+      <span class="input-group-text"><i class="ri-palette-line"></i><span class="ms-1 d-none d-md-inline"> Color</span></span>
+      <select id="filter-color" class="form-select" onchange="applyFiltersAndKeepOpen()" autocomplete="off">
+        <option value="all" {% if selected_color == 'all' %}selected{% endif %}>All colors</option>
+        {% for color in colors %}
+          <option value="{{ color.color_id }}" {% if selected_color == color.color_id|string %}selected{% endif %} data-color-rgb="{{ color.color_rgb }}" data-color-id="{{ color.color_id }}">
+            {{ color.color_name }}
+          </option>
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+  {% endif %}
+</div>

templates/problem/sort.html

@@ -0,0 +1,25 @@
+<div id="table-sort" class="collapse {% if config['SHOW_GRID_SORT'] %}show{% endif %} row row-cols-lg-auto g-1 justify-content-center align-items-center">
+  <div class="col-12 flex-grow-1">
+    <div class="input-group">
+      <span class="input-group-text mb-2"><i class="ri-sort-asc"></i><span class="ms-1 d-none d-md-inline"> Sort</span></span>
+      <button id="sort-name" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="name"><i class="ri-pencil-line"></i><span class="d-none d-md-inline"> Name</span></button>
+      <button id="sort-color" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="color"><i class="ri-palette-line"></i><span class="d-none d-xl-inline"> Color</span></button>
+      {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
+      <button id="sort-missing" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="missing" data-sort-desc="true"><i class="ri-question-line"></i><span class="d-none d-xl-inline"> Missing</span></button>
+      {% endif %}
+      {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
+      <button id="sort-damaged" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="damaged" data-sort-desc="true"><i class="ri-error-warning-line"></i><span class="d-none d-xl-inline"> Damaged</span></button>
+      {% endif %}
+      <button id="sort-sets" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="sets" data-sort-desc="true"><i class="ri-hashtag"></i><span class="d-none d-xl-inline"> Sets</span></button>
+      <button id="sort-minifigures" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="minifigures" data-sort-desc="true"><i class="ri-group-line"></i><span class="d-none d-xl-inline"> Figures</span></button>
+      <button id="sort-clear" type="button" class="btn btn-outline-dark mb-2"
+        data-sort-clear="true"><i class="ri-close-circle-line"></i><span class="d-none d-xl-inline"> Clear</span></button>
+    </div>
+  </div>
+</div>

templates/set/filter.html

@@ -6,26 +6,26 @@
       <select id="grid-status" class="form-select"
         data-filter="metadata"
         autocomplete="off">
-        <option value="" selected>All</option>
+        <option value="" {% if not current_status_filter %}selected{% endif %}>All</option>
         {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
-          <option value="has-missing">Has missing pieces</option>
-          <option value="-has-missing">Has NO missing pieces</option>
+          <option value="has-missing" {% if current_status_filter == 'has-missing' %}selected{% endif %}>Has missing pieces</option>
+          <option value="-has-missing" {% if current_status_filter == '-has-missing' %}selected{% endif %}>Has NO missing pieces</option>
         {% endif %}
         {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
-          <option value="has-damaged">Has damaged pieces</option>
-          <option value="-has-damaged">Has NO damaged pieces</option>
+          <option value="has-damaged" {% if current_status_filter == 'has-damaged' %}selected{% endif %}>Has damaged pieces</option>
+          <option value="-has-damaged" {% if current_status_filter == '-has-damaged' %}selected{% endif %}>Has NO damaged pieces</option>
         {% endif %}
         {% if not config['HIDE_SET_INSTRUCTIONS'] %}
-          <option value="-has-missing-instructions">Has instructions</option>
-          <option value="has-missing-instructions">Is MISSING instructions</option>
+          <option value="-has-missing-instructions" {% if current_status_filter == '-has-missing-instructions' %}selected{% endif %}>Has instructions</option>
+          <option value="has-missing-instructions" {% if current_status_filter == 'has-missing-instructions' %}selected{% endif %}>Is MISSING instructions</option>
         {% endif %}
         {% if brickset_storages | length %}
-          <option value="has-storage">Is in storage</option>
-          <option value="-has-storage">Is NOT in storage</option>
+          <option value="has-storage" {% if current_status_filter == 'has-storage' %}selected{% endif %}>Is in storage</option>
+          <option value="-has-storage" {% if current_status_filter == '-has-storage' %}selected{% endif %}>Is NOT in storage</option>
         {% endif %}
         {% for status in brickset_statuses %}
-          <option value="{{ status.as_dataset() }}">{{ status.fields.name }}</option>
-          <option value="-{{ status.as_dataset() }}">NOT: {{ status.fields.name }}</option>
+          <option value="{{ status.as_dataset() }}" {% if current_status_filter == status.as_dataset() %}selected{% endif %}>{{ status.fields.name }}</option>
+          <option value="-{{ status.as_dataset() }}" {% if current_status_filter == ('-' + status.as_dataset()) %}selected{% endif %}>NOT: {{ status.fields.name }}</option>
         {% endfor %}
       </select>
     </div>
@@ -37,9 +37,9 @@
       <select id="grid-theme" class="form-select"
         data-filter="value" data-filter-attribute="theme"
         autocomplete="off">
-        <option value="" selected>All</option>
+        <option value="" {% if not current_theme_filter %}selected{% endif %}>All</option>
         {% for theme in collection.themes %}
-        <option value="{{ theme | lower }}">{{ theme }}</option>
+        <option value="{{ theme | lower }}" {% if current_theme_filter == (theme | lower) %}selected{% endif %}>{{ theme }}</option>
         {% endfor %}
       </select>
     </div>
@@ -52,9 +52,9 @@
         <select id="grid-owner" class="form-select"
           data-filter="metadata"
           autocomplete="off">
-          <option value="" selected>All</option>
+          <option value="" {% if not current_owner_filter %}selected{% endif %}>All</option>
           {% for owner in brickset_owners %}
-            <option value="{{ owner.as_dataset() }}">{{ owner.fields.name }}</option>
+            <option value="{{ owner.as_dataset() }}" {% if current_owner_filter == owner.as_dataset() %}selected{% endif %}>{{ owner.fields.name }}</option>
           {% endfor %}
         </select>
       </div>
@@ -68,9 +68,9 @@
         <select id="grid-purchase-location" class="form-select"
           data-filter="value" data-filter-attribute="purchase-location"
           autocomplete="off">
-          <option value="" selected>All</option>
+          <option value="" {% if not current_purchase_location_filter %}selected{% endif %}>All</option>
           {% for purchase_location in brickset_purchase_locations %}
-            <option value="{{ purchase_location.fields.id }}">{{ purchase_location.fields.name }}</option>
+            <option value="{{ purchase_location.fields.id }}" {% if current_purchase_location_filter == purchase_location.fields.id %}selected{% endif %}>{{ purchase_location.fields.name }}</option>
           {% endfor %}
         </select>
       </div>
@@ -84,9 +84,9 @@
         <select id="grid-storage" class="form-select"
           data-filter="value" data-filter-attribute="storage"
           autocomplete="off">
-          <option value="" selected>All</option>
+          <option value="" {% if not current_storage_filter %}selected{% endif %}>All</option>
           {% for storage in brickset_storages %}
-            <option value="{{ storage.fields.id }}">{{ storage.fields.name }}</option>
+            <option value="{{ storage.fields.id }}" {% if current_storage_filter == storage.fields.id %}selected{% endif %}>{{ storage.fields.name }}</option>
           {% endfor %}
         </select>
       </div>
@@ -100,9 +100,9 @@
         <select id="grid-tag" class="form-select"
           data-filter="metadata"
           autocomplete="off">
-          <option value="" selected>All</option>
+          <option value="" {% if not current_tag_filter %}selected{% endif %}>All</option>
           {% for tag in brickset_tags %}
-            <option value="{{ tag.as_dataset() }}">{{ tag.fields.name }}</option>
+            <option value="{{ tag.as_dataset() }}" {% if current_tag_filter == tag.as_dataset() %}selected{% endif %}>{{ tag.fields.name }}</option>
           {% endfor %}
         </select>
       </div>

templates/set/sort.html

@@ -2,8 +2,8 @@
   <div class="col-12 flex-grow-1">
     <div class="input-group">
       <span class="input-group-text mb-2"><i class="ri-sort-asc"></i><span class="ms-1 d-none d-md-inline"> Sort</span></span>
-      <button id="sort-number" type="button" class="btn btn-outline-primary mb-2"
-        data-sort-attribute="number" data-sort-natural="true"><i class="ri-hashtag"></i><span class="d-none d-md-inline"> Set</span></button>
+      <button id="sort-set" type="button" class="btn btn-outline-primary mb-2"
+        data-sort-attribute="set" data-sort-natural="true"><i class="ri-hashtag"></i><span class="d-none d-md-inline"> Set</span></button>
       <button id="sort-name" type="button" class="btn btn-outline-primary mb-2"
         data-sort-attribute="name"><i class="ri-pencil-line"></i><span class="d-none d-md-inline"> Name</span></button>
       <button id="sort-theme" type="button" class="btn btn-outline-primary mb-2"

templates/sets.html

@@ -3,14 +3,14 @@
 {% block title %} - All sets{% endblock %}
 
 {% block main %}
-{% if collection | length %}
+{% if collection | length or use_pagination %}
 <div class="container-fluid">
   <div class="row row-cols-lg-auto g-1 justify-content-center align-items-center pb-2">
     <div class="col-12 flex-grow-1">
       <label class="visually-hidden" for="grid-search">Search</label>
       <div class="input-group">
         <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-md-inline"> Search</span></span>
-        <input id="grid-search" data-search-exact="name,number,parts,searchPurchaseLocation,searchStorage,theme,year" data-search-list="searchOwner,searchTag" class="form-control form-control-sm px-1" type="text" placeholder="Set, name, number of parts, theme, year, owner, purchase location, storage, tag" value="">
+        <input id="grid-search" {% if not use_pagination %}data-search-exact="name,number,parts,searchPurchaseLocation,searchStorage,theme,year" data-search-list="searchOwner,searchTag"{% endif %} class="form-control form-control-sm px-1" type="text" placeholder="Set, name, number of parts, theme, year{% if not use_pagination %}, owner, purchase location, storage, tag{% endif %}" value="{{ search_query or '' }}">
         <button id="grid-search-clear" type="button" class="btn btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
       </div>
     </div>
@@ -19,10 +19,6 @@
         <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-sort" aria-expanded="{% if config['SHOW_GRID_SORT'] %}true{% else %}false{% endif %}" aria-controls="grid-sort">
           <i class="ri-sort-asc"></i> Sort
         </button>
-      </div>
-    </div>
-    <div class="col-12">
-      <div class="input-group">
         <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#grid-filter" aria-expanded="{% if config['SHOW_GRID_FILTERS'] %}true{% else %}false{% endif %}" aria-controls="grid-filter">
           <i class="ri-filter-line"></i> Filters
         </button>
@@ -31,6 +27,131 @@
   </div>
   {% include 'set/sort.html' %}
   {% include 'set/filter.html' %}
+
+  {% if use_pagination %}
+  <!-- PAGINATION MODE -->
+  <div class="row" data-grid="false" id="grid">
+  {% for item in collection %}
+    <div class="col-md-6 col-xl-3 d-flex align-items-stretch">
+      {% with index=loop.index0 %}
+        {% include 'set/card.html' %}
+      {% endwith %}
+    </div>
+  {% endfor %}
+  </div>
+
+  <!-- Pagination -->
+  <div>
+    {% if pagination and pagination.total_pages > 1 %}
+    <div class="row mt-4">
+      <div class="col-12">
+      <!-- Desktop Pagination -->
+      <div class="d-none d-md-block">
+        <nav aria-label="Sets pagination">
+          <ul class="pagination justify-content-center">
+            {% if pagination.has_prev %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page - 1) }}">
+                  <i class="ri-arrow-left-line"></i> Previous
+                </a>
+              </li>
+            {% endif %}
+
+            <!-- Show page numbers (with smart truncation) -->
+            {% set start_page = [1, pagination.page - 2] | max %}
+            {% set end_page = [pagination.total_pages, pagination.page + 2] | min %}
+
+            {% if start_page > 1 %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', 1) }}">1</a>
+              </li>
+              {% if start_page > 2 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+            {% endif %}
+
+            {% for page_num in range(start_page, end_page + 1) %}
+              {% if page_num == pagination.page %}
+                <li class="page-item active">
+                  <span class="page-link">{{ page_num }}</span>
+                </li>
+              {% else %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ request.url | replace_query('page', page_num) }}">{{ page_num }}</a>
+                </li>
+              {% endif %}
+            {% endfor %}
+
+            {% if end_page < pagination.total_pages %}
+              {% if end_page < pagination.total_pages - 1 %}
+                <li class="page-item disabled"><span class="page-link">...</span></li>
+              {% endif %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.total_pages) }}">{{ pagination.total_pages }}</a>
+              </li>
+            {% endif %}
+
+            {% if pagination.has_next %}
+              <li class="page-item">
+                <a class="page-link" href="{{ request.url | replace_query('page', pagination.page + 1) }}">
+                  Next <i class="ri-arrow-right-line"></i>
+                </a>
+              </li>
+            {% endif %}
+          </ul>
+        </nav>
+      </div>
+
+      <!-- Mobile Pagination -->
+      <div class="d-md-none">
+        <div class="mobile-pagination" role="group" aria-label="Mobile pagination">
+          {% if pagination.has_prev %}
+            <a href="{{ request.url | replace_query('page', pagination.page - 1) }}"
+               class="btn btn-outline-primary">
+              <i class="ri-arrow-left-line"></i> Previous
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              <i class="ri-arrow-left-line"></i> Previous
+            </button>
+          {% endif %}
+
+          <span class="btn btn-light">
+            Page {{ pagination.page }} of {{ pagination.total_pages }}
+          </span>
+
+          {% if pagination.has_next %}
+            <a href="{{ request.url | replace_query('page', pagination.page + 1) }}"
+               class="btn btn-outline-primary">
+              Next <i class="ri-arrow-right-line"></i>
+            </a>
+          {% else %}
+            <button class="btn btn-outline-secondary" disabled>
+              Next <i class="ri-arrow-right-line"></i>
+            </button>
+          {% endif %}
+        </div>
+      </div>
+
+      <!-- Results Info -->
+      <div class="text-center mt-3">
+        <small class="text-muted">
+          {% if pagination.total_count > 0 %}
+            Showing {{ ((pagination.page - 1) * pagination.per_page + 1) }} to
+            {{ [pagination.page * pagination.per_page, pagination.total_count] | min }}
+            of {{ pagination.total_count }} sets
+          {% else %}
+            No sets found
+          {% endif %}
+        </small>
+      </div>
+    </div>
+    </div>
+    {% endif %}
+  </div>
+
+  {% else %}
+  <!-- ORIGINAL MODE - Single page with client-side search and filters -->
   <div class="row" data-grid="true" id="grid">
   {% for item in collection %}
     <div class="col-md-6 col-xl-3 d-flex align-items-stretch">
@@ -40,6 +161,8 @@
     </div>
   {% endfor %}
   </div>
+  {% endif %}
+
 </div>
 {% else %}
   {% include 'set/empty.html' %}