Use Core explorer work-surface styling

webui/src/features/files/FilesPage.tsx

@@ -1985,7 +1985,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
   const currentFolderDropActive = currentFolderDropTarget ? dropTargetKey === dropTargetId(currentFolderDropTarget) : false;
 
   return (
-    <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
+    <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen files-page">
       {error &&
       <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>
       }

webui/src/styles/file-manager.css

@@ -1,85 +1,6 @@
 /* Files manager */
-.file-manager-page.file-manager-fullscreen {
+.files-page .file-manager-shell {
-  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-toolbar .button {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.file-manager-shell {
-  display: grid;
   grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
-  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-search-row {
@@ -90,53 +11,21 @@
   padding: 4px 0 10px 14px;
 }
 
-.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-drop-target.is-active,
 .file-list-drop-target.is-drop-target {
   background: var(--line);
   box-shadow: inset 0 0 0 2px var(--line-dark);
 }
 
-.file-list-table {
+.files-page .file-list-table {
   min-width: 760px;
 }
 
-.file-list-table-head,
+.files-page .file-list-table-head,
-.file-list-row {
+.files-page .file-list-row,
-  display: grid;
+.managed-pattern-results .file-list-table-head,
+.managed-pattern-results .file-list-row {
   grid-template-columns: minmax(280px, 1fr) 120px 240px;
-  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-table-head button {
@@ -158,24 +47,6 @@
   outline: none;
 }
 
-.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-row.is-drop-target {
   background: var(--line);
   box-shadow: inset 0 0 0 2px var(--line-dark);
@@ -191,43 +62,6 @@
   background: transparent;
 }
 
-.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-linkage-status {
   display: inline-flex;
   align-items: center;
@@ -238,31 +72,10 @@
   color: var(--text-strong);
 }
 
-.file-row-icon {
-  color: var(--muted);
-  flex: 0 0 auto;
-}
-
 .folder-row .file-row-icon {
   color: var(--warning-deep);
 }
 
-.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-list-virtual-spacer {
   min-height: 0;
   pointer-events: none;
@@ -724,25 +537,27 @@
 }
 
 @media (max-width: 1050px) {
-  .file-manager-shell {
+  .files-page .file-manager-shell {
     grid-template-columns: 1fr;
   }
 
-  .file-tree-panel {
+  .files-page .file-tree-panel {
     max-height: 260px;
     border-right: 0;
     border-bottom: var(--border-line);
   }
 
-  .file-list-table-head {
+  .files-page .file-list-table-head,
+  .managed-pattern-results .file-list-table-head {
     display: none;
   }
 
-  .file-list-table {
+  .files-page .file-list-table {
     min-width: 0;
   }
 
-  .file-list-row {
+  .files-page .file-list-row,
+  .managed-pattern-results .file-list-row {
     grid-template-columns: 1fr;
     gap: 8px;
   }
@@ -752,23 +567,6 @@
   }
 }
 
-.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);
-}
-
 .file-conflict-summary {
   display: grid;
   gap: 3px;