diff --git a/mdedit/dist/mdedit.html b/mdedit/dist/mdedit.html
index 05d5acd..ea6dbde 100644
--- a/mdedit/dist/mdedit.html
+++ b/mdedit/dist/mdedit.html
@@ -438,6 +438,24 @@ a:hover {
background: var(--bg-secondary);
}
+/* Subdued / de-emphasized variant.
+ Used on the "Add Local Directory" button when a tool is operating
+ in server (online) mode — the local-dir affordance is still
+ available but visually quieter, since the typical user already
+ has the directory loaded from the server. */
+.btn.btn--subtle {
+ background: transparent;
+ color: var(--text-muted);
+ border-color: var(--border);
+ box-shadow: none;
+ font-weight: normal;
+}
+
+.btn.btn--subtle:not(:disabled):hover {
+ color: var(--text);
+ background: var(--bg-secondary);
+}
+
.btn-success {
background: var(--success);
color: var(--text-light);
@@ -1774,9 +1792,10 @@ body.help-open .app-header {
Click Select Directory to open a folder. The file tree on the left will populate with all files in that folder.
+
Click Add Local Directory to open a folder. The file tree on the left will populate with all files in that folder.
Click any Markdown file (.md) in the tree to open it in the editor.
Use the Scratchpad entry (always visible at the top of the tree) for temporary notes without saving to disk.
@@ -2954,7 +2972,7 @@ const SCRATCHPAD_WELCOME = [
'Use this **Scratchpad** for quick notes. Download it any time with the ⬇',
'button on the Scratchpad row in the file list.',
'',
- 'Click **Select Directory** above to open a folder of Markdown files,',
+ 'Click **Add Local Directory** above to open a folder of Markdown files,',
'or just start typing here.',
'',
].join('\n');
@@ -3754,12 +3772,19 @@ async function openDirectory() {
* @param {string} directoryName - Name of the selected directory
*/
function updateDirectoryStatus(directoryName) {
- const selectDirectoryBtn = document.getElementById('select-directory');
+ // Standardized header pattern (across all ZDDC tools): the button
+ // keeps the label "Add Local Directory"; de-emphasize it once a
+ // directory is loaded (the user can still click to pick another)
+ // by applying the shared btn--subtle variant. The directory name
+ // is shown in the file-nav pane, not on the button.
+ const selectDirectoryBtn = document.getElementById('addDirectoryBtn');
if (selectDirectoryBtn) {
- selectDirectoryBtn.textContent = `Directory: ${directoryName}`;
+ selectDirectoryBtn.classList.remove('btn-primary');
+ selectDirectoryBtn.classList.add('btn--subtle');
+ selectDirectoryBtn.title = `Loaded: ${directoryName} — click to switch`;
}
- const refreshBtn = document.getElementById('refresh-directory');
+ const refreshBtn = document.getElementById('refreshHeaderBtn');
if (refreshBtn) {
refreshBtn.classList.remove('hidden');
}
@@ -4260,8 +4285,8 @@ async function loadServerDirectory() {
// Only enter server-source mode if the host actually serves JSON directory
// listings (zddc-server / Caddy). On a plain static host the probe fails
- // and we must leave "Select Directory" visible so the user can still load
- // local files.
+ // and we must leave "Add Local Directory" visible so the user can still
+ // load local files.
try {
const resp = await fetch(baseUrl, { headers: { 'Accept': 'application/json' }, cache: 'no-cache' });
if (!resp.ok) return;
@@ -4286,12 +4311,18 @@ async function loadServerDirectory() {
entries: {},
};
- // Surface refresh, hide write-only controls. "Select Directory" stays
- // visible so the user can switch to a local folder at any time.
- const refreshBtn = document.getElementById('refresh-directory');
+ // Surface refresh, hide write-only controls. "Add Local Directory"
+ // stays visible (de-emphasized via btn--subtle) so the user can
+ // switch to a local folder at any time.
+ const refreshBtn = document.getElementById('refreshHeaderBtn');
if (refreshBtn) refreshBtn.classList.remove('hidden');
const newFileRootBtn = document.getElementById('new-file-root');
if (newFileRootBtn) newFileRootBtn.classList.add('hidden');
+ const addDirBtn = document.getElementById('addDirectoryBtn');
+ if (addDirBtn) {
+ addDirBtn.classList.remove('btn-primary');
+ addDirBtn.classList.add('btn--subtle');
+ }
const stats = await readServerDirectory(baseUrl, fileTree, 0);
renderFileTree();
@@ -6028,14 +6059,14 @@ function initializeFileNavResizer() {
* Set up all event listeners for the application
*/
function setupEventListeners() {
- // Select directory button
- const selectDirectoryBtn = document.getElementById('select-directory');
+ // Add Local Directory button (was id="select-directory" / "refresh-directory")
+ const selectDirectoryBtn = document.getElementById('addDirectoryBtn');
if (selectDirectoryBtn) {
selectDirectoryBtn.addEventListener('click', openDirectory);
}
- // Refresh directory button
- const refreshDirectoryBtn = document.getElementById('refresh-directory');
+ // Refresh button (now in header, was in file-nav pane)
+ const refreshDirectoryBtn = document.getElementById('refreshHeaderBtn');
if (refreshDirectoryBtn) {
refreshDirectoryBtn.addEventListener('click', refreshDirectory);
}
@@ -6136,7 +6167,7 @@ document.addEventListener('DOMContentLoaded', function () {
* Initialize UI based on File System API availability
*/
function initializeApiAvailability() {
- const selectDirectoryBtn = document.getElementById('select-directory');
+ const selectDirectoryBtn = document.getElementById('addDirectoryBtn');
const welcomeHint = document.getElementById('welcome-hint');
const welcomeFirefox = document.getElementById('welcome-firefox');
diff --git a/zddc/internal/apps/embedded/archive.html b/zddc/internal/apps/embedded/archive.html
index 514ba3e..bcc885d 100644
--- a/zddc/internal/apps/embedded/archive.html
+++ b/zddc/internal/apps/embedded/archive.html
@@ -218,6 +218,24 @@ a:hover {
background: var(--bg-secondary);
}
+/* Subdued / de-emphasized variant.
+ Used on the "Add Local Directory" button when a tool is operating
+ in server (online) mode — the local-dir affordance is still
+ available but visually quieter, since the typical user already
+ has the directory loaded from the server. */
+.btn.btn--subtle {
+ background: transparent;
+ color: var(--text-muted);
+ border-color: var(--border);
+ box-shadow: none;
+ font-weight: normal;
+}
+
+.btn.btn--subtle:not(:disabled):hover {
+ color: var(--text);
+ background: var(--bg-secondary);
+}
+
.btn-success {
background: var(--success);
color: var(--text-light);
@@ -2113,7 +2131,7 @@ td[data-field="trackingNumber"] {
@@ -4444,8 +4462,10 @@ td[data-field="trackingNumber"] {
// Handle drops on grouping folders (for creating transmittals)
document.getElementById('groupingFoldersList').addEventListener('drop', handleDrop, false);
- // Handle drops on the main app area (for adding directories)
- document.getElementById('app').addEventListener('drop', handleAppDrop, false);
+ // Handle drops on the main app area (for adding directories).
+ // Note: the root element is id="appContainer" (id="app" was a
+ // stale reference that crashed dragDrop init in local mode).
+ document.getElementById('appContainer').addEventListener('drop', handleAppDrop, false);
}
// Prevent default behaviors
@@ -7820,7 +7840,7 @@ window.app.modules.filtering = {
// Show unsupported browser message
function showUnsupportedBrowserMessage() {
- const app = document.getElementById('app');
+ const app = document.getElementById('appContainer');
app.innerHTML = `
diff --git a/zddc/internal/apps/embedded/browse.html b/zddc/internal/apps/embedded/browse.html
index 1c9206f..858977a 100644
--- a/zddc/internal/apps/embedded/browse.html
+++ b/zddc/internal/apps/embedded/browse.html
@@ -218,6 +218,24 @@ a:hover {
background: var(--bg-secondary);
}
+/* Subdued / de-emphasized variant.
+ Used on the "Add Local Directory" button when a tool is operating
+ in server (online) mode — the local-dir affordance is still
+ available but visually quieter, since the typical user already
+ has the directory loaded from the server. */
+.btn.btn--subtle {
+ background: transparent;
+ color: var(--text-muted);
+ border-color: var(--border);
+ box-shadow: none;
+ font-weight: normal;
+}
+
+.btn.btn--subtle:not(:disabled):hover {
+ color: var(--text);
+ background: var(--bg-secondary);
+}
+
.btn-success {
background: var(--success);
color: var(--text-light);
@@ -722,22 +740,6 @@ body {
outline-offset: -1px;
}
-/* Subtle button variant — used for "Select Directory" when the page
- is server-backed (the user usually doesn't need to switch to a
- local folder; we keep the option visible but quiet). */
-.btn.btn--subtle {
- background: transparent;
- color: var(--text-muted);
- border-color: var(--border);
- box-shadow: none;
- font-weight: normal;
-}
-
-.btn.btn--subtle:hover {
- color: var(--text);
- background: var(--bg-hover, rgba(0,0,0,0.04));
-}
-
/* Table — folders + files in a tree */
.browse-table {
@@ -894,10 +896,10 @@ body {