Centralize explorer work-surface styling

webui/src/styles/components.css

@@ -2034,6 +2034,214 @@
 }
 
 
+/* Shared explorer/list work surfaces. Modules own their column definitions and domain interactions. */
+.file-manager-page.file-manager-fullscreen {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr;
+  height: calc(100vh - 115px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.file-manager-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 14px;
+  border-bottom: var(--border-line);
+  background: var(--panel-header);
+}
+
+.file-manager-shell {
+  display: grid;
+  min-height: 0;
+  height: 100%;
+  border: var(--border-line);
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--panel);
+}
+
+.file-list-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--panel);
+}
+
+.file-list-sticky {
+  flex: 0 0 auto;
+  z-index: 2;
+  border-bottom: var(--border-line);
+  background: var(--panel-soft);
+}
+
+.file-breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 32px;
+  padding: 10px 14px 6px;
+}
+
+.file-breadcrumb,
+.file-breadcrumb-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.file-breadcrumb {
+  border: 0;
+  background: transparent;
+  color: var(--text-strong);
+  cursor: pointer;
+  font-weight: 800;
+  padding: 4px 6px;
+  border-radius: 7px;
+}
+
+.file-breadcrumb:hover:not(:disabled),
+.file-breadcrumb:focus-visible {
+  background: var(--panel);
+  outline: none;
+}
+
+.file-list-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 8px 14px;
+  border-top: var(--border-line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-list-drop-target {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  transition: background-color .16s ease, box-shadow .16s ease;
+}
+
+.file-list-table-head,
+.file-list-row {
+  display: grid;
+  gap: 12px;
+  align-items: center;
+}
+
+.file-list-table-head {
+  padding: 10px 14px;
+  border-top: var(--border-line);
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.file-list-row {
+  min-height: 58px;
+  padding: 9px 14px;
+  border-bottom: var(--border-line);
+  cursor: default;
+  user-select: none;
+}
+
+.file-list-row:focus-visible {
+  outline: 2px solid var(--line-dark);
+  outline-offset: -2px;
+}
+
+.file-list-row:hover,
+.file-list-row.is-selected {
+  background: var(--line);
+}
+
+.file-list-name-cell {
+  min-width: 0;
+}
+
+.file-list-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: default;
+  font: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+.file-list-name > span {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.file-list-name strong,
+.file-list-name small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-list-name small {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-row-icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.file-row-tail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-list-empty {
+  padding: 36px 20px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.file-manager-shell.is-loading .file-tree-panel,
+.file-manager-shell.is-loading .file-list-panel {
+  filter: blur(1.5px);
+  pointer-events: none;
+  user-select: none;
+}
+
+.file-manager-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 35;
+  display: grid;
+  place-items: center;
+  background: var(--panel-glass);
+  backdrop-filter: blur(1px);
+}
+
 /* Shared explorer tree and message display surfaces. */
 .explorer-tree-children {
   display: grid;