feat: adding file verification message

src/renderer/src/components/bottom-panel/bottom-panel.tsx

@@ -39,7 +39,10 @@ export function BottomPanel() {
         });
 
       if (lastPacket?.isDownloadingMetadata)
-        return t("downloading_metadata", { title: lastPacket?.game.title });
+        return t("downloading_metadata", {
+          title: lastPacket?.game.title,
+          percentage: progress,
+        });
 
       if (!eta) {
         return t("calculating_eta", {

src/renderer/src/components/sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -14,6 +14,7 @@ import { buildGameDetailsPath } from "@renderer/helpers";
 
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { SidebarProfile } from "./sidebar-profile";
+import { sortBy } from "lodash-es";
 
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
@@ -35,6 +36,10 @@ export function Sidebar() {
 
   const location = useLocation();
 
+  const sortedLibrary = useMemo(() => {
+    return sortBy(library, (game) => game.title);
+  }, [library]);
+
   const { lastPacket, progress } = useDownload();
 
   const { showWarningToast } = useToast();
@@ -43,7 +48,7 @@ export function Sidebar() {
     updateLibrary();
   }, [lastPacket?.game.id, updateLibrary]);
 
-  const isDownloading = library.some(
+  const isDownloading = sortedLibrary.some(
     (game) => game.status === "active" && game.progress !== 1
   );
 
@@ -63,7 +68,7 @@ export function Sidebar() {
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     setFilteredLibrary(
-      library.filter((game) =>
+      sortedLibrary.filter((game) =>
         game.title
           .toLowerCase()
           .includes(event.target.value.toLocaleLowerCase())
@@ -72,8 +77,8 @@ export function Sidebar() {
   };
 
   useEffect(() => {
-    setFilteredLibrary(library);
-  }, [library]);
+    setFilteredLibrary(sortedLibrary);
+  }, [sortedLibrary]);
 
   useEffect(() => {
     window.onmousemove = (event: MouseEvent) => {

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

@@ -85,7 +85,7 @@ export function useDownload() {
 
   return {
     downloadSpeed: `${formatBytes(lastPacket?.downloadSpeed ?? 0)}/s`,
-    progress: formatDownloadProgress(lastPacket?.game.progress),
+    progress: formatDownloadProgress(lastPacket?.progress ?? 0),
     lastPacket,
     eta: getETA(),
     startDownload,

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

@@ -67,6 +67,19 @@ export function DownloadGroup({
     }
 
     if (isGameDownloading) {
+      if (lastPacket?.isDownloadingMetadata) {
+        return <p>{t("downloading_metadata")}</p>;
+      }
+
+      if (lastPacket?.isCheckingFiles) {
+        return (
+          <>
+            <p>{progress}</p>
+            <p>{t("checking_files")}</p>
+          </>
+        );
+      }
+
       return (
         <>
           <p>{progress}</p>