add DockerContainerDetail.vue

src/pages/file/FileExplorerList.vue

@@ -6,7 +6,7 @@
 		key-field="path"
 	>
 		<template #before>
-			<div aria-hidden="true" class="spacer top"></div>
+			<div aria-hidden="true" class="spacer header"></div>
 		</template>
 		<template #default="{ item }">
 			<t-swipe-cell :disabled="!isSwipeActionVisible(item)" :left="resolveLeftActions(item)">
@@ -17,7 +17,7 @@
 					@click="handleOpen(item)"
 				>
 					<template #note>
-						<div class="note">
+						<div class="health">
 							<t-loading v-if="item.path === pendingPath" size="1rem" />
 							<span v-if="item.type === 'file'" v-text="item.size"></span>
 						</div>
@@ -29,7 +29,7 @@
 			</t-swipe-cell>
 		</template>
 		<template #after>
-			<div aria-hidden="true" class="spacer bottom"></div>
+			<div aria-hidden="true" class="spacer content"></div>
 		</template>
 	</recycle-scroller>
 </template>
@@ -145,16 +145,16 @@ function handlePlay(item: ExplorerItem): void {
 		width: 100%;
 		pointer-events: none;
 
-		&.top {
+		&.header {
 			height: var(--top-gap);
 		}
 
-		&.bottom {
+		&.content {
 			height: var(--bottom-gap);
 		}
 	}
 
-	.note {
+	.health {
 		gap: .375rem;
 		display: flex;
 		flex: 0 0 auto;