From 60ab17bb26ceab70c6171b864ae7ff7355ba22f2 Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Thu, 23 Oct 2025 21:17:31 +0200
Subject: [PATCH] Simplify process display to simple text messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Motivations :**
- User wants simple text messages, one per line, not complex UI
- Simplify the process display to basic text format

**Modifications :**
- Changed from complex HTML cards to simple text messages
- Each process displayed as one line of text with basic info
- Messages joined with newlines and displayed in monospace font
- Removed complex styling and containers

**Pages affectées :**
- src/pages/home/home.ts
---
 src/pages/home/home.ts | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index 2ada4b5..66efe56 100755
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -590,7 +590,7 @@ async function handleMainPairing(): Promise<void> {
 
   } catch (error) {
     console.error('Pairing failed:', error);
-    
+
     if (mainStatus) {
       mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>';
     }
@@ -602,28 +602,27 @@ async function displayExistingProcesses(): Promise<void> {
   try {
     const service = await Services.getInstance();
     const processes = await service.getProcesses();
-    
+
     const container = getCorrectDOM('login-4nk-component') as HTMLElement;
     const mainStatus = container.querySelector('#main-status') as HTMLElement;
-    
+
     if (!mainStatus) {
       console.warn('Main status element not found');
       return;
     }
-    
+
     const processCount = Object.keys(processes).length;
     console.log(`📊 Found ${processCount} existing processes`);
-    
+
     if (processCount === 0) {
       if (mainStatus) {
         mainStatus.innerHTML = '<span style="color: var(--info-color)">📋 No existing processes found</span>';
       }
       return;
     }
-    
-    // Create a list of processes to display
-    let processesHtml = `<div style="text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; background: #f8f9fa;">
-      <h4 style="margin: 0 0 10px 0; color: var(--primary-color);">📋 Existing Processes (${processCount})</h4>`;
+
+    // Create simple text messages for each process
+    let messages = [];
     
     for (const [processId, process] of Object.entries(processes)) {
       const processInfo = {
@@ -633,21 +632,15 @@ async function displayExistingProcesses(): Promise<void> {
         lastUpdate: process.last_update || 'Unknown'
       };
       
-      processesHtml += `
-        <div style="margin: 8px 0; padding: 8px; background: white; border-radius: 4px; border-left: 3px solid var(--primary-color);">
-          <strong>Process:</strong> ${processInfo.id}<br>
-          <small style="color: #666;">
-            States: ${processInfo.states} | Members: ${processInfo.members} | Updated: ${processInfo.lastUpdate}
-          </small>
-        </div>`;
+      messages.push(`📋 Process ${processInfo.id} - States: ${processInfo.states}, Members: ${processInfo.members}, Updated: ${processInfo.lastUpdate}`);
     }
     
-    processesHtml += '</div>';
+    const messagesText = messages.join('\n');
     
     if (mainStatus) {
-      mainStatus.innerHTML = processesHtml;
+      mainStatus.innerHTML = `<pre style="white-space: pre-wrap; font-family: monospace; font-size: 12px; text-align: left;">${messagesText}</pre>`;
     }
-    
+
   } catch (error) {
     console.error('❌ Error displaying processes:', error);
     const container = getCorrectDOM('login-4nk-component') as HTMLElement;