Upload folder using huggingface_hub

Qwen.md

@@ -0,0 +1,56 @@
+# My Multiplayer App - Development Guidelines
+
+## Overview
+This is a collaborative drawing application built on top of ColorRM technology, featuring real-time multiplayer capabilities, advanced drawing tools, and document management features.
+
+## Key Features
+- Real-time collaborative drawing with Liveblocks integration
+- Advanced drawing tools (pen, eraser, shapes, text, lasso)
+- Document management (PDF import, page management)
+- Template support (graph paper, lined paper, etc.)
+- High-quality rendering with 2K default page sizes
+- Touch-friendly interface with responsive design
+
+## Development Guidelines
+
+### Code Modification Best Practices
+1. **Use small, specific replacements**: When modifying code, use the smallest possible string fragments to minimize unintended changes
+2. **Always verify context**: Include sufficient context in `old_string` to ensure unique matching
+3. **Test syntax**: After making changes, verify that the code remains syntactically correct
+4. **Check for duplicates**: Avoid creating duplicate function definitions
+
+### File Structure
+- `public/scripts/` - Main application scripts
+- `public/scripts/modules/` - Modular components (ColorRmSession, ColorRmInput, etc.)
+- `public/color_rm.html` - Main application UI
+
+### Common Issues to Avoid
+- Missing closing braces for functions
+- Duplicate function definitions
+- Improper function separation
+- Syntax errors in JavaScript modules
+
+### Working with the ColorRmSession Module
+This module handles:
+- Page management (creation, deletion, resizing)
+- Document import/export
+- Collaboration features
+- State management
+
+When modifying this module:
+- Ensure all functions are properly closed with braces
+- Maintain consistent indentation
+- Preserve existing functionality while adding new features
+- Test thoroughly after changes
+
+### Quality Standards
+- Default to 2000x1500 page sizes for high quality output
+- Use 0.95 JPEG quality for better visual fidelity
+- Maintain responsive touch interactions
+- Ensure proper error handling and user feedback
+
+### Testing Protocol
+After making changes:
+1. Verify functionality in browser
+2. Test collaborative features if applicable
+3. Check mobile/touch interactions

public/scripts/modules/ColorRmSession.js

@@ -9,7 +9,7 @@ export const ColorRmSession = {
                 await this.importBaseFile(blob);
                 console.log("Liveblocks: Base file fetch successful.");
             }
