From f3d8b2094185a1cd157ccecc4b5b792fe8a611d9 Mon Sep 17 00:00:00 2001
From: Michael Taylor <mtaylor@michaeltaylor.dev>
Date: Tue, 29 Oct 2024 12:02:37 -0400
Subject: [PATCH 1/3] feat: client side filter

---
 src/views/keysIndexView.ts | 80 ++++++++++++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/views/keysIndexView.ts b/src/views/keysIndexView.ts
index 8d2166d..14b7d6c 100644
--- a/src/views/keysIndexView.ts
+++ b/src/views/keysIndexView.ts
@@ -19,10 +19,11 @@ export const renderKeysIndexView = (
 
       parts.forEach((part, index) => {
         if (!currentLevel[part]) {
+          const isFolder = index < parts.length - 1 || utf8Key.endsWith('/');
           currentLevel[part] = {
             __children: {},
-            __isFolder: index < parts.length - 1 || utf8Key.endsWith('/'),
-            __link: index === parts.length - 1 ? link : null,
+            __isFolder: isFolder,
+            __link: !isFolder ? link : null,
           };
         }
         currentLevel = currentLevel[part].__children;
@@ -83,6 +84,12 @@ export const renderKeysIndexView = (
             font-size: 2em;
             color: #333;
             margin: 0;
+            flex-grow: 1;
+          }
+          #search-input {
+            margin-left: 20px;
+            padding: 5px 10px;
+            font-size: 1em;
           }
           .grid-container {
             display: grid;
@@ -119,6 +126,7 @@ export const renderKeysIndexView = (
         <div class="navigation">
           <a id="up-button" href="#">Up</a>
           <h1>Index of ${storeId}</h1>
+          <input type="text" id="search-input" placeholder="Filter items..." />
         </div>
         <div class="grid-container" id="grid-container">
           <!-- Items will be dynamically generated here -->
@@ -129,17 +137,27 @@ export const renderKeysIndexView = (
             const gridContainer = document.getElementById('grid-container');
             const h1 = document.querySelector('h1');
             const upButton = document.getElementById('up-button');
+            const searchInput = document.getElementById('search-input');
 
             // SVG icons
             const folderSvg = \`${folderSvg}\`;
             const fileSvg = \`${fileSvg}\`;
 
+            // Debounce function
+            function debounce(func, wait) {
+              let timeout;
+              return function(...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+              };
+            }
+
             function render() {
               const currentPath = decodeURIComponent(location.hash.slice(1)) || '';
               h1.textContent = 'Index of ${storeId}/' + currentPath;
 
-              // Clear existing items
-              gridContainer.innerHTML = '';
+              // Get the search query
+              const query = searchInput.value.toLowerCase();
 
               // Get the current level in the file tree
               const parts = currentPath ? currentPath.split('/').filter(Boolean) : [];
@@ -156,20 +174,43 @@ export const renderKeysIndexView = (
                 }
               }
 
-              // Generate HTML for items in the current level
-              const itemsHtml = Object.keys(currentLevel)
-                .map((name) => {
-                  const item = currentLevel[name];
-                  const isFolder = Object.keys(item.__children).length > 0 || item.__isFolder;
-                  const itemPath = currentPath ? currentPath + '/' + name : name;
-                  const link = isFolder ? '#' : item.__link;
-                  const icon = isFolder ? folderSvg : fileSvg;
+              // Get the items and sort folders first
+              const items = Object.keys(currentLevel).map((name) => {
+                const item = currentLevel[name];
+                const isFolder = item.__isFolder || Object.keys(item.__children).length > 0;
+                const itemPath = currentPath ? currentPath + '/' + name : name;
+                const link = isFolder ? '#' : item.__link;
+                const icon = isFolder ? folderSvg : fileSvg;
+                return {
+                  name,
+                  isFolder,
+                  itemPath,
+                  link,
+                  icon,
+                };
+              });
+
+              // Filter items based on the search query
+              const filteredItems = items.filter((item) => {
+                return item.name.toLowerCase().includes(query);
+              });
+
+              // Sort items: folders first, then files
+              filteredItems.sort((a, b) => {
+                if (a.isFolder === b.isFolder) {
+                  return a.name.localeCompare(b.name);
+                }
+                return a.isFolder ? -1 : 1;
+              });
 
+              // Generate HTML for items
+              const itemsHtml = filteredItems
+                .map((item) => {
                   return \`
                     <div class="grid-item">
-                      <a href="\${isFolder ? '#' : link}" \${isFolder ? \`onclick="navigateTo('\${encodeURIComponent(itemPath)}'); return false;"\` : 'target="_blank"'}>
-                        \${icon}
-                        <div class="item-name">\${name}</div>
+                      <a href="\${item.isFolder ? '#' : item.link}" \${item.isFolder ? \`onclick="navigateTo('\${encodeURIComponent(item.itemPath)}'); return false;"\` : 'target="_blank"'}>
+                        \${item.icon}
+                        <div class="item-name">\${item.name}</div>
                       </a>
                     </div>
                   \`;
@@ -195,8 +236,15 @@ export const renderKeysIndexView = (
               location.hash = path;
             };
 
-            render();
+            // Debounced render function for search input
+            const debouncedRender = debounce(render, 300);
+
+            // Event listeners
             window.addEventListener('hashchange', render);
+            searchInput.addEventListener('input', debouncedRender);
+
+            // Initial render
+            render();
           })();
         </script>
       </body>

From d9cca47457cead92efb2f5579e70fd6149f8edeb Mon Sep 17 00:00:00 2001
From: Michael Taylor <mtaylor@michaeltaylor.dev>
Date: Tue, 29 Oct 2024 12:05:36 -0400
Subject: [PATCH 2/3] feat: add mobile layout for index page

---
 src/views/keysIndexView.ts | 46 +++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/views/keysIndexView.ts b/src/views/keysIndexView.ts
index 14b7d6c..6e6cd2f 100644
--- a/src/views/keysIndexView.ts
+++ b/src/views/keysIndexView.ts
@@ -59,6 +59,7 @@ export const renderKeysIndexView = (
     <html>
       <head>
         <title>Index of ${storeId}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <style>
           body {
             font-family: Arial, sans-serif;
@@ -68,6 +69,7 @@ export const renderKeysIndexView = (
           }
           .navigation {
             display: flex;
+            flex-wrap: wrap;
             align-items: center;
             margin-bottom: 20px;
           }
@@ -76,6 +78,7 @@ export const renderKeysIndexView = (
             margin-right: 20px;
             color: #007bff;
             text-decoration: none;
+            font-size: 1.2em;
           }
           #up-button:hover {
             text-decoration: underline;
@@ -85,15 +88,20 @@ export const renderKeysIndexView = (
             color: #333;
             margin: 0;
             flex-grow: 1;
+            min-width: 200px;
           }
           #search-input {
-            margin-left: 20px;
-            padding: 5px 10px;
+            margin-left: auto;
+            padding: 8px 12px;
             font-size: 1em;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            width: 100%;
+            max-width: 300px;
           }
           .grid-container {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
             grid-gap: 20px;
           }
           .grid-item {
@@ -102,10 +110,14 @@ export const renderKeysIndexView = (
             padding: 10px;
             border-radius: 8px;
             border: 1px solid #ddd;
+            transition: transform 0.2s;
+          }
+          .grid-item:hover {
+            transform: scale(1.05);
           }
           .grid-item svg {
-            width: 64px;
-            height: 64px;
+            width: 48px;
+            height: 48px;
           }
           .item-name {
             margin-top: 10px;
@@ -120,6 +132,30 @@ export const renderKeysIndexView = (
           a:hover .item-name {
             text-decoration: underline;
           }
+          @media (max-width: 600px) {
+            body {
+              padding: 10px;
+            }
+            .navigation {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+            #up-button {
+              margin-bottom: 10px;
+            }
+            h1 {
+              font-size: 1.5em;
+            }
+            #search-input {
+              margin-left: 0;
+              margin-top: 10px;
+              width: 100%;
+            }
+            .grid-item svg {
+              width: 40px;
+              height: 40px;
+            }
+          }
         </style>
       </head>
       <body>

From ef73efcf1dc59d33923cef495caf0c92802d8672 Mon Sep 17 00:00:00 2001
From: Michael Taylor <mtaylor@michaeltaylor.dev>
Date: Tue, 29 Oct 2024 12:06:16 -0400
Subject: [PATCH 3/3] chore(release): 0.0.1-alpha.97

---
 CHANGELOG.md      | 8 ++++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1965a90..d449b7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.1-alpha.97](https://github.com/DIG-Network/dig-content-server/compare/v0.0.1-alpha.96...v0.0.1-alpha.97) (2024-10-29)
+
+
+### Features
+
+* add mobile layout for index page ([d9cca47](https://github.com/DIG-Network/dig-content-server/commit/d9cca47457cead92efb2f5579e70fd6149f8edeb))
+* client side filter ([f3d8b20](https://github.com/DIG-Network/dig-content-server/commit/f3d8b2094185a1cd157ccecc4b5b792fe8a611d9))
+
 ### [0.0.1-alpha.96](https://github.com/DIG-Network/dig-content-server/compare/v0.0.1-alpha.95...v0.0.1-alpha.96) (2024-10-29)
 
 
diff --git a/package-lock.json b/package-lock.json
index 3aeb86a..8be02c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "dig-content-server",
-  "version": "0.0.1-alpha.96",
+  "version": "0.0.1-alpha.97",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dig-content-server",
-      "version": "0.0.1-alpha.96",
+      "version": "0.0.1-alpha.97",
       "license": "ISC",
       "dependencies": {
         "@dignetwork/datalayer-driver": "^0.1.28",
diff --git a/package.json b/package.json
index 2ab5989..8d5349b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dig-content-server",
-  "version": "0.0.1-alpha.96",
+  "version": "0.0.1-alpha.97",
   "description": "",
   "type": "commonjs",
   "main": "./dist/index.js",