src/components/Navbar.jsx

+import React, { useCallback, useState } from "react";
+import { NavLink } from "react-router-dom";
+import { useKeycloak } from "@react-keycloak/web";
+import useWindowSize from "@rooks/use-window-size";
+import classNames from "classnames";
+
+import Button from "components/Button";
+import { AuthStore, GlobalInfoStore } from "stores";
+
+const Navbar = ({ onGetHelp }) => {
+  const { innerWidth } = useWindowSize();
+  const [showMenu, setShowMenu] = useState();
+  const { keycloak } = useKeycloak();
+  const { isAuthenticated, user } = AuthStore.useState();
+  const { connectionState } = GlobalInfoStore.useState();
+
+  const login = useCallback(() => {
+    keycloak.login();
+  }, [keycloak]);
+  const logout = useCallback(() => {
+    keycloak.logout();
+  }, [keycloak]);
+
+  const connectionStateCaption = {
+    connected: "Jsi online",
+    offline: "Jsi offline",
+    connecting: "Probíhá připojování",
+  }[connectionState];
+
+  const isLg = innerWidth >= 1024;
+
+  const indicatorClass = {
+    "bg-green-400": connectionState === "connected",
+    "bg-red-600": connectionState === "offline",
+    "bg-yellow-200": connectionState === "connecting",
+  };
+
+  const connectionIndicator = (
+    <div className="inline-flex items-center">
+      <span
+        className="relative inline-flex h-4 w-4 mr-4"
+        data-tip={connectionStateCaption}
+        data-tip-at="left"
+        aria-label={connectionStateCaption}
+      >
+        <span
+          className={classNames(
+            "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
+            indicatorClass
+          )}
+        />
+        <span
+          className={classNames(
+            "inline-flex rounded-full w-4 h-4",
+            indicatorClass
+          )}
+        />
+      </span>
+      <span className="hidden md:block text-grey-200">
+        {connectionStateCaption}
+      </span>
+    </div>
+  );
+
+  return (
+    <nav className="navbar navbar--simple">
+      <div className="container container--wide navbar__content navbar__content--initialized">
+        <div className="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+          <NavLink to="/">
+            <img
+              src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-round-white.svg`}
+              className="w-8"
+              alt="Pirátská strana"
+            />
+          </NavLink>
+          <NavLink
+            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 2024
+          </NavLink>
+        </div>
+        <div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
+          <button
+            onClick={() => setShowMenu(!showMenu)}
+            className="no-underline hover:no-underline"
+          >
+            <i className="ico--menu text-3xl"></i>
+          </button>
+        </div>
+        {(showMenu || isLg) && (
+          <>
+            <div className="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+              <ul className="navbar-menu text-white">
+                <li className="navbar-menu__item">
+                  <NavLink className="navbar-menu__link" to="/">
+                    Přímý přenos
+                  </NavLink>
+                </li>
+                <li className="navbar-menu__item">
+                  <NavLink className="navbar-menu__link" to="/program">
+                    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 justify-between">
+              <div className="order-last lg:order-first lg:mr-8">
+                {connectionIndicator}
+              </div>
+              {!isAuthenticated && (
+                <Button className="btn--white joyride-login" onClick={login}>
+                  Přihlásit se
+                </Button>
+              )}
+              {isAuthenticated && (
+                <div className="flex items-center space-x-4 joyride-login">
+                  <span className="head-heavy-2xs">{user.name}</span>
+                  <div className="avatar avatar--2xs">
+                    <img
+                      src={`https://a.pirati.cz/piratar/200/${user.username}.jpg`}
+                      alt="Avatar"
+                    />
+                  </div>
+                  <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>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/Thumbs.jsx

+import React from "react";
+import classNames from "classnames";
+
+const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
+  return (
+    <div>
+      <div className="space-x-2 text-sm flex items-center">
+        <button
+          className={classNames("flex items-center space-x-1", {
+            "cursor-pointer": !readOnly,
+            "cursor-not-allowed": readOnly,
+            "text-blue-300": myVote === "like",
+            "text-grey-200 ": myVote !== "like",
+            "hover:text-blue-300": myVote !== "like" && !readOnly,
+          })}
+          disabled={readOnly}
+          onClick={onLike}
+        >
+          <span className="font-bold">{likes}</span>
+          <i className="ico--thumbs-up"></i>
+        </button>
+        <button
+          className={classNames("flex items-center space-x-1", {
+            "cursor-pointer": !readOnly,
+            "cursor-not-allowed": readOnly,
+            "text-red-600": myVote === "dislike",
+            "text-grey-200": myVote !== "dislike",
+            "hover:text-red-600": myVote !== "dislike" && !readOnly,
+          })}
+          disabled={readOnly}
+          onClick={onDislike}
+        >
+          <i className="ico--thumbs-down transform -scale-x-1"></i>
+          <span className="font-bold">{dislikes}</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Thumbs);

src/components/annoucements/Announcement.jsx

+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import classNames from "classnames";
+import { format, isToday } from "date-fns";
+
+import Chip from "components/Chip";
+import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
+
+const Announcement = ({
+  className,
+  datetime,
+  type,
+  content,
+  link,
+  relatedPostId,
+  seen,
+  canRunActions,
+  onDelete,
+  onEdit,
+  onSeen,
+}) => {
+  const { ref, inView } = useInView({
+    threshold: 0.8,
+    trackVisibility: true,
+    delay: 1500,
+    skip: seen,
+    triggerOnce: true,
+  });
+
+  useEffect(() => {
+    if (!seen && inView && onSeen) {
+      onSeen();
+    }
+  });
+
+  const wrapperClassName = classNames(
+    "bg-opacity-50 border-l-2 px-4 py-2 lg:px-8 lg:py-3 transition duration-500",
+    {
+      "bg-grey-50": !!seen,
+      "bg-yellow-100": !seen,
+      "border-orange-300": type === "rejected-procedure-proposal",
+      "border-blue-300": type === "suggested-procedure-proposal",
+      "border-green-400": type === "accepted-procedure-proposal",
+      "border-red-600": type === "voting",
+      "border-cyan-500": type === "announcement",
+      "border-black": type === "user-ban",
+    },
+    className
+  );
+
+  const chipColor = {
+    "rejected-procedure-proposal": "orange-300",
+    "suggested-procedure-proposal": "blue-300",
+    "accepted-procedure-proposal": "green-400",
+    voting: "red-600",
+    announcement: "cyan-500",
+    "user-ban": "black",
+  }[type];
+
+  const chipLabel = {
+    "rejected-procedure-proposal": "Zamítnutý 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",
+    "user-ban": "Zablokovaný účastník jednání",
+  }[type];
+
+  const linkLabel =
+    type === "voting" ? "Hlasovat" : "Zobrazit související příspěvek";
+
+  const showEdit = [
+    "suggested-procedure-proposal",
+    "voting",
+    "announcement",
+  ].includes(type);
+
+  const htmlContent = {
+    __html: content,
+  };
+
+  return (
+    <div className={wrapperClassName} ref={ref}>
+      <div className="flex items-center justify-between mb-2">
+        <div className="space-x-2 flex items-center">
+          <div className="font-bold text-sm">
+            {format(datetime, isToday(datetime) ? "H:mm" : "dd. MM. H:mm")}
+          </div>
+          <Chip color={chipColor} condensed>
+            {chipLabel}
+          </Chip>
+          {link && (
+            <a
+              href={link}
+              className={classNames("text-xs font-bold text-" + chipColor)}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {linkLabel + " »"}
+            </a>
+          )}
+        </div>
+        {canRunActions && (
+          <DropdownMenu
+            right
+            className="pl-4"
+            triggerIconClass="ico--dots-three-horizontal"
+          >
+            {showEdit && (
+              <DropdownMenuItem
+                onClick={onEdit}
+                icon="ico--pencil"
+                title="Upravit"
+              />
+            )}
+            <DropdownMenuItem
+              onClick={onDelete}
+              icon="ico--bin"
+              title="Smazat"
+            />
+          </DropdownMenu>
+        )}
+      </div>
+      <div
+        className="leading-tight text-sm lg:text-base content-block"
+        dangerouslySetInnerHTML={htmlContent}
+      ></div>
+    </div>
+  );
+};
+
+export default Announcement;

src/components/annoucements/AnnouncementEditModal.jsx

+import React, { useState } from "react";
+import classNames from "classnames";
+
+import Button from "components/Button";
+import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+import MarkdownEditor from "components/mde/MarkdownEditor";
+import Modal from "components/modals/Modal";
+import { urlRegex } from "utils";
+
+const AnnouncementEditModal = ({
+  announcement,
+  onCancel,
+  onConfirm,
+  confirming,
+  error,
+  ...props
+}) => {
+  const [text, setText] = useState(announcement.content);
+  const [link, setLink] = useState(announcement.link);
+  const [textError, setTextError] = useState(null);
+  const [linkError, setLinkError] = useState(null);
+
+  const onTextInput = (newText) => {
+    setText(newText);
+
+    if (newText !== "") {
+      if (newText.length > 1024) {
+        setTextError("Maximální délka příspěvku je 1024 znaků.");
+      } else {
+        setTextError(null);
+      }
+    }
+  };
+
+  const onLinkInput = (newLink) => {
+    setLink(newLink);
+
+    if (!!newLink) {
+      if (newLink.length > 1024) {
+        setLinkError("Maximální délka URL je 256 znaků.");
+      } else {
+        setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL.");
+      }
+    }
+  };
+
+  const confirm = (evt) => {
+    evt.preventDefault();
+
+    let preventAction = false;
+    const payload = {
+      content: text,
+    };
+
+    if (!text) {
+      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) {
+      setLinkError("Zadejte platnou URL.");
+      preventAction = true;
+    } else {
+      payload.link = link;
+    }
+
+    if (preventAction) {
+      return;
+    }
+
+    onConfirm(payload);
+  };
+
+  return (
+    <Modal containerClassName="max-w-lg" onRequestClose={onCancel} {...props}>
+      <form onSubmit={confirm}>
+        <Card className="elevation-21">
+          <CardBody>
+            <div className="flex items-center justify-between mb-4">
+              <CardHeadline>Upravit oznámení</CardHeadline>
+              <button onClick={onCancel} type="button">
+                <i className="ico--cross"></i>
+              </button>
+            </div>
+            <MarkdownEditor
+              value={text}
+              onChange={onTextInput}
+              error={textError}
+              placeholder="Vyplňte text oznámení"
+              toolbarCommands={[
+                ["bold", "italic", "strikethrough"],
+                ["link", "unordered-list", "ordered-list"],
+              ]}
+            />
+            <div
+              className={classNames("form-field mt-4", {
+                hidden: announcement.type !== "voting",
+                "form-field--error": !!linkError,
+              })}
+            >
+              <div className="form-field__wrapper form-field__wrapper--shadowed">
+                <input
+                  type="text"
+                  className="text-input text-sm text-input--has-addon-l form-field__control"
+                  value={link}
+                  placeholder="URL hlasování"
+                  onChange={(evt) => onLinkInput(evt.target.value)}
+                />
+                <div className="text-input-addon text-input-addon--l order-first">
+                  <i className="ico--link"></i>
+                </div>
+              </div>
+              {!!linkError && (
+                <div className="form-field__error">{linkError}</div>
+              )}
+            </div>
+            {error && (
+              <ErrorMessage className="mt-2">
+                Při editaci došlo k problému: {error}
+              </ErrorMessage>
+            )}
+          </CardBody>
+          <CardActions right className="space-x-1">
+            <Button
+              hoverActive
+              color="blue-300"
+              className="text-sm"
+              loading={confirming}
+              disabled={textError || linkError || confirming}
+              type="submit"
+            >
+              Uložit
+            </Button>
+            <Button
+              hoverActive
+              color="red-600"
+              className="text-sm"
+              onClick={onCancel}
+              type="button"
+            >
+              Zrušit
+            </Button>
+          </CardActions>
+        </Card>
+      </form>
+    </Modal>
+  );
+};
+
+export default AnnouncementEditModal;

src/components/annoucements/AnnouncementList.jsx

+import React from "react";
+import classNames from "classnames";
+
+import Announcement from "./Announcement";
+
+const AnnouncementList = ({
+  items,
+  className,
+  canRunActions,
+  onDelete,
+  onEdit,
+  onSeen,
+}) => {
+  const buildHandler = (responderFn) => (announcement) => (evt) => {
+    evt.preventDefault();
+    responderFn(announcement);
+  };
+
+  const onAnnouncementEdit = buildHandler(onEdit);
+  const onAnnouncementDelete = buildHandler(onDelete);
+
+  const onAnnouncementSeen = (announcement) => () => {
+    onSeen(announcement);
+  };
+
+  const getClassName = (idx) => {
+    if (idx === 0) {
+      return "pt-4 lg:pt-8";
+    }
+
+    if (idx === items.length - 1) {
+      return "pb-4 lg:pb-8";
+    }
+
+    return "";
+  };
+
+  return (
+    <div className={classNames("space-y-px", className)}>
+      {items.map((item, idx) => (
+        <Announcement
+          className={getClassName(idx)}
+          key={item.id}
+          datetime={item.datetime}
+          type={item.type}
+          content={item.contentHtml}
+          link={item.link}
+          seen={item.seen}
+          canRunActions={canRunActions}
+          onEdit={onAnnouncementEdit(item)}
+          onDelete={onAnnouncementDelete(item)}
+          onSeen={onAnnouncementSeen(item)}
+        />
+      ))}
+      {!items.length && (
+        <p className="px-8 py-4 leading-snug text-sm md:text-base">
+          Zatím žádná oznámení.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default AnnouncementList;

src/components/cards/Card.jsx

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

src/components/cards/CardActions.jsx

+import React from "react";
+import classNames from "classnames";
+
+const CardActions = ({ children, right, className }) => {
+  const cls = classNames(
+    "card-actions",
+    { "card-actions--right": !!right },
+    className
+  );
+  return <div className={cls}>{children}</div>;
+};
+
+export default CardActions;

src/components/cards/CardBody.jsx

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

src/components/cards/CardBodyText.jsx

+import React from "react";
+
+const CardBodyText = ({ children }) => {
+  return <div className="card-body-text">{children}</div>;
+};
+
+export default CardBodyText;

src/components/cards/CardHeadline.jsx

+import React from "react";
+
+const CardHeadline = ({ children }) => {
+  return <h1 className="card-headline">{children}</h1>;
+};
+
+export default CardHeadline;

src/components/cards/index.js

+export { default as Card } from "./Card";
+export { default as CardActions } from "./CardActions";
+export { default as CardBody } from "./CardBody";
+export { default as CardBodyText } from "./CardBodyText";
+export { default as CardHeadline } from "./CardHeadline";

src/components/dropdown-button/DropdownButton.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownButton = ({
+  className,
+  color = "black",
+  hoverActive = true,
+  fullwidth = false,
+  loading = false,
+  disabled = false,
+  items,
+  children,
+  onClick,
+  ...props
+}) => {
+  const btnClass = classNames(
+    "btn btn--icon",
+    `btn--${color}`,
+    {
+      "btn--hoveractive": hoverActive,
+      "btn--fullwidth md:btn--autowidth": fullwidth,
+      "btn--loading": loading,
+    },
+    className
+  );
+
+  const inner = (
+    <div className="btn__body-wrap">
+      <button className="btn__body" onClick={onClick} disabled={disabled}>
+        {children}
+      </button>
+      <button className="btn__icon dropdown-button">
+        <i className="ico--chevron-down"></i>
+        <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
+          {items}
+        </ul>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className={btnClass} {...props}>
+      {inner}
+    </div>
+  );
+};
+
+export default DropdownButton;

src/components/dropdown-button/DropdownButtonItem.jsx

+import React from "react";
+
+const DropdownButtonItem = ({ onClick, children }) => {
+  return (
+    <li className="dropdown-button__choice hover:bg-grey-125" onClick={onClick}>
+      <span className="block px-4 py-3">{children}</span>
+    </li>
+  );
+};
+
+export default DropdownButtonItem;

src/components/dropdown-button/index.js

+export { default as DropdownButton } from "./DropdownButton";
+export { default as DropdownButtonItem } from "./DropdownButtonItem";

src/components/dropdown-menu/DropdownMenu.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownMenu = ({
+  children,
+  className,
+  right,
+  triggerSize = "sm",
+  triggerIconClass = "ico--dots-three-vertical",
+}) => {
+  const wrapperCls = classNames(
+    "dropdown",
+    {
+      "dropdown--right": !!right,
+    },
+    className
+  );
+
+  const triggerCls = classNames(
+    "cursor-pointer ml-auto text-grey-200 hover:text-black",
+    `text-${triggerSize}`,
+    triggerIconClass
+  );
+
+  return (
+    <div className={wrapperCls}>
+      <i className={triggerCls}></i>
+      <ul className="dropdown__content whitespace-no-wrap">{children}</ul>
+    </div>
+  );
+};
+
+export default React.memo(DropdownMenu);

src/components/dropdown-menu/DropdownMenuItem.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownMenuItem = ({
+  icon,
+  className,
+  onClick,
+  title,
+  titleClass,
+  iconSize = "2xs",
+  titleSize = "xs",
+}) => {
+  const iconCls = classNames("text-2xs mr-2", `text-${iconSize}`, icon);
+  const titleCls = classNames(`text-${titleSize}`, titleClass);
+  const cls = classNames(
+    "dropdown__content-item bg-white hover:bg-grey-125 cursor-pointer",
+    className
+  );
+
+  return (
+    <li className={cls} onClick={onClick}>
+      <span className="block px-3 py-3">
+        <i className={iconCls}></i>
+        <span className={titleCls}>{title}</span>
+      </span>
+    </li>
+  );
+};
+
+export default React.memo(DropdownMenuItem);

src/components/dropdown-menu/index.js

+export { default as DropdownMenu } from "./DropdownMenu";
+export { default as DropdownMenuItem } from "./DropdownMenuItem";

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;