added the project buttons and tab control

frontend/src/components/RoundIconButton.svelte

@@ -101,6 +101,7 @@
         display: inline-block;
         margin: 0;
         border:none;
+        cursor: pointer;
     }
     button:hover{
         box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;

frontend/src/components/RoundedButton.svelte

@@ -0,0 +1,61 @@
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../stores.js';
+    import Tooltip from './Tooltip.svelte';
+
+    export let text = 'Default button';
+    export let icon = ''
+    export let tooltip = "Default tooltip"
+    export let active = false;
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+
+        // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick() {
+        dispatch('click');
+    }
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
+<button
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        style='color: {whiteColor}; background-color: { active ? secondColor : thirdColor }; border:none;'><i class='bx { icon}'></i> { text }</button>
+<style>
+    button{
+        cursor: pointer;
+        display: inline-block;
+        border-radius: 0.5em;
+        margin: 0;
+    }
+    button:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+</style>

frontend/src/components/Settings.svelte

@@ -1 +1,23 @@
-<h1>Project settings</h1>
+<script lang=ts>
+    import RoundedButton from "./RoundedButton.svelte";
+    import Clock from "./Clock.svelte";
+    import Tab from "./Tab.svelte";
+    import { _ } from 'svelte-i18n'
+
+    const tabs = [
+        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: RoundedButton },
+        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: Clock },
+    ];
+
+</script>
+
+<!-- Project buttons -->
+<RoundedButton text={$_("newProjectString")} icon='bxs-plus-square' tooltip={$_("newProjectTooltip")}/>
+<RoundedButton text={$_("openProjectString")} icon='bx-folder-open' tooltip={$_("openProjectTooltip")}/>
+
+<!-- Project tabcontrol -->
+<Tab { tabs } />
+
+<style>
+
+</style>

frontend/src/components/Tab.svelte

@@ -0,0 +1,70 @@
+<script lang=ts>
+    import RoundedButton from "./RoundedButton.svelte";
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../stores.js';
+
+    export let tabs = [];
+
+    let activeTab = 0;
+
+    function setActiveTab(index) {
+        activeTab = index;
+    }
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
+    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
+    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
+    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
+    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
+    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+</script>
+
+<div class="tabContainer" style="color: {whiteColor};">
+    <div class="headerContainer"
+        style='background-color: {thirdColor};'>
+        {#each tabs as tab, index}
+            <RoundedButton 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: {thirdColor};'>
+    {#if tabs[activeTab]}
+        <svelte:component this={tabs[activeTab].component} />
+    {/if}
+    </div>
+</div>
+
+<style>
+    .headerContainer{
+        cursor: pointer;
+        margin:0;
+        border-radius: 0.5em;
+    }
+    .tabContainer{
+        margin-top: 1em;
+        color: white;
+    }
+    .headerContainer{
+        padding: 0.1em;
+        margin-bottom: 1em;
+        border-radius: 0.5em;
+    }
+    .bodyContainer{
+        background-color: red;
+        border-radius: 0.5em;
+    }
+</style>

frontend/src/components/Tooltip.svelte

@@ -39,6 +39,6 @@
 
     p{
         margin:5px;
-        font-size: 10px;
+        font-size: 13px;
     }
 </style>

frontend/src/lang/en.json

@@ -6,5 +6,14 @@
   "showMenuTooltip": "Show mapping",
   "consoleMenuTooltip": "General console",
   "stageRenderingToggleTooltip": "Show/hide the rendering view",
-  "showActivationToggleTooltip": "Activate/Deactivate the play mode"
+  "showActivationToggleTooltip": "Activate/Deactivate the play mode",
+  
+  "newProjectString": "New",
+  "openProjectString": "Open",
+  "newProjectTooltip": "Create a new project",
+  "openProjectTooltip": "Open an existing project",
+  "projectPropertiesTab": "Project properties",
+  "projectPropertiesTooltip": "The project properties",
+  "projectInputOutputTab": "Inputs & outputs",
+  "projectInputOutputTooltip": "The input/output hardware definition"
 }