Implement light mode for item loading to optimize initial data fetch

Web/app.py

@@ -33,7 +33,6 @@ import ausleihung as au
 import audit_log as al
 import datetime
 from apscheduler.schedulers.background import BackgroundScheduler
-from pymongo import MongoClient
 from bson.objectid import ObjectId
 from urllib.parse import urlparse, urlunparse
 import requests
@@ -59,6 +58,7 @@ import subprocess
 # Set base directory and centralized settings
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 import settings as cfg
+from settings import MongoClient
 
 
 app = Flask(__name__, static_folder='static')  # Correctly set static folder
@@ -1742,21 +1742,62 @@ def library_loans_admin():
 @app.route('/api/library_items')
 def api_library_items():
     """
-    API endpoint to fetch all library items (books, CDs, DVDs, media).
-    Returns JSON array suitable for table view.
+    API endpoint to fetch library items (books, CDs, DVDs, media).
+    Supports pagination via query params: offset, limit.
     """
     if 'username' not in session:
-        return jsonify([]), 401
+        return jsonify({'items': []}), 401
     
+    offset_raw = request.args.get('offset', '0')
+    limit_raw = request.args.get('limit', '120')
+
+    try:
+        offset = max(0, int(offset_raw))
+    except (TypeError, ValueError):
+        offset = 0
+
+    try:
+        limit = int(limit_raw)
+    except (TypeError, ValueError):
+        limit = 120
+    limit = min(max(limit, 1), 500)
+
     try:
         client = MongoClient(MONGODB_HOST, MONGODB_PORT)
         db = client[MONGODB_DB]
         items_db = db['items']
         ausleihungen_db = db['ausleihungen']
+
+        query = {
+            'ItemType': {'$in': ['book', 'cd', 'dvd', 'media']},
+            'Deleted': {'$ne': True}
+        }
+
+        projection = {
+            'Name': 1,
+            'Autor': 1,
+            'Author': 1,
+            'ISBN': 1,
+            'Code_4': 1,
+            'Code4': 1,
+            'ItemType': 1,
+            'Verfuegbar': 1,
+            'Condition': 1,
+            'HasDamage': 1,
+            'User': 1,
+            'Ort': 1,
+            'Beschreibung': 1,
+            'Image': 1
+        }
+
+        total_count = items_db.count_documents(query)
         
-        library_items = list(items_db.find({
-            'ItemType': {'$in': ['book', 'cd', 'dvd', 'media']}
-        }))
+        library_items = list(
+            items_db.find(query, projection)
+            .sort([('Name', 1), ('_id', 1)])
+            .skip(offset)
+            .limit(limit)
+        )
 
         item_ids = [str(item.get('_id')) for item in library_items if item.get('_id')]
         active_records = []
@@ -1782,6 +1823,8 @@ def api_library_items():
         for item in library_items:
             item_id = str(item['_id'])
             item['_id'] = item_id
+            if item.get('Code4') in (None, '') and item.get('Code_4') not in (None, ''):
+                item['Code4'] = item.get('Code_4')
 
             condition_value = str(item.get('Condition', '')).strip().lower()
             has_damage = bool(item.get('HasDamage')) or condition_value == 'destroyed'
@@ -1795,8 +1838,16 @@ def api_library_items():
                 item['LibraryDisplayStatus'] = 'available'
 
             item['BorrowedBy'] = active_user_by_item.get(item_id) or item.get('User', '')
-        
-        return jsonify(library_items), 200
+
+        count = len(library_items)
+        return jsonify({
+            'items': library_items,
+            'offset': offset,
+            'limit': limit,
+            'count': count,
+            'total': total_count,
+            'has_more': (offset + count) < total_count
+        }), 200
     except Exception as e:
         print(f"Error fetching library items: {e}")
         return jsonify({'error': str(e)}), 500
@@ -2882,6 +2933,7 @@ def logout():
 @app.route('/get_items', methods=['GET'])
 def get_items():
     """Return items plus merged favorites (session + DB) and per-item favorite flag."""
+    client = None
     try:
         username = session.get('username')
         # Merge DB favorites into session if logged in
@@ -2895,22 +2947,138 @@ def get_items():
                 app.logger.warning(f"Could not merge DB favorites: {fav_err}")
         favorites = set(session.get('favorites', []))
 
+        available_only = str(request.args.get('available_only', '')).strip().lower() in ('1', 'true', 'yes', 'on')
+        offset_raw = request.args.get('offset')
+        limit_raw = request.args.get('limit')
+        light_mode_param = str(request.args.get('light_mode', '')).strip().lower()
+        pagination_requested = offset_raw is not None or limit_raw is not None
+
+        if pagination_requested:
+            try:
+                offset = max(0, int(offset_raw or '0'))
+            except (TypeError, ValueError):
+                offset = 0
+            try:
+                limit = int(limit_raw or '120')
+            except (TypeError, ValueError):
+                limit = 120
+            limit = min(max(limit, 1), 500)
+        else:
+            offset = 0
+            limit = None
+
+        # Light mode: minimal fields for faster initial load (auto-enabled on offset=0 unless explicitly disabled)
+        # Can be manually controlled via ?light_mode=true/false parameter
+        if light_mode_param in ('1', 'true', 'yes', 'on'):
+            light_mode = True
+        elif light_mode_param in ('0', 'false', 'no', 'off'):
+            light_mode = False
+        else:
+            light_mode = (offset == 0)  # Auto-enable light mode for first page
+
         client = MongoClient(MONGODB_HOST, MONGODB_PORT)
         db = client[MONGODB_DB]
         items_col = db['items']
