fix(ui): filter panel state, chat/search mobile layout, header & nav polish

e2e/search.spec.ts

@@ -38,7 +38,9 @@ test.describe('search', () => {
 
     test('should select a source', async ({ page }) => {
       await page.getByText('Fake-Collection').click();
-      await expect(page.getByText('fake collection x')).toBeVisible();
+      // selected pill + its remove (×) button, labelled "Effacer"
+      await expect(page.getByText('fake collection')).toBeVisible();
+      await expect(page.getByRole('button', { name: 'Effacer', exact: true })).toBeVisible();
       await expect(page.getByLabel('fake-collection').locator('span')).toBeChecked();
     });
   });

public/terms_en.md

@@ -1,4 +1,4 @@
-## **Privacy Policy – WeLearn**
+## **WeLearn Privacy Policy**
 
 ### **1\. Who are we?**
 

public/terms_fr.md

@@ -1,4 +1,4 @@
-## **Politique de confidentialité – WeLearn**
+## **Politique de confidentialité de WeLearn**
 
 ### **1\. Qui sommes-nous ?**
 

src/App.vue

@@ -60,5 +60,7 @@ onMounted(async () => {
 .fullscreen {
   width: 100vw;
   height: 100vh;
+  /* dvh = height actually visible on phones (address bar shown); 100vh is taller there and lets the page scroll the nav away */
+  height: 100dvh;
 }
 </style>

src/assets/base.css

@@ -144,6 +144,7 @@ tbody {
 }
 body {
   height: 100vh;
+  height: 100dvh;
   color: var(--neutral-100);
   background: var(--neutral-0);
 

src/components/AppHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <router-link class="app-header-link" to="/">
     <div class="app-header">
-      <img alt="App large logo" class="logo" src="@/assets/logo.png" />
+      <!-- both loaded up front and toggled by CSS: a <picture> swap lags behind the size change and flickers -->
+      <img alt="App large logo" class="logo logo-full" src="@/assets/logo.png" />
+      <img alt="App large logo" class="logo logo-symbol" src="@/assets/logo-symbol.png" />
 
       <span class="is-title has-text-weight-semibold has-text-success ml-1">Beta</span>
     </div>
@@ -10,11 +12,9 @@
 
 <style scoped>
 .app-header {
-  margin: 1rem 0 1em 1rem;
+  margin: 1rem 0 0 1rem;
   z-index: 1;
   display: flex;
-  margin-left: 2%;
-  margin-bottom: 0rem;
 }
 
 .app-header-link {
@@ -24,15 +24,38 @@
 .logo {
   height: 100%;
   width: auto;
-  max-height: clamp(24px, 5vw, 3.5em);
+  max-height: 3.5em;
+}
+.logo-symbol {
+  display: none;
 }
 
+/* 1330px = where full logo + labelled nav stop fitting (measured ~1280px in FR); below it the logo is
+   swapped for the symbol, nav labels become tooltips (BaseNavItem) and the nav loses its top space (NavComponent).
+   Keep the three breakpoints in sync */
 @media (max-width: 1330px) {
+  /* bottom-align with the nav: the 2.5rem logo's centre then sits 1.25rem up, same as the nav icons'
+     (1.5rem icon + 0.5rem padding under it), so they stay level whatever the nav's top padding */
   .app-header-link {
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+    align-self: flex-end;
+  }
+  .app-header {
+    margin: 0 0 0 1rem;
+  }
+  .logo {
+    height: 2.5rem;
+    max-height: none;
+  }
+  .logo-full {
+    display: none;
+  }
+  .logo-symbol {
+    display: block;
+  }
+  .app-header > span {
     display: none;
-    & > * {
-      display: none;
-    }
   }
 }
 </style>

src/components/AppLayout.vue

@@ -1,39 +1,10 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const content = ref();
-
-const manageNavBarAnimations = () => {
-  if (document?.defaultView?.innerWidth && document.defaultView.innerWidth > 992) return;
-
-  const appHeaderName = document.getElementsByClassName('name-only')[0] as HTMLElement;
-  const appHeader = document.getElementsByClassName('app-header')[0] as HTMLElement;
-
-  const header = document.getElementsByClassName('appLayout')[0] as HTMLElement;
-
-  const scrollTop = content.value.scrollTop;
-
-  if (!header) return;
-
-  if (scrollTop > 0) {
-    if (!appHeaderName || !appHeader) return;
-    appHeaderName.style.display = 'flex';
-    appHeader.style.display = 'none';
-    header.style.gridTemplateRows = '3rem auto';
-  } else {
-    appHeaderName.style.display = 'none';
-    appHeader.style.display = 'flex';
-    header.style.gridTemplateRows = '6.5em auto';
-  }
-};
-</script>
 <template>
   <div class="appLayout">
     <div class="header">
       <slot name="header"></slot>
       <slot name="sidebar"> </slot>
     </div>
-    <div class="main" ref="content" @scroll="manageNavBarAnimations"><slot name="main"></slot></div>
+    <div class="main"><slot name="main"></slot></div>
     <div class="wl-footer">
       <slot name="footer"></slot>
     </div>
@@ -60,6 +31,7 @@ const manageNavBarAnimations = () => {
   width: 100%;
   height: 100%;
   overflow: auto;
+  overscroll-behavior: contain;
   scroll-behavior: smooth;
 }
 

src/components/ChatArea.vue

@@ -71,13 +71,17 @@ const handleOnWheel = () => {
       </div>
       <slot name="queues"></slot>
     </div>
-  </div>
-  <div
-    class="scroll-arrow"
-    :class="displayArrow ? 'visible' : 'hidden'"
-    @click="() => scrollToBottom(true)"
-  >
-    <ChevronDownVue />
+    <!-- zero-height sticky anchor: the button floats at the bottom of the scroller without taking layout space -->
+    <div class="scroll-arrow-anchor">
+      <button
+        v-show="displayArrow"
+        class="scroll-arrow"
+        :aria-label="$t('goToBottom')"
+        @click="() => scrollToBottom(true)"
+      >
+        <ChevronDownVue />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -107,31 +111,36 @@ const handleOnWheel = () => {
   margin-top: auto;
 }
 
-.scroll-arrow {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  z-index: 1;
-
-  margin: 1rem;
+.scroll-arrow-anchor {
+  position: sticky;
+  bottom: 0.75rem;
+  height: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-  opacity: 0;
 }
 
-.visible {
-  opacity: 1;
+.scroll-arrow {
+  all: unset;
+  box-sizing: border-box;
+  transform: translateY(-100%);
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0.4rem;
+  border-radius: 50%;
+  border: 1px solid var(--neutral-20);
+  background-color: var(--neutral-0);
+  color: var(--neutral-80);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
   cursor: pointer;
-  transition: opacity 0.1s ease-in-out;
-}
-.hidden {
-  opacity: 0;
-  cursor: default;
-  transition: opacity 0.3s ease-in-out;
-  width: 0;
-  height: 0;
-  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    background-color: var(--neutral-10);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+  }
 }
 
 .empty-chat {
@@ -140,41 +149,4 @@ const handleOnWheel = () => {
   height: 50%;
   align-items: center;
 }
-
-@media (min-width: 768px) {
-  .bottom-wrapper {
-    width: 100%;
-    padding-bottom: 1rem;
-  }
-  .scroll-arrow {
-    all: unset;
-    position: absolute;
-    bottom: 10%;
-    right: 50%;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    border: 1px solid;
-    padding: 4px;
-    color: var(--neutral-80);
-    background-color: rgba(255, 255, 255, 0.5);
-
-    margin: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-  }
-
-  .visible {
-    opacity: 1;
-    cursor: pointer;
-    transition: opacity 0.1s ease-in-out;
-  }
-  .hidden {
-    opacity: 0;
-    cursor: default;
-    transition: opacity 0.3s ease-in-out;
-  }
-}
 </style>

src/components/ChatBuble.vue

@@ -85,13 +85,14 @@ const copyMessage = (msg: string) => {
   color: var(--neutral-80);
   padding: 1.25rem 1rem;
   gap: 1rem;
-  text-align: justify;
+  text-align: left;
 }
 .chat-bubble.last-message {
   padding-bottom: 5rem;
 }
 
 .cahtAvatar {
+  flex-shrink: 0;
   height: 1.5rem;
   margin-bottom: 0.9rem;
 }
@@ -100,12 +101,17 @@ const copyMessage = (msg: string) => {
   overflow: visible;
   margin: auto 0;
   border-radius: 0;
-  margin-left: 0.5rem;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   margin-left: 0;
   & > a {
     color: var(--primary);
   }
+  /* markdown comes in via v-html, so lists need :deep to get an indent; otherwise the numbers sit in the margin */
+  & :deep(ol),
+  & :deep(ul) {
+    padding-left: 1.5em;
+  }
 }
 
 @media (max-width: 1450px) {
@@ -122,29 +128,17 @@ const copyMessage = (msg: string) => {
 }
 
 @media (max-width: 992px) {
+  /* keep avatar beside the text; the copy button wraps under the message, aligned with the text */
   .chat-bubble {
-    font-size: 0.9em;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .chat-bubble-content {
-    width: 100%;
-    margin-left: 0;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    padding: 1rem 0.5rem;
   }
 
   .details {
-    width: 10%;
-    height: 100%;
+    flex-basis: 100%;
     display: flex;
-    align-self: flex-end;
-    gap: 0.5rem;
-
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
+    padding-left: 2.75rem;
   }
 
   .chat-bubble.last-message {