-        } catch(e) {
+        } catch (e) {
             console.error("Liveblocks: Base file fetch failed:", e);
         } finally {
             this.isFetchingBase = false;
@@ -21,7 +21,7 @@ export const ColorRmSession = {
         this.ui.showInput("New Folder", "Folder Name", async (name) => {
             if (!name) return;
             const folder = {
-                id: `folder_${Date.now()}_${Math.random().toString(36).substring(2,5)}`,
+                id: `folder_${Date.now()}_${Math.random().toString(36).substring(2, 5)}`,
                 name: name,
                 parentId: this.state.currentFolderId || null,
                 ownerId: this.state.ownerId || this.liveSync?.userId || 'local'
@@ -66,10 +66,10 @@ export const ColorRmSession = {
 
     navigateUp() {
         // Simple 1-level for now, or fetch parent from DB if nested
-        this.state.currentFolderId = null; 
+        this.state.currentFolderId = null;
         this.loadSessionList();
     },
-    
+
     async moveSelectedToFolder(folderId) {
         if (!this.state.selectedSessions || this.state.selectedSessions.size === 0) return;
 
@@ -111,11 +111,13 @@ export const ColorRmSession = {
             const tx = this.db.transaction(['sessions', 'folders'], 'readonly');
             const sessionsReq = tx.objectStore('sessions').getAll();
             const foldersReq = tx.objectStore('folders').getAll();
-            
+
             // Wait for both
             await new Promise(resolve => {
                 let completed = 0;
-                const check = () => { if (++completed === 2) resolve(); };
+                const check = () => {
+                    if (++completed === 2) resolve();
+                };
                 sessionsReq.onsuccess = check;
                 foldersReq.onsuccess = check;
             });
@@ -123,7 +125,7 @@ export const ColorRmSession = {
             const l = this.getElement('sessionList');
             if (!l) return;
             l.innerHTML = '';
-            
+
             // Render Navigation Header
             if (this.state.currentFolderId) {
                 const backBtn = document.createElement('div');
@@ -138,32 +140,32 @@ export const ColorRmSession = {
                 // Only show folders in current path
                 return (f.parentId || null) === (this.state.currentFolderId || null);
             });
-            
+
             folders.forEach(f => {
-                 const item = document.createElement('div');
-                 item.className = 'session-item folder-item';
-                 item.innerHTML = `
+                const item = document.createElement('div');
+                item.className = 'session-item folder-item';
+                item.innerHTML = `
                     <div style="display:flex; gap:10px; align-items:center;">
                         <i class="bi bi-folder-fill" style="color:#fbbf24; font-size:1.2rem;"></i>
                         <span style="font-weight:600; color:white;">${f.name}</span>
                     </div>
                     <button class="btn btn-sm" style="background:none; border:none; color:#666;"><i class="bi bi-trash"></i></button>
                  `;
-                 
-                 // Click to open
-                 item.onclick = (e) => {
-                     if (e.target.closest('button')) {
-                         this.deleteFolder(f.id);
-                     } else {
-                         this.openFolder(f.id);
-                     }
-                 };
-                 l.appendChild(item);
+
+                // Click to open
+                item.onclick = (e) => {
+                    if (e.target.closest('button')) {
+                        this.deleteFolder(f.id);
+                    } else {
+                        this.openFolder(f.id);
+                    }
+                };
+                l.appendChild(item);
             });
 
 
             const sessions = sessionsReq.result || [];
-            if(sessions.length === 0 && folders.length === 0) {
+            if (sessions.length === 0 && folders.length === 0) {
                 l.innerHTML += '<div style="color:#666;text-align:center;padding:10px">No projects found.</div>';
                 const editBtn = this.getElement('dashEditBtn');
                 if (editBtn) editBtn.style.display = 'none';
@@ -177,8 +179,8 @@ export const ColorRmSession = {
 
             // Filter Sessions by Folder
             sessions.filter(s => (s.folderId || null) === (this.state.currentFolderId || null))
-                    .sort((a,b) => b.lastMod - a.lastMod).forEach(s => {
-                    
+                .sort((a, b) => b.lastMod - a.lastMod).forEach(s => {
+
                     const isMine = s.ownerId === userId;
                     const badge = isMine ? '<span class="owner-badge">Owner</span>' : `<span class="other-badge">Shared</span>`;
                     const cloudIcon = s.isCloudBackedUp ? '<i class="bi bi-cloud-check-fill" style="color:var(--success); margin-left:6px;" title="Backed up to Cloud"></i>' : '';
@@ -210,7 +212,7 @@ export const ColorRmSession = {
 
                     l.appendChild(item);
                 });
-                this.updateMultiSelectUI();
+            this.updateMultiSelectUI();
         } catch (e) {
             console.error("Dashboard render error:", e);
         }
@@ -254,13 +256,13 @@ export const ColorRmSession = {
 
         // Update Checkboxes and classes
         const list = this.getElement('sessionList');
-        if(!list) return;
+        if (!list) return;
         const items = list.querySelectorAll('.session-item');
         items.forEach(el => {
             const idStr = el.id.replace('sess_', '');
             // Support both string and numeric IDs in the set
-            const isSelected = this.state.selectedSessions.has(idStr) || 
-                               (!isNaN(Number(idStr)) && this.state.selectedSessions.has(Number(idStr)));
+            const isSelected = this.state.selectedSessions.has(idStr) ||
+                (!isNaN(Number(idStr)) && this.state.selectedSessions.has(Number(idStr)));
 
             el.classList.toggle('selected', isSelected);
             const cb = el.querySelector('.session-checkbox');
@@ -341,7 +343,7 @@ export const ColorRmSession = {
         return new Promise(async (resolve, reject) => {
             const q = this.db.transaction('pages').objectStore('pages').index('sessionId').getAll(id);
             q.onsuccess = async () => {
-                this.state.images = q.result.sort((a,b)=>a.pageIndex-b.pageIndex);
+                this.state.images = q.result.sort((a, b) => a.pageIndex - b.pageIndex);
 
                 // Retroactively assign IDs to legacy items
                 this.state.images.forEach(img => {
@@ -412,21 +414,21 @@ export const ColorRmSession = {
                 }
 
                 // Sort pages by index again after adding any missing pages
-                this.state.images.sort((a,b) => a.pageIndex - b.pageIndex);
+                this.state.images.sort((a, b) => a.pageIndex - b.pageIndex);
 
                 console.log(`Loaded ${this.state.images.length} pages from DB.`);
                 const pageTotal = this.getElement('pageTotal');
                 if (pageTotal) pageTotal.innerText = '/ ' + this.state.images.length;
 
-                if(this.state.images.length === 0) {
+                if (this.state.images.length === 0) {
                     // Try to fetch base from server if pages are missing
                     this.retryBaseFetch();
                 }
 
-                if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+                if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
 
                 // Only load page 0 if we don't have a current page loaded or if the current page is out of bounds
-                if(this.state.images.length > 0) {
+                if (this.state.images.length > 0) {
                     if (!this.cache.currentImg || this.state.idx >= this.state.images.length) {
                         // Adjust current page index if it's out of bounds
                         if (this.state.idx >= this.state.images.length) {
@@ -443,8 +445,14 @@ export const ColorRmSession = {
 
     async importBaseFile(blob) {
         // Simulates a file input event to reuse existing handleImport logic
-        const file = new File([blob], "base_document_blob", { type: blob.type });
-        await this.handleImport({ target: { files: [file] } }, true); // Pass true to skip upload
+        const file = new File([blob], "base_document_blob", {
+            type: blob.type
+        });
+        await this.handleImport({
+            target: {
+                files: [file]
+            }
+        }, true); // Pass true to skip upload
     },
 
     async computeFileHash(file) {
@@ -462,7 +470,7 @@ export const ColorRmSession = {
 
     async handleImport(e, skipUpload = false, lazy = false) {
         const files = e.target.files;
-        if(!files || !files.length) return;
+        if (!files || !files.length) return;
 
         // Deduplication Check
         let fileHash = null;
@@ -488,7 +496,9 @@ export const ColorRmSession = {
                         }
                     }
                 }
-            } catch (err) { console.error("Hash check error:", err); }
+            } catch (err) {
+                console.error("Hash check error:", err);
+            }
         }
 
         this.isUploading = true; // Set flag
@@ -505,18 +515,18 @@ export const ColorRmSession = {
             pName = files[0].name.replace(/\.[^/.]+$/, "");
             console.log(`[Import] Derived pName from file: "${pName}"`);
             if (pName.includes("base_document_blob")) {
-                 console.log(`[Import] Detected base blob. Current project name: "${this.state.projectName}"`);
-                 // Only overwrite if we don't have a valid project name already
-                 if (this.state.projectName && this.state.projectName !== "Untitled" && this.state.projectName !== "Untitled Project") {
-                      pName = this.state.projectName;
-                      console.log(`[Import] Preserving existing name: "${pName}"`);
-                 } else {
-                      pName = "Untitled Project";
-                      console.log(`[Import] Fallback to Untitled Project (no valid existing name)`);
-                 }
+                console.log(`[Import] Detected base blob. Current project name: "${this.state.projectName}"`);
+                // Only overwrite if we don't have a valid project name already
+                if (this.state.projectName && this.state.projectName !== "Untitled" && this.state.projectName !== "Untitled Project") {
+                    pName = this.state.projectName;
+                    console.log(`[Import] Preserving existing name: "${pName}"`);
+                } else {
+                    pName = "Untitled Project";
+                    console.log(`[Import] Fallback to Untitled Project (no valid existing name)`);
+                }
             }
         }
-        if(!pName || pName === "Untitled") {
+        if (!pName || pName === "Untitled") {
             pName = "Untitled Project";
             console.log(`[Import] Final fallback to Untitled Project`);
         }
@@ -574,7 +584,7 @@ export const ColorRmSession = {
         if (!this.state.ownerId) this.state.ownerId = this.liveSync?.userId || 'local';
 
         const session = await this.dbGet('sessions', this.state.sessionId);
-        if(session) {
+        if (session) {
             session.name = pName;
             session.baseFileName = this.state.baseFileName;
             session.ownerId = this.state.ownerId;
@@ -592,7 +602,7 @@ export const ColorRmSession = {
                 baseFileName: this.state.baseFileName,
                 pageCount: 0,
                 lastMod: Date.now(),
-                idx:0,
+                idx: 0,
                 bookmarks: [],
                 clipboardBox: [],
                 ownerId: this.state.ownerId,
@@ -609,9 +619,11 @@ export const ColorRmSession = {
                     const d = await files[0].arrayBuffer();
                     const pdf = await pdfjsLib.getDocument(d).promise;
                     pageCount = pdf.numPages;
-                } catch(e) { console.error("PDF metadata failed", e); }
+                } catch (e) {
+                    console.error("PDF metadata failed", e);
+                }
             }
-            
+
             const session = await this.dbGet('sessions', this.state.sessionId);
             if (session) {
                 session.pageCount = pageCount;
@@ -634,7 +646,7 @@ export const ColorRmSession = {
         // Wrap processing in a promise to await completion
         await new Promise((resolve) => {
             const processNext = async () => {
-                if(processQueue.length === 0) {
+                if (processQueue.length === 0) {
                     // Update storage with final page count
                     const session = await this.dbGet('sessions', this.state.sessionId);
                     if (session) {
@@ -662,49 +674,71 @@ export const ColorRmSession = {
                 }
 
                 const f = processQueue.shift();
-                if(f.type.includes('pdf')) {
-                     try {
-                         const d = await f.arrayBuffer();
-                         const pdf = await pdfjsLib.getDocument(d).promise;
-                         for(let i=1; i<=pdf.numPages; i+=BATCH_SIZE) {
-                             const batch = [];
-                             for(let j=0; j<BATCH_SIZE && (i+j)<=pdf.numPages; j++) {
-                                 const pNum = i+j;
-                                 batch.push(pdf.getPage(pNum).then(async page => {
-                                     const v = page.getViewport({scale:1.5}); // Increased scale for higher quality
-                                     const cvs = document.createElement('canvas'); cvs.width=v.width; cvs.height=v.height;
-                                     await page.render({canvasContext:cvs.getContext('2d'), viewport:v}).promise;
-                                     const b = await new Promise(r=>cvs.toBlob(r, 'image/jpeg', 0.9)); // Higher quality JPEG
-                                     const pageObj = { id:`${this.state.sessionId}_${idx+j}`, sessionId:this.state.sessionId, pageIndex:idx+j, blob:b, history:[] };
-                                     await this.dbPut('pages', pageObj);
-                                     return pageObj;
-                                 }));
-                             }
-                             const results = await Promise.all(batch);
-
-                             // INCREMENTAL UPDATE: Add results to state and update UI
-                             this.state.images.push(...results);
-                             this.state.images.sort((a,b) => a.pageIndex - b.pageIndex);
-
-                             if (this.state.images.length > 0 && !this.cache.currentImg) {
-                                 await this.loadPage(0, false); // Load first page as soon as it's ready
-                             }
-
-                             if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
-                             const pt = this.getElement('pageTotal');
-                             if (pt) pt.innerText = '/ ' + this.state.images.length;
-
-                             idx += results.length;
-                             this.ui.updateProgress(((i/pdf.numPages)*100), `Processing Page ${i}/${pdf.numPages}`);
-                             await new Promise(r => setTimeout(r, 0));
-                         }
-                     } catch(e) { console.error(e); this.ui.showToast("Failed to load PDF"); }
+                if (f.type.includes('pdf')) {
+                    try {
+                        const d = await f.arrayBuffer();
+                        const pdf = await pdfjsLib.getDocument(d).promise;
+                        for (let i = 1; i <= pdf.numPages; i += BATCH_SIZE) {
+                            const batch = [];
+                            for (let j = 0; j < BATCH_SIZE && (i + j) <= pdf.numPages; j++) {
+                                const pNum = i + j;
+                                batch.push(pdf.getPage(pNum).then(async page => {
+                                    const v = page.getViewport({
+                                        scale: 1.5
+                                    }); // Increased scale for higher quality
+                                    const cvs = document.createElement('canvas');
+                                    cvs.width = v.width;
+                                    cvs.height = v.height;
+                                    await page.render({
+                                        canvasContext: cvs.getContext('2d'),
+                                        viewport: v
+                                    }).promise;
+                                    const b = await new Promise(r => cvs.toBlob(r, 'image/jpeg', 0.9)); // Higher quality JPEG
+                                    const pageObj = {
+                                        id: `${this.state.sessionId}_${idx+j}`,
+                                        sessionId: this.state.sessionId,
+                                        pageIndex: idx + j,
+                                        blob: b,
+                                        history: []
+                                    };
+                                    await this.dbPut('pages', pageObj);
+                                    return pageObj;
+                                }));
+                            }
+                            const results = await Promise.all(batch);
+
+                            // INCREMENTAL UPDATE: Add results to state and update UI
+                            this.state.images.push(...results);
+                            this.state.images.sort((a, b) => a.pageIndex - b.pageIndex);
+
+                            if (this.state.images.length > 0 && !this.cache.currentImg) {
+                                await this.loadPage(0, false); // Load first page as soon as it's ready
+                            }
+
+                            if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
+                            const pt = this.getElement('pageTotal');
+                            if (pt) pt.innerText = '/ ' + this.state.images.length;
+
+                            idx += results.length;
+                            this.ui.updateProgress(((i / pdf.numPages) * 100), `Processing Page ${i}/${pdf.numPages}`);
+                            await new Promise(r => setTimeout(r, 0));
+                        }
+                    } catch (e) {
+                        console.error(e);
+                        this.ui.showToast("Failed to load PDF");
+                    }
                 } else {
-                    const pageObj = { id:`${this.state.sessionId}_${idx}`, sessionId:this.state.sessionId, pageIndex:idx, blob:f, history:[] };
+                    const pageObj = {
+                        id: `${this.state.sessionId}_${idx}`,
+                        sessionId: this.state.sessionId,
+                        pageIndex: idx,
+                        blob: f,
+                        history: []
+                    };
                     await this.dbPut('pages', pageObj);
                     this.state.images.push(pageObj);
                     if (this.state.images.length === 1) await this.loadPage(0, false);
-                    if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+                    if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
                     idx++;
                 }
                 processNext();
@@ -742,15 +776,15 @@ export const ColorRmSession = {
         this.state.clipboardBox = [];
         const pt = this.getElement('pageTotal');
         if (pt) pt.innerText = '/ 0';
-        if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+        if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
 
         const c = this.getElement('canvas');
-        if(c) c.getContext('2d').clearRect(0,0,c.width,c.height);
+        if (c) c.getContext('2d').clearRect(0, 0, c.width, c.height);
         // ----------------------------
 
         this.ui.setSyncStatus('new');
 
-        if(openPicker) {
+        if (openPicker) {
             const fileIn = this.getElement('fileIn');
             if (fileIn) fileIn.click();
         }
@@ -768,10 +802,12 @@ export const ColorRmSession = {
                 await fetch(window.Config?.apiUrl(`/api/color_rm/upload/${this.state.sessionId}`) || `/api/color_rm/upload/${this.state.sessionId}`, {
                     method: 'POST',
                     body: this.state.images[0].blob,
-                    headers: { 'Content-Type': this.state.images[0].blob.type }
+                    headers: {
+                        'Content-Type': this.state.images[0].blob.type
+                    }
                 });
                 this.ui.showToast("Base file restored!");
-            } catch(e) {
+            } catch (e) {
                 this.ui.showToast("Restore failed");
             }
         } else {
@@ -864,7 +900,7 @@ export const ColorRmSession = {
         await this.dbPut('pages', pageObj);
 
         // Update UI
-        if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+        if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
         const pt = this.getElement('pageTotal');
         if (pt) pt.innerText = '/ ' + this.state.images.length;
 
@@ -981,7 +1017,7 @@ export const ColorRmSession = {
         await this.dbPut('pages', pageObj);
 
         // Update UI
-        if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+        if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
         const pt = this.getElement('pageTotal');
         if (pt) pt.innerText = '/ ' + this.state.images.length;
 
@@ -1256,7 +1292,7 @@ export const ColorRmSession = {
                 if (item.shapeType === 'rectangle') {
                     ctx.rect(x, y, w, h);
                 } else if (item.shapeType === 'circle') {
-                    ctx.ellipse(x + w/2, y + h/2, Math.abs(w/2), Math.abs(h/2), 0, 0, 2 * Math.PI);
+                    ctx.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, 2 * Math.PI);
                 } else if (item.shapeType === 'line') {
                     ctx.moveTo(x, y);
                     ctx.lineTo(x + w, y + h);
@@ -1267,13 +1303,13 @@ export const ColorRmSession = {
                     ctx.moveTo(x, y);
                     ctx.lineTo(x + w, y + h);
                     ctx.lineTo(
-                        x + w - headLength * Math.cos(angle - Math.PI/6),
-                        y + h - headLength * Math.sin(angle - Math.PI/6)
+                        x + w - headLength * Math.cos(angle - Math.PI / 6),
+                        y + h - headLength * Math.sin(angle - Math.PI / 6)
                     );
                     ctx.moveTo(x + w, y + h);
                     ctx.lineTo(
-                        x + w - headLength * Math.cos(angle + Math.PI/6),
-                        y + h - headLength * Math.sin(angle + Math.PI/6)
+                        x + w - headLength * Math.cos(angle + Math.PI / 6),
+                        y + h - headLength * Math.sin(angle + Math.PI / 6)
                     );
                 }
 
@@ -1364,40 +1400,6 @@ export const ColorRmSession = {
         await this.loadPage(this.state.idx, false);
 
         this.ui.showToast(`All ${this.state.images.length} pages resized to ${width}×${height}`);
-    }
-
-    reorderPages(fromIndex, toIndex) {
-        if (fromIndex < 0 || toIndex < 0 ||
-            fromIndex >= this.state.images.length ||
-            toIndex >= this.state.images.length) {
-            return;
-        }
-
-        // Reorder in state
-        const page = this.state.images.splice(fromIndex, 1)[0];
-        this.state.images.splice(toIndex, 0, page);
-
-        // Update page indices
-        this.state.images.forEach((img, idx) => {
-            img.pageIndex = idx;
-            // Update the ID to reflect new index
-            img.id = `${this.state.sessionId}_${idx}`;
-        });
-
-        // Update database
-        const promises = this.state.images.map(img => this.dbPut('pages', img));
-        Promise.all(promises).then(() => {
-            this.ui.showToast("Pages reordered");
-            if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
-
-            // Synchronize with Liveblocks
-            if (this.liveSync) {
-                // Update the page count in metadata
-                this.liveSync.updatePageCount(this.state.images.length);
-                // Update presence to notify other users about the page structure change
-                this.liveSync.notifyPageStructureChange();
-            }
-        });
     },
 
     async addTemplatePage(templateType) {
@@ -1490,7 +1492,7 @@ export const ColorRmSession = {
         await this.dbPut('pages', pageObj);
 
         // Update UI
-        if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+        if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
         const pt = this.getElement('pageTotal');
         if (pt) pt.innerText = '/ ' + this.state.images.length;
 
@@ -1540,7 +1542,7 @@ export const ColorRmSession = {
         }
 
         this.ui.showToast(`Added ${templateType} template page ${newPageIndex + 1}`);
-    }
+    },
 
     reorderPages(fromIndex, toIndex) {
         if (fromIndex < 0 || toIndex < 0 ||
@@ -1564,7 +1566,7 @@ export const ColorRmSession = {
         const promises = this.state.images.map(img => this.dbPut('pages', img));
         Promise.all(promises).then(() => {
             this.ui.showToast("Pages reordered");
-            if(this.state.activeSideTab === 'pages') this.renderPageSidebar();
+            if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
 
             // Synchronize with Liveblocks
             if (this.liveSync) {
@@ -1574,5 +1576,5 @@ export const ColorRmSession = {
                 this.liveSync.notifyPageStructureChange();
             }
         });
-    },
-};
+    }
+};