From 8694a04ea9b750d2aadc50d352142e2892b78219 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 10 Sep 2025 16:02:31 +0200
Subject: [PATCH] CSC link state to filters

---
 .../buttons/main-button/main-button.scss      |  1 +
 .../projects/sae-lib/colours/index/index.css  |  0
 .../projects/sae-lib/colours/index/index.html |  1 -
 .../sae-lib/colours/index/index.spec.ts       | 23 --------
 .../projects/sae-lib/colours/index/index.ts   | 11 ----
 .../projects/sae-lib/effects/index/index.css  |  0
 .../projects/sae-lib/effects/index/index.html |  1 -
 .../sae-lib/effects/index/index.spec.ts       | 23 --------
 .../projects/sae-lib/effects/index/index.ts   | 11 ----
 .../filters/filters-group/filters-group.html  | 14 ++++-
 .../filters/filters-group/filters-group.scss  |  2 -
 .../filters/filters-group/filters-group.ts    |  9 ++++
 .../projects/sae-lib/icons/index/index.css    |  0
 .../projects/sae-lib/icons/index/index.html   |  1 -
 .../sae-lib/icons/index/index.spec.ts         | 23 --------
 .../projects/sae-lib/icons/index/index.ts     | 11 ----
 .../sae-lib/inbox/dropdown/index/index.css    |  0
 .../sae-lib/inbox/dropdown/index/index.html   |  1 -
 .../inbox/dropdown/index/index.spec.ts        | 23 --------
 .../sae-lib/inbox/dropdown/index/index.ts     | 11 ----
 .../translate-texts/translate-texts.html      |  2 +
 .../translate-texts/translate-texts.scss      |  4 ++
 .../inbox/translate-texts/translate-texts.ts  |  3 +-
 .../inputs/multi-selector/multi-selector.html | 49 ++++++++++++-----
 .../inputs/multi-selector/multi-selector.scss | 33 ++++++++++--
 .../inputs/multi-selector/multi-selector.ts   | 52 +++++++++++++++++--
 sae-csc/src/app/pages/main/main.html          |  5 +-
 sae-csc/src/app/pages/main/main.scss          | 42 +++++++++------
 sae-csc/src/app/pages/main/main.ts            | 18 +++++++
 sae-csc/src/app/redux/initialState.ts         |  4 +-
 sae-csc/src/app/redux/reducers/index.ts       |  4 +-
 31 files changed, 191 insertions(+), 191 deletions(-)
 delete mode 100644 my-workspace/projects/sae-lib/colours/index/index.css
 delete mode 100644 my-workspace/projects/sae-lib/colours/index/index.html
 delete mode 100644 my-workspace/projects/sae-lib/colours/index/index.spec.ts
 delete mode 100644 my-workspace/projects/sae-lib/colours/index/index.ts
 delete mode 100644 my-workspace/projects/sae-lib/effects/index/index.css
 delete mode 100644 my-workspace/projects/sae-lib/effects/index/index.html
 delete mode 100644 my-workspace/projects/sae-lib/effects/index/index.spec.ts
 delete mode 100644 my-workspace/projects/sae-lib/effects/index/index.ts
 delete mode 100644 my-workspace/projects/sae-lib/icons/index/index.css
 delete mode 100644 my-workspace/projects/sae-lib/icons/index/index.html
 delete mode 100644 my-workspace/projects/sae-lib/icons/index/index.spec.ts
 delete mode 100644 my-workspace/projects/sae-lib/icons/index/index.ts
 delete mode 100644 my-workspace/projects/sae-lib/inbox/dropdown/index/index.css
 delete mode 100644 my-workspace/projects/sae-lib/inbox/dropdown/index/index.html
 delete mode 100644 my-workspace/projects/sae-lib/inbox/dropdown/index/index.spec.ts
 delete mode 100644 my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts

diff --git a/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss b/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss
index 123a6f1..95f8537 100644
--- a/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss
+++ b/my-workspace/projects/sae-lib/buttons/main-button/main-button.scss
@@ -8,6 +8,7 @@
   display: inline-block;
   font-family: Barlow;
 
+
   button {
     background: shadows.$primary-color;
     color: shadows.$neutral-white;
diff --git a/my-workspace/projects/sae-lib/colours/index/index.css b/my-workspace/projects/sae-lib/colours/index/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/my-workspace/projects/sae-lib/colours/index/index.html b/my-workspace/projects/sae-lib/colours/index/index.html
deleted file mode 100644
index f1b8608..0000000
--- a/my-workspace/projects/sae-lib/colours/index/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>index works!</p>
diff --git a/my-workspace/projects/sae-lib/colours/index/index.spec.ts b/my-workspace/projects/sae-lib/colours/index/index.spec.ts
deleted file mode 100644
index 515b434..0000000
--- a/my-workspace/projects/sae-lib/colours/index/index.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/my-workspace/projects/sae-lib/colours/index/index.ts b/my-workspace/projects/sae-lib/colours/index/index.ts
deleted file mode 100644
index 1d84570..0000000
--- a/my-workspace/projects/sae-lib/colours/index/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}
diff --git a/my-workspace/projects/sae-lib/effects/index/index.css b/my-workspace/projects/sae-lib/effects/index/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/my-workspace/projects/sae-lib/effects/index/index.html b/my-workspace/projects/sae-lib/effects/index/index.html
deleted file mode 100644
index f1b8608..0000000
--- a/my-workspace/projects/sae-lib/effects/index/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>index works!</p>
diff --git a/my-workspace/projects/sae-lib/effects/index/index.spec.ts b/my-workspace/projects/sae-lib/effects/index/index.spec.ts
deleted file mode 100644
index 515b434..0000000
--- a/my-workspace/projects/sae-lib/effects/index/index.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/my-workspace/projects/sae-lib/effects/index/index.ts b/my-workspace/projects/sae-lib/effects/index/index.ts
deleted file mode 100644
index 1d84570..0000000
--- a/my-workspace/projects/sae-lib/effects/index/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
index 359d8d3..ffa509a 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
@@ -1,7 +1,17 @@
 <div [ngClass]="{highlighted}" class="filter-group">
   <div class="selectors">
-    <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
-    <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
+    <sae-multi-selector
+      (availableChoicesChange)="onAvailableChoicesChange"
+      (selectedChoicesChange)="onSelectedChoicesChange"
+      [availableChoices]="appState.filters.engineType.availableChoices"
+      [label]="'Engine type'"
+      [selectedChoices]="appState.filters.engineType.selectedChoices"
+    ></sae-multi-selector>
+    <sae-multi-selector
+
+      [disabled]="true" [label]="'Findings'"
+      [selectedChoices]="[]"
+    ></sae-multi-selector>
     <sae-multi-selector [label]="'ATA'"></sae-multi-selector>
     <sae-multi-selector [label]="'Part number'"></sae-multi-selector>
     <sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
index ec4540f..c860439 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
@@ -17,10 +17,8 @@
     position: relative;
     right: 0;
     top: 0;
-
     cursor: pointer;
 
-
   }
 
   &:hover {
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
index 7ca88cd..198e68b 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
@@ -13,4 +13,13 @@ import {NgClass} from '@angular/common';
 })
 export class FiltersGroup {
   @Input() highlighted = false;
+  @Input() appState: any = {};
+ 
+  onSelectedChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
+
+  onAvailableChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
 }
diff --git a/my-workspace/projects/sae-lib/icons/index/index.css b/my-workspace/projects/sae-lib/icons/index/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/my-workspace/projects/sae-lib/icons/index/index.html b/my-workspace/projects/sae-lib/icons/index/index.html
deleted file mode 100644
index f1b8608..0000000
--- a/my-workspace/projects/sae-lib/icons/index/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>index works!</p>
diff --git a/my-workspace/projects/sae-lib/icons/index/index.spec.ts b/my-workspace/projects/sae-lib/icons/index/index.spec.ts
deleted file mode 100644
index 515b434..0000000
--- a/my-workspace/projects/sae-lib/icons/index/index.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/my-workspace/projects/sae-lib/icons/index/index.ts b/my-workspace/projects/sae-lib/icons/index/index.ts
deleted file mode 100644
index 1d84570..0000000
--- a/my-workspace/projects/sae-lib/icons/index/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}
diff --git a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.css b/my-workspace/projects/sae-lib/inbox/dropdown/index/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.html b/my-workspace/projects/sae-lib/inbox/dropdown/index/index.html
deleted file mode 100644
index f1b8608..0000000
--- a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>index works!</p>
diff --git a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.spec.ts b/my-workspace/projects/sae-lib/inbox/dropdown/index/index.spec.ts
deleted file mode 100644
index 515b434..0000000
--- a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts b/my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts
deleted file mode 100644
index 1d84570..0000000
--- a/my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}
diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html
index 1477e88..131b38c 100644
--- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html
+++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html
@@ -13,6 +13,8 @@
                   name="from_text"
                   placeholder=""
                   rows="10"></textarea>
+
+        <sae-main-button></sae-main-button>
         <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
           <i class="ri-upload-cloud-2-line"></i>
           <span class="label">
diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss
index 2f38b6a..f3367e4 100644
--- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss
+++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss
@@ -31,6 +31,10 @@
     font-weight: 400;
     line-height: 140%;
   }
+
+  .click-file-upload {
+    cursor: pointer;
+  }
 }
 
 #fromText {
diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts
index 9cd9781..8ffc539 100644
--- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts
+++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts
@@ -1,10 +1,11 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {Index} from '../index';
 
 @Component({
   selector: 'sae-translate-texts',
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, Index],
   templateUrl: './translate-texts.html',
   styleUrl: './translate-texts.scss'
 })
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index 3486b42..27df467 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
@@ -1,40 +1,61 @@
 <!--    sélecteurs-->
-<div class="input-box">
+<div [ngClass]="{
+'is-disabled': disabled
+}"
+     class="input-box"
+>
+  @if (selectedChoices?.length) {
+    <div class="selected-items-counter">
+      {{ selectedChoices.length }}
+    </div>
+  }
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
     <span class="d-none">
     {{ label }}
     </span>
   </div>
-  <input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
-         class="is-hidden" placeholder="{{label}}"
-         type="text">
-  @if (displayDropdown) {
+  <!--    (blur)="displayDropdown = false" -->
+  <input
+
+    (click)="onClickInput()" (focus)="displayDropdown = true"
+    class="is-hidden" placeholder="{{label}}"
+    type="text">
+  <div class="dropdown-button selector-button">
+    <!--          bouton-->
+    <i class="ri-arrow-down-s-line"></i>
+  </div>
+
+  @if (displayDropdown && availableChoices?.length) {
 
     <div class="dropdown">
-      <div class="dropdown-button selector-button">
-        <!--          bouton-->
-        <i class="ri-arrow-down-s-line"></i>
-      </div>
+
       <div class="dropdown-list">
         <!--      selected:-->
         <div class="selected-items">
 
           @for (sc of selectedChoices; track sc) {
-            <div class="dropdown-item">
+            <div class="dropdown-item"
+                 (click)="selectedChoicesChangeToggleItem(sc)"
+            >
 
               <i class="ri-checkbox-line"></i>
               {{ sc }}
             </div>
           }
         </div>
-        <hr>
+        @if (selectedChoices?.length && availableChoices?.length) {
+
+          <hr>
+        }
         <div class="available-items">
           <!--      available:-->
-          @for (c of choices; track c) {
-            <div class="dropdown-item">
+          @for (ac of availableChoices; track ac) {
+            <div class="dropdown-item"
+                 (click)="availableChoicesChangeToggleItem(ac)"
+            >
               <i class="ri-checkbox-blank-line"></i>
-              {{ c }}
+              {{ ac }}
             </div>
           }
         </div>
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
index 29461e3..590de50 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
@@ -17,7 +17,7 @@
       top: 10px;
     }
 
-    .disabled & {
+    &.is-disabled {
       color: #525668;
       fill: #525668;
     }
@@ -34,8 +34,20 @@
   }
 
   .selector-button {
-    top: -30px;
-    right: -177px;
+    top: -36px;
+    right: -165px;
+  }
+
+  .selected-items-counter {
+    background: blue;
+    color: white;
+    border-radius: 200px;
+    padding: 10px;
+    display: inline-block;
+    line-height: 10px;
+    position: relative;
+    top: 33px;
+    left: 136px;
   }
 
 
@@ -57,7 +69,7 @@
     font-size: var(--Font-Base, 14px);
 
 
-    .disabled & {
+    .is-disabled & {
       border-color: #525668;
     }
   }
@@ -68,6 +80,19 @@
     border-radius: 8px;
     position: relative;
     display: block;
+    z-index: 10;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    top: -28px;
+    border-left: 1px solid #8D91A4;
+    border-bottom: 1px solid #8D91A4;
+    border-right: 1px solid #8D91A4;
+
+    .dropdown-list {
+      max-height: 200px;
+      overflow-y: auto;
+    }
 
     .dropdown-item {
       padding: 4px;
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
index 801b5d7..9dbe994 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
@@ -1,15 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'sae-multi-selector',
-  imports: [],
+  imports: [
+    NgClass
+  ],
   templateUrl: './multi-selector.html',
   styleUrl: './multi-selector.scss'
 })
 export class MultiSelector {
+  @Input() disabled: boolean = false;
   @Input() label!: string;
-  @Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
-  @Input() selectedChoices: any = ['choix 4'];
-  displayDropdown = true;
+  // @Input() store: any;
+  // @Input() ActionTypes: any;
+  @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
+  @Input() selectedChoices: any = ['choix 4', 'choix 5'];
+  @Input() displayDropdown: boolean = false;
+  @Output() selectedChoicesChange = new EventEmitter<any>();
+  @Output() availableChoicesChange = new EventEmitter<any>();
 
+  constructor() {
+
+  }
+
+  selectedChoicesChangeToggleItem(choice: any) {
+    console.log('toggle selected choice ', choice, 'in filter ', this.label);
+    this.selectedChoicesChange.emit(choice);
+    // console.log(choice);
+    // this.store.dispatch({
+    //   type: this.ActionTypes.UPDATE_FILTER,
+    //   payload: {
+    //     filter: this.label,
+    //     selectedChoice: choice
+    //   }
+    // })
+  }
+
+  availableChoicesChangeToggleItem(choice: any) {
+    this.availableChoicesChange.emit(choice);
+    console.log('toggle available choice ', choice, 'in filter ', this.label);
+    // this.store.dispatch({
+    //     type: this.ActionTypes.UPDATE_FILTER,
+    //     payload: {
+    //       filter: this.label,
+    //       availableChoice: choice
+    //     }
+    //   }
+    // )
+  }
+
+  onClickInput() {
+    if (this.disabled) return;
+    this.displayDropdown = !this.displayDropdown
+  }
 }
diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html
index b9348fe..609fd90 100644
--- a/sae-csc/src/app/pages/main/main.html
+++ b/sae-csc/src/app/pages/main/main.html
@@ -27,7 +27,7 @@
       <sae-translate-texts></sae-translate-texts>
     </div>
     <!--  analyse de question-->
-    <div id="question_alaysis">
+    <div id="question_analysis">
       <h2 class="title">
         Question analysis
       </h2>
@@ -35,8 +35,7 @@
       <!--filters-->
       <!--      advanced filters-->
       <div class="filters-container">
-
-        <sae-filters-group></sae-filters-group>
+        <sae-filters-group (selectionchange)="onSelectedChoicesChange" [appState]="appState"></sae-filters-group>
       </div>
     </div>
   </main>
diff --git a/sae-csc/src/app/pages/main/main.scss b/sae-csc/src/app/pages/main/main.scss
index fd17653..0cb704d 100644
--- a/sae-csc/src/app/pages/main/main.scss
+++ b/sae-csc/src/app/pages/main/main.scss
@@ -1,21 +1,31 @@
-.magic-text {
-  color: #A86CFD;
-  font-family: Barlow;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+:host {
 
-  i {
-    font-size: 1.25em;
-    margin-left: 2px;
+  #question_analysis {
+    sae-bot-talks {
+      top: -50px;
+      position: relative;
+    }
   }
-}
 
-#translation_request {
-  .helper {
-    padding-left: 2.65vw;
-    padding-bottom: 16px;
+  .magic-text {
+    color: #A86CFD;
+    font-family: Barlow;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+
+    i {
+      font-size: 1.25em;
+      margin-left: 2px;
+    }
   }
-}
 
+  #translation_request {
+    .helper {
+      padding-left: 2.65vw;
+      padding-bottom: 16px;
+    }
+  }
+
+}
diff --git a/sae-csc/src/app/pages/main/main.ts b/sae-csc/src/app/pages/main/main.ts
index 6d04940..efe42b4 100644
--- a/sae-csc/src/app/pages/main/main.ts
+++ b/sae-csc/src/app/pages/main/main.ts
@@ -4,6 +4,8 @@ import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
 import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
 import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
+import {Store} from '@ngrx/store';
+import {StateInterface} from '../../redux/reducers';
 
 
 @Component({
@@ -20,4 +22,20 @@ import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
 })
 export class Main {
 
+  public appState: any = {};
+
+  constructor(private store: Store<StateInterface>) {
+    this.store.select(state => state.app).subscribe(app => {
+      this.appState = app;
+    });
+  }
+
+
+  onSelectedChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
+
+  onAvailableChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
 }
diff --git a/sae-csc/src/app/redux/initialState.ts b/sae-csc/src/app/redux/initialState.ts
index a02ca87..8feecc6 100644
--- a/sae-csc/src/app/redux/initialState.ts
+++ b/sae-csc/src/app/redux/initialState.ts
@@ -11,8 +11,8 @@ export const initialState: StateInterface = {
     toText: "",
     filters: {
       engineType: {
-        availableList: {},
-        selectedList: {}
+        availableList: ['choix 1'],
+        selectedList: ['choix 2']
       },
       findings: {
         availableList: {},
diff --git a/sae-csc/src/app/redux/reducers/index.ts b/sae-csc/src/app/redux/reducers/index.ts
index d1c57ee..a795839 100644
--- a/sae-csc/src/app/redux/reducers/index.ts
+++ b/sae-csc/src/app/redux/reducers/index.ts
@@ -66,8 +66,8 @@ export type Theme = 'light' | 'dark';
 export type Lang = 'fr_FR' | 'en_US';
 
 export type SelectFilterType = {
-  availableList: object;
-  selectedList: object;
+  availableList: any;
+  selectedList: any;
 }
 
 export type technicalManualType = {