@haowjy/remote-workspace 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haowjy/remote-workspace",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Mobile-friendly web workspace for SSH + tmux workflows.",
   "license": "MIT",
   "repository": {

package/static/app.js

@@ -1,8 +1,22 @@
 // ---------------------------------------------------------------------------
-// Theme — initialize before Tailwind processes classes
+// Theme — sync with early head initialization
 // ---------------------------------------------------------------------------
-const savedTheme = localStorage.getItem("workspace-theme") || "dark";
+function resolveSavedTheme() {
+  if (window.__workspaceTheme === "dark" || window.__workspaceTheme === "light") {
+    return window.__workspaceTheme;
+  }
+  try {
+    const savedTheme = localStorage.getItem("workspace-theme");
+    if (savedTheme === "dark" || savedTheme === "light") return savedTheme;
+  } catch {
+    // Ignore storage access errors.
+  }
+  return "light";
+}
+
+const savedTheme = resolveSavedTheme();
 document.documentElement.dataset.theme = savedTheme;
+window.__workspaceTheme = savedTheme;
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -46,7 +60,7 @@ const CACHE_KEYS = {
 // State
 // ---------------------------------------------------------------------------
 const state = {
-  activeTab: "clipboard",
+  activeTab: "files",
   // Tree: top-level entries loaded eagerly, children loaded on expand
   topLevelEntries: [],
   dirChildren: new Map(),
@@ -64,6 +78,7 @@ const state = {
   clipboardApiMode: "modern",
   pendingUploadFile: null,
   searchDebounceTimer: null,
+  filesMobileMode: "explorer",
   // Screenshots
   screenshotEntries: [],
   screenshotsRequestId: 0,
@@ -88,6 +103,9 @@ const uploadNameInput = $("upload-name-input");
 const uploadBtn = $("upload-btn");
 const clipboardRefreshBtn = $("clipboard-refresh-btn");
 const treeRefreshBtn = $("tree-refresh-btn");
+const fileTreeContainer = $("file-tree-container");
+const fileViewerContainer = $("file-viewer-container");
+const mobileExplorerBackBtn = $("mobile-explorer-back-btn");
 const screenshotsGrid = $("screenshots-grid");
 const screenshotsStatusEl = $("screenshots-status");
 const screenshotsRefreshBtn = $("screenshots-refresh-btn");
@@ -125,7 +143,7 @@ const md = window.markdownit({
 window.mermaid.initialize({
   startOnLoad: false,
   securityLevel: "strict",
-  theme: (localStorage.getItem("workspace-theme") || "dark") === "dark" ? "dark" : "default",
+  theme: savedTheme === "dark" ? "dark" : "default",
 });
 
 // ---------------------------------------------------------------------------
@@ -198,7 +216,9 @@ function updateThemeIcon(theme) {
 // Set initial icon to match saved theme
 updateThemeIcon(savedTheme);
 // Set initial hljs theme to match
-if (savedTheme === "light") {
+if (savedTheme === "dark") {
+  hljsThemeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css";
+} else {
   hljsThemeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css";
 }
 
@@ -207,6 +227,7 @@ function toggleTheme() {
   const next = current === "dark" ? "light" : "dark";
   document.documentElement.dataset.theme = next;
   localStorage.setItem("workspace-theme", next);
+  window.__workspaceTheme = next;
 
   updateThemeIcon(next);
 
@@ -301,6 +322,27 @@ function appendVersionQuery(url, entry) {
   return `${url}${separator}v=${version}`;
 }
 
+function isDesktopLayout() {
+  return window.matchMedia("(min-width: 1024px)").matches;
+}
+
+function syncFilesLayout() {
+  if (!fileTreeContainer || !fileViewerContainer) return;
+  const desktop = isDesktopLayout();
+  if (desktop) {
+    fileTreeContainer.classList.remove("hidden");
+    fileViewerContainer.classList.remove("hidden");
+    if (mobileExplorerBackBtn) mobileExplorerBackBtn.classList.add("hidden");
+    return;
+  }
+  const viewerMode = state.filesMobileMode === "viewer";
+  fileTreeContainer.classList.toggle("hidden", viewerMode);
+  fileViewerContainer.classList.toggle("hidden", !viewerMode);
+  if (mobileExplorerBackBtn) {
+    mobileExplorerBackBtn.classList.toggle("hidden", !viewerMode);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Tab navigation
 // ---------------------------------------------------------------------------
@@ -312,6 +354,7 @@ function switchTab(tabName) {
   localStorage.setItem("workspace-tab", tabName);
   tabPanels.forEach((p) => p.classList.toggle("hidden", p.id !== `panel-${tabName}`));
   tabButtons.forEach((b) => b.classList.toggle("active", b.dataset.tab === tabName));
+  syncFilesLayout();
   refreshIcons();
 }
 
@@ -319,8 +362,8 @@ tabButtons.forEach((btn) => {
   btn.addEventListener("click", () => switchTab(btn.dataset.tab));
 });
 
-// Initialize tab — restore last active or default to clipboard
-switchTab(localStorage.getItem("workspace-tab") || "clipboard");
+// Initialize tab — restore last active or default to files
+switchTab(localStorage.getItem("workspace-tab") || "files");
 
 // ---------------------------------------------------------------------------
 // Lightbox
@@ -638,6 +681,10 @@ function handleSearch(query) {
       searchResultsEl.innerHTML = "";
       expandParentsOf(result.path);
       if (result.type === "directory") {
+        if (!isDesktopLayout()) {
+          state.filesMobileMode = "explorer";
+          syncFilesLayout();
+        }
         toggleDirectory(result.path);
       } else {
         openFile(result.path).catch(handleActionError);
@@ -678,6 +725,10 @@ async function openFile(filePath) {
   viewerRefreshBtn.classList.remove("hidden");
   expandParentsOf(filePath);
   renderTree();
+  if (!isDesktopLayout()) {
+    state.filesMobileMode = "viewer";
+    syncFilesLayout();
+  }
 
   viewerTitle.textContent = filePath;
   setStatus(`Opening ${filePath}...`);
@@ -1227,6 +1278,14 @@ screenshotsRefreshBtn.onclick = () => {
 viewerRefreshBtn.onclick = () => {
   if (state.selectedPath) openFile(state.selectedPath).catch(handleActionError);
 };
+if (mobileExplorerBackBtn) {
+  mobileExplorerBackBtn.onclick = () => {
+    state.filesMobileMode = "explorer";
+    syncFilesLayout();
+  };
+}
+window.addEventListener("resize", syncFilesLayout);
+syncFilesLayout();
 
 // ---------------------------------------------------------------------------
 // Init

package/static/index.html

@@ -4,6 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Workspace</title>
+    <script>
+      (() => {
+        let theme = "light";
+        try {
+          const savedTheme = localStorage.getItem("workspace-theme");
+          if (savedTheme === "dark" || savedTheme === "light") theme = savedTheme;
+        } catch {
+          // Ignore storage errors and keep light default.
+        }
+        document.documentElement.dataset.theme = theme;
+        window.__workspaceTheme = theme;
+      })();
+    </script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
@@ -29,7 +42,15 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
-    <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
+    <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />
+    <script>
+      if (window.__workspaceTheme === "dark") {
+        const hljsTheme = document.getElementById("hljs-theme");
+        if (hljsTheme) {
+          hljsTheme.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css";
+        }
+      }
+    </script>
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <body class="bg-ink-950 text-ink-100 font-sans h-[100dvh] flex flex-col overflow-hidden">
@@ -48,7 +69,7 @@
     <div class="flex-1 min-h-0 relative">
 
       <!-- Tab: Clipboard -->
-      <section id="panel-clipboard" class="tab-panel absolute inset-0 flex flex-col">
+      <section id="panel-clipboard" class="tab-panel absolute inset-0 flex flex-col hidden">
         <div class="shrink-0 bg-ink-900/60 border-b border-ink-800 px-4 py-3 flex flex-wrap items-center gap-2">
           <label class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-brand bg-brand-light/10 border border-brand/20 rounded-lg cursor-pointer hover:bg-brand-light/20 transition-colors">
             <i data-lucide="image-plus" class="w-3.5 h-3.5"></i>
@@ -78,7 +99,7 @@
       </section>
 
       <!-- Tab: Files -->
-      <section id="panel-files" class="tab-panel absolute inset-0 flex flex-col hidden">
+      <section id="panel-files" class="tab-panel absolute inset-0 flex flex-col">
         <!-- Search bar -->
         <div class="shrink-0 bg-ink-900/60 border-b border-ink-800 px-4 py-2.5 flex items-center gap-2">
           <div class="relative flex-1">
@@ -91,20 +112,25 @@
             />
             <div id="search-results" class="hidden absolute top-full left-0 right-0 mt-1 bg-ink-800 border border-ink-700 rounded-lg shadow-xl max-h-72 overflow-y-auto z-40"></div>
           </div>
-          <button id="tree-refresh-btn" type="button" class="p-1.5 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors" title="Refresh">
+          <button id="tree-refresh-btn" type="button" class="hidden lg:inline-flex p-1.5 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors" title="Refresh">
             <i data-lucide="refresh-cw" class="w-4 h-4"></i>
           </button>
         </div>
-        <!-- Split: tree + preview -->
+        <!-- Split: tree + preview (desktop) / single panel (mobile) -->
         <div class="flex-1 min-h-0 flex flex-col lg:flex-row">
-          <div id="file-tree" class="shrink-0 lg:shrink lg:w-72 lg:min-w-[220px] lg:max-w-[360px] h-48 lg:h-auto overflow-y-auto overscroll-contain border-b lg:border-b-0 lg:border-r border-ink-800 px-1 py-1"></div>
-          <div class="flex-1 min-h-0 flex flex-col">
+          <div id="file-tree-container" class="flex-1 min-h-0 lg:flex-none lg:w-72 lg:min-w-[220px] lg:max-w-[360px] border-b lg:border-b-0 lg:border-r border-ink-800">
+            <div id="file-tree" class="h-full overflow-y-auto overscroll-contain px-1 py-1"></div>
+          </div>
+          <div id="file-viewer-container" class="hidden flex flex-1 min-h-0 flex-col lg:flex">
             <div class="shrink-0 flex items-center gap-2 px-4 py-2 border-b border-ink-800/60">
-              <i data-lucide="eye" class="w-3.5 h-3.5 text-ink-500"></i>
-              <span id="viewer-title" class="text-xs font-mono text-ink-400 truncate">Select a file</span>
-              <button id="viewer-refresh-btn" type="button" class="ml-auto p-1 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors hidden" title="Refresh file">
+              <button id="mobile-explorer-back-btn" type="button" class="hidden lg:hidden p-1 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors" title="Back to files">
+                <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
+              </button>
+              <i data-lucide="eye" class="hidden lg:block w-3.5 h-3.5 text-ink-500"></i>
+              <button id="viewer-refresh-btn" type="button" class="order-2 lg:order-none lg:ml-auto p-1 text-ink-500 hover:text-ink-300 rounded-lg hover:bg-ink-800 transition-colors hidden" title="Refresh file">
                 <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
               </button>
+              <span id="viewer-title" class="order-3 lg:order-none min-w-0 flex-1 text-xs font-mono text-ink-400 truncate">Select a file</span>
             </div>
             <div id="viewer" class="flex-1 overflow-y-auto overscroll-contain p-4">
               <div class="flex flex-col items-center justify-center h-full text-ink-600">
@@ -150,16 +176,16 @@
 
     <!-- Bottom tab bar -->
     <nav class="shrink-0 bg-ink-900 border-t border-ink-800 flex z-30 safe-bottom">
-      <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="clipboard">
-        <i data-lucide="clipboard" class="w-5 h-5"></i>
-        <span class="text-[10px] font-semibold uppercase tracking-wide">Clipboard</span>
-        <span id="tab-badge-clipboard" class="text-[9px] font-mono text-ink-600"></span>
-      </button>
       <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="files">
         <i data-lucide="folder-tree" class="w-5 h-5"></i>
         <span class="text-[10px] font-semibold uppercase tracking-wide">Files</span>
         <span id="tab-badge-files" class="text-[9px] font-mono text-ink-600"></span>
       </button>
+      <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="clipboard">
+        <i data-lucide="clipboard" class="w-5 h-5"></i>
+        <span class="text-[10px] font-semibold uppercase tracking-wide">Clipboard</span>
+        <span id="tab-badge-clipboard" class="text-[9px] font-mono text-ink-600"></span>
+      </button>
       <button type="button" class="tab-btn flex-1 flex flex-col items-center gap-0.5 py-2.5 text-ink-500 transition-colors" data-tab="screenshots">
         <i data-lucide="camera" class="w-5 h-5"></i>
         <span class="text-[10px] font-semibold uppercase tracking-wide">Screenshots</span>