-        items_cur = items_col.find({
+        base_query = {
             'IsGroupedSubItem': {'$ne': True},
             'ItemType': {'$nin': LIBRARY_ITEM_TYPES},
             'Deleted': {'$ne': True},
-        })
-        items = []
-        for itm in items_cur:
-            item_id_str = str(itm['_id'])
-            grouped_children = list(items_col.find({
-                'ParentItemId': item_id_str,
+        }
+
+        total_count = items_col.count_documents(base_query)
+
+        # Light projection: essentials only for fast initial render
+        light_projection = {
+            'Name': 1,
+            'Code_4': 1,
+            'Images': 1,
+            'ThumbnailInfo': 1,
+            'Verfuegbar': 1,
+            'Filter': 1,
+            'Filter2': 1,
+            'Filter3': 1,
+            'Ort': 1,
+            'User': 1,
+            'ItemType': 1,
+        }
+
+        # Full projection: all details for detailed view
+        full_projection = {
+            'Name': 1,
+            'Ort': 1,
+            'Beschreibung': 1,
+            'Filter': 1,
+            'Filter2': 1,
+            'Filter3': 1,
+            'Code_4': 1,
+            'Images': 1,
+            'ThumbnailInfo': 1,
+            'Verfuegbar': 1,
+            'User': 1,
+            'BorrowerInfo': 1,
+            'appointments': 1,
+            'BlockedNow': 1,
+            'Reservierbar': 1,
+            'DamageReports': 1,
+            'ISBN': 1,
+            'Author': 1,
+            'Autor': 1,
+            'Anschaffungsjahr': 1,
+            'Anschaffungskosten': 1,
+            'Condition': 1,
+            'HasDamage': 1,
+            'ItemType': 1,
+            'SeriesGroupId': 1,
+            'LastUpdated': 1,
+        }
+
+        parent_projection = light_projection if light_mode else full_projection
+
+        items_cur = items_col.find(base_query, parent_projection).sort([('Name', 1), ('_id', 1)])
+        if pagination_requested:
+            items_cur = items_cur.skip(offset).limit(limit)
+
+        parent_items = list(items_cur)
+        parent_ids = [str(item.get('_id')) for item in parent_items if item.get('_id') is not None]
+
+        children_by_parent = {}
+        if parent_ids:
+            # Light mode: minimal child data for counting only
+            light_child_projection = {
+                '_id': 1,
+                'ParentItemId': 1,
+                'Code_4': 1,
+                'Verfuegbar': 1,
+                'Name': 1,
+            }
+            # Full mode: complete child data with all details
+            full_child_projection = {
+                '_id': 1,
+                'ParentItemId': 1,
+                'Code_4': 1,
+                'Verfuegbar': 1,
+                'Name': 1,
+                'Images': 1,
+                'ThumbnailInfo': 1,
+                'Beschreibung': 1,
+            }
+            child_projection = light_child_projection if light_mode else full_child_projection
+            
+            child_cursor = items_col.find({
+                'ParentItemId': {'$in': parent_ids},
                 'IsGroupedSubItem': True,
                 'Deleted': {'$ne': True},
-            }))
+            }, child_projection)
+            for child in child_cursor:
+                parent_id = str(child.get('ParentItemId') or '')
+                if not parent_id:
+                    continue
+                children_by_parent.setdefault(parent_id, []).append(child)
+
+        items = []
+        for itm in parent_items:
+            item_id_str = str(itm['_id'])
+            grouped_children = children_by_parent.get(item_id_str, [])
             grouped_count = 1 + len(grouped_children)
 
             grouped_units = [itm] + grouped_children
@@ -2937,11 +3105,27 @@ def get_items():
             itm['GroupedAllCodes'] = grouped_all_codes
             if grouped_count > 1:
                 itm['Verfuegbar'] = len(available_units) > 0
+            if available_only and not itm.get('Verfuegbar', False):
+                continue
             itm['is_favorite'] = item_id_str in favorites
             items.append(itm)
-        return jsonify({'items': items, 'favorites': list(favorites)})
+
+        count = len(items)
+        return jsonify({
+            'items': items,
+            'favorites': list(favorites),
+            'offset': offset,
+            'limit': limit if limit is not None else count,
+            'count': count,
+            'total': total_count,
+            'light_mode': light_mode,
+            'has_more': pagination_requested and ((offset + count) < total_count)
+        })
     except Exception as e:
         return jsonify({'items': [], 'error': str(e)}), 500
+    finally:
+        if client:
+            client.close()
 
 
 @app.route('/get_item/<id>')

Web/ausleihung.py

@@ -25,7 +25,6 @@ Sammlungsstruktur:
    Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
    For commercial licensing inquiries: https://github.com/AIIrondev
 '''
-from pymongo import MongoClient
 from bson.objectid import ObjectId
 import datetime
 import pytz
@@ -34,6 +33,7 @@ import os
 import json
 import shutil
 import settings as cfg
+from settings import MongoClient
 
 # Add this helper function after imports
 def ensure_timezone_aware(dt):

Web/items.py

@@ -26,10 +26,10 @@ Collection Structure:
    Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
    For commercial licensing inquiries: https://github.com/AIIrondev
 '''
-from pymongo import MongoClient
 from bson.objectid import ObjectId
 import datetime
 import settings as cfg
+from settings import MongoClient
 
 
 LIBRARY_ITEM_TYPES = ('book', 'cd', 'dvd', 'media')

Web/settings.py

