very basic improvements over article home page

web/admin-gui/src/assets/base.css

@@ -66,7 +66,9 @@ input,
 label,
 button,
 span,
-li {
+li,
+td,
+th {
 	font-family: 'Hind', sans-serif;
 	color: var(--neutral-dark);
 }
@@ -100,7 +102,7 @@ li {
 	border-radius: var(--radius);
 }
 
-.label-input .tags {
+.tags {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
@@ -109,14 +111,14 @@ li {
 	padding: 8px;
 }
 
-.label-input .tags li {
+.tags li {
 	background-color: var(--neutral-verylight);
 	border-radius: var(--radius);
 
 	padding: 4px 16px;
 }
 
-.label-input .tags li::marker {
+.tags li::marker {
 	content: '';
 }
 

web/admin-gui/src/views/Articles.vue

@@ -19,17 +19,25 @@ onMounted(async () => {
 				<th>Date création</th>
 				<th>Tags</th>
 				<th>Statut</th>
+				<th>Actions</th>
 			</thead>
 			<tbody>
 				<tr v-for="article in articles">
 					<td>{{ article.title }}</td>
 					<td>{{ new Date(article.date).toLocaleDateString('fr-FR') }}</td>
-					<td>{{ article.tags }}</td>
-					<td>{{`${article.online ? 'En ligne' : 'Hors ligne'}`}}</td>
-					<RouterLink :to="`articles/edit/${article.titleID}`">
-						Éditer
-					</RouterLink>
-					<button>Supprimer</button>
+					<td>
+						<ul class="tags">
+							<li v-for="tag in article.tags">{{ tag }}</li>
+						</ul>
+					</td>
+					<td class="status">{{`${article.online ? '🟢' : '🔴'}`}}</td>
+					<td>
+						<div class="action-buttons">
+							<RouterLink class="button-secondary" :to="`articles/edit/${article.titleID}`">✏️
+							</RouterLink>
+							<button class="button-secondary">❌</button>
+						</div>
+					</td>
 				</tr>
 			</tbody>
 		</table>
@@ -44,4 +52,27 @@ main {
 main>a {
 	width: fit-content;
 }
+
+main table {
+	width: 100%;
+
+	border-collapse: collapse;
+}
+
+main table td {
+	padding: 8px;
+}
+
+.action-buttons {
+	margin: auto;
+	width: fit-content;
+}
+
+.action-buttons>* {
+	margin: 0 6px;
+}
+
+.status {
+	text-align: center;
+}
 </style>