From 62d792d890b2301e8aa08ae2cbfdb732d9513285 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Thu, 11 Dec 2025 19:48:49 -0300
Subject: [PATCH] feat: replace status dot with responsive chip component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace simple status dot with custom chip component
- Desktop: shows chip with text that breaks into multiple lines
- Mobile (≤768px): shows only colored icon
- Supports multiple status colors: error (red), draft (gray), available/partial (yellow), signed (green)

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 .../FilesList/FileEntry/FileEntryStatus.vue   | 131 +++++++++++++-----
 1 file changed, 97 insertions(+), 34 deletions(-)

diff --git a/src/views/FilesList/FileEntry/FileEntryStatus.vue b/src/views/FilesList/FileEntry/FileEntryStatus.vue
index 349a445df..92e6a9cd5 100644
--- a/src/views/FilesList/FileEntry/FileEntryStatus.vue
+++ b/src/views/FilesList/FileEntry/FileEntryStatus.vue
@@ -3,15 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="enDot">
-		<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
-			:title="statusText !== 'none' ? statusText : ''" />
+	<div v-if="statusText !== 'none'"
+		class="status-chip"
+		:class="'status-chip--' + statusToVariant(status)"
+		:title="statusText">
+		<div class="status-chip__text">{{ statusText }}</div>
+		<NcIconSvgWrapper class="status-chip__icon" :svg="statusIcon" :size="20" />
 	</div>
 </template>
 
 <script>
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import { fileStatus } from '../../../helpers/fileStatus.js'
+
 export default {
 	name: 'FileEntryStatus',
+	components: {
+		NcIconSvgWrapper,
+	},
 	props: {
 		statusText: {
 			type: String,
@@ -23,19 +32,32 @@ export default {
 			required: true,
 			default: 0,
 		},
+		signers: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	computed: {
+		statusIcon() {
+			const statusInfo = fileStatus.find(item => item.id === this.status)
+			return statusInfo?.icon || ''
+		},
 	},
 	methods: {
-		statusToClass(status) {
+		statusToVariant(status) {
+			// Status 0 can be "no signers" (error/red) or "draft" (gray)
+			if (status === 0) {
+				return this.signers.length === 0 ? 'error' : 'draft'
+			}
 			switch (Number(status)) {
-			case 0:
-				return 'no-signers'
 			case 1:
+				return 'available'
 			case 2:
-				return 'pending'
+				return 'partial'
 			case 3:
 				return 'signed'
 			default:
-				return ''
+				return 'secondary'
 			}
 		},
 	},
@@ -43,43 +65,84 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.enDot{
-	--dot-size: 10px;
+.status-chip {
+	--chip-size: 24px;
+	--chip-radius: 12px;
 
-	display: flex;
-	flex-direction: row;
-	align-content: center;
-	margin: 5px;
+	display: inline-block;
+	min-height: var(--chip-size);
 	max-width: 100%;
-	align-items: center;
-	justify-content: center;
-	cursor: inherit;
+	padding: 4px 12px;
+	border-radius: var(--chip-radius);
+	line-height: 1.3;
+	text-align: center;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	hyphens: auto;
+	vertical-align: middle;
 
-	.dot{
-		flex: 1 0 var(--dot-size);
-		height: var(--dot-size);
-		border-radius: 50%;
-		margin-right: 10px;
-		cursor: inherit;
+	&__text {
+		display: inline-block;
+		max-width: 100%;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
 	}
 
-	.signed{
-		background: #008000;
+	&__icon {
+		display: none;
 	}
 
-	.no-signers{
-		background: #ff0000;
+	&--error {
+		background-color: var(--color-error);
+		color: var(--color-error-text);
 	}
 
-	.pending {
-		background: #d67335
+	&--draft {
+		background-color: #E0E0E0;
+		color: #424242;
 	}
 
-	span{
-		font-size: 14px;
-		font-weight: normal;
-		text-align: center;
-		cursor: inherit;
+	&--available {
+		background-color: #FFF3CD;
+		color: #856404;
+	}
+
+	&--partial {
+		background-color: #FFF3CD;
+		color: #856404;
+	}
+
+	&--signed {
+		background-color: #D4EDDA;
+		color: #155724;
+	}
+
+	&--secondary {
+		background-color: var(--color-primary-element-light);
+		color: var(--color-primary-element-light-text);
+	}
+
+	// Mobile: show only icon
+	@media (max-width: 768px) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--chip-size);
+		max-width: var(--chip-size);
+		width: var(--chip-size);
+		height: var(--chip-size);
+		padding: 0;
+		background-color: transparent !important;
+
+		&__text {
+			display: none;
+		}
+
+		&__icon {
+			display: block;
+		}
 	}
 }
 </style>