Jellyfin.Plugin.MediaCleaner/Pages/home.html

@@ -1,10 +1,10 @@
-<div data-role="page" class="page type-interior pluginConfigurationPage withTabs"
+<div data-role="page" class="page type-interior pluginConfigurationPage"
      data-controller="__plugin/media_cleaner_table.js">
 	<div data-role="content">
 		<div class="content-primary">
-            <div>
-                <a href="#configurationpage?name=Settings">Settings</a>
-            </div>
+            <div id="loading">Loading...</div>
+            <div id="page" style="visibility: hidden;">
+                <button class="links" data-target="#configurationpage?name=Settings">Settings</button>
                 <h2>Media Cleaner</h2>
 
                 <h3 id="moviesTitle"></h3>
@@ -12,12 +12,12 @@
                     <thead>
                         <tr>
                             <th>Name</th>
+                            <th class="actions-cell">Actions</th>
                         </tr>
                     </thead>
                     <tbody></tbody>
                 </table>
                 <br>
-            <br>
 
                 <h3 id="seriesTitle"></h3>
                 <table id="seriesTable">
@@ -25,10 +25,12 @@
                         <tr>
                             <th>Name</th>
                             <th>Seasons</th>
+                            <th class="actions-cell">Actions</th>
                         </tr>
                     </thead>
                     <tbody></tbody>
                 </table>
             </div>
 		</div>
+	</div>
 </div>

Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js

@@ -12,7 +12,7 @@ document.addEventListener('pageshow', async () => {
         }
 
         return response.json();
-    }
+    };
 
     const getMediaCleanerMovieInfo = async () => {
         const response = await fetch("/mediacleaner/state/getMovieInfo");
@@ -22,7 +22,7 @@ document.addEventListener('pageshow', async () => {
         }
 
         return response.json();
-    }
+    };
 
     const updateMediaCleanerState = async () => {
         const response = await fetch("/mediacleaner/state/updateState");
@@ -32,7 +32,7 @@ document.addEventListener('pageshow', async () => {
         }
 
         return response.json();
-    }
+    };
 
     const getMediaCleanerSeriesTitle = async () => {
         const response = await fetch("/mediacleaner/state/getSeriesTitle");
@@ -42,7 +42,7 @@ document.addEventListener('pageshow', async () => {
         }
 
         return response.json();
-    }
+    };
 
     const getMediaCleanerMoviesTitle = async () => {
         const response = await fetch("/mediacleaner/state/getMoviesTitle");
@@ -52,14 +52,17 @@ document.addEventListener('pageshow', async () => {
         }
 
         return response.json();
-    }
+    };
 
     const populateTables = () => {
         var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
         seriesTableBody.replaceChildren();
+        seriesTableBody.style.border = "1px solid";
+        seriesTableBody.style.borderCollapse = "collapse";
 
         var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
         moviesTableBody.replaceChildren();
+        moviesTableBody.style.border = "1px solid";
 
         for(let i = 0; i < moviesInfo.length; i++){
             var row = moviesTableBody.insertRow(-1);
@@ -77,7 +80,66 @@ document.addEventListener('pageshow', async () => {
             cell1.innerHTML = seriesInfo[i].Name;
             cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
             cell3.innerHTML = "<button>Delete</button>";
+            cell3.className = "actions-cell";
         }
+    };
+
+    const styleTables = () => {
+        const tables = document.querySelectorAll("table");
+        const cells = document.querySelectorAll("th, td");
+
+        tables.forEach(table => {
+            table.style.border = "1px solid";
+            table.style.borderCollapse = "collapse";
+        })
+
+        cells.forEach(cell => {
+            cell.style.border = "1px solid";
+            cell.style.padding = "0.5rem 0.75rem";
+            cell.style.textAlign = "left"
+        });
+    };
+
+    const styleLinks = () => {
+        const linkbtns = document.querySelectorAll("button.links")
+        linkbtns.forEach(btn => {
+            btn.style.background = "#0f0f0f";
+            btn.style.border = '1px solid';
+            btn.style.padding = '1rem 2rem';
+            btn.style.fontSize = "1.2rem"
+            btn.style.color = "white";
+            btn.style.textDecoration = 'none';
+            btn.style.cursor = 'pointer';
+            btn.style.lineHeight = 'inherit';
+            btn.style.verticalAlign = 'baseline';
+            btn.style.transition = 'background 0.3s ease';
+
+            const hoverBg = '#2a2a2a';
+            const normalBg = btn.style.background;
+
+            btn.addEventListener("click", () => {
+                const target = btn.dataset.target;
+                if (!target) return;
+                window.location.hash = target;
+            })
+
+            btn.addEventListener('mouseenter', () => {
+                btn.style.background = hoverBg;
+            });
+
+            btn.addEventListener('mouseleave', () => {
+                btn.style.background = normalBg;
+            });
+        })
+    }
+
+    const showElements = () => {
+        const loadingElement = document.querySelector("#loading");
+        const elements = document.querySelectorAll("div #page");
+        elements.forEach(element => {
+            element.style.visibility = "visible";
+        })
+        loadingElement.style.visibility = "hidden";
     }
 
     moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
@@ -87,4 +149,7 @@ document.addEventListener('pageshow', async () => {
     var moviesInfo = await getMediaCleanerMovieInfo();
     var seriesInfo = await getMediaCleanerSeriesInfo();
     populateTables();
+    styleTables();
+    styleLinks();
+    showElements();
 });