feat: display score requirements captions and titles

src/components/posts/PostScore.jsx

@@ -19,6 +19,24 @@ const PostScore = ({
           score >= supportThreshold || (score > 0 && !hasDislikes),
       };
 
+  let title;
+
+  if (!rankingReadonly) {
+    if (hasDislikes) {
+      if (score < supportThreshold) {
+        title = `Aktuální podpora je ${score} hlasů, pro získání podpory skupiny členů chybí ještě ${
+          supportThreshold - score
+        }.`;
+      } else {
+        title = `Aktuální podpora je ${score} hlasů, což je dostatek pro získání podpory skupiny členů (vyžaduje alespoň ${supportThreshold} hlasů).`;
+      }
+    } else {
+      title = `Příspěvek získal ${score} hlasů bez jakýchkoliv hlasů proti a má tedy konkludentní podporu.`;
+    }
+  } else {
+    title = `Příspěvek získal podporu ${score} hlasů.`;
+  }
+
   return (
     <span
       className={classNames(
@@ -26,10 +44,18 @@ const PostScore = ({
         coloring,
         className
       )}
-      title={`Míra podpory je ${score}.`}
+      style={{ cursor: "help" }}
+      title={title}
     >
       <i className="ico--power" />
-      <span className="font-bold">{score}</span>
+      <span className="font-bold">
+        {!rankingReadonly && hasDislikes && (
+          <span>
+            {score} z {supportThreshold}
+          </span>
+        )}
+        {!(!rankingReadonly && hasDislikes) && score.toString()}
+      </span>
     </span>
   );
 };

src/containers/GlobalStats.jsx

 import React from "react";
 import { Link } from "react-router-dom";
 import { format, isToday } from "date-fns";
+import pick from "lodash/pick";
 
 import { GlobalInfoStore, ProgramStore } from "stores";
 
 const GlobalStats = () => {
-  const { onlineUsers, onlineMembers } = GlobalInfoStore.useState();
-  const { currentId, scheduleIds, items } = ProgramStore.useState();
+  const { onlineUsers, onlineMembers } = GlobalInfoStore.useState((state) =>
+    pick(state, ["onlineUsers", "onlineMembers"])
+  );
+  const { currentId, scheduleIds, items } = ProgramStore.useState((state) =>
+    pick(state, ["currentId", "scheduleIds", "items"])
+  );
 
   const nextProgramEntryId = scheduleIds
     ? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]