Fix menu issues

css/styles.css

@@ -1,13 +1,13 @@
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+    -webkit-appearance: none;
+    margin: 0;
 }
 
 /* Firefox */
 input[type=number] {
-  -moz-appearance: textfield;
+    -moz-appearance: textfield;
 }
 
 * {
@@ -402,7 +402,7 @@ input[type="checkbox"] {
     display: flex;
     flex-direction: column; /* <-- stack rows vertically */
     align-items: flex-start;
-    gap: 12px;              /* spacing between rows */
+    gap: 12px; /* spacing between rows */
     width: 100%;
 }
 
@@ -481,8 +481,6 @@ input[type="checkbox"] {
 }
 
 
-
-
 /* Popup Styles */
 .popup-overlay {
     position: fixed;
@@ -498,7 +496,7 @@ input[type="checkbox"] {
     backdrop-filter: blur(5px);
 }
 
-.popup-content {
+.info-popup-content {
     background: linear-gradient(135deg, #1a2a6c, #b21f1f);
     border-radius: 15px;
     padding: 0;
@@ -522,7 +520,7 @@ input[type="checkbox"] {
     }
 }
 
-.popup-header {
+.info-popup-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -532,7 +530,7 @@ input[type="checkbox"] {
 }
 
 
-.popup-header h2 {
+.info-popup-header h2 {
     margin: 0;
     font-size: 1.5rem;
 }
@@ -556,23 +554,23 @@ input[type="checkbox"] {
     background: rgba(255, 255, 255, 0.1);
 }
 
-.popup-body {
+.info-popup-body {
     padding: 25px;
     overflow-y: auto;
     max-height: calc(80vh - 80px);
 }
 
-.popup-body p {
+.info-popup-body p {
     margin-bottom: 15px;
     line-height: 1.5;
 }
 
-.popup-body ul {
+.info-popup-body ul {
     margin: 15px 0;
     padding-left: 20px;
 }
 
-.popup-body li {
+.info-popup-body li {
     margin-bottom: 8px;
     line-height: 1.4;
 }
@@ -591,20 +589,20 @@ input[type="checkbox"] {
 
 /* Responsive design for popup */
 @media (max-width: 600px) {
-    .popup-content {
+    .info-popup-content {
         width: 95%;
         margin: 20px;
     }
 
-    .popup-body {
+    .info-popup-body {
         padding: 20px;
     }
 
-    .popup-header {
+    .info-popup-header {
         padding: 15px;
     }
 
-    .popup-header h2 {
+    .info-popup-header h2 {
         font-size: 1.3rem;
     }
 }
@@ -625,7 +623,8 @@ input[type="checkbox"] {
 }
 
 /* Info Button Styles */
-.info-button {
+.menu-button {
+    position: relative;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
@@ -638,9 +637,6 @@ input[type="checkbox"] {
     justify-content: center;
     gap: 2px;
     transition: all 0.3s ease;
-    position: absolute;
-    right: 0;
-    top: 0;
 }
 
 .dot {
@@ -651,12 +647,12 @@ input[type="checkbox"] {
     transition: all 0.3s ease;
 }
 
-.info-button:hover {
+.menu-button:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: scale(1.1);
 }
 
-.info-button:hover .dot {
+.menu-button:hover .dot {
     background: #fff;
 }
 
@@ -666,7 +662,7 @@ input[type="checkbox"] {
     border-top: 1px solid #eee;
 }
 
-.popup-body a {
+.info-popup-body a {
     color: #64b5f6;
     text-decoration: none;
     transition: all 0.3s ease;
@@ -674,18 +670,18 @@ input[type="checkbox"] {
     padding-bottom: 1px;
 }
 
-.popup-body a:hover {
+.info-popup-body a:hover {
     color: #90caf9;
     border-bottom-color: #90caf9;
     text-shadow: 0 0 8px rgba(144, 202, 249, 0.3);
 }
 
-.popup-body a:active {
+.info-popup-body a:active {
     color: #42a5f5;
     transform: translateY(1px);
 }
 
-.popup-body a:focus {
+.info-popup-body a:focus {
     outline: 2px solid rgba(100, 181, 246, 0.5);
     outline-offset: 2px;
     border-radius: 2px;
@@ -704,7 +700,7 @@ input[type="checkbox"] {
 }
 
 /* Ensure links are visible in the dark theme */
-.popup-body strong {
+.info-popup-body strong {
     color: #fff;
 }
 
@@ -713,17 +709,17 @@ input[type="checkbox"] {
 }
 
 /* Smooth scrolling for better user experience */
-.popup-body {
+.info-popup-body {
     scroll-behavior: smooth;
 }
 
 /* Responsive link styles */
 @media (max-width: 600px) {
-    .popup-body a {
+    .info-popup-body a {
         padding-bottom: 2px;
     }
 
-    .popup-body a:focus {
+    .info-popup-body a:focus {
         outline-offset: 1px;
     }
 }
@@ -812,8 +808,24 @@ input[type="checkbox"] {
 }
 
 /* Info Menu Styles */
-.info-menu {
+.app-menu {
     animation: menuFadeIn 0.2s ease-out;
+    position: absolute;
+    background: linear-gradient(135deg, rgba(26, 42, 108, 0.95), rgba(178, 31, 31, 0.95));
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    padding: 8px 0;
+    min-width: 200px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    display: none;
+    z-index: 9999;
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-menu.active {
+    display: block;
 }
 
 @keyframes menuFadeIn {
@@ -827,39 +839,156 @@ input[type="checkbox"] {
     }
 }
 
+.app-menu .menu-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 14px;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    color: white;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.app-menu .menu-item:last-child {
+    border-bottom: none;
+}
+
+.app-menu .menu-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.app-menu .menu-item:active {
+    background: rgba(255, 255, 255, 0.2);
+}
+
 /* Recent Files Menu Styles */
-.recent-files-menu {
+.recent-files-content {
     animation: popupFadeIn 0.3s ease-out;
+    position: fixed;
+    background: linear-gradient(135deg, rgba(26, 42, 108, 0.98), rgba(178, 31, 31, 0.98));
+    border-radius: 15px;
+    padding: 25px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 70vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    z-index: 1001;
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.recent-files-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
+}
+
+.recent-files-header h3 {
+    margin: 0;
+    font-size: 1.3rem;
+    color: white;
+}
+
+.recent-files-body {
+    text-align: center;
+    padding: 40px 20px;
+    opacity: 0.8;
+}
+
+.recent-file-item {
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    cursor: pointer;
 }
 
 .recent-file-item:hover {
-    background: rgba(255, 255, 255, 0.2) !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
+    transform: translateY(-1px);
+}
+
+.remove-recent-file {
+    transition: all 0.3s ease !important;
+    border: 1px solid rgba(244, 67, 54, 0.3) !important;
+    background: rgba(244, 67, 54, 0.3);
+    color: white;
+    border-radius: 6px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 0.8rem;
 }
 
 .remove-recent-file:hover {
-    background: rgba(244, 67, 54, 0.5) !important;
+    background: rgba(244, 67, 54, 0.6) !important;
+    border-color: rgba(244, 67, 54, 0.6) !important;
+    transform: scale(1.05);
+}
+
+.close-recent-menu {
+    transition: all 0.3s ease !important;
+    border-radius: 50% !important;
+    width: 35px !important;
+    height: 35px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0;
 }
 
 .close-recent-menu:hover {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15) !important;
+    transform: scale(1.1);
 }
 
-/* Ensure header has proper positioning for the menu */
-.header-top {
-    position: relative;
-}
 
 /* Responsive design for menus */
 @media (max-width: 600px) {
-    .info-menu {
-        right: 10px !important;
-        left: 10px !important;
-        min-width: auto !important;
+    .app-menu {
+        right: 0 !important;
+        left: auto !important;
+        min-width: 180px !important;
+        top: 45px !important;
     }
 
-    .recent-files-menu {
+    .recent-files-content {
         width: 95% !important;
         margin: 10px;
     }
-}
+
+    .menu-button {
+        width: 36px;
+        height: 36px;
+    }
+}
+
+/*!* Menu backdrop *!*/
+/*.menu-backdrop {*/
+/*    position: fixed;*/
+/*    top: 0;*/
+/*    left: 0;*/
+/*    width: 100%;*/
+/*    height: 100%;*/
+/*    background: transparent;*/
+/*    z-index: 9998;*/
+/*    display: none;*/
+/*}*/

index.html

@@ -19,7 +19,7 @@
     <header>
         <div class="header-top">
             <h1>Loop Maestro</h1>
-            <button id="infoButton" class="info-button" aria-label="About this app">
+            <button id="menuButton" class="menu-button" aria-label="About this app">
                 <span class="dot"></span>
                 <span class="dot"></span>
                 <span class="dot"></span>
@@ -28,14 +28,34 @@
         <p class="subtitle">Upload a song, detect beats and bars, then loop any part</p>
     </header>
 
+    <div id="appMenu" class="app-menu" style="top:0; left:0">
+        <div class="menu-item" data-action="about">About Loop Maestro</div>
+        <div class="menu-item" data-action="recent">Recent Songs</div>
+    </div>
+
+    <div id="recentFilesPopup" class="popup-overlay">
+        <div class="recent-files-content">
+            <div class="recent-files-header">
+                <h3>🎵 Recent Songs</h3>
+                <button id="closeRecentMenu" class="close-recent-menu">×</button>
+            </div>
+
+            <div id="recentFilesBody" class="recent-files-body">
+                <div style="font-size: 3rem; margin-bottom: 10px;">🎵</div>
+                <p style="margin: 0; font-size: 1.1rem;">No recent files</p>
+                <p style="margin: 10px 0 0 0; font-size: 0.9rem; opacity: 0.7;">Files you open will appear here</p>
+            </div>
+        </div>
+    </div>
+
     <!-- Info Popup -->
     <div id="infoPopup" class="popup-overlay">
-        <div class="popup-content">
-            <div class="popup-header">
+        <div class="info-popup-content">
+            <div class="info-popup-header">
                 <h2>About Loop Maestro</h2>
                 <button id="closePopup" class="close-button">&times;</button>
             </div>
-            <div class="popup-body">
+            <div class="info-popup-body">
                 <p><strong>Loop Maestro</strong> is a Progressive Web App that allows you to:</p>
                 <ul>
                     <li>Upload audio files</li>
@@ -271,7 +291,7 @@
                 request.onupgradeneeded = (event) => {
                     const db = event.target.result;
                     if (!db.objectStoreNames.contains('fileHandles')) {
-                        db.createObjectStore('fileHandles', { keyPath: 'id' });
+                        db.createObjectStore('fileHandles', {keyPath: 'id'});
                     }
                 };
             });
@@ -645,121 +665,109 @@
             });
 
             // Enhanced Info Popup functionality with menu
-            const infoButton = document.getElementById('infoButton');
-            const infoPopup = document.getElementById('infoPopup');
+            this.menuButton = document.getElementById('menuButton');
+            this.appMenu = document.getElementById('appMenu');
+
+            this.infoPopup = document.getElementById('infoPopup');
             const closePopup = document.getElementById('closePopup');
+            this.recentFilesPopup = document.getElementById('recentFilesPopup');
+            const closeRecentMenu = document.getElementById('closeRecentMenu');
+
+            // Menu item events
+            const menuItems = this.appMenu.querySelectorAll('.menu-item');
+            menuItems.forEach(item => {
+                item.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.handleMenuAction(item.dataset.action);
+                    this.hideAppMenu();
+                });
+            });
 
-            // Create menu for info button
-            this.createInfoMenu();
+            // Backdrop for closing
+            this.recentFilesPopup.addEventListener('click', () => {
+                this.hideAppMenu();
+            });
 
             // Open popup
-            infoButton.addEventListener('click', (e) => {
+            this.menuButton.addEventListener('click', (e) => {
                 e.stopPropagation();
-                this.toggleInfoMenu();
+                this.toggleAppMenu();
             });
 
             // Close popup
             closePopup.addEventListener('click', function () {
-                infoPopup.classList.remove('active');
+                document.getElementById('infoPopup').classList.remove('active');
+                document.body.style.overflow = ''; // Restore scrolling
+            });
+
+            closeRecentMenu.addEventListener('click', function () {
+                document.getElementById('recentFilesPopup').classList.remove('active');
                 document.body.style.overflow = ''; // Restore scrolling
             });
 
             // Close popup when clicking outside content
-            infoPopup.addEventListener('click', function (e) {
+            this.infoPopup.addEventListener('click', function (e) {
+                const infoPopup = document.getElementById('infoPopup')
                 if (e.target === infoPopup) {
                     infoPopup.classList.remove('active');
                     document.body.style.overflow = '';
                 }
             });
 
+            // Close popup when clicking outside content
+            this.recentFilesPopup.addEventListener('click', function (e) {
+                const recentFilesPopup = document.getElementById('recentFilesPopup')
+                if (e.target === recentFilesPopup) {
+                    recentFilesPopup.classList.remove('active');
+                    document.body.style.overflow = '';
+                }
+            });
+
             // Close popup and menu with Escape key
             document.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape') {
-                    infoPopup.classList.remove('active');
+                    this.infoPopup.classList.remove('active');
                     document.body.style.overflow = '';
-                    this.hideInfoMenu();
+                    this.hideAppMenu();
                 }
             });
 
             // Close menu when clicking outside
             document.addEventListener('click', () => {
-                this.hideInfoMenu();
+                this.hideAppMenu();
             });
         }
 
-        createInfoMenu() {
-            this.infoMenu = document.createElement('div');
-            this.infoMenu.className = 'info-menu';
-            this.infoMenu.innerHTML = `
-                <div class="menu-item" data-action="about">About Loop Maestro</div>
-                <div class="menu-item" data-action="recent">Recent Songs</div>
-            `;
-            this.infoMenu.style.cssText = `
-                position: absolute;
-                top: 60px;
-                right: 0;
-                background: rgba(255, 255, 255, 0.95);
-                backdrop-filter: blur(10px);
-                border-radius: 8px;
-                padding: 8px 0;
-                min-width: 180px;
-                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-                border: 1px solid rgba(255, 255, 255, 0.2);
-                display: none;
-                z-index: 1000;
-                color: #333;
-            `;
-
-            // Style menu items
-            const menuItems = this.infoMenu.querySelectorAll('.menu-item');
-            menuItems.forEach(item => {
-                item.style.cssText = `
-                    padding: 12px 16px;
-                    cursor: pointer;
-                    transition: background-color 0.2s;
-                    font-size: 14px;
-                    border: none;
-                    background: none;
-                    width: 100%;
-                    text-align: left;
-                `;
-                item.addEventListener('mouseenter', () => {
-                    item.style.backgroundColor = 'rgba(33, 150, 243, 0.1)';
-                });
-                item.addEventListener('mouseleave', () => {
-                    item.style.backgroundColor = 'transparent';
-                });
-                item.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this.handleMenuAction(item.dataset.action);
-                });
-            });
-
-            document.body.appendChild(this.infoMenu);
-        }
-
-        toggleInfoMenu() {
-            if (this.infoMenu.style.display === 'block') {
-                this.hideInfoMenu();
+        toggleAppMenu() {
+            if (this.appMenu.style.display === 'block') {
+                this.hideAppMenu();
             } else {
-                this.showInfoMenu();
+                this.showAppMenu();
             }
         }
 
-        showInfoMenu() {
-            this.infoMenu.style.display = 'block';
+        showAppMenu() {
+            const rect = this.menuButton.getBoundingClientRect();
+
+            const menuWidth = 150;
+
+            // Position menu in final location
+            this.appMenu.style.top = `${rect.bottom + window.scrollY}px`;
+            this.appMenu.style.left = `${rect.right - menuWidth}px`;
+
+            appMenu.classList.add('active');
         }
 
-        hideInfoMenu() {
-            this.infoMenu.style.display = 'none';
+        hideAppMenu() {
+            this.appMenu.classList.remove('active');
         }
 
         async handleMenuAction(action) {
-            this.hideInfoMenu();
+            this.hideAppMenu();
 
             switch (action) {
                 case 'about':
-                    document.getElementById('infoPopup').classList.add('active');
+                    this.infoPopup.classList.add('active');
                     document.body.style.overflow = 'hidden';
                     break;
                 case 'recent':
@@ -771,115 +779,61 @@
         async showRecentFilesMenu() {
             await this.loadRecentFiles();
 
-            const recentFilesMenu = document.createElement('div');
-            recentFilesMenu.className = 'recent-files-menu';
-            recentFilesMenu.style.cssText = `
-                position: fixed;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                background: rgba(26, 42, 108, 0.95);
-                backdrop-filter: blur(10px);
-                border-radius: 15px;
-                padding: 20px;
-                max-width: 500px;
-                width: 90%;
-                max-height: 70vh;
-                overflow-y: auto;
-                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-                border: 1px solid rgba(255, 255, 255, 0.2);
-                z-index: 1001;
-                color: white;
-            `;
+            const recentFilesBody = document.getElementById('recentFilesBody');
 
-            let menuContent = `
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);">
-                    <h3 style="margin: 0;">Recent Songs</h3>
-                    <button class="close-recent-menu" style="background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">×</button>
-                </div>
-            `;
+            // Clear existing content first
+            recentFilesBody.innerHTML = '';
 
             if (this.recentFiles.length === 0) {
-                menuContent += `<p style="text-align: center; opacity: 0.8;">No recent files</p>`;
+                recentFilesBody.innerHTML = `
+            <div style="text-align: center; padding: 40px 20px; opacity: 0.8;">
+                <div style="font-size: 3rem; margin-bottom: 10px;">🎵</div>
+                <p style="margin: 0; font-size: 1.1rem;">No recent files</p>
+                <p style="margin: 10px 0 0 0; font-size: 0.9rem; opacity: 0.7;">Files you open will appear here</p>
+            </div>
+        `;
             } else {
-                menuContent += `<div class="recent-files-list" style="display: flex; flex-direction: column; gap: 8px;">`;
+                let filesHTML = '<div class="recent-files-list" style="display: flex; flex-direction: column; gap: 10px;">';
 
                 for (const file of this.recentFiles) {
-                    menuContent += `
-                        <div class="recent-file-item" data-file-id="${file.id}" style="
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            padding: 12px;
-                            background: rgba(255, 255, 255, 0.1);
-                            border-radius: 8px;
-                            cursor: pointer;
-                            transition: background-color 0.2s;
-                        ">
-                            <div>
-                                <div style="font-weight: bold;">${file.fileName}</div>
-                                <div style="font-size: 0.8rem; opacity: 0.8;">${this.formatFileSize(file.fileSize)}</div>
-                            </div>
-                            <button class="remove-recent-file" style="
-                                background: rgba(244, 67, 54, 0.3);
-                                border: none;
-                                color: white;
-                                border-radius: 4px;
-                                padding: 4px 8px;
-                                cursor: pointer;
-                                font-size: 0.8rem;
-                            ">Remove</button>
-                        </div>
-                    `;
+                    filesHTML += `
+                <div class="recent-file-item" data-file-id="${file.id}">
+                    <div style="flex: 1;">
+                        <div style="font-weight: bold; font-size: 1rem; margin-bottom: 4px;">${file.fileName}</div>
+                        <div style="font-size: 0.8rem; opacity: 0.8;">${this.formatFileSize(file.fileSize)}</div>
+                    </div>
+                    <button class="remove-recent-file">Remove</button>
+                </div>
+            `;
                 }
 
-                menuContent += `</div>`;
+                filesHTML += '</div>';
+                recentFilesBody.innerHTML = filesHTML;
             }
 
-            recentFilesMenu.innerHTML = menuContent;
-            document.body.appendChild(recentFilesMenu);
-
-            // Add event listeners
-            recentFilesMenu.querySelector('.close-recent-menu').addEventListener('click', () => {
-                document.body.removeChild(recentFilesMenu);
-            });
-
-            recentFilesMenu.addEventListener('click', (e) => {
-                if (e.target === recentFilesMenu) {
-                    document.body.removeChild(recentFilesMenu);
-                }
-            });
-
             // Load file when clicked
-            recentFilesMenu.querySelectorAll('.recent-file-item').forEach(item => {
+            recentFilesBody.querySelectorAll('.recent-file-item').forEach(item => {
                 item.addEventListener('click', async (e) => {
                     if (!e.target.classList.contains('remove-recent-file')) {
                         const fileId = item.dataset.fileId;
                         await this.loadFileFromHandle(fileId);
-                        document.body.removeChild(recentFilesMenu);
+                        this.recentFilesPopup.classList.remove('active');
                     }
                 });
             });
 
             // Remove file when remove button clicked
-            recentFilesMenu.querySelectorAll('.remove-recent-file').forEach(button => {
+            recentFilesBody.querySelectorAll('.remove-recent-file').forEach(button => {
                 button.addEventListener('click', async (e) => {
                     e.stopPropagation();
                     const fileId = button.closest('.recent-file-item').dataset.fileId;
                     await this.removeFromRecentFiles(fileId);
-                    document.body.removeChild(recentFilesMenu);
                     await this.showRecentFilesMenu(); // Refresh the menu
                 });
             });
 
-            // Close with Escape key
-            const closeHandler = (e) => {
-                if (e.key === 'Escape') {
-                    document.body.removeChild(recentFilesMenu);
-                    document.removeEventListener('keydown', closeHandler);
-                }
-            };
-            document.addEventListener('keydown', closeHandler);
+            this.recentFilesPopup.classList.add('active');
+            document.body.style.overflow = 'hidden';
         }
 
         async openFileWithFileSystemAPI() {
@@ -914,8 +868,8 @@
                 }
 
                 // Verify we still have permission to read the file
-                if (await fileRecord.handle.queryPermission({ mode: 'read' }) !== 'granted') {
-                    const permission = await fileRecord.handle.requestPermission({ mode: 'read' });
+                if (await fileRecord.handle.queryPermission({mode: 'read'}) !== 'granted') {
+                    const permission = await fileRecord.handle.requestPermission({mode: 'read'});
                     if (permission !== 'granted') {
                         throw new Error('Permission denied to read the file');
                     }

sw.js

@@ -1,5 +1,5 @@
 // Use a version that you can update with each release
-const APP_VERSION = '0.1.6';
+const APP_VERSION = '0.1.7';
 const CACHE_NAME = `my-pwa-cache-${APP_VERSION}`;
 
 // List of files to cache