@raketa-cloud/admin 0.0.97 → 0.0.98

package/src/views/articles/history/index.ejs

@@ -0,0 +1,87 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <div>
+      <h1 class="heading-1">Articles / History of changes</h1>
+      <span class="body-2 opacity-50"><%=  %></span>
+    </div>
+
+    <div class="actions-toolbar">
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.id}` %>" class="btn-text">Back</a>
+      <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <%- render_partial('../_shared/history_table.ejs', {
+    changes,
+    resource,
+    _context,
+    render_partial,
+    skipPagination: false,
+    toolbarPath: '../_shared/_history_toolbar.ejs'
+  }) %>
+
+</div>
+
+<div data-sidebar="1" class="search-sidebar <%= Object.keys(_context.query).some(k => k.startsWith('f:')) ? '' : 'hidden' %>">
+  <span class="heading-2">Search by</span>
+
+  <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.id}/history` %>" method="GET" class="form mt-4">
+    <input type="hidden" name="order_direction" value="<%= _context.query.order_direction %>" />
+    <input type="hidden" name="order_by" value="<%= _context.query.order_by %>" />
+
+    <div class="mb-4">
+      <label for="date_from" class="font-semibold hover:cursor-pointer body-3">From</label>
+      <input type="date" name="f:date_from" value="<%= _context.query["f:date_from"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="date_to" class="font-semibold hover:cursor-pointer body-3">To</label>
+      <input type="date" name="f:date_to" value="<%= _context.query["f:date_to"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <%- f.field('f:operator', {
+          as: 'select',
+          options: editors.map(editor => [editor.id, editor.name]),
+          label: "Editor",
+          include_blank: 'All Editors',
+          value: _context.query["f:operator"]
+        }) %>
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Changes</label>
+      <div class="checkbox-group mb-4">
+        <% Object.entries(history.changeTypes(_context.resourceConfig.articleType)).forEach(([key, {label}])=> { %>
+        <div class="flex items-center gap-1">
+          <% if (Array.from(_context.query["f:change_type"] || []).includes(key)) { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' checked value="<%= key %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' value="<%= key %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='change-<%= key %>' class="body-2 hover:cursor-pointer">
+            <%= label %>
+          </label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
+    <div class="btn-toolbar">
+      <button type="submit" class="btn-primary">Search</button>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.id}/history` %>" class="btn-text">Clear search</a>
+    </div>
+  </form>
+</div>
+
+<script>
+  const sidebar = document.querySelector("[data-sidebar]");
+  const searchToggle = document.querySelector('[data-toggle-sidebar]');
+  searchToggle.addEventListener('click', () => {
+    sidebar.classList.toggle('hidden');
+  });
+</script>

package/src/views/articles/show.ejs

@@ -218,57 +218,17 @@
       History of changes
     </h4>
 
-    <table class="data-grid">
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Date of change</th>
-          <th>Published by</th>
-          <th>&nbsp;</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <% const maxVersion = Math.max(...changes.map((ch) => ch.version)); %>
-        <% changes.forEach((change, idx)=> { %>
-        <tr class="border-b border-mono-25">
-          <td class="py-4 pl-2">
-            <div class="flex items-center gap-2">
-              <%= [change.title, change.description].filter(Boolean).join(": ") %>
-
-              <% if (change.source === "revert") { %>
-              <img src="/static/_assets/revert.svg" alt="Revert version" class="size-4">
-              <% } %>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                </svg>
-
-                <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
-              </div>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1" title="<%= change.operatorMeta.name %>">
-                <img src="<%= change.operatorMeta.avatar %>" class="size-4 rounded-full">
-                <%= change.operatorMeta.name %>
-              </div>
-            </div>
-          </td>
-
-          <td>
-            <%- render_partial('./_shared/_history_toolbar.ejs', { maxVersion, change }) %>
-          </td>
-        </tr>
-        <% }); %>
-      </tbody>
-    </table>
+    <%- render_partial('./_shared/history_table.ejs', {
+      changes,
+      resource,
+      _context,
+      render_partial,
+      skipPagination: true,
+      toolbarPath: './_shared/_history_toolbar.ejs'
+    }) %>
+
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.id}/history` %>" class="btn-text ml-2 my-8">
+      Full page history
+    </a>
   </div>
 </div>

package/src/views/events/_shared/_history_toolbar.ejs

@@ -1,16 +1,17 @@
 <div class="actions-toolbar justify-end">
-  <% if (maxVersion !== change.version) { %>
-  <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.eventTypePlural}/${resource.id}/event_changes/reverts` %>" class="inline-block">
-    <input type="hidden" name="version" value=<%= change.version %>>
-    <button type="submit" class="btn-text has-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
-      </svg>
+  <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/${_context.resourceConfig.pageType}_changes/reverts` %>" class="inline-block">
+    <input type="hidden" name="version" value="<%= change.version %>">
 
+    <% if (history.isChangeRevertable(change, maxVersion)) { %>
+    <button type="submit" class="btn-text">
       Revert
     </button>
+    <% } else { %>
+    <button type="submit" disabled class="btn-text opacity-50 cursor-not-allowed">
+      Revert
+    </button>
+    <% } %>
   </form>
-  <% } %>
 
   <a href="/remote/login?redirect_to=/<%= _context.locale %>/admin/<%= _context.resourceConfig.eventTypePlural %>/<%= resource.id %>/changes/<%= change.version %>" class="btn-text has-icon">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">

package/src/views/events/_shared/history_table.ejs

@@ -0,0 +1,68 @@
+<% const maxVersion = history.getMaxVersion(changes); %>
+
+<div class="history-table-wrapper">
+  <table class="data-grid">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Date of change</th>
+        <th>Editor</th>
+        <th>Action</th>
+        <th>Reason</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% changes.list.forEach((change)=> { %>
+      <tr class="border-b border-mono-25">
+        <td class="py-4 pl-2">
+          <div class="flex items-center gap-2">
+            <%= change.version %>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1">
+              <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
+            </div>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1" title="<%= change.operatorMeta.name %>">
+              <% if (change.operatorMeta.avatar) { %>
+              <img src="<%= change.operatorMeta.avatar %>" class="size-4 rounded-full">
+              <% } %>
+
+              <%= change.operatorMeta.name %>
+            </div>
+          </div>
+        </td>
+
+        <td class="py-4 pl-2">
+          <div class="flex items-center gap-2">
+            <%= history.changeAction(change, _context.resourceConfig.eventType) %>
+          </div>
+        </td>
+
+        <td class="py-4 pl-2">
+          <div class="flex items-center gap-2">
+            <%= history.changeReason(change) %>
+          </div>
+        </td>
+
+        <td>
+          <%- render_partial(toolbarPath, { maxVersion, change }) %>
+        </td>
+      </tr>
+      <% }); %>
+    </tbody>
+  </table>
+
+  <% if (!skipPagination) { %>
+  <%- pagination(changes.pagination, _context) %>
+  <% } %>
+</div>

package/src/views/events/history/index.ejs

@@ -0,0 +1,87 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <div>
+      <h1 class="heading-1">Events / History of changes</h1>
+      <span class="body-2 opacity-50"><%=  %></span>
+    </div>
+
+    <div class="actions-toolbar">
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.eventTypePlural}/${resource.id}` %>" class="btn-text">Back</a>
+      <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <%- render_partial('../_shared/history_table.ejs', {
+    changes,
+    resource,
+    _context,
+    render_partial,
+    skipPagination: false,
+    toolbarPath: '../_shared/_history_toolbar.ejs'
+  }) %>
+
+</div>
+
+<div data-sidebar="1" class="search-sidebar <%= Object.keys(_context.query).some(k => k.startsWith('f:')) ? '' : 'hidden' %>">
+  <span class="heading-2">Search by</span>
+
+  <form action="<%= `/${_context.locale}/${_context.resourceConfig.eventTypePlural}/${resource.id}/history` %>" method="GET" class="form mt-4">
+    <input type="hidden" name="order_direction" value="<%= _context.query.order_direction %>" />
+    <input type="hidden" name="order_by" value="<%= _context.query.order_by %>" />
+
+    <div class="mb-4">
+      <label for="date_from" class="font-semibold hover:cursor-pointer body-3">From</label>
+      <input type="date" name="f:date_from" value="<%= _context.query["f:date_from"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="date_to" class="font-semibold hover:cursor-pointer body-3">To</label>
+      <input type="date" name="f:date_to" value="<%= _context.query["f:date_to"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <%- f.field('f:operator', {
+          as: 'select',
+          options: editors.map(editor => [editor.id, editor.name]),
+          label: "Editor",
+          include_blank: 'All Editors',
+          value: _context.query["f:operator"]
+        }) %>
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Changes</label>
+      <div class="checkbox-group mb-4">
+        <% Object.entries(history.changeTypes(_context.resourceConfig.eventType)).forEach(([key, {label}])=> { %>
+        <div class="flex items-center gap-1">
+          <% if (Array.from(_context.query["f:change_type"] || []).includes(key)) { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' checked value="<%= key %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' value="<%= key %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='change-<%= key %>' class="body-2 hover:cursor-pointer">
+            <%= label %>
+          </label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
+    <div class="btn-toolbar">
+      <button type="submit" class="btn-primary">Search</button>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.eventTypePlural}/${resource.id}/history` %>" class="btn-text">Clear search</a>
+    </div>
+  </form>
+</div>
+
+<script>
+  const sidebar = document.querySelector("[data-sidebar]");
+  const searchToggle = document.querySelector('[data-toggle-sidebar]');
+  searchToggle.addEventListener('click', () => {
+    sidebar.classList.toggle('hidden');
+  });
+</script>

