feat: adding review styling

2026-01-22 02:13:59 +00:00 · 2025-10-12 18:39:41 +01:00
parent 6146a1fbf1
commit 14204f1fbe
27 changed files with 1226 additions and 215 deletions
--- a/src/renderer/src/assets/icons/decky.png
+++ b/src/renderer/src/assets/icons/decky.png
--- a/src/renderer/src/components/confirm-modal/confirm-modal.scss
+++ b/src/renderer/src/components/confirm-modal/confirm-modal.scss
@@ -1,11 +0,0 @@
-@use "../../scss/globals.scss";
-
-.confirm-modal {
-  &__actions {
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    align-items: center;
-    gap: globals.$spacing-unit;
-  }
-}
--- a/src/renderer/src/components/confirm-modal/confirm-modal.tsx
+++ b/src/renderer/src/components/confirm-modal/confirm-modal.tsx
@@ -1,57 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Button, Modal } from "@renderer/components";
-import "./confirm-modal.scss";
-
-export interface ConfirmModalProps {
-  visible: boolean;
-  title: string;
-  description?: string;
-  onClose: () => void;
-  onConfirm: () => Promise<void> | void;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  confirmTheme?: "primary" | "outline" | "danger";
-  confirmDisabled?: boolean;
-}
-
-export function ConfirmModal({
-  visible,
-  title,
-  description,
-  onClose,
-  onConfirm,
-  confirmLabel,
-  cancelLabel,
-  confirmTheme = "outline",
-  confirmDisabled = false,
-}: ConfirmModalProps) {
-  const { t } = useTranslation();
-
-  const handleConfirm = async () => {
-    await onConfirm();
-    onClose();
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      title={title}
-      description={description}
-      onClose={onClose}
-    >
-      <div className="confirm-modal__actions">
-        <Button
-          onClick={handleConfirm}
-          theme={confirmTheme}
-          disabled={confirmDisabled}
-        >
-          {confirmLabel || t("confirm")}
-        </Button>
-
-        <Button onClick={onClose} theme="primary">
-          {cancelLabel || t("cancel")}
-        </Button>
-      </div>
-    </Modal>
-  );
-}
--- a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
+++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
@@ -8,7 +8,7 @@
  &__actions {
    display: flex;
    align-self: flex-end;
-    gap: calc(globals.$spacing-unit * 2);
+    gap: globals.$spacing-unit;
  }
  &__description {
    font-size: 16px;
--- a/src/renderer/src/components/confirmation-modal/confirmation-modal.tsx
+++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.tsx
@@ -42,7 +42,7 @@ export function ConfirmationModal({
            {cancelButtonLabel}
          </Button>
          <Button
-            theme="danger"
+            theme="primary"
            disabled={buttonsIsDisabled}
            onClick={onConfirm}
          >
--- a/src/renderer/src/components/game-context-menu/game-context-menu.tsx
+++ b/src/renderer/src/components/game-context-menu/game-context-menu.tsx
@@ -14,8 +14,12 @@ import {
 } from "@primer/octicons-react";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { LibraryGame } from "@types";
-import { ContextMenu, ContextMenuItemData, ContextMenuProps } from "..";
-import { ConfirmModal } from "@renderer/components/confirm-modal/confirm-modal";
+import {
+  ContextMenu,
+  ContextMenuItemData,
+  ContextMenuProps,
+  ConfirmationModal,
+} from "..";
 import { useGameActions } from "..";

 interface GameContextMenuProps extends Omit<ContextMenuProps, "items"> {
@@ -195,36 +199,40 @@ export function GameContextMenu({
        }
      />

-      <ConfirmModal
+      <ConfirmationModal
        visible={showConfirmRemoveLibrary}
        title={t("remove_from_library_title")}
-        description={t("remove_from_library_description", { game: game.title })}
+        descriptionText={t("remove_from_library_description", {
+          game: game.title,
+        })}
        onClose={() => {
          setShowConfirmRemoveLibrary(false);
          onClose();
        }}
        onConfirm={async () => {
+          setShowConfirmRemoveLibrary(false);
+          onClose();
          await handleRemoveFromLibrary();
        }}
-        confirmLabel={t("remove")}
-        cancelLabel={t("cancel")}
-        confirmTheme="danger"
+        cancelButtonLabel={t("cancel")}
+        confirmButtonLabel={t("remove")}
      />

-      <ConfirmModal
+      <ConfirmationModal
        visible={showConfirmRemoveFiles}
        title={t("remove_files")}
-        description={t("delete_modal_description", { ns: "downloads" })}
+        descriptionText={t("delete_modal_description", { ns: "downloads" })}
        onClose={() => {
          setShowConfirmRemoveFiles(false);
          onClose();
        }}
        onConfirm={async () => {
+          setShowConfirmRemoveFiles(false);
+          onClose();
          await handleRemoveFiles();
        }}
-        confirmLabel={t("remove")}
-        cancelLabel={t("cancel")}
-        confirmTheme="danger"
+        cancelButtonLabel={t("cancel")}
+        confirmButtonLabel={t("remove")}
      />
    </>
  );
--- a/src/renderer/src/components/sidebar/sidebar.scss
+++ b/src/renderer/src/components/sidebar/sidebar.scss
@@ -71,6 +71,23 @@
        opacity: 1;
      }
    }
+
+    &--decky {
+      background: linear-gradient(
+        135deg,
+        rgba(22, 177, 149, 0.2) 0%,
+        rgba(62, 98, 192, 0.1) 100%
+      );
+      color: globals.$muted-color;
+
+      &:hover {
+        background: linear-gradient(
+          135deg,
+          rgba(22, 177, 149, 0.3) 0%,
+          rgba(62, 98, 192, 0.15) 100%
+        );
+      }
+    }
  }

  &__menu-item-button {
@@ -123,6 +140,11 @@
    padding-bottom: globals.$spacing-unit;
  }

+  &__bottom-buttons {
+    display: flex;
+    flex-direction: column;
+  }
+
  &__help-button {
    color: globals.$muted-color;
    padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -5,7 +5,7 @@ import { Tooltip } from "react-tooltip";

 import type { LibraryGame } from "@types";

-import { TextField } from "@renderer/components";
+import { TextField, ConfirmationModal } from "@renderer/components";
 import {
  useDownload,
  useLibrary,
@@ -31,6 +31,7 @@ import { SidebarGameItem } from "./sidebar-game-item";
 import { SidebarAddingCustomGameModal } from "./sidebar-adding-custom-game-modal";
 import { setFriendRequestCount } from "@renderer/features/user-details-slice";
 import { useDispatch } from "react-redux";
+import deckyIcon from "@renderer/assets/icons/decky.png";

 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
@@ -47,6 +48,12 @@ export function Sidebar() {

  const { t } = useTranslation("sidebar");
  const { library, updateLibrary } = useLibrary();
+  const [deckyPluginInfo, setDeckyPluginInfo] = useState<{
+    installed: boolean;
+    version: string | null;
+  }>({ installed: false, version: null });
+  const [homebrewFolderExists, setHomebrewFolderExists] = useState(false);
+  const [showDeckyConfirmModal, setShowDeckyConfirmModal] = useState(false);
  const navigate = useNavigate();

  const [filteredLibrary, setFilteredLibrary] = useState<LibraryGame[]>([]);
@@ -66,7 +73,7 @@ export function Sidebar() {

  const { lastPacket, progress } = useDownload();

-  const { showWarningToast } = useToast();
+  const { showWarningToast, showSuccessToast, showErrorToast } = useToast();

  const [showPlayableOnly, setShowPlayableOnly] = useState(false);
  const [showAddGameModal, setShowAddGameModal] = useState(false);
@@ -83,10 +90,64 @@ export function Sidebar() {
    setShowAddGameModal(false);
  };

+  const loadDeckyPluginInfo = async () => {
+    if (window.electron.platform !== "linux") return;
+
+    try {
+      const [info, folderExists] = await Promise.all([
+        window.electron.getHydraDeckyPluginInfo(),
+        window.electron.checkHomebrewFolderExists(),
+      ]);
+
+      setDeckyPluginInfo({
+        installed: info.installed,
+        version: info.version,
+      });
+      setHomebrewFolderExists(folderExists);
+    } catch (error) {
+      console.error("Failed to load Decky plugin info:", error);
+    }
+  };
+
+  const handleInstallHydraDeckyPlugin = () => {
+    setShowDeckyConfirmModal(true);
+  };
+
+  const handleConfirmDeckyInstallation = async () => {
+    setShowDeckyConfirmModal(false);
+
+    try {
+      const result = await window.electron.installHydraDeckyPlugin();
+
+      if (result.success) {
+        showSuccessToast(
+          t("decky_plugin_installed", {
+            version: result.currentVersion,
+          })
+        );
+        await loadDeckyPluginInfo();
+      } else {
+        showErrorToast(
+          t("decky_plugin_installation_failed", {
+            error: result.error || "Unknown error",
+          })
+        );
+      }
+    } catch (error) {
+      showErrorToast(
+        t("decky_plugin_installation_error", { error: String(error) })
+      );
+    }
+  };
+
  useEffect(() => {
    updateLibrary();
  }, [lastPacket?.gameId, updateLibrary]);

+  useEffect(() => {
+    loadDeckyPluginInfo();
+  }, []);
+
  useEffect(() => {
    const unsubscribe = window.electron.onSyncFriendRequests((result) => {
      dispatch(setFriendRequestCount(result.friendRequestCount));
@@ -244,6 +305,28 @@ export function Sidebar() {
                  </button>
                </li>
              ))}
+              {window.electron.platform === "linux" && homebrewFolderExists && (
+                <li className="sidebar__menu-item sidebar__menu-item--decky">
+                  <button
+                    type="button"
+                    className="sidebar__menu-item-button"
+                    onClick={handleInstallHydraDeckyPlugin}
+                  >
+                    <img
+                      src={deckyIcon}
+                      alt="Decky"
+                      style={{ width: 16, height: 16 }}
+                    />
+                    <span>
+                      {deckyPluginInfo.installed
+                        ? t("decky_plugin_installed_version", {
+                            version: deckyPluginInfo.version,
+                          })
+                        : t("install_decky_plugin")}
+                    </span>
+                  </button>
+                </li>
+              )}
            </ul>
          </section>

@@ -321,18 +404,20 @@ export function Sidebar() {
        </div>
      </div>

-      {hasActiveSubscription && (
-        <button
-          type="button"
-          className="sidebar__help-button"
-          data-open-support-chat
-        >
-          <div className="sidebar__help-button-icon">
-            <CommentDiscussionIcon size={14} />
-          </div>
-          <span>{t("need_help")}</span>
-        </button>
-      )}
+      <div className="sidebar__bottom-buttons">
+        {hasActiveSubscription && (
+          <button
+            type="button"
+            className="sidebar__help-button"
+            data-open-support-chat
+          >
+            <div className="sidebar__help-button-icon">
+              <CommentDiscussionIcon size={14} />
+            </div>
+            <span>{t("need_help")}</span>
+          </button>
+        )}
+      </div>

      <button
        type="button"
@@ -345,6 +430,24 @@ export function Sidebar() {
        onClose={handleCloseAddGameModal}
      />

+      <ConfirmationModal
+        visible={showDeckyConfirmModal}
+        title={
+          deckyPluginInfo.installed
+            ? t("update_decky_plugin_title")
+            : t("install_decky_plugin_title")
+        }
+        descriptionText={
+          deckyPluginInfo.installed
+            ? t("update_decky_plugin_message")
+            : t("install_decky_plugin_message")
+        }
+        onClose={() => setShowDeckyConfirmModal(false)}
+        onConfirm={handleConfirmDeckyInstallation}
+        cancelButtonLabel={t("cancel")}
+        confirmButtonLabel={t("confirm")}
+      />
+
      <Tooltip id="add-custom-game-tooltip" />
      <Tooltip id="show-playable-only-tooltip" />
    </aside>
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -339,6 +339,19 @@ declare global {
    getBadges: () => Promise<Badge[]>;
    canInstallCommonRedist: () => Promise<boolean>;
    installCommonRedist: () => Promise<void>;
+    installHydraDeckyPlugin: () => Promise<{
+      success: boolean;
+      path: string;
+      currentVersion: string | null;
+      expectedVersion: string;
+      error?: string;
+    }>;
+    getHydraDeckyPluginInfo: () => Promise<{
+      installed: boolean;
+      version: string | null;
+      path: string;
+    }>;
+    checkHomebrewFolderExists: () => Promise<boolean>;
    onCommonRedistProgress: (
      cb: (value: { log: string; complete: boolean }) => void
    ) => () => Electron.IpcRenderer;
--- a/src/renderer/src/helpers.ts
+++ b/src/renderer/src/helpers.ts
@@ -104,3 +104,11 @@ export const generateRandomGradient = (): string => {
  // Return as data URL that works in img tags
  return `data:image/svg+xml;base64,${btoa(svgContent)}`;
 };
+
+export const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat("en-US", {
+    notation: "compact",
+    compactDisplay: "short",
+    maximumFractionDigits: 1,
+  }).format(num);
+};
--- a/src/renderer/src/pages/game-details/description-header/description-header.scss
+++ b/src/renderer/src/pages/game-details/description-header/description-header.scss
@@ -2,20 +2,30 @@

 .description-header {
  width: 100%;
-  padding: calc(globals.$spacing-unit * 1.5);
+  padding: calc(globals.$spacing-unit * 2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: globals.$background-color;
  height: 72px;
-  border-radius: 12px;
+  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  margin-bottom: calc(globals.$spacing-unit * 1);
+  margin-bottom: calc(globals.$spacing-unit * 1.5);

  &__info {
    display: flex;
-    gap: globals.$spacing-unit;
+    gap: calc(globals.$spacing-unit * 0.5);
    flex-direction: column;
+
+    p {
+      font-size: globals.$small-font-size;
+      color: globals.$muted-color;
+      font-weight: 400;
+
+      &:first-child {
+        font-weight: 600;
+      }
+    }
  }
 }
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/src/renderer/src/pages/game-details/game-details-content.tsx
@@ -9,7 +9,7 @@ import { ThumbsUp, ThumbsDown, Star } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import type { GameReview } from "@types";

 import { HeroPanel } from "./hero";
@@ -27,6 +27,8 @@ import { cloudSyncContext, gameDetailsContext } from "@renderer/context";
 import cloudIconAnimated from "@renderer/assets/icons/cloud-animated.gif";
 import { useUserDetails, useLibrary, useDate, useToast } from "@renderer/hooks";
 import { useSubscription } from "@renderer/hooks/use-subscription";
+import { formatNumber } from "@renderer/helpers";
+import { Button } from "@renderer/components";
 import "./game-details.scss";

 const getScoreColorClass = (score: number): string => {
@@ -147,6 +149,9 @@ export function GameDetailsContent() {
  const [reviewCharCount, setReviewCharCount] = useState(0);
  const MAX_REVIEW_CHARS = 1000;
  const [reviewsSortBy, setReviewsSortBy] = useState("newest");
+  const previousVotesRef = useRef<
+    Map<string, { upvotes: number; downvotes: number }>
+  >(new Map());
  const [reviewsPage, setReviewsPage] = useState(0);
  const [hasMoreReviews, setHasMoreReviews] = useState(true);
  const [visibleBlockedReviews, setVisibleBlockedReviews] = useState<
@@ -333,6 +338,8 @@ export function GameDetailsContent() {
      loadReviews(true);
      setShowDeleteReviewModal(false);
      setReviewToDelete(null);
+      setHasUserReviewed(false);
+      setShowReviewForm(true);
      showSuccessToast(t("review_deleted_successfully"));
    } catch (error) {
      console.error("Failed to delete review:", error);
@@ -452,6 +459,18 @@ export function GameDetailsContent() {
    }
  }, [reviewsPage]);

+  // Initialize previousVotesRef for new reviews
+  useEffect(() => {
+    reviews.forEach((review) => {
+      if (!previousVotesRef.current.has(review.id)) {
+        previousVotesRef.current.set(review.id, {
+          upvotes: review.upvotes || 0,
+          downvotes: review.downvotes || 0,
+        });
+      }
+    });
+  }, [reviews]);
+
  const getImageWithCustomPriority = (
    customUrl: string | null | undefined,
    originalUrl: string | null | undefined,
@@ -683,7 +702,7 @@ export function GameDetailsContent() {
                                title={getRatingText(starValue, t)}
                              >
                                <Star
-                                  size={24}
+                                  size={18}
                                  fill={
                                    reviewScore && starValue <= reviewScore
                                      ? "currentColor"
@@ -695,8 +714,8 @@ export function GameDetailsContent() {
                          </div>
                        </div>

-                        <button
-                          className="game-details__review-submit-button"
+                        <Button
+                          theme="primary"
                          onClick={handleSubmitReview}
                          disabled={
                            !editor?.getHTML().trim() ||
@@ -708,7 +727,7 @@ export function GameDetailsContent() {
                          {submittingReview
                            ? t("submitting")
                            : t("submit_review")}
-                        </button>
+                        </Button>
                      </div>
                    </div>
                  </>
@@ -772,11 +791,20 @@ export function GameDetailsContent() {
                          <div className="game-details__review-header">
                            <div className="game-details__review-user">
                              {review.user?.profileImageUrl && (
-                                <img
-                                  src={review.user.profileImageUrl}
-                                  alt={review.user.displayName || "User"}
-                                  className="game-details__review-avatar"
-                                />
+                                <button
+                                  className="game-details__review-avatar-button"
+                                  onClick={() =>
+                                    review.user?.id &&
+                                    navigate(`/profile/${review.user.id}`)
+                                  }
+                                  title={review.user.displayName || "User"}
+                                >
+                                  <img
+                                    src={review.user.profileImageUrl}
+                                    alt={review.user.displayName || "User"}
+                                    className="game-details__review-avatar"
+                                  />
+                                </button>
                              )}
                              <div className="game-details__review-user-info">
                                <button
@@ -837,14 +865,6 @@ export function GameDetailsContent() {
                                onClick={() =>
                                  handleVoteReview(review.id, "upvote")
                                }
-                                whileTap={{
-                                  scale: 0.9,
-                                  transition: { duration: 0.1 },
-                                }}
-                                whileHover={{
-                                  scale: 1.05,
-                                  transition: { duration: 0.2 },
-                                }}
                                animate={
                                  review.hasUpvoted
                                    ? {
@@ -855,21 +875,45 @@ export function GameDetailsContent() {
                                }
                              >
                                <ThumbsUp size={16} />
-                                <span>{review.upvotes || 0}</span>
+                                <AnimatePresence mode="wait">
+                                  <motion.span
+                                    key={review.upvotes || 0}
+                                    custom={
+                                      (review.upvotes || 0) >
+                                      (previousVotesRef.current.get(review.id)
+                                        ?.upvotes || 0)
+                                    }
+                                    variants={{
+                                      enter: (isIncreasing: boolean) => ({
+                                        y: isIncreasing ? 10 : -10,
+                                        opacity: 0,
+                                      }),
+                                      center: { y: 0, opacity: 1 },
+                                      exit: (isIncreasing: boolean) => ({
+                                        y: isIncreasing ? -10 : 10,
+                                        opacity: 0,
+                                      }),
+                                    }}
+                                    initial="enter"
+                                    animate="center"
+                                    exit="exit"
+                                    transition={{ duration: 0.2 }}
+                                    onAnimationComplete={() => {
+                                      previousVotesRef.current.set(review.id, {
+                                        upvotes: review.upvotes || 0,
+                                        downvotes: review.downvotes || 0,
+                                      });
+                                    }}
+                                  >
+                                    {formatNumber(review.upvotes || 0)}
+                                  </motion.span>
+                                </AnimatePresence>
                              </motion.button>
                              <motion.button
                                className={`game-details__vote-button game-details__vote-button--downvote ${review.hasDownvoted ? "game-details__vote-button--active" : ""}`}
                                onClick={() =>
                                  handleVoteReview(review.id, "downvote")
                                }
-                                whileTap={{
-                                  scale: 0.9,
-                                  transition: { duration: 0.1 },
-                                }}
-                                whileHover={{
-                                  scale: 1.05,
-                                  transition: { duration: 0.2 },
-                                }}
                                animate={
                                  review.hasDownvoted
                                    ? {
@@ -880,7 +924,39 @@ export function GameDetailsContent() {
                                }
                              >
                                <ThumbsDown size={16} />
-                                <span>{review.downvotes || 0}</span>
+                                <AnimatePresence mode="wait">
+                                  <motion.span
+                                    key={review.downvotes || 0}
+                                    custom={
+                                      (review.downvotes || 0) >
+                                      (previousVotesRef.current.get(review.id)
+                                        ?.downvotes || 0)
+                                    }
+                                    variants={{
+                                      enter: (isIncreasing: boolean) => ({
+                                        y: isIncreasing ? 10 : -10,
+                                        opacity: 0,
+                                      }),
+                                      center: { y: 0, opacity: 1 },
+                                      exit: (isIncreasing: boolean) => ({
+                                        y: isIncreasing ? -10 : 10,
+                                        opacity: 0,
+                                      }),
+                                    }}
+                                    initial="enter"
+                                    animate="center"
+                                    exit="exit"
+                                    transition={{ duration: 0.2 }}
+                                    onAnimationComplete={() => {
+                                      previousVotesRef.current.set(review.id, {
+                                        upvotes: review.upvotes || 0,
+                                        downvotes: review.downvotes || 0,
+                                      });
+                                    }}
+                                  >
+                                    {formatNumber(review.downvotes || 0)}
+                                  </motion.span>
+                                </AnimatePresence>
                              </motion.button>
                            </div>
                            {userDetails?.id === review.user?.id && (
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -128,7 +128,7 @@ $hero-height: 300px;
  &__star-rating {
    display: flex;
    align-items: center;
-    gap: 4px;
+    gap: 2px;
  }

  &__star {
@@ -136,7 +136,7 @@ $hero-height: 300px;
    border: none;
    color: #666666;
    cursor: pointer;
-    padding: 4px;
+    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
@@ -220,30 +220,6 @@ $hero-height: 300px;
    }
  }

-  &__review-submit-button {
-    background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    color: #ffffff;
-    padding: 10px 20px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-
-    &:hover:not(:disabled) {
-      background-color: rgba(255, 255, 255, 0.08);
-      border-color: rgba(255, 255, 255, 0.15);
-    }
-
-    &:disabled {
-      background-color: rgba(255, 255, 255, 0.1);
-      cursor: not-allowed;
-      color: rgba(255, 255, 255, 0.5);
-    }
-  }
-
  &__reviews-list {
    margin-top: calc(globals.$spacing-unit * 3);
  }
@@ -288,7 +264,12 @@ $hero-height: 300px;
  }

  &__review-item {
-    background: rgba(255, 255, 255, 0.03);
+    background: linear-gradient(
+      to right,
+      globals.$dark-background-color 0%,
+      globals.$dark-background-color 30%,
+      globals.$background-color 100%
+    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: calc(globals.$spacing-unit * 2);
@@ -310,12 +291,29 @@ $hero-height: 300px;
    gap: calc(globals.$spacing-unit * 1);
  }

+  &__review-avatar-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+
  &__review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
+    display: block;
  }

  &__review-user-info {
@@ -370,16 +368,7 @@ $hero-height: 300px;
    &:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
-    }
-
-    &--upvote:hover {
-      color: #4caf50;
-      border-color: #4caf50;
-    }
-
-    &--downvote:hover {
-      color: #f44336;
-      border-color: #f44336;
+      color: #ffffff;
    }

    &--active {
@@ -398,6 +387,9 @@ $hero-height: 300px;

    span {
      font-weight: 500;
+      display: inline-block;
+      min-width: 1ch;
+      overflow: hidden;
    }
  }

@@ -1015,9 +1007,9 @@ $hero-height: 300px;
  &__review-input-container {
    display: flex;
    flex-direction: column;
-    border: 1px solid #3a3a3a;
+    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
-    background-color: #1e1e1e;
+    background-color: globals.$dark-background-color;
    overflow: hidden;
  }

@@ -1026,8 +1018,8 @@ $hero-height: 300px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
-    background-color: #2a2a2a;
-    border-bottom: 1px solid #3a3a3a;
+    background-color: globals.$background-color;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  &__review-editor-toolbar {
@@ -1037,7 +1029,7 @@ $hero-height: 300px;

  &__editor-button {
    background: none;
-    border: 1px solid #4a4a4a;
+    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #ffffff;
    padding: 4px 8px;
@@ -1046,13 +1038,13 @@ $hero-height: 300px;
    transition: all 0.2s ease;

    &:hover {
-      background-color: #3a3a3a;
-      border-color: #5a5a5a;
+      background-color: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.2);
    }

    &.is-active {
-      background-color: #0078d4;
-      border-color: #0078d4;
+      background-color: globals.$brand-blue;
+      border-color: globals.$brand-blue;
    }

    &:disabled {
--- a/src/renderer/src/pages/settings/settings-debrid.scss
+++ b/src/renderer/src/pages/settings/settings-debrid.scss
@@ -0,0 +1,71 @@
+@use "../../scss/globals.scss";
+
+.settings-debrid {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+
+  &__description {
+    margin: 0 0 calc(globals.$spacing-unit * 2) 0;
+    color: var(--text-secondary);
+    line-height: 1.6;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+
+    &:not(:last-child) {
+      margin-bottom: calc(globals.$spacing-unit * 2);
+    }
+  }
+
+  &__section-header {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__section-title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  &__collapse-button {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 0.2s;
+    flex-shrink: 0;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__check-icon {
+    color: white;
+    flex-shrink: 0;
+  }
+
+  &__beta-badge {
+    background: linear-gradient(135deg, #c9aa71, #d4af37);
+    color: #1a1a1a;
+    font-size: 0.625rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+    letter-spacing: 0.5px;
+    flex-shrink: 0;
+  }
+}
--- a/src/renderer/src/pages/settings/settings-debrid.tsx
+++ b/src/renderer/src/pages/settings/settings-debrid.tsx
@@ -0,0 +1,228 @@
+import { useState, useCallback, useMemo } from "react";
+import { useFeature, useAppSelector } from "@renderer/hooks";
+import { SettingsTorBox } from "./settings-torbox";
+import { SettingsRealDebrid } from "./settings-real-debrid";
+import { SettingsAllDebrid } from "./settings-all-debrid";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronRightIcon, CheckCircleFillIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import "./settings-debrid.scss";
+
+interface CollapseState {
+  torbox: boolean;
+  realDebrid: boolean;
+  allDebrid: boolean;
+}
+
+const sectionVariants = {
+  collapsed: {
+    opacity: 0,
+    y: -20,
+    height: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+      opacity: { duration: 0.1 },
+      y: { duration: 0.1 },
+      height: { duration: 0.2 },
+    },
+  },
+  expanded: {
+    opacity: 1,
+    y: 0,
+    height: "auto",
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+      opacity: { duration: 0.2, delay: 0.1 },
+      y: { duration: 0.3 },
+      height: { duration: 0.3 },
+    },
+  },
+};
+
+const chevronVariants = {
+  collapsed: {
+    rotate: 0,
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+  expanded: {
+    rotate: 90,
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+};
+
+export function SettingsDebrid() {
+  const { t } = useTranslation("settings");
+  const { isFeatureEnabled, Feature } = useFeature();
+  const isTorBoxEnabled = isFeatureEnabled(Feature.TorBox);
+
+  const userPreferences = useAppSelector(
+    (state) => state.userPreferences.value
+  );
+
+  const initialCollapseState = useMemo<CollapseState>(() => {
+    return {
+      torbox: !userPreferences?.torBoxApiToken,
+      realDebrid: !userPreferences?.realDebridApiToken,
+      allDebrid: !userPreferences?.allDebridApiKey,
+    };
+  }, [userPreferences]);
+
+  const [collapseState, setCollapseState] =
+    useState<CollapseState>(initialCollapseState);
+
+  const toggleSection = useCallback((section: keyof CollapseState) => {
+    setCollapseState((prevState) => ({
+      ...prevState,
+      [section]: !prevState[section],
+    }));
+  }, []);
+
+  return (
+    <div className="settings-debrid">
+      <p className="settings-debrid__description">{t("debrid_description")}</p>
+
+      <div className="settings-debrid__section">
+        <div className="settings-debrid__section-header">
+          <button
+            type="button"
+            className="settings-debrid__collapse-button"
+            onClick={() => toggleSection("realDebrid")}
+            aria-label={
+              collapseState.realDebrid
+                ? "Expand Real-Debrid section"
+                : "Collapse Real-Debrid section"
+            }
+          >
+            <motion.div
+              variants={chevronVariants}
+              animate={collapseState.realDebrid ? "collapsed" : "expanded"}
+            >
+              <ChevronRightIcon size={16} />
+            </motion.div>
+          </button>
+          <h3 className="settings-debrid__section-title">Real-Debrid</h3>
+          {userPreferences?.realDebridApiToken && (
+            <CheckCircleFillIcon
+              size={16}
+              className="settings-debrid__check-icon"
+            />
+          )}
+        </div>
+
+        <AnimatePresence initial={true} mode="wait">
+          {!collapseState.realDebrid && (
+            <motion.div
+              key="realdebrid-content"
+              variants={sectionVariants}
+              initial="collapsed"
+              animate="expanded"
+              exit="collapsed"
+              layout
+            >
+              <SettingsRealDebrid />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {isTorBoxEnabled && (
+        <div className="settings-debrid__section">
+          <div className="settings-debrid__section-header">
+            <button
+              type="button"
+              className="settings-debrid__collapse-button"
+              onClick={() => toggleSection("torbox")}
+              aria-label={
+                collapseState.torbox
+                  ? "Expand TorBox section"
+                  : "Collapse TorBox section"
+              }
+            >
+              <motion.div
+                variants={chevronVariants}
+                animate={collapseState.torbox ? "collapsed" : "expanded"}
+              >
+                <ChevronRightIcon size={16} />
+              </motion.div>
+            </button>
+            <h3 className="settings-debrid__section-title">TorBox</h3>
+            {userPreferences?.torBoxApiToken && (
+              <CheckCircleFillIcon
+                size={16}
+                className="settings-debrid__check-icon"
+              />
+            )}
+          </div>
+
+          <AnimatePresence initial={true} mode="wait">
+            {!collapseState.torbox && (
+              <motion.div
+                key="torbox-content"
+                variants={sectionVariants}
+                initial="collapsed"
+                animate="expanded"
+                exit="collapsed"
+                layout
+              >
+                <SettingsTorBox />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
+
+      <div className="settings-debrid__section">
+        <div className="settings-debrid__section-header">
+          <button
+            type="button"
+            className="settings-debrid__collapse-button"
+            onClick={() => toggleSection("allDebrid")}
+            aria-label={
+              collapseState.allDebrid
+                ? "Expand All-Debrid section"
+                : "Collapse All-Debrid section"
+            }
+          >
+            <motion.div
+              variants={chevronVariants}
+              animate={collapseState.allDebrid ? "collapsed" : "expanded"}
+            >
+              <ChevronRightIcon size={16} />
+            </motion.div>
+          </button>
+          <h3 className="settings-debrid__section-title">All-Debrid</h3>
+          <span className="settings-debrid__beta-badge">BETA</span>
+          {userPreferences?.allDebridApiKey && (
+            <CheckCircleFillIcon
+              size={16}
+              className="settings-debrid__check-icon"
+            />
+          )}
+        </div>
+
+        <AnimatePresence initial={true} mode="wait">
+          {!collapseState.allDebrid && (
+            <motion.div
+              key="alldebrid-content"
+              variants={sectionVariants}
+              initial="collapsed"
+              animate="expanded"
+              exit="collapsed"
+              layout
+            >
+              <SettingsAllDebrid />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
--- a/src/renderer/src/pages/settings/settings.tsx
+++ b/src/renderer/src/pages/settings/settings.tsx
@@ -1,7 +1,5 @@
 import { Button } from "@renderer/components";
 import { useTranslation } from "react-i18next";
-import { SettingsRealDebrid } from "./settings-real-debrid";
-import { SettingsAllDebrid } from "./settings-all-debrid";
 import { SettingsGeneral } from "./settings-general";
 import { SettingsBehavior } from "./settings-behavior";
 import { SettingsDownloadSources } from "./settings-download-sources";
@@ -10,21 +8,17 @@ import {
  SettingsContextProvider,
 } from "@renderer/context";
 import { SettingsAccount } from "./settings-account";
-import { useFeature, useUserDetails } from "@renderer/hooks";
+import { useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 import "./settings.scss";
 import { SettingsAppearance } from "./aparence/settings-appearance";
-import { SettingsTorBox } from "./settings-torbox";
+import { SettingsDebrid } from "./settings-debrid";

 export default function Settings() {
  const { t } = useTranslation("settings");

  const { userDetails } = useUserDetails();

-  const { isFeatureEnabled, Feature } = useFeature();
-
-  const isTorBoxEnabled = isFeatureEnabled(Feature.TorBox);
-
  const categories = useMemo(() => {
    const categories = [
      { tabLabel: t("general"), contentTitle: t("general") },
@@ -34,16 +28,7 @@ export default function Settings() {
        tabLabel: t("appearance"),
        contentTitle: t("appearance"),
      },
-      ...(isTorBoxEnabled
-        ? [
-            {
-              tabLabel: "TorBox",
-              contentTitle: "TorBox",
-            },
-          ]
-        : []),
-      { tabLabel: "Real-Debrid", contentTitle: "Real-Debrid" },
-      { tabLabel: "All-Debrid", contentTitle: "All-Debrid" },
+      { tabLabel: t("debrid"), contentTitle: t("debrid") },
    ];

    if (userDetails)
@@ -52,7 +37,7 @@ export default function Settings() {
        { tabLabel: t("account"), contentTitle: t("account") },
      ];
    return categories;
-  }, [userDetails, t, isTorBoxEnabled]);
+  }, [userDetails, t]);

  return (
    <SettingsContextProvider>
@@ -76,15 +61,7 @@ export default function Settings() {
            }

            if (currentCategoryIndex === 4) {
-              return <SettingsTorBox />;
-            }
-
-            if (currentCategoryIndex === 5) {
-              return <SettingsRealDebrid />;
-            }
-
-            if (currentCategoryIndex === 6) {
-              return <SettingsAllDebrid />;
+              return <SettingsDebrid />;
            }

            return <SettingsAccount />;