diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/files-app.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/files-app.js | 26 |
1 files changed, 20 insertions, 6 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js index 65860ec..882a8fa 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js @@ -9,6 +9,7 @@ import { FILE_ICONS, formatSize, formatDate, canPreview, CHUNK_SIZE, MEMORY_CEILING, pipelinedDownload, downloadEntry, downloadDirectory as sharedDownloadDirectory, } from './file-utils.js'; +import { useStickyBand } from './sticky.js'; // ── Files ──────────────────────────────────────────────────────────────────── // @@ -35,6 +36,11 @@ function FilesPanel({ const [filter, setFilter] = useState(''); const [currentPath, setCurrentPath] = useState(''); const [refreshing, setRefreshing] = useState(false); + // The toolbar pins below the page's own band and tells the column heads how + // far down to pin. Its height is not a constant — it wraps to three rows on + // a phone and grows a field while a folder is being named — so it is + // measured rather than written down (sticky.js). + const toolbarBand = useStickyBand('--toolbar-h'); // Only the cross-group Search page shows this (`showRefresh`): it has no // live node connection pushing index deltas, so its file list really is @@ -406,7 +412,7 @@ function FilesPanel({ `} ${status === 'connected' && html` - <div class="file-toolbar"> + <div class="file-toolbar" ref=${toolbarBand}> <div class="toolbar-group"> ${currentPath && currentRootWritable && html` <label class="tb-btn primary"> @@ -495,7 +501,7 @@ function FilesPanel({ <th class="sortable" onClick=${() => toggleSort('size')}> ${t('group.col_size')} ${sortKey === 'size' ? (sortAsc ? '▲' : '▼') : ''} </th> - ${showGroup && html`<th>${t('search.col_group')}</th>`} + ${showGroup && html`<th class="td-group">${t('search.col_group')}</th>`} <th class="sortable th-type" onClick=${() => toggleSort('type')}> ${t('group.col_type')} ${sortKey === 'type' ? (sortAsc ? '▲' : '▼') : ''} </th> @@ -514,7 +520,7 @@ function FilesPanel({ <td>${'\u{1F4C1}'}</td> <td>..</td> <td class="file-size"></td> - ${showGroup && html`<td></td>`} + ${showGroup && html`<td class="td-group"></td>`} <td class="td-type"></td> <td class="td-date"></td> </tr> @@ -536,7 +542,15 @@ function FilesPanel({ onChange=${() => toggle(dirKey(d))} /> </td> <td>${isEjected ? '\u{23CF}' : isUnavail ? '\u{26A0}' : '\u{1F4C1}'}</td> - <td>${d}${isEjected ? html` + ${/* `file-name`, like a file's own name cell. Without it this + was a bare <td>, so a folder called + `Rage_Against_The_Machine_Discography_1992-2000_FLAC` — + one unbreakable word, which is how music libraries are + named — set the column's minimum width to the whole + string. Measured on a phone: a 527px table in a 390px + window, and on Android a page wider than the screen takes + every pinned header out of the visible area with it. */''} + <td class="file-name">${d}${isEjected ? html` <span class="root-offline"> ${t('group.root_ejected')}</span> ` : isUnavail ? html` <span class="root-offline"> ${t('group.root_unavailable')}</span> @@ -559,7 +573,7 @@ function FilesPanel({ }}>${isEjected ? '\u{1F50C}' : '\u{23CF}'}</button> ` : ''}</td> <td class="file-size">${inside.length ? formatSize(bytes) : ''}</td> - ${showGroup && html`<td></td>`} + ${showGroup && html`<td class="td-group"></td>`} <td class="td-type"></td> <td class="td-date"></td> </tr> @@ -582,7 +596,7 @@ function FilesPanel({ onClick=${() => { setFilter(''); setCurrentPath(e.path); }}>${e.path}</a>`} </td> <td class="file-size">${formatSize(e.size)}</td> - ${showGroup && html`<td> + ${showGroup && html`<td class="td-group"> <a href="#/group/${e.groupId}" class="badge">${e.groupName || ''}</a> </td>`} <td class="file-type td-type">${e.type}</td> |