package/src/views/events/show.ejs

@@ -218,57 +218,17 @@
       History of changes
     </h4>
 
-    <table class="data-grid">
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Date of change</th>
-          <th>Published by</th>
-          <th>&nbsp;</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <% const maxVersion = Math.max(...changes.map((ch) => ch.version)); %>
-        <% changes.forEach((change, idx)=> { %>
-        <tr class="border-b border-mono-25">
-          <td class="py-4 pl-2">
-            <div class="flex items-center gap-2">
-              <%= [change.title, change.description].filter(Boolean).join(": ") %>
-
-              <% if (change.source === "revert") { %>
-              <img src="/static/_assets/revert.svg" alt="Revert version" class="size-4">
-              <% } %>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                </svg>
-
-                <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
-              </div>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1" title="<%= change.operatorMeta.name %>">
-                <img src="<%= change.operatorMeta.avatar %>" class="size-4 rounded-full">
-                <%= change.operatorMeta.name %>
-              </div>
-            </div>
-          </td>
-
-          <td>
-            <%- render_partial('./_shared/_history_toolbar.ejs', { maxVersion, change }) %>
-          </td>
-        </tr>
-        <% }); %>
-      </tbody>
-    </table>
+    <%- render_partial('./_shared/history_table.ejs', {
+      changes,
+      resource,
+      _context,
+      render_partial,
+      skipPagination: true,
+      toolbarPath: './_shared/_history_toolbar.ejs'
+    }) %>
+
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.eventTypePlural}/${resource.id}/history` %>" class="btn-text ml-2 my-8">
+      Full page history
+    </a>
   </div>
 </div>

package/src/views/pages/_shared/_history_toolbar.ejs

@@ -1,16 +1,17 @@
 <div class="actions-toolbar justify-end">
-  <% if (maxVersion !== change.version) { %>
   <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/${_context.resourceConfig.pageType}_changes/reverts` %>" class="inline-block">
-    <input type="hidden" name="version" value=<%= change.version %>>
-    <button type="submit" class="btn-text has-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
-      </svg>
+    <input type="hidden" name="version" value="<%= change.version %>">
 
+    <% if (history.isChangeRevertable(change, maxVersion)) { %>
+    <button type="submit" class="btn-text">
       Revert
     </button>
+    <% } else { %>
+    <button type="submit" disabled class="btn-text opacity-50 cursor-not-allowed">
+      Revert
+    </button>
+    <% } %>
   </form>
-  <% } %>
 
   <a href="/remote/login?redirect_to=/<%= _context.locale %>/admin/<%= _context.resourceConfig.pageTypePlural %>/<%= resource.id %>/changes/<%= change.version %>" class="btn-text has-icon">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">

package/src/views/pages/_shared/history_table.ejs

@@ -0,0 +1,68 @@
+<% const maxVersion = history.getMaxVersion(changes); %>
+
+<div class="history-table-wrapper">
+  <table class="data-grid">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Date of change</th>
+        <th>Editor</th>
+        <th>Action</th>
+        <th>Reason</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% changes.list.forEach((change)=> { %>
+      <tr class="border-b border-mono-25">
+        <td class="py-4 pl-2">
+          <div class="flex items-center gap-2">
+            <%= change.version %>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1">
+              <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
+            </div>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1" title="<%= change.operatorMeta.name %>">
+              <% if (change.operatorMeta.avatar) { %>
+              <img src="<%= change.operatorMeta.avatar %>" class="size-4 rounded-full">
+              <% } %>
+
+              <%= change.operatorMeta.name %>
+            </div>
+          </div>
+        </td>
+
+        <td class="py-4 pl-2">
+          <div class="flex items-center gap-2">
+            <%= history.changeAction(change, _context.resourceConfig.pageType) %>
+          </div>
+        </td>
+
+        <td class="py-4 pl-2">
+          <div class="flex items-center gap-2">
+            <%= history.changeReason(change) %>
+          </div>
+        </td>
+
+        <td>
+          <%- render_partial(toolbarPath, { maxVersion, change }) %>
+        </td>
+      </tr>
+      <% }); %>
+    </tbody>
+  </table>
+
+  <% if (!skipPagination) { %>
+  <%- pagination(changes.pagination, _context) %>
+  <% } %>
+</div>

package/src/views/pages/history/index.ejs

@@ -0,0 +1,87 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <div>
+      <h1 class="heading-1">Pages / History of changes</h1>
+      <span class="body-2 opacity-50"><%=  %></span>
+    </div>
+
+    <div class="actions-toolbar">
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}` %>" class="btn-text">Back</a>
+      <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <%- render_partial('../_shared/history_table.ejs', {
+    changes,
+    resource,
+    _context,
+    render_partial,
+    skipPagination: false,
+    toolbarPath: '../_shared/_history_toolbar.ejs'
+  }) %>
+
+</div>
+
+<div data-sidebar="1" class="search-sidebar <%= Object.keys(_context.query).some(k => k.startsWith('f:')) ? '' : 'hidden' %>">
+  <span class="heading-2">Search by</span>
+
+  <form action="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/history` %>" method="GET" class="form mt-4">
+    <input type="hidden" name="order_direction" value="<%= _context.query.order_direction %>" />
+    <input type="hidden" name="order_by" value="<%= _context.query.order_by %>" />
+
+    <div class="mb-4">
+      <label for="date_from" class="font-semibold hover:cursor-pointer body-3">From</label>
+      <input type="date" name="f:date_from" value="<%= _context.query["f:date_from"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="date_to" class="font-semibold hover:cursor-pointer body-3">To</label>
+      <input type="date" name="f:date_to" value="<%= _context.query["f:date_to"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <%- f.field('f:operator', {
+          as: 'select',
+          options: editors.map(editor => [editor.id, editor.name]),
+          label: "Editor",
+          include_blank: 'All Editors',
+          value: _context.query["f:operator"]
+        }) %>
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Changes</label>
+      <div class="checkbox-group mb-4">
+        <% Object.entries(history.changeTypes(_context.resourceConfig.pageType)).forEach(([key, {label}])=> { %>
+        <div class="flex items-center gap-1">
+          <% if (Array.from(_context.query["f:change_type"] || []).includes(key)) { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' checked value="<%= key %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' value="<%= key %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='change-<%= key %>' class="body-2 hover:cursor-pointer">
+            <%= label %>
+          </label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
+    <div class="btn-toolbar">
+      <button type="submit" class="btn-primary">Search</button>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/history` %>" class="btn-text">Clear search</a>
+    </div>
+  </form>
+</div>
+
+<script>
+  const sidebar = document.querySelector("[data-sidebar]");
+  const searchToggle = document.querySelector('[data-toggle-sidebar]');
+  searchToggle.addEventListener('click', () => {
+    sidebar.classList.toggle('hidden');
+  });
+</script>