feat: adding link direct from sources

hydralauncher · Dec 20, 2024 · d3450c5 · d3450c5
1 parent 3af0ae9
commit d3450c5
Show file tree

Hide file tree

Showing 11 changed files with 265 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -62,11 +62,13 @@
     "lodash-es": "^4.17.21",
     "parse-torrent": "^11.0.17",
     "piscina": "^4.7.0",
+    "rc-virtual-list": "^3.16.1",
     "react-hook-form": "^7.53.0",
     "react-i18next": "^14.1.0",
     "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
+    "react-virtualized": "^9.22.5",
     "sound-play": "^1.1.0",
     "sudo-prompt": "^9.2.1",
     "tar": "^7.4.3",

diff --git a/src/main/events/index.ts b/src/main/events/index.ts
@@ -8,6 +8,8 @@ import "./catalogue/get-random-game";
 import "./catalogue/search-games";
 import "./catalogue/get-game-stats";
 import "./catalogue/get-trending-games";
+import "./catalogue/get-publishers";
+import "./catalogue/get-developers";
 import "./hardware/get-disk-free-space";
 import "./library/add-game-to-library";
 import "./library/create-game-shortcut";

diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -65,6 +65,8 @@ contextBridge.exposeInMainWorld("electron", {
         listener
       );
   },
+  getPublishers: () => ipcRenderer.invoke("getPublishers"),
+  getDevelopers: () => ipcRenderer.invoke("getDevelopers"),
 
   /* User preferences */
   getUserPreferences: () => ipcRenderer.invoke("getUserPreferences"),

diff --git a/src/renderer/src/components/badge/badge.tsx b/src/renderer/src/components/badge/badge.tsx
@@ -7,9 +7,5 @@ export interface BadgeProps {
 }
 
 export function Badge({ children }: BadgeProps) {
-  return (
-    <div className="badge">
-      <span>{children}</span>
-    </div>
-  );
+  return <div className="badge">{children}</div>;
 }
diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.css.ts b/src/renderer/src/components/checkbox-field/checkbox-field.css.ts
@@ -25,6 +25,7 @@ export const checkbox = recipe({
     border: `solid 1px ${vars.color.border}`,
     minWidth: "20px",
     minHeight: "20px",
+    color: vars.color.darkBackground,
     ":hover": {
       borderColor: "rgba(255, 255, 255, 0.5)",
     },

diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts
@@ -68,6 +68,8 @@ declare global {
       shop: GameShop,
       cb: (achievements: GameAchievement[]) => void
     ) => () => Electron.IpcRenderer;
+    getPublishers: () => Promise<string[]>;
+    getDevelopers: () => Promise<string[]>;
 
     /* Library */
     addGameToLibrary: (

diff --git a/src/renderer/src/features/catalogue-search.ts b/src/renderer/src/features/catalogue-search.ts
@@ -34,4 +34,4 @@ export const catalogueSearchSlice = createSlice({
   },
 });
 
-export const { setSearch } = catalogueSearchSlice.actions;
+export const { setSearch, clearSearch } = catalogueSearchSlice.actions;
diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx
@@ -20,6 +20,14 @@ import { setSearch } from "@renderer/features";
 import { useTranslation } from "react-i18next";
 import { steamUserTags } from "./steam-user-tags";
 
+const filterCategoryColors = {
+  genres: "hsl(262deg 50% 47%)",
+  tags: "hsl(95deg 50% 20%)",
+  downloadSourceFingerprints: "hsl(27deg 50% 40%)",
+  developers: "hsl(340deg 50% 46%)",
+  publishers: "hsl(200deg 50% 30%)",
+};
+
 export default function Catalogue() {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -34,6 +42,8 @@ export default function Catalogue() {
 
   const [downloadSources, setDownloadSources] = useState<DownloadSource[]>([]);
   const [games, setGames] = useState<any[]>([]);
+  const [publishers, setPublishers] = useState<string[]>([]);
+  const [developers, setDevelopers] = useState<string[]>([]);
 
   const filters = useAppSelector((state) => state.catalogueSearch.value);
 
@@ -59,6 +69,16 @@ export default function Catalogue() {
     });
   }, [filters]);
 
+  useEffect(() => {
+    window.electron.getDevelopers().then((developers) => {
+      setDevelopers(developers);
+    });
+
+    window.electron.getPublishers().then((publishers) => {
+      setPublishers(publishers);
+    });
+  }, []);
+
   const gamesWithRepacks = useMemo(() => {
     return games.map((game) => {
       const repacks = getRepacksForObjectId(game.objectId);
@@ -148,13 +168,50 @@ export default function Catalogue() {
         }}
       >
         <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+          {filters.genres.map((genre) => (
+            <Badge key={genre}>
+              <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+                <div
+                  style={{
+                    width: 10,
+                    height: 10,
+                    backgroundColor: filterCategoryColors.genres,
+                    borderRadius: "50%",
+                  }}
+                />
+
+                {genre}
+              </div>
+            </Badge>
+          ))}
+
+          {filters.tags.map((tag) => (
+            <Badge key={tag}>
+              <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+                {tag}
+              </div>
+            </Badge>
+          ))}
+
           {filters.downloadSourceFingerprints.map((fingerprint) => (
             <Badge key={fingerprint}>
-              {
-                downloadSources.find(
-                  (source) => source.fingerprint === fingerprint
-                )?.name
-              }
+              <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+                <div
+                  style={{
+                    width: 10,
+                    height: 10,
+                    backgroundColor:
+                      filterCategoryColors.downloadSourceFingerprints,
+                    borderRadius: "50%",
+                  }}
+                />
+
+                {
+                  downloadSources.find(
+                    (source) => source.fingerprint === fingerprint
+                  )?.name
+                }
+              </div>
             </Badge>
           ))}
         </div>
@@ -248,6 +305,7 @@ export default function Catalogue() {
           <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
             <FilterSection
               title="Genres"
+              color={filterCategoryColors.genres}
               onSelect={(value) => {
                 if (filters.genres.includes(value)) {
                   dispatch(
@@ -300,6 +358,7 @@ export default function Catalogue() {
 
             <FilterSection
               title="User tags"
+              color={filterCategoryColors.tags}
               onSelect={(value) => {
                 if (filters.tags.includes(value)) {
                   dispatch(
@@ -322,6 +381,7 @@ export default function Catalogue() {
 
             <FilterSection
               title="Download sources"
+              color={filterCategoryColors.downloadSourceFingerprints}
               onSelect={(value) => {
                 if (filters.downloadSourceFingerprints.includes(value)) {
                   dispatch(
@@ -351,6 +411,56 @@ export default function Catalogue() {
                 ),
               }))}
             />
+
+            <FilterSection
+              title="Developers"
+              color={filterCategoryColors.developers}
+              onSelect={(value) => {
+                if (filters.developers.includes(value)) {
+                  dispatch(
+                    setSearch({
+                      developers: filters.developers.filter(
+                        (developer) => developer !== value
+                      ),
+                    })
+                  );
+                } else {
+                  dispatch(
+                    setSearch({ developers: [...filters.developers, value] })
+                  );
+                }
+              }}
+              items={developers.map((developer) => ({
+                label: developer,
+                value: developer,
+                checked: filters.developers.includes(developer),
+              }))}
+            />
+
+            <FilterSection
+              title="Publishers"
+              color={filterCategoryColors.publishers}
+              onSelect={(value) => {
+                if (filters.publishers.includes(value)) {
+                  dispatch(
+                    setSearch({
+                      publishers: filters.publishers.filter(
+                        (publisher) => publisher !== value
+                      ),
+                    })
+                  );
+                } else {
+                  dispatch(
+                    setSearch({ publishers: [...filters.publishers, value] })
+                  );
+                }
+              }}
+              items={publishers.map((publisher) => ({
+                label: publisher,
+                value: publisher,
+                checked: filters.publishers.includes(publisher),
+              }))}
+            />
           </div>
         </div>
       </div>

diff --git a/src/renderer/src/pages/catalogue/filter-section.tsx b/src/renderer/src/pages/catalogue/filter-section.tsx
@@ -2,6 +2,8 @@ import { CheckboxField, TextField } from "@renderer/components";
 import { useFormat } from "@renderer/hooks";
 import { useCallback, useMemo, useState } from "react";
 
+import List from "rc-virtual-list";
+
 export interface FilterSectionProps<T extends string | number> {
   title: string;
   items: {
@@ -10,11 +12,13 @@ export interface FilterSectionProps<T extends string | number> {
     checked: boolean;
   }[];
   onSelect: (value: T) => void;
+  color: string;
 }
 
 export function FilterSection<T extends string | number>({
   title,
   items,
+  color,
   onSelect,
 }: FilterSectionProps<T>) {
   const [search, setSearch] = useState("");
@@ -37,15 +41,25 @@ export function FilterSection<T extends string | number>({
 
   return (
     <div>
-      <h3
-        style={{
-          fontSize: 16,
-          fontWeight: 500,
-          color: "#fff",
-        }}
-      >
-        {title}
-      </h3>
+      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            backgroundColor: color,
+            borderRadius: "50%",
+          }}
+        />
+        <h3
+          style={{
+            fontSize: 16,
+            fontWeight: 500,
+            color: "#fff",
+          }}
+        >
+          {title}
+        </h3>
+      </div>
 
       <span style={{ fontSize: 12, marginBottom: 12, display: "block" }}>
         {formatNumber(items.length)} disponíveis
@@ -59,25 +73,31 @@ export function FilterSection<T extends string | number>({
         theme="dark"
       />
 
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: 8,
-          overflowY: "auto",
-          maxHeight: 28 * 10,
+      <List
+        data={filteredItems}
+        height={28 * 10}
+        itemHeight={28}
+        itemKey="value"
+        styles={{
+          verticalScrollBar: {
+            backgroundColor: "rgba(255, 255, 255, 0.03)",
+          },
+          verticalScrollBarThumb: {
+            backgroundColor: "rgba(255, 255, 255, 0.08)",
+            borderRadius: "24px",
+          },
         }}
       >
-        {filteredItems.map((item) => (
-          <div key={item.value}>
+        {(item) => (
+          <div key={item.value} style={{ height: 28, maxHeight: 28 }}>
             <CheckboxField
               label={item.label}
               checked={item.checked}
               onChange={() => onSelect(item.value)}
             />
           </div>
-        ))}
-      </div>
+        )}
+      </List>
     </div>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,4 @@ export const catalogueSearchSlice = createSlice({ @@
       },
     });
-    export const { setSearch } = catalogueSearchSlice.actions;
+    export const { setSearch, clearSearch } = catalogueSearchSlice.actions;