Refactor mode table UI and update logic

- Enhanced table layout and styling for modes display (CSS and JSX)
- Refactored vote/download count update logic for clarity and reusability
- Updated Archie mode description for improved clarity and detail

Author: spoons-and-mirrors

packages/openmodes/modes/archie/metadata.json

@@ -1,5 +1,5 @@
 {
-  "author": "spoon",
-  "description": "This mode is made for code review and stuff",
-  "date": "2025-07-20"
+	"author": "spoon",
+	"description": "Archie is a mode for architectural guidance, enforcing system-wide principles, maintainability, and risk mitigation in modern web applications. It provides step-by-step, machine-readable implementation plans and challenges technical debt, acting as a lead software architect for the codebase.",
+	"date": "2025-07-20"
 }

packages/openmodes/src/index.css

@@ -186,17 +186,65 @@ header {
 	}
 }
 
-table {
-	border-collapse: separate;
-	border-spacing: 0;
-	font-size: 0.875rem;
+table.table-modes {
 	width: 100%;
+	border-collapse: collapse;
+	table-layout: fixed;
+	font-size: 0.875rem;
 	margin-top: var(--header-height);
-	max-width: 1200px;
+	max-width: 1280px;
 	margin-left: auto;
 	margin-right: auto;
 }
 
+.table-modes th,
+.table-modes td {
+	padding: 0.75rem;
+	text-align: left;
+	border-bottom: 1px solid var(--color-border);
+}
+
+/* Left block: Name and Author */
+.table-modes th.name,
+.table-modes td.name {
+	width: 120px;
+}
+
+.table-modes th.author,
+.table-modes td.author {
+	width: 120px;
+}
+
+/* Center: Description takes remaining space */
+.table-modes th.description,
+.table-modes td.description {
+	width: auto;
+	max-width: 300px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding-right: 2.5rem;
+}
+
+/* Right block: Votes, Downloads, Updated */
+.table-modes th.votes,
+.table-modes td.votes {
+	width: 100px;
+	text-align: left;
+}
+
+.table-modes th.downloads,
+.table-modes td.downloads {
+	width: 130px;
+	text-align: left;
+}
+
+.table-modes th.updated,
+.table-modes td.updated {
+	width: 120px;
+	text-align: left;
+}
+
 table thead th {
 	position: sticky;
 	top: var(--header-height);
@@ -254,12 +302,6 @@ tbody tr {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-
-	.votes {
-		font-weight: 500;
-		color: var(--color-text);
-		font-family: var(--font-mono);
-	}
 }
 
 dialog::backdrop {

packages/openmodes/src/index.ts

@@ -385,8 +385,7 @@ async function vote(direction: 'up' | 'down') {
 
 			if (call === apiCalls[apiCalls.length - 1]) {
 				const result = await response.json();
-				updateVoteCount(result.newVoteCount, modeId);
-			}
+					updateCountUI('votes', result.newVoteCount, modeId);			}
 		}
 	} catch (error) {
 		console.error('Failed to vote:', error);
@@ -437,15 +436,18 @@ function setButtonsDisabled(disabled: boolean) {
 	}
 }
 
-function updateVoteCount(newCount: number, modeId: string) {
-	currentMode.votes = newCount;
-	DOMElements.voteCountEl.textContent = newCount.toString();
-
+function updateCountUI(type: 'votes' | 'downloads', newCount: number, modeId: string) {
+	if (!currentMode) return;
+	currentMode[type] = newCount;
+	const modalCountEl = type === 'votes' ? DOMElements.voteCountEl : DOMElements.downloadCountEl;
+	modalCountEl.textContent = newCount.toString();
 	const tableRow = document.querySelector(`tr[data-mode-id="${modeId}"]`);
-	const votesCell = tableRow?.querySelector('.votes');
-	if (votesCell) votesCell.textContent = newCount.toString();
+	const cellClass = type;
+	const cell = tableRow?.querySelector(`.${cellClass}`);
+	if (cell) cell.textContent = newCount.toString();
 }
 
+
 async function downloadMode() {
 	if (!currentMode) return;
 
@@ -490,6 +492,8 @@ function downloadFile(blob: Blob, filename: string) {
 	URL.revokeObjectURL(url);
 }
 
+
+
 async function updateDownloadCount(modeId: string) {
 	try {
 		const countResponse = await fetch('/api/download', {
@@ -500,9 +504,7 @@ async function updateDownloadCount(modeId: string) {
 
 		if (countResponse.ok) {
 			const result = await countResponse.json();
-			currentMode.downloads = result.newDownloadCount;
-			DOMElements.downloadCountEl.textContent =
-				result.newDownloadCount.toString();
+			updateCountUI('downloads', result.newDownloadCount, modeId);
 			UserDataManager.setDownloadStatus(modeId);
 			DOMElements.downloadBtn.classList.add('downloaded');
 		}

packages/openmodes/src/render.tsx

@@ -286,22 +286,25 @@ export function getRenderWithCurrentVotes() {
 					<button id='help'>How to use</button>
 				</div>
 			</header>
-			<table>
+			<table class='table-modes'>
 				<thead>
 					<tr>
-						<th class='sortable' data-type='text'>
+						<th class='name sortable' data-type='text'>
 							Name <span class='sort-indicator'></span>
 						</th>
-						<th class='sortable' data-type='text'>
+						<th class='author sortable' data-type='text'>
 							Author <span class='sort-indicator'></span>
 						</th>
-						<th class='sortable' data-type='text'>
+						<th class='description sortable' data-type='text'>
 							Description <span class='sort-indicator'></span>
 						</th>
-						<th class='sortable' data-type='number'>
+						<th class='votes sortable' data-type='number'>
 							Votes <span class='sort-indicator'></span>
 						</th>
-						<th class='sortable' data-type='text'>
+						<th class='downloads sortable' data-type='number'>
+							Downloads <span class='sort-indicator'></span>
+						</th>
+						<th class='updated sortable' data-type='text'>
 							Updated <span class='sort-indicator'></span>
 						</th>
 					</tr>
@@ -316,11 +319,12 @@ export function getRenderWithCurrentVotes() {
 								data-mode-id={modeId}
 								onclick='openModeModal(this)'
 							>
-								<td class='mode-name'>{mode.name}</td>
-								<td>{mode.author}</td>
+								<td class='name mode-name'>{mode.name}</td>
+								<td class='author'>{mode.author}</td>
 								<td class='description'>{mode.description}</td>
 								<td class='votes'>{mode.votes}</td>
-								<td>{mode.updated_at}</td>
+								<td class='downloads'>{mode.downloads}</td>
+								<td class='updated'>{mode.updated_at}</td>
 							</tr>
 						))}
 				</tbody>