From b77ee47306af833dd1d3b6e4ffefec6c75730595 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Tue, 3 Mar 2026 21:17:33 +0100
Subject: [PATCH]  flow item modified to match the style of tasks-list

---
 .../flows-list/flow-item/flow-item.html       | 111 +++++-------------
 .../shared/flows-list/flow-item/flow-item.ts  |  22 +---
 .../tasks-executions-list.html                |  14 +--
 3 files changed, 35 insertions(+), 112 deletions(-)

diff --git a/src/app/shared/flows-list/flow-item/flow-item.html b/src/app/shared/flows-list/flow-item/flow-item.html
index e5f1bfb..a979ba9 100644
--- a/src/app/shared/flows-list/flow-item/flow-item.html
+++ b/src/app/shared/flows-list/flow-item/flow-item.html
@@ -1,93 +1,40 @@
-<div class="group border
-         px-3 py-2 w-full
-         transition
-         hover:shadow-[0_0_12px_rgba(99,102,241,0.6)]
-         select-none"
+<div class="w-full text-left p-3 rounded-md border transition-all duration-150 select-none hover:-translate-y-0.5 hover:border-blue-300 hover:bg-blue-100 hover:shadow-md"
     [class.cursor-pointer]="flow().id !== openedFlowId()"
     [class.cursor-default]="flow().id === openedFlowId()"
-    [class.bg-indigo-50]="flow().id !== openedFlowId()"
-    [class.border-indigo-200]="flow().id !== openedFlowId()"
-    [class.bg-emerald-50]="flow().id === openedFlowId()"
-    [class.border-emerald-300]="flow().id === openedFlowId()"
-    [class.ring-1]="flow().id === openedFlowId()"
-    [class.ring-emerald-200]="flow().id === openedFlowId()"
+    [class.border-blue-300]="flow().id === openedFlowId()"
+    [class.bg-blue-50]="flow().id === openedFlowId()"
+    [class.border-slate-200]="flow().id !== openedFlowId()"
+    [class.bg-white]="flow().id !== openedFlowId()"
     (click)="flow().id !== openedFlowId() && open()">
 
-    <!-- Header -->
-    <div class="flex items-center justify-between text-sm ">
-        <div class="flex items-center gap-2 font-medium"
-            [class.text-indigo-700]="flow().id !== openedFlowId()"
-            [class.text-emerald-700]="flow().id === openedFlowId()">
-            <i class="bi" [ngClass]="{
-          'bi-globe': flow().visibility === 'PUBLIC',
-          'bi-lock-fill': flow().visibility === 'PRIVATE'
-        }" [class.text-indigo-500]="flow().visibility === 'PUBLIC'"
-                [class.text-gray-500]="flow().visibility === 'PRIVATE'">
-            </i>
-
-            {{ flow().name }}
+    <div class="flex items-start justify-between gap-2">
+        <div class="min-w-0">
+            <div class="text-sm font-medium text-slate-800 truncate">{{ flow().name }}</div>
+            <div class="text-xs text-slate-500 truncate">{{ flow().author }}</div>
         </div>
-
-        <button
-            type="button"
-            class="p-0 m-0 border-0 bg-transparent text-indigo-400 hover:text-indigo-600"
-            (click)="$event.stopPropagation(); toggleDetails()"
-            title="Details">
-            <i class="bi bi-chevron-down text-xs transition-transform duration-200" [class.rotate-180]="expanded()">
-            </i>
-        </button>
+        <span class="text-[10px] px-2 py-0.5 rounded-full border font-semibold"
+              [class.bg-indigo-100]="flow().visibility === 'PUBLIC'"
+              [class.text-indigo-700]="flow().visibility === 'PUBLIC'"
+              [class.border-indigo-200]="flow().visibility === 'PUBLIC'"
+              [class.bg-slate-100]="flow().visibility === 'PRIVATE'"
+              [class.text-slate-700]="flow().visibility === 'PRIVATE'"
+              [class.border-slate-200]="flow().visibility === 'PRIVATE'">
+            {{ flow().visibility }}
+        </span>
     </div>
 
-    <!-- Dettagli -->
-    <div class="overflow-hidden transition-all duration-300" [class.max-h-0]="!expanded()"
-        [class.max-h-36]="expanded()">
-
-        <div class="mt-2 pt-2 border-t border-indigo-200
-              text-xs text-gray-600
-              flex row items-center gap-1">
-
-            <!-- Author -->
-            <div class="flex items-baseline gap-2">
-                <span class="text-[11px] tracking-wide text-gray-400">
-                    Author:
-                </span>
-                <span class="font-small text-gray-700">
-                    {{ flow().author }}
-                </span>
-            </div>
-
-            <!-- Created -->
-            <div class="flex items-baseline gap-2">
-                <span class="text-[11px] tracking-wide text-gray-400">
-                    Created:
-                </span>
-                <span class="font-small text-gray-700">
-                    {{ flow().createdAt | date:'dd/MM/yyyy' }}
-                </span>
-            </div>
-
-
+    <div class="mt-2 text-[11px] text-slate-500 flex justify-between items-center gap-2" (click)="$event.stopPropagation()">
+        <span>{{ flow().createdAt | date:'dd/MM/yyyy' }}</span>
+        <div class="flex items-center gap-1.5 text-sm">
+            <button class="p-1 rounded enabled:hover:bg-blue-100 enabled:text-blue-600 disabled:text-blue-200" title="Clone"
+                (click)="clone()" [disabled]="this.flow().visibility!=='PRIVATE'">
+                <i class="bi bi-files"></i>
+            </button>
+            <button class="p-1 rounded enabled:hover:bg-red-100 enabled:text-red-600 disabled:text-red-200" title="Delete"
+                (click)="remove()" [disabled]="this.flow().visibility!=='PRIVATE'">
+                <i class="bi bi-trash"></i>
+            </button>
         </div>
-        <div class="w-full h-px bg-linear-to-r from-transparent via-indigo-200 to-transparent my-3"></div>
-
-            <!-- Actions -->
-            <div class="flex items-center gap-2 text-sm">
-                <button class="p-1 rounded enabled:hover:bg-indigo-100 enabled:text-indigo-600 disabled:text-indigo-200" title="Open"
-                [disabled]="this.flow().id == this.openedFlowId()"    
-                (click)="$event.stopPropagation(); open()">
-                    <i class="bi bi-box-arrow-in-right"></i>
-                </button>
-
-                <button class="p-1 rounded enabled:hover:bg-indigo-100 enabled:text-indigo-600 disabled:text-indigo-200" title="Clone"
-                    (click)="$event.stopPropagation(); clone()" [disabled]="this.flow().visibility!=='PRIVATE'">
-                    <i class="bi bi-files"></i>
-                </button>
-
-                <button class="p-1 rounded enabled:hover:bg-red-100 enabled:text-red-600 disabled:text-red-200" title="Delete"
-                    (click)="$event.stopPropagation(); remove()" [disabled]="this.flow().visibility!=='PRIVATE'">
-                    <i class="bi bi-trash"></i>
-                </button>
-            </div>
     </div>
 
 </div>
diff --git a/src/app/shared/flows-list/flow-item/flow-item.ts b/src/app/shared/flows-list/flow-item/flow-item.ts
index 60c901a..46878ba 100644
--- a/src/app/shared/flows-list/flow-item/flow-item.ts
+++ b/src/app/shared/flows-list/flow-item/flow-item.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, effect, inject, input, model, signal } from '@angular/core';
+import { Component, computed, inject, input, model } from '@angular/core';
 import { Flow } from '@models/flow';
 import { ConfirmDialogService } from '@services/dialogs/confirm-dialog';
 import { FlowsService } from '@services/flows/flows';
@@ -24,18 +24,6 @@ export class FlowItem {
 
   openedFlowId = computed(() => this.editorState.currentFlow()?.id);
 
-  expanded = signal(false);
-
-  constructor() {
-    effect(() => {
-      if (this.expanded()) {
-        if (this.detailOpenedId() !== this.flow().id) {
-          this.expanded.set(false);
-        }
-      }
-    });
-  }
-
   async open() {
     console.log('Opening flow:', this.flow());
     if (this.editorState.isDirty() && this.openedFlowId() !== this.flow().id) {
@@ -77,12 +65,4 @@ export class FlowItem {
     });
   }
 
-  toggleDetails() {
-    this.expanded.update(v => !v);
-    if (this.expanded()) {
-      this.detailOpenedId.set(this.flow().id);
-    } else {
-      this.detailOpenedId.set(null);
-    }
-  }
 }
diff --git a/src/app/shared/tasks-executions-list/tasks-executions-list.html b/src/app/shared/tasks-executions-list/tasks-executions-list.html
index fabd5e7..9db1b20 100644
--- a/src/app/shared/tasks-executions-list/tasks-executions-list.html
+++ b/src/app/shared/tasks-executions-list/tasks-executions-list.html
@@ -1,10 +1,6 @@
 <aside class="h-full bg-white border border-slate-200 rounded-md flex flex-col overflow-hidden">
-  <div class="px-4 py-3 border-b border-slate-200">
-    <h2 class="text-sm font-semibold text-slate-800">Task Executions</h2>
-    <p class="text-xs text-slate-500">Running and completed runs</p>
-  </div>
-
-  <div class="px-3 pt-2">
+  
+  <div class="px-3 pt-4">
     <div class="relative flex items-center">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
            class="absolute w-5 h-5 top-2.5 left-2.5 text-slate-600">
@@ -19,7 +15,7 @@
     </div>
   </div>
 
-  <div class="px-3 pt-2">
+  <div class="px-3 pt-4">
     <div class="btn-group w-full h-8" role="group">
       <button type="button" class="btn btn-sm w-full transition"
               [class.btn-primary]="filter() === 'all'"
@@ -40,7 +36,7 @@
     </div>
   </div>
 
-  <div class="px-3 py-2">
+  <div class="px-3 py-4">
     <app-ordering
       [orderFields]="orderFields"
       [orderView]="orderView"
@@ -55,7 +51,7 @@
       @for (execution of filteredExecutions(); track execution.id) {
       <button
         type="button"
-        class="w-full text-left p-3 rounded-md border transition-colors"
+        class="w-full text-left p-3 rounded-md border transition-all duration-150 hover:-translate-y-0.5 hover:border-blue-300 hover:bg-blue-100 hover:shadow-md"
         [class.border-blue-300]="execution.id === selectedExecutionId()"
         [class.bg-blue-50]="execution.id === selectedExecutionId()"
         [class.border-slate-200]="execution.id !== selectedExecutionId()"