fix: Added a label on top of the destination path

Author: redsteadz

apps/files/src/components/FilesSidebar/FilesSidebarSubname.vue

@@ -22,36 +22,56 @@ const size = computed(() => formatFileSize(props.node.size ?? 0))
 
 <template>
 	<div :class="$style.filesSidebarSubname">
-		<div class="filesSidebarSubname__path">
+		<div :class="$style.filesSidebarSubname__path">
+			<span :class="$style.filesSidebarSubname__label">{{ t('files', 'Location') }}:</span>
 			{{ node.path }}
 		</div>
 
-		<NcIconSvgWrapper
-			v-if="isFavourited"
-			inline
-			:path="mdiStar"
-			:name="t('files', 'Favorite')" />
+		<div :class="$style.filesSidebarSubname__metadata">
+			<NcIconSvgWrapper
+				v-if="isFavourited"
+				inline
+				:path="mdiStar"
+				:name="t('files', 'Favorite')" />
 
-		<span>{{ size }}</span>
+			<span>{{ size }}</span>
 
-		<span v-if="node.mtime">
-			<span :class="$style.filesSidebarSubname__separator">•</span>
-			<NcDateTime :timestamp="node.mtime" />
-		</span>
+			<span v-if="node.mtime">
+				<span :class="$style.filesSidebarSubname__separator">•</span>
+				<NcDateTime :timestamp="node.mtime" />
+			</span>
 
-		<template v-if="node.owner">
-			<span :class="$style.filesSidebarSubname__separator">•</span>
-			<NcUserBubble
-				:class="$style.filesSidebarSubname__userBubble"
-				:title="t('files', 'Owner')"
-				:user="node.owner"
-				:display-name="node.attributes['owner-display-name']" />
-		</template>
+			<template v-if="node.owner">
+				<span :class="$style.filesSidebarSubname__separator">•</span>
+				<NcUserBubble
+					:class="$style.filesSidebarSubname__userBubble"
+					:title="t('files', 'Owner')"
+					:user="node.owner"
+					:display-name="node.attributes['owner-display-name']" />
+			</template>
+		</div>
 	</div>
 </template>
 
 <style module>
 .filesSidebarSubname {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.filesSidebarSubname__path {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.filesSidebarSubname__label {
+	color: var(--color-text-maxcontrast);
+	font-weight: bold;
+}
+
+.filesSidebarSubname__metadata {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;