Change deivces at the top-right corner clickable.

Makefile

@@ -13,7 +13,7 @@ ifeq ($(MAKECMDGOALS),)
   endif
 endif
 
-VERSION_TAG := v1.4
+VERSION_TAG := v1.5
 TITLE_ID    := FMGR88888
 PYTHON      ?= python3
 STRIP       ?= $(PS5_PAYLOAD_SDK)/bin/prospero-strip

assets/main.css

@@ -110,20 +110,55 @@ body {
   text-align: right;
 }
 
-.space-item {
+.space-info .space-item {
   flex: 0 0 auto;
+  display: inline-flex;
+  height: auto;
+  min-height: 0;
+  min-width: 0;
   margin-left: 14px;
+  padding: 0 2px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-align: right;
+  cursor: pointer;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.space-info .space-item:hover:not(:disabled),
+.space-info .space-item:focus:not(:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  outline: none;
+}
+
+.space-info .space-item:focus-visible {
+  box-shadow: 0 0 0 2px #87bfff;
+}
+
+.space-info .space-item:active {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.space-info .space-item:disabled {
+  opacity: 1;
+  color: inherit;
+  cursor: default;
+  pointer-events: none;
+}
+
 .space-prefix {
   color: #8f9aa5;
   flex: 0 0 auto;
 }
 
-.space-item.current {
+.space-info .space-item.current {
   color: #f2f5f7;
   font-weight: 700;
 }

assets/main.js

@@ -29,7 +29,7 @@ let downloadFrame = null;
 let uploadXhr = null;
 let L = {};
 
-const APP_VERSION = "v1.4";
+const APP_VERSION = "v1.5";
 const LAST_PATH_KEY = "ps5-web-file-mgr:last-path";
 const SORT_KEY = "ps5-web-file-mgr:list-sort";
 const LOADING_DISPLAY_DELAY = 250;
@@ -604,13 +604,20 @@ async function refreshSpaces() {
       spaceInfoEl.appendChild(prefix);
     }
     for (const item of data.spaces || []) {
-      const span = document.createElement("span");
-      span.className = "space-item" + (item.current ? " current" : "");
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "space-item" + (item.current ? " current" : "");
       const label = item.label_key ? t(item.label_key) : item.label;
-      span.textContent = label + ": " +
+      button.textContent = label + ": " +
         formatBytes(item.free, false) + "/" + formatBytes(item.total, false);
-      span.title = item.path + " " + span.textContent;
-      spaceInfoEl.appendChild(span);
+      button.title = item.path + " " + button.textContent;
+      if (item.current) button.setAttribute("aria-current", "location");
+      button.disabled = spaceNavigationLocked();
+      bindPress(button, () => {
+        if (!item.path || spaceNavigationLocked()) return;
+        load(item.path, undefined, false, true, "push");
+      });
+      spaceInfoEl.appendChild(button);
     }
     renderAddressPath();
   } catch (err) {
@@ -619,6 +626,11 @@ async function refreshSpaces() {
   }
 }
 
+function spaceNavigationLocked() {
+  return Boolean(busy || loadingPath || !contentLoadingEl.hidden ||
+    contentEl.classList.contains("loading"));
+}
+
 function updateSpecialStoragePaths(spaces) {
   const next = {};
   let hasMnt = false;
@@ -985,6 +997,9 @@ function singleSelected() {
 function updateButtons() {
   const items = selectedEntries();
   const locked = busy || contentEl.classList.contains("loading");
+  for (const button of spaceInfoEl.querySelectorAll(".space-item")) {
+    button.disabled = spaceNavigationLocked();
+  }
   document.getElementById("copyBtn").disabled = locked || items.length === 0;
   document.getElementById("moveBtn").disabled = locked || items.length === 0;
   document.getElementById("renameBtn").disabled = locked || items.length !== 1;
@@ -1234,6 +1249,7 @@ async function load(path, scrollTop, force, alertOnError, historyMode) {
   const shouldScrollTop = scrollTop !== false;
   if ((busy && !force) || loadingPath) return;
   loadingPath = path;
+  updateButtons();
   startContentLoadingTimer();
   try {
     setStatus(t("readDir"));