src/components/modals/ModalConfirm.jsx

 import React from "react";
 
 import Button from "components/Button";
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardBodyText,
-  CardHeadline,
-} from "components/cards";
-import ErrorMessage from "components/ErrorMessage";
 
-import Modal from "./Modal";
+import ModalWithActions from "./ModalWithActions";
 
 const ModalConfirm = ({
   title,
@@ -23,24 +15,8 @@ const ModalConfirm = ({
   error,
   ...props
 }) => {
-  return (
-    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
-      <Card>
-        <CardBody>
-          <div className="flex items-center justify-between mb-4">
-            <CardHeadline>{title}</CardHeadline>
-            <button onClick={onCancel}>
-              <i className="ico--close"></i>
-            </button>
-          </div>
-          <CardBodyText>{children}</CardBodyText>
-          {error && (
-            <ErrorMessage className="mt-2">
-              Při provádění akce došlo k problému: {error}
-            </ErrorMessage>
-          )}
-        </CardBody>
-        <CardActions right className="space-x-1">
+  const actions = (
+    <>
       <Button
         hoverActive
         color="blue-300"
@@ -52,15 +28,26 @@ const ModalConfirm = ({
       </Button>
       <Button
         hoverActive
-            color="red-600"
+        color="grey-125"
         className="text-sm"
         onClick={onCancel}
       >
         {cancelActionLabel}
       </Button>
-        </CardActions>
-      </Card>
-    </Modal>
+    </>
+  );
+
+  return (
+    <ModalWithActions
+      onClose={onCancel}
+      title={title}
+      error={error}
+      actions={actions}
+      containerClassName="max-w-md"
+      {...props}
+    >
+      {children}
+    </ModalWithActions>
   );
 };
 

src/components/modals/ModalWithActions.jsx

+import React from "react";
+
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardBodyText,
+  CardHeadline,
+} from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+
+import Modal from "./Modal";
+
+const ModalConfirm = ({
+  title,
+  children,
+  actions,
+  error,
+  onClose,
+  ...props
+}) => {
+  return (
+    <Modal onRequestClose={onClose} {...props}>
+      <Card className="elevation-21">
+        <CardBody>
+          <div className="flex items-center justify-between mb-4">
+            <CardHeadline>{title}</CardHeadline>
+            <button
+              onClick={onClose}
+              type="button"
+              data-tip="Zavřít"
+              aria-label="Zavřít"
+            >
+              <i className="ico--cross"></i>
+            </button>
+          </div>
+          <CardBodyText>{children}</CardBodyText>
+          {error && (
+            <ErrorMessage className="mt-2">
+              Při provádění akce došlo k problému: {error}
+            </ErrorMessage>
+          )}
+        </CardBody>
+        <CardActions right className="space-x-1">
+          {actions}
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default React.memo(ModalConfirm);

src/components/onboarding/Beacon.jsx

+import React from "react";
+
+const Beacon = React.forwardRef(({ onClick }, ref) => (
+  <span
+    className="relative inline-flex h-8 w-8"
+    title="Jsi online"
+    ref={ref}
+    onClick={onClick}
+  >
+    <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-red-600"></span>
+    <span className="inline-flex rounded-full w-8 h-8 bg-red-600"></span>
+  </span>
+));
+
+export default Beacon;

src/components/onboarding/index.jsx

+import React from "react";
+
+// import Chip from "components/Chip";
+
+export { default as Beacon } from "./Beacon";
+
+export const steps = [
+  {
+    target: "body",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2024</h1>
+        <p className="leading-snug text-base">
+            Víme, že volebního zasedání se nemohou zúčastnit všichni.
+            Abychom nepřítomným umožnili zasedání lépe sledovat, připravili
+            jsme tuhle aplikaci, která umožňuje zasáhnout do rozpravy.
+            Nejprve si vysvětlíme, jak funguje.
+        </p>
+      </>
+    ),
+    placement: "center",
+    disableBeacon: true,
+  },
+  {
+    target: ".joyride-login",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Jsi člen či příznivec? Přihlaš se</h1>
+        <p className="leading-snug text-base">
+          Pokud jsi člen strany nebo registrovaný příznivec, je rozhodně dobrý
+          nápad se přihlásit. Budeš tak moci přidávat příspěvky v rozpravě a
+          palcovat je.
+        </p>
+      </>
+    ),
+  },
+  {
+    target: ".joyride-player",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Video stream</h1>
+        <p className="leading-snug text-base">
+          Zde můžeš sledovat přímý přenos z jednání. Přenos má drobné zpoždění,
+          tak s tím počítej.
+        </p>
+      </>
+    ),
+    placement: "bottom",
+  },
+  {
+    target: ".joyride-posts",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Příspěvky v rozpravě</h1>
+        <div className="leading-snug text-base space-y-2">
+          <p>
+            Předsedající pro každý bod programu může otevřít či uzavřít
+            rozpravu. V rámci rozpravy je možné přidávat běžné diskusní
+            příspěvky, nebo návrhy postupu.
+          </p>
+          <p>
+            <strong>Běžné příspěvky</strong> se zobrazí ihned po přidání.
+          </p>
+          <p>
+            U příspěvků se též zobrazuje celková míra podpory. Legenda barevného
+            odlišení je následující:
+          </p>
+
+          <ul className="unordered-list unordered-list--dense">
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-green-400 text-white">
+                Zelenou
+              </div>{" "}
+              je označen příspěvek, na kterém je konsensus, nebo takový, který
+              získal podporu skupiny členů.
+            </li>
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-yellow-400 text-grey-300">
+                Žlutou
+              </div>{" "}
+              je označen příspěvek, který podporu teprve sbírá.
+            </li>
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-red-600 text-white">
+                Červeně
+              </div>{" "}
+              je označen příspěvek, který má spíše negativní odezvu.
+            </li>
+            <li>
+              <div className="px-1 text-sm font-bold inline-block bg-grey-125 text-grey-200">
+                Šedivě
+              </div>{" "}
+              je označen příspěvek, který zatím není ohodnocen.
+            </li>
+          </ul>
+          <p>
+            <strong>Návrhy postupui</strong> po přidání nejprve zkontroluje předsedající a pokud sezná,
+            že je takový návrh přípusný, prohlásí ho za hlasovatelný a předloží k hlasování
+            v plénu. Na základě toho návrh předsedající označí za schválený, nebo za zamítnutý.
+          </p>
+        </div>
+      </>
+    ),
+    placement: "center",
+  },
+  {
+    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-announcements",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">Oblast pro oznámení</h1>
+        <p className="leading-snug text-base">
+          V této oblasti se zobrazují oznámení podstatných událostí v rámci
+          jednání, jako například nové rozhodující hlasování, nebo třeba nový
+          hlasovatelný návrh postupu.
+        </p>
+      </>
+    ),
+    placement: "left",
+  },
+  {
+    target: "body",
+    content: (
+      <>
+        <h1 className="head-alt-sm mb-4">To je vše!</h1>
+        <p className="leading-snug text-base">
+          Ať se ti letošní „CFko“ líbí.
+        </p>
+      </>
+    ),
+    placement: "center",
+  },
+];

src/components/posts/Post.jsx

@@ -5,6 +5,7 @@ import { format, isToday } from "date-fns";
 
 import Chip from "components/Chip";
 import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
+import PostScore from "components/posts/PostScore";
 import Thumbs from "components/Thumbs";
 
 const Post = ({
@@ -20,12 +21,15 @@ const Post = ({
   state,
   dimIfArchived = true,
   currentUser,
+  supportThreshold,
   canThumb,
+  reportSeen = true,
   onLike,
   onDislike,
   onHide,
   onBanUser,
   onUnbanUser,
+  onInviteUser,
   onAnnounceProcedureProposal,
   onAcceptProcedureProposal,
   onRejectProcedureProposal,
@@ -33,20 +37,21 @@ const Post = ({
   onEdit,
   onArchive,
   onSeen,
+  ...props
 }) => {
   const { ref, inView } = useInView({
     threshold: 0.8,
     trackVisibility: true,
-    delay: 1500,
-    skip: seen,
+    delay: 1000,
+    skip: !reportSeen,
     triggerOnce: true,
   });
 
   useEffect(() => {
-    if (!seen && inView && onSeen) {
+    if (inView && onSeen) {
       onSeen();
     }
-  });
+  }, [inView, onSeen]);
 
   const wrapperClassName = classNames(
     "flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
@@ -82,28 +87,53 @@ const Post = ({
     labels.push(
       {
         pending: (
-          <Chip key="state__pending" condensed color="grey-500">
+          <Chip
+            key="state__pending"
+            condensed
+            color="grey-500"
+            aria-label="Návrh čekající na zpracování"
+          >
             Čeká na zpracování
           </Chip>
         ),
         announced: (
-          <Chip key="state__announced" condensed color="blue-300">
-            Vyhlášený
+          <Chip
+            key="state__announced"
+            condensed
+            color="blue-300"
+            aria-label="Návrh k hlasování"
+          >
+            K hlasování
           </Chip>
         ),
         accepted: (
-          <Chip key="state__accepted" condensed color="green-400">
+          <Chip
+            key="state__accepted"
+            condensed
+            color="green-400"
+            aria-label="Schválený návrh"
+          >
             Schválený
           </Chip>
         ),
         rejected: (
-          <Chip key="state__rejected" condensed color="red-600">
+          <Chip
+            key="state__rejected"
+            condensed
+            color="red-600"
+            aria-label="Zamítnutý návrh"
+          >
             Zamítnutý
           </Chip>
         ),
         "rejected-by-chairman": (
-          <Chip key="state__rejected-by-chairmen" condensed color="red-600">
-            Zamítnutý předsedajícím
+          <Chip
+            key="state__rejected-by-chairmen"
+            condensed
+            color="red-600"
+            aria-label="Návrh zamítnutý předsedajícím"
+          >
+            Zamítnutý předs.
           </Chip>
         ),
       }[state]
@@ -136,9 +166,11 @@ const Post = ({
     type === "procedure-proposal" &&
     ["announced", "pending"].includes(state);
   const showEditAction =
-    isChairman || (currentUser && currentUser.id === author.id);
+    isChairman ||
+    (currentUser && currentUser.id === author.id && !currentUser.isBanned);
   const showBanAction = isChairman && !author.isBanned;
   const showUnbanAction = isChairman && author.isBanned;
+  const showInviteAction = isChairman;
   const showHideAction = isChairman && !archived;
   const showArchiveAction = isChairman && !archived;
 
@@ -151,6 +183,7 @@ const Post = ({
     showEditAction,
     showBanAction,
     showUnbanAction,
+    showInviteAction,
     showHideAction,
     showArchiveAction,
   ].some((item) => !!item);
@@ -159,29 +192,33 @@ const Post = ({
     __html: content,
   };
 
+  const thumbsVisible = !archived && (type === "post" || state === "announced");
+
   return (
-    <div className={wrapperClassName} ref={ref}>
+    <div className={wrapperClassName} ref={ref} {...props}>
       <img
         src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`}
-        className="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3 object-cover"
+        className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
         alt={author.name}
       />
-      <div className="flex-1">
+      <div className="flex-1 overflow-hidden">
         <div className="mb-1">
           <div className="flex justify-between items-start xl:items-center">
             <div className="flex flex-col xl:flex-row xl:items-center">
               <div className="flex flex-col xl:flex-row xl:items-center">
                 <span className="font-bold">{author.name}</span>
                 <div className="mt-1 xl:mt-0 xl:ml-2 leading-tight">
-                  <span className="text-grey-200 text-sm">{author.group}</span>
-                  <span className="text-grey-200 ml-1 text-sm">
+                  <span className="text-grey-200 text-xs sm:text-sm">
+                    {author.group}
+                  </span>
+                  <span className="text-grey-200 ml-1 text-xs sm:text-sm">
                     @{" "}
                     {format(
                       datetime,
                       isToday(datetime) ? "H:mm" : "dd. MM. H:mm"
                     )}
                     {modified && (
-                      <span className="text-grey-200 text-sm block md:inline md:ml-2">
+                      <span className="text-grey-200 text-xs block md:inline md:ml-2">
                         (upraveno)
                       </span>
                     )}
@@ -193,6 +230,7 @@ const Post = ({
               </div>
             </div>
             <div className="flex items-center">
+              {thumbsVisible && (
                 <Thumbs
                   likes={ranking.likes}
                   dislikes={ranking.dislikes}
@@ -201,8 +239,16 @@ const Post = ({
                   onDislike={onDislike}
                   myVote={ranking.myVote}
                 />
+              )}
+              <PostScore
+                className="ml-2"
+                postType={type}
+                ranking={ranking}
+                rankingReadonly={!thumbsVisible}
+                supportThreshold={supportThreshold}
+              />
               {showActions && (
-                <DropdownMenu right className="pl-4">
+                <DropdownMenu right className="pl-4 static">
                   {showAnnounceAction && (
                     <DropdownMenuItem
                       onClick={onAnnounceProcedureProposal}
@@ -234,7 +280,7 @@ const Post = ({
                   {showEditAction && (
                     <DropdownMenuItem
                       onClick={onEdit}
-                      icon="ico--edit-pencil"
+                      icon="ico--pencil"
                       title="Upravit příspěvek"
                     />
                   )}
@@ -252,6 +298,13 @@ const Post = ({
                       title="Odblokovat uživatele"
                     />
                   )}
+                  {showInviteAction && (
+                    <DropdownMenuItem
+                      onClick={onInviteUser}
+                      icon="ico--phone"
+                      title="Pozvat uživatele do Jitsi"
+                    />
+                  )}
                   {showHideAction && (
                     <DropdownMenuItem
                       onClick={onHide}
@@ -275,7 +328,7 @@ const Post = ({
           {labels}
         </div>
         <div
-          className="text-sm lg:text-base text-black leading-normal content-block"
+          className="text-sm lg:text-base text-black leading-normal content-block overflow-x-auto overflow-y-hidden mt-1"
           dangerouslySetInnerHTML={htmlContent}
         ></div>
       </div>
@@ -283,4 +336,4 @@ const Post = ({
   );
 };
 
-export default Post;
+export default React.memo(Post);

src/components/posts/PostEditModal.jsx

@@ -15,46 +15,49 @@ const PostEditModal = ({
   ...props
 }) => {
   const [text, setText] = useState(post.content);
-  const [noTextError, setNoTextError] = useState(false);
+  const [textError, setTextError] = useState(null);
 
   const onTextInput = (newText) => {
     setText(newText);
 
     if (newText !== "") {
-      setNoTextError(false);
+      if (newText.length >= 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
     }
   };
 
   const confirm = (evt) => {
+    evt.preventDefault();
+
     if (!!text) {
       onConfirm(text);
     } else {
-      setNoTextError(true);
+      setTextError("Před upravením příspěvku nezapomeňte vyplnit jeho obsah.");
     }
   };
 
   return (
     <Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
-      <Card>
+      <form onSubmit={confirm}>
+        <Card className="elevation-21">
           <CardBody>
             <div className="flex items-center justify-between mb-4">
               <CardHeadline>Upravit text příspěvku</CardHeadline>
-            <button onClick={onCancel}>
-              <i className="ico--close"></i>
+              <button onClick={onCancel} type="button">
+                <i className="ico--cross"></i>
               </button>
             </div>
             <MarkdownEditor
               value={text}
               onChange={onTextInput}
-            error={
-              noTextError
-                ? "Před upravením příspěvku nezapomeňte vyplnit jeho obsah."
-                : null
-            }
+              error={textError}
               placeholder="Vyplňte text příspěvku"
               toolbarCommands={[
                 ["header", "bold", "italic", "strikethrough"],
-              ["link", "quote", "image"],
+                ["link", "quote"],
                 ["unordered-list", "ordered-list"],
               ]}
             />
@@ -69,6 +72,7 @@ const PostEditModal = ({
               hoverActive
               color="blue-300"
               className="text-sm"
+              disabled={textError || confirming}
               loading={confirming}
               onClick={confirm}
             >
@@ -84,6 +88,7 @@ const PostEditModal = ({
             </Button>
           </CardActions>
         </Card>
+      </form>
     </Modal>
   );
 };

src/components/posts/PostList.jsx

-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import classNames from "classnames";
 
 import Post from "./Post";
@@ -6,7 +6,9 @@ import Post from "./Post";
 const PostList = ({
   className,
   items,
+  showAddPostCta,
   currentUser,
+  supportThreshold,
   canThumb,
   dimArchived,
   onLike,
@@ -14,6 +16,7 @@ const PostList = ({
   onHide,
   onBanUser,
   onUnbanUser,
+  onInviteUser,
   onAnnounceProcedureProposal,
   onAcceptProcedureProposal,
   onRejectProcedureProposal,
@@ -27,12 +30,16 @@ const PostList = ({
     responderFn(post);
   };
 
+  const windowSize = 20;
+  const [window, setWindow] = useState(windowSize);
+
   const onPostLike = buildHandler(onLike);
   const onPostDislike = buildHandler(onDislike);
   const onPostEdit = buildHandler(onEdit);
   const onPostHide = buildHandler(onHide);
   const onPostBanUser = buildHandler(onBanUser);
   const onPostUnbanUser = buildHandler(onUnbanUser);
+  const onPostInviteUser = buildHandler(onInviteUser);
   const onPostArchive = buildHandler(onArchive);
   const onPostAnnounceProcedureProposal = buildHandler(
     onAnnounceProcedureProposal
@@ -43,15 +50,27 @@ const PostList = ({
     onRejectProcedureProposalByChairman
   );
 
-  const onPostSeen = (post) => () => {
+  const onPostSeen = useCallback(
+    (post) => () => {
+      if (!post.seen) {
         onSeen(post);
-  };
+      }
+
+      // Once last post in window is reached, attempt show more.
+      if (items.indexOf(post) === window - 1) {
+        setWindow(window + windowSize);
+      }
+    },
+    [items, onSeen, window]
+  );
+
+  const windowItems = useMemo(() => {
+    return items.slice(0, window).filter((item) => !item.hidden);
+  }, [items, window]);
 
   return (
     <div className={classNames("space-y-px", className)}>
-      {items
-        .filter((item) => !item.hidden)
-        .map((item) => (
+      {windowItems.map((item, idx) => (
         <Post
           key={item.id}
           datetime={item.datetime}
@@ -60,18 +79,20 @@ const PostList = ({
           state={item.state}
           content={item.contentHtml}
           ranking={item.ranking}
-            historyLog={item.historyLog}
           modified={item.modified}
           seen={item.seen}
+          reportSeen={!item.seen || idx === window - 1}
           archived={item.archived}
           dimIfArchived={dimArchived}
           currentUser={currentUser}
+          supportThreshold={supportThreshold}
           canThumb={canThumb}
           onLike={onPostLike(item)}
           onDislike={onPostDislike(item)}
           onHide={onPostHide(item)}
           onBanUser={onPostBanUser(item)}
           onUnbanUser={onPostUnbanUser(item)}
+          onInviteUser={onPostInviteUser(item)}
           onAnnounceProcedureProposal={onPostAnnounceProcedureProposal(item)}
           onAcceptProcedureProposal={onPostAcceptProcedureProposal(item)}
           onRejectProcedureProposal={onPostRejectProcedureProposal(item)}
@@ -83,8 +104,8 @@ const PostList = ({
           onSeen={onPostSeen(item)}
         />
       ))}
-      {!items.length && (
-        <p className="p-4 lg:p-0 lg:py-3">
+      {showAddPostCta && !items.length && (
+        <p className="p-4 lg:p-0 lg:py-3 leading-snug text-sm md:text-base">
           Nikdo zatím žádný odpovídající příspěvek do rozpravy nepřidal. Budeš
           první?
         </p>

src/components/posts/PostScore.jsx

+import React from "react";
+import classNames from "classnames";
+
+const PostScore = ({
+  postType,
+  ranking,
+  supportThreshold,
+  rankingReadonly,
+  className,
+}) => {
+  const { score, dislikes } = ranking;
+  const highlight = postType === "procedure-proposal" && !rankingReadonly;
+  const coloring = highlight
+    ? {
+        "bg-red-600 text-white": score < 0,
+        "bg-grey-125 text-grey-200": score === 0 && score < supportThreshold,
+        "bg-yellow-400 text-grey-300":
+          score > 0 && dislikes > 0 && score < supportThreshold,
+        "bg-green-400 text-white":
+          score >= supportThreshold || (score > 0 && dislikes <= 0),
+      }
+    : "bg-grey-125 text-grey-200";
+
+  let title;
+
+  if (postType === "procedure-proposal") {
+    if (rankingReadonly) {
+      title = `Návrh postupu získal podporu ${score} hlasů.`;
+    } else if (dislikes > 0) {
+      if (score < supportThreshold) {
+        title = `Aktuální podpora je ${score} hlasů, pro získání podpory skupiny členů chybí ještě ${
+          supportThreshold - score
+        }.`;
+      } else {
+        title = `Aktuální podpora je ${score} hlasů, což je dostatek pro získání podpory skupiny členů (vyžaduje alespoň ${supportThreshold} hlasů).`;
+      }
+    } else {
+      title = `Příspěvek získal ${score} hlasů bez jakýchkoliv hlasů proti a má tedy konkludentní podporu.`;
+    }
+  } else {
+    title = `Příspěvek získal podporu ${score} hlasů.`;
+  }
+
+  return (
+    <span
+      className={classNames(
+        "p-1 text-sm flex items-center space-x-1",
+        coloring,
+        className
+      )}
+      style={{ cursor: "help" }}
+      aria-label={title}
+      data-tip={title}
+      data-type="dark"
+      data-place="top"
+    >
+      <i className="ico--power" />
+      <span className="font-bold">{score}</span>
+    </span>
+  );
+};
+
+export default React.memo(PostScore);

src/components/posts/RejectPostModalConfirm.jsx

+import React from "react";
+
+import Button from "components/Button";
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardBodyText,
+  CardHeadline,
+} from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+
+import Modal from "./Modal";
+
+const RejectPostModalConfirm = ({
+  title,
+  children,
+  yesActionLabel = "OK",
+  yesAndArchiveActionLabel = "OK",
+  cancelActionLabel = "Zrušit",
+  onCancel,
+  onConfirm,
+  onConfirmAndArchive,
+  confirming,
+  error,
+  ...props
+}) => {
+  return (
+    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
+      <Card className="elevation-21">
+        <CardBody>
+          <div className="flex items-center justify-between mb-4">
+            <CardHeadline>{title}</CardHeadline>
+            <button onClick={onCancel} type="button">
+              <i className="ico--cross"></i>
+            </button>
+          </div>
+          <CardBodyText>{children}</CardBodyText>
+          {error && (
+            <ErrorMessage className="mt-2">
+              Při provádění akce došlo k problému: {error}
+            </ErrorMessage>
+          )}
+        </CardBody>
+        <CardActions right className="space-x-1">
+          <Button
+            hoverActive
+            color="blue-300"
+            className="text-sm"
+            onClick={onConfirm}
+            loading={confirming}
+          >
+            {yesActionLabel}
+          </Button>
+          <Button
+            hoverActive
+            color="blue-300"
+            className="text-sm"
+            onClick={onConfirm}
+            loading={confirming}
+          >
+            {yesAndArchiveActionLabel}
+          </Button>
+          <Button
+            hoverActive
+            color="red-600"
+            className="text-sm"
+            onClick={onCancel}
+          >
+            {cancelActionLabel}
+          </Button>
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default React.memo(RejectPostModalConfirm);

src/components/program/ProgramEntryEditModal.jsx

@@ -24,12 +24,12 @@ const ProgramEntryEditModal = ({
 
   return (
     <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
-      <Card>
+      <Card className="elevation-21">
         <CardBody>
           <div className="flex items-center justify-between mb-4">
             <CardHeadline>Upravit název programového bodu</CardHeadline>
             <button onClick={onCancel}>
-              <i className="ico--close"></i>
+              <i className="ico--cross"></i>
             </button>
           </div>
           <div className="form-field">

src/config.js

-export default {
-  styleguideUrl: "https://styleguide.pir-test.eu/latest",
-};

src/containers/AddAnnouncementForm.jsx

@@ -6,14 +6,13 @@ import Button from "components/Button";
 import ErrorMessage from "components/ErrorMessage";
 import MarkdownEditor from "components/mde/MarkdownEditor";
 import { useActionState } from "hooks";
-
-const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+import { urlRegex } from "utils";
 
 const AddAnnouncementForm = ({ className }) => {
   const [text, setText] = useState("");
   const [link, setLink] = useState("");
-  const [linkValid, setLinkValid] = useState(null);
-  const [noTextError, setNoTextError] = useState(false);
+  const [textError, setTextError] = useState(null);
+  const [linkError, setLinkError] = useState(null);
   const [type, setType] = useState("announcement");
 
   const [adding, addingError] = useActionState(addAnnouncement, {
@@ -26,39 +25,66 @@ const AddAnnouncementForm = ({ className }) => {
     setText(newText);
 
     if (newText !== "") {
-      setNoTextError(false);
+      if (newText.length > 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
     }
   };
 
-  const onLinkInput = (evt) => {
-    setLink(evt.target.value);
+  const onLinkInput = (newLink) => {
+    setLink(newLink);
 
-    if (!!evt.target.value) {
-      setLinkValid(!!evt.target.value.match(urlRegex));
+    if (!!newLink) {
+      if (newLink.length > 1024) {
+        setLinkError("Maximální délka URL je 256 znaků.");
+      } else {
+        setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL.");
+      }
     }
   };
 
   const onAdd = async (evt) => {
-    if (!link) {
-      setLinkValid(false);
+    evt.preventDefault();
+
+    let preventAction = false;
+    const payload = {
+      content: text,
+      type,
+    };
+
+    if (!text) {
+      setTextError("Před přidáním oznámení nezapomeňte vyplnit jeho obsah.");
+      preventAction = true;
+    } else if (!!text && text.length > 1024) {
+      setTextError("Maximální délka oznámení je 1024 znaků.");
+      preventAction = true;
+    }
+
+    if (type === "voting" && !link) {
+      setLinkError("Zadejte platnou URL.");
+      preventAction = true;
+    } else {
+      payload.link = link;
+    }
+
+    if (preventAction) {
+      return;
     }
 
-    if (!!text) {
-      if (type === "voting" && link && linkValid) {
     const result = await addAnnouncement.run({ content: text, link, type });
 
     if (!result.error) {
       setText("");
       setLink("");
-        }
-      }
-    } else {
-      setNoTextError(true);
+      setTextError(null);
+      setLinkError(null);
     }
   };
 
   return (
-    <div className={className}>
+    <form className={className} onSubmit={onAdd}>
       {addingError && (
         <ErrorMessage>
           Při přidávání oznámení došlo k problému: {addingError}.
@@ -74,7 +100,7 @@ const AddAnnouncementForm = ({ className }) => {
               <label>
                 <input
                   type="radio"
-                  name="type"
+                  name="announcementType"
                   value="announcement"
                   defaultChecked
                 />
@@ -84,7 +110,7 @@ const AddAnnouncementForm = ({ className }) => {
 
             <div className="radio form-field__control">
               <label>
-                <input type="radio" name="type" value="voting" />
+                <input type="radio" name="announcementType" value="voting" />
                 <span>Rozhodující hlasování</span>
               </label>
             </div>
@@ -94,11 +120,7 @@ const AddAnnouncementForm = ({ className }) => {
         <MarkdownEditor
           value={text}
           onChange={onTextInput}
-          error={
-            noTextError
-              ? "Před přidáním oznámení nezapomeňte vyplnit jeho obsah."
-              : null
-          }
+          error={textError}
           placeholder="Vyplňte text oznámení"
           toolbarCommands={[
             ["bold", "italic", "strikethrough"],
@@ -110,7 +132,7 @@ const AddAnnouncementForm = ({ className }) => {
         <div
           className={classNames("form-field", {
             hidden: type !== "voting",
-            "form-field--error": linkValid === false,
+            "form-field--error": !!linkError,
           })}
         >
           <div className="form-field__wrapper form-field__wrapper--shadowed">
@@ -119,29 +141,27 @@ const AddAnnouncementForm = ({ className }) => {
               className="text-input text-sm text-input--has-addon-l form-field__control"
               value={link}
               placeholder="URL hlasování"
-              onChange={onLinkInput}
+              onChange={(evt) => onLinkInput(evt.target.value)}
             />
             <div className="text-input-addon text-input-addon--l order-first">
-              <i className="ico--link1"></i>
+              <i className="ico--link"></i>
             </div>
           </div>
-          {linkValid === false && (
-            <div className="form-field__error">Zadejte platnou URL.</div>
-          )}
+          {!!linkError && <div className="form-field__error">{linkError}</div>}
         </div>
       </div>
 
       <Button
-        onClick={onAdd}
+        type="submit"
         className="text-sm mt-4"
         hoverActive
         loading={adding}
-        disabled={adding}
+        disabled={textError || linkError || adding}
         fullwidth
       >
         Přidat oznámení
       </Button>
-    </div>
+    </form>
   );
 };
 

src/containers/AddPostForm.jsx

-import React, { useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
+import useOutsideClick from "@rooks/use-outside-click";
+import useTimeout from "@rooks/use-timeout";
+import classNames from "classnames";
 
 import { addPost, addProposal } from "actions/posts";
-import { DropdownButton, DropdownButtonItem } from "components/dropdown-button";
+import Button from "components/Button";
+import { Card, CardBody } from "components/cards";
 import ErrorMessage from "components/ErrorMessage";
 import MarkdownEditor from "components/mde/MarkdownEditor";
 import { useActionState } from "hooks";
 
-const AddPostForm = ({ className }) => {
+const AddPostForm = ({ className, canAddProposal }) => {
+  const cardRef = useRef();
+  const editorRef = useRef();
+  const [expanded, setExpanded] = useState(false);
   const [text, setText] = useState("");
+  const [showAddConfirm, setShowAddConfirm] = useState(false);
   const [type, setType] = useState("post");
-  const [noTextError, setNoTextError] = useState(false);
+  const [error, setError] = useState(null);
   const [addingPost, addingPostError] = useActionState(addPost, {
     content: text,
   });
-  const [addingProposal, addingProposalError] = useActionState(addPost, {
+  const [addingProposal, addingProposalError] = useActionState(addProposal, {
     content: text,
   });
 
+  const apiError = addingPostError || addingProposalError;
+  const is429ApiError =
+    apiError &&
+    apiError.toString().indexOf("Unexpected status code 429") !== -1;
+
+  const onOutsideClick = useCallback(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+
+  const onWrite = useCallback(
+    (evt) => {
+      setShowAddConfirm(false);
+
+      if (!expanded) {
+        setExpanded(true);
+        setTimeout(() => {
+          if (
+            editorRef.current &&
+            editorRef.current.finalRefs.textarea.current
+          ) {
+            editorRef.current.finalRefs.textarea.current.focus();
+          }
+        }, 0);
+      }
+    },
+    [setExpanded, expanded, setShowAddConfirm]
+  );
+
+  const hideAddConfirm = useCallback(() => {
+    setShowAddConfirm(false);
+  }, [setShowAddConfirm]);
+
+  useOutsideClick(cardRef, onOutsideClick);
+
+  const { start: enqueueHideAddConfirm } = useTimeout(hideAddConfirm, 2000);
+
   const onTextInput = (newText) => {
     setText(newText);
 
     if (newText !== "") {
-      setNoTextError(false);
+      if (newText.length >= 1024) {
+        setError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setError(null);
+      }
     }
   };
 
   const onAdd = async (evt) => {
+    evt.preventDefault();
+
     if (!!text) {
+      if (!error) {
         const result = await (type === "post" ? addPost : addProposal).run({
           content: text,
         });
 
         if (!result.error) {
           setText("");
+          setExpanded(false);
+          setShowAddConfirm(true);
+          enqueueHideAddConfirm();
+        }
       }
     } else {
-      setNoTextError(true);
+      setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
     }
   };
 
-  const setTypePost = (evt) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-    setType("post");
-  };
-  const setTypeProposal = (evt) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-    setType("procedure-proposal");
-  };
+  const wrapperClass = classNames(
+    className,
+    "hover:elevation-16 transition duration-500",
+    {
+      "elevation-4 cursor-text": !expanded && !showAddConfirm,
+      "lg:elevation-16 container-padding--zero lg:container-padding--auto": expanded,
+    }
+  );
 
   return (
-    <div className={className}>
-      {addingPostError && (
-        <ErrorMessage>
-          Při přidávání příspěvku došlo k problému: {addingPostError}.
-        </ErrorMessage>
+    <Card className={wrapperClass} ref={cardRef}>
+      <span
+        className={classNames("alert items-center transition duration-500", {
+          "alert--success": showAddConfirm,
+          "alert--light": !showAddConfirm,
+          hidden: expanded,
+        })}
+        onClick={onWrite}
+      >
+        <i
+          className={classNames("alert__icon text-lg mr-4", {
+            "ico--checkmark": showAddConfirm,
+            "ico--pencil": !showAddConfirm,
+          })}
+        />
+        {showAddConfirm && <span>Příspěvek byl přidán.</span>}
+        {!showAddConfirm && <span>Napiš nový příspěvek ...</span>}
+      </span>
+      <CardBody
+        className={
+          "p-4 lg:p-8 " + (showAddConfirm || !expanded ? "hidden" : "")
+        }
+      >
+        <form className="space-y-4" onSubmit={onAdd}>
+          {apiError && is429ApiError && (
+            <div className="alert alert--warning">
+              <i className="alert__icon ico--clock text-lg" />
+              <span>
+                <strong>Zpomal!</strong> Další příspěvek můžeš přidat nejdříve
+                po 1 minutě od přidání posledního.
+              </span>
+            </div>
           )}
-      {addingProposalError && (
+          {apiError && !is429ApiError && (
             <ErrorMessage>
-          Při přidávání příspěvku došlo k problému: {addingProposalError}.
+              Při přidávání příspěvku došlo k problému: {apiError}.
             </ErrorMessage>
           )}
+
           <MarkdownEditor
+            ref={editorRef}
             value={text}
             onChange={onTextInput}
-        error={
-          noTextError
-            ? "Před přidáním příspěvku nezapomeňte vyplnit jeho obsah."
-            : null
-        }
+            error={error}
             placeholder="Vyplňte text vašeho příspěvku"
             toolbarCommands={[
               ["header", "bold", "italic", "strikethrough"],
-          ["link", "quote", "image"],
+              ["link", "quote"],
               ["unordered-list", "ordered-list"],
             ]}
           />
 
-      <div className="space-x-4">
-        <DropdownButton
-          onClick={onAdd}
-          disabled={addingPost || addingProposal}
-          loading={addingPost || addingProposal}
-          fullwidth
-          items={
-            <>
-              {type === "post" && (
-                <DropdownButtonItem onClick={setTypeProposal}>
-                  Navrhnout postup
-                </DropdownButtonItem>
+          {canAddProposal && (
+            <div
+              className="form-field"
+              onChange={(evt) => setType(evt.target.value)}
+            >
+              <div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
+                <div className="radio form-field__control">
+                  <label>
+                    <input
+                      type="radio"
+                      name="postType"
+                      value="post"
+                      defaultChecked
+                    />
+                    <span className="text-sm sm:text-base">
+                      Přidávám <strong>běžný příspěvek</strong>
+                    </span>
+                  </label>
+                </div>
+
+                <div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4">
+                  <label>
+                    <input
+                      type="radio"
+                      name="postType"
+                      value="procedure-proposal"
+                    />
+                    <span className="text-sm sm:text-base">
+                      Přidávám <strong>návrh postupu</strong>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
           )}
+
           {type === "procedure-proposal" && (
-                <DropdownButtonItem onClick={setTypePost}>
-                  Přidat příspěvek
-                </DropdownButtonItem>
+            <p className="alert alert--light text-sm">
+              <i className="alert__icon ico--info mr-2 text-lg hidden md:block" />
+              <span>
+                Návrh postupu se v rozpravě zobrazí až poté, co předsedající{" "}
+                <strong>posoudí jeho přijatelnost</strong>. Po odeslání proto
+                nepanikař, že jej hned nevidíš.
+              </span>
+            </p>
           )}
-            </>
-          }
+
+          <div className="space-x-4">
+            <Button
+              type="submit"
+              disabled={error || addingPost || addingProposal}
+              loading={addingPost || addingProposal}
+              fullwidth
               hoverActive
+              className="text-sm xl:text-base"
             >
               {type === "post" && "Přidat příspěvek"}
               {type === "procedure-proposal" && "Navrhnout postup"}
-        </DropdownButton>
+            </Button>
 
             <span className="text-sm text-grey-200 hidden lg:inline">
               Pro pokročilejší formátování můžete používat{" "}
@@ -117,7 +229,9 @@ const AddPostForm = ({ className }) => {
               .
             </span>
           </div>
-    </div>
+        </form>
+      </CardBody>
+    </Card>
   );
 };
 

src/containers/AnnoucementsContainer.jsx

-import React, { useCallback, useState } from "react";
+import React from "react";
 
 import {
   deleteAnnouncement,
   loadAnnouncements,
   markSeen,
-  updateAnnouncementContent,
+  updateAnnouncement,
 } from "actions/announcements";
 import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
 import AnnouncementList from "components/annoucements/AnnouncementList";
 import { CardBody } from "components/cards";
 import ErrorMessage from "components/ErrorMessage";
 import ModalConfirm from "components/modals/ModalConfirm";
-import { useActionState, useItemActionConfirm } from "hooks";
+import { useItemActionConfirm } from "hooks";
 import { AnnouncementStore, AuthStore } from "stores";
 
-const AnnoucementsContainer = () => {
-  const [itemToEdit, setItemToEdit] = useState(null);
-  const [confirmingEdit, setConfirmingEdit] = useState(false);
-  const [editError, setEditError] = useState(null);
+const AnnoucementsContainer = ({ className }) => {
   const { 2: loadResult } = loadAnnouncements.useWatch();
 
   const [
@@ -25,47 +22,27 @@ const AnnoucementsContainer = () => {
     setItemToDelete,
     onDeleteConfirm,
     onDeleteCancel,
+    deleteState,
   ] = useItemActionConfirm(deleteAnnouncement);
 
-  const [deletingAnnouncement, deletingAnnouncementError] = useActionState(
-    deleteAnnouncement,
-    itemToDelete
-  );
+  const [
+    itemToEdit,
+    setItemToEdit,
+    onEditConfirm,
+    onEditCancel,
+    editState,
+  ] = useItemActionConfirm(updateAnnouncement, (item, payload) => ({
+    item,
+    payload,
+  }));
 
   const { isAuthenticated, user } = AuthStore.useState();
   const items = AnnouncementStore.useState((state) =>
     state.itemIds.map((id) => state.items[id])
   );
 
-  const confirmEdit = useCallback(
-    async (newContent) => {
-      if (itemToEdit && newContent) {
-        setConfirmingEdit(true);
-
-        const result = await updateAnnouncementContent.run({
-          item: itemToEdit,
-          newContent,
-        });
-
-        if (!result.error) {
-          setItemToEdit(null);
-          setEditError(null);
-        } else {
-          setEditError(result.message);
-        }
-
-        setConfirmingEdit(false);
-      }
-    },
-    [itemToEdit, setItemToEdit]
-  );
-
-  const cancelEdit = useCallback(() => {
-    setItemToEdit(null);
-  }, [setItemToEdit]);
-
   return (
-    <>
+    <div className={className}>
       {loadResult && loadResult.error && (
         <CardBody>
           <ErrorMessage>
@@ -84,8 +61,8 @@ const AnnoucementsContainer = () => {
         isOpen={!!itemToDelete}
         onConfirm={onDeleteConfirm}
         onCancel={onDeleteCancel}
-        confirming={deletingAnnouncement}
-        error={deletingAnnouncementError}
+        confirming={deleteState.loading}
+        error={deleteState.error}
         title="Opravdu smazat?"
         yesActionLabel="Smazat"
       >
@@ -95,13 +72,13 @@ const AnnoucementsContainer = () => {
         <AnnouncementEditModal
           isOpen={true}
           announcement={itemToEdit}
-          onConfirm={confirmEdit}
-          onCancel={cancelEdit}
-          confirming={confirmingEdit}
-          error={editError}
+          onConfirm={onEditConfirm}
+          onCancel={onEditCancel}
+          confirming={editState.loading}
+          error={editState.error}
         />
       )}
-    </>
+    </div>
   );
 };
 

src/containers/GlobalStats.jsx

 import React from "react";
 import { Link } from "react-router-dom";
 import { format, isToday } from "date-fns";
+import pick from "lodash/pick";
 
 import { GlobalInfoStore, ProgramStore } from "stores";
 
 const GlobalStats = () => {
-  const { onlineUsers, onlineMembers } = GlobalInfoStore.useState();
-  const { currentId, scheduleIds, items } = ProgramStore.useState();
+  const {
+    onlineUsers,
+    onlineMembers,
+    groupSizeHalf,
+  } = GlobalInfoStore.useState((state) =>
+    pick(state, ["onlineUsers", "onlineMembers", "groupSizeHalf"])
+  );
+  const { currentId, scheduleIds, items } = ProgramStore.useState((state) =>
+    pick(state, ["currentId", "scheduleIds", "items"])
+  );
 
   const nextProgramEntryId = scheduleIds
     ? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]
@@ -16,25 +25,51 @@ const GlobalStats = () => {
     ? items[nextProgramEntryId]
     : null;
 
+  const nextProgramEntryCaption = nextProgramEntry
+    ? `${nextProgramEntry.title} @ ${format(
+        nextProgramEntry.expectedStartAt,
+        isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm"
+      )}`
+    : null;
+
   return (
-    <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
-      <div>
-        <strong>{onlineMembers}</strong> <span>členů online</span>
+    <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300 whitespace-no-wrap">
+      <div
+        data-tip="Počet přihlášených členů Pirátské strany."
+        data-tip-at="bottom"
+      >
+        <strong>{onlineMembers}</strong>{" "}
+        <span>
+          {onlineMembers === 1 && "člen online"}
+          {onlineMembers > 1 && onlineMembers <= 4 && "členové online"}
+          {(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
+        </span>
       </div>
-      <div>
+      <div
+        data-tip="Celkový počet osob, které mají tuto stránku otevřenou."
+        data-tip-at="bottom"
+      >
         <strong>{onlineUsers}</strong> <span>online celkem</span>
       </div>
+      {groupSizeHalf !== null && (
+        <div
+          data-tip="Velikost skupiny členů je důležitá při posuzování podpory návrhů postupu."
+          data-tip-at="bottom"
+        >
+          <span>Vel. skupiny členů je</span> <strong>{groupSizeHalf}</strong>
+        </div>
+      )}
       {nextProgramEntry && (
-        <div className="flex-grow text-right hidden sm:block">
+        <div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate">
           Následuje:{" "}
-          <Link to="/program" className="font-bold">
-            {nextProgramEntry.title} @{" "}
-            {format(
-              nextProgramEntry.expectedStartAt,
-              isToday(nextProgramEntry.expectedStartAt)
-                ? "H:mm"
-                : "dd. MM. H:mm"
-            )}
+          <Link
+            to="/program"
+            className="font-bold"
+            aria-label={nextProgramEntryCaption}
+            data-tip={"Následuje bod " + nextProgramEntryCaption}
+            data-tip-at="bottom"
+          >
+            {nextProgramEntryCaption}
           </Link>
         </div>
       )}

src/containers/JitsiInviteCard.jsx

+import React from "react";
+
+import { loadMe } from "actions/users";
+import Button from "components/Button";
+import { CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import { useActionState } from "hooks";
+import { AuthStore } from "stores";
+
+const JitsiInviteCard = () => {
+
+  // docasne zablokovano
+  return null;
+
+  const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState();
+  const [loading, errorMessage] = useActionState(loadMe);
+
+  const openJitsiWindow = async () => {
+    const result = await loadMe.run();
+
+    if (!result.error) {
+      window.open(result.payload.jitsi_url);
+    }
+
+    AuthStore.update((state) => {
+      state.jitsiPopupDismissed = true;
+    });
+  };
+
+  const dismissPopup = () => {
+    AuthStore.update((state) => {
+      state.jitsiPopupDismissed = true;
+    });
+  };
+
+  if (!showJitsiInvitePopup) {
+    return null;
+  }
+
+  if (jitsiPopupDismissed) {
+    return (
+      <Button
+        color="violet-500"
+        className="btn--fullwidth"
+        onClick={openJitsiWindow}
+        loading={loading}
+        icon="ico--jitsi"
+      >
+        Připojit se k Jitsi
+      </Button>
+    );
+  }
+
+  return (
+    <div className="lg:card lg:elevation-16 bg-violet-300 relative container-padding--zero md:container-padding--auto">
+      <i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
+      <CardBody className="p-4 lg:p-8 text-white relative z-10">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="head-heavy-xs">
+            <span>Pozvánka do Jitsi</span>
+          </h2>
+          <button
+            type="button"
+            onClick={dismissPopup}
+            aria-label="Zavřít"
+            data-tip="Zavřít"
+          >
+            <i className="ico--cross"></i>
+          </button>
+        </div>
+        {errorMessage && (
+          <ErrorMessage>
+            Při načítání URL Jitsi kanálu došlo k problému: {errorMessage}.
+          </ErrorMessage>
+        )}
+        <p className="leading-snug text-sm mb-4">
+          Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
+          celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
+        </p>
+        <Button
+          color="violet-500"
+          className="btn--fullwidth"
+          onClick={openJitsiWindow}
+          loading={loading}
+        >
+          Připojit se k Jitsi
+        </Button>
+      </CardBody>
+    </div>
+  );
+};
+
+export default JitsiInviteCard;

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 {
@@ -14,147 +14,186 @@ import {
   rejectProposal,
   rejectProposalByChairman,
 } from "actions/posts";
-import { ban, unban } 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 [unbanningUser, unbanningUserError] = useActionState(
-    unban,
-    userToUnban
-  );
-  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);
-      }
-    },
-    [postToEdit, setPostToEdit]
-  );
-
-  const cancelEdit = useCallback(() => {
-    setPostToEdit(null);
-  }, [setPostToEdit]);
-
   /**
    * Ban a post's author.
    * @param {CF2021.Post} post
    */
-  const onBanUser = (post) => {
+  const onBanUser = useCallback(
+    (post) => {
       setUserToBan(post.author);
-  };
+    },
+    [setUserToBan]
+  );
   /**
    * Ban a post's author.
    * @param {CF2021.Post} post
    */
-  const onUnbanUser = (post) => {
+  const onUnbanUser = useCallback(
+    (post) => {
       setUserToUnban(post.author);
-  };
+    },
+    [setUserToUnban]
+  );
+  /**
+   * Invite post's author to Jitsi.
+   * @param {CF2021.Post} post
+   */
+  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 (
     <>
@@ -164,7 +203,8 @@ const PostsContainer = ({ className }) => {
         </ErrorMessage>
       )}
       <PostList
-        items={windowItems.slice(sliceStart, sliceEnd)}
+        items={windowItems}
+        showAddPostCta={showAddPostCta}
         canThumb={isAuthenticated}
         onLike={like.run}
         onDislike={dislike.run}
@@ -172,9 +212,11 @@ const PostsContainer = ({ className }) => {
         className={className}
         dimArchived={!showingArchivedOnly}
         currentUser={user}
+        supportThreshold={groupSizeHalf}
         onHide={setPostToHide}
         onBanUser={onBanUser}
         onUnbanUser={onUnbanUser}
+        onInviteUser={onInviteUser}
         onEdit={setPostToEdit}
         onArchive={setPostToArchive}
         onAnnounceProcedureProposal={setPostToAnnounce}
@@ -186,8 +228,8 @@ 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"
       >
@@ -198,8 +240,8 @@ const PostsContainer = ({ className }) => {
         isOpen={!!userToUnban}
         onConfirm={onUnbanUserConfirm}
         onCancel={onUnbanUserCancel}
-        confirming={unbanningUser}
-        error={unbanningUserError}
+        confirming={unbanUserState.loading}
+        error={unbanUserState.error}
         title={`Odblokovat uživatele ${userToUnban ? userToUnban.name : null}?`}
         yesActionLabel="Odblokovat"
       >
@@ -207,12 +249,26 @@ const PostsContainer = ({ className }) => {
         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"
       >
@@ -222,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"
       >
@@ -234,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.