Sort library

src/locales/en/translation.json

@@ -20,7 +20,13 @@
     "home": "Home",
     "queued": "{{title}} (Queued)",
     "game_has_no_executable": "Game has no executable selected",
-    "sign_in": "Sign in"
+    "sign_in": "Sign in",
+    "sort_by": "Sort by",
+    "latest_added": "Latest added",
+    "alphabetically": "Alphabetically",
+    "last_launched": "Last launched",
+    "number_of_hours": "Number of hours",
+    "installed_or_not": "Installed or not"
   },
   "header": {
     "search": "Search games",

src/locales/pt/translation.json

@@ -20,7 +20,13 @@
     "home": "Início",
     "queued": "{{title}} (Na fila)",
     "game_has_no_executable": "Jogo não possui executável selecionado",
-    "sign_in": "Login"
+    "sign_in": "Login",
+    "sort_by": "Ordenar por",
+    "latest_added": "Adicionado recente",
+    "alphabetically": "Alfabeticamente",
+    "last_launched": "Último jogado",
+    "number_of_hours": "Qtd. de horas jogadas",
+    "installed_or_not": "Instalado ou não"
   },
   "header": {
     "search": "Buscar jogos",

src/renderer/src/components/select-field/select-field.css.ts

@@ -7,7 +7,7 @@ export const select = recipe({
   base: {
     display: "inline-flex",
     transition: "all ease 0.2s",
-    width: "fit-content",
+    width: "100%",
     alignItems: "center",
     borderRadius: "8px",
     border: `1px solid ${vars.color.border}`,

src/renderer/src/components/select-field/select-field.tsx

@@ -34,6 +34,7 @@ export function SelectField({
         <select
           id={id}
           value={value}
+          style={{width: "100%"}}
           className={styles.option}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}

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

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import type { LibraryGame } from "@types";
 
-import { TextField } from "@renderer/components";
+import { SelectField, TextField } from "@renderer/components";
 import { useDownload, useLibrary, useToast } from "@renderer/hooks";
 
 import { routes } from "./routes";
@@ -34,11 +34,43 @@ export function Sidebar() {
     initialSidebarWidth ? Number(initialSidebarWidth) : SIDEBAR_INITIAL_WIDTH
   );
 
+  const [sortParam, setSortParam] = useState<string>("latest_added");
+  const sortParamOptions = [
+    "latest_added",
+    "alphabetically",
+    "last_launched",
+    "number_of_hours",
+    "installed_or_not",
+  ];
+
+  const handleSortParamChange = (e) => {
+    const selectedOption: string = e.target.value;
+    setSortParam(selectedOption);
+  };
+
   const location = useLocation();
 
   const sortedLibrary = useMemo(() => {
-    return sortBy(library, (game) => game.title);
-  }, [library]);
+    switch (sortParam) {
+      case "latest_added":
+        return sortBy(library, (game) => game.createdAt);
+        break;
+      case "alphabetically":
+        return sortBy(library, (game) => game.title);
+        break;
+      case "last_launched":
+        return sortBy(library, (game) => game.lastTimePlayed);
+        break;
+      case "number_of_hours":
+        return sortBy(library, (game) => game.playTimeInMilliseconds);
+        break;
+      case "installed_or_not":
+        return sortBy(library, (game) => game.executablePath !== null);
+        break;
+      default:
+        return sortBy(library, (game) => game.title);
+    }
+  }, [library, sortParam]);
 
   const { lastPacket, progress } = useDownload();
 
@@ -193,6 +225,19 @@ export function Sidebar() {
           <section className={styles.section}>
             <small className={styles.sectionTitle}>{t("my_library")}</small>
 
+
+      <div style={{width: "102%"}}>
+            <SelectField
+              label={t("sort_by")}
+              value={sortParam}
+              onChange={handleSortParamChange}
+              options={sortParamOptions.map((option) => ({
+                key: option,
+                value: option,
+                label: t(option),
+              }))}
+            />
+      </div>
             <TextField
               placeholder={t("filter")}
               onChange={handleFilter}

src/renderer/src/pages/settings/settings-general.tsx

@@ -121,16 +121,19 @@ export function SettingsGeneral() {
         }
       />
 
-      <SelectField
-        label={t("language")}
-        value={form.language}
-        onChange={handleLanguageChange}
-        options={languageOptions.map((language) => ({
-          key: language.option,
-          value: language.option,
-          label: language.nativeName,
-        }))}
-      />
+      <div style={{width: "22%"}}>
+        <SelectField
+          label={t("language")}
+          value={form.language}
+          onChange={handleLanguageChange}
+          options={languageOptions.map((language) => ({
+            key: language.option,
+            value: language.option,
+            label: language.nativeName,
+          }))}
+        />
+      </div>
+
 
       <h3>{t("notifications")}</h3>
       <>