@@ -12,6 +12,7 @@ defaults for the web application and helper modules.
 """
 import os
 import json
+from pymongo import MongoClient as _PyMongoClient
 
 # Base directory of this Web package
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
@@ -173,3 +174,21 @@ if not os.path.isabs(BACKUP_FOLDER):
     BACKUP_FOLDER = os.path.join(PROJECT_ROOT, BACKUP_FOLDER)
 if not os.path.isabs(LOGS_FOLDER):
     LOGS_FOLDER = os.path.join(PROJECT_ROOT, LOGS_FOLDER)
+
+
+def MongoClient(*args, **kwargs):
+    """Return a lightweight MongoDB client configured from this settings module."""
+    client_kwargs = {
+        'maxPoolSize': 10,
+        'minPoolSize': 0,
+        'connectTimeoutMS': 5000,
+        'serverSelectionTimeoutMS': 5000,
+        'retryWrites': True,
+    }
+    client_kwargs.update(kwargs)
+
+    # Preserve caller-provided positional host/port arguments.
+    # If none are passed, use configured defaults.
+    if args:
+        return _PyMongoClient(*args, **client_kwargs)
+    return _PyMongoClient(MONGODB_HOST, MONGODB_PORT, **client_kwargs)

Web/templates/library_table.html

@@ -290,6 +290,20 @@
         color: #666;
     }
 
+    .library-load-row {
+        margin-top: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    .library-load-hint {
+        font-size: 0.9em;
+        color: #6b7280;
+    }
+
     /* Modal styles */
     .modal {
         display: none;
@@ -501,6 +515,10 @@
                 <!-- Items will be loaded here -->
             </tbody>
         </table>
+        <div id="loadMoreRow" class="library-load-row" style="display:none;">
+            <span id="loadInfo" class="library-load-hint"></span>
+            <button id="loadMoreBtn" class="button" type="button">Mehr laden</button>
+        </div>
     </div>
 
     <!-- Empty state -->
@@ -523,6 +541,24 @@
     // State
     let libraryItems = [];
     let filteredItems = [];
+    let visibleItems = [];
+    let currentSearchTerm = '';
+    let activeFilters = {
+        author: '',
+        isbn: '',
+        type: '',
+        status: ''
+    };
+    let pagingState = {
+        offset: 0,
+        total: 0,
+        hasMore: true,
+        loading: false
+    };
+    const API_PAGE_SIZE = 120;
+    const INITIAL_RENDER_COUNT = 120;
+    const RENDER_BATCH_COUNT = 120;
+    let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
     let scannerInstance = null;
     let scannerRunning = false;
@@ -531,32 +567,124 @@
     let lastScanAt = 0;
     const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');
 
-    // Load items
+    async function fetchLibraryPage(offset, limit) {
+        const response = await fetch(`/api/library_items?offset=${offset}&limit=${limit}`);
+        if (!response.ok) {
+            throw new Error('Failed to load library items');
+        }
+        return response.json();
+    }
+
+    // Load items progressively: first page immediately, rest in background
     async function loadLibraryItems() {
+        if (pagingState.loading) return;
+        pagingState.loading = true;
         try {
-            const response = await fetch('/api/library_items');
-            if (!response.ok) throw new Error('Failed to load library items');
-            libraryItems = await response.json();
-            displayItems(libraryItems);
+            const firstPage = await fetchLibraryPage(0, API_PAGE_SIZE);
+            libraryItems = firstPage.items || [];
+            pagingState.offset = (firstPage.offset || 0) + (firstPage.count || libraryItems.length);
+            pagingState.total = firstPage.total || libraryItems.length;
+            pagingState.hasMore = Boolean(firstPage.has_more);
+
+            applyFiltersAndSearch(true);
+
+            if (pagingState.hasMore) {
+                loadRemainingLibraryItemsInBackground();
+            }
         } catch (error) {
             console.error('Error loading library items:', error);
             document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="6" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
+        } finally {
+            pagingState.loading = false;
         }
     }
 
-    // Display items in table
-    function displayItems(items) {
+    async function loadRemainingLibraryItemsInBackground() {
+        while (pagingState.hasMore) {
+            try {
+                const page = await fetchLibraryPage(pagingState.offset, API_PAGE_SIZE);
+                const nextItems = page.items || [];
+                if (nextItems.length === 0) {
+                    pagingState.hasMore = false;
+                    break;
+                }
+
+                libraryItems = libraryItems.concat(nextItems);
+                pagingState.offset = (page.offset || pagingState.offset) + (page.count || nextItems.length);
+                pagingState.total = page.total || pagingState.total;
+                pagingState.hasMore = Boolean(page.has_more);
+
+                // Keep the current view reactive while avoiding a full rerender burst.
+                applyFiltersAndSearch(false);
+
+                if ('requestIdleCallback' in window) {
+                    await new Promise(resolve => requestIdleCallback(() => resolve(), { timeout: 250 }));
+                } else {
+                    await new Promise(resolve => setTimeout(resolve, 0));
+                }
+            } catch (error) {
+                console.error('Error loading additional library items:', error);
+                break;
+            }
+        }
+    }
+
+    function filterItems(items) {
+        const author = activeFilters.author;
+        const isbn = activeFilters.isbn;
+        const type = activeFilters.type;
+        const status = activeFilters.status;
+
+        return items.filter(item => {
+            const authorMatch = !author || (item.Autor || item.Author || '').toLowerCase().includes(author);
+            const isbnMatch = !isbn || (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(isbn);
+            const typeMatch = !type || (item.ItemType || 'book') === type;
+            const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
+            const statusMatch = !status || statusKey === status;
+            return authorMatch && isbnMatch && typeMatch && statusMatch;
+        });
+    }
+
+    function applySearch(items) {
+        if (!currentSearchTerm) return items;
+        return items.filter(item =>
+            (item.Name || '').toLowerCase().includes(currentSearchTerm) ||
+            (item.Autor || item.Author || '').toLowerCase().includes(currentSearchTerm) ||
+            (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(currentSearchTerm)
+        );
+    }
+
+    function applyFiltersAndSearch(resetRenderCount) {
+        const filteredByPanel = filterItems(libraryItems);
+        filteredItems = applySearch(filteredByPanel);
+        if (resetRenderCount) {
+            renderedCount = Math.min(INITIAL_RENDER_COUNT, filteredItems.length);
+        } else {
+            renderedCount = Math.min(Math.max(renderedCount, INITIAL_RENDER_COUNT), filteredItems.length || INITIAL_RENDER_COUNT);
+        }
+        visibleItems = filteredItems;
+        renderItems();
+    }
+
+    // Display current view with incremental rendering
+    function renderItems() {
         const tbody = document.getElementById('itemsTableBody');
         const emptyState = document.getElementById('emptyState');
+        const loadMoreRow = document.getElementById('loadMoreRow');
+        const loadInfo = document.getElementById('loadInfo');
+        const loadMoreBtn = document.getElementById('loadMoreBtn');
 
-        if (items.length === 0) {
+        if (visibleItems.length === 0) {
             tbody.innerHTML = '';
             emptyState.style.display = 'block';
+            loadMoreRow.style.display = 'none';
             return;
         }
 
         emptyState.style.display = 'none';
-        tbody.innerHTML = items.map(item => `
+        const rowsToRender = visibleItems.slice(0, renderedCount);
+
+        tbody.innerHTML = rowsToRender.map(item => `
             ${(() => {
                 const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
                 const statusClass = statusKey === 'damaged' ? 'status-damaged' : (statusKey === 'borrowed' ? 'status-borrowed' : 'status-available');
@@ -567,7 +695,7 @@
             <tr>
                 <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
                 <td>${escapeHtml(item.Autor || item.Author || '-')}</td>
-                <td>${escapeHtml(item.ISBN || item.Code4 || '-')}</td>
+                <td>${escapeHtml(item.ISBN || item.Code_4 || item.Code4 || '-')}</td>
                 <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
                 <td>
                     <span class="table-status ${statusClass}">
@@ -585,6 +713,18 @@
                 `;
             })()}
         `).join('');
+
+        const canLoadMoreRows = renderedCount < visibleItems.length;
+        if (canLoadMoreRows) {
+            loadMoreRow.style.display = 'flex';
+            loadMoreBtn.style.display = 'inline-block';
+            loadInfo.textContent = `${renderedCount} von ${visibleItems.length} angezeigt`;
+        } else {
+            const backgroundHint = pagingState.hasMore ? `Lade weitere Medien im Hintergrund (${libraryItems.length}/${pagingState.total || '?'})...` : `${visibleItems.length} Treffer`;
+            loadMoreRow.style.display = 'flex';
+            loadMoreBtn.style.display = 'none';
+            loadInfo.textContent = backgroundHint;
+        }
     }
 
     // Filter toggle
@@ -598,21 +738,11 @@
 
     // Apply filters
     document.getElementById('applyFilterBtn').addEventListener('click', () => {
-        const author = document.getElementById('filterAuthor').value.toLowerCase();
-        const isbn = document.getElementById('filterISBN').value.toLowerCase();
-        const type = document.getElementById('filterType').value;
-        const status = document.getElementById('filterStatus').value;
-
-        filteredItems = libraryItems.filter(item => {
-            const authorMatch = !author || (item.Autor || item.Author || '').toLowerCase().includes(author);
-            const isbnMatch = !isbn || (item.ISBN || item.Code4 || '').toLowerCase().includes(isbn);
-            const typeMatch = !type || (item.ItemType || 'book') === type;
-            const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
-            const statusMatch = !status || statusKey === status;
-            return authorMatch && isbnMatch && typeMatch && statusMatch;
-        });
-
-        displayItems(filteredItems);
+        activeFilters.author = document.getElementById('filterAuthor').value.toLowerCase();
+        activeFilters.isbn = document.getElementById('filterISBN').value.toLowerCase();
+        activeFilters.type = document.getElementById('filterType').value;
+        activeFilters.status = document.getElementById('filterStatus').value;
+        applyFiltersAndSearch(true);
     });
 
     // Clear filters
@@ -621,19 +751,19 @@
         document.getElementById('filterISBN').value = '';
         document.getElementById('filterType').value = '';
         document.getElementById('filterStatus').value = '';
-        displayItems(libraryItems);
+        activeFilters = { author: '', isbn: '', type: '', status: '' };
+        applyFiltersAndSearch(true);
     });
 
     // Search input
     document.getElementById('librarySearch').addEventListener('input', (e) => {
-        const searchTerm = e.target.value.toLowerCase();
-        const toSearch = filteredItems.length > 0 ? filteredItems : libraryItems;
-        const results = toSearch.filter(item =>
-            (item.Name || '').toLowerCase().includes(searchTerm) ||
-            (item.Autor || item.Author || '').toLowerCase().includes(searchTerm) ||
-            (item.ISBN || item.Code4 || '').toLowerCase().includes(searchTerm)
-        );
-        displayItems(results);
+        currentSearchTerm = (e.target.value || '').toLowerCase();
+        applyFiltersAndSearch(true);
+    });
+
+    document.getElementById('loadMoreBtn').addEventListener('click', () => {
+        renderedCount = Math.min(renderedCount + RENDER_BATCH_COUNT, visibleItems.length);
+        renderItems();
     });
 
     // Helper functions

Web/templates/main.html

@@ -724,8 +724,75 @@
     // Add this line to define allItems globally
     let allItems = [];
 
-    function loadItems() {
-        fetch("{{ url_for('get_items') }}")
+    const MAIN_ITEMS_PAGE_SIZE = 120;
+    let mainItemsNextOffset = 0;
+    let mainItemsHasMore = false;
+    let mainItemsLoadingMore = false;
+    let mainItemsLightMode = true;  // Track if we're in light mode to gradually request full data
+    let mainItemsObserver = null;
+    let mainItemsSentinel = null;
+    let mainItemsLoadingIndicator = null;
+    let mainItemsScrollPrefetchBound = false;
+
+    function ensureMainItemsLoadingIndicator() {
+        const itemsContainer = document.querySelector('#items-container');
+        if (!itemsContainer) return null;
+
+        if (!mainItemsLoadingIndicator) {
+            mainItemsLoadingIndicator = document.createElement('div');
+            mainItemsLoadingIndicator.id = 'main-items-loading-indicator';
+            mainItemsLoadingIndicator.className = 'items-loading-indicator';
+            mainItemsLoadingIndicator.innerHTML = `
+                <div class="loading-track"><div class="loading-fill"></div></div>
+                <div class="loading-label">Weitere Objekte werden vorbereitet...</div>
+            `;
+        }
+
+        itemsContainer.appendChild(mainItemsLoadingIndicator);
+        return itemsContainer;
+    }
+
+    function updateMainItemsLoadingIndicator() {
+        const itemsContainer = ensureMainItemsLoadingIndicator();
+        if (!itemsContainer || !mainItemsLoadingIndicator) return;
+
+        const shouldShow = mainItemsHasMore || mainItemsLoadingMore;
+        mainItemsLoadingIndicator.style.display = shouldShow ? 'flex' : 'none';
+        mainItemsLoadingIndicator.classList.toggle('is-loading', mainItemsLoadingMore);
+
+        const label = mainItemsLoadingIndicator.querySelector('.loading-label');
+        if (label) {
+            label.textContent = mainItemsLoadingMore
+                ? 'Weitere Objekte werden geladen...'
+                : 'Weitere Objekte werden vorbereitet...';
+        }
+    }
+
+    function maybePrefetchMainItems() {
+        const itemsContainer = document.querySelector('#items-container');
+        if (!itemsContainer || !mainItemsHasMore || mainItemsLoadingMore) {
+            return;
+        }
+
+        const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
+        const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4);
+        if (distanceToEnd > prefetchThreshold) {
+            return;
+        }
+
+        mainItemsLoadingMore = true;
+        updateMainItemsLoadingIndicator();
+        loadItems(mainItemsNextOffset, true).finally(() => {
+            mainItemsLoadingMore = false;
+            updateMainItemsLoadingIndicator();
+        });
+    }
+
+    function loadItems(offset = 0, append = false) {
+        // Für Pages nach der ersten: Explizit vollständige Daten laden (light_mode=false)
+        // Erste Page: light_mode wird automatisch enablet
+        const lightModeParam = offset > 0 ? '&light_mode=false' : '';
+        return fetch(`{{ url_for('get_items') }}?offset=${offset}&limit=${MAIN_ITEMS_PAGE_SIZE}${lightModeParam}`)
             .then(response => response.json())
             .then(data => {
                 const itemsContainer = document.querySelector('#items-container');
@@ -735,27 +802,39 @@
                 const filter3Values = new Set();
                 
                 // Store all items data globally for filter rebuilding
-                allItems = data.items || [];
+                const pageItems = data.items || [];
+                allItems = append ? allItems.concat(pageItems) : pageItems;
                 
                 // Clear the container first
-                itemsContainer.innerHTML = '';
+                if (!append) {
+                    itemsContainer.innerHTML = '';
+                }
                 
-                if (!data.items || data.items.length === 0) {
+                if (!append && (!pageItems || pageItems.length === 0)) {
                     itemsContainer.innerHTML = '<div class="no-items-message">Keine Objekte gefunden</div>';
                     return;
                 }
 
                 // Sort items by name in ascending order (A-Z)
-                data.items.sort((a, b) => {
+                pageItems.sort((a, b) => {
                     const nameA = a.Name ? a.Name.toLowerCase() : '';
                     const nameB = b.Name ? b.Name.toLowerCase() : '';
                     return nameA.localeCompare(nameB); // Ascending order
                 });
+
+                allItems.forEach(itemForFilters => {
+                    const f1 = Array.isArray(itemForFilters.Filter) ? itemForFilters.Filter : (itemForFilters.Filter ? [itemForFilters.Filter] : []);
+                    const f2 = Array.isArray(itemForFilters.Filter2) ? itemForFilters.Filter2 : (itemForFilters.Filter2 ? [itemForFilters.Filter2] : []);
+                    const f3 = Array.isArray(itemForFilters.Filter3) ? itemForFilters.Filter3 : (itemForFilters.Filter3 ? [itemForFilters.Filter3] : []);
+                    f1.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter1Values.add(value); });
+                    f2.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter2Values.add(value); });
+                    f3.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter3Values.add(value); });
+                });
                 
                 const favoriteIds = new Set(data.favorites || []);
                 window.currentFavorites = favoriteIds;
                 try { sessionStorage.setItem('favoritesCache', JSON.stringify(Array.from(favoriteIds))); } catch(e){}
-                data.items.forEach(item => {
+                pageItems.forEach(item => {
                     try {
                         const card = document.createElement('div');
                         card.classList.add('item-card');
@@ -995,8 +1074,10 @@
                 populateFilterOptions('filter2-options', [...filter2Values].sort(), 2);
                 populateFilterOptions('filter3-options', [...filter3Values].sort(), 3);
                 
-                // Start display from leftmost position (first card, which is now Z)
-                itemsContainer.scrollLeft = 0;
+                // Start display from leftmost position on full reload only.
+                if (!append) {
+                    itemsContainer.scrollLeft = 0;
+                }
                 
                 // Apply filters
                 applyFilters();
@@ -1011,15 +1092,93 @@
                 if (activeFilters.filter1.length > 0 || activeFilters.filter2.length > 0) {
                     rebuildFilter3Options();
                 }
+
+                mainItemsNextOffset = (data.offset || offset) + (data.count || pageItems.length);
+                mainItemsHasMore = Boolean(data.has_more);
+                updateMainItemsLoadingIndicator();
+                setupMainItemsLazyLoading();
+                maybePrefetchMainItems();
             })
             .catch(error => {
                 console.error('Error fetching items:', error);
+                mainItemsLoadingMore = false;
+                mainItemsHasMore = false;
+                updateMainItemsLoadingIndicator();
+                if (append) {
+                    return;
+                }
                 const itemsContainer = document.querySelector('#items-container');
                 itemsContainer.innerHTML = 
                     '<div class="error-message">Fehler beim Laden der Objekte. Bitte versuchen Sie es später erneut.</div>';
             });
     }
 
+    function ensureMainItemsSentinel() {
+        const itemsContainer = document.querySelector('#items-container');
+        if (!itemsContainer) return null;
+
+        ensureMainItemsLoadingIndicator();
+
+        if (!mainItemsSentinel) {
+            mainItemsSentinel = document.createElement('div');
+            mainItemsSentinel.id = 'main-items-sentinel';
+            mainItemsSentinel.style.flex = '0 0 1px';
+            mainItemsSentinel.style.width = '1px';
+            mainItemsSentinel.style.minWidth = '1px';
+            mainItemsSentinel.style.height = '1px';
+            mainItemsSentinel.style.pointerEvents = 'none';
+        }
+
+        if (!mainItemsSentinel.parentNode) {
+            itemsContainer.appendChild(mainItemsSentinel);
+        } else {
+            itemsContainer.appendChild(mainItemsSentinel);
+        }
+
+        return itemsContainer;
+    }
+
+    function setupMainItemsLazyLoading() {
+        const itemsContainer = ensureMainItemsSentinel();
+        if (!itemsContainer) return;
+
+        if (mainItemsObserver) {
+            mainItemsObserver.disconnect();
+            mainItemsObserver = null;
+        }
+
+        if (!mainItemsScrollPrefetchBound) {
+            itemsContainer.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
+            mainItemsScrollPrefetchBound = true;
+        }
+
+        if (!mainItemsHasMore) return;
+
+        mainItemsObserver = new IntersectionObserver(entries => {
+            if (!entries.some(entry => entry.isIntersecting)) {
+                return;
+            }
+
+            if (mainItemsLoadingMore || !mainItemsHasMore) {
+                return;
+            }
+
+            mainItemsLoadingMore = true;
+            updateMainItemsLoadingIndicator();
+            loadItems(mainItemsNextOffset, true).finally(() => {
+                mainItemsLoadingMore = false;
+                updateMainItemsLoadingIndicator();
+            });
+        }, {
+            root: itemsContainer,
+            threshold: 0.15,
+            rootMargin: '0px 900px 0px 0px'
+        });
+
+        mainItemsObserver.observe(mainItemsSentinel);
+        updateMainItemsLoadingIndicator();
+    }
+
     function searchByCode() {
         const searchInput = document.getElementById('code-search');
         const rawSearchTerm = searchInput.value;
@@ -2737,6 +2896,57 @@
         scroll-behavior: smooth;
     }
 
+    .items-loading-indicator {
+        display: none;
+        flex: 0 0 220px;
+        min-width: 220px;
+        max-width: 220px;
+        height: 180px;
+        align-self: center;
+        margin-right: 8px;
+        border: 1px solid #dbe3ee;
+        border-radius: 10px;
+        background: #f8fafc;
+        color: #334155;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 10px;
+        scroll-snap-align: center;
+    }
+
+    .items-loading-indicator .loading-label {
+        font-size: 0.84rem;
+        text-align: center;
+        line-height: 1.3;
+        max-width: 170px;
+    }
+
+    .items-loading-indicator .loading-track {
+        width: 160px;
+        height: 8px;
+        border-radius: 999px;
+        background: #e2e8f0;
+        overflow: hidden;
+    }
+
+    .items-loading-indicator .loading-fill {
+        width: 45%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #60a5fa, #2563eb);
+        transform: translateX(-100%);
+    }
+
+    .items-loading-indicator.is-loading .loading-fill {
+        animation: items-loader-slide 1.05s ease-in-out infinite;
+    }
+
+    @keyframes items-loader-slide {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(260%); }
+    }
+
     .item-card {
         background-color: #fff;
         border: 1px solid #ddd;

Web/templates/main_admin.html

@@ -26,49 +26,93 @@
         font-weight: 600;
     }
 
-    .bulk-delete-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        justify-content: space-between;
-        align-items: center;
-        border: 1px solid #f2c4c4;
-        background: #fff8f8;
-        border-radius: 8px;
-        padding: 12px 14px;
-        margin: 0 0 18px;
+    .bulk-delete-inline-wrap {
+        display: inline-flex;
     }
 
-    .bulk-delete-toolbar strong {
+    .bulk-delete-drawer-toggle {
+        position: static;
+        transform: none;
+        z-index: 2;
+    }
+
+    .bulk-delete-drawer-toggle .drawer-icon {
+        display: inline-block;
+        margin-right: 4px;
+    }
+
+    .bulk-delete-drawer-toggle:hover {
+        box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
+    }
+
+    .bulk-delete-drawer-toggle:active {
+        transform: scale(0.98);
+    }
+
+    .bulk-delete-drawer {
+        display: none;
+        width: 100%;
+        max-width: 980px;
+        margin: 0 auto 18px;
+        border: 1px solid #dbe3ee;
+        background: #ffffff;
+        border-radius: 10px;
+        padding: 14px;
+        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
+    }
+
+    .bulk-delete-drawer.open {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 14px;
+    }
+
+    .bulk-delete-content {
+        flex: 1 1 380px;
+    }
+
+    .bulk-delete-drawer strong {
         display: block;
         margin-bottom: 2px;
     }
 
     .bulk-delete-summary {
-        color: #7a4a4a;
+        color: #334155;
         font-size: 0.92rem;
         margin-top: 4px;
     }
 
-    .bulk-delete-toolbar small {
-        color: #7a4a4a;
+    .bulk-delete-drawer small {
+        color: #64748b;
         display: block;
         margin-top: 2px;
+        line-height: 1.35;
     }
 
     .bulk-delete-actions {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
+        margin-top: 4px;
+        align-items: center;
+        flex: 0 1 auto;
     }
 
     .bulk-delete-actions button {
-        border: 1px solid #cfd8dc;
-        border-radius: 6px;
-        padding: 8px 12px;
+        border: 1px solid #dbe3ee;
+        border-radius: 8px;
+        padding: 9px 12px;
         cursor: pointer;
-        background: #fff;
+        background: #f8fafc;
+        color: #1e293b;
         font-weight: 600;
+        text-align: center;
+    }
+
+    .bulk-delete-actions button:hover {
+        background: #eef4ff;
+        border-color: #bfdbfe;
     }
 
     .bulk-delete-actions .danger {
@@ -77,6 +121,11 @@
         border-color: #c82333;
     }
 
+    .bulk-delete-actions .danger:hover {
+        background: #c82333;
+        border-color: #b21f2d;
+    }
+
     /* Filter styles */
     .filter-container {
         display: flex;
@@ -274,6 +323,57 @@
         scroll-behavior: smooth;
     }
 
+    .items-loading-indicator {
+        display: none;
+        flex: 0 0 220px;
+        min-width: 220px;
+        max-width: 220px;
+        height: 180px;
+        align-self: center;
+        margin-right: 8px;
+        border: 1px solid #dbe3ee;
+        border-radius: 10px;
+        background: #f8fafc;
+        color: #334155;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 10px;
+        scroll-snap-align: center;
+    }
+
+    .items-loading-indicator .loading-label {
+        font-size: 0.84rem;
+        text-align: center;
+        line-height: 1.3;
+        max-width: 170px;
+    }
+
+    .items-loading-indicator .loading-track {
+        width: 160px;
+        height: 8px;
+        border-radius: 999px;
+        background: #e2e8f0;
+        overflow: hidden;
+    }
+
+    .items-loading-indicator .loading-fill {
+        width: 45%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #60a5fa, #2563eb);
+        transform: translateX(-100%);
+    }
+
+    .items-loading-indicator.is-loading .loading-fill {
+        animation: items-loader-slide 1.05s ease-in-out infinite;
+    }
+
+    @keyframes items-loader-slide {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(260%); }
+    }
+
     .item-card {
         background-color: #fff;
         border: 1px solid #ddd;
@@ -327,7 +427,7 @@
         align-items: center;
         gap: 6px;
         font-size: 0.9rem;
-        color: #6b1f1f;
+        color: #475569;
         cursor: pointer;
         user-select: none;
     }
@@ -339,6 +439,20 @@
         cursor: pointer;
     }
 
+    @media (max-width: 768px) {
+        .bulk-delete-drawer.open {
+            flex-direction: column;
+        }
+
+        .bulk-delete-actions {
+            width: 100%;
+        }
+
+        .bulk-delete-actions button {
+            width: 100%;
+        }
+    }
+
     .item-card .item-image {
         width: 100%;
         height: auto;
@@ -2191,11 +2305,16 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 <button id="toggle-favorites-view" class="view-toggle-btn" title="Nur Merkliste anzeigen">
                     <span id="favorites-view-icon">🔖</span>
                 </button>
+                <div class="bulk-delete-inline-wrap">
+                    <button type="button" id="bulk-delete-drawer-toggle" class="view-toggle-btn bulk-delete-drawer-toggle" aria-expanded="false" title="Massenlöschung" onclick="toggleBulkDeleteDrawer()">
+                        <span class="drawer-icon">⚙</span>
+                    </button>
+                </div>
             </div>
         </h1>
         <div id="items-indicator" class="items-indicator">Objekte im System: 0</div>
-        <div class="bulk-delete-toolbar">
-            <div>
+        <div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
+            <div class="bulk-delete-content">
                 <strong>Massenlöschung nach Kriterien</strong>
                 <div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
                 <small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
@@ -2587,6 +2706,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     let currentUsername = '';
     let allItems = []; // Cache for all items
     let bulkDeleteSelection = new Set();
+    let bulkDeleteDrawerOpen = false;
     const studentCardsModuleEnabled = {{ 'true' if student_cards_module_enabled else 'false' }};
     const studentDefaultBorrowDays = {{ student_default_borrow_days|default(14) }};
     const studentMaxBorrowDays = {{ student_max_borrow_days|default(365) }};
@@ -2897,9 +3017,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 if (parsedFilters.filter3) activeFilters.filter3 = parsedFilters.filter3;
                 
                 // Update UI to show selected filters
-                updateSelectedFilters(1);
-                updateSelectedFilters(2);
-                updateSelectedFilters(3);
+                updateSelectedFiltersDisplay(1);
+                updateSelectedFiltersDisplay(2);
+                updateSelectedFiltersDisplay(3);
                 
                 // We'll rebuild Filter 3 options after items are loaded
             } catch (e) {
@@ -2932,6 +3052,25 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
     }
 
+    function setBulkDeleteDrawer(open) {
+        bulkDeleteDrawerOpen = Boolean(open);
+        const drawer = document.getElementById('bulk-delete-drawer');
+        const toggle = document.getElementById('bulk-delete-drawer-toggle');
+        if (drawer) {
+            drawer.classList.toggle('open', bulkDeleteDrawerOpen);
+            drawer.setAttribute('aria-hidden', bulkDeleteDrawerOpen ? 'false' : 'true');
+        }
+        if (toggle) {
+            toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
+            toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span>' : '<span class="drawer-icon">⚙</span>';
+            toggle.title = bulkDeleteDrawerOpen ? 'Massenlöschung schließen' : 'Massenlöschung öffnen';
+        }
+    }
+
+    function toggleBulkDeleteDrawer() {
+        setBulkDeleteDrawer(!bulkDeleteDrawerOpen);
+    }
+
     function setBulkDeleteSelection(itemId, checked) {
         const normalizedId = String(itemId || '').trim();
         if (!normalizedId) {
@@ -2988,6 +3127,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
         updateBulkDeleteSummary();
     }
 
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape' && bulkDeleteDrawerOpen) {
+            setBulkDeleteDrawer(false);
+        }
+    });
+
     function deleteSelectedItems() {
         const selectedIds = [...bulkDeleteSelection];
         if (selectedIds.length === 0) {
@@ -3161,8 +3306,76 @@ document.addEventListener('DOMContentLoaded', ()=>{
     });
 
     // Function to load items from server
-    function loadItems() {
-        fetch("{{ url_for('get_items') }}")
+    const MAIN_ADMIN_ITEMS_PAGE_SIZE = 120;
+    let mainAdminItemsNextOffset = 0;
+    let mainAdminItemsHasMore = false;
+    let mainAdminItemsLoadingMore = false;
+    let mainAdminLightMode = true;  // Track if we're in light mode to gradually request full data
+    let mainAdminItemsObserver = null;
+    let mainAdminItemsSentinel = null;
+    let mainAdminItemsLoadingIndicator = null;
+    let mainAdminItemsScrollPrefetchBound = false;
+    let totalItemsInSystem = 0;
+
+    function ensureMainAdminItemsLoadingIndicator() {
+        const itemsContainer = document.querySelector('#items-container');
+        if (!itemsContainer) return null;
+
+        if (!mainAdminItemsLoadingIndicator) {
+            mainAdminItemsLoadingIndicator = document.createElement('div');
+            mainAdminItemsLoadingIndicator.id = 'main-admin-items-loading-indicator';
+            mainAdminItemsLoadingIndicator.className = 'items-loading-indicator';
+            mainAdminItemsLoadingIndicator.innerHTML = `
+                <div class="loading-track"><div class="loading-fill"></div></div>
+                <div class="loading-label">Weitere Objekte werden vorbereitet...</div>
+            `;
+        }
+
+        itemsContainer.appendChild(mainAdminItemsLoadingIndicator);
+        return itemsContainer;
+    }
+
+    function updateMainAdminItemsLoadingIndicator() {
+        const itemsContainer = ensureMainAdminItemsLoadingIndicator();
+        if (!itemsContainer || !mainAdminItemsLoadingIndicator) return;
+
+        const shouldShow = mainAdminItemsHasMore || mainAdminItemsLoadingMore;
+        mainAdminItemsLoadingIndicator.style.display = shouldShow ? 'flex' : 'none';
+        mainAdminItemsLoadingIndicator.classList.toggle('is-loading', mainAdminItemsLoadingMore);
+
+        const label = mainAdminItemsLoadingIndicator.querySelector('.loading-label');
+        if (label) {
+            label.textContent = mainAdminItemsLoadingMore
+                ? 'Weitere Objekte werden geladen...'
+                : 'Weitere Objekte werden vorbereitet...';
+        }
+    }
+
+    function maybePrefetchMainAdminItems() {
+        const itemsContainer = document.querySelector('#items-container');
+        if (!itemsContainer || !mainAdminItemsHasMore || mainAdminItemsLoadingMore) {
+            return;
+        }
+
+        const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
+        const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4);
+        if (distanceToEnd > prefetchThreshold) {
+            return;
+        }
+
+        mainAdminItemsLoadingMore = true;
+        updateMainAdminItemsLoadingIndicator();
+        loadItems(mainAdminItemsNextOffset, true).finally(() => {
+            mainAdminItemsLoadingMore = false;
+            updateMainAdminItemsLoadingIndicator();
+        });
+    }
+
+    function loadItems(offset = 0, append = false) {
+        // Für Pages nach der ersten: Explizit vollständige Daten laden (light_mode=false)
+        // Erste Page: light_mode wird automatisch enablet
+        const lightModeParam = offset > 0 ? '&light_mode=false' : '';
+        return fetch(`{{ url_for('get_items') }}?offset=${offset}&limit=${MAIN_ADMIN_ITEMS_PAGE_SIZE}${lightModeParam}`)
             .then(response => response.json())
             .then(data => {
                 const itemsContainer = document.querySelector('#items-container');
@@ -3172,9 +3385,13 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 const filter1Values = new Set();
                 const filter2Values = new Set();
                 const filter3Values = new Set();
-                allItems = data.items || [];
-                itemsContainer.innerHTML = '';
-                if (!data.items || data.items.length === 0) {
+                const pageItems = data.items || [];
+                allItems = append ? allItems.concat(pageItems) : pageItems;
+                totalItemsInSystem = Number(data.total || totalItemsInSystem || pageItems.length || 0);
+                if (!append) {
+                    itemsContainer.innerHTML = '';
+                }
+                if (!append && (!pageItems || pageItems.length === 0)) {
                     itemsContainer.innerHTML = `
                         <div class="no-items-message">
                             <div>Keine Objekte gefunden</div>
@@ -3187,15 +3404,25 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     return;
                 }
                 if (itemsIndicator) {
-                    itemsIndicator.textContent = `Objekte im System: ${data.items.length}`;
+                    itemsIndicator.textContent = `Objekte im System: ${totalItemsInSystem}${data.has_more ? ' (lädt...)' : ''}`;
                 }
-                data.items.sort((a, b) => {
+                pageItems.sort((a, b) => {
                     const nameA = a.Name ? a.Name.toLowerCase() : '';
                     const nameB = a.Name ? a.Name.toLowerCase() : '';
                     return nameA.localeCompare(nameB);
                 });
+
+                allItems.forEach(itemForFilters => {
+                    const f1 = Array.isArray(itemForFilters.Filter) ? itemForFilters.Filter : (itemForFilters.Filter ? [itemForFilters.Filter] : []);
+                    const f2 = Array.isArray(itemForFilters.Filter2) ? itemForFilters.Filter2 : (itemForFilters.Filter2 ? [itemForFilters.Filter2] : []);
+                    const f3 = Array.isArray(itemForFilters.Filter3) ? itemForFilters.Filter3 : (itemForFilters.Filter3 ? [itemForFilters.Filter3] : []);
+                    f1.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter1Values.add(value); });
+                    f2.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter2Values.add(value); });
+                    f3.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter3Values.add(value); });
+                });
+
                 const favoriteIds = new Set(data.favorites || []);
-                data.items.forEach(item => {
+                pageItems.forEach(item => {
                     try {
                         const card = document.createElement('div');
                         card.classList.add('item-card');
@@ -3427,7 +3654,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 populateFilterOptions('filter2-options', [...filter2Values].sort(), 2);
                 populateFilterOptions('filter3-options', [...filter3Values].sort(), 3);
                 
-                itemsContainer.scrollLeft = 0;
+                if (!append) {
+                    itemsContainer.scrollLeft = 0;
+                }
                 applyFilters();
                 updateBulkDeleteSummary();
                 
@@ -3442,9 +3671,21 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     rebuildFilter3Options();
                 }
                 /* favorites render count removed */
+
+                mainAdminItemsNextOffset = (data.offset || offset) + (data.count || pageItems.length);
+                mainAdminItemsHasMore = Boolean(data.has_more);
+                updateMainAdminItemsLoadingIndicator();
+                setupMainAdminItemsLazyLoading();
+                maybePrefetchMainAdminItems();
             })
             .catch(error => {
                 console.error('Error fetching items:', error);
+                mainAdminItemsLoadingMore = false;
+                mainAdminItemsHasMore = false;
+                updateMainAdminItemsLoadingIndicator();
+                if (append) {
+                    return;
+                }
                 const itemsContainer = document.querySelector('#items-container');
                 const itemsIndicator = document.getElementById('items-indicator');
                 itemsContainer.innerHTML = 
@@ -3455,6 +3696,67 @@ document.addEventListener('DOMContentLoaded', ()=>{
             });
     }
 
+    function ensureMainAdminItemsSentinel() {
+        const itemsContainer = document.querySelector('#items-container');
+        if (!itemsContainer) return null;
+
+        ensureMainAdminItemsLoadingIndicator();
+
+        if (!mainAdminItemsSentinel) {
+            mainAdminItemsSentinel = document.createElement('div');
+            mainAdminItemsSentinel.id = 'main-admin-items-sentinel';
+            mainAdminItemsSentinel.style.flex = '0 0 1px';
+            mainAdminItemsSentinel.style.width = '1px';
+            mainAdminItemsSentinel.style.minWidth = '1px';
+            mainAdminItemsSentinel.style.height = '1px';
+            mainAdminItemsSentinel.style.pointerEvents = 'none';
+        }
+
+        itemsContainer.appendChild(mainAdminItemsSentinel);
+        return itemsContainer;
+    }
+
+    function setupMainAdminItemsLazyLoading() {
+        const itemsContainer = ensureMainAdminItemsSentinel();
+        if (!itemsContainer) return;
+
+        if (mainAdminItemsObserver) {
+            mainAdminItemsObserver.disconnect();
+            mainAdminItemsObserver = null;
+        }
+
+        if (!mainAdminItemsScrollPrefetchBound) {
+            itemsContainer.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
+            mainAdminItemsScrollPrefetchBound = true;
+        }
+
+        if (!mainAdminItemsHasMore) return;
+
+        mainAdminItemsObserver = new IntersectionObserver(entries => {
+            if (!entries.some(entry => entry.isIntersecting)) {
+                return;
+            }
+
+            if (mainAdminItemsLoadingMore || !mainAdminItemsHasMore) {
+                return;
+            }
+
+            mainAdminItemsLoadingMore = true;
+            updateMainAdminItemsLoadingIndicator();
+            loadItems(mainAdminItemsNextOffset, true).finally(() => {
+                mainAdminItemsLoadingMore = false;
+                updateMainAdminItemsLoadingIndicator();
+            });
+        }, {
+            root: itemsContainer,
+            threshold: 0.15,
+            rootMargin: '0px 900px 0px 0px'
+        });
+
+        mainAdminItemsObserver.observe(mainAdminItemsSentinel);
+        updateMainAdminItemsLoadingIndicator();
+    }
+
     function searchByCode() {
         const searchInput = document.getElementById('code-search');
         const rawSearchTerm = searchInput.value;
@@ -3549,7 +3851,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         });
 
         if (itemsIndicator) {
-            itemsIndicator.textContent = `Objekte im System: ${allItems.length} | Angezeigt: ${visibleCount}`;
+            itemsIndicator.textContent = `Objekte im System: ${totalItemsInSystem || allItems.length} | Angezeigt: ${visibleCount}`;
         }
         
         if (isCodeSearch && visibleCount > 0 && (codeMatchCount > 0 || exactMatchCount > 0)) {

Web/user.py

@@ -10,10 +10,10 @@ Provides methods for creating, validating, and retrieving user information.
    Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
    For commercial licensing inquiries: https://github.com/AIIrondev
 '''
-from pymongo import MongoClient
 import hashlib
 from bson.objectid import ObjectId
 import settings as cfg
+from settings import MongoClient
 
 
 def normalize_student_card_id(card_id):