Add correct version to all blob tables, small ui fixes

Author: GusevPM

components/modals/BlobModal.vue

@@ -300,11 +300,11 @@ const handlePreviewContent = () => {
 						<Text size="13" weight="600" color="primary">{{ formatBytes(cacheStore.selectedBlob.size) }}</Text>
 					</Flex>
 
-					<Flex v-if="blob?.share_version !== null && blob?.share_version !== undefined" direction="column" gap="8" :class="$style.badge">
+					<Flex direction="column" gap="8" :class="$style.badge">
 						<Text size="12" weight="500" color="secondary"> Version </Text>
 
-						<Flex align="center" justify="end">
-							<Text size="13" weight="600" color="primary">{{ blob?.share_version }}</Text>
+						<Flex align="center" justify="end" :class="$style.value">
+							<Text size="13" weight="600" color="primary">{{ cacheStore.selectedBlob.share_version }}</Text>
 						</Flex>
 					</Flex>
 				</Flex>
@@ -529,7 +529,7 @@ const handlePreviewContent = () => {
 	object-fit: cover;
 }
 
-@media (max-width: 550px) {
+@media (max-width: 650px) {
 	.metadata {
 		flex-direction: column;
 		align-items: flex-start;
@@ -542,6 +542,10 @@ const handlePreviewContent = () => {
 
 	.badge {
 		width: 100%;
+
+		.value {
+			justify-content: flex-start;
+		}
 	}
 
 	.buttons {

components/modules/block/BlobsTable.vue

@@ -122,6 +122,7 @@ const handleViewBlob = (blob) => {
 		height: blob.height,
 		signer: blob.signer,
 		size: blob.size,
+		share_version: blob.share_version,
 		tx: blob.tx,
 		rollup: blob.rollup,
 	}
@@ -265,7 +266,7 @@ const handlePrev = () => {
 								</Text>
 							</td>
 							<td>
-								<Text size="13" weight="600" color="primary">{{ blob.namespace?.version }}</Text>
+								<Text size="13" weight="600" color="primary">{{ blob.share_version }}</Text>
 							</td>
 							<td style="width: 1px">
 								<NuxtLink v-if="blob.rollup?.logo" :to="`/network/${blob.rollup.slug}`" @click.stop>

components/modules/namespace/tables/BlobsTable.vue

@@ -53,6 +53,7 @@ const handleViewBlob = (blob) => {
 					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
 					<th><Text size="12" weight="600" color="tertiary">Share Commitments</Text></th>
 					<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Version</Text></th>
 				</tr>
 			</thead>
 
@@ -139,6 +140,11 @@ const handleViewBlob = (blob) => {
 							{{ formatBytes(blob.size) }}
 						</Text>
 					</td>
+					<td>
+						<Text size="13" weight="600" color="primary">
+							{{ blob.share_version }}
+						</Text>
+					</td>
 					<td v-if="blob.rollup?.logo" style="width: 1px">
 						<NuxtLink :to="`/network/${blob.rollup.slug}`" @click.stop>
 							<Tooltip position="start" delay="500">
@@ -211,13 +217,16 @@ const handleViewBlob = (blob) => {
 		padding: 0;
 		padding-top: 8px;
 		padding-bottom: 8px;
-		padding-right: 24px;
+		padding-right: 12px;
 
 		white-space: nowrap;
 
 		&:first-child {
 			padding-left: 16px;
 		}
+		&:last-child {
+			padding-right: 16px;
+		}
 	}
 }
 

components/modules/rollup/tables/BlobsTable.vue

@@ -47,6 +47,7 @@ const handleViewBlob = (blob) => {
 					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
 					<th><Text size="12" weight="600" color="tertiary">Share Commitments</Text></th>
 					<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Version</Text></th>
 				</tr>
 			</thead>
 
@@ -69,9 +70,15 @@ const handleViewBlob = (blob) => {
 						</Flex>
 					</td>
 					<td>
-						<Text size="13" weight="600" color="primary">
-							{{ DateTime.fromISO(blob.time).setLocale("en").toFormat("ff") }}
-						</Text>
+						<Flex direction="column" justify="center" gap="4">
+							<Text size="12" weight="600" color="primary">
+								{{ DateTime.fromISO(blob.time).toRelative({ locale: "en", style: "short" }) }}
+							</Text>
+
+							<Text size="12" weight="500" color="tertiary">
+								{{ DateTime.fromISO(blob.time).setLocale("en").toFormat("LLL d, t") }}
+							</Text>
+						</Flex>
 					</td>
 					<td>
 						<Tooltip position="start" delay="500">
@@ -101,6 +108,11 @@ const handleViewBlob = (blob) => {
 							{{ formatBytes(blob.size) }}
 						</Text>
 					</td>
+					<td>
+						<Text size="13" weight="600" color="primary">
+							{{ blob.share_version }}
+						</Text>
+					</td>
 				</tr>
 			</tbody>
 		</table>

pages/blob.vue

@@ -229,7 +229,7 @@ const handleCopy = (text) => {
 
 <template>
 	<Flex wide direction="column" gap="16" :class="$style.wrapper">
-		<Flex align="center" justify="between">
+		<Flex align="center" justify="between" :class="$style.tabs_tools">
 			<Flex align="center" gap="8">
 				<Flex @click="currTab = 'viewer'" align="center" gap="6" :class="[$style.tab, currTab === 'viewer' && $style.active]">
 					<Text size="12" weight="600" color="secondary" mono>01</Text>
@@ -241,7 +241,7 @@ const handleCopy = (text) => {
 				</Flex>
 			</Flex>
 
-			<Flex align="center" gap="8">
+			<Flex align="center" gap="8" :class="$style.tools">
 				<Button v-if="l2BlockscoutUrl" :link="l2BlockscoutUrl" target="_blank" size="mini" type="secondary">
 					<Icon name="blockscout" size="12" color="secondary" />
 					View batch
@@ -254,7 +254,7 @@ const handleCopy = (text) => {
 					<Icon name="blob" size="12" color="secondary" />
 					Select blob
 				</Button>
-				<Button @click="handleDownload" type="secondary" size="mini" wide>
+				<Button @click="handleDownload" type="secondary" size="mini">
 					<Icon name="download" size="14" color="secondary" />
 				</Button>
 				<Button @click="modalsStore.open('hexSettings')" size="mini" type="secondary">
@@ -659,4 +659,17 @@ const handleCopy = (text) => {
 		max-width: initial;
 	}
 }
+
+@media (max-width: 600px) {
+	.tabs_tools {
+		flex-direction: column-reverse;
+		align-items: flex-start;
+		gap: 12px;
+
+		.tools {
+			width: 100%;
+			justify-content: flex-end;
+		}
+	}
+}
 </style>