Add safe archive preview and extraction workflows

webui/src/styles/file-manager.css

@@ -288,6 +288,132 @@
   width: min(820px, 100%);
 }
 
+.file-dialog:has(.archive-preview) {
+  width: min(860px, 100%);
+}
+
+.archive-upload-help {
+  margin: -8px 0 0;
+}
+
+.archive-preview {
+  display: grid;
+  min-width: 0;
+  gap: 16px;
+}
+
+.archive-preview-summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
+  gap: 1px;
+  overflow: hidden;
+  border: var(--border-line);
+  border-radius: 6px;
+  background: var(--line);
+}
+
+.archive-preview-summary > div {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+  padding: 11px 12px;
+  background: var(--panel-soft);
+}
+
+.archive-preview-summary strong,
+.archive-preview-summary span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.archive-preview-summary span {
+  color: var(--muted);
+  font-size: var(--font-size-sm);
+}
+
+.archive-selection-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.archive-selection-toolbar label,
+.archive-entry-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.archive-selection-toolbar label {
+  font-weight: 700;
+}
+
+.archive-selection-toolbar > span,
+.archive-entry-size {
+  color: var(--muted);
+  font-size: var(--font-size-sm);
+}
+
+.archive-entry-list {
+  display: grid;
+  align-content: start;
+  max-height: min(380px, 42vh);
+  overflow: auto;
+  scrollbar-gutter: stable;
+  border: var(--border-line);
+  border-radius: 6px;
+  background: var(--surface);
+}
+
+.archive-entry-row {
+  min-width: 0;
+  min-height: 38px;
+  padding-top: 7px;
+  padding-right: 12px;
+  padding-bottom: 7px;
+  border-bottom: var(--border-line);
+  cursor: pointer;
+}
+
+.archive-entry-row:last-child {
+  border-bottom: 0;
+}
+
+.archive-entry-row:hover {
+  background: var(--hover-tint);
+}
+
+.archive-entry-row.is-directory {
+  background: var(--panel-soft);
+  font-weight: 700;
+}
+
+.archive-entry-row.is-directory:hover {
+  background: var(--primary-soft);
+}
+
+.archive-entry-path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.archive-entry-size {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.archive-preview-actions {
+  align-items: center;
+}
+
+.archive-preview-action-spacer {
+  flex: 1 1 auto;
+}
+
 .file-dialog:has(.file-share-dialog-content) {
   width: min(1080px, 100%);
 }
@@ -312,6 +438,10 @@
 }
 
 @media (max-width: 620px) {
+  .archive-preview-summary {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .file-share-form {
     grid-template-columns: minmax(0, 1fr);
   }