src/actions/global-info.js

 import isArray from "lodash/isArray";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
+import { markdownConverter } from "markdown";
 import { GlobalInfoStore } from "stores";
 
 export const loadConfig = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/config");
+      const resp = await fetchApi("/config");
       const payload = await resp.json();
 
       if (!isArray(payload)) {
@@ -30,9 +31,39 @@ export const loadConfig = createAsyncAction(
             if (rawConfigItem.id === "websocket_url") {
               state.websocketUrl = rawConfigItem.value;
             }
+            if (rawConfigItem.id === "record_url") {
+              state.protocolUrl = rawConfigItem.value;
+            }
           });
         });
       }
     },
+  },
+);
+
+export const loadProtocol = createAsyncAction(
+  async () => {
+    const { protocolUrl } = GlobalInfoStore.getRawState();
+
+    try {
+      const resp = await fetch(protocolUrl);
+
+      if (resp.status !== 200) {
+        return errorResult([], `Unexpected status code ${resp.status}`);
       }
+
+      return successResult(await resp.text());
+    } catch (err) {
+      return errorResult([], err.toString());
+    }
+  },
+  {
+    postActionHook: ({ result }) => {
+      if (!result.error) {
+        GlobalInfoStore.update((state) => {
+          state.protocol = markdownConverter.makeHtml(result.payload);
+        });
+      }
+    },
+  },
 );

src/actions/posts.js

@@ -2,8 +2,8 @@ import keyBy from "lodash/keyBy";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
-import { PostStore } from "stores";
+import { fetchApi } from "api";
+import { AuthStore, PostStore } from "stores";
 import {
   createSeenWriter,
   filterPosts,
@@ -16,7 +16,7 @@ import {
 export const loadPosts = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/posts", { expectedStatus: 200 });
+      const resp = await fetchApi("/posts", { expectedStatus: 200 });
       const data = await resp.json();
       return successResult(data.data);
     } catch (err) {
@@ -36,13 +36,11 @@ export const loadPosts = createAsyncAction(
           state.window = {
             items: filteredPosts.map(property("id")),
             itemCount: filteredPosts.length,
-            page: 1,
-            perPage: 20,
           };
         });
       }
     },
-  }
+  },
 );
 
 export const like = createAsyncAction(
@@ -51,7 +49,7 @@ export const like = createAsyncAction(
    */
   async (post) => {
     try {
-      await fetch(`/posts/${post.id}/like`, {
+      await fetchApi(`/posts/${post.id}/like`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -71,7 +69,7 @@ export const like = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const dislike = createAsyncAction(
@@ -80,7 +78,7 @@ export const dislike = createAsyncAction(
    */
   async (post) => {
     try {
-      await fetch(`/posts/${post.id}/dislike`, {
+      await fetchApi(`/posts/${post.id}/dislike`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -100,7 +98,7 @@ export const dislike = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -112,7 +110,7 @@ export const addPost = createAsyncAction(async ({ content }) => {
       content,
       type: postsTypeMappingRev["post"],
     });
-    await fetch(`/posts`, { method: "POST", body, expectedStatus: 201 });
+    await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
     return successResult();
   } catch (err) {
     return errorResult([], err.toString());
@@ -128,7 +126,7 @@ export const addProposal = createAsyncAction(async ({ content }) => {
       content,
       type: postsTypeMappingRev["procedure-proposal"],
     });
-    await fetch(`/posts`, { method: "POST", body, expectedStatus: 201 });
+    await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
     return successResult();
   } catch (err) {
     return errorResult([], err.toString());
@@ -144,7 +142,7 @@ export const hide = createAsyncAction(
    */
   async (post) => {
     try {
-      await fetch(`/posts/${post.id}`, {
+      await fetchApi(`/posts/${post.id}`, {
         method: "DELETE",
         expectedStatus: 204,
       });
@@ -152,7 +150,7 @@ export const hide = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 /**
@@ -167,7 +165,7 @@ export const edit = createAsyncAction(
       const body = JSON.stringify({
         content: newContent,
       });
-      await fetch(`/posts/${post.id}`, {
+      await fetchApi(`/posts/${post.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -176,7 +174,22 @@ export const edit = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
+  },
+  {
+    shortCircuitHook: ({ args }) => {
+      const { user } = AuthStore.getRawState();
+
+      if (!user) {
+        return errorResult();
       }
+
+      if (user && user.isBanned) {
+        return errorResult();
+      }
+
+      return false;
+    },
+  },
 );
 
 /**
@@ -191,7 +204,7 @@ export const archive = createAsyncAction(
       const body = JSON.stringify({
         is_archived: true,
       });
-      await fetch(`/posts/${post.id}`, {
+      await fetchApi(`/posts/${post.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -200,7 +213,7 @@ export const archive = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 /**
@@ -208,11 +221,12 @@ export const archive = createAsyncAction(
  * @param {CF2021.ProposalPost} proposal
  * @param {CF2021.ProposalPostState} state
  */
-const updateProposalState = async (proposal, state) => {
+const updateProposalState = async (proposal, state, additionalPayload) => {
   const body = JSON.stringify({
     state: postsStateMappingRev[state],
+    ...(additionalPayload || {}),
   });
-  await fetch(`/posts/${proposal.id}`, {
+  await fetchApi(`/posts/${proposal.id}`, {
     method: "PUT",
     body,
     expectedStatus: 204,
@@ -242,7 +256,7 @@ export const announceProposal = createAsyncAction(
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -252,22 +266,22 @@ export const acceptProposal = createAsyncAction(
   /**
    * @param {CF2021.ProposalPost} proposal
    */
-  (proposal) => {
-    return updateProposalState(proposal, "accepted");
+  ({ proposal, archive }) => {
+    return updateProposalState(proposal, "accepted", { is_archived: archive });
   },
   {
     shortCircuitHook: ({ args }) => {
-      if (args.type !== "procedure-proposal") {
+      if (args.proposal.type !== "procedure-proposal") {
         return errorResult();
       }
 
-      if (args.state !== "announced") {
+      if (args.proposal.state !== "announced") {
         return errorResult();
       }
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -277,22 +291,22 @@ export const rejectProposal = createAsyncAction(
   /**
    * @param {CF2021.ProposalPost} proposal
    */
-  (proposal) => {
-    return updateProposalState(proposal, "rejected");
+  ({ proposal, archive }) => {
+    return updateProposalState(proposal, "rejected", { is_archived: archive });
   },
   {
     shortCircuitHook: ({ args }) => {
-      if (args.type !== "procedure-proposal") {
+      if (args.proposal.type !== "procedure-proposal") {
         return errorResult();
       }
 
-      if (args.state !== "announced") {
+      if (args.proposal.state !== "announced") {
         return errorResult();
       }
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -302,22 +316,24 @@ export const rejectProposalByChairman = createAsyncAction(
   /**
    * @param {CF2021.ProposalPost} proposal
    */
-  (proposal) => {
-    return updateProposalState(proposal, "rejected-by-chairman");
+  ({ proposal, archive }) => {
+    return updateProposalState(proposal, "rejected-by-chairman", {
+      is_archived: archive,
+    });
   },
   {
     shortCircuitHook: ({ args }) => {
-      if (args.type !== "procedure-proposal") {
+      if (args.proposal.type !== "procedure-proposal") {
         return errorResult();
       }
 
-      if (!["pending", "announced"].includes(args.state)) {
+      if (!["pending", "announced"].includes(args.proposal.state)) {
         return errorResult();
       }
 
       return false;
     },
-  }
+  },
 );
 
 const { markSeen: storeSeen } = createSeenWriter(seenPostsLSKey);

src/actions/program.js

@@ -4,7 +4,8 @@ import pick from "lodash/pick";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
+import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
 import { loadPosts } from "./posts";
@@ -12,7 +13,7 @@ import { loadPosts } from "./posts";
 export const loadProgram = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/program");
+      const resp = await fetchApi("/program");
       const mappings = await resp.json();
       return successResult(mappings);
     } catch (err) {
@@ -37,22 +38,28 @@ export const loadProgram = createAsyncAction(
                   "title",
                   "description",
                   "proposer",
+                  "speakers",
                 ]),
+                fullTitle:
+                  entry.number !== ""
+                    ? `${entry.number}. ${entry.title}`
+                    : entry.title,
+                htmlContent: markdownConverter.makeHtml(entry.description),
                 discussionOpened: entry.discussion_opened,
                 expectedStartAt: parse(
                   entry.expected_start_at,
                   "yyyy-MM-dd HH:mm:ss",
-                  new Date()
+                  new Date(),
                 ),
                 expectedFinishAt: entry.expected_finish_at
                   ? parse(
                       entry.expected_finish_at,
                       "yyyy-MM-dd HH:mm:ss",
-                      new Date()
+                      new Date(),
                     )
                   : undefined,
               };
-            }
+            },
           )
           .sort((a, b) => a.expectedStartAt - b.expectedStartAt);
 
@@ -68,7 +75,7 @@ export const loadProgram = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -80,7 +87,7 @@ export const renameProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         title: newTitle,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -101,7 +108,7 @@ export const renameProgramPoint = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -117,7 +124,7 @@ export const endProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         is_live: false,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -135,7 +142,7 @@ export const endProgramPoint = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -151,7 +158,7 @@ export const activateProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         is_live: true,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -172,7 +179,7 @@ export const activateProgramPoint = createAsyncAction(
         loadPosts.run({}, { respectCache: false });
       }
     },
-  }
+  },
 );
 
 /**
@@ -188,7 +195,7 @@ export const openDiscussion = createAsyncAction(
       const body = JSON.stringify({
         discussion_opened: true,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -208,7 +215,7 @@ export const openDiscussion = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -220,7 +227,7 @@ export const closeDiscussion = createAsyncAction(
       const body = JSON.stringify({
         discussion_opened: false,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -240,5 +247,5 @@ export const closeDiscussion = createAsyncAction(
         });
       }
     },
-  }
+  },
 );

src/actions/users.js

+import * as Sentry from "@sentry/react";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
-import { AuthStore } from "stores";
+import { fetchApi } from "api";
+import keycloak from "keycloak";
+import { AuthStore, PostStore } from "stores";
+import { updateWindowPosts } from "utils";
 
 export const loadMe = createAsyncAction(
   /**
    * @param {number} userId
    */
-  async (user) => {
+  async () => {
     try {
-      const response = await fetch(`/users/me`, {
+      const response = await fetchApi(`/users/me`, {
         method: "GET",
         expectedStatus: 200,
       });
@@ -32,7 +35,7 @@ export const loadMe = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const ban = createAsyncAction(
@@ -41,7 +44,7 @@ export const ban = createAsyncAction(
    */
   async (user) => {
     try {
-      await fetch(`/users/${user.id}/ban`, {
+      await fetchApi(`/users/${user.id}/ban`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -49,7 +52,7 @@ export const ban = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const unban = createAsyncAction(
@@ -58,13 +61,65 @@ export const unban = createAsyncAction(
    */
   async (user) => {
     try {
-      await fetch(`/users/${user.id}/unban`, {
+      await fetchApi(`/users/${user.id}/unban`, {
+        method: "PATCH",
+        expectedStatus: 204,
+      });
+      return successResult(user);
+    } catch (err) {
+      return errorResult([], err.toString());
+    }
+  },
+);
+
+export const inviteToJitsi = createAsyncAction(
+  /**
+   * @param {number} userId
+   */
+  async (user) => {
+    try {
+      const body = JSON.stringify({
+        allowed: true,
+      });
+      await fetchApi(`/users/${user.id}/jitsi`, {
         method: "PATCH",
+        body,
         expectedStatus: 204,
       });
       return successResult(user);
     } catch (err) {
       return errorResult([], err.toString());
     }
+  },
+);
+
+export const refreshAccessToken = async () => {
+  const { isAuthenticated } = AuthStore.getRawState();
+
+  if (!isAuthenticated) {
+    return;
   }
+
+  try {
+    await keycloak.updateToken(60);
+    console.info("[auth] access token refreshed");
+  } catch (exc) {
+    console.warn(
+      "[auth] could not refresh the access token, refresh token possibly expired, logging out",
     );
+
+    Sentry.setUser(null);
+
+    AuthStore.update((state) => {
+      state.isAuthenticated = false;
+      state.user = null;
+      state.showJitsiInvitePopup = false;
+      state.jitsiPopupDimissed = false;
+    });
+
+    PostStore.update((state) => {
+      state.filters.showPendingProposals = false;
+      updateWindowPosts(state);
+    });
+  }
+};

src/api.js

-import baseFetch from "unfetch";
-
 import { AuthStore } from "./stores";
 
-export const fetch = async (
+export const fetchApi = async (
   url,
-  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {}
+  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {},
 ) => {
   const { isAuthenticated, user } = AuthStore.getRawState();
 
@@ -16,10 +14,11 @@ export const fetch = async (
     headers["Content-Type"] = "application/json";
   }
 
-  const response = await baseFetch(process.env.REACT_APP_API_BASE_URL + url, {
+  const response = await fetch(process.env.REACT_APP_API_BASE_URL + url, {
     body,
     method,
     headers,
+    redirect: "follow",
   });
 
   if (!!expectedStatus && response.status !== expectedStatus) {

src/components/Button.jsx

@@ -12,6 +12,7 @@ const Button = ({
   loading = false,
   children,
   routerTo,
+  bodyProps = {},
   ...props
 }) => {
   const btnClass = classNames(
@@ -30,7 +31,9 @@ const Button = ({
 
   const inner = (
     <div className="btn__body-wrap">
-      <div className={bodyClass}>{children}</div>
+      <div className={bodyClass} {...bodyProps}>
+        {children}
+      </div>
       {!!icon && (
         <div className="btn__icon">
           <i className={icon}></i>

src/components/Footer.jsx

-import React from "react";
+import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
+import useWindowSize from "@rooks/use-window-size";
+import classNames from "classnames";
 
 const Footer = () => {
+  const { innerWidth } = useWindowSize();
+  const [showCfMenu, setShowCfMenu] = useState(false);
+  const [showOtherMenu, setShowOtherMenu] = useState(false);
+  const isLg = innerWidth >= 1024;
+
   return (
     <footer className="footer bg-grey-700 text-white">
       <div className="footer__main py-4 lg:py-16 container container--default">
@@ -12,17 +19,25 @@ const Footer = () => {
             className="w-32 md:w-40 pb-6"
           />
           <p className="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
-            Piráti, 2021. Všechna práva vyhlazena. Sdílejte a nechte ostatní
+            Piráti, 2024. Všechna práva vyhlazena. Sdílejte a nechte ostatní
             sdílet za stejných podmínek.
           </p>
         </section>
-        <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
+        <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-2 gap-4">
           <div className="pt-8 pb-4 lg:py-0">
             <div className="footer-collapsible">
-              <span className="text-xl uppercase text-white footer-collapsible__toggle">
-                CF 2021
+              <span
+                className={classNames(
+                  "text-xl uppercase text-white footer-collapsible__toggle",
+                  {
+                    "footer-collapsible__toggle--open": showCfMenu,
+                  }
+                )}
+                onClick={() => setShowCfMenu(!showCfMenu)}
+              >
+                CF 2024
               </span>{" "}
-              <div className="">
+              <div className={showCfMenu || isLg ? "" : "hidden"}>
                 <ul className="mt-6 space-y-2 text-grey-200">
                   <li>
                     <NavLink to="/">Přímý přenos</NavLink>
@@ -30,16 +45,30 @@ const Footer = () => {
                   <li>
                     <NavLink to="/program">Program</NavLink>
                   </li>
+                  <li>
+                    <NavLink to="/protocol">Zápis</NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/about">Co je to celostátní fórum?</NavLink>
+                  </li>
                 </ul>
               </div>
             </div>
           </div>
           <div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
             <div className="footer-collapsible">
-              <span className="text-xl uppercase text-white footer-collapsible__toggle">
+              <span
+                className={classNames(
+                  "text-xl uppercase text-white footer-collapsible__toggle",
+                  {
+                    "footer-collapsible__toggle--open": showOtherMenu,
+                  }
+                )}
+                onClick={() => setShowOtherMenu(!showOtherMenu)}
+              >
                 Otevřenost
               </span>{" "}
-              <div className="">
+              <div className={showOtherMenu || isLg ? "" : "hidden"}>
                 <ul className="mt-6 space-y-2 text-grey-200">
                   <li>
                     <a href="https://ucet.pirati.cz">Transparentní účet</a>

src/components/Navbar.jsx

@@ -7,7 +7,7 @@ import classNames from "classnames";
 import Button from "components/Button";
 import { AuthStore, GlobalInfoStore } from "stores";
 
-const Navbar = () => {
+const Navbar = ({ onGetHelp }) => {
   const { innerWidth } = useWindowSize();
   const [showMenu, setShowMenu] = useState();
   const { keycloak } = useKeycloak();
@@ -36,10 +36,12 @@ const Navbar = () => {
   };
 
   const connectionIndicator = (
-    <div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
+    <div className="inline-flex items-center">
       <span
         className="relative inline-flex h-4 w-4 mr-4"
-        title={connectionStateCaption}
+        data-tip={connectionStateCaption}
+        data-tip-at="left"
+        aria-label={connectionStateCaption}
       >
         <span
           className={classNames(
@@ -75,7 +77,7 @@ const Navbar = () => {
             to="/"
             className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline"
           >
-            Celostátní fórum 2021
+            Celostátní fórum 2024
           </NavLink>
         </div>
         <div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
@@ -100,17 +102,24 @@ const Navbar = () => {
                     Program
                   </NavLink>
                 </li>
+                <li className="navbar-menu__item">
+                  <NavLink className="navbar-menu__link" to="/protocol">
+                    Zápis
+                  </NavLink>
+                </li>
               </ul>
             </div>
-            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
+            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center justify-between">
+              <div className="order-last lg:order-first lg:mr-8">
                 {connectionIndicator}
+              </div>
               {!isAuthenticated && (
-                <Button className="btn--white" onClick={login}>
+                <Button className="btn--white joyride-login" onClick={login}>
                   Přihlásit se
                 </Button>
               )}
               {isAuthenticated && (
-                <div className="flex items-center space-x-4">
+                <div className="flex items-center space-x-4 joyride-login">
                   <span className="head-heavy-2xs">{user.name}</span>
                   <div className="avatar avatar--2xs">
                     <img
@@ -121,6 +130,9 @@ const Navbar = () => {
                   <button
                     onClick={logout}
                     className="text-grey-200 hover:text-white"
+                    aria-label="Odhlásit se"
+                    data-tip="Odhlásit se"
+                    data-tip-at="bottom"
                   >
                     <i className="ico--log-out"></i>
                   </button>

src/components/Thumbs.jsx

@@ -8,9 +8,10 @@ const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
         <button
           className={classNames("flex items-center space-x-1", {
             "cursor-pointer": !readOnly,
-            "cursor-default": readOnly,
+            "cursor-not-allowed": readOnly,
             "text-blue-300": myVote === "like",
-            "text-grey-200 hover:text-blue-300": myVote !== "like",
+            "text-grey-200 ": myVote !== "like",
+            "hover:text-blue-300": myVote !== "like" && !readOnly,
           })}
           disabled={readOnly}
           onClick={onLike}
@@ -21,9 +22,10 @@ const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
         <button
           className={classNames("flex items-center space-x-1", {
             "cursor-pointer": !readOnly,
-            "cursor-default": readOnly,
+            "cursor-not-allowed": readOnly,
             "text-red-600": myVote === "dislike",
-            "text-grey-200 hover:text-red-600": myVote !== "dislike",
+            "text-grey-200": myVote !== "dislike",
+            "hover:text-red-600": myVote !== "dislike" && !readOnly,
           })}
           disabled={readOnly}
           onClick={onDislike}

src/components/annoucements/Announcement.jsx

@@ -59,7 +59,7 @@ const Announcement = ({
 
   const chipLabel = {
     "rejected-procedure-proposal": "Zamítnutý návrh postupu",
-    "suggested-procedure-proposal": "Přijatelný návrh postupu",
+    "suggested-procedure-proposal": "Návrh postupu k hlasování",
     "accepted-procedure-proposal": "Schválený návrh postupu",
     voting: "Rozhodující hlasování",
     announcement: "Oznámení předsedajícího",
@@ -75,6 +75,10 @@ const Announcement = ({
     "announcement",
   ].includes(type);
 
+  const htmlContent = {
+    __html: content,
+  };
+
   return (
     <div className={wrapperClassName} ref={ref}>
       <div className="flex items-center justify-between mb-2">
@@ -117,7 +121,10 @@ const Announcement = ({
           </DropdownMenu>
         )}
       </div>
-      <span className="leading-tight text-sm lg:text-base">{content}</span>
+      <div
+        className="leading-tight text-sm lg:text-base content-block"
+        dangerouslySetInnerHTML={htmlContent}
+      ></div>
     </div>
   );
 };

src/components/annoucements/AnnouncementEditModal.jsx

@@ -18,14 +18,18 @@ const AnnouncementEditModal = ({
 }) => {
   const [text, setText] = useState(announcement.content);
   const [link, setLink] = useState(announcement.link);
-  const [linkValid, setLinkValid] = useState(null);
-  const [noTextError, setNoTextError] = useState(false);
+  const [textError, setTextError] = useState(null);
+  const [linkError, setLinkError] = useState(null);
 
   const onTextInput = (newText) => {
     setText(newText);
 
     if (newText !== "") {
-      setNoTextError(false);
+      if (newText.length > 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
     }
   };
 
@@ -33,7 +37,11 @@ const AnnouncementEditModal = ({
     setLink(newLink);
 
     if (!!newLink) {
-      setLinkValid(urlRegex.test(newLink));
+      if (newLink.length > 1024) {
+        setLinkError("Maximální délka URL je 256 znaků.");
+      } else {
+        setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL.");
+      }
     }
   };
 
@@ -46,12 +54,15 @@ const AnnouncementEditModal = ({
     };
 
     if (!text) {
-      setNoTextError(true);
+      setTextError("Před úpravou 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 (announcement.type === "voting" && !link) {
-      setLinkValid(false);
+      setLinkError("Zadejte platnou URL.");
       preventAction = true;
     } else {
       payload.link = link;
@@ -67,7 +78,7 @@ const AnnouncementEditModal = ({
   return (
     <Modal containerClassName="max-w-lg" onRequestClose={onCancel} {...props}>
       <form onSubmit={confirm}>
-        <Card>
+        <Card className="elevation-21">
           <CardBody>
             <div className="flex items-center justify-between mb-4">
               <CardHeadline>Upravit oznámení</CardHeadline>
@@ -78,11 +89,7 @@ const AnnouncementEditModal = ({
             <MarkdownEditor
               value={text}
               onChange={onTextInput}
-              error={
-                noTextError
-                  ? "Před úpravou oznámení nezapomeňte vyplnit jeho obsah."
-                  : null
-              }
+              error={textError}
               placeholder="Vyplňte text oznámení"
               toolbarCommands={[
                 ["bold", "italic", "strikethrough"],
@@ -92,7 +99,7 @@ const AnnouncementEditModal = ({
             <div
               className={classNames("form-field mt-4", {
                 hidden: announcement.type !== "voting",
-                "form-field--error": linkValid === false,
+                "form-field--error": !!linkError,
               })}
             >
               <div className="form-field__wrapper form-field__wrapper--shadowed">
@@ -107,8 +114,8 @@ const AnnouncementEditModal = ({
                   <i className="ico--link"></i>
                 </div>
               </div>
-              {linkValid === false && (
-                <div className="form-field__error">Zadejte platnou URL.</div>
+              {!!linkError && (
+                <div className="form-field__error">{linkError}</div>
               )}
             </div>
             {error && (
@@ -123,6 +130,7 @@ const AnnouncementEditModal = ({
               color="blue-300"
               className="text-sm"
               loading={confirming}
+              disabled={textError || linkError || confirming}
               type="submit"
             >
               Uložit

src/components/annoucements/AnnouncementList.jsx

@@ -43,7 +43,7 @@ const AnnouncementList = ({
           key={item.id}
           datetime={item.datetime}
           type={item.type}
-          content={item.content}
+          content={item.contentHtml}
           link={item.link}
           seen={item.seen}
           canRunActions={canRunActions}

src/components/cards/Card.jsx

 import React from "react";
 import classNames from "classnames";
 
-const Card = ({ children, elevation = 21, className }) => {
-  const cls = classNames("card", `elevation-${elevation}`, className);
-  return <div className={cls}>{children}</div>;
+const Card = ({ children, className }, ref) => {
+  const cls = classNames("card", className);
+  return (
+    <div className={cls} ref={ref}>
+      {children}
+    </div>
+  );
 };
 
-export default Card;
+export default React.forwardRef(Card);

src/components/cards/CardBody.jsx

 import React from "react";
 import classNames from "classnames";
 
-const CardBody = ({ children, className }) => {
+const CardBody = ({ children, className, ...props }) => {
   const cls = classNames("card__body", className);
-  return <div className={cls}>{children}</div>;
+  return (
+    <div className={cls} {...props}>
+      {children}
+    </div>
+  );
 };
 
 export default CardBody;

src/components/home/AlreadyFinished.jsx

+import React from "react";
+
+const AlreadyFinished = () => (
+  <article className="container container--wide py-8 md:py-16 lg:py-32">
+    <div className="flex">
+      <div>
+        <i className="ico--anchor text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
+      </div>
+      <div>
+        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+          Jednání už skočilo!
+        </h1>
+        <p className="text-xl leading-snug">
+          Oficiální program již skončil. Těšíme se na viděnou zase příště.
+        </p>
+      </div>
+    </div>
+  </article>
+);
+
+export default AlreadyFinished;

src/components/home/BreakInProgress.jsx

+import React from "react";
+
+import Button from "components/Button";
+
+const BreakInProgress = () => (
+  <article className="container container--wide py-8 md:py-16 lg:py-32">
+    <div className="flex">
+      <div>
+        <i className="ico--clock text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
+      </div>
+      <div>
+        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+          Probíhá přestávka ...
+        </h1>
+        <p className="text-xl leading-snug mb-8">
+          Jednání celostátního fóra je momentálně přerušeno. Můžete si ale
+          zobrazit program.
+        </p>
+        <Button
+          routerTo="/program"
+          className="md:text-lg lg:text-xl"
+          hoverActive
+        >
+          Zobrazit program
+        </Button>
+      </div>
+    </div>
+  </article>
+);
+
+export default BreakInProgress;

src/components/home/NotYetStarted.jsx

+import React from "react";
+import { format } from "date-fns";
+
+import Button from "components/Button";
+
+const NotYetStarted = ({ startAt }) => (
+  <article className="container container--wide py-8 md:py-16 lg:py-32">
+    <div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
+      Jejda ...
+    </div>
+    <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+      Jednání ještě nebylo zahájeno
+    </h1>
+    <p className="text-xl leading-snug mb-8">
+      <span>Jednání celostátního fóra ještě nezačalo. </span>
+      {startAt && (
+        <span>
+          Mělo by být zahájeno <strong>{format(startAt, "d. M. Y")}</strong> v{" "}
+          <strong>{format(startAt, "H:mm")}</strong>.{" "}
+        </span>
+      )}
+      <span>Můžete si ale zobrazit program.</span>
+    </p>
+    <Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
+      Zobrazit program
+    </Button>
+  </article>
+);
+
+export default NotYetStarted;

src/components/home/index.js

+export { default as AlreadyFinished } from "./AlreadyFinished";
+export { default as BreakInProgress } from "./BreakInProgress";
+export { default as NotYetStarted } from "./NotYetStarted";

src/components/mde/MarkdownEditor.jsx

@@ -7,13 +7,10 @@ import { markdownConverter } from "markdown";
 import "react-mde/lib/styles/css/react-mde-toolbar.css";
 import "./MarkdownEditor.css";
 
-const MarkdownEditor = ({
-  value,
-  onChange,
-  error,
-  placeholder = "",
-  ...props
-}) => {
+const MarkdownEditor = (
+  { value, onChange, error, placeholder = "", ...props },
+  ref
+) => {
   const [selectedTab, setSelectedTab] = useState("write");
 
   const classes = {
@@ -36,6 +33,7 @@ const MarkdownEditor = ({
   return (
     <div className={classNames("form-field", { "form-field--error": !!error })}>
       <ReactMde
+        ref={ref}
         value={value}
         onChange={onChange}
         selectedTab={selectedTab}
@@ -53,4 +51,4 @@ const MarkdownEditor = ({
   );
 };
 
-export default MarkdownEditor;
+export default React.forwardRef(MarkdownEditor);

src/components/modals/ModalConfirm.jsx

 import React from "react";
 
 import Button from "components/Button";
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardBodyText,
-  CardHeadline,
-} from "components/cards";
-import ErrorMessage from "components/ErrorMessage";
 
-import Modal from "./Modal";
+import ModalWithActions from "./ModalWithActions";
 
 const ModalConfirm = ({
   title,
@@ -23,24 +15,8 @@ const ModalConfirm = ({
   error,
   ...props
 }) => {
-  return (
-    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
-      <Card>
-        <CardBody>
-          <div className="flex items-center justify-between mb-4">
-            <CardHeadline>{title}</CardHeadline>
-            <button onClick={onCancel} 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">
+  const actions = (
+    <>
       <Button
         hoverActive
         color="blue-300"
@@ -52,15 +28,26 @@ const ModalConfirm = ({
       </Button>
       <Button
         hoverActive
-            color="red-600"
+        color="grey-125"
         className="text-sm"
         onClick={onCancel}
       >
         {cancelActionLabel}
       </Button>
-        </CardActions>
-      </Card>
-    </Modal>
+    </>
+  );
+
+  return (
+    <ModalWithActions
+      onClose={onCancel}
+      title={title}
+      error={error}
+      actions={actions}
+      containerClassName="max-w-md"
+      {...props}
+    >
+      {children}
+    </ModalWithActions>
   );
 };