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";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+function handleVisibilityChange() {
+  if (!document.hidden) {
+    refreshAccessToken();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
+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,14 +2,10 @@ 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",
 });
 
-// keycloak.init({
-//   onLoad: "check-sso",
-// });
-
 export default keycloak;

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 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 PostFilters from "components/posts/PostFilters";
+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 {
+    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]);
+
+  useEffect(() => {
+    if (isLg && !localStorage.getItem(tourLSKey)) {
+      setRunJoyride(true);
+    }
+  }, [isLg, setRunJoyride]);
+
+  const onEditProgramConfirm = async (newTitle) => {
+    await renameProgramPoint.run({ programEntry, newTitle });
+    setShowProgramEditModal(false);
+  };
+  const onEditProgramCancel = () => {
+    setShowProgramEditModal(false);
+  };
+
+  const showTutorial = useCallback(() => {
+    setRunJoyride(true);
+    setJoyrideRenderKey(joyrideRenderKey + 1);
+  }, [joyrideRenderKey, setRunJoyride, setJoyrideRenderKey]);
+
+  const handleJoyrideCallback = ({ action, index, status, type }) => {
+    if (type === EVENTS.TOUR_END) {
+      localStorage.setItem(tourLSKey, "COMPLETED");
+    }
+  };
+
+  const firstProgramEntry = scheduleIds.length
+    ? programEntries[scheduleIds[0]]
+    : null;
+
+  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>
+          <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={() => setShowProgramEditModal(true)}
+                    icon="ico--pencil"
+                    title="Přejmenovat bod programu"
+                    titleSize="base"
+                    iconSize="base"
+                  />
+                  {programEntry.discussionOpened && (
+                    <DropdownMenuItem
+                      onClick={() => setShowCloseDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Ukončit rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  {!programEntry.discussionOpened && (
+                    <DropdownMenuItem
+                      onClick={() => setShowOpenDiscussion(true)}
+                      icon="ico--bubbles"
+                      title="Otevřít rozpravu"
+                      titleSize="base"
+                      iconSize="base"
+                    />
+                  )}
+                  <DropdownMenuItem
+                    onClick={() => setShowEndProgramPoint(true)}
+                    icon="ico--switch"
+                    title="Ukončit bod programu"
+                    titleSize="base"
+                    iconSize="base"
+                  />
+                </DropdownMenu>
+              )}
             </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>
-        </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>
+                  controls={true}
+                  playing={true}
+                  muted={true}
+                  width="100%"
+                  height=""
+                />
               </div>
-
-            <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
-
-            <div className="lg:card__body pt-4 lg:py-6">
-              <div className="form-field  ">
-                <div className="form-field__wrapper form-field__wrapper--shadowed">
-                  <textarea
-                    className="text-input form-field__control "
-                    value=""
-                    rows="3"
-                    cols="40"
-                    placeholder="Vyplňte text oznámení"
-                    readOnly
-                  ></textarea>
+            )}
+            {!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>
 
-              <button className="btn btn--black btn--hoveractive text-sm mt-2">
-                <div className="btn__body ">Přidat oznámení</div>
-              </button>
-            </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" />
-
-          <div className="my-8 space-y-4">
-            <div className="form-field  ">
-              <div className="form-field__wrapper form-field__wrapper--shadowed">
-                <textarea
-                  className="text-input form-field__control "
-                  value=""
-                  rows="5"
-                  cols="40"
-                  placeholder="Vyplňte text vašeho příspěvku"
-                  readOnly
-                ></textarea>
-              </div>
-            </div>
-
-            <div className="space-x-4">
-              <button className="btn btn--icon ">
-                <div className="btn__body-wrap">
-                  <div className="btn__body ">Přidat příspěvek</div>
-                  <div className="btn__icon dropdown-button">
-                    <i className="ico--chevron-down"></i>
-                    <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" href="#">
-                          Navrhnout postup
-                        </span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
+          {!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 className="text-sm text-grey-200 hidden lg:inline">
-                Pro pokročilejší formátování můžete používat{" "}
-                <a
-                  href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
-                  className="underline"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  Markdown
-                </a>
                 .
               </span>
-            </div>
-          </div>
+            </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={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;

src/pages/Program.jsx

 import React from "react";
+import { Helmet } from "react-helmet-async";
+import { Link } from "react-router-dom";
+import { format } from "date-fns";
+
+import { activateProgramPoint } from "actions/program";
+import Button from "components/Button";
+import Chip from "components/Chip";
+import ModalConfirm from "components/modals/ModalConfirm";
+import { useActionState, useItemActionConfirm } from "hooks";
+import { AuthStore, ProgramStore } from "stores";
 
 const Schedule = () => {
-  return <>Schedule</>;
+  const { isAuthenticated, user } = AuthStore.useState();
+  const { currentId, scheduleIds, items } = ProgramStore.useState();
+  const [
+    entryToActivate,
+    setEntryToActivate,
+    onActivateConfirm,
+    onActivateCancel,
+  ] = useItemActionConfirm(activateProgramPoint);
+
+  const [activating, activationError] = useActionState(
+    activateProgramPoint,
+    entryToActivate
+  );
+
+  return (
+    <>
+      <Helmet>
+        <title>Program zasedání | CF 2024 | Pirátská strana</title>
+        <meta
+          name="description"
+          content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
+        />
+        <meta
+          property="og:title"
+          content="Program zasedání | CF 2024 | Pirátská strana"
+        />
+        <meta
+          property="og:description"
+          content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
+        />
+      </Helmet>
+      <article className="container container--default py-8 lg:py-24">
+        <h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
+        <div class="my-4">
+           Program zde neobsahuje z technických důvodů všechny podrobnosti. Kompletní program naleznete na <a href="https://cf2024.pirati.cz/program">webu</a>.
+        </div>
+        <div className="flex flex-col">
+          {scheduleIds.map((id) => {
+            const isCurrent = id === currentId;
+            const entry = items[id];
+            const htmlContent = entry.htmlContent
+              ? {
+                  __html: entry.htmlContent,
+                }
+              : null;
+            return (
+              <div
+                className="flex flex-col md:flex-row my-4 duration-300 text-black"
+                key={entry.id}
+              >
+                <div className="w-28 md:text-right">
+                  {isCurrent && (
+                    <Chip condensed className="mt-2 mr-2" color="red-600">
+                      Právě probíhá
+                    </Chip>
+                  )}
+                </div>
+                <div className="w-full md:w-32 flex flex-row md:flex-col items-center md:items-stretch md:text-right md:pr-8">
+                  <p className="head-allcaps-2xs md:head-heavy-base">
+                    {format(entry.expectedStartAt, "H:mm")}
+                  </p>
+                  <p className="ml-auto md:ml-0 head-allcaps-2xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap">
+                    {format(entry.expectedStartAt, "d. M. Y")}
+                  </p>
+                </div>
+                <div className="flex-grow w-full">
+                  <h2 className="head-heavy-xs md:head-heavy-base mb-2">
+                    {isCurrent && <Link to="/">{entry.fullTitle}</Link>}
+                    {!isCurrent && entry.fullTitle}
+                  </h2>
+                  <div className="leading-snug">
+                    <div className="space-x-2">
+                      <strong>Navrhovatel:</strong>
+                      <span>{entry.proposer}</span>
+                    </div>
+                    {entry.speakers && (
+                      <div className="space-x-2">
+                        <strong>Řečníci:</strong>
+                        <span>{entry.speakers}</span>
+                      </div>
+                    )}
+                  </div>
+                  {htmlContent && (
+                    <div
+                      className="mt-2 leading-snug max-w-3xl content-block"
+                      dangerouslySetInnerHTML={htmlContent}
+                    />
+                  )}
+                  {isAuthenticated &&
+                    user.role === "chairman" &&
+                    entry.id !== currentId && (
+                      <div className="mt-4">
+                        <Button
+                          onClick={() => setEntryToActivate(entry)}
+                          color="grey-125"
+                          className="text-xs"
+                          fullwidth
+                        >
+                          Aktivovat tento bod programu
+                        </Button>
+                      </div>
+                    )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <ModalConfirm
+          isOpen={!!entryToActivate}
+          onConfirm={onActivateConfirm}
+          onCancel={onActivateCancel}
+          confirming={activating}
+          error={activationError}
+          title="Aktivovat bod programu?"
+          yesActionLabel="Aktivovat"
+        >
+          Pogramovaný bod{" "}
+          <strong>{entryToActivate && entryToActivate.title}</strong> bude
+          aktivován. Chcete pokračovat?
+        </ModalConfirm>
+      </article>
+    </>
+  );
 };
 
 export default Schedule;

src/pages/Protocol.jsx

+import React, { useCallback, useState } from "react";
+import { Helmet } from "react-helmet-async";
+import useInterval from "@rooks/use-interval";
+
+import { loadProtocol } from "actions/global-info";
+import Button from "components/Button";
+import ErrorMessage from "components/ErrorMessage";
+import { useActionState } from "hooks";
+import { GlobalInfoStore } from "stores";
+
+const Protocol = () => {
+  const { protocolUrl, protocol } = GlobalInfoStore.useState();
+  const [protocolLoading, protocolLoadError] = useActionState(loadProtocol);
+  const [progressPercent, setProgressPercent] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  const forceLoad = useCallback(async () => {
+    try {
+      setPaused(true);
+      setProgressPercent(1);
+      await loadProtocol.run();
+    } finally {
+      setPaused(false);
+    }
+  }, [setPaused, setProgressPercent]);
+
+  const tick = useCallback(async () => {
+    if (paused) {
+      return;
+    }
+
+    if (progressPercent % 100 === 0) {
+      forceLoad();
+    } else {
+      setProgressPercent(progressPercent + 1);
+    }
+  }, [forceLoad, paused, progressPercent, setProgressPercent]);
+
+  useInterval(tick, 100, true);
+
+  const htmlContent = protocol
+    ? {
+        __html: protocol,
+      }
+    : null;
+
+  const progressStyle = {
+    position: "absolute",
+    width: `${progressPercent}%`,
+    height: "100%",
+    left: "0",
+    background:
+      "linear-gradient(142deg, rgba(2,0,36,1) 0%, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%)",
+    opacity: "0.4",
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Zápis ze zasedání | CF 2024 | Pirátská strana</title>
+        <meta
+          name="description"
+          content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
+        />
+        <meta
+          property="og:title"
+          content="Zápis ze zasedání | CF 2024 | Pirátská strana"
+        />
+        <meta
+          property="og:description"
+          content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
+        />
+      </Helmet>
+      <article className="container container--default py-8 lg:py-24">
+        <h1 className="head-alt-md lg:head-alt-lg mb-8">Zápis z jednání</h1>
+
+        <div className="flex items-start">
+          <div className="lg:w-2/3">
+            {!protocolUrl && (
+              <ErrorMessage>Zápis momentálně není k dispozici.</ErrorMessage>
+            )}
+            {protocolLoadError && (
+              <ErrorMessage>
+                Při stahování záznamu z jednání došlo k problému:{" "}
+                {protocolLoadError.toString()}
+              </ErrorMessage>
+            )}
+            {protocolUrl && <></>}
+            {htmlContent && (
+              <div
+                className="leading-tight text-sm lg:text-base content-block"
+                dangerouslySetInnerHTML={htmlContent}
+              ></div>
+            )}
+          </div>
+          <div className="hidden lg:block card elevation-10 w-1/3">
+            <div className="lg:card__body content-block">
+              <h2>Jak to funguje?</h2>
+              <p>
+                Zápis se aktualizuje automaticky každých 10 sekund. Pokud chceš
+                aktualizaci vynutit ručně, můžeš využít tlačítko níže.
+              </p>
+              <Button
+                icon="ico--refresh"
+                loading={protocolLoading}
+                className="btn--fullwidth"
+                onClick={forceLoad}
+                color="black"
+                bodyProps={{
+                  style: {
+                    position: "relative",
+                  },
+                }}
+              >
+                <span style={progressStyle}></span>
+                <span style={{ position: "relative" }}>
+                  {protocolLoading ? "Aktualizace..." : "Aktualizovat"}
+                </span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </article>
+    </>
+  );
+};
+
+export default Protocol;

src/serviceWorker.js

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

src/stores.js

 import memoize from "lodash/memoize";
 import { Store } from "pullstate";
 
-import { filterPosts } from "utils";
+/** @type {CF2021.GlobalInfoStorePayload} */
+const globalInfoStoreInitial = {
+  connectionState: "connecting",
+  onlineMembers: 0,
+  onlineUsers: 0,
+  groupSizeHalf: null,
+  websocketUrl: null,
+  streamUrl: null,
+  protocolUrl: null,
+  protocol: null,
+};
+
+export const GlobalInfoStore = new Store(globalInfoStoreInitial);
 
 /** @type {CF2021.AuthStorePayload} */
 const authStoreInitial = {
   isAuthenticated: false,
-  groupMappings: [],
+  showJitsiInvitePopup: false,
+  jitsiPopupDismissed: false,
 };
 
 export const AuthStore = new Store(authStoreInitial);
 
-/** @type {CF2021.AnnouncementStorePayload} */
-const announcementStoreInitial = {
-  items: [
-    {
-      id: "1",
-      content:
-        "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-      datetime: new Date(),
-      seen: false,
-      type: "rejected-procedure-proposal",
-    },
-    {
-      id: "2",
-      content:
-        "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-      datetime: new Date(),
-      seen: false,
-      type: "accepted-procedure-proposal",
-    },
-    {
-      id: "3",
-      content:
-        "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-      datetime: new Date(),
-      seen: true,
-      type: "suggested-procedure-proposal",
-    },
-    {
-      id: "4",
-      content:
-        "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-      datetime: new Date(),
-      seen: true,
-      type: "voting",
-    },
-    {
-      id: "5",
-      content:
-        "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-      datetime: new Date(),
-      seen: true,
-      type: "announcement",
-    },
-    {
-      id: "6",
-      content:
-        "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-      datetime: new Date(),
-      seen: true,
-      type: "user-ban",
-    },
-  ],
+/** @type {CF2021.ProgramStorePayload} */
+const programStoreInitial = {
+  items: {},
+  currentId: undefined,
+  scheduleIds: [],
 };
 
-export const AnnouncementStore = new Store(announcementStoreInitial);
-
-const allPosts = [
-  {
-    id: "1",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "cf",
-    },
-    ranking: {
-      likes: 0,
-      dislikes: 0,
-      score: 0,
-      myVote: "none",
-    },
-    seen: false,
-    archived: false,
-    type: "post",
-  },
-  {
-    id: "2",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "cf",
-    },
-    ranking: {
-      likes: 1,
-      dislikes: 0,
-      score: 1,
-      myVote: "none",
-    },
-    seen: false,
-    archived: false,
-    type: "post",
-  },
-  {
-    id: "3",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "cf",
-    },
-    ranking: {
-      likes: 5,
-      dislikes: 5,
-      score: 0,
-      myVote: "none",
-    },
-    seen: true,
-    archived: false,
-    type: "post",
-  },
-  {
-    id: "4",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 0,
-      dislikes: 10,
-      score: -10,
-      myVote: "none",
-    },
-    seen: true,
-    archived: false,
-    type: "post",
-  },
-  {
-    id: "5",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 1,
-      dislikes: 1,
-      score: 0,
-      myVote: "none",
-    },
-    seen: true,
-    archived: false,
-    type: "post",
-  },
-  {
-    id: "6",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 5,
-      dislikes: 3,
-      score: 2,
-      myVote: "none",
-    },
-    seen: true,
-    archived: true,
-    type: "post",
-  },
-  {
-    id: "7",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 5,
-      dislikes: 8,
-      score: -3,
-      myVote: "none",
-    },
-    seen: true,
-    archived: true,
-    type: "procedure-proposal",
-    state: "pending",
-  },
-  {
-    id: "8",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 2,
-      dislikes: 1,
-      score: 1,
-      myVote: "like",
-    },
-    seen: true,
-    archived: false,
-    type: "procedure-proposal",
-    state: "announced",
-    historyLog: [
-      {
-        attribute: "content",
-        datetime: new Date(),
-        newValue: "Lemme know",
-        originator: "chairman",
-      },
-    ],
-  },
-  {
-    id: "9",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 5,
-      dislikes: 0,
-      score: 5,
-      myVote: "dislike",
-    },
-    seen: true,
-    archived: false,
-    type: "procedure-proposal",
-    state: "accepted",
-  },
-  {
-    id: "10",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 5,
-      dislikes: 8,
-      score: -3,
-      myVote: "none",
-    },
-    seen: true,
-    archived: false,
-    type: "procedure-proposal",
-    state: "rejected",
-  },
-  {
-    id: "11",
-    content:
-      "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
-    datetime: new Date(),
-    author: {
-      name: "John Doe",
-      group: "KS Pardubický kraj",
-    },
-    ranking: {
-      likes: 10,
-      dislikes: 1,
-      score: 9,
-      myVote: "none",
-    },
-    seen: true,
-    archived: true,
-    type: "procedure-proposal",
-    state: "rejected-by-chairman",
-  },
-];
+export const ProgramStore = new Store(programStoreInitial);
 
