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 1/5] 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 349a445df1..92e6a9cd5d 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;
+
+	&__text {
+		display: inline-block;
+		max-width: 100%;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+	}
 
-	.dot{
-		flex: 1 0 var(--dot-size);
-		height: var(--dot-size);
-		border-radius: 50%;
-		margin-right: 10px;
-		cursor: inherit;
+	&__icon {
+		display: none;
 	}
 
-	.signed{
-		background: #008000;
+	&--error {
+		background-color: var(--color-error);
+		color: var(--color-error-text);
 	}
 
-	.no-signers{
-		background: #ff0000;
+	&--draft {
+		background-color: #E0E0E0;
+		color: #424242;
 	}
 
-	.pending {
-		background: #d67335
+	&--available {
+		background-color: #FFF3CD;
+		color: #856404;
 	}
 
-	span{
-		font-size: 14px;
-		font-weight: normal;
-		text-align: center;
-		cursor: inherit;
+	&--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>

From a6d748e91e9e970254e35e414a9d7d607cbe0c80 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Thu, 11 Dec 2025 19:48:58 -0300
Subject: [PATCH 2/5] feat: adjust status column alignment and width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Center status column content
- Set column width to 2.5x row height
- Add mobile responsive width (0.8x row height for ≤768px)

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 src/views/FilesList/FilesListVirtual.vue | 39 ++++++++++++++----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index 8461de21db..1ad24b9906 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -437,25 +437,22 @@ export default {
 				.button-vue__text {
 					// Remove bold from default button styling
 					font-weight: normal;
-				}
-			}
-		}
-
-		.files-list__row-mtime,
-		.files-list__row-status {
-			color: var(--color-text-maxcontrast);
-		}
-		.files-list__row-status {
-			width: calc(var(--row-height) * 1.5);
-			// Right align content/text
-			justify-content: flex-end;
 		}
+	}
+}
 
-		.files-list__row-mtime {
-			width: calc(var(--row-height) * 2);
-		}
+	.files-list__row-mtime,
+	.files-list__row-status {
+		color: var(--color-text-maxcontrast);
+	}
+	.files-list__row-status {
+		width: calc(var(--row-height) * 2.5);
+		justify-content: center;
+	}
 
-		.files-list__row-column-custom {
+	.files-list__row-mtime {
+		width: calc(var(--row-height) * 2);
+	}		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}
 	}
@@ -469,6 +466,16 @@ export default {
 	}
 }
 
+@media screen and (max-width: 768px) {
+	.files-list__row-status {
+		width: calc(var(--row-height) * 0.8) !important;
+	}
+
+	:deep(.files-list__row-status) {
+		width: calc(var(--row-height) * 0.8) !important;
+	}
+}
+
 </style>
 
 <style lang="scss">

From affa4f987ddeaf682a13dd1146ff35d2f6e59c20 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Thu, 11 Dec 2025 19:49:11 -0300
Subject: [PATCH 3/5] feat: update status filter icon colors to match chips

- Use softer, more visible colors for status icons
- draft: #9E9E9E (medium gray)
- available/partial: #D4A843 (soft gold)
- signed: #4CAF50 (medium green)

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 src/helpers/fileStatus.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/helpers/fileStatus.js b/src/helpers/fileStatus.js
index 718d3e0207..34fd352db7 100644
--- a/src/helpers/fileStatus.js
+++ b/src/helpers/fileStatus.js
@@ -21,22 +21,22 @@ export const fileStatus = [
 	},
 	{
 		id: 0,
-		icon: colorize(svgFile, '#E0E0E0'),
+		icon: colorize(svgFile, '#9E9E9E'),
 		label: t('libresign', 'draft'),
 	},
 	{
 		id: 1,
-		icon: colorize(svgSignature, '#B2E0B2'),
+		icon: colorize(svgSignature, '#D4A843'),
 		label: t('libresign', 'available for signature'),
 	},
 	{
 		id: 2,
-		icon: colorize(svgFractionOneHalf, '#F0E68C'),
+		icon: colorize(svgFractionOneHalf, '#D4A843'),
 		label: t('libresign', 'partially signed'),
 	},
 	{
 		id: 3,
-		icon: colorize(svgSignatureFreehand, '#A0C4FF'),
+		icon: colorize(svgSignatureFreehand, '#4CAF50'),
 		label: t('libresign', 'signed'),
 	},
 	{

From e55950f0ecb5c77b753f3801850fe2acc0d5c81d Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Thu, 11 Dec 2025 19:49:31 -0300
Subject: [PATCH 4/5] feat: pass signers prop to FileEntryStatus

- Add signers prop binding to enable language-independent status detection
- Defaults to empty array if signers data is not available

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 src/views/FilesList/FileEntry/FileEntry.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index 3f52732135..105076931e 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -28,7 +28,8 @@
 		<td class="files-list__row-status"
 			@click="openDetailsIfAvailable">
 			<FileEntryStatus :status="source.status"
-				:status-text="source.statusText" />
+				:status-text="source.statusText"
+				:signers="source.signers || []" />
 		</td>
 
 		<!-- Mtime -->

From 1d8f1d5a1f5f7700a2935c278e990f3079329cf1 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Thu, 11 Dec 2025 19:49:41 -0300
Subject: [PATCH 5/5] feat: pass signers prop to FileEntryStatus in grid view

- Add signers prop binding for grid view consistency
- Enables language-independent status detection

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 src/views/FilesList/FileEntry/FileEntryGrid.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 4b30f85934..20291de6e2 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -21,7 +21,8 @@
 		<td class="files-list__row-status"
 			@click="openDetailsIfAvailable">
 			<FileEntryStatus :status="source.status"
-				:status-text="source.statusText" />
+				:status-text="source.statusText"
+				:signers="source.signers || []" />
 		</td>
 
 		<!-- Mtime -->