and that's a wrap!

dev/public/js/stores.js

@@ -1,5 +1,3 @@
-// stores definitions
-
 const userPrefsStore = {
   prefix: "marl_",
 
@@ -790,7 +788,11 @@ const uiStore = {
     this.setInert();
 
     // bring focus back to where it was before the panel was opened
-    document.querySelector("#main-section-inner .mobile-menu .menu-" + name).focus();
+    if (name === "tools" && !this.menuIsActive) {
+      document.getElementById("header-open-tools").focus();
+    } else {
+      document.querySelector("#main-section-inner .mobile-menu .menu-" + name).focus();
+    }
   },
   menuOpen(name) {
     this.openMenu = name;

dev/public/js/utils.js

@@ -512,6 +512,7 @@ function formatFileDateTime(data) {
   };
   return date.toLocaleDateString(Alpine.store("ui").lang, dateOptions);
 }
+
 function formatFileSize(size) {
   var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
   return +(size / Math.pow(1024, i)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][i]; // ### i18n
@@ -631,6 +632,7 @@ function setLang() {
   const lang = Alpine.store("ui").lang;
   AlpineI18n.locale = lang;
   Alpine.store("userPrefs").save("lang", lang);
+  document.getElementsByTagName("html")[0].setAttribute("lang", lang);
 
   const msg = `App language set to <b>'${lang}' (${Alpine.store("ui").appLangs[lang]})</b>`;
   Alpine.store("ui").logMsg(msg);

dev/src/components/panels/HeaderPanel.astro

@@ -18,13 +18,15 @@ import PagingTop from '../PagingTop.astro';
         ><span class="btn-label" x-text="$t('header.reverse')"></span>
       </button>
     </span>
+  </h2>
 
-    <button class="open-tools" @click="$store.ui.menuToggle('tools')">
+  <div class="open-tools">
+    <button class="" id="header-open-tools" @click="$store.ui.menuToggle('tools')">
       <svg class="btn-icon" aria-hidden="true">
         <use href="#tools" /></svg
       ><span class="btn-label" x-text="$t('menu.tools')"></span>
     </button>
-  </h2>
+  </div>
 
   <PagingTop />
 

dev/src/components/panels/tools/ManageFiles.astro

@@ -19,11 +19,12 @@
   </div>
 
   <div class="manage-files-actions">
-    <label for="file-loader2" class="btn load-more">
+    <label for="file-loader2" class="btn load-more" tabindex="0">
       <svg class="btn-icon" aria-hidden="true">
         <use href="#load-file" /></svg
       ><span class="btn-label" x-text="$t('tools.addAnother')"></span>
       <input
+        tabindex="-1"
         id="file-loader2"
         class="file-loader visually-hidden"
         type="file"

dev/src/css/_global.scss

@@ -93,22 +93,42 @@ select {
   }
 }
 
-button,
-label.btn,
 select {
-  border-radius: 5px;
+  padding: 0.6em 1em;
 }
 
 button,
-label.btn {
+label.btn,
+select {
   position: relative;
   top: 0;
   line-height: 24px;
   vertical-align: middle;
-  background: var(--bg-button);
   border-radius: 5px;
+  background: var(--bg-button);
   box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.35);
+  &:hover {
+    background: var(--bg-button-hover);
+  }
+  &:focus {
+    color: var(--fg-button-focus);
+  }
+  &:active {
+    top: 0.15em;
+    color: var(--fg-button-active);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  &:disabled {
+    top: 0;
+    box-shadow: none;
+    color: inherit;
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+}
 
+button,
+label.btn {
   &:not(:has(svg)) {
     padding: 0.7em 1em;
   }
@@ -132,7 +152,6 @@ label.btn {
   }
 
   &:hover {
-    background: var(--bg-button-hover);
     .btn-icon {
       fill: var(--button-svg-hover);
       @media (forced-colors: active) {
@@ -141,7 +160,6 @@ label.btn {
     }
   }
   &:focus {
-    color: var(--fg-button-focus);
     .btn-icon {
       fill: var(--button-svg-focus);
       @media (forced-colors: active) {
@@ -150,9 +168,6 @@ label.btn {
     }
   }
   &:active {
-    top: 0.15em;
-    color: var(--fg-button-active);
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
     .btn-icon {
       fill: var(--button-svg-active);
       @media (forced-colors: active) {
@@ -161,11 +176,6 @@ label.btn {
     }
   }
   &:disabled {
-    top: 0;
-    box-shadow: none;
-    color: inherit;
-    opacity: 0.35;
-    cursor: not-allowed;
     .btn-icon {
       fill: var(--button-svg);
       @media (forced-colors: active) {
@@ -175,8 +185,7 @@ label.btn {
   }
 }
 
-input,
-select {
+input {
   color: inherit;
   background-color: var(--bg-input);
 
@@ -268,10 +277,6 @@ details {
   @include mixins.visually-hidden();
 }
 
-[inert] > * {
-  opacity: 0.5;
-}
-
 .nojs {
   margin: 5dvh 10dvw;
   padding: 2em;

dev/src/css/_layout.scss

@@ -40,15 +40,21 @@ html {
 }
 
 .toots-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
   white-space: nowrap;
   overflow: hidden;
   background-color: var(--bg3);
+
   h2 {
     padding: 1rem 1rem 0;
     .order {
       font-weight: normal;
     }
   }
+
   .nb {
     color: var(--posts-count);
   }
@@ -56,8 +62,10 @@ html {
     margin-bottom: 5px;
   }
   .open-tools {
-    float: right;
-    margin-left: 5px;
+    padding: 1rem 1rem 0;
+  }
+  .paging {
+    flex: 0 0 100%;
   }
   .paging-options-toggle {
     display: none;

dev/src/css/_menu.scss

@@ -174,6 +174,10 @@ $panel-width: 400px;
     padding-bottom: 1rem;
   }
 
+  .tools {
+    background-color: var(--bg4);
+  }
+
   .mobile-menu-panel {
     position: fixed;
     left: 0 - ($menu-width + $panel-width);