fix: fixing download cancel

src/renderer/src/components/sidebar/sidebar.scss

@@ -23,6 +23,7 @@
   &__content {
     display: flex;
     flex-direction: column;
+    flex: 1;
     padding: calc(globals.$spacing-unit * 2);
     gap: calc(globals.$spacing-unit * 2);
     width: 100%;
@@ -54,6 +55,7 @@
     display: flex;
     color: globals.$muted-color;
     border-radius: 4px;
+
     &:hover {
       background-color: rgba(255, 255, 255, 0.15);
     }
@@ -104,13 +106,14 @@
   &__container {
     display: flex;
     flex-direction: column;
+    flex: 1;
     overflow: hidden;
   }
 
   &__section {
-    gap: calc(globals.$spacing-unit * 2);
     display: flex;
     flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
     padding-bottom: globals.$spacing-unit;
   }
 

src/renderer/src/hooks/use-download.ts

@@ -39,7 +39,7 @@ export function useDownload() {
   const pauseDownload = async (shop: GameShop, objectId: string) => {
     await window.electron.pauseGameDownload(shop, objectId);
     await updateLibrary();
-    dispatch(clearDownload());
+    if (lastPacket?.gameId === `${shop}:${objectId}`) dispatch(clearDownload());
   };
 
   const resumeDownload = async (shop: GameShop, objectId: string) => {

src/renderer/src/pages/downloads/download-group.scss

@@ -5,6 +5,14 @@
   flex-direction: column;
   gap: calc(globals.$spacing-unit * 2);
 
+  &__details-with-article {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+    align-self: flex-start;
+    cursor: pointer;
+  }
+
   &__header {
     display: flex;
     align-items: center;

src/renderer/src/pages/downloads/download-group.tsx

@@ -24,6 +24,7 @@ import {
   DownloadIcon,
   LinkIcon,
   PlayIcon,
+  QuestionIcon,
   ThreeBarsIcon,
   TrashIcon,
   UnlinkIcon,
@@ -123,8 +124,12 @@ export function DownloadGroup({
           </p>
 
           {download.downloader === Downloader.Torrent && (
-            <small>
+            <small
+              className="download-group__details-with-article"
+              data-open-article="peers-and-seeds"
+            >
               {lastPacket?.numPeers} peers / {lastPacket?.numSeeds} seeds
+              <QuestionIcon size={12} />
             </small>
           )}
         </>
@@ -137,7 +142,14 @@ export function DownloadGroup({
       return download.status === "seeding" &&
         download.downloader === Downloader.Torrent ? (
         <>
-          <p>{t("seeding")}</p>
+          <p
+            data-open-article="seeding"
+            className="download-group__details-with-article"
+          >
+            {t("seeding")}
+
+            <QuestionIcon />
+          </p>
           {uploadSpeed && <p>{uploadSpeed}/s</p>}
         </>
       ) : (
@@ -175,7 +187,7 @@ export function DownloadGroup({
 
     const deleting = isGameDeleting(game.id);
 
-    if (download?.progress === 1) {
+    if (game.download?.progress === 1) {
       return [
         {
           label: t("install"),
@@ -190,8 +202,8 @@ export function DownloadGroup({
           disabled: deleting,
           icon: <UnlinkIcon />,
           show:
-            download.status === "seeding" &&
-            download.downloader === Downloader.Torrent,
+            game.download?.status === "seeding" &&
+            game.download?.downloader === Downloader.Torrent,
           onClick: () => {
             pauseSeeding(game.shop, game.objectId);
           },
@@ -201,8 +213,8 @@ export function DownloadGroup({
           disabled: deleting,
           icon: <LinkIcon />,
           show:
-            download.status !== "seeding" &&
-            download.downloader === Downloader.Torrent,
+            game.download?.status !== "seeding" &&
+            game.download?.downloader === Downloader.Torrent,
           onClick: () => {
             resumeSeeding(game.shop, game.objectId);
           },
@@ -218,7 +230,7 @@ export function DownloadGroup({
       ];
     }
 
-    if (isGameDownloading || download?.status === "active") {
+    if (isGameDownloading) {
       return [
         {
           label: t("pause"),

src/renderer/src/pages/downloads/downloads.tsx

@@ -8,7 +8,7 @@ import "./downloads.scss";
 import { DeleteGameModal } from "./delete-game-modal";
 import { DownloadGroup } from "./download-group";
 import type { GameShop, LibraryGame, SeedingStatus } from "@types";
-import { orderBy, sortBy } from "lodash-es";
+import { orderBy } from "lodash-es";
 import { ArrowDownIcon } from "@primer/octicons-react";
 
 export default function Downloads() {
@@ -58,24 +58,24 @@ export default function Downloads() {
       complete: [],
     };
 
-    const result = sortBy(library, (game) => game.download?.timestamp).reduce(
-      (prev, next) => {
-        /* Game has been manually added to the library or has been canceled */
-        if (!next.download?.status || next.download?.status === "removed")
-          return prev;
+    const result = orderBy(
+      library,
+      (game) => game.download?.timestamp,
+      "desc"
+    ).reduce((prev, next) => {
+      /* Game has been manually added to the library */
+      if (!next.download) return prev;
 
-        /* Is downloading */
-        if (lastPacket?.gameId === next.id)
-          return { ...prev, downloading: [...prev.downloading, next] };
+      /* Is downloading */
+      if (lastPacket?.gameId === next.id)
+        return { ...prev, downloading: [...prev.downloading, next] };
 
-        /* Is either queued or paused */
-        if (next.download.queued || next.download?.status === "paused")
-          return { ...prev, queued: [...prev.queued, next] };
+      /* Is either queued or paused */
+      if (next.download.queued || next.download?.status === "paused")
+        return { ...prev, queued: [...prev.queued, next] };
 
-        return { ...prev, complete: [...prev.complete, next] };
-      },
-      initialValue
-    );
+      return { ...prev, complete: [...prev.complete, next] };
+    }, initialValue);
 
     const queued = orderBy(result.queued, (game) => game.download?.timestamp, [
       "desc",

src/renderer/src/pages/settings/aparence/components/theme-actions.tsx

@@ -67,7 +67,7 @@ export const ThemeActions = ({
             onClick={() => setAddThemeModalVisible(true)}
           >
             <PlusIcon />
-            {t("add_theme")}
+            {t("create_theme")}
           </Button>
         </div>
       </div>

src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx

@@ -56,8 +56,8 @@ export const AddThemeModal = ({
   return (
     <Modal
       visible={visible}
-      title={t("add_theme_modal_title")}
-      description={t("add_theme_modal_description")}
+      title={t("create_theme_modal_title")}
+      description={t("create_theme_modal_description")}
       onClose={onClose}
     >
       <div className="add-theme-modal__container">
@@ -72,7 +72,7 @@ export const AddThemeModal = ({
         />
 
         <Button theme="primary" onClick={handleSubmit}>
-          {t("add_theme")}
+          {t("create_theme")}
         </Button>
       </div>
     </Modal>