From 64cfcb118da87caf41b021a6e326a5990a643973 Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Sat, 30 Sep 2023 10:03:17 +0200
Subject: [PATCH 1/6] add path aliases

---
 tsconfig.json | 34 +++++++++++-----------------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 3cca8c9c..70c28d1f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,23 +19,15 @@
       {
         "name": "next"
       }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "paths": {
-    "@/*": [
-      "./src/*"
     ],
-    "@/public/*": [
-      "./public/*"
-    ]
-  }
+    "paths": {
+      "@/components/*": ["./src/components/*"],
+      "@/graphql/*": ["./src/graphql/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/public/*": ["./public/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

From efceff542b208b403eb4cbe545c63f105459432a Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Sat, 30 Sep 2023 10:03:29 +0200
Subject: [PATCH 2/6] diff votes dialog wip

---
 .../crag-route-list/crag-route.tsx            |  14 +-
 .../crag-route/difficulty-votes.tsx           | 120 ++++++++++++++++++
 .../crag-route/route-grade.tsx                |  34 +++++
 .../server-actions/difficulty-votes-action.ts |  53 ++++++++
 src/components/grade.tsx                      |  12 +-
 src/components/ui/dialog.tsx                  |  10 +-
 src/utils/text-helpers.ts                     |  13 ++
 7 files changed, 236 insertions(+), 20 deletions(-)
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
index ca4447d8..8e23dfd6 100644
--- a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
@@ -11,6 +11,7 @@ import IconStarFull from "../../../../../../../components/ui/icons/star-full";
 import Link from "../../../../../../../components/ui/link";
 import { CragRoutesContext } from "../../crag-routes";
 import { pluralizeNoun } from "../../../../../../../utils/text-helpers";
+import RouteGrade from "./crag-route/route-grade";
 
 interface Props {
   crag: Crag;
@@ -164,19 +165,6 @@ function CragRouteCompact({ crag, route, ascent }: Props) {
   );
 }
 
-interface RouteGradeProps {
-  route: Route;
-}
-
-function RouteGrade({ route }: RouteGradeProps) {
-  return (
-    <>
-      {route.isProject && "P"}
-      {route.difficulty && <Grade difficulty={route.difficulty} />}
-    </>
-  );
-}
-
 interface RouteStarRatingProps {
   route: Route;
   size?: IconSize;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
new file mode 100644
index 00000000..9c4e4bd5
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import difficultyVotesAction from "./server-actions/difficulty-votes-action";
+import { DifficultyVote, Route } from "@/graphql/generated";
+import displayDate from "@/utils/display-date";
+import Grade, { diffToGrade } from "@/components/grade";
+import { pluralizeNoun } from "@/utils/text-helpers";
+import { gradingSystems } from "@/utils/grading-systems";
+
+interface Props {
+  route: Route;
+}
+
+function DifficultyVotes({ route }: Props) {
+  const [difficultyVotes, setDifficultyVotes] = useState<DifficultyVote[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    difficultyVotesAction(route.id)
+      .then((votes) => {
+        setDifficultyVotes(votes);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError("Napaka pri nalaganju glasov.");
+      });
+  }, [route.id]);
+
+  if (error) return <div className="text-red-500">{error}</div>;
+  if (loading) return <div>Nalagam...</div>;
+
+  const nrVotesPerDifficulty = difficultyVotes.reduce(
+    (acc, vote) => ({
+      ...acc,
+      [vote.difficulty]: (acc[vote.difficulty] || 0) + 1,
+    }),
+    {} as Record<number, number>
+  );
+  const maxVotesPerDifficulty = Math.max(
+    ...Object.values(nrVotesPerDifficulty)
+  );
+
+  // const mainHighlightedDifficulty = route.difficulty && difficultyVotes[route.difficulty] ?
+
+  const routeGradeDifficulty = route.difficulty
+    ? diffToGrade(route.difficulty, "french", false).difficulty
+    : null;
+
+  return (
+    <>
+      <table className="w-full max-w-sm">
+        <tbody>
+          {Object.entries(nrVotesPerDifficulty).map(([difficulty, nrVotes]) => (
+            <tr key={difficulty}>
+              <td className="pr-4">
+                <Grade
+                  difficulty={parseInt(difficulty)}
+                  displayIntermediate={true}
+                />
+              </td>
+              <td className="w-full">
+                <span
+                  className={`float-left block h-5 ${
+                    nrVotes === maxVotesPerDifficulty && "w-full"
+                  } rounded ${
+                    routeGradeDifficulty === parseInt(difficulty)
+                      ? "bg-blue-500"
+                      : "bg-neutral-200"
+                  }`}
+                  style={{
+                    width: `${Math.round(
+                      (nrVotes / maxVotesPerDifficulty) * 100
+                    )}%`,
+                  }}
+                ></span>
+                <span className="relative float-left">
+                  <span className="absolute whitespace-nowrap pl-3 align-middle text-sm">
+                    {nrVotes !== maxVotesPerDifficulty &&
+                      pluralizeNoun("glas", nrVotes)}
+                  </span>
+                </span>
+              </td>
+              <td className="whitespace-nowrap pl-3 align-middle text-sm">
+                {nrVotes === maxVotesPerDifficulty &&
+                  pluralizeNoun("glas", nrVotes)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <table className="mt-8">
+        <tbody>
+          {difficultyVotes.map((vote) => (
+            <tr
+              key={vote.id}
+              className={
+                vote.includedInCalculation
+                  ? "text-neutral-900"
+                  : "text-neutral-500"
+              }
+            >
+              <td className="pr-4">
+                <Grade
+                  difficulty={vote.difficulty}
+                  displayIntermediate={true}
+                />
+              </td>
+              <td className="pr-4">
+                {vote.isBase ? "(bazna ocena)" : vote.user?.fullName}
+              </td>
+              <td>{displayDate(vote.created)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default DifficultyVotes;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
new file mode 100644
index 00000000..2bd46fa8
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
@@ -0,0 +1,34 @@
+import Grade from "../../../../../../../../components/grade";
+import Dialog, {
+  DialogSize,
+} from "../../../../../../../../components/ui/dialog";
+import { Route } from "../../../../../../../../graphql/generated";
+import DifficultyVotes from "./difficulty-votes";
+
+interface RouteGradeProps {
+  route: Route;
+}
+
+function RouteGrade({ route }: RouteGradeProps) {
+  const handleOpenRoutePage = () => {};
+  const handleCloseDialog = () => {};
+
+  return (
+    <Dialog
+      openTrigger={
+        <button>
+          {route.isProject && "P"}
+          {route.difficulty && <Grade difficulty={route.difficulty} />}
+        </button>
+      }
+      dialogSize={DialogSize.hug}
+      title="Glasovi uporabnikov"
+      confirm={{ label: "Več", callback: handleOpenRoutePage }}
+      cancel={{ label: "Zapri", callback: handleCloseDialog }}
+    >
+      <DifficultyVotes route={route} />
+    </Dialog>
+  );
+}
+
+export default RouteGrade;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts
new file mode 100644
index 00000000..28e9ec22
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts
@@ -0,0 +1,53 @@
+"use server";
+
+import { gql } from "urql/core";
+import {
+  DifficultyVote,
+  RouteDifficultyVotesDocument,
+} from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+
+async function difficultyVotesAction(
+  routeId: string
+): Promise<DifficultyVote[]> {
+  const result = await urqlServer().query(RouteDifficultyVotesDocument, {
+    routeId,
+  });
+
+  if (result.error) {
+    return Promise.reject(result.error);
+  }
+
+  return result.data.route.difficultyVotes;
+}
+
+export default difficultyVotesAction;
+
+gql`
+  query RouteDifficultyVotes($routeId: String!) {
+    route(id: $routeId) {
+      id
+      slug
+      difficulty
+      defaultGradingSystem {
+        id
+      }
+      name
+      length
+      difficultyVotes {
+        user {
+          id
+          fullName
+          firstname
+          lastname
+        }
+        id
+        difficulty
+        created
+        updated
+        isBase
+        includedInCalculation
+      }
+    }
+  }
+`;
diff --git a/src/components/grade.tsx b/src/components/grade.tsx
index fb002793..b6c462e1 100644
--- a/src/components/grade.tsx
+++ b/src/components/grade.tsx
@@ -11,6 +11,7 @@ type Props = {
 
 type GradeDisplay = {
   name: string;
+  difficulty?: number;
   modifier: -1 | 0 | 1;
 };
 
@@ -22,7 +23,6 @@ function Grade({
   disabled = false,
 }: Props) {
   const gradeDisplay = diffToGrade(
-    gradingSystems as GradingSystem[],
     difficulty,
     gradingSystemId,
     displayIntermediate
@@ -30,8 +30,7 @@ function Grade({
   return <>{gradeDisplay.name}</>;
 }
 
-function diffToGrade(
-  gradingSystems: GradingSystem[],
+export function diffToGrade(
   difficulty: number,
   gradingSystemId: string,
   legacy: boolean = false
@@ -62,11 +61,13 @@ function diffToGrade(
   if (difficulty <= grades[0].difficulty) {
     return {
       name: grades[0].name,
+      difficulty: grades[0].difficulty,
       modifier: 0,
     };
   } else if (difficulty >= grades[grades.length - 1].difficulty) {
     return {
       name: grades[grades.length - 1].name,
+      difficulty: grades[grades.length - 1].difficulty,
       modifier: 0,
     };
   }
@@ -91,11 +92,13 @@ function diffToGrade(
         ) {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: 0,
           };
         } else {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: -1,
           };
         }
@@ -108,17 +111,20 @@ function diffToGrade(
         ) {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: 0,
           };
         } else {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: +1,
           };
         }
       } else {
         return {
           name: curr.name,
+          difficulty: curr.difficulty,
           modifier: 0,
         };
       }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 8f05e90c..a71f466d 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -71,12 +71,14 @@ function Dialog({
         <div className="fixed inset-0 overflow-y-auto p-10">
           <DialogHUI.Panel
             ref={initFocusRef}
-            className={`mx-auto rounded-lg bg-white py-10 px-8 shadow-lg ${dialogSize}`}
+            className={`mx-auto rounded-lg bg-white px-8 py-8 shadow-lg ${dialogSize}`}
           >
             <DialogHUI.Title as="h4">{title}</DialogHUI.Title>
-            <DialogHUI.Description className="mt-8" as="div">
-              {children}
-            </DialogHUI.Description>
+            {isOpen && (
+              <DialogHUI.Description className="mt-8" as="div">
+                {children}
+              </DialogHUI.Description>
+            )}
             <div className="mt-10 flex flex-wrap justify-end gap-4">
               <Button variant="secondary" onClick={handleCancel}>
                 {cancel.label}
diff --git a/src/utils/text-helpers.ts b/src/utils/text-helpers.ts
index cab10e90..7398aa66 100644
--- a/src/utils/text-helpers.ts
+++ b/src/utils/text-helpers.ts
@@ -38,6 +38,19 @@ const pluralizeNoun = (noun: string, count: number) => {
         default:
           return `${count} plezalcev`;
       }
+
+    case "glas":
+      switch (count % 100) {
+        case 1:
+          return `${count} glas`;
+        case 2:
+          return `${count} glasova`;
+        case 3:
+        case 4:
+          return `${count} glasovi`;
+        default:
+          return `${count} glasov`;
+      }
   }
 };
 

From c788104904df7a523bd8cbe86be5735ac419d5eb Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Sat, 30 Sep 2023 10:03:17 +0200
Subject: [PATCH 3/6] add path aliases

---
 tsconfig.json | 34 +++++++++++-----------------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 3cca8c9c..70c28d1f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,23 +19,15 @@
       {
         "name": "next"
       }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "paths": {
-    "@/*": [
-      "./src/*"
     ],
-    "@/public/*": [
-      "./public/*"
-    ]
-  }
+    "paths": {
+      "@/components/*": ["./src/components/*"],
+      "@/graphql/*": ["./src/graphql/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/public/*": ["./public/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

From a6c4b40d54e237967759772b5aea6964f1c3e40c Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Sat, 30 Sep 2023 10:03:29 +0200
Subject: [PATCH 4/6] diff votes dialog wip

---
 .../crag-route-list/crag-route.tsx            |  14 +-
 .../crag-route/difficulty-votes.tsx           | 120 ++++++++++++++++++
 .../crag-route/route-grade.tsx                |  34 +++++
 .../server-actions/difficulty-votes-action.ts |  53 ++++++++
 src/components/grade.tsx                      |  12 +-
 src/components/ui/dialog.tsx                  |  10 +-
 src/utils/text-helpers.ts                     |  13 ++
 7 files changed, 236 insertions(+), 20 deletions(-)
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
index ca4447d8..8e23dfd6 100644
--- a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
@@ -11,6 +11,7 @@ import IconStarFull from "../../../../../../../components/ui/icons/star-full";
 import Link from "../../../../../../../components/ui/link";
 import { CragRoutesContext } from "../../crag-routes";
 import { pluralizeNoun } from "../../../../../../../utils/text-helpers";
+import RouteGrade from "./crag-route/route-grade";
 
 interface Props {
   crag: Crag;
@@ -164,19 +165,6 @@ function CragRouteCompact({ crag, route, ascent }: Props) {
   );
 }
 
-interface RouteGradeProps {
-  route: Route;
-}
-
-function RouteGrade({ route }: RouteGradeProps) {
-  return (
-    <>
-      {route.isProject && "P"}
-      {route.difficulty && <Grade difficulty={route.difficulty} />}
-    </>
-  );
-}
-
 interface RouteStarRatingProps {
   route: Route;
   size?: IconSize;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
new file mode 100644
index 00000000..9c4e4bd5
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import difficultyVotesAction from "./server-actions/difficulty-votes-action";
+import { DifficultyVote, Route } from "@/graphql/generated";
+import displayDate from "@/utils/display-date";
+import Grade, { diffToGrade } from "@/components/grade";
+import { pluralizeNoun } from "@/utils/text-helpers";
+import { gradingSystems } from "@/utils/grading-systems";
+
+interface Props {
+  route: Route;
+}
+
+function DifficultyVotes({ route }: Props) {
+  const [difficultyVotes, setDifficultyVotes] = useState<DifficultyVote[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    difficultyVotesAction(route.id)
+      .then((votes) => {
+        setDifficultyVotes(votes);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError("Napaka pri nalaganju glasov.");
+      });
+  }, [route.id]);
+
+  if (error) return <div className="text-red-500">{error}</div>;
+  if (loading) return <div>Nalagam...</div>;
+
+  const nrVotesPerDifficulty = difficultyVotes.reduce(
+    (acc, vote) => ({
+      ...acc,
+      [vote.difficulty]: (acc[vote.difficulty] || 0) + 1,
+    }),
+    {} as Record<number, number>
+  );
+  const maxVotesPerDifficulty = Math.max(
+    ...Object.values(nrVotesPerDifficulty)
+  );
+
+  // const mainHighlightedDifficulty = route.difficulty && difficultyVotes[route.difficulty] ?
+
+  const routeGradeDifficulty = route.difficulty
+    ? diffToGrade(route.difficulty, "french", false).difficulty
+    : null;
+
+  return (
+    <>
+      <table className="w-full max-w-sm">
+        <tbody>
+          {Object.entries(nrVotesPerDifficulty).map(([difficulty, nrVotes]) => (
+            <tr key={difficulty}>
+              <td className="pr-4">
+                <Grade
+                  difficulty={parseInt(difficulty)}
+                  displayIntermediate={true}
+                />
+              </td>
+              <td className="w-full">
+                <span
+                  className={`float-left block h-5 ${
+                    nrVotes === maxVotesPerDifficulty && "w-full"
+                  } rounded ${
+                    routeGradeDifficulty === parseInt(difficulty)
+                      ? "bg-blue-500"
+                      : "bg-neutral-200"
+                  }`}
+                  style={{
+                    width: `${Math.round(
+                      (nrVotes / maxVotesPerDifficulty) * 100
+                    )}%`,
+                  }}
+                ></span>
+                <span className="relative float-left">
+                  <span className="absolute whitespace-nowrap pl-3 align-middle text-sm">
+                    {nrVotes !== maxVotesPerDifficulty &&
+                      pluralizeNoun("glas", nrVotes)}
+                  </span>
+                </span>
+              </td>
+              <td className="whitespace-nowrap pl-3 align-middle text-sm">
+                {nrVotes === maxVotesPerDifficulty &&
+                  pluralizeNoun("glas", nrVotes)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <table className="mt-8">
+        <tbody>
+          {difficultyVotes.map((vote) => (
+            <tr
+              key={vote.id}
+              className={
+                vote.includedInCalculation
+                  ? "text-neutral-900"
+                  : "text-neutral-500"
+              }
+            >
+              <td className="pr-4">
+                <Grade
+                  difficulty={vote.difficulty}
+                  displayIntermediate={true}
+                />
+              </td>
+              <td className="pr-4">
+                {vote.isBase ? "(bazna ocena)" : vote.user?.fullName}
+              </td>
+              <td>{displayDate(vote.created)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default DifficultyVotes;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
new file mode 100644
index 00000000..2bd46fa8
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
@@ -0,0 +1,34 @@
+import Grade from "../../../../../../../../components/grade";
+import Dialog, {
+  DialogSize,
+} from "../../../../../../../../components/ui/dialog";
+import { Route } from "../../../../../../../../graphql/generated";
+import DifficultyVotes from "./difficulty-votes";
+
+interface RouteGradeProps {
+  route: Route;
+}
+
+function RouteGrade({ route }: RouteGradeProps) {
+  const handleOpenRoutePage = () => {};
+  const handleCloseDialog = () => {};
+
+  return (
+    <Dialog
+      openTrigger={
+        <button>
+          {route.isProject && "P"}
+          {route.difficulty && <Grade difficulty={route.difficulty} />}
+        </button>
+      }
+      dialogSize={DialogSize.hug}
+      title="Glasovi uporabnikov"
+      confirm={{ label: "Več", callback: handleOpenRoutePage }}
+      cancel={{ label: "Zapri", callback: handleCloseDialog }}
+    >
+      <DifficultyVotes route={route} />
+    </Dialog>
+  );
+}
+
+export default RouteGrade;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts
new file mode 100644
index 00000000..28e9ec22
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts
@@ -0,0 +1,53 @@
+"use server";
+
+import { gql } from "urql/core";
+import {
+  DifficultyVote,
+  RouteDifficultyVotesDocument,
+} from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+
+async function difficultyVotesAction(
+  routeId: string
+): Promise<DifficultyVote[]> {
+  const result = await urqlServer().query(RouteDifficultyVotesDocument, {
+    routeId,
+  });
+
+  if (result.error) {
+    return Promise.reject(result.error);
+  }
+
+  return result.data.route.difficultyVotes;
+}
+
+export default difficultyVotesAction;
+
+gql`
+  query RouteDifficultyVotes($routeId: String!) {
+    route(id: $routeId) {
+      id
+      slug
+      difficulty
+      defaultGradingSystem {
+        id
+      }
+      name
+      length
+      difficultyVotes {
+        user {
+          id
+          fullName
+          firstname
+          lastname
+        }
+        id
+        difficulty
+        created
+        updated
+        isBase
+        includedInCalculation
+      }
+    }
+  }
+`;
diff --git a/src/components/grade.tsx b/src/components/grade.tsx
index fb002793..b6c462e1 100644
--- a/src/components/grade.tsx
+++ b/src/components/grade.tsx
@@ -11,6 +11,7 @@ type Props = {
 
 type GradeDisplay = {
   name: string;
+  difficulty?: number;
   modifier: -1 | 0 | 1;
 };
 
@@ -22,7 +23,6 @@ function Grade({
   disabled = false,
 }: Props) {
   const gradeDisplay = diffToGrade(
-    gradingSystems as GradingSystem[],
     difficulty,
     gradingSystemId,
     displayIntermediate
@@ -30,8 +30,7 @@ function Grade({
   return <>{gradeDisplay.name}</>;
 }
 
-function diffToGrade(
-  gradingSystems: GradingSystem[],
+export function diffToGrade(
   difficulty: number,
   gradingSystemId: string,
   legacy: boolean = false
@@ -62,11 +61,13 @@ function diffToGrade(
   if (difficulty <= grades[0].difficulty) {
     return {
       name: grades[0].name,
+      difficulty: grades[0].difficulty,
       modifier: 0,
     };
   } else if (difficulty >= grades[grades.length - 1].difficulty) {
     return {
       name: grades[grades.length - 1].name,
+      difficulty: grades[grades.length - 1].difficulty,
       modifier: 0,
     };
   }
@@ -91,11 +92,13 @@ function diffToGrade(
         ) {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: 0,
           };
         } else {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: -1,
           };
         }
@@ -108,17 +111,20 @@ function diffToGrade(
         ) {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: 0,
           };
         } else {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: +1,
           };
         }
       } else {
         return {
           name: curr.name,
+          difficulty: curr.difficulty,
           modifier: 0,
         };
       }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 8f05e90c..a71f466d 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -71,12 +71,14 @@ function Dialog({
         <div className="fixed inset-0 overflow-y-auto p-10">
           <DialogHUI.Panel
             ref={initFocusRef}
-            className={`mx-auto rounded-lg bg-white py-10 px-8 shadow-lg ${dialogSize}`}
+            className={`mx-auto rounded-lg bg-white px-8 py-8 shadow-lg ${dialogSize}`}
           >
             <DialogHUI.Title as="h4">{title}</DialogHUI.Title>
-            <DialogHUI.Description className="mt-8" as="div">
-              {children}
-            </DialogHUI.Description>
+            {isOpen && (
+              <DialogHUI.Description className="mt-8" as="div">
+                {children}
+              </DialogHUI.Description>
+            )}
             <div className="mt-10 flex flex-wrap justify-end gap-4">
               <Button variant="secondary" onClick={handleCancel}>
                 {cancel.label}
diff --git a/src/utils/text-helpers.ts b/src/utils/text-helpers.ts
index cab10e90..7398aa66 100644
--- a/src/utils/text-helpers.ts
+++ b/src/utils/text-helpers.ts
@@ -38,6 +38,19 @@ const pluralizeNoun = (noun: string, count: number) => {
         default:
           return `${count} plezalcev`;
       }
+
+    case "glas":
+      switch (count % 100) {
+        case 1:
+          return `${count} glas`;
+        case 2:
+          return `${count} glasova`;
+        case 3:
+        case 4:
+          return `${count} glasovi`;
+        default:
+          return `${count} glasov`;
+      }
   }
 };
 

From ef3071ac90b3411f5353e927d9245f09f2f5f469 Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Sat, 30 Sep 2023 10:03:29 +0200
Subject: [PATCH 5/6] diff votes dialog wip

---
 .../crag-route-list/crag-route.tsx            |  14 +-
 .../crag-route/difficulty-votes.tsx           | 120 ++++++++++++++++++
 .../crag-route/route-grade.tsx                |  34 +++++
 .../server-actions/difficulty-votes-action.ts |  53 ++++++++
 src/components/grade.tsx                      |  12 +-
 src/components/ui/dialog.tsx                  |  10 +-
 src/utils/text-helpers.ts                     |  13 ++
 7 files changed, 236 insertions(+), 20 deletions(-)
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
 create mode 100644 src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
index ca4447d8..8e23dfd6 100644
--- a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
@@ -11,6 +11,7 @@ import IconStarFull from "../../../../../../../components/ui/icons/star-full";
 import Link from "../../../../../../../components/ui/link";
 import { CragRoutesContext } from "../../crag-routes";
 import { pluralizeNoun } from "../../../../../../../utils/text-helpers";
+import RouteGrade from "./crag-route/route-grade";
 
 interface Props {
   crag: Crag;
@@ -164,19 +165,6 @@ function CragRouteCompact({ crag, route, ascent }: Props) {
   );
 }
 
-interface RouteGradeProps {
-  route: Route;
-}
-
-function RouteGrade({ route }: RouteGradeProps) {
-  return (
-    <>
-      {route.isProject && "P"}
-      {route.difficulty && <Grade difficulty={route.difficulty} />}
-    </>
-  );
-}
-
 interface RouteStarRatingProps {
   route: Route;
   size?: IconSize;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
new file mode 100644
index 00000000..9c4e4bd5
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import difficultyVotesAction from "./server-actions/difficulty-votes-action";
+import { DifficultyVote, Route } from "@/graphql/generated";
+import displayDate from "@/utils/display-date";
+import Grade, { diffToGrade } from "@/components/grade";
+import { pluralizeNoun } from "@/utils/text-helpers";
+import { gradingSystems } from "@/utils/grading-systems";
+
+interface Props {
+  route: Route;
+}
+
+function DifficultyVotes({ route }: Props) {
+  const [difficultyVotes, setDifficultyVotes] = useState<DifficultyVote[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    difficultyVotesAction(route.id)
+      .then((votes) => {
+        setDifficultyVotes(votes);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError("Napaka pri nalaganju glasov.");
+      });
+  }, [route.id]);
+
+  if (error) return <div className="text-red-500">{error}</div>;
+  if (loading) return <div>Nalagam...</div>;
+
+  const nrVotesPerDifficulty = difficultyVotes.reduce(
+    (acc, vote) => ({
+      ...acc,
+      [vote.difficulty]: (acc[vote.difficulty] || 0) + 1,
+    }),
+    {} as Record<number, number>
+  );
+  const maxVotesPerDifficulty = Math.max(
+    ...Object.values(nrVotesPerDifficulty)
+  );
+
+  // const mainHighlightedDifficulty = route.difficulty && difficultyVotes[route.difficulty] ?
+
+  const routeGradeDifficulty = route.difficulty
+    ? diffToGrade(route.difficulty, "french", false).difficulty
+    : null;
+
+  return (
+    <>
+      <table className="w-full max-w-sm">
+        <tbody>
+          {Object.entries(nrVotesPerDifficulty).map(([difficulty, nrVotes]) => (
+            <tr key={difficulty}>
+              <td className="pr-4">
+                <Grade
+                  difficulty={parseInt(difficulty)}
+                  displayIntermediate={true}
+                />
+              </td>
+              <td className="w-full">
+                <span
+                  className={`float-left block h-5 ${
+                    nrVotes === maxVotesPerDifficulty && "w-full"
+                  } rounded ${
+                    routeGradeDifficulty === parseInt(difficulty)
+                      ? "bg-blue-500"
+                      : "bg-neutral-200"
+                  }`}
+                  style={{
+                    width: `${Math.round(
+                      (nrVotes / maxVotesPerDifficulty) * 100
+                    )}%`,
+                  }}
+                ></span>
+                <span className="relative float-left">
+                  <span className="absolute whitespace-nowrap pl-3 align-middle text-sm">
+                    {nrVotes !== maxVotesPerDifficulty &&
+                      pluralizeNoun("glas", nrVotes)}
+                  </span>
+                </span>
+              </td>
+              <td className="whitespace-nowrap pl-3 align-middle text-sm">
+                {nrVotes === maxVotesPerDifficulty &&
+                  pluralizeNoun("glas", nrVotes)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <table className="mt-8">
+        <tbody>
+          {difficultyVotes.map((vote) => (
+            <tr
+              key={vote.id}
+              className={
+                vote.includedInCalculation
+                  ? "text-neutral-900"
+                  : "text-neutral-500"
+              }
+            >
+              <td className="pr-4">
+                <Grade
+                  difficulty={vote.difficulty}
+                  displayIntermediate={true}
+                />
+              </td>
+              <td className="pr-4">
+                {vote.isBase ? "(bazna ocena)" : vote.user?.fullName}
+              </td>
+              <td>{displayDate(vote.created)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default DifficultyVotes;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
new file mode 100644
index 00000000..2bd46fa8
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
@@ -0,0 +1,34 @@
+import Grade from "../../../../../../../../components/grade";
+import Dialog, {
+  DialogSize,
+} from "../../../../../../../../components/ui/dialog";
+import { Route } from "../../../../../../../../graphql/generated";
+import DifficultyVotes from "./difficulty-votes";
+
+interface RouteGradeProps {
+  route: Route;
+}
+
+function RouteGrade({ route }: RouteGradeProps) {
+  const handleOpenRoutePage = () => {};
+  const handleCloseDialog = () => {};
+
+  return (
+    <Dialog
+      openTrigger={
+        <button>
+          {route.isProject && "P"}
+          {route.difficulty && <Grade difficulty={route.difficulty} />}
+        </button>
+      }
+      dialogSize={DialogSize.hug}
+      title="Glasovi uporabnikov"
+      confirm={{ label: "Več", callback: handleOpenRoutePage }}
+      cancel={{ label: "Zapri", callback: handleCloseDialog }}
+    >
+      <DifficultyVotes route={route} />
+    </Dialog>
+  );
+}
+
+export default RouteGrade;
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts
new file mode 100644
index 00000000..28e9ec22
--- /dev/null
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/server-actions/difficulty-votes-action.ts
@@ -0,0 +1,53 @@
+"use server";
+
+import { gql } from "urql/core";
+import {
+  DifficultyVote,
+  RouteDifficultyVotesDocument,
+} from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+
+async function difficultyVotesAction(
+  routeId: string
+): Promise<DifficultyVote[]> {
+  const result = await urqlServer().query(RouteDifficultyVotesDocument, {
+    routeId,
+  });
+
+  if (result.error) {
+    return Promise.reject(result.error);
+  }
+
+  return result.data.route.difficultyVotes;
+}
+
+export default difficultyVotesAction;
+
+gql`
+  query RouteDifficultyVotes($routeId: String!) {
+    route(id: $routeId) {
+      id
+      slug
+      difficulty
+      defaultGradingSystem {
+        id
+      }
+      name
+      length
+      difficultyVotes {
+        user {
+          id
+          fullName
+          firstname
+          lastname
+        }
+        id
+        difficulty
+        created
+        updated
+        isBase
+        includedInCalculation
+      }
+    }
+  }
+`;
diff --git a/src/components/grade.tsx b/src/components/grade.tsx
index fb002793..b6c462e1 100644
--- a/src/components/grade.tsx
+++ b/src/components/grade.tsx
@@ -11,6 +11,7 @@ type Props = {
 
 type GradeDisplay = {
   name: string;
+  difficulty?: number;
   modifier: -1 | 0 | 1;
 };
 
@@ -22,7 +23,6 @@ function Grade({
   disabled = false,
 }: Props) {
   const gradeDisplay = diffToGrade(
-    gradingSystems as GradingSystem[],
     difficulty,
     gradingSystemId,
     displayIntermediate
@@ -30,8 +30,7 @@ function Grade({
   return <>{gradeDisplay.name}</>;
 }
 
-function diffToGrade(
-  gradingSystems: GradingSystem[],
+export function diffToGrade(
   difficulty: number,
   gradingSystemId: string,
   legacy: boolean = false
@@ -62,11 +61,13 @@ function diffToGrade(
   if (difficulty <= grades[0].difficulty) {
     return {
       name: grades[0].name,
+      difficulty: grades[0].difficulty,
       modifier: 0,
     };
   } else if (difficulty >= grades[grades.length - 1].difficulty) {
     return {
       name: grades[grades.length - 1].name,
+      difficulty: grades[grades.length - 1].difficulty,
       modifier: 0,
     };
   }
@@ -91,11 +92,13 @@ function diffToGrade(
         ) {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: 0,
           };
         } else {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: -1,
           };
         }
@@ -108,17 +111,20 @@ function diffToGrade(
         ) {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: 0,
           };
         } else {
           return {
             name: curr.name,
+            difficulty: curr.difficulty,
             modifier: +1,
           };
         }
       } else {
         return {
           name: curr.name,
+          difficulty: curr.difficulty,
           modifier: 0,
         };
       }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 8f05e90c..a71f466d 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -71,12 +71,14 @@ function Dialog({
         <div className="fixed inset-0 overflow-y-auto p-10">
           <DialogHUI.Panel
             ref={initFocusRef}
-            className={`mx-auto rounded-lg bg-white py-10 px-8 shadow-lg ${dialogSize}`}
+            className={`mx-auto rounded-lg bg-white px-8 py-8 shadow-lg ${dialogSize}`}
           >
             <DialogHUI.Title as="h4">{title}</DialogHUI.Title>
-            <DialogHUI.Description className="mt-8" as="div">
-              {children}
-            </DialogHUI.Description>
+            {isOpen && (
+              <DialogHUI.Description className="mt-8" as="div">
+                {children}
+              </DialogHUI.Description>
+            )}
             <div className="mt-10 flex flex-wrap justify-end gap-4">
               <Button variant="secondary" onClick={handleCancel}>
                 {cancel.label}
diff --git a/src/utils/text-helpers.ts b/src/utils/text-helpers.ts
index cab10e90..7398aa66 100644
--- a/src/utils/text-helpers.ts
+++ b/src/utils/text-helpers.ts
@@ -38,6 +38,19 @@ const pluralizeNoun = (noun: string, count: number) => {
         default:
           return `${count} plezalcev`;
       }
+
+    case "glas":
+      switch (count % 100) {
+        case 1:
+          return `${count} glas`;
+        case 2:
+          return `${count} glasova`;
+        case 3:
+        case 4:
+          return `${count} glasovi`;
+        default:
+          return `${count} glasov`;
+      }
   }
 };
 

From affd2007a6561a0492916a6d9eb19a080e8f2535 Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Wed, 18 Oct 2023 18:33:55 +0200
Subject: [PATCH 6/6] preload difficulty votes for visible routes

---
 .../crag-route-list/crag-route.tsx            |  4 +-
 .../crag-route/difficulty-votes.tsx           | 50 ++++++++-----------
 .../crag-route/route-grade.tsx                | 43 ++++++++++++----
 src/app/[lang]/crags/[countrySlug]/page.tsx   |  1 -
 src/graphql/generated.ts                      |  9 ++++
 src/hooks/useIsVisible.tsx                    | 21 ++++++++
 6 files changed, 84 insertions(+), 44 deletions(-)
 create mode 100644 src/hooks/useIsVisible.tsx

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
index 8e23dfd6..d82230b7 100644
--- a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
@@ -47,7 +47,7 @@ function CragRoute({ crag, route, ascent }: Props) {
       {/* Route difficulty */}
       {displayColumn("difficulty") && (
         <td className="p-4">
-          <RouteGrade route={route} />
+          <RouteGrade route={route} crag={crag} />
         </td>
       )}
 
@@ -134,7 +134,7 @@ function CragRouteCompact({ crag, route, ascent }: Props) {
           <div>
             {displayColumn("difficulty") && (
               <span className="pr-4">
-                <RouteGrade route={route} />
+                <RouteGrade route={route} crag={crag} />
               </span>
             )}
             {displayColumn("length") && route.length && (
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
index 9c4e4bd5..ff33a967 100644
--- a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
@@ -8,26 +8,13 @@ import { gradingSystems } from "@/utils/grading-systems";
 
 interface Props {
   route: Route;
+  difficultyVotes: DifficultyVote[];
 }
 
-function DifficultyVotes({ route }: Props) {
-  const [difficultyVotes, setDifficultyVotes] = useState<DifficultyVote[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    difficultyVotesAction(route.id)
-      .then((votes) => {
-        setDifficultyVotes(votes);
-        setLoading(false);
-      })
-      .catch(() => {
-        setError("Napaka pri nalaganju glasov.");
-      });
-  }, [route.id]);
-
-  if (error) return <div className="text-red-500">{error}</div>;
-  if (loading) return <div>Nalagam...</div>;
+function DifficultyVotes({ route, difficultyVotes }: Props) {
+  const routeGradeDifficulty = route.difficulty
+    ? diffToGrade(route.difficulty, "french", false).difficulty
+    : null;
 
   const nrVotesPerDifficulty = difficultyVotes.reduce(
     (acc, vote) => ({
@@ -36,16 +23,15 @@ function DifficultyVotes({ route }: Props) {
     }),
     {} as Record<number, number>
   );
+
+  if (routeGradeDifficulty && !nrVotesPerDifficulty[routeGradeDifficulty]) {
+    nrVotesPerDifficulty[routeGradeDifficulty] = 0;
+  }
+
   const maxVotesPerDifficulty = Math.max(
     ...Object.values(nrVotesPerDifficulty)
   );
 
-  // const mainHighlightedDifficulty = route.difficulty && difficultyVotes[route.difficulty] ?
-
-  const routeGradeDifficulty = route.difficulty
-    ? diffToGrade(route.difficulty, "french", false).difficulty
-    : null;
-
   return (
     <>
       <table className="w-full max-w-sm">
@@ -60,18 +46,22 @@ function DifficultyVotes({ route }: Props) {
               </td>
               <td className="w-full">
                 <span
-                  className={`float-left block h-5 ${
+                  className={`float-left block h-5 w-0.5 ${
                     nrVotes === maxVotesPerDifficulty && "w-full"
                   } rounded ${
                     routeGradeDifficulty === parseInt(difficulty)
                       ? "bg-blue-500"
                       : "bg-neutral-200"
                   }`}
-                  style={{
-                    width: `${Math.round(
-                      (nrVotes / maxVotesPerDifficulty) * 100
-                    )}%`,
-                  }}
+                  style={
+                    nrVotes > 0
+                      ? {
+                          width: `${Math.round(
+                            (nrVotes / maxVotesPerDifficulty) * 100
+                          )}%`,
+                        }
+                      : {}
+                  }
                 ></span>
                 <span className="relative float-left">
                   <span className="absolute whitespace-nowrap pl-3 align-middle text-sm">
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
index 2bd46fa8..dedf4f84 100644
--- a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
+++ b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
@@ -1,32 +1,53 @@
-import Grade from "../../../../../../../../components/grade";
+import { useRouter } from "next/navigation";
 import Dialog, {
   DialogSize,
 } from "../../../../../../../../components/ui/dialog";
-import { Route } from "../../../../../../../../graphql/generated";
 import DifficultyVotes from "./difficulty-votes";
+import { Crag, DifficultyVote, Route } from "@/graphql/generated";
+import Grade from "@/components/grade";
+import useIsVisible from "@/hooks/useIsVisible";
+import { useEffect, useRef, useState } from "react";
+import difficultyVotesAction from "./server-actions/difficulty-votes-action";
 
 interface RouteGradeProps {
   route: Route;
+  crag: Crag;
 }
 
-function RouteGrade({ route }: RouteGradeProps) {
-  const handleOpenRoutePage = () => {};
-  const handleCloseDialog = () => {};
+function RouteGrade({ route, crag }: RouteGradeProps) {
+  const router = useRouter();
+  const ref = useRef<HTMLButtonElement>(null);
+  const handleOpenRoutePage = () => {
+    router.push(`/plezalisce/${crag.slug}/smer/${route.slug}`);
+  };
 
-  return (
+  const visible = useIsVisible(ref);
+
+  const [difficultyVotes, setDifficultyVotes] = useState<DifficultyVote[]>([]);
+
+  useEffect(() => {
+    if (visible) {
+      difficultyVotesAction(route.id).then((votes) => {
+        setDifficultyVotes(votes);
+      });
+    }
+  }, [visible, route.id]);
+
+  return route.isProject ? (
+    <>P</>
+  ) : (
     <Dialog
       openTrigger={
-        <button>
-          {route.isProject && "P"}
+        <button ref={ref}>
           {route.difficulty && <Grade difficulty={route.difficulty} />}
         </button>
       }
-      dialogSize={DialogSize.hug}
+      dialogSize={DialogSize.medium}
       title="Glasovi uporabnikov"
       confirm={{ label: "Več", callback: handleOpenRoutePage }}
-      cancel={{ label: "Zapri", callback: handleCloseDialog }}
+      cancel={{ label: "Zapri" }}
     >
-      <DifficultyVotes route={route} />
+      <DifficultyVotes route={route} difficultyVotes={difficultyVotes} />
     </Dialog>
   );
 }
diff --git a/src/app/[lang]/crags/[countrySlug]/page.tsx b/src/app/[lang]/crags/[countrySlug]/page.tsx
index ea956d2d..618e34bb 100644
--- a/src/app/[lang]/crags/[countrySlug]/page.tsx
+++ b/src/app/[lang]/crags/[countrySlug]/page.tsx
@@ -16,7 +16,6 @@ type Params = {
 };
 
 async function CragsPage({ params }: { params: Params }) {
-  console.log("rendering CragsPage");
   const { data } = await urqlServer().query(CountryBySlugWithCragsDocument, {
     country: params.countrySlug,
     input: { type: "sport" },
diff --git a/src/graphql/generated.ts b/src/graphql/generated.ts
index eedf8dd7..3066b428 100644
--- a/src/graphql/generated.ts
+++ b/src/graphql/generated.ts
@@ -1316,6 +1316,7 @@ export const CreateCommentDocument = {"kind":"Document","definitions":[{"kind":"
 export const DeleteCommentDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteComment"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteComment"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}]}}]} as unknown as DocumentNode<DeleteCommentMutation, DeleteCommentMutationVariables>;
 export const UpdateCommentDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateComment"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateCommentInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateComment"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"content"}}]}}]}}]} as unknown as DocumentNode<UpdateCommentMutation, UpdateCommentMutationVariables>;
 export const CragCommentsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CragComments"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"comments"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"updated"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fullName"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CragCommentsQuery, CragCommentsQueryVariables>;
+export const RouteDifficultyVotesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"RouteDifficultyVotes"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"routeId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"route"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"routeId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"defaultGradingSystem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"difficultyVotes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fullName"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"updated"}},{"kind":"Field","name":{"kind":"Name","value":"isBase"}},{"kind":"Field","name":{"kind":"Name","value":"includedInCalculation"}}]}}]}}]}}]} as unknown as DocumentNode<RouteDifficultyVotesQuery, RouteDifficultyVotesQueryVariables>;
 export const CragInfoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CragInfo"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"sectors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"routes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"length"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"defaultGradingSystem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"activityByMonth"}},{"kind":"Field","name":{"kind":"Name","value":"orientations"}},{"kind":"Field","name":{"kind":"Name","value":"approachTime"}},{"kind":"Field","name":{"kind":"Name","value":"wallAngles"}},{"kind":"Field","name":{"kind":"Name","value":"seasons"}},{"kind":"Field","name":{"kind":"Name","value":"rainProof"}}]}}]}}]} as unknown as DocumentNode<CragInfoQuery, CragInfoQueryVariables>;
 export const CragHeaderDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CragHeader"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"publishStatus"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<CragHeaderQuery, CragHeaderQueryVariables>;
 export const CragSectorsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CragSectors"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"crag"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cragBySlug"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"crag"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"sectors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"publishStatus"}},{"kind":"Field","name":{"kind":"Name","value":"routes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"defaultGradingSystem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"isProject"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"routeType"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"comments"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"pitches"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"isProject"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"nrTicks"}},{"kind":"Field","name":{"kind":"Name","value":"nrTries"}},{"kind":"Field","name":{"kind":"Name","value":"nrClimbers"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"starRating"}},{"kind":"Field","name":{"kind":"Name","value":"publishStatus"}},{"kind":"Field","name":{"kind":"Name","value":"sector"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"bouldersOnly"}}]}}]}}]}}]} as unknown as DocumentNode<CragSectorsQuery, CragSectorsQueryVariables>;
@@ -1330,6 +1331,7 @@ export const namedOperations = {
     HomeLatestAscents: 'HomeLatestAscents',
     HomeLatestDifficultyVotes: 'HomeLatestDifficultyVotes',
     CragComments: 'CragComments',
+    RouteDifficultyVotes: 'RouteDifficultyVotes',
     CragInfo: 'CragInfo',
     CragHeader: 'CragHeader',
     CragSectors: 'CragSectors',
@@ -1389,6 +1391,13 @@ export type CragCommentsQueryVariables = Exact<{
 
 export type CragCommentsQuery = { __typename?: 'Query', cragBySlug: { __typename?: 'Crag', id: string, slug: string, comments: Array<{ __typename?: 'Comment', id: string, content?: string | null, type: string, created: any, updated: any, user?: { __typename?: 'User', id: string, fullName: string } | null }> } };
 
+export type RouteDifficultyVotesQueryVariables = Exact<{
+  routeId: Scalars['String'];
+}>;
+
+
+export type RouteDifficultyVotesQuery = { __typename?: 'Query', route: { __typename?: 'Route', id: string, slug: string, difficulty?: number | null, name: string, length?: number | null, defaultGradingSystem: { __typename?: 'GradingSystem', id: string }, difficultyVotes: Array<{ __typename?: 'DifficultyVote', id: string, difficulty: number, created: any, updated: any, isBase: boolean, includedInCalculation: boolean, user?: { __typename?: 'User', id: string, fullName: string, firstname: string, lastname: string } | null }> } };
+
 export type CragInfoQueryVariables = Exact<{
   crag: Scalars['String'];
 }>;
diff --git a/src/hooks/useIsVisible.tsx b/src/hooks/useIsVisible.tsx
new file mode 100644
index 00000000..2cf1ac9e
--- /dev/null
+++ b/src/hooks/useIsVisible.tsx
@@ -0,0 +1,21 @@
+import { RefObject, useEffect, useState } from "react";
+
+function useIsVisible(ref: RefObject<HTMLElement>) {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) =>
+      setIntersecting(entry.isIntersecting)
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+
+  return isIntersecting;
+}
+
+export default useIsVisible;