-const initialPostFilters = {
-  flags: "all",
-  sort: "byDate",
-  type: "all",
+/** @type {CF2021.AnnouncementStorePayload} */
+const announcementStoreInitial = {
+  items: {},
+  itemIds: [],
 };
 
-const filteredPosts = filterPosts(initialPostFilters, allPosts);
+export const AnnouncementStore = new Store(announcementStoreInitial);
 
 /** @type {CF2021.PostStorePayload} */
 const postStoreInitial = {
-  items: allPosts,
-  itemCount: allPosts.length,
+  items: {},
+  itemCount: 0,
   window: {
-    items: filteredPosts,
-    itemCount: filteredPosts.length,
-    page: 1,
-    perPage: 5,
+    items: [],
+    itemCount: 0,
+  },
+  filters: {
+    flags: "active",
+    sort: "byScore",
+    type: "all",
+    showPendingProposals: false,
   },
-  filters: initialPostFilters,
 };
 
 export const PostStore = new Store(postStoreInitial);
@@ -319,7 +63,7 @@ export const getGroupByCode = memoize(
   (groupMappings, groupCode) => {
     return groupMappings.find((gm) => gm.code === groupCode);
   },
-  (groupMappings, groupCode) => [groupMappings, groupCode]
+  (groupMappings, groupCode) => [groupMappings, groupCode],
 );
 
 export const getGroupsByCode = memoize((groupMappings, groupCodes) => {

src/utils.js

+import { parse } from "date-fns";
 import filter from "lodash/filter";
+import pick from "lodash/pick";
+import property from "lodash/property";
+import values from "lodash/values";
+import WaitQueue from "wait-queue";
 
+import { markdownConverter } from "markdown";
+
+export const urlRegex =
+  /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
+export const seenPostsLSKey = "cf2021_seen_posts";
+export const seenAnnouncementsLSKey = "cf2021_seen_announcements";
+
+/**
+ * Filter & sort collection of posts.
+ * @param {CF2021.PostStoreFilters} filters
+ * @param {CF2021.PostStoreItems} allItems
+ * @returns {CF2021.Post[]}
+ */
 export const filterPosts = (filters, allItems) => {
   const predicate = {};
 
@@ -19,9 +37,171 @@ export const filterPosts = (filters, allItems) => {
 
   let filteredItems = filter(allItems, predicate);
 
+  if (!filters.showPendingProposals) {
+    filteredItems = filteredItems.filter(
+      (item) => item.type === "post" || item.state !== "pending",
+    );
+  }
+
   if (filters.sort === "byDate") {
     return filteredItems.sort((a, b) => b.datetime - a.datetime);
   }
 
   return filteredItems.sort((a, b) => b.ranking.score - a.ranking.score);
 };
+
+/**
+ * Update current posts window according to used filters.
+ * @param {CF2021.PostStorePayload} state
+ */
+export const updateWindowPosts = (state) => {
+  state.window.items = filterPosts(state.filters, values(state.items)).map(
+    property("id"),
+  );
+};
+
+/**
+ * Update itemIds from items.
+ * @param {CF2021.AnnouncementStorePayload} state
+ */
+export const syncAnnoucementItemIds = (state) => {
+  state.itemIds = values(state.items)
+    .sort((a, b) => b.datetime - a.datetime)
+    .map((announcement) => announcement.id);
+};
+
+export const postsMyVoteMapping = {
+  0: "none",
+  1: "like",
+  [-1]: "dislike",
+};
+
+export const postsTypeMapping = {
+  0: "procedure-proposal",
+  1: "post",
+};
+
+export const postsTypeMappingRev = {
+  post: 1,
+  "procedure-proposal": 0,
+};
+
+export const postsStateMapping = {
+  0: "pending",
+  1: "announced",
+  2: "accepted",
+  3: "rejected",
+  4: "rejected-by-chairman",
+};
+
+export const postsStateMappingRev = {
+  pending: 0,
+  announced: 1,
+  accepted: 2,
+  rejected: 3,
+  "rejected-by-chairman": 4,
+};
+
+export const announcementTypeMapping = {
+  0: "rejected-procedure-proposal",
+  1: "accepted-procedure-proposal",
+  2: "suggested-procedure-proposal",
+  3: "voting",
+  4: "announcement",
+  5: "user-ban",
+};
+
+export const announcementTypeMappingRev = {
+  "rejected-procedure-proposal": 0,
+  "accepted-procedure-proposal": 1,
+  "suggested-procedure-proposal": 2,
+  voting: 3,
+  announcement: 4,
+  "user-ban": 5,
+};
+
+/**
+ * Parse single post from the API.
+ *
+ * @param {any} rawPost
+ * @returns {CF2021.Post}
+ */
+export const parseRawPost = (rawPost) => {
+  const post = {
+    ...pick(rawPost, ["id", "content"]),
+    author: {
+      ...pick(rawPost.author, ["id", "name", "username", "group"]),
+      isBanned: rawPost.author.is_banned === 1,
+    },
+    contentHtml: markdownConverter.makeHtml(rawPost.content),
+    datetime: parse(rawPost.datetime, "yyyy-MM-dd HH:mm:ss", new Date()),
+    historyLog: rawPost.history_log,
+    ranking: {
+      dislikes: rawPost.ranking.dislikes,
+      likes: rawPost.ranking.likes,
+      score: rawPost.ranking.score,
+      myVote: postsMyVoteMapping[rawPost.ranking.my_vote],
+    },
+    type: postsTypeMapping[rawPost.type],
+    modified: Boolean(rawPost.is_changed),
+    archived: Boolean(rawPost.is_archived),
+    hidden: false,
+    seen: isSeen(seenPostsLSKey, rawPost.id),
+  };
+
+  if (post.type === "procedure-proposal") {
+    post.state = postsStateMapping[rawPost.state];
+  }
+
+  return post;
+};
+
+/**
+ * Parse single announcement from the API.
+ *
+ * @param {any} rawAnnouncement
+ * @returns {CF2021.Announcement}
+ */
+export const parseRawAnnouncement = (rawAnnouncement) => {
+  const announcement = {
+    ...pick(rawAnnouncement, ["id", "content", "link"]),
+    contentHtml: markdownConverter.makeHtml(rawAnnouncement.content),
+    datetime: parse(
+      rawAnnouncement.datetime,
+      "yyyy-MM-dd HH:mm:ss",
+      new Date(),
+    ),
+    type: announcementTypeMapping[rawAnnouncement.type],
+    seen: isSeen(seenAnnouncementsLSKey, rawAnnouncement.id),
+  };
+
+  return announcement;
+};
+
+export const createSeenWriter = (localStorageKey) => {
+  const queue = new WaitQueue();
+
+  const seenWriterWorker = async () => {
+    const id = await queue.shift();
+    const seen = new Set(
+      (localStorage.getItem(localStorageKey) || "").split(","),
+    );
+
+    seen.add(id);
+
+    localStorage.setItem(localStorageKey, Array.from(seen).join(","));
+
+    setTimeout(seenWriterWorker);
+  };
+
+  seenWriterWorker();
+
+  return {
+    markSeen: (id) => queue.push(id),
+  };
+};
+
+export const isSeen = (localStorageKey, id) => {
+  const val = localStorage.getItem(localStorageKey) || "";
+  return val.indexOf(id) !== -1;
+};

src/ws/connection.js

+import hex from "crypto-js/enc-hex";
+import hmacSHA1 from "crypto-js/hmac-sha1";
+import WaitQueue from "wait-queue";
+
+import { AuthStore, GlobalInfoStore } from "stores";
+
+import { handlers } from "./handlers";
+
+function Worker() {
+  const queue = new WaitQueue();
+
+  const doLoop = async () => {
+    const event = await queue.shift();
+    messageRouter(event);
+    setTimeout(doLoop);
+  };
+
+  const messageRouter = (event) => {
+    console.debug("[ws][worker] New message", event.data);
+
+    try {
+      const data = JSON.parse(event.data);
+
+      if (!data.event) {
+        return console.error("[ws][worker] Missing `event` field");
+      }
+
+      const handlerFn = handlers[data.event];
+
+      if (!handlerFn) {
+        return console.warn(`[ws][worker] Can't handle event '${data.event}'`);
+      }
+
+      handlerFn(data.payload || {});
+    } catch (err) {
+      console.error("[ws][worker] Could not parse message.", err);
+    }
+  };
+
+  return {
+    queue,
+    start: () => {
+      console.debug("[ws][worker] Start processing messages.");
+      doLoop();
+    },
+  };
+}
+
+const buildKeepalivePayload = async () => {
+  const { user } = AuthStore.getRawState();
+  const payload = user && user.id ? user.id.toString() : "";
+  const signature =
+    user && !!user.secret ? hmacSHA1(payload, user.secret) : null;
+
+  return {
+    event: "KEEPALIVE",
+    payload,
+    sig: signature ? hex.stringify(signature) : null,
+  };
+};
+
+export const connect = ({ url, onConnect }) => {
+  return new Promise((resolve, reject) => {
+    const worker = Worker();
+
+    GlobalInfoStore.update((state) => {
+      state.connectionState = "connecting";
+    });
+    const ws = new WebSocket(url);
+
+    let keepAliveInterval;
+    console.log("[ws] Connecting ...");
+
+    ws.onopen = () => {
+      GlobalInfoStore.update((state) => {
+        state.connectionState = "connected";
+      });
+      console.log("[ws] Connected.");
+
+      const sendKeepalive = async () => {
+        ws.send(JSON.stringify(await buildKeepalivePayload()));
+        console.debug("[ws] Sending keepalive.");
+      };
+
+      sendKeepalive();
+
+      keepAliveInterval = setInterval(sendKeepalive, 15 * 1000);
+
+      const self = { ws, worker, sendKeepalive };
+
+      if (onConnect) {
+        return onConnect(self).then(() => resolve(self));
+      }
+
+      return resolve(self);
+    };
+
+    ws.onmessage = worker.queue.push.bind(worker.queue);
+
+    ws.onclose = (event) => {
+      GlobalInfoStore.update((state) => {
+        state.connectionState = "offline";
+      });
+      console.log(
+        "[ws] Socket is closed. Reconnect will be attempted in 1 second.",
+        event.reason,
+      );
+
+      clearInterval(keepAliveInterval);
+      setTimeout(() => connect({ url, onConnect }), 1000);
+    };
+
+    ws.onerror = (err) => {
+      console.error(
+        "[ws] Socket encountered error: ",
+        err.message,
+        "Closing socket",
+      );
+      ws.close();
+      reject(err);
+    };
+  });
+};

src/ws/handlers/announcements.js

+import has from "lodash/has";
+
+import { markdownConverter } from "markdown";
+import { AnnouncementStore } from "stores";
+import { parseRawAnnouncement, syncAnnoucementItemIds } from "utils";
+
+export const handleAnnouncementChanged = (payload) => {
+  AnnouncementStore.update((state) => {
+    if (state.items[payload.id]) {
+      if (has(payload, "content")) {
+        state.items[payload.id].content = payload.content;
+        state.items[payload.id].contentHtml = markdownConverter.makeHtml(
+          payload.content,
+        );
+      }
+      if (has(payload, "link")) {
+        state.items[payload.id].link = payload.link;
+      }
+    }
+  });
+};
+
+export const handleAnnouncementCreated = (payload) => {
+  AnnouncementStore.update((state) => {
+    state.items[payload.id] = parseRawAnnouncement(payload);
+    syncAnnoucementItemIds(state);
+  });
+};
+
+export const handleAnnouncementDeleted = (payload) => {
+  AnnouncementStore.update((state) => {
+    delete state.items[payload.id];
+    syncAnnoucementItemIds(state);
+  });
+};

src/ws/handlers/global.js

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

src/ws/handlers/index.js

+import {
+  handleAnnouncementChanged,
+  handleAnnouncementCreated,
+  handleAnnouncementDeleted,
+} from "./announcements";
+import { handleOnlineUsersUpdated } from "./global";
+import {
+  handlePostChanged,
+  handlePostCreated,
+  handlePostDeleted,
+  handlePostRanked,
+} from "./posts";
+import { handleProgramEntryChanged } from "./program";
+import {
+  handleUserBanned,
+  handleUserStatus,
+  handleUserUnbanned,
+} from "./users";
+
+export const handlers = {
+  announcement_changed: handleAnnouncementChanged,
+  announcement_created: handleAnnouncementCreated,
+  announcement_deleted: handleAnnouncementDeleted,
+  post_ranked: handlePostRanked,
+  post_changed: handlePostChanged,
+  post_created: handlePostCreated,
+  post_deleted: handlePostDeleted,
+  program_entry_changed: handleProgramEntryChanged,
+  user_banned: handleUserBanned,
+  user_unbanned: handleUserUnbanned,
+  user_status: handleUserStatus,
+  online_users_updated: handleOnlineUsersUpdated,
+};

src/ws/handlers/posts.js

+import has from "lodash/has";
+import throttle from "lodash/throttle";
+
+import { markdownConverter } from "markdown";
+import { PostStore } from "stores";
+import { parseRawPost, postsStateMapping, updateWindowPosts } from "utils";
+
+/**
+ * Re-apply sorting by rank but no more than once every 3 seconds.
+ */
+const sortOnRankThrottled = throttle(() => {
+  PostStore.update((state) => {
+    if (state.filters.sort === "byScore") {
+      updateWindowPosts(state);
+    }
+  });
+}, 5000);
+
+export const handlePostRanked = (payload) => {
+  PostStore.update((state) => {
+    if (state.items[payload.id]) {
+      state.items[payload.id].ranking.likes = payload["ranking_likes"];
+      state.items[payload.id].ranking.dislikes = payload["ranking_dislikes"];
+      state.items[payload.id].ranking.score =
+        state.items[payload.id].ranking.likes -
+        state.items[payload.id].ranking.dislikes;
+    }
+  });
+
+  // Run sorting in a throttled manner.
+  sortOnRankThrottled();
+};
+
+export const handlePostChanged = (payload) => {
+  PostStore.update((state) => {
+    if (state.items[payload.id]) {
+      if (has(payload, "content")) {
+        state.items[payload.id].content = payload.content;
+        state.items[payload.id].contentHtml = markdownConverter.makeHtml(
+          payload.content,
+        );
+        state.items[payload.id].modified = true;
+      }
+
+      if (has(payload, "state")) {
+        state.items[payload.id].state = postsStateMapping[payload.state];
+        updateWindowPosts(state);
+      }
+
+      if (has(payload, "is_archived")) {
+        state.items[payload.id].archived = payload.is_archived;
+        updateWindowPosts(state);
+      }
+    }
+  });
+};
+
+export const handlePostCreated = (payload) => {
+  PostStore.update((state) => {
+    state.items[payload.id] = parseRawPost(payload);
+    state.itemCount = Object.keys(state.items).length;
+    updateWindowPosts(state);
+  });
+};
+
+export const handlePostDeleted = (payload) => {
+  PostStore.update((state) => {
+    delete state.items[payload.id];
+    updateWindowPosts(state);
+  });
+};

src/ws/handlers/program.js

+import has from "lodash/has";
+
+import { loadPosts } from "actions/posts";
+import { markdownConverter } from "markdown";
+import { ProgramStore } from "stores";
+
+export const handleProgramEntryChanged = (payload) => {
+  ProgramStore.update((state) => {
+    const entry = state.items[payload.id];
+
+    if (entry) {
+      if (has(payload, "discussion_opened")) {
+        state.items[payload.id].discussionOpened = payload.discussion_opened;
+      }
+      if (has(payload, "title")) {
+        state.items[payload.id].title = payload.title;
+        state.items[payload.id].fullTitle =
+          entry.number !== "" ? `${entry.number}. ${entry.title}` : entry.title;
+      }
+      if (has(payload, "description")) {
+        state.items[payload.id].description = payload.description;
+        state.items[payload.id].htmlContent = markdownConverter.makeHtml(
+          payload.description,
+        );
+      }
+
+      if (has(payload, "is_live") && payload.is_live) {
+        state.currentId = payload.id;
+      }
+    }
+  });
+
+  if (has(payload, "is_live") && payload.is_live) {
+    // Re-load posts - these are bound directly to the program schedule entry.
+    loadPosts.run({}, { respectCache: false });
+  }
+};

src/ws/handlers/users.js

+import has from "lodash/has";
+
+import { AuthStore, PostStore } from "stores";
+
+export const handleUserBanned = (payload) => {
+  AuthStore.update((state) => {
+    if (state.user && state.user.id && payload.id === state.user.id) {
+      state.user.isBanned = true;
+    }
+  });
+
+  PostStore.update((state) => {
+    Object.keys(state.items).forEach((key) => {
+      if (state.items[key].author.id === payload.id) {
+        state.items[key].author.isBanned = true;
+      }
+    });
+  });
+};
+
+export const handleUserUnbanned = (payload) => {
+  AuthStore.update((state) => {
+    if (state.user && state.user.id && payload.id === state.user.id) {
+      state.user.isBanned = false;
+    }
+  });
+
+  PostStore.update((state) => {
+    Object.keys(state.items).forEach((key) => {
+      if (state.items[key].author.id === payload.id) {
+        state.items[key].author.isBanned = false;
+      }
+    });
+  });
+};
+
+export const handleUserStatus = (payload) => {
+  AuthStore.update((state) => {
+    if (has(payload, "jitsi_allowed")) {
+      state.showJitsiInvitePopup = payload.jitsi_allowed;
+    }
+  });
+};