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,57 +6,110 @@ import Post from "./Post";
 const PostList = ({
   className,
   items,
+  showAddPostCta,
+  currentUser,
+  supportThreshold,
+  canThumb,
+  dimArchived,
   onLike,
   onDislike,
   onHide,
   onBanUser,
+  onUnbanUser,
+  onInviteUser,
   onAnnounceProcedureProposal,
   onAcceptProcedureProposal,
   onRejectProcedureProposal,
-  dimArchived,
+  onRejectProcedureProposalByChairman,
+  onEdit,
+  onArchive,
+  onSeen,
 }) => {
   const buildHandler = (responderFn) => (post) => (evt) => {
     evt.preventDefault();
     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
   );
   const onPostAcceptProcedureProposal = buildHandler(onAcceptProcedureProposal);
   const onPostRejectProcedureProposal = buildHandler(onRejectProcedureProposal);
+  const onPostRejectProcedureProposalByChairman = buildHandler(
+    onRejectProcedureProposalByChairman
+  );
+
+  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}
           author={item.author}
           type={item.type}
           state={item.state}
-            content={item.content}
+          content={item.contentHtml}
           ranking={item.ranking}
-            historyLog={item.historyLog}
+          modified={item.modified}
           seen={item.seen}
+          reportSeen={!item.seen || idx === window - 1}
           archived={item.archived}
-            displayActions={true}
           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)}
+          onRejectProcedureProposalByChairman={onPostRejectProcedureProposalByChairman(
+            item
+          )}
+          onEdit={onPostEdit(item)}
+          onArchive={onPostArchive(item)}
+          onSeen={onPostSeen(item)}
         />
       ))}
+      {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>
+      )}
     </div>
   );
 };

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

+import React, { useState } from "react";
+
+import Button from "components/Button";
+import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
+import Modal from "components/modals/Modal";
+
+const ProgramEntryEditModal = ({
+  programEntry,
+  onCancel,
+  onConfirm,
+  ...props
+}) => {
+  const [text, setText] = useState(programEntry.title);
+
+  const onTextInput = (evt) => {
+    setText(evt.target.value);
+  };
+
+  const confirm = (evt) => {
+    if (!!text) {
+      onConfirm(text);
+    }
+  };
+
+  return (
+    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
+      <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--cross"></i>
+            </button>
+          </div>
+          <div className="form-field">
+            <label className="form-field__label" htmlFor="field">
+              Nový název
+            </label>
+            <div className="form-field__wrapper form-field__wrapper--shadowed">
+              <input
+                type="text"
+                className="text-input form-field__control"
+                value={text}
+                onChange={onTextInput}
+                placeholder="Vyplňte nový název"
+              />
+            </div>
+          </div>
+        </CardBody>
+        <CardActions right className="space-x-1">
+          <Button
+            hoverActive
+            color="blue-300"
+            className="text-sm"
+            onClick={confirm}
+          >
+            Uložit
+          </Button>
+          <Button
+            hoverActive
+            color="red-600"
+            className="text-sm"
+            onClick={onCancel}
+          >
+            Zrušit
+          </Button>
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default ProgramEntryEditModal;

src/config.js

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

src/containers/AddAnnouncementForm.jsx

 import React, { useState } from "react";
+import classNames from "classnames";
 
 import { addAnnouncement } from "actions/announcements";
 import Button from "components/Button";
+import ErrorMessage from "components/ErrorMessage";
+import MarkdownEditor from "components/mde/MarkdownEditor";
+import { useActionState } from "hooks";
+import { urlRegex } from "utils";
 
 const AddAnnouncementForm = ({ className }) => {
   const [text, setText] = useState("");
+  const [link, setLink] = useState("");
+  const [textError, setTextError] = useState(null);
+  const [linkError, setLinkError] = useState(null);
+  const [type, setType] = useState("announcement");
 
-  const onTextInput = (evt) => {
-    setText(evt.target.value);
+  const [adding, addingError] = useActionState(addAnnouncement, {
+    content: text,
+    link,
+    type,
+  });
+
+  const onTextInput = (newText) => {
+    setText(newText);
+
+    if (newText !== "") {
+      if (newText.length > 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
+    }
+  };
+
+  const onLinkInput = (newLink) => {
+    setLink(newLink);
+
+    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 = (evt) => {
-    if (!!text) {
-      addAnnouncement.run({ content: text });
+  const onAdd = async (evt) => {
+    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;
+    }
+
+    const result = await addAnnouncement.run({ content: text, link, type });
+
+    if (!result.error) {
       setText("");
+      setLink("");
+      setTextError(null);
+      setLinkError(null);
     }
   };
 
   return (
-    <div className={className}>
-      <div className="form-field">
-        <div className="form-field__wrapper form-field__wrapper--shadowed">
-          <textarea
-            className="text-input form-field__control "
+    <form className={className} onSubmit={onAdd}>
+      {addingError && (
+        <ErrorMessage>
+          Při přidávání oznámení došlo k problému: {addingError}.
+        </ErrorMessage>
+      )}
+      <div className="grid grid-cols-1 gap-4">
+        <div
+          className="form-field"
+          onChange={(evt) => setType(evt.target.value)}
+        >
+          <div className="form-field__wrapper text-sm">
+            <div className="radio form-field__control">
+              <label>
+                <input
+                  type="radio"
+                  name="announcementType"
+                  value="announcement"
+                  defaultChecked
+                />
+                <span>Oznámení</span>
+              </label>
+            </div>
+
+            <div className="radio form-field__control">
+              <label>
+                <input type="radio" name="announcementType" value="voting" />
+                <span>Rozhodující hlasování</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <MarkdownEditor
           value={text}
-            rows="3"
-            cols="40"
-            placeholder="Vyplňte text oznámení"
           onChange={onTextInput}
-          ></textarea>
+          error={textError}
+          placeholder="Vyplňte text oznámení"
+          toolbarCommands={[
+            ["bold", "italic", "strikethrough"],
+            ["link", "unordered-list", "ordered-list"],
+          ]}
+          minEditorHeight={100}
+        />
+
+        <div
+          className={classNames("form-field", {
+            hidden: type !== "voting",
+            "form-field--error": !!linkError,
+          })}
+        >
+          <div className="form-field__wrapper form-field__wrapper--shadowed">
+            <input
+              type="text"
+              className="text-input text-sm text-input--has-addon-l form-field__control"
+              value={link}
+              placeholder="URL hlasování"
+              onChange={(evt) => onLinkInput(evt.target.value)}
+            />
+            <div className="text-input-addon text-input-addon--l order-first">
+              <i className="ico--link"></i>
+            </div>
+          </div>
+          {!!linkError && <div className="form-field__error">{linkError}</div>}
         </div>
       </div>
 
       <Button
-        onClick={onAdd}
-        className="text-sm mt-2"
+        type="submit"
+        className="text-sm mt-4"
         hoverActive
-        disabled={!text}
+        loading={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 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 [error, setError] = useState(null);
+  const [addingPost, addingPostError] = useActionState(addPost, {
+    content: text,
+  });
+  const [addingProposal, addingProposalError] = useActionState(addProposal, {
+    content: text,
+  });
 
-  const onTextInput = (evt) => {
-    setText(evt.target.value);
-  };
+  const apiError = addingPostError || addingProposalError;
+  const is429ApiError =
+    apiError &&
+    apiError.toString().indexOf("Unexpected status code 429") !== -1;
 
-  const onAddPost = (evt) => {
-    if (!!text) {
-      addPost.run({ content: text });
-      setText("");
+  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 !== "") {
+      if (newText.length >= 1024) {
+        setError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setError(null);
+      }
     }
   };
 
-  const onAddProposal = (evt) => {
-    evt.stopPropagation();
+  const onAdd = async (evt) => {
+    evt.preventDefault();
 
     if (!!text) {
-      addProposal.run({ content: text });
+      if (!error) {
+        const result = await (type === "post" ? addPost : addProposal).run({
+          content: text,
+        });
+
+        if (!result.error) {
           setText("");
+          setExpanded(false);
+          setShowAddConfirm(true);
+          enqueueHideAddConfirm();
+        }
+      }
+    } else {
+      setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
     }
   };
 
-  const buttonDropdownActionList = (
-    <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
-      <li className="dropdown-button__choice hover:bg-grey-125">
-        <span className="block px-4 py-3" onClick={onAddProposal}>
-          Navrhnout postup
-        </span>
-      </li>
-    </ul>
+  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}>
-      <div className="form-field">
-        <div className="form-field__wrapper form-field__wrapper--shadowed">
-          <textarea
-            className="text-input form-field__control "
+    <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>
+          )}
+          {apiError && !is429ApiError && (
+            <ErrorMessage>
+              Při přidávání příspěvku došlo k problému: {apiError}.
+            </ErrorMessage>
+          )}
+
+          <MarkdownEditor
+            ref={editorRef}
             value={text}
-            rows="5"
-            cols="40"
-            placeholder="Vyplňte text vašeho příspěvku"
             onChange={onTextInput}
-          ></textarea>
+            error={error}
+            placeholder="Vyplňte text vašeho příspěvku"
+            toolbarCommands={[
+              ["header", "bold", "italic", "strikethrough"],
+              ["link", "quote"],
+              ["unordered-list", "ordered-list"],
+            ]}
+          />
+
+          {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" && (
+            <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
-          onClick={onAddPost}
-          disabled={!text}
+              type="submit"
+              disabled={error || addingPost || addingProposal}
+              loading={addingPost || addingProposal}
+              fullwidth
               hoverActive
-          icon="ico--chevron-down"
-          iconWrapperClassName="dropdown-button"
-          iconChildren={buttonDropdownActionList}
+              className="text-sm xl:text-base"
             >
-          Přidat příspěvek
+              {type === "post" && "Přidat příspěvek"}
+              {type === "procedure-proposal" && "Navrhnout postup"}
             </Button>
 
             <span className="text-sm text-grey-200 hidden lg:inline">
@@ -76,7 +229,9 @@ const AddPostForm = ({ className }) => {
               .
             </span>
           </div>
-    </div>
+        </form>
+      </CardBody>
+    </Card>
   );
 };
 

src/containers/AnnoucementsContainer.jsx

 import React from "react";
 
+import {
+  deleteAnnouncement,
+  loadAnnouncements,
+  markSeen,
+  updateAnnouncement,
+} from "actions/announcements";
+import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
 import AnnouncementList from "components/annoucements/AnnouncementList";
-import { AnnouncementStore } from "stores";
+import { CardBody } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import ModalConfirm from "components/modals/ModalConfirm";
+import { useItemActionConfirm } from "hooks";
+import { AnnouncementStore, AuthStore } from "stores";
 
-const AnnoucementsContainer = () => {
-  const items = AnnouncementStore.useState((state) => state.items);
+const AnnoucementsContainer = ({ className }) => {
+  const { 2: loadResult } = loadAnnouncements.useWatch();
 
-  const onEdit = (announcement) => {
-    console.log("edit", announcement);
-  };
-  const onDelete = (announcement) => {
-    console.log("delete", announcement);
-  };
+  const [
+    itemToDelete,
+    setItemToDelete,
+    onDeleteConfirm,
+    onDeleteCancel,
+    deleteState,
+  ] = useItemActionConfirm(deleteAnnouncement);
+
+  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])
+  );
 
   return (
+    <div className={className}>
+      {loadResult && loadResult.error && (
+        <CardBody>
+          <ErrorMessage>
+            Oznámení se nepodařilo načíst: {loadResult.message}
+          </ErrorMessage>
+        </CardBody>
+      )}
       <AnnouncementList
         items={items}
-      displayActions={true}
-      onDelete={onDelete}
-      onEdit={onEdit}
+        canRunActions={isAuthenticated && user.role === "chairman"}
+        onDelete={setItemToDelete}
+        onEdit={setItemToEdit}
+        onSeen={markSeen}
+      />
+      <ModalConfirm
+        isOpen={!!itemToDelete}
+        onConfirm={onDeleteConfirm}
+        onCancel={onDeleteCancel}
+        confirming={deleteState.loading}
+        error={deleteState.error}
+        title="Opravdu smazat?"
+        yesActionLabel="Smazat"
+      >
+        Tato akce je nevratná. Opravdu chcete toto oznámení smazat?
+      </ModalConfirm>
+      {itemToEdit && (
+        <AnnouncementEditModal
+          isOpen={true}
+          announcement={itemToEdit}
+          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,
+    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]
+    : null;
+
+  const nextProgramEntry = nextProgramEntryId
+    ? 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-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
+        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 lg:hidden xl:block truncate">
+          Následuje:{" "}
+          <Link
+            to="/program"
+            className="font-bold"
+            aria-label={nextProgramEntryCaption}
+            data-tip={"Následuje bod " + nextProgramEntryCaption}
+            data-tip-at="bottom"
+          >
+            {nextProgramEntryCaption}
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GlobalStats;

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 from "react";
+import React, { useCallback, useMemo } from "react";
 import pick from "lodash/pick";
 
-import { dislike, like, removeDislike, removeLike } from "actions/posts";
+import {
+  acceptProposal,
+  announceProposal,
+  archive,
+  dislike,
+  edit,
+  hide,
+  like,
+  loadPosts,
+  markSeen,
+  rejectProposal,
+  rejectProposalByChairman,
+} from "actions/posts";
+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 { PostStore } from "stores";
+import { useActionState, useItemActionConfirm } from "hooks";
+import { AuthStore, GlobalInfoStore, PostStore } from "stores";
 
-const PostsContainer = ({ className }) => {
+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, (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, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
+  const [
+    postToRejectByChairman,
+    setPostToRejectByChairman,
+    onRejectByChairmanConfirm,
+    onRejectByChairmanCancel,
+  ] = useItemActionConfirm(rejectProposalByChairman, (item, archive) => ({
+    proposal: item,
+    archive,
+  }));
+
+  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 groupSizeHalf = GlobalInfoStore.useState(
+    (state) => state.groupSizeHalf
+  );
+
+  const [acceptingProposal, acceptingProposalError] = useActionState(
+    acceptProposal,
+    {
+      proposal: postToAccept,
+      archive: false,
+    }
+  );
+  const [
+    acceptingAndArchivingProposal,
+    acceptingAndArchivingProposalError,
+  ] = useActionState(acceptProposal, {
+    proposal: postToAccept,
+    archive: true,
+  });
+  const [rejectingProposal, rejectingProposalError] = useActionState(
+    rejectProposal,
+    {
+      proposal: postToReject,
+      archive: false,
+    }
+  );
+  const [
+    rejectingAndArchivingProposal,
+    rejectingAndArchivingProposalError,
+  ] = useActionState(rejectProposal, { proposal: postToReject, archive: true });
+  const [
+    rejectingProposalByChairman,
+    rejectingProposalByChairmanError,
+  ] = useActionState(rejectProposalByChairman, {
+    proposal: postToRejectByChairman,
+    archive: false,
+  });
+  const [
+    rejectingProposalByChairmanAndArchiving,
+    rejectingProposalByChairmanAndArchivingError,
+  ] = useActionState(rejectProposalByChairman, {
+    proposal: postToRejectByChairman,
+    archive: true,
+  });
 
-  // const onLike = (post) => like.run();
-  // const onDislike = (post) => console.log("dislike", post);
+  const { 2: loadResult } = loadPosts.useWatch();
 
   /**
-   *
+   * Ban a post's author.
    * @param {CF2021.Post} post
    */
-  const onLike = (post) => {
-    if (post.ranking.myVote === "none") {
-      return like.run(post);
-    }
-    if (post.ranking.myVote === "like") {
-      return removeLike.run(post);
-    }
-  };
-
+  const onBanUser = useCallback(
+    (post) => {
+      setUserToBan(post.author);
+    },
+    [setUserToBan]
+  );
   /**
-   *
+   * Ban a post's author.
    * @param {CF2021.Post} post
    */
-  const onDislike = (post) => {
-    if (post.ranking.myVote === "none") {
-      return dislike.run(post);
-    }
-    if (post.ranking.myVote === "dislike") {
-      return removeDislike.run(post);
-    }
-  };
-
-  const sliceStart = (window.page - 1) * window.perPage;
-  const sliceEnd = window.page * window.perPage;
+  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 onHide = (post) => {
-    console.log("hide", post);
-  };
-  const onBanUser = (post) => {
-    console.log("banUser", post);
-  };
-  const onAnnounceProcedureProposal = (post) => {
-    console.log("announce", post);
-  };
-  const onAcceptProcedureProposal = (post) => {
-    console.log("accept", post);
-  };
-  const onRejectProcedureProposal = (post) => {
-    console.log("reject", post);
-  };
+  const windowItems = useMemo(() => {
+    return window.items.map((postId) => items[postId]);
+  }, [items, window.items]);
 
   return (
+    <>
+      {loadResult && loadResult.error && (
+        <ErrorMessage>
+          Příspěvky se nepodařilo načíst: {loadResult.message}
+        </ErrorMessage>
+      )}
       <PostList
-      items={window.items
-        .slice(sliceStart, sliceEnd)
-        .map((postId) => items[postId])}
-      onLike={onLike}
-      onDislike={onDislike}
+        items={windowItems}
+        showAddPostCta={showAddPostCta}
+        canThumb={isAuthenticated}
+        onLike={like.run}
+        onDislike={dislike.run}
+        onSeen={markSeen}
         className={className}
         dimArchived={!showingArchivedOnly}
-      displayActions={true}
-      onHide={onHide}
+        currentUser={user}
+        supportThreshold={groupSizeHalf}
+        onHide={setPostToHide}
         onBanUser={onBanUser}
-      onAnnounceProcedureProposal={onAnnounceProcedureProposal}
-      onAcceptProcedureProposal={onAcceptProcedureProposal}
-      onRejectProcedureProposal={onRejectProcedureProposal}
+        onUnbanUser={onUnbanUser}
+        onInviteUser={onInviteUser}
+        onEdit={setPostToEdit}
+        onArchive={setPostToArchive}
+        onAnnounceProcedureProposal={setPostToAnnounce}
+        onAcceptProcedureProposal={setPostToAccept}
+        onRejectProcedureProposal={setPostToReject}
+        onRejectProcedureProposalByChairman={setPostToRejectByChairman}
+      />
+      <ModalConfirm
+        isOpen={!!userToBan}
+        onConfirm={onBanUserConfirm}
+        onCancel={onBanUserCancel}
+        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={postHideState.loading}
+        error={postHideState.error}
+        title="Skrýt příspěvek?"
+        yesActionLabel="Potvrdit"
+      >
+        Příspěvek se skryje a uživatelé ho neuvidí. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToArchive}
+        onConfirm={onPostArchiveConfirm}
+        onCancel={onPostArchiveCancel}
+        confirming={postArchiveState.loading}
+        error={postArchiveState.error}
+        title="Archivovat příspěvek?"
+        yesActionLabel="Potvrdit"
+      >
+        Příspěvek bude archivován a bude ve výpisu vizuálně odlišen. Opravdu to
+        chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToAnnounce}
+        onConfirm={onAnnounceConfirm}
+        onCancel={onAnnounceCancel}
+        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>
+      <ModalWithActions
+        isOpen={!!postToAccept}
+        onCancel={onAcceptCancel}
+        error={acceptingProposalError || acceptingAndArchivingProposalError}
+        title="Schválit procedurální 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?
+      </ModalWithActions>
+      <ModalWithActions
+        isOpen={!!postToReject}
+        onCancel={onRejectCancel}
+        error={rejectingProposalError || rejectingAndArchivingProposalError}
+        title="Zamítnout procedurální 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?
+      </ModalWithActions>
+      <ModalWithActions
+        isOpen={!!postToRejectByChairman}
+        onCancel={onRejectByChairmanCancel}
+        error={
+          rejectingProposalByChairmanError ||
+          rejectingProposalByChairmanAndArchivingError
+        }
+        title="Zamítnout procedurální návrh předsedajícícm?"
+        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?
+      </ModalWithActions>
+      {postToEdit && (
+        <PostEditModal
+          isOpen={true}
+          post={postToEdit}
+          onConfirm={onEditConfirm}
+          onCancel={onEditCancel}
+          confirming={editState.loading}
+          error={editState.error}
         />
+      )}
+    </>
   );
 };
 

src/hooks.js

+import { useCallback, useState } from "react";
+
+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 (args) => {
+      if (item) {
+        const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
+          item,
+          args,
+        );
+        setActionArgs(newActionArgs);
+        const result = await actionFn.run(newActionArgs);
+
+        if (!result.error) {
+          setItem(null);
+        }
+      }
+    },
+    [item, setItem, actionFn, actionParamsBuilder, setActionArgs],
+  );
+
+  const onActionCancel = useCallback(() => {
+    setItem(null);
+  }, [setItem]);
+
+  const [loading, error] = useActionState(actionFn, actionArgs);
+  const unwrappedActionState = { loading, error };
+
+  return [item, setItem, onActionConfirm, onActionCancel, unwrappedActionState];
+};
+
+export const useActionConfirm = (actionFn, actionArgs) => {
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const onActionConfirm = useCallback(async () => {
+    if (showConfirm) {
+      const result = await actionFn.run(actionArgs);
+
+      if (!result.error) {
+        setShowConfirm(false);
+      }
+    }
+  }, [showConfirm, setShowConfirm, actionFn, actionArgs]);
+
+  const onActionCancel = useCallback(() => {
+    setShowConfirm(false);
+  }, [setShowConfirm]);
+
+  return [showConfirm, setShowConfirm, onActionConfirm, onActionCancel];
+};
+
+export const useActionState = (actionFn, actionArgs) => {
+  const { 0: started, 1: finished, 2: result } = actionFn.useWatch(actionArgs);
+  return [started && !finished, result.error ? result.message : null];
+};

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();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
 
-ReactDOM.render(
+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/markdown.js

+import Showdown from "showdown";
+import xss from "xss";
+
+const xssFilter = (converter) => [
+  {
+    type: "output",
+    filter: (text) => xss(text),
+  },
+];
+
+export const markdownConverter = new Showdown.Converter({
+  tables: true,
+  simplifiedAutoLink: true,
+  strikethrough: true,
+  tasklists: false,
+  omitExtraWLInCodeBlocks: true,
+  noHeaderId: true,
+  headerLevelStart: 2,
+  openLinksInNewWindow: true,
+  extensions: [xssFilter],
+});

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 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,
+  endProgramPoint,
+  openDiscussion,
+  renameProgramPoint,
+} from "actions/program";
 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, GlobalInfoStore, ProgramStore } from "stores";
+
+import "./Home.css";
+
+const tourLSKey = "cf2021__tour";
 
 const Home = () => {
-  const [showEndDiscussionConfirm, setShowEndDiscussionConfirm] = useState(
-    false
-  );
+  const {
+    currentId,
+    items: programEntries,
+    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,
+    onCloseDiscussionConfirm,
+    onCloseDiscussionCancel,
+  ] = useActionConfirm(closeDiscussion, programEntry);
+  const [
+    showOpenDiscussion,
+    setShowOpenDiscussion,
+    onOpenDiscussionConfirm,
+    onOpenDiscussionCancel,
+  ] = useActionConfirm(openDiscussion, programEntry);
+  const [
+    showEndProgramPoint,
+    setShowEndProgramPoint,
+    onEndProgramPointConfirm,
+    onEndProgramPointCancel,
+  ] = useActionConfirm(endProgramPoint, programEntry);
+  const { keycloak } = useKeycloak();
+
+  const login = useCallback(() => {
+    keycloak.login();
+  }, [keycloak]);
 
-  const onRenameProgramPoint = () => {
-    console.log("renameProgramPoint");
+  useEffect(() => {
+    if (isLg && !localStorage.getItem(tourLSKey)) {
+      setRunJoyride(true);
+    }
+  }, [isLg, setRunJoyride]);
+
+  const onEditProgramConfirm = async (newTitle) => {
+    await renameProgramPoint.run({ programEntry, newTitle });
+    setShowProgramEditModal(false);
   };
-  const onEndDiscussion = () => {
-    console.log("endDiscussion");
-    setShowEndDiscussionConfirm(true);
+  const onEditProgramCancel = () => {
+    setShowProgramEditModal(false);
   };
-  const onEndProgramPoint = () => {
-    console.log("endProgramPoint");
+
+  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;
+
+  const lastProgramEntry = scheduleIds.length
+    ? programEntries[scheduleIds[0]]
+    : null;
+
+  if (
+    !programEntry &&
+    (!firstProgramEntry || new Date() < firstProgramEntry.expectedStartAt)
+  ) {
+    return (
+      <NotYetStarted
+        startAt={
+          firstProgramEntry ? firstProgramEntry.expectedStartAt : undefined
+        }
+      />
+    );
+  }
+
+  if (
+    !programEntry &&
+    lastProgramEntry &&
+    new Date() > lastProgramEntry.expectedStartAt
+  ) {
+    return <AlreadyFinished />;
+  }
+
+  if (!programEntry) {
+    return <BreakInProgress />;
+  }
+
+  const displayActions = isAuthenticated && user.role === "chairman";
+
   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 č. 1: Programové priority Pirátské strany pro sněmovní volby
-              2021
+      <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>
-            <DropdownMenu right triggerSize="lg">
+          <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="z-20">
                   <DropdownMenuItem
-                onClick={onRenameProgramPoint}
-                icon="ico--edit-pencil"
+                    onClick={() => setShowProgramEditModal(true)}
+                    icon="ico--pencil"
                     title="Přejmenovat bod programu"
                     titleSize="base"
                     iconSize="base"
                   />
+                  {programEntry.discussionOpened && (
                     <DropdownMenuItem
-                onClick={onEndDiscussion}
+                      onClick={() => setShowCloseDiscussion(true)}
                       icon="ico--bubbles"
                       title="Ukončit rozpravu"
                       titleSize="base"
                       iconSize="base"
                     />
+                  )}
+                  {!programEntry.discussionOpened && (
                     <DropdownMenuItem
-                onClick={onEndProgramPoint}
+                      onClick={() => setShowOpenDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Otevřít rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  <DropdownMenuItem
+                    onClick={() => setShowEndProgramPoint(true)}
                     icon="ico--switch"
                     title="Ukončit bod programu"
                     titleSize="base"
                     iconSize="base"
                   />
-              )}
                 </DropdownMenu>
+              )}
             </div>
-
-          <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" />
+            )}
           </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">
-              Příspěvky v rozpravě
+            <h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
+              <span>Příspěvky v rozpravě</span>
             </h2>
             <PostFilters />
           </div>
 
-          <PostsContainer className="container-padding--zero lg:container-padding--auto" />
-          <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
+        isOpen={showProgramEditModal}
+        onConfirm={onEditProgramConfirm}
+        onCancel={onEditProgramCancel}
+        programEntry={programEntry}
+      />
       <ModalConfirm
-        isOpen={showEndDiscussionConfirm}
-        onConfirm={() => setShowEndDiscussionConfirm(false)}
-        onCancel={() => setShowEndDiscussionConfirm(false)}
+        isOpen={showCloseDiscussion}
+        onConfirm={onCloseDiscussionConfirm}
+        onCancel={onCloseDiscussionCancel}
         title="Ukončit rozpravu?"
         yesActionLabel="Ukončit"
       >
         Opravdu chcete ukončit rozpravu?
       </ModalConfirm>
+      <ModalConfirm
+        isOpen={showOpenDiscussion}
+        onConfirm={onOpenDiscussionConfirm}
+        onCancel={onOpenDiscussionCancel}
+        title="Otevřít rozpravu?"
+        yesActionLabel="Otevřít"
+      >
+        Opravdu chcete otevřít rozpravu k tomuto bodu programu?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={showEndProgramPoint}
+        onConfirm={onEndProgramPointConfirm}
+        onCancel={onEndProgramPointCancel}
+        title="Ukončit bod programu?"
+        yesActionLabel="Ukončit bod programu"
+      >
+        Bod programu <strong>bude ukončen</strong>. Opravdu to chcete?
+      </ModalConfirm>
     </>
   );
 };

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;