Fix volume mount for Web directory in Docker Compose files: remove read-only flag for better accessibility

Co-authored-by: Copilot <copilot@github.com>

Web/templates/base.html

@@ -306,6 +306,7 @@
             align-items: center;
             margin-right: 10px;
             width: min(420px, 42vw);
+            min-width: 0;
         }
 
         .function-search-form {
@@ -313,10 +314,13 @@
             display: flex;
             gap: 6px;
             align-items: center;
+            min-width: 0;
         }
 
         .function-search-input {
-            width: 100%;
+            flex: 1 1 auto;
+            width: auto;
+            min-width: 0;
             min-height: 38px;
             border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.3);
@@ -337,6 +341,7 @@
         }
 
         .function-search-btn {
+            flex: 0 0 auto;
             min-height: 38px;
             border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.45);
@@ -539,9 +544,48 @@
                 margin-top: 4px;
             }
 
+            .navbar-collapse {
+                width: 100%;
+            }
+
+            .navbar-collapse > .d-flex {
+                width: 100%;
+                flex-direction: column;
+                align-items: stretch;
+                gap: 8px;
+            }
+
             .function-search-wrap {
                 width: 100%;
+                max-width: 100%;
                 margin: 8px 0 10px;
+                flex: 1 1 100%;
+            }
+
+            .function-search-form {
+                width: 100%;
+                max-width: 100%;
+                flex-wrap: nowrap;
+            }
+
+            .function-search-input {
+                width: auto;
+                min-width: 0;
+                flex: 1 1 auto;
+            }
+
+            .function-search-btn {
+                flex: 0 0 auto;
+                white-space: nowrap;
+            }
+
+            .navbar-text {
+                margin-right: 0 !important;
+                width: 100%;
+            }
+
+            .user-menu-wrap {
+                align-self: flex-start;
             }
 
             .navbar-nav .nav-item {
@@ -911,12 +955,24 @@
                         <a class="nav-link {% if current_path == url_for('home') %}nav-active{% endif %}" href="{{ url_for('home') }}">Artikel</a>
                     </li>
                     {% endif %}
+                    {% if 'username' in session %}
+                    {% if current_permissions.pages.get('my_borrowed_items', True) %}
+                    <li class="nav-item">
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Ausleihen</a>
+                    </li>
+                    {% endif %}
+                    {% if current_permissions.pages.get('tutorial_page', True) %}
+                    <li class="nav-item">
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
+                    </li>
+                    {% endif %}
+                    {% endif %}
                     {% if 'username' in session and current_permissions.pages.get('upload_admin', True) and current_permissions.actions.get('can_insert', True) %}
                     <li class="nav-item">
                         <a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
                     </li>
                     {% endif %}
-                    <li class="nav-item">
+                    <li class="nav-item" data-nav-fixed="true">
                         <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
                             <span class="theme-icon-light" style="display: none;">☀️</span>
                             <span class="theme-icon-dark" style="display: none;">🌙</span>
@@ -928,15 +984,6 @@
                             Mehr Optionen
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="invMoreDropdown">
-                            {% if 'username' in session %}
-                            {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('my_borrowed_items') }}">Meine Ausleihen</a></li>
-                            {% endif %}
-                            {% if current_permissions.pages.get('tutorial_page', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('tutorial_page') }}">Tutorial</a></li>
-                            {% endif %}
-                            <li><hr class="dropdown-divider"></li>
-                            {% endif %}
                             {% if 'username' in session and (session.get('admin', False) or is_admin) and current_permissions.actions.get('can_manage_settings', True) %}
                             <li><h6 class="dropdown-header">Verwaltung</h6></li>
                             {% if current_permissions.pages.get('manage_filters', True) %}
@@ -1027,12 +1074,24 @@
                         <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}">Medien</a>
                     </li>
                     {% endif %}
+                    {% if 'username' in session %}
+                    {% if current_permissions.pages.get('my_borrowed_items', True) %}
+                    <li class="nav-item">
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Medien</a>
+                    </li>
+                    {% endif %}
+                    {% if current_permissions.pages.get('tutorial_page', True) %}
+                    <li class="nav-item">
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
+                    </li>
+                    {% endif %}
+                    {% endif %}
                     {% if 'username' in session and current_permissions.actions.get('can_insert', True) and current_permissions.pages.get('library_admin', True) %}
                     <li class="nav-item">
                         <a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
                     </li>
                     {% endif %}
-                    <li class="nav-item">
+                    <li class="nav-item" data-nav-fixed="true">
                         <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
                             <span class="theme-icon-light" style="display: none;">☀️</span>
                             <span class="theme-icon-dark" style="display: none;">🌙</span>
@@ -1044,15 +1103,6 @@
                             Mehr Optionen
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="libMoreDropdown">
-                            {% if 'username' in session %}
-                            {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('my_borrowed_items') }}">Meine Medien</a></li>
-                            {% endif %}
-                            {% if current_permissions.pages.get('tutorial_page', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('tutorial_page') }}">Tutorial</a></li>
-                            {% endif %}
-                            <li><hr class="dropdown-divider"></li>
-                            {% endif %}
                             {% if 'username' in session and (session.get('admin', False) or is_admin) and current_permissions.actions.get('can_manage_settings', True) %}
                             <li><h6 class="dropdown-header">Bibliotheks-Verwaltung</h6></li>
                             {% if current_permissions.pages.get('library_loans_admin', True) %}
@@ -1630,8 +1680,15 @@
             const libraryNavList = document.getElementById('libraryNavList');
             const libNavOverflowAnchor = document.getElementById('lib-nav-overflow-anchor');
 
-            function initNavbarOverflow(navList, navOverflowAnchor) {
-                if (!navList || !navOverflowAnchor) return;
+            function initNavbarOverflow(navList, navOverflowAnchor, options) {
+                if (!navList) return;
+
+                const moreToggleId = options && options.moreToggleId ? options.moreToggleId : '';
+                const moreToggle = moreToggleId ? document.getElementById(moreToggleId) : null;
+                const moreControlItem = moreToggle ? moreToggle.closest('li.nav-item.dropdown') : null;
+                const moreMenu = moreControlItem ? moreControlItem.querySelector(':scope > ul.dropdown-menu') : null;
+                const moreLabelDefault = moreToggle ? moreToggle.textContent.trim() : 'Mehr Optionen';
+                const moreMenuOriginal = moreMenu ? moreMenu.innerHTML : '';
 
                 const navRoot = navList.closest('nav.navbar');
                 const navCollapse = navList.closest('.navbar-collapse');
@@ -1659,45 +1716,35 @@
                     return Array.from(navList.children).filter(function(li){
                         if (!(li instanceof HTMLElement)) return false;
                         if (!li.classList.contains('nav-item')) return false;
-                        if (li.id === navOverflowAnchor.id) return false;
+                        if (navOverflowAnchor && li.id === navOverflowAnchor.id) return false;
                         if (li.dataset.overflowControl === 'true') return false;
                         if (li.dataset.navFixed === 'true') return false;
+                        if (moreControlItem && li === moreControlItem) return false;
                         return li.style.display !== 'none';
                     });
                 }
 
                 function clearOverflowControls() {
-                    if (!navList) return;
-                    navList.querySelectorAll('[data-overflow-control="true"]').forEach(function(node){
-                        node.remove();
-                    });
+                    if (!moreMenu) return;
+                    moreMenu.innerHTML = moreMenuOriginal;
+                    if (moreControlItem) {
+                        moreControlItem.style.display = '';
+                    }
+                    if (moreToggle) {
+                        moreToggle.textContent = moreLabelDefault;
+                    }
                 }
 
                 function restoreAllNavItems() {
                     if (!navList) return;
                     navList.querySelectorAll('li.nav-item').forEach(function(li){
-                        if (li.id === navOverflowAnchor.id) return;
+                        if (navOverflowAnchor && li.id === navOverflowAnchor.id) return;
                         if (li.dataset.overflowControl === 'true') return;
                         li.style.display = '';
                     });
                     clearOverflowControls();
                 }
 
-                function createOverflowControl() {
-                    const li = document.createElement('li');
-                    li.className = 'nav-item dropdown';
-                    li.dataset.overflowControl = 'true';
-
-                    const toggleId = navOverflowAnchor.id + '-toggle';
-                    const menuId = navOverflowAnchor.id + '-menu';
-
-                    li.innerHTML =
-                        '<a class="nav-link dropdown-toggle" href="#" id="' + toggleId + '" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="' + menuId + '">⋮ Weitere</a>' +
-                        '<ul class="dropdown-menu" aria-labelledby="' + toggleId + '" id="' + menuId + '"></ul>';
-
-                    return li;
-                }
-
                 function getNavCandidatePriority(item) {
                     if (!(item instanceof HTMLElement)) {
                         return -1;
@@ -1780,33 +1827,70 @@
 
                 function rebuildOverflowControl(hiddenSources) {
                     clearOverflowControls();
-                    if (!navList || !navOverflowAnchor || hiddenSources.length === 0) return;
-
-                    const control = createOverflowControl();
-                    const menu = control.querySelector('ul.dropdown-menu');
-                    const controlLink = control.querySelector(':scope > a.nav-link');
-                    if (controlLink) {
-                        controlLink.textContent = '⋮ Weitere (' + hiddenSources.length + ')';
-                    }
+                    if (!moreMenu || hiddenSources.length === 0) return;
 
+                    const overflowFragment = document.createDocumentFragment();
                     hiddenSources.forEach(function(source){
-                        appendSourceToOverflowMenu(source, menu);
+                        appendSourceToOverflowMenu(source, overflowFragment);
                     });
 
-                    const trailingDivider = menu.querySelector('li:last-child .dropdown-divider');
-                    if (trailingDivider) {
+                    const overflowWrap = document.createElement('div');
+                    overflowWrap.appendChild(overflowFragment);
+                    const trailingDivider = overflowWrap.querySelector('li:last-child .dropdown-divider');
+                    if (trailingDivider && trailingDivider.parentElement) {
                         trailingDivider.parentElement.remove();
                     }
 
-                    navList.insertBefore(control, navOverflowAnchor);
+                    const overflowEntries = Array.from(overflowWrap.childNodes);
+                    if (overflowEntries.length > 0) {
+                        const marker = document.createElement('li');
+                        marker.innerHTML = '<h6 class="dropdown-header">Ausgeblendete Navigation</h6>';
+                        const firstExistingNode = moreMenu.firstChild;
+                        moreMenu.insertBefore(marker, firstExistingNode);
+
+                        let insertAfter = marker;
+                        overflowEntries.forEach(function(node){
+                            moreMenu.insertBefore(node, insertAfter.nextSibling);
+                            insertAfter = node;
+                        });
+
+                        const divider = document.createElement('li');
+                        divider.innerHTML = '<hr class="dropdown-divider">';
+                        moreMenu.insertBefore(divider, insertAfter.nextSibling);
+
+                        if (moreToggle) {
+                            moreToggle.textContent = moreLabelDefault + ' (' + hiddenSources.length + ')';
+                        }
+                    }
+
+                    if (moreControlItem) {
+                        moreControlItem.style.display = '';
+                    }
                 }
 
                 function adaptNavbarByWidth() {
-                    if (!navList || !navOverflowAnchor) return;
+                    if (!navList) return;
+
+                    const isMobileViewport = window.matchMedia('(max-width: 991.98px)').matches;
+
+                    function isNavOverflowing(bufferPx) {
+                        const buffer = typeof bufferPx === 'number' ? bufferPx : 0;
+                        const collapseOverflow = navCollapse ? (navCollapse.scrollWidth > (navCollapse.clientWidth - buffer)) : false;
+                        const containerOverflow = navContainer ? (navContainer.scrollWidth > (navContainer.clientWidth - buffer)) : false;
+                        const listOverflow = navList.scrollWidth > (navList.clientWidth - buffer);
+                        return collapseOverflow || containerOverflow || listOverflow;
+                    }
 
                     applyCompactMode();
 
-                    if (window.innerWidth < 992) {
+                    // Desktop/tablet-large: keep complete navigation visible.
+                    if (!isMobileViewport) {
+                        restoreAllNavItems();
+                        return;
+                    }
+
+                    // Mobile menu is collapsed: avoid hiding links preemptively.
+                    if (navCollapse && !navCollapse.classList.contains('show')) {
                         restoreAllNavItems();
                         return;
                     }
@@ -1815,8 +1899,9 @@
 
                     const hiddenSources = [];
                     let candidates = collectTopLevelNavSources();
+                    const overflowBuffer = 12;
 
-                    while (navList.scrollWidth > navList.clientWidth && candidates.length > 0) {
+                    while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
                         const toHide = pickNextNavItemToHide(candidates);
                         if (!toHide) {
                             break;
@@ -1828,8 +1913,9 @@
 
                     rebuildOverflowControl(hiddenSources);
 
+                    // One final pass in case the overflow menu label/count itself changed row width.
                     candidates = collectTopLevelNavSources();
-                    while (navList.scrollWidth > navList.clientWidth && candidates.length > 0) {
+                    while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
                         const toHide = pickNextNavItemToHide(candidates);
                         if (!toHide) {
                             break;
@@ -1867,12 +1953,12 @@
 
             // Initialize overflow control for inventory navbar
             if (navList && navOverflowAnchor) {
-                initNavbarOverflow(navList, navOverflowAnchor);
+                initNavbarOverflow(navList, navOverflowAnchor, { moreToggleId: 'invMoreDropdown' });
             }
 
             // Initialize overflow control for library navbar
             if (libraryNavList && libNavOverflowAnchor) {
-                initNavbarOverflow(libraryNavList, libNavOverflowAnchor);
+                initNavbarOverflow(libraryNavList, libNavOverflowAnchor, { moreToggleId: 'libMoreDropdown' });
             }
         })();
     </script>

Web/templates/library.html

@@ -208,12 +208,23 @@
 <script>
 // View mode persistence
 const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
+const MOBILE_LIBRARY_MAX_WIDTH = 900;
+const MOBILE_LIBRARY_MIN_ITEMS = 24;
+
+function isMobileViewport() {
+    return window.matchMedia(`(max-width: ${MOBILE_LIBRARY_MAX_WIDTH}px)`).matches;
+}
 
 function setViewMode(mode) {
     localStorage.setItem(LIBRARY_VIEW_MODE_KEY, mode);
     const container = document.getElementById('itemsContainer');
     const tableHeader = document.getElementById('tableHeader');
-    const items = container.querySelectorAll('.item-card');
+    const renderedItems = Array.from(container.querySelectorAll('.item-card'));
+    const virtualizationState = window.mobileLibraryVirtualizationState || null;
+    const detachedItems = virtualizationState && virtualizationState.active && Array.isArray(virtualizationState.items)
+        ? virtualizationState.items.filter(item => !container.contains(item))
+        : [];
+    const items = [...renderedItems, ...detachedItems.filter(item => !container.contains(item))];
     
     items.forEach(item => {
         const cardContent = item.querySelector('.item-content.card-mode');
@@ -236,6 +247,229 @@ function setViewMode(mode) {
     document.getElementById('viewModeToggle').classList.toggle('open', mode === 'table');
 }
 
+function initMobileWindowedLibraryLoading() {
+    const container = document.getElementById('itemsContainer');
+    if (!container) {
+        return;
+    }
+
+    if (!window.mobileLibraryVirtualizationState) {
+        window.mobileLibraryVirtualizationState = {
+            active: false,
+            items: [],
+            topSpacer: null,
+            bottomSpacer: null,
+            averageItemHeight: Math.max(Math.round(window.innerHeight * 0.35), 230),
+            lastStart: -1,
+            lastEnd: -1,
+            framePending: false,
+            scrollListener: null,
+            resizeListener: null,
+            initialized: false
+        };
+    }
+    const state = window.mobileLibraryVirtualizationState;
+
+    function restoreAllImages() {
+        state.items.forEach(item => {
+            const image = item.querySelector('img.item-image');
+            if (!image) {
+                return;
+            }
+
+            const originalSrc = image.dataset.mobileSrc || '';
+            if (!image.getAttribute('src') && originalSrc) {
+                image.setAttribute('src', originalSrc);
+            }
+        });
+    }
+
+    function updateImageMemory(startIndex, endIndex) {
+        const imageBuffer = 4;
+        state.items.forEach((item, index) => {
+            const image = item.querySelector('img.item-image');
+            if (!image) {
+                return;
+            }
+
+            if (!image.dataset.mobileSrc) {
+                image.dataset.mobileSrc = image.getAttribute('src') || '';
+            }
+            image.loading = 'lazy';
+            image.decoding = 'async';
+
+            const shouldKeepLoaded = index >= startIndex - imageBuffer && index < endIndex + imageBuffer;
+            if (shouldKeepLoaded) {
+                if (!image.getAttribute('src') && image.dataset.mobileSrc) {
+                    image.setAttribute('src', image.dataset.mobileSrc);
+                }
+                return;
+            }
+
+            if (image.getAttribute('src')) {
+                image.removeAttribute('src');
+            }
+        });
+    }
+
+    function renderVisibleWindow() {
+        if (!state.active || !state.topSpacer || !state.bottomSpacer) {
+            return;
+        }
+
+        const viewportHeight = window.innerHeight || 800;
+        const scrollTop = window.scrollY || window.pageYOffset || 0;
+        const renderBuffer = viewportHeight * 1.5;
+
+        let startIndex = Math.max(0, Math.floor((scrollTop - renderBuffer) / state.averageItemHeight));
+        let endIndex = Math.min(state.items.length, Math.ceil((scrollTop + viewportHeight + renderBuffer) / state.averageItemHeight));
+
+        if (endIndex - startIndex < 14) {
+            endIndex = Math.min(state.items.length, startIndex + 14);
+        }
+
+        if (startIndex === state.lastStart && endIndex === state.lastEnd) {
+            return;
+        }
+
+        state.lastStart = startIndex;
+        state.lastEnd = endIndex;
+
+        while (state.topSpacer.nextSibling && state.topSpacer.nextSibling !== state.bottomSpacer) {
+            state.topSpacer.nextSibling.remove();
+        }
+
+        const fragment = document.createDocumentFragment();
+        for (let index = startIndex; index < endIndex; index += 1) {
+            fragment.appendChild(state.items[index]);
+        }
+        container.insertBefore(fragment, state.bottomSpacer);
+
+        let measuredHeightSum = 0;
+        let measuredCount = 0;
+        for (let index = startIndex; index < endIndex; index += 1) {
+            const height = state.items[index].getBoundingClientRect().height;
+            if (height > 0) {
+                measuredHeightSum += height;
+                measuredCount += 1;
+            }
+        }
+
+        if (measuredCount > 0) {
+            const measuredAverage = measuredHeightSum / measuredCount;
+            state.averageItemHeight = Math.round((state.averageItemHeight * 3 + measuredAverage) / 4);
+        }
+
+        state.topSpacer.style.height = `${Math.max(0, startIndex * state.averageItemHeight)}px`;
+        state.bottomSpacer.style.height = `${Math.max(0, (state.items.length - endIndex) * state.averageItemHeight)}px`;
+        updateImageMemory(startIndex, endIndex);
+    }
+
+    function scheduleWindowRender() {
+        if (!state.active || state.framePending) {
+            return;
+        }
+        state.framePending = true;
+        requestAnimationFrame(() => {
+            state.framePending = false;
+            renderVisibleWindow();
+        });
+    }
+
+    function activateVirtualization() {
+        if (state.active) {
+            return;
+        }
+
+        if (!Array.isArray(state.items) || state.items.length === 0) {
+            state.items = Array.from(container.querySelectorAll('.library-item'));
+        }
+        if (state.items.length <= MOBILE_LIBRARY_MIN_ITEMS) {
+            return;
+        }
+
+        state.topSpacer = document.createElement('div');
+        state.topSpacer.className = 'mobile-window-spacer top';
+        state.bottomSpacer = document.createElement('div');
+        state.bottomSpacer.className = 'mobile-window-spacer bottom';
+
+        state.items.forEach(item => item.remove());
+        container.appendChild(state.topSpacer);
+        container.appendChild(state.bottomSpacer);
+
+        state.lastStart = -1;
+        state.lastEnd = -1;
+        state.framePending = false;
+        state.active = true;
+
+        if (!state.scrollListener) {
+            state.scrollListener = () => scheduleWindowRender();
+            window.addEventListener('scroll', state.scrollListener, { passive: true });
+        }
+
+        scheduleWindowRender();
+    }
+
+    function deactivateVirtualization() {
+        if (!state.active) {
+            if (!Array.isArray(state.items) || state.items.length === 0) {
+                state.items = Array.from(container.querySelectorAll('.library-item'));
+            }
+            return;
+        }
+
+        if (state.scrollListener) {
+            window.removeEventListener('scroll', state.scrollListener);
+            state.scrollListener = null;
+        }
+
+        if (state.topSpacer && state.topSpacer.parentNode === container) {
+            state.topSpacer.remove();
+        }
+        if (state.bottomSpacer && state.bottomSpacer.parentNode === container) {
+            state.bottomSpacer.remove();
+        }
+
+        const fragment = document.createDocumentFragment();
+        state.items.forEach(item => fragment.appendChild(item));
+        container.appendChild(fragment);
+
+        restoreAllImages();
+
+        state.topSpacer = null;
+        state.bottomSpacer = null;
+        state.lastStart = -1;
+        state.lastEnd = -1;
+        state.framePending = false;
+        state.active = false;
+
+        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
+        setViewMode(currentMode);
+    }
+
+    function syncVirtualizationWithViewport() {
+        if (!Array.isArray(state.items) || state.items.length === 0) {
+            state.items = Array.from(container.querySelectorAll('.library-item'));
+        }
+
+        const shouldVirtualize = isMobileViewport() && state.items.length > MOBILE_LIBRARY_MIN_ITEMS;
+        if (shouldVirtualize) {
+            activateVirtualization();
+            scheduleWindowRender();
+        } else {
+            deactivateVirtualization();
+        }
+    }
+
+    if (!state.initialized) {
+        state.resizeListener = () => syncVirtualizationWithViewport();
+        window.addEventListener('resize', state.resizeListener, { passive: true });
+        state.initialized = true;
+    }
+
+    syncVirtualizationWithViewport();
+}
+
 // Initialize view mode
 document.addEventListener('DOMContentLoaded', function() {
     const savedMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
@@ -311,6 +545,8 @@ document.addEventListener('DOMContentLoaded', function() {
             if (e.target === this) this.style.display = 'none';
         });
     });
+
+    initMobileWindowedLibraryLoading();
 });
 
 function displayLibraryItemDetail(item) {

backup.sh

@@ -33,11 +33,12 @@ LOG_FILE="${LOG_FILE:-$LOG_DIR/backup.log}"
 COMPRESSION_LEVEL="${COMPRESSION_LEVEL:-9}"
 KEEP_DAYS="${KEEP_DAYS:-7}"
 MIN_KEEP="${MIN_KEEP:-7}"
-DB_NAME="${DB_NAME:-Inventarsystem}"
+DB_NAME="${DB_NAME:-inventar_default}"
 MONGO_URI="${MONGO_URI:-mongodb://localhost:27017/}"
 INVOICE_KEEP_DAYS="${INVOICE_KEEP_DAYS:-3650}"
 INVOICE_ARCHIVE_DIR="${INVOICE_ARCHIVE_DIR:-$BACKUP_BASE_DIR/invoice-archive}"
 BACKUP_MODE="${BACKUP_MODE:-auto}"
+COMPOSE_FILE="${COMPOSE_FILE:-docker-compose-multitenant.yml}"
 DOCKER_AVAILABLE=0
 DOCKER_COMPOSE_CMD=()
 USE_NULL_OUTPUT=false
@@ -58,6 +59,8 @@ Options:
     --keep-days <N>                   Age-based retention in days (default: $KEEP_DAYS; 0 disables age filter)
     --min-keep <N>                    Always keep at least this many backups (default: $MIN_KEEP)
     --mode <auto|host|docker>         Backup mode (default: $BACKUP_MODE)
+    --multitenant                     Use docker-compose-multitenant.yml (default)
+    --singletenant                    Use docker-compose.yml
   -h|--help                         Show this help and exit
 EOF
 }
@@ -87,6 +90,10 @@ while [[ $# -gt 0 ]]; do
             MIN_KEEP="$2"; shift 2;;
         --mode)
             BACKUP_MODE="$2"; shift 2;;
+        --multitenant)
+            COMPOSE_FILE="docker-compose-multitenant.yml"; shift;;
+        --singletenant)
+            COMPOSE_FILE="docker-compose.yml"; shift;;
         -h|--help)
             usage; exit 0;;
         *)
@@ -102,12 +109,12 @@ log_message() {
 init_docker_compose() {
     if docker compose version >/dev/null 2>&1; then
         DOCKER_AVAILABLE=1
-        DOCKER_COMPOSE_CMD=(docker compose -f "$PROJECT_DIR/docker-compose.yml")
+        DOCKER_COMPOSE_CMD=(docker compose -f "$PROJECT_DIR/$COMPOSE_FILE")
         return 0
     fi
     if sudo docker compose version >/dev/null 2>&1; then
         DOCKER_AVAILABLE=1
-        DOCKER_COMPOSE_CMD=(sudo docker compose -f "$PROJECT_DIR/docker-compose.yml")
+        DOCKER_COMPOSE_CMD=(sudo docker compose -f "$PROJECT_DIR/$COMPOSE_FILE")
         return 0
     fi
 

docker-compose-multitenant.yml

@@ -106,7 +106,7 @@ services:
       - "8000"
     volumes:
       - ./config.json:/app/config.json:ro
-      - ./Web:/app/Web:ro
+      - ./Web:/app/Web
       - app_uploads:/app/Web/uploads:cached
       - app_thumbnails:/app/Web/thumbnails:cached
       - app_previews:/app/Web/previews:cached

docker-compose.yml

@@ -66,7 +66,7 @@ services:
       - "8000"
     volumes:
       - ./config.json:/app/config.json:ro
-      - ./Web:/app/Web:ro
+      - ./Web:/app/Web
       - app_uploads:/app/Web/uploads
       - app_thumbnails:/app/Web/thumbnails
       - app_previews:/app/Web/previews

install.sh

@@ -22,6 +22,7 @@ LEGACY_BACKUP_ARCHIVE=""
 CLEANUP_OLD_SERVICES=true
 CLEANUP_OLD_REMOVE_CRON=false
 TMP_DIR=""
+COMPOSE_FILE="docker-compose-multitenant.yml"
 
 cleanup_tmp_dir() {
     if [ -n "${TMP_DIR:-}" ] && [ -d "$TMP_DIR" ]; then
@@ -50,14 +51,13 @@ refresh_start_script_from_main() {
 pin_compose_app_image() {
     local tag="$1"
     local compose_file
-    compose_file="$PROJECT_DIR/docker-compose.yml"
 
-    if [ ! -f "$compose_file" ]; then
-        echo "Warning: $compose_file not found; cannot pin app image"
-        return 0
-    fi
+    for compose_file in "$PROJECT_DIR/docker-compose-multitenant.yml" "$PROJECT_DIR/docker-compose.yml"; do
+        if [ ! -f "$compose_file" ]; then
+            continue
+        fi
 
-    python3 - <<'PY' "$compose_file" "$tag"
+        python3 - <<'PY' "$compose_file" "$tag"
 import re
 import sys
 
@@ -151,6 +151,8 @@ if in_app_service and build_found and app_service_indent is not None:
 with open(compose_file, "w", encoding="utf-8") as f:
     f.writelines(out)
 PY
+
+    done
 }
 
 install_docker_if_missing() {
@@ -173,6 +175,8 @@ Options:
   --remove-legacy-system        Remove old host MongoDB/system after successful import
     --skip-cleanup-old            Do not run cleanup-old.sh after install
     --cleanup-old-remove-cron     Also remove matching cron entries during old-system cleanup
+    --multitenant                Use docker-compose-multitenant.yml (default)
+    --singletenant               Use docker-compose.yml
   --legacy-db-name <name>       Legacy database name (default: $LEGACY_DB_NAME)
   --legacy-mongo-uri <uri>      Legacy Mongo URI (default: $LEGACY_MONGO_URI)
   --legacy-system-dir <path>    Optional old system directory to remove after migration
@@ -199,6 +203,14 @@ parse_args() {
                 CLEANUP_OLD_REMOVE_CRON=true
                 shift
                 ;;
+            --multitenant)
+                COMPOSE_FILE="docker-compose-multitenant.yml"
+                shift
+                ;;
+            --singletenant)
+                COMPOSE_FILE="docker-compose.yml"
+                shift
+                ;;
             --legacy-db-name)
                 LEGACY_DB_NAME="$2"
                 shift 2
@@ -280,14 +292,21 @@ backup_legacy_database() {
 
 restore_legacy_backup_into_docker() {
     local i
+    local compose_path
 
     if [ "$MIGRATE_LEGACY_DB" != "true" ] || [ -z "$LEGACY_BACKUP_ARCHIVE" ]; then
         return 0
     fi
 
+    compose_path="$PROJECT_DIR/$COMPOSE_FILE"
+    if [ ! -f "$compose_path" ]; then
+        echo "Error: compose file not found: $compose_path"
+        exit 1
+    fi
+
     echo "Waiting for Docker MongoDB to become ready..."
     for i in $(seq 1 60); do
-        if sudo docker compose -f "$PROJECT_DIR/docker-compose.yml" exec -T mongodb mongosh --quiet --eval "db.adminCommand({ping:1}).ok" >/dev/null 2>&1; then
+        if sudo docker compose -f "$compose_path" exec -T mongodb mongosh --quiet --eval "db.adminCommand({ping:1}).ok" >/dev/null 2>&1; then
             break
         fi
         sleep 2
@@ -299,7 +318,7 @@ restore_legacy_backup_into_docker() {
     fi
 
     echo "Importing legacy backup into Docker MongoDB..."
-    sudo docker compose -f "$PROJECT_DIR/docker-compose.yml" exec -T mongodb mongorestore --archive --gzip --drop --nsInclude "${LEGACY_DB_NAME}.*" < "$LEGACY_BACKUP_ARCHIVE"
+    sudo docker compose -f "$compose_path" exec -T mongodb mongorestore --archive --gzip --drop --nsInclude "${LEGACY_DB_NAME}.*" < "$LEGACY_BACKUP_ARCHIVE"
     echo "Legacy DB import completed."
 }
 

restart.sh

@@ -4,5 +4,4 @@ set -euo pipefail
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 
 "$SCRIPT_DIR/stop.sh" "$@"
-"$SCRIPT_DIR/start.sh" "$@"
-"$SCRIPT_DIR/start.sh"
+"$SCRIPT_DIR/start.sh" "$@"

restore.sh

@@ -6,12 +6,13 @@ LOG_DIR="$SCRIPT_DIR/logs"
 LOG_FILE="$LOG_DIR/restore.log"
 WORK_DIR="$(mktemp -d /tmp/inventarsystem-restore-XXXXXX)"
 
-DB_NAME="${INVENTAR_MONGODB_DB:-Inventarsystem}"
+DB_NAME="${INVENTAR_MONGODB_DB:-inventar_default}"
 SOURCE_PATH=""
 BACKUP_DATE=""
 DROP_DATABASE=false
 RESTART_SERVICES=false
 STAGED_PATH=""
+COMPOSE_FILE="docker-compose-multitenant.yml"
 
 BACKUP_ROOT_LOCAL="$SCRIPT_DIR/backups"
 BACKUP_ROOT_SYSTEM="/var/backups"
@@ -56,6 +57,8 @@ Options:
                           - latest: newest from local/system backup roots
   --drop-database         Drop target DB before import (recommended for full restore)
   --restart-services      Restart stack after restore
+    --multitenant           Use docker-compose-multitenant.yml (default)
+    --singletenant          Use docker-compose.yml
   --list                  List detected backup candidates
   --help                  Show this help
 
@@ -68,12 +71,12 @@ EOF
 
 setup_compose() {
     if docker compose version >/dev/null 2>&1 && docker info >/dev/null 2>&1; then
-        DOCKER_COMPOSE=(docker compose)
+        DOCKER_COMPOSE=(docker compose -f "$SCRIPT_DIR/$COMPOSE_FILE")
         return 0
     fi
 
     if [ -n "$SUDO" ] && $SUDO docker compose version >/dev/null 2>&1 && $SUDO docker info >/dev/null 2>&1; then
-        DOCKER_COMPOSE=($SUDO docker compose)
+        DOCKER_COMPOSE=($SUDO docker compose -f "$SCRIPT_DIR/$COMPOSE_FILE")
         return 0
     fi
 
@@ -459,6 +462,14 @@ parse_args() {
                 RESTART_SERVICES=true
                 shift
                 ;;
+            --multitenant)
+                COMPOSE_FILE="docker-compose-multitenant.yml"
+                shift
+                ;;
+            --singletenant)
+                COMPOSE_FILE="docker-compose.yml"
+                shift
+                ;;
             --list)
                 list_backups
                 exit 0

start.sh

@@ -7,6 +7,7 @@ cd "$SCRIPT_DIR"
 ENV_FILE="$SCRIPT_DIR/.docker-build.env"
 APP_IMAGE_REPO="ghcr.io/aiirondev/legendary-octo-garbanzo"
 DIST_DIR="$SCRIPT_DIR/dist"
+RUNTIME_COMPOSE_OVERRIDE_FILE="$SCRIPT_DIR/.docker-compose.runtime.override.yml"
 
 SUDO=""
 if [ "$(id -u)" -ne 0 ] && command -v sudo >/dev/null 2>&1; then
@@ -18,7 +19,7 @@ HTTP_PORT_VALUE="8001"
 HTTPS_PORT_VALUE="8443"
 CRON_SETUP_VALUE="${INVENTAR_SETUP_CRON:-1}"
 APP_IMAGE_VALUE="${INVENTAR_APP_IMAGE:-$APP_IMAGE_REPO:latest}"
-COMPOSE_FILE="docker-compose.yml"
+COMPOSE_FILE="docker-compose-multitenant.yml"
 
 usage() {
     cat <<EOF
@@ -28,6 +29,7 @@ Options:
   --no-cron         Do not create or update cron jobs
   --with-cron       Create/update cron jobs (default)
   --multitenant     Use the multi-tenant architecture deployment
+    --singletenant    Use the legacy single-tenant compose deployment
   -h, --help        Show this help message
 EOF
 }
@@ -47,6 +49,10 @@ parse_args() {
                 COMPOSE_FILE="docker-compose-multitenant.yml"
                 shift
                 ;;
+            --singletenant)
+                COMPOSE_FILE="docker-compose.yml"
+                shift
+                ;;
             -h|--help)
                 usage
                 exit 0
@@ -554,9 +560,22 @@ INVENTAR_APP_IMAGE=$APP_IMAGE_VALUE
 EOF
 }
 
+write_runtime_compose_override() {
+    cat > "$RUNTIME_COMPOSE_OVERRIDE_FILE" <<EOF
+services:
+  app:
+    image: ${APP_IMAGE_VALUE}
+    build: null
+EOF
+}
+
 verify_stack_health() {
     local compose_args running_services retry_count=0
-    compose_args=(-f "$COMPOSE_FILE" --env-file "$ENV_FILE")
+    compose_args=(-f "$COMPOSE_FILE")
+    if [ -f "$RUNTIME_COMPOSE_OVERRIDE_FILE" ]; then
+        compose_args+=(-f "$RUNTIME_COMPOSE_OVERRIDE_FILE")
+    fi
+    compose_args+=(--env-file "$ENV_FILE")
 
     # Try health check with optional restart on first failure
     while [[ $retry_count -lt 2 ]]; do
@@ -609,9 +628,15 @@ resolve_app_image
 configure_host_ports
 ensure_app_image_loaded
 write_env_file
+write_runtime_compose_override
 
 echo "Starting Inventarsystem Docker stack (app + mongodb)..."
-docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --remove-orphans
+compose_up_args=(-f "$COMPOSE_FILE")
+if [ -f "$RUNTIME_COMPOSE_OVERRIDE_FILE" ]; then
+    compose_up_args+=(-f "$RUNTIME_COMPOSE_OVERRIDE_FILE")
+fi
+compose_up_args+=(--env-file "$ENV_FILE")
+docker compose "${compose_up_args[@]}" up -d --remove-orphans
 
 verify_stack_health
 

stop.sh

@@ -4,7 +4,7 @@ set -euo pipefail
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 cd "$SCRIPT_DIR"
 
-COMPOSE_FILE="docker-compose.yml"
+COMPOSE_FILE="docker-compose-multitenant.yml"
 
 while [[ $# -gt 0 ]]; do
     case "$1" in
@@ -12,6 +12,10 @@ while [[ $# -gt 0 ]]; do
             COMPOSE_FILE="docker-compose-multitenant.yml"
             shift
             ;;
+        --singletenant)
+            COMPOSE_FILE="docker-compose.yml"
+            shift
+            ;;
         *)
             shift
             ;;

update.sh

@@ -15,6 +15,7 @@ APP_IMAGE_ASSET_PREFIX="inventarsystem-image-"
 ENV_FILE="$PROJECT_DIR/.docker-build.env"
 APP_IMAGE_REPO="ghcr.io/aiirondev/legendary-octo-garbanzo"
 DIST_DIR="$PROJECT_DIR/dist"
+COMPOSE_FILE="docker-compose-multitenant.yml"
 
 mkdir -p "$LOG_DIR"
 chmod 777 "$LOG_DIR" 2>/dev/null || true
@@ -118,6 +119,41 @@ server {
     return 301 https://$host$request_uri;
 }
 
+usage() {
+    cat <<EOF
+Usage: $0 [options]
+
+Options:
+  --multitenant      Use docker-compose-multitenant.yml (default)
+  --singletenant     Use docker-compose.yml
+  -h, --help         Show this help message
+EOF
+}
+
+parse_args() {
+    while [[ $# -gt 0 ]]; do
+        case "$1" in
+            --multitenant)
+                COMPOSE_FILE="docker-compose-multitenant.yml"
+                shift
+                ;;
+            --singletenant)
+                COMPOSE_FILE="docker-compose.yml"
+                shift
+                ;;
+            -h|--help)
+                usage
+                exit 0
+                ;;
+            *)
+                log_message "ERROR: Unknown option: $1"
+                usage
+                exit 2
+                ;;
+        esac
+    done
+}
+
 server {
     listen 443 ssl;
     server_name _;
@@ -360,6 +396,13 @@ deploy() {
     local tag="$1"
     local meta_file="$2"
     local app_image="${APP_IMAGE_REPO}:${tag}"
+    local compose_path
+
+    compose_path="$PROJECT_DIR/$COMPOSE_FILE"
+    if [ ! -f "$compose_path" ]; then
+        log_message "ERROR: compose file not found: $compose_path"
+        exit 1
+    fi
 
     cd "$PROJECT_DIR"
     if [ ! -f "$ENV_FILE" ]; then
@@ -385,15 +428,15 @@ EOF
         fi
     fi
 
-    docker compose --env-file "$ENV_FILE" pull nginx mongodb >> "$LOG_FILE" 2>&1
-    docker compose --env-file "$ENV_FILE" up -d --remove-orphans >> "$LOG_FILE" 2>&1
+    docker compose -f "$compose_path" --env-file "$ENV_FILE" pull nginx mongodb >> "$LOG_FILE" 2>&1
+    docker compose -f "$compose_path" --env-file "$ENV_FILE" up -d --remove-orphans >> "$LOG_FILE" 2>&1
     docker tag "$app_image" "$APP_IMAGE_REPO:latest" >> "$LOG_FILE" 2>&1 || true
 }
 
 verify_stack_health() {
     local compose_args running_services
     local https_port
-    compose_args=(--env-file "$ENV_FILE")
+    compose_args=(-f "$PROJECT_DIR/$COMPOSE_FILE" --env-file "$ENV_FILE")
     https_port="$(awk -F= '/^INVENTAR_HTTPS_PORT=/{print $2}' "$ENV_FILE" | tr -d ' ')"
     if [ -z "$https_port" ]; then
         https_port="443"
@@ -418,6 +461,8 @@ verify_stack_health() {
 }
 
 main() {
+    parse_args "$@"
+
     ensure_runtime_dependencies
     ensure_tls_certificates
     ensure_nginx_config_mount_source