feat: enable restarting onboarding tour

src/components/Navbar.jsx

@@ -7,7 +7,7 @@ import classNames from "classnames";
 import Button from "components/Button";
 import { AuthStore, GlobalInfoStore } from "stores";
 
-const Navbar = () => {
+const Navbar = ({ onGetHelp }) => {
   const { innerWidth } = useWindowSize();
   const [showMenu, setShowMenu] = useState();
   const { keycloak } = useKeycloak();
@@ -36,7 +36,7 @@ const Navbar = () => {
   };
 
   const connectionIndicator = (
-    <div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
+    <div className="inline-flex items-center">
       <span
         className="relative inline-flex h-4 w-4 mr-4"
         data-tip={connectionStateCaption}
@@ -109,8 +109,10 @@ const Navbar = () => {
                 </li>
               </ul>
             </div>
-            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
-              {connectionIndicator}
+            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center justify-between">
+              <div className="order-last lg:order-first lg:mr-8">
+                {connectionIndicator}
+              </div>
               {!isAuthenticated && (
                 <Button className="btn--white joyride-login" onClick={login}>
                   Přihlásit se

src/components/onboarding/index.jsx

@@ -115,6 +115,38 @@ export const steps = [
     ),
     placement: "right",
   },
+  {
+    target: ".joyride-filters",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Filtrování a řazení příspěvků</h1>
+        <div className="leading-snug text-base space-y-2">
+          <p>
+            Příspěvky v rozpravě můžeš filtrovat <strong>podle typu</strong>{" "}
+            (návrhy/příspěvky), <strong>podle stavu</strong>{" "}
+            (aktivní/archivované) a můžeš taky přepínat jejich{" "}
+            <strong>řazení</strong> (podle podpory, podle času přidání).
+          </p>
+        </div>
+      </>
+    ),
+    placement: "bottom",
+  },
+  {
+    target: ".joyride-pagination",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Stránkování příspěvků</h1>
+        <div className="leading-snug text-base space-y-2">
+          <p>
+            Příspěvky jsou stránkované <strong>po dvaceti</strong>. Stránky
+            můžeš přepínat těmito šipkami.
+          </p>
+        </div>
+      </>
+    ),
+    placement: "bottom",
+  },
   {
     target: ".joyride-announcements",
     content: (

src/containers/PostFilters.jsx

@@ -65,7 +65,7 @@ const PostFilters = () => {
 
   return (
     <div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
-      <div className="-mx-1">
+      <div className="-mx-1 joyride-filters">
         <Dropdown
           value={filters.flags}
           onChange={onFlagsChange}
@@ -86,7 +86,7 @@ const PostFilters = () => {
         />
       </div>
 
-      <div>
+      <div className="joyride-pagination">
         <Chip
           color="grey-125"
           className={

src/pages/Home.jsx

-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import Joyride, { EVENTS } from "react-joyride";
 import ReactPlayer from "react-player/lazy";
@@ -45,6 +45,8 @@ const Home = () => {
   const programEntry = currentId ? programEntries[currentId] : null;
   const [showProgramEditModal, setShowProgramEditModal] = useState(false);
   const [runJoyRide, setRunJoyride] = useState(false);
+  // The easiest way to restart the joyride tour is by simply re-rendering the component.
+  const [joyrideRenderKey, setJoyrideRenderKey] = useState(0);
   const { innerWidth } = useWindowSize();
   const isLg = innerWidth >= 1024;
   const [
@@ -80,6 +82,11 @@ const Home = () => {
     setShowProgramEditModal(false);
   };
 
+  const showTutorial = useCallback(() => {
+    setRunJoyride(true);
+    setJoyrideRenderKey(joyrideRenderKey + 1);
+  }, [joyrideRenderKey, setRunJoyride, setJoyrideRenderKey]);
+
   const handleJoyrideCallback = ({ action, index, status, type }) => {
     if (type === EVENTS.TOUR_END) {
       localStorage.setItem(tourLSKey, "COMPLETED");
@@ -148,6 +155,7 @@ const Home = () => {
           next: "Další",
           skip: "Přeskočit intro",
         }}
+        key={joyrideRenderKey}
         run={runJoyRide}
         showProgress={true}
         showSkipButton={true}
@@ -197,42 +205,53 @@ const Home = () => {
             {programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
             {programEntry.title}
           </h1>
-          {displayActions && (
-            <DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5">
-              <DropdownMenuItem
-                onClick={() => setShowProgramEditModal(true)}
-                icon="ico--pencil"
-                title="Přejmenovat bod programu"
-                titleSize="base"
-                iconSize="base"
+          <div className="pl-4 pt-1 lg:pt-5">
+            <div className="space-x-4 inline-flex items-center">
+              <button
+                className="ico--question text-grey-200 hover:text-black text-lg"
+                aria-label="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
+                data-tip="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
+                data-tip-at="left"
+                onClick={showTutorial}
               />
-              {programEntry.discussionOpened && (
-                <DropdownMenuItem
-                  onClick={() => setShowCloseDiscussion(true)}
-                  icon="ico--bubbles"
-                  title="Ukončit rozpravu"
-                  titleSize="base"
-                  iconSize="base"
-                />
+              {displayActions && (
+                <DropdownMenu right triggerSize="lg">
+                  <DropdownMenuItem
+                    onClick={() => setShowProgramEditModal(true)}
+                    icon="ico--pencil"
+                    title="Přejmenovat bod programu"
+                    titleSize="base"
+                    iconSize="base"
+                  />
+                  {programEntry.discussionOpened && (
+                    <DropdownMenuItem
+                      onClick={() => setShowCloseDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Ukončit rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  {!programEntry.discussionOpened && (
+                    <DropdownMenuItem
+                      onClick={() => setShowOpenDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Otevřít rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  <DropdownMenuItem
+                    onClick={() => setShowEndProgramPoint(true)}
+                    icon="ico--switch"
+                    title="Ukončit bod programu"
+                    titleSize="base"
+                    iconSize="base"
+                  />
+                </DropdownMenu>
               )}
-              {!programEntry.discussionOpened && (
-                <DropdownMenuItem
-                  onClick={() => setShowOpenDiscussion(true)}
-                  icon="ico--bubbles"
-                  title="Otevřít rozpravu"
-                  titleSize="base"
-                  iconSize="base"
-                />
-              )}
-              <DropdownMenuItem
-                onClick={() => setShowEndProgramPoint(true)}
-                icon="ico--switch"
-                title="Ukončit bod programu"
-                titleSize="base"
-                iconSize="base"
-              />
-            </DropdownMenu>
-          )}
+            </div>
+          </div>
         </div>
         <section className="cf2021__video">
           <div className="container-padding--zero md:container-padding--auto">