From b579bb743ab2a8e4117958e3a0f2594eb10fea3c Mon Sep 17 00:00:00 2001
From: Valentin Boulanger <valentin.boulanger@protonmail.com>
Date: Fri, 14 Nov 2025 11:23:19 +0100
Subject: [PATCH] fixed scroll feature in the devices library

---
 frontend/src/components/General/Tab.svelte    |  9 +--
 .../src/components/Settings/DeviceCard.svelte | 45 +++++++------
 .../Settings/InputsOutputsContent.svelte      | 63 ++++++++++---------
 .../src/components/Settings/Settings.svelte   |  2 +-
 frontend/src/lang/en.json                     |  9 +--
 5 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/General/Tab.svelte b/frontend/src/components/General/Tab.svelte
index 7304396..26ffc44 100644
--- a/frontend/src/components/General/Tab.svelte
+++ b/frontend/src/components/General/Tab.svelte
@@ -15,15 +15,14 @@
 </script>
 
 <div class="tabContainer" style="color: {$colors.white};">
-    <div class="headerContainer"
-        style='background-color: {$colors.third};'>
+    <div class="headerContainer">
         {#each tabs as tab, index}
-            <RoundedButton text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab == index) ? true : false } on:click={() => setActiveTab(index)}/>
+            <RoundedButton style="margin: 0.1em;" text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab !== index) ? true : false } on:click={() => setActiveTab(index)}/>
         {/each}
     </div>
 
     <div class="bodyContainer"
-    style='background-color: {$colors.first}; max-width: {maxWidth}; max-height: {maxHeight};'>
+    style='background-color: {$colors.first}; max-width: {maxWidth};'>
     {#if tabs[activeTab]}
         <svelte:component this={tabs[activeTab].component} />
     {/if}
@@ -41,13 +40,11 @@
     }
     .headerContainer{
         padding: 0.1em;
-        margin-bottom: 1em;
         border-radius: 0.5em;
     }
     .bodyContainer{
         padding: 0.5em;
         background-color: red;
         border-radius: 0.5em;
-        overflow:auto;
     }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Settings/DeviceCard.svelte b/frontend/src/components/Settings/DeviceCard.svelte
index a9620ee..47c89e4 100644
--- a/frontend/src/components/Settings/DeviceCard.svelte
+++ b/frontend/src/components/Settings/DeviceCard.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <div class="card" on:dblclick={dblclick}>
-    <div class="{selected ? "selected" : "unselected"} {status == "PERIPHERAL_CONNECTING" ? "waiting" : ""}" on:mousedown={click} style="color: {(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white};">
+    <div class="{selected ? "selected" : "unselected"} {status == "PERIPHERAL_CONNECTING" ? "waiting" : ""}" on:mousedown={click} style="color: {$colors.white};">
         <div style="z-index: 1;">
             <p>{#if status == "PERIPHERAL_DISCONNECTED" }<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
             <h6 class="subtitle">{type} {location != '' ? "- " : ""}<i>{location}</i></h6>
@@ -52,7 +52,7 @@
         
         <div class="actions">
             <InfoButton on:click={add} color="{(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { addable ? 'flex' : 'none' }" icon='bxs-message-square-add' interactive message={$_("projectHardwareAddTooltip")}/>
-            <InfoButton on:click={remove} color="{(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
+            <InfoButton on:click={remove} color="{$colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
             <InfoButton style="transition: background-color 0.3s ease; margin: 0.2em; display: { (status == "PERIPHERAL_ACTIVATED" || status == "PERIPHERAL_DEACTIVATED")  ? 'flex' : 'none' }" background={ (signalizable && signalized) ? $colors.orange : (status == "PERIPHERAL_ACTIVATED") ? $colors.ok : (status == "PERIPHERAL_DEACTIVATED") ? $colors.nok : null} icon='bx-pulse' hide={!signalizable}/>
         </div>
     </div>
@@ -63,19 +63,33 @@
         background: linear-gradient(to bottom right, var(--second-color), var(--third-color));
     }
     .card{
-        position: relative;   
+        position: relative;
     }
     .selected {
-        background-color: var(--first-color);
+        background-color: var(--third-color);
+        position: relative;
         margin: 0.2em;
-        padding-left: 0.3em;
-        padding-bottom: 0.3em;
-        border-radius: 0.2em;
+        padding: 0.2em 0.3em 0.5em 0.5em;
+        border-radius: 0.5em;
         display: flex;
         justify-content: space-between;
         text-align: left;
         cursor: pointer;
+        overflow: hidden;
     }
+    .unselected{
+        background-color: var(--second-color);
+        position: relative;
+        margin: 0.2em;
+        padding: 0.2em 0.3em 0.5em 0.5em;
+        border-radius: 0.5em;
+        display: flex;
+        justify-content: space-between;
+        text-align: left;
+        cursor: pointer;
+        overflow: hidden;
+    }
+
     .subtitle{
         margin-bottom: 0.5em;
     }
@@ -94,7 +108,7 @@
     .waiting::before{
         content: '';
         position: absolute;
-        background: linear-gradient(var(--second-color), var(--first-color));
+        background: linear-gradient(var(--first-color), var(--second-color));
         width: 100%;
         height: 60%;
         animation: rotate 3s linear infinite;
@@ -108,21 +122,6 @@
         border-radius: 0.2em;
     }
 
-    .unselected{
-        background-color: var(--third-color);
-        background: fixed;
-        position: relative;
-        margin: 0.2em;
-        padding-left: 0.3em;
-        padding-bottom: 0.3em;
-        border-radius: 0.2em;
-        display: flex;
-        justify-content: space-between;
-        text-align: left;
-        cursor: pointer;
-        overflow: hidden;
-    }
-
     /* Définition de l'animation */
     @keyframes rotate {
         from {
diff --git a/frontend/src/components/Settings/InputsOutputsContent.svelte b/frontend/src/components/Settings/InputsOutputsContent.svelte
index 2da0fe1..f67b102 100644
--- a/frontend/src/components/Settings/InputsOutputsContent.svelte
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -1,9 +1,8 @@
 <script lang=ts>
     import DeviceCard from "./DeviceCard.svelte";
-    import Tab from "../General/Tab.svelte";
     import Input from "../General/Input.svelte";
     import { t, _ } from 'svelte-i18n'
-    import { generateToast, needProjectSave, peripherals } from "../../stores";
+    import { generateToast, needProjectSave, peripherals, colors } from "../../stores";
     import { get } from "svelte/store"
     import { UpdatePeripheralSettings, GetPeripheralSettings, RemovePeripheral, AddPeripheral } from "../../../wailsjs/go/main/App";
     import RoundedButton from "../General/RoundedButton.svelte";
@@ -79,22 +78,25 @@
 </script>
 
 <div class="hardware">
-    <div style="padding: 0.5em;">
-        <p style="margin-bottom: 1em;">{$_("projectHardwareAvailableLabel")}</p>
+    <div class="libraryPanel">
         <div class="availableHardware">
-            <p style="color: var(--first-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
-                {#each Object.entries($peripherals) as [serialNumber, peripheral]}
-                    {#if peripheral.isDetected}
-                        <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
-                            if(!peripheral.isSaved) 
-                                addPeripheral(peripheral) 
-                            }}
-                            status="PERIPHERAL_CONNECTED" title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
-                    {/if}
-                {/each}
-            <p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
-            <RoundedButton on:click={()=>addPeripheral({Name: "OS2L connection", ProtocolName: "OS2L", SerialNumber: ""})} text="Add an OS2L peripheral" icon="bx-plus-circle" tooltip="Configure an OS2L connection"/>
+            <p style="color: var(--white-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
         </div>
+        {#each Object.entries($peripherals) as [serialNumber, peripheral]}
+            {#if peripheral.isDetected}
+                <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
+                    if(!peripheral.isSaved) 
+                        addPeripheral(peripheral) 
+                    }}
+                    status="PERIPHERAL_CONNECTED" title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
+            {/if}
+        {/each}
+        <div class="availableHardware">
+            <p style="color: var(--white-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p> 
+        </div>
+        <DeviceCard on:add={() => addPeripheral({Name: "OS2L virtual device", ProtocolName: "OS2L", SerialNumber: ""})}
+            on:dblclick={() => addPeripheral({Name: "OS2L virtual device", ProtocolName: "OS2L", SerialNumber: ""})}
+            status="PERIPHERAL_CONNECTED" title={"OS2L virtual device"} type={"OS2L"} location={""} addable={true}/>
     </div>
 
     <div style="padding: 0.5em; flex:2; width:100%;">
@@ -111,7 +113,6 @@
                 <i>{$_("projectHardwareEmptyLabel")}</i>
             {/if}    
         </div>
-        <p style="margin-bottom: 1em;">{$_("projectHardwareSettingsLabel")} (<b>{selectedPeripheralSN == null ? $_("projectHardwareNoSelection") : selectedPeripheralSN}</b>)</p>
         <div class='flexSettings'>
             {#if Object.keys(selectedPeripheralSettings).length > 0}    
                 {#each Object.entries(selectedPeripheralSettings) as [settingName, settingValue]}
@@ -119,8 +120,6 @@
                         <Input on:blur={(event) => validate(settingName, event.detail.target.value)} label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
                     </div>
                 {/each}
-            {:else}              
-                <i>{$_("projectHardwareNoSettingLabel")}</i>
             {/if}   
         </div>
     </div>
@@ -149,19 +148,23 @@
         border-radius: 0.5em;
         padding: 0.2em;
         max-height: calc(100vh - 300px);
-        overflow-y: auto;
-        scrollbar-width: none;  /* Firefox */
-        -ms-overflow-style: none;  /* IE and Edge */
-        /* overflow: visible; */
+        margin-top: 0.5em;
+        margin-bottom: 0.5em; 
     }
-    .availableHardware::-webkit-scrollbar {
-        display: none;
-    }
-    .configuredHardware {
-        background-color: var(--second-color);
-        border-radius: 0.5em;
+
+    .libraryPanel {
         padding: 0.5em;
-        padding: 0.2em;
+        /* width: 13em; */
+        height: calc(100vh - 2*8px - 2*4px - 40px - 1em - 2*0.1em - 2*0.1em - 2*0.4em - 21.6px - 2*0.5em);
+        overflow: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+    .libraryPanel::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Edge */
+    }
+    
+    .configuredHardware {
         display: flex;
         flex-wrap: wrap;
     }
diff --git a/frontend/src/components/Settings/Settings.svelte b/frontend/src/components/Settings/Settings.svelte
index 9625ecb..a1fb30d 100644
--- a/frontend/src/components/Settings/Settings.svelte
+++ b/frontend/src/components/Settings/Settings.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <!-- Project tabcontrol -->
-<Tab { tabs } maxHeight='73vh'/>
+<Tab { tabs }/>
 
 <style>
 </style>
\ No newline at end of file
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index f185eb7..cebc1b4 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -34,16 +34,13 @@
   "projectHardwareShowLabel" : "My Show",
   "projectHardwareInputsLabel": "INPUTS",
   "projectHardwareOutputsLabel": "OUTPUTS",
-  "projectHardwareDeleteTooltip": "Delete this peripheral",
-  "projectHardwareAddTooltip": "Add this peripheral to project",
+  "projectHardwareDeleteTooltip": "Delete",
+  "projectHardwareAddTooltip": "Add to project",
   "projectHardwareNoSelection": "Empty",
-  "projectHardwareAvailableLabel": "Available peripherals",
-  "projectHardwareSavedLabel": "Project peripherals",
+  "projectHardwareSavedLabel": "Saved in project",
   "projectHardwareDetectedLabel": "Detected",
   "projectHardwareOthersLabel": "Others",
   "projectHardwareEmptyLabel": "No hardware saved for this project",
-  "projectHardwareSettingsLabel": "Peripheral settings",
-  "projectHardwareNoSettingLabel": "No setting can be displayed",
 
   "peripheralArrivalToast": "Peripheral inserted:",
   "peripheralRemovalToast": "Peripheral removed:",