Swipe pour le chat

Contribute Feature
1

Bonjour :waving_hand:

Petite suggestion pour l’ergonomie mobile du chat Discourse : est-il prévu d’intégrer un geste de glissement (swipe de gauche à droite) depuis un canal ou un DM pour afficher rapidement le panneau latéral (liste des canaux / liste messages directs) ? Cela rendrait la navigation sur petit écran beaucoup plus fluide. Etant donné que vous travaillez sur un nouveau composer afin de faciliter l’utilisation sur mobile avec une main, je pensais la même chose pour le chat :sweat_smile:

7 « J'aime »
2

Il n’y a actuellement aucun projet en ce sens, mais il serait intéressant d’approfondir la question des interactions par glissement qui pourraient faciliter la navigation sur un site de ce type.

6 « J'aime »
3

Le balayage vers la gauche/droite est compliqué, car il correspond au geste de navigation précédent/suivant du navigateur sur divers appareils.

2 « J'aime »
4

Je pense que la bonne approche a été adoptée par Don dans Topic Preview Modal ; elle ne perturbe pas le comportement par défaut et je l’ai trouvée très utile.

3 « J'aime »
5

J’ai fait un script pour le swipe pour faire apparaitre la barre latérale en glissant de gauche à droite et de même dans le chat pour faire apparaitre la liste quand on est dans une conversation. Le but est d’améliorer l’expérience utilisateur. Il faut copier le script dans un composant affecter à votre thème dans common\head. Après je pense qu’il y a toujours possibilité d’améliorer. Par contre, j’utilise un téléphone android à voir sur iphone si cela fonctionne :sweat_smile:

<script>
  (function() {
    if (window.innerWidth > 768) return;

    let startX = 0;
    let startY = 0;

    // Utilisation de 'window' pour être sûr de capter le geste avant le chat
    window.addEventListener("touchstart", function(e) {
      if (e.touches.length === 1) {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
      }
    }, { passive: true, capture: true });

    window.addEventListener("touchend", function(e) {
      if (!startX) return;

      const touch = e.changedTouches[0];
      const deltaX = touch.clientX - startX;
      const deltaY = touch.clientY - startY;

      if (startX >= 10 && startX <= 120 && deltaX > 50 && Math.abs(deltaY) < 50) {
        
        // 1. SOMMES-NOUS DANS UN CANAL DE CHAT ?
        // On vérifie si l'URL contient les mots-clés typiques d'un canal de chat Discourse
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // On tente d'abord de cliquer sur le lien retour s'il est standardisé
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // Méthode infaillible : on demande au navigateur de reculer d'une page
            window.history.back();
          }
          startX = 0;
          return; // On arrête le script ici
        }

        // 2. SI NOUS SOMMES AILLEURS SUR LE FORUM (Ouverture du menu)
        const sidebarSelectors = [
          ".btn-sidebar-toggle",
          ".sidebar-toggle",
          "button.header-dropdown-toggle.hamburger-dropdown",
          "#toggle-hamburger-menu"
        ];

        for (const selector of sidebarSelectors) {
          const btn = document.querySelector(selector);
          if (btn && btn.getBoundingClientRect().width > 0) {
            btn.click();
            break; 
          }
        }
      }

      startX = 0;
      startY = 0;
    }, { passive: true, capture: true });
  })();
</script>