added rating color/circle

Author: tejtex

package-lock.json

@@ -86,6 +86,12 @@
   line-height: 1.3;
 }
 
+.oi-list-item__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
 .oi-list-item__tags {
   display: flex;
   flex-wrap: wrap;
@@ -113,8 +119,32 @@
   transition: color 0.15s ease, transform 0.15s ease;
 }
 
+.oi-list-rating-circle {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--color);
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+}
+.oi-list-item__rating {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.oi-list-rating-circle__fill {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--fill);
+  background: var(--color);
+}
+
 @media (max-width: 860px) {
   .oi-list-toolbar {
     grid-template-columns: 1fr;
   }
-}
+}

src/ListWidget.css

@@ -10,6 +10,44 @@ const SORT_OPTIONS = [
   { value: "name-asc", label: "Nazwa (A-Z)" },
 ];
 
+const RATING_COLORS = {
+  800:  "#919191",
+  1600: "#5bcfa2",
+  2600: "#6de2e8",
+  3200: "#775cd1",
+  4000: "#ffd56b",
+  5000: "#fcae65",
+  6000: "#ed9a93",
+  8001: "#ffffff"
+};
+
+function getRatingInfo(rating) {
+  const thresholds = Object.keys(RATING_COLORS)
+    .map(Number)
+    .sort((a, b) => a - b);
+
+  let current = thresholds[0];
+  let next = null;
+
+  for (let i = 0; i < thresholds.length; i++) {
+    if (rating >= thresholds[i]) {
+      current = thresholds[i];
+      next = thresholds[i + 1] ?? null;
+    } else {
+      break;
+    }
+  }
+
+  const progress = next
+    ? (rating - current) / (next - current)
+    : 1;
+
+  return {
+    color: RATING_COLORS[current],
+    progress: Math.max(0, Math.min(progress, 1)),
+  };
+}
+
 const getText = (value) => {
   if (typeof value === "string") {
     return value;
@@ -192,14 +230,29 @@ const ListWidget = ({ dataUrl = DEFAULT_RESULTS_URL, embedded = false }) => {
       {!loading && !error ? (
         <div className="oi-list-results">
           {visibleProblems.map((problem) => {
+            const { color, progress } = getRatingInfo(problem.rating);
+
             const content = (
               <>
-                <span className="oi-list-item__name">{problem.name}</span>
+                <div className="oi-list-item__header">
+                  <span className="oi-list-item__name">{problem.name}</span>
+                  <div className="oi-list-item__rating">
+                    <span style={{ color: color }}>{problem.rating}</span>
+                     <div
+                      className="oi-list-rating-circle"
+                      style={{
+                        "--fill": `${progress * 100}%`,
+                        "--color": color,
+                      }}
+                    >
+                      <div className="oi-list-rating-circle__fill" />
+                    </div>
+                  </div>
+                </div>
                 <span className="oi-list-item__tags">
                   <code>{problem.code || "N/A"}</code>
                   <span>etap {problem.stage || "?"}</span>
                   <span>edycja {problem.year || "?"}</span>
-                  <span>rating {problem.rating || 0}</span>
                 </span>
                 {problem.url ? (
                   <svg