src/containers/PostFilters.jsx

-import React, { useCallback } from "react";
-import pick from "lodash/pick";
+import React from "react";
 
-import Chip from "components/Chip";
 import Dropdown from "components/Dropdown";
 import { PostStore } from "stores";
 import { updateWindowPosts } from "utils";
 
 const PostFilters = () => {
-  const { window, filters } = PostStore.useState((state) =>
-    pick(state, ["window", "filters", "items"])
-  );
+  const filters = PostStore.useState((state) => state.filters);
 
   const flagsOptions = [
     { title: "Vše", value: "all" },
@@ -25,19 +21,13 @@ const PostFilters = () => {
     { title: "Jen návrhy", value: "proposalsOnly" },
     { title: "Jen příspěvky", value: "discussionOnly" },
   ];
-  const hasNextPage = window.page * window.perPage < window.itemCount;
-  const hasPrevPage = window.page > 1;
 
-  const setFilter = (prop, newValue, resetPage = true) => {
+  const setFilter = (prop, newValue) => {
     PostStore.update((state) => {
       state.filters[prop] = newValue;
       state.window.itemCount = state.window.items.length;
 
       updateWindowPosts(state);
-
-      if (resetPage) {
-        state.window.page = 1;
-      }
     });
   };
 
@@ -45,27 +35,9 @@ const PostFilters = () => {
   const onSortChange = (newValue) => setFilter("sort", newValue, false);
   const onTypeChange = (newValue) => setFilter("type", newValue);
 
-  const onNextPage = useCallback(() => {
-    if (hasNextPage) {
-      PostStore.update((state) => {
-        state.window.page = state.window.page + 1;
-      });
-    }
-  }, [hasNextPage]);
-  const onPrevPage = useCallback(() => {
-    if (hasPrevPage) {
-      PostStore.update((state) => {
-        state.window.page = state.window.page - 1;
-      });
-    }
-  }, [hasPrevPage]);
-
-  const enabledPaginatorClass = "cursor-pointer text-xs";
-  const disabledPaginatorClass = "opacity-25 cursor-not-allowed text-xs";
-
   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}
@@ -85,29 +57,6 @@ const PostFilters = () => {
           className="text-xs ml-1 mt-2 xl:mt-0"
         />
       </div>
-
-      <div>
-        <Chip
-          color="grey-125"
-          className={
-            hasPrevPage ? enabledPaginatorClass : disabledPaginatorClass
-          }
-          hoveractive
-          onClick={onPrevPage}
-        >
-          <span className="ico--chevron-left"></span>
-        </Chip>
-        <Chip
-          color="grey-125"
-          className={
-            hasNextPage ? enabledPaginatorClass : disabledPaginatorClass
-          }
-          hoveractive
-          onClick={onNextPage}
-        >
-          <span className="ico--chevron-right"></span>
-        </Chip>
-      </div>
     </div>
   );
 };

src/containers/PostsContainer.jsx

-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo } from "react";
 import pick from "lodash/pick";
 
 import {
@@ -10,143 +10,190 @@ import {
   hide,
   like,
   loadPosts,
+  markSeen,
   rejectProposal,
   rejectProposalByChairman,
 } from "actions/posts";
-import { ban } from "actions/users";
+import { ban, inviteToJitsi, unban } from "actions/users";
+import Button from "components/Button";
 import ErrorMessage from "components/ErrorMessage";
 import ModalConfirm from "components/modals/ModalConfirm";
+import ModalWithActions from "components/modals/ModalWithActions";
 import PostEditModal from "components/posts/PostEditModal";
 import PostList from "components/posts/PostList";
 import { useActionState, useItemActionConfirm } from "hooks";
-import { AuthStore, PostStore } from "stores";
-
-const PostsContainer = ({ className }) => {
-  const [postToEdit, setPostToEdit] = useState(null);
-  const [confirmingEdit, setConfirmingEdit] = useState(false);
-  const [editError, setEditError] = useState(null);
+import { AuthStore, GlobalInfoStore, PostStore } from "stores";
 
+const PostsContainer = ({ className, showAddPostCta }) => {
   const [
     userToBan,
     setUserToBan,
     onBanUserConfirm,
     onBanUserCancel,
+    banUserState,
   ] = useItemActionConfirm(ban);
+  const [
+    userToUnban,
+    setUserToUnban,
+    onUnbanUserConfirm,
+    onUnbanUserCancel,
+    unbanUserState,
+  ] = useItemActionConfirm(unban);
+  const [
+    userToInvite,
+    setUserToInvite,
+    onInviteUserConfirm,
+    onInviteUserCancel,
+    inviteUserState,
+  ] = useItemActionConfirm(inviteToJitsi);
   const [
     postToHide,
     setPostToHide,
     onPostHideConfirm,
     onPostHideCancel,
+    postHideState,
   ] = useItemActionConfirm(hide);
   const [
     postToArchive,
     setPostToArchive,
     onPostArchiveConfirm,
     onPostArchiveCancel,
+    postArchiveState,
   ] = useItemActionConfirm(archive);
   const [
     postToAnnounce,
     setPostToAnnounce,
     onAnnounceConfirm,
     onAnnounceCancel,
+    announceState,
   ] = useItemActionConfirm(announceProposal);
   const [
     postToAccept,
     setPostToAccept,
     onAcceptConfirm,
     onAcceptCancel,
-  ] = useItemActionConfirm(acceptProposal);
+  ] = useItemActionConfirm(acceptProposal, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
+  const [
+    postToEdit,
+    setPostToEdit,
+    onEditConfirm,
+    onEditCancel,
+    editState,
+  ] = useItemActionConfirm(edit, (item, newContent) => ({
+    post: item,
+    newContent,
+  }));
   const [
     postToReject,
     setPostToReject,
     onRejectConfirm,
     onRejectCancel,
-  ] = useItemActionConfirm(rejectProposal);
+  ] = useItemActionConfirm(rejectProposal, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
   const [
     postToRejectByChairman,
     setPostToRejectByChairman,
     onRejectByChairmanConfirm,
     onRejectByChairmanCancel,
-  ] = useItemActionConfirm(rejectProposalByChairman);
+  ] = useItemActionConfirm(rejectProposalByChairman, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
 
-  const { isAuthenticated, user } = AuthStore.useState();
+  const { isAuthenticated, user } = AuthStore.useState((state) =>
+    pick(state, ["isAuthenticated", "user"])
+  );
   const { window, items } = PostStore.useState((state) =>
     pick(state, ["window", "items"])
   );
   const showingArchivedOnly = PostStore.useState(
     (state) => state.filters.flags === "archived"
   );
-
-  const [banningUser, banningUserError] = useActionState(ban, userToBan);
-  const [hidingPost, hidingPostError] = useActionState(hide, postToHide);
-  const [archivingPost, archivingPostError] = useActionState(
-    archive,
-    postToArchive
-  );
-  const [announcingProposal, announcingProposalError] = useActionState(
-    announceProposal,
-    postToAnnounce
+  const groupSizeHalf = GlobalInfoStore.useState(
+    (state) => state.groupSizeHalf
   );
+
   const [acceptingProposal, acceptingProposalError] = useActionState(
     acceptProposal,
-    postToAccept
+    {
+      proposal: postToAccept,
+      archive: false,
+    }
   );
+  const [
+    acceptingAndArchivingProposal,
+    acceptingAndArchivingProposalError,
+  ] = useActionState(acceptProposal, {
+    proposal: postToAccept,
+    archive: true,
+  });
   const [rejectingProposal, rejectingProposalError] = useActionState(
     rejectProposal,
-    postToReject
+    {
+      proposal: postToReject,
+      archive: false,
+    }
   );
+  const [
+    rejectingAndArchivingProposal,
+    rejectingAndArchivingProposalError,
+  ] = useActionState(rejectProposal, { proposal: postToReject, archive: true });
   const [
     rejectingProposalByChairman,
     rejectingProposalByChairmanError,
-  ] = useActionState(rejectProposalByChairman, postToRejectByChairman);
+  ] = useActionState(rejectProposalByChairman, {
+    proposal: postToRejectByChairman,
+    archive: false,
+  });
+  const [
+    rejectingProposalByChairmanAndArchiving,
+    rejectingProposalByChairmanAndArchivingError,
+  ] = useActionState(rejectProposalByChairman, {
+    proposal: postToRejectByChairman,
+    archive: true,
+  });
 
   const { 2: loadResult } = loadPosts.useWatch();
 
-  const confirmEdit = useCallback(
-    async (newContent) => {
-      if (postToEdit && newContent) {
-        setConfirmingEdit(true);
-
-        const result = await edit.run({ post: postToEdit, newContent });
-
-        if (!result.error) {
-          setPostToEdit(null);
-          setEditError(null);
-        } else {
-          setEditError(result.message);
-        }
-
-        setConfirmingEdit(false);
-      }
+  /**
+   * Ban a post's author.
+   * @param {CF2021.Post} post
+   */
+  const onBanUser = useCallback(
+    (post) => {
+      setUserToBan(post.author);
     },
-    [postToEdit, setPostToEdit]
+    [setUserToBan]
   );
-
-  const cancelEdit = useCallback(() => {
-    setPostToEdit(null);
-  }, [setPostToEdit]);
-
   /**
    * Ban a post's author.
    * @param {CF2021.Post} post
    */
-  const onBanUser = (post) => {
-    setUserToBan(post.author);
-  };
-
+  const onUnbanUser = useCallback(
+    (post) => {
+      setUserToUnban(post.author);
+    },
+    [setUserToUnban]
+  );
   /**
-   * Mark down user saw this post already.
+   * Invite post's author to Jitsi.
    * @param {CF2021.Post} post
    */
-  const markSeen = (post) => {
-    PostStore.update((state) => {
-      state.items[post.id].seen = true;
-    });
-  };
+  const onInviteUser = useCallback(
+    (post) => {
+      setUserToInvite(post.author);
+    },
+    [setUserToInvite]
+  );
 
-  const sliceStart = (window.page - 1) * window.perPage;
-  const sliceEnd = window.page * window.perPage;
-  const windowItems = window.items.map((postId) => items[postId]);
+  const windowItems = useMemo(() => {
+    return window.items.map((postId) => items[postId]);
+  }, [items, window.items]);
 
   return (
     <>
@@ -156,16 +203,20 @@ const PostsContainer = ({ className }) => {
         </ErrorMessage>
       )}
       <PostList
-        items={windowItems.slice(sliceStart, sliceEnd)}
+        items={windowItems}
+        showAddPostCta={showAddPostCta}
         canThumb={isAuthenticated}
-        canRunActions={isAuthenticated && user.role === "chairman"}
         onLike={like.run}
         onDislike={dislike.run}
         onSeen={markSeen}
         className={className}
         dimArchived={!showingArchivedOnly}
+        currentUser={user}
+        supportThreshold={groupSizeHalf}
         onHide={setPostToHide}
         onBanUser={onBanUser}
+        onUnbanUser={onUnbanUser}
+        onInviteUser={onInviteUser}
         onEdit={setPostToEdit}
         onArchive={setPostToArchive}
         onAnnounceProcedureProposal={setPostToAnnounce}
@@ -177,20 +228,47 @@ const PostsContainer = ({ className }) => {
         isOpen={!!userToBan}
         onConfirm={onBanUserConfirm}
         onCancel={onBanUserCancel}
-        confirming={banningUser}
-        error={banningUserError}
+        confirming={banUserState.loading}
+        error={banUserState.error}
         title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`}
         yesActionLabel="Zablokovat"
       >
         Uživatel <strong>{userToBan ? userToBan.name : null}</strong> bude
         zablokován a nebude dále moci vkládat nové příspěvky. Opravdu to chcete?
       </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!userToUnban}
+        onConfirm={onUnbanUserConfirm}
+        onCancel={onUnbanUserCancel}
+        confirming={unbanUserState.loading}
+        error={unbanUserState.error}
+        title={`Odblokovat uživatele ${userToUnban ? userToUnban.name : null}?`}
+        yesActionLabel="Odblokovat"
+      >
+        Uživatel <strong>{userToUnban ? userToUnban.name : null}</strong> bude
+        odblokován a bude mu opět umožněno přidávat nové příspěvky. Opravdu to
+        chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!userToInvite}
+        onConfirm={onInviteUserConfirm}
+        onCancel={onInviteUserCancel}
+        confirming={inviteUserState.loading}
+        error={inviteUserState.error}
+        title={`Pozvat uživatele ${
+          userToBan ? userToBan.name : null
+        } do Jitsi?`}
+        yesActionLabel="Pozvat"
+      >
+        Uživateli <strong>{userToInvite ? userToInvite.name : null}</strong>{" "}
+        přijde pozvánka do soukromého Jitsi kanálu. Určitě to chcete?
+      </ModalConfirm>
       <ModalConfirm
         isOpen={!!postToHide}
         onConfirm={onPostHideConfirm}
         onCancel={onPostHideCancel}
-        confirming={hidingPost}
-        error={hidingPostError}
+        confirming={postHideState.loading}
+        error={postHideState.error}
         title="Skrýt příspěvek?"
         yesActionLabel="Potvrdit"
       >
@@ -200,8 +278,8 @@ const PostsContainer = ({ className }) => {
         isOpen={!!postToArchive}
         onConfirm={onPostArchiveConfirm}
         onCancel={onPostArchiveCancel}
-        confirming={archivingPost}
-        error={archivingPostError}
+        confirming={postArchiveState.loading}
+        error={postArchiveState.error}
         title="Archivovat příspěvek?"
         yesActionLabel="Potvrdit"
       >
@@ -212,55 +290,142 @@ const PostsContainer = ({ className }) => {
         isOpen={!!postToAnnounce}
         onConfirm={onAnnounceConfirm}
         onCancel={onAnnounceCancel}
-        confirming={announcingProposal}
-        error={announcingProposalError}
+        confirming={announceState.loading}
+        error={announceState.errror}
         title="Vyhlásit procedurální návrh?"
         yesActionLabel="Vyhlásit návrh"
       >
         Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete?
       </ModalConfirm>
-      <ModalConfirm
+      <ModalWithActions
         isOpen={!!postToAccept}
-        onConfirm={onAcceptConfirm}
         onCancel={onAcceptCancel}
-        confirming={acceptingProposal}
-        error={acceptingProposalError}
+        error={acceptingProposalError || acceptingAndArchivingProposalError}
         title="Schválit procedurální návrh?"
-        yesActionLabel="Schválit návrh"
+        containerClassName="max-w-lg"
+        actions={
+          <>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onAcceptConfirm(false)}
+              loading={acceptingProposal}
+            >
+              Schválit
+            </Button>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onAcceptConfirm(true)}
+              loading={acceptingAndArchivingProposal}
+            >
+              Schválit a archivovat
+            </Button>
+            <Button
+              hoverActive
+              color="grey-125"
+              className="text-sm"
+              onClick={onAcceptCancel}
+            >
+              Zrušit
+            </Button>
+          </>
+        }
       >
         Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete?
-      </ModalConfirm>
-      <ModalConfirm
+      </ModalWithActions>
+      <ModalWithActions
         isOpen={!!postToReject}
-        onConfirm={onRejectConfirm}
         onCancel={onRejectCancel}
-        confirming={rejectingProposal}
-        error={rejectingProposalError}
+        error={rejectingProposalError || rejectingAndArchivingProposalError}
         title="Zamítnout procedurální návrh?"
-        yesActionLabel="Zamítnout návrh"
+        containerClassName="max-w-lg"
+        actions={
+          <>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectConfirm(false)}
+              loading={rejectingProposal}
+            >
+              Zamítnout
+            </Button>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectConfirm(true)}
+              loading={rejectingAndArchivingProposal}
+            >
+              Zamítnout a archivovat
+            </Button>
+            <Button
+              hoverActive
+              color="grey-125"
+              className="text-sm"
+              onClick={onRejectCancel}
+            >
+              Zrušit
+            </Button>
+          </>
+        }
       >
         Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete?
-      </ModalConfirm>
-      <ModalConfirm
+      </ModalWithActions>
+      <ModalWithActions
         isOpen={!!postToRejectByChairman}
-        onConfirm={onRejectByChairmanConfirm}
         onCancel={onRejectByChairmanCancel}
-        confirming={rejectingProposalByChairman}
-        error={rejectingProposalByChairmanError}
+        error={
+          rejectingProposalByChairmanError ||
+          rejectingProposalByChairmanAndArchivingError
+        }
         title="Zamítnout procedurální návrh předsedajícícm?"
-        yesActionLabel="Zamítnout návrh předsedajícím"
+        containerClassName="max-w-lg"
+        actions={
+          <>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectByChairmanConfirm(false)}
+              loading={rejectingProposalByChairman}
+            >
+              Zamítnout
+            </Button>
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              onClick={() => onRejectByChairmanConfirm(true)}
+              loading={rejectingProposalByChairmanAndArchiving}
+            >
+              Zamítnout a archivovat
+            </Button>
+            <Button
+              hoverActive
+              color="grey-125"
+              className="text-sm"
+              onClick={onRejectCancel}
+            >
+              Zrušit
+            </Button>
+          </>
+        }
       >
         Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu
         to chcete?
-      </ModalConfirm>
+      </ModalWithActions>
       {postToEdit && (
         <PostEditModal
           isOpen={true}
           post={postToEdit}
-          onConfirm={confirmEdit}
-          onCancel={cancelEdit}
-          confirming={confirmingEdit}
-          error={editError}
+          onConfirm={onEditConfirm}
+          onCancel={onEditCancel}
+          confirming={editState.loading}
+          error={editState.error}
         />
       )}
     </>

src/hooks.js

 import { useCallback, useState } from "react";
 
-export const useItemActionConfirm = (actionFn) => {
+const baseActionParamsBuilder = (item, args) => {
+  return item;
+};
+
+export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
   const [item, setItem] = useState(null);
+  const [actionArgs, setActionArgs] = useState(null);
 
-  const onActionConfirm = useCallback(async () => {
+  const onActionConfirm = useCallback(
+    async (args) => {
       if (item) {
-      const result = await actionFn.run(item);
+        const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
+          item,
+          args,
+        );
+        setActionArgs(newActionArgs);
+        const result = await actionFn.run(newActionArgs);
 
         if (!result.error) {
           setItem(null);
         }
       }
-  }, [item, setItem, actionFn]);
+    },
+    [item, setItem, actionFn, actionParamsBuilder, setActionArgs],
+  );
 
   const onActionCancel = useCallback(() => {
     setItem(null);
   }, [setItem]);
 
-  return [item, setItem, onActionConfirm, onActionCancel];
+  const [loading, error] = useActionState(actionFn, actionArgs);
+  const unwrappedActionState = { loading, error };
+
+  return [item, setItem, onActionConfirm, onActionCancel, unwrappedActionState];
 };
 
 export const useActionConfirm = (actionFn, actionArgs) => {

src/index.js

 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import ReactModal from "react-modal";
 
+import { refreshAccessToken } from "actions/users";
+
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
-const root = document.getElementById("root");
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+function handleVisibilityChange() {
+  if (!document.hidden) {
+    refreshAccessToken();
+  }
+}
 
-ReactDOM.render(
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  root
+  </React.StrictMode>
 );
-
-ReactModal.setAppElement(root);
+ReactModal.setAppElement(document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/keycloak.js

@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js";
 
 // Setup Keycloak instance as needed
 // Pass initialization options as required or leave blank to load from 'keycloak.json'
-const keycloak = Keycloak({
+const keycloak = new Keycloak({
   url: "https://auth.pirati.cz/auth",
   realm: "pirati",
   clientId: "cf-online",

src/pages/About.jsx

+import React from "react";
+import { Helmet } from "react-helmet-async";
+
+import { markdownConverter } from "markdown";
+
+const content = markdownConverter.makeHtml(`
+**Celostátní fórum Pirátské strany** je [podle Stanov](https://wiki.pirati.cz/rules/st#cl_8_celostatni_forum) nejvyšším orgánem strany a zasedání se podle možností účastní každý člen strany.
+
+> #### Celostátní fórum ve výlučné působnosti:
+>
+> * a. volí a odvolává republikové předsednictvo,
+> * b. volí a odvolává členy republikového výboru volené celostátním fórem,
+> * c. zřizuje a ruší komise a odbory na celostátní úrovni,
+> * d. volí a odvolává členy komise a vedoucího odboru,
+> * e. schvaluje změny stanov,
+> * f. projednává a schvaluje výroční zprávu předsedy strany,
+> * g. mimořádně přezkoumává rozhodnutí orgánu strany,
+> * h. schvaluje zakládací dokument politického institutu,
+> * i. může schválit Předpis o institutu,
+> * j. může volit a odvolávat některé členy správní rady politického institutu.
+>
+> #### Celostátní fórum dále
+>
+> * a. přijímá v mezích stanov další předpisy,
+> * b. ukládá úkoly republikovému předsednictvu a republikovému výboru,
+> * c. může projednávat a schvalovat základní programové a ideové dokumenty,
+> * d. má veškerou působnost, kterou stanovy neurčují jinému orgánu strany.
+
+
+### Zasedání na Internetu
+
+Zasedání Celostátního fóra může z důvodu mimořádných okolností probíhat na Internetu. Postup zasedání na Internetu je definován §42a Jednacího řádu Celostátního fóra v následujícím znění:
+
+> **(1)** Pokud mimořádné okolnosti nedovolují konání běžného zasedání, může, v rámci krizového řízení, republikové předsednictvo pověřit předsedu strany svoláním zasedání na Internetu nebo změnou již svolaného běžného zasedání na zasedání na Internetu.
+>
+> **(2)** Při zasedání na Internetu jednají účastníci zasedání ve vzájemné okamžité součinnosti přes Internet s použitím určených systémů strany, případně systémů třetích stran.
+>
+> **(3)** Zasedání na Internetu předseda strany svolá tím, že členům řádně oznámí datum, dobu a jeho organizátora, a to nejméně 40 dnů předem. Nejméně 14 dní před začátkem zasedání organizátor oznámí zejména:
+>
+> * a) způsoby pro sledování veřejného přenosu ze zasedání,
+> * b) způsob pro registraci přítomnosti účastníků v průběhu zasedání,
+> * c) způsob pro účast v jednání zvukem a obrazem,
+> * d) způsob, kterým mohou přítomní členové a příznivci v rozpravě písemně pokládat dotazy a připomínky a vyjádřit jim podporu,
+> * e) způsob, kterým mohou přítomní členové předkládat písemně procedurální návrhy a vyjádřit jim podporu,
+> * f) způsob pro sčítané hlasování o procedurálních návrzích,
+> * g) pokyny pro účast novinářů.
+>
+> **(4)** Právo účasti v jednání zvukem a obrazem mají zejména:
+>
+> * a) předsedající a další činovníci jednání,
+> * b) osoby s právem na závěrečné slovo v rozpravě k bodům k rozhodnutí,
+> * c) osoby určené navrhovatelem bodu v rozpravě k jiným bodům,
+> * d) další osoby, pro něž je schválen takový postup.
+>
+> **(5)** Jinak se při zasedání na Internetu postupuje přiměřeně jako při běžném zasedání.
+>
+
+### Další informace
+
+* [Stanovy České pirátské strany](https://wiki.pirati.cz/rules/st)
+* [Jednací řád celostátního fóra](https://wiki.pirati.cz/rules/jdr)
+`);
+
+const About = () => {
+  const htmlContent = {
+    __html: content,
+  };
+  return (
+    <>
+      <Helmet>
+        <title>Co je to celostátní fórum? | CF 2024 | Pirátská strana</title>
+        <meta
+          name="description"
+          content="Nevíte co je to celostátní fórum České pirátské strany? Tady se dočtete vše potřebné."
+        />
+        <meta
+          property="og:title"
+          content="Co je to celostátní fórum? | CF 2024 | Pirátská strana"
+        />
+        <meta
+          property="og:description"
+          content="Nevíte co je to celostátní fórum České pirátské strany? Tady se dočtete vše potřebné."
+        />
+      </Helmet>
+      <article className="container container--default py-8 lg:py-24">
+        <h1 className="head-alt-md lg:head-alt-lg mb-8">Celostátní fórum</h1>
+
+        <div
+          className="content-block leading-normal"
+          dangerouslySetInnerHTML={htmlContent}
+        />
+      </article>
+    </>
+  );
+};
+
+export default About;

src/pages/Home.css

+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+.iframe-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+}
+
+.iframe-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/pages/Home.jsx

-import React, { useState } from "react";
-import { format } from "date-fns";
+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";
+import { useKeycloak } from "@react-keycloak/web";
+import useWindowSize from "@rooks/use-window-size";
 
 import {
   closeDiscussion,
@@ -7,85 +11,28 @@ import {
   openDiscussion,
   renameProgramPoint,
 } from "actions/program";
-import Button from "components/Button";
 import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
+import {
+  AlreadyFinished,
+  BreakInProgress,
+  NotYetStarted,
+} from "components/home";
 import ModalConfirm from "components/modals/ModalConfirm";
+import { Beacon, steps } from "components/onboarding";
 import ProgramEntryEditModal from "components/program/ProgramEntryEditModal";
 import AddAnnouncementForm from "containers/AddAnnouncementForm";
 import AddPostForm from "containers/AddPostForm";
 import AnnouncementsContainer from "containers/AnnoucementsContainer";
+import GlobalStats from "containers/GlobalStats";
+import JitsiInviteCard from "containers/JitsiInviteCard";
 import PostFilters from "containers/PostFilters";
 import PostsContainer from "containers/PostsContainer";
 import { useActionConfirm } from "hooks";
-import { AuthStore, ProgramStore } from "stores";
+import { AuthStore, GlobalInfoStore, ProgramStore } from "stores";
 
-const NotYetStarted = ({ startAt }) => (
-  <article className="container container--wide py-8 md:py-16 lg:py-32">
-    <div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
-      Jejda ...
-    </div>
-    <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
-      Jednání ještě nebylo zahájeno :(
-    </h1>
-    <p className="text-xl leading-snug mb-8">
-      <span>Jednání celostátního fóra ještě nezačalo. </span>
-      {startAt && (
-        <span>
-          Mělo by být zahájeno <strong>{format(startAt, "d. M. Y")}</strong> v{" "}
-          <strong>{format(startAt, "H:mm")}</strong>.{" "}
-        </span>
-      )}
-      <span>Můžete si ale zobrazit program.</span>
-    </p>
-    <Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
-      Zobrazit program
-    </Button>
-  </article>
-);
+import "./Home.css";
 
-const AlreadyFinished = () => (
-  <article className="container container--wide py-8 md:py-16 lg:py-32">
-    <div className="flex">
-      <div>
-        <i className="ico--anchor text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
-      </div>
-      <div>
-        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
-          Jednání už skočilo!
-        </h1>
-        <p className="text-xl leading-snug">
-          Oficiální program již skončil. Těšíme se na viděnou zase příště.
-        </p>
-      </div>
-    </div>
-  </article>
-);
-
-const BreakInProgress = () => (
-  <article className="container container--wide py-8 md:py-16 lg:py-32">
-    <div className="flex">
-      <div>
-        <i className="ico--clock text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
-      </div>
-      <div>
-        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
-          Probíhá přestávka ...
-        </h1>
-        <p className="text-xl leading-snug mb-8">
-          Jednání celostátního fóra je momentálně přerušeno. Můžete si ale
-          zobrazit program.
-        </p>
-        <Button
-          routerTo="/program"
-          className="md:text-lg lg:text-xl"
-          hoverActive
-        >
-          Zobrazit program
-        </Button>
-      </div>
-    </div>
-  </article>
-);
+const tourLSKey = "cf2021__tour";
 
 const Home = () => {
   const {
@@ -94,8 +41,14 @@ const Home = () => {
     scheduleIds,
   } = ProgramStore.useState();
   const { isAuthenticated, user } = AuthStore.useState();
+  const { streamUrl } = GlobalInfoStore.useState();
   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 [
     showCloseDiscussion,
     setShowCloseDiscussion,
@@ -114,6 +67,17 @@ const Home = () => {
     onEndProgramPointConfirm,
     onEndProgramPointCancel,
   ] = useActionConfirm(endProgramPoint, programEntry);
+  const { keycloak } = useKeycloak();
+
+  const login = useCallback(() => {
+    keycloak.login();
+  }, [keycloak]);
+
+  useEffect(() => {
+    if (isLg && !localStorage.getItem(tourLSKey)) {
+      setRunJoyride(true);
+    }
+  }, [isLg, setRunJoyride]);
 
   const onEditProgramConfirm = async (newTitle) => {
     await renameProgramPoint.run({ programEntry, newTitle });
@@ -123,6 +87,17 @@ 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");
+    }
+  };
+
   const firstProgramEntry = scheduleIds.length
     ? programEntries[scheduleIds[0]]
     : null;
@@ -131,11 +106,24 @@ const Home = () => {
     ? programEntries[scheduleIds[0]]
     : null;
 
-  if (!programEntry && new Date() < firstProgramEntry.expectedStartAt) {
-    return <NotYetStarted startAt={firstProgramEntry.expectedStartAt} />;
+  if (
+    !programEntry &&
+    (!firstProgramEntry || new Date() < firstProgramEntry.expectedStartAt)
+  ) {
+    return (
+      <NotYetStarted
+        startAt={
+          firstProgramEntry ? firstProgramEntry.expectedStartAt : undefined
+        }
+      />
+    );
   }
 
-  if (!programEntry && new Date() > lastProgramEntry.expectedStartAt) {
+  if (
+    !programEntry &&
+    lastProgramEntry &&
+    new Date() > lastProgramEntry.expectedStartAt
+  ) {
     return <AlreadyFinished />;
   }
 
@@ -147,17 +135,95 @@ const Home = () => {
 
   return (
     <>
-      <article className="container container--wide pt-8 lg:py-24 cf2021">
-        <section className="cf2021__video space-y-8">
-          <div className="flex items-center justify-between mb-4 lg:mb-8">
-            <h1 className="head-alt-md lg:head-alt-lg mb-0">
-              Bod č. {programEntry.number}: {programEntry.title}
+      <Helmet>
+        <title>Přímý přenos | CF 2024 | Pirátská strana</title>
+        <meta
+          name="description"
+          content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
+        />
+        <meta
+          property="og:title"
+          content="Přímý přenos | CF 2024 | Pirátská strana"
+        />
+        <meta
+          property="og:description"
+          content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
+        />
+      </Helmet>
+      <Joyride
+        beaconComponent={Beacon}
+        continuous={true}
+        locale={{
+          back: "Zpět",
+          close: "Zavřít",
+          last: "Poslední",
+          next: "Další",
+          skip: "Přeskočit intro",
+        }}
+        key={joyrideRenderKey}
+        run={runJoyRide}
+        showProgress={true}
+        showSkipButton={true}
+        scrollToFirstStep={true}
+        callback={handleJoyrideCallback}
+        steps={steps}
+        styles={{
+          options: {
+            arrowColor: "#fff",
+            backgroundColor: "#fff",
+            overlayColor: "rgba(255, 255, 255, 0.75)",
+            primaryColor: "#000",
+            textColor: "#000",
+            textAlign: "left",
+            outline: "none",
+            zIndex: 1000,
+            borderRadius: 0,
+          },
+          tooltip: {
+            borderRadius: 0,
+          },
+          tooltipContent: {
+            textAlign: "left",
+          },
+          buttonClose: {
+            borderRadius: 0,
+            fontSize: "0.875rem",
+          },
+          buttonNext: {
+            borderRadius: 0,
+            padding: ".75em 2em",
+            fontSize: "0.875rem",
+          },
+          buttonBack: {
+            color: "#4c4c4c",
+            fontSize: "0.875rem",
+          },
+          buttonSkip: {
+            color: "#4c4c4c",
+            fontSize: "0.875rem",
+          },
+        }}
+      />
+      <article className="container container--wide py-8 lg:py-24 cf2021 bg-white">
+        <div className="cf2021__title flex justify-between">
+          <h1 className="head-alt-base lg:head-alt-lg">
+            {programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
+            {programEntry.title}
           </h1>
+          <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 hidden lg:block 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="top"
+                onClick={showTutorial}
+              />
               {displayActions && (
-              <DropdownMenu right triggerSize="lg" className="pl-4">
+                <DropdownMenu right triggerSize="lg" className="z-20">
                   <DropdownMenuItem
                     onClick={() => setShowProgramEditModal(true)}
-                  icon="ico--edit-pencil"
+                    icon="ico--pencil"
                     title="Přejmenovat bod programu"
                     titleSize="base"
                     iconSize="base"
@@ -190,24 +256,43 @@ const Home = () => {
                 </DropdownMenu>
               )}
             </div>
-
-          <iframe
-            width="100%"
-            height="500"
-            src="https://www.youtube.com/embed/73jJLspL8o8"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen=""
+          </div>
+        </div>
+        <section
+          className="cf2021__video"
+          // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
+          style={{ maxWidth: "calc(100vw - 2rem)" }}
+        >
+          <div className="container-padding--zero md:container-padding--auto">
+            {streamUrl && (
+              <div className="iframe-container joyride-player">
+                <ReactPlayer
+                  url={streamUrl}
                   title="Video stream"
-          ></iframe>
+                  controls={true}
+                  playing={true}
+                  muted={true}
+                  width="100%"
+                  height=""
+                />
+              </div>
+            )}
+            {!streamUrl && (
+              <div className="px-4 py-16 lg:py-48 flex items-center justify-center bg-grey-400 text-center">
+                <span className="text-lg lg:text-xl text-grey-200">
+                  <i className="ico--warning mr-2" /> Stream teď není k
+                  dispozici. Vyčkej na aktualizaci.
+                </span>
+              </div>
+            )}
+            <GlobalStats />
+          </div>
         </section>
 
-        <section className="cf2021__notifications">
-          <div className="lg:card lg:elevation-10">
-            <div className="lg:card__body pb-2 lg:py-6">
-              <h2 className="head-heavy-sm">Oznámení</h2>
-            </div>
+        <section className="cf2021__notifications space-y-8">
+          <JitsiInviteCard />
 
+          <div className="lg:card lg:elevation-10 joyride-announcements">
             <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
             {isAuthenticated && user.role === "chairman" && (
               <AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" />
@@ -215,30 +300,60 @@ const Home = () => {
           </div>
         </section>
 
-        <section className="cf2021__posts">
+        {/* Relative is for fixing the dropdowns on the right which are detached from their immediate container. */}
+        <section
+          className="cf2021__posts relative joyride-posts"
+          // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
+          style={{ maxWidth: "calc(100vw - 2rem)" }}
+        >
           <div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
-            <h2 className="head-heavy-sm whitespace-no-wrap">
+            <h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
               <span>Příspěvky v rozpravě</span>
-              {!programEntry.discussionOpened && (
-                <i
-                  className="ico--lock text-black ml-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
-                  title="Rozprava je uzavřena"
-                />
-              )}
-              {programEntry.discussionOpened && (
-                <i
-                  className="ico--lock-open text-black ml-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
-                  title="Probíhá rozprava"
-                />
-              )}
             </h2>
             <PostFilters />
           </div>
 
-          <PostsContainer className="container-padding--zero lg:container-padding--auto" />
-          {programEntry.discussionOpened && isAuthenticated && (
-            <AddPostForm className="my-8 space-y-4" />
+          {!programEntry.discussionOpened &&
+            (!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
+              <p className="alert alert--light items-center mb-4 elevation-4">
+                <i className="alert__icon ico--lock text-lg" />
+                Rozprava je uzavřena - příspěvky teď nelze přidávat.
+              </p>
+            )}
+          {programEntry.discussionOpened && !isAuthenticated && (
+            <p className="alert alert--light items-center mb-4">
+              <i className="alert__icon ico--info text-lg" />
+              <span>
+                Pokud chceš přidat nový příspěvek,{"  "}
+                <button onClick={login} className="underline cursor-pointer">
+                  přihlaš se pomocí Pirátské identity
+                </button>
+                .
+              </span>
+            </p>
           )}
+          {programEntry.discussionOpened && isAuthenticated && user.isBanned && (
+            <p className="alert alert--error items-center mb-4">
+              <i className="alert__icon ico--warning text-lg" />
+              Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než ti
+              ho předsedající odebere.
+            </p>
+          )}
+          {programEntry.discussionOpened &&
+            isAuthenticated &&
+            !user.isBanned && (
+              <AddPostForm
+                className="mb-8"
+                canAddProposal={
+                  user.role === "member" || user.role === "chairman"
+                }
+              />
+            )}
+
+          <PostsContainer
+            className="container-padding--zero lg:container-padding--auto"
+            showAddPostCta={programEntry.discussionOpened}
+          />
         </section>
       </article>
       <ProgramEntryEditModal

src/pages/NotFound.jsx

+import React from "react";
+import { Helmet } from "react-helmet-async";
+
+import Button from "components/Button";
+
+const NotFound = () => (
+  <>
+    <Helmet>
+      <title>404ka | CF 2024 | Pirátská strana</title>
+      <meta name="description" content="Tahle stránka tu není." />
+      <meta property="og:title" content="404ka | CF 2024 | Pirátská strana" />
+      <meta property="og:description" content="Tahle stránka tu není." />
+    </Helmet>
+    <article className="container container--default py-8 lg:py-24">
+      <h1 className="head-alt-base lg:head-alt-lg mb-8">
+        404ka: tak tahle stránka tu není
+      </h1>
+      <p className="text-base lg:text-xl mb-8">
+        Dostal/a ses na takzvanou „<strong>čtyřystačtyřku</strong>“, což
+        znamená, že stránka, kterou jsi se pokusil/a navštívit, na tomhle webu
+        není. Zkontroluj, zda máš správný odkaz.
+      </p>
+      <Button
+        routerTo="/"
+        className="text-base lg:text-xl"
+        hoverActive
+        fullwidth
+      >
+        Přejít na hlavní stránku
+      </Button>
+    </article>
+  </>
+);
+
+export default NotFound;

src/serviceWorker.js

@@ -16,8 +16,8 @@ const isLocalhost = Boolean(
     window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 export function register(config) {
@@ -43,7 +43,7 @@ export function register(config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             "This web app is being served cache-first by a service " +
-              "worker. To learn more, visit https://bit.ly/CRA-PWA"
+              "worker. To learn more, visit https://bit.ly/CRA-PWA",
           );
         });
       } else {
@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
               // content until all client tabs are closed.
               console.log(
                 "New content is available and will be used when all " +
-                  "tabs for this page are closed. See https://bit.ly/CRA-PWA."
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA.",
               );
 
               // Execute callback
@@ -123,7 +123,7 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        "No internet connection found. App is running in offline mode."
+        "No internet connection found. App is running in offline mode.",
       );
     });
 }

src/stores.js

 import memoize from "lodash/memoize";
 import { Store } from "pullstate";
 
+/** @type {CF2021.GlobalInfoStorePayload} */
+const globalInfoStoreInitial = {
+  connectionState: "connecting",
+  onlineMembers: 0,
+  onlineUsers: 0,
+  groupSizeHalf: null,
+  websocketUrl: null,
+  streamUrl: null,
+  protocolUrl: null,
+  protocol: null,
+};
+
+export const GlobalInfoStore = new Store(globalInfoStoreInitial);
+
 /** @type {CF2021.AuthStorePayload} */
 const authStoreInitial = {
   isAuthenticated: false,
+  showJitsiInvitePopup: false,
+  jitsiPopupDismissed: false,
 };
 
 export const AuthStore = new Store(authStoreInitial);
@@ -32,12 +48,10 @@ const postStoreInitial = {
   window: {
     items: [],
     itemCount: 0,
-    page: 1,
-    perPage: 20,
   },
   filters: {
-    flags: "all",
-    sort: "byDate",
+    flags: "active",
+    sort: "byScore",
     type: "all",
     showPendingProposals: false,
   },
@@ -49,7 +63,7 @@ export const getGroupByCode = memoize(
   (groupMappings, groupCode) => {
     return groupMappings.find((gm) => gm.code === groupCode);
   },
-  (groupMappings, groupCode) => [groupMappings, groupCode]
+  (groupMappings, groupCode) => [groupMappings, groupCode],
 );
 
 export const getGroupsByCode = memoize((groupMappings, groupCodes) => {

src/ws/handlers/global.js

+import isNumber from "lodash/isNumber";
+
+import { GlobalInfoStore } from "stores";
+
+export const handleOnlineUsersUpdated = (payload) => {
+  GlobalInfoStore.update((state) => {
+    state.onlineUsers = isNumber(payload.all) ? payload.all : 0;
+    state.onlineMembers = isNumber(payload.members) ? payload.members : 0;
+    state.groupSizeHalf = isNumber(payload.group_size_half)
+      ? payload.group_size_half
+      : null;
+  });
+};