k1tbyte · k1tbyte · Oct 7, 2025 · Dec 15, 2024 · Dec 19, 2024 · Dec 22, 2024
diff --git a/.idea/scopes/Backend.xml b/.idea/scopes/Backend.xml
diff --git a/SteamOrganizer.Server/Controllers/Steam/WebApiController.cs b/SteamOrganizer.Server/Controllers/Steam/WebApiController.cs
@@ -53,10 +53,10 @@ await parser
     }
 
     [HttpGet]
-    public async Task<PlayerGames?> GetGames(GamesRequest request)
+    public async Task<PlayerGames?> GetGames([FromQuery] GamesRequest request)
     {
         var response = await parser.SetCurrency(request.Currency).GetGames(
-            request.SteamId!.Value,
+            Tools.ToSteamId64(request.SteamId!.Value),
             request.WithDetails
         ).ConfigureAwait(false);
 

diff --git a/SteamOrganizer.Server/Services/SteamParser/Responses/PlayerGames.cs b/SteamOrganizer.Server/Services/SteamParser/Responses/PlayerGames.cs
@@ -8,6 +8,7 @@ public sealed class PlayerGameInfo
     public float Playtime_forever { get; set; }
     public required string Name { get; set; }
     public string? FormattedPrice { get; set; }
+    public int? Price { get; set; }
 }
 
 public sealed class PlayerGames
@@ -32,7 +33,8 @@ public sealed class PlayerGamesResponse
 
 public sealed class GamePrice
 {
-    public decimal Initial { get; set; }
+    public int? Initial { get; set; }
+    public decimal Final { get; set; }
     public string? Formatted { get; set; }
 }
 

diff --git a/SteamOrganizer.Server/Services/SteamParser/SteamParser.cs b/SteamOrganizer.Server/Services/SteamParser/SteamParser.cs
@@ -244,7 +244,7 @@ await Parallel.ForAsync(0, (int)Math.Ceiling(friends.Length / 100f),
 
                     if (details.Data?.Price_overview != null)
                     {
-                        details.Data.Price_overview.Initial /= 100;
+                        details.Data.Price_overview.Final =  (decimal)details.Data.Price_overview.Initial! / 100u;
                     }
                     FormatPrice(games,info, details);
 
@@ -301,13 +301,20 @@ private void FormatPrice(PlayerGames games, PlayerGameInfo gameInfo, GameDetails
     {
         if (details.Data?.Price_overview == null)
         {
-            gameInfo.FormattedPrice = details.Success ? "Free" : "Unknown";
+            if (details.Success)
+            {
+                gameInfo.Price = 0;
+                gameInfo.FormattedPrice = "Free";
+                return;
+            }
+            gameInfo.FormattedPrice = "Unknown";
             return;
         }
 
         var price = details.Data.Price_overview;
-        games.GamesPrice += price.Initial;
-        gameInfo.FormattedPrice = price.Formatted ?? (price.Formatted = _currency.Format(price.Initial));
+        games.GamesPrice += price.Final;
+        gameInfo.Price = price.Initial;
+        gameInfo.FormattedPrice = price.Formatted ?? (price.Formatted = _currency.Format(price.Final));
         games.PaidGames++;
     }
 

diff --git a/SteamOrganizer.Server/SteamOrganizer.Server.csproj b/SteamOrganizer.Server/SteamOrganizer.Server.csproj
@@ -12,4 +12,8 @@
         <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0"/>
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="Cache\" />
+    </ItemGroup>
+
 </Project>
diff --git a/SteamOrganizer.Web/index.html b/SteamOrganizer.Web/index.html
@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="src/main.tsx"></script>
   </body>
 </html>
diff --git a/SteamOrganizer.Web/public/sprites.svg b/SteamOrganizer.Web/public/sprites.svg
diff --git a/SteamOrganizer.Web/src/App.tsx b/SteamOrganizer.Web/src/App.tsx
@@ -1,24 +1,24 @@
-import Accounts from "./pages/Accounts/Accounts.tsx";
-import {MainLayout} from "./layouts/MainLayout.tsx";
-import NotFoundPage from "./pages/NotFoundPage.tsx";
+import Accounts from "./pages/Accounts/Accounts";
+import {MainLayout} from "./layouts/MainLayout";
+import NotFoundPage from "./pages/NotFoundPage";
 import {createBrowserRouter, Navigate, RouterProvider} from 'react-router-dom'
-import Actions from "./pages/Actions.tsx";
-import SignIn from "./pages/SignIn.tsx";
-import Backups from "./pages/Backups/Backups.tsx";
+import Actions from "./pages/Actions";
+import SignIn from "./pages/SignIn";
+import Backups from "./pages/Backups/Backups";
 import {useEffect} from "react";
-import {config, loadConfig} from "./store/config.ts";
-import db from "./services/indexedDb.ts";
+import {config, loadConfig} from "./store/config";
+import db from "@/shared/services/indexedDb";
 import {Defs} from "./defines"
-import {ModalsHost} from "./components/primitives/Modal.tsx";
-import {Profile} from "@/pages/Profile/Profile.tsx";
-import {AuthProvider} from "@/providers/authProvider.tsx";
-import {toast, ToastsHost, ToastVariant} from "@/components/primitives/Toast.tsx";
-import {databaseKey, dbTimestamp, importAccounts, loadAccounts} from "@/store/accounts.ts";
-import {isAuthorized} from "@/services/gAuth.ts";
-import {getLatestBackup, loadBackup, restoreBackup} from "@/store/backups.ts";
-import {decrypt} from "@/services/cryptography.ts";
-import {flagStore} from "@/store/local.tsx";
-import Logo from "@/components/elements/Logo.tsx";
+import {ModalsHost} from "./shared/ui/Modal";
+import {Profile} from "@/pages/Profile/Profile";
+import {AuthProvider} from "@/providers/authProvider";
+import {toast, ToastsHost, ToastVariant} from "@/shared/ui/Toast";
+import {databaseKey, dbTimestamp, importAccounts, loadAccounts} from "@/store/accounts";
+import {isAuthorized} from "@/shared/services/gAuth";
+import {getLatestBackup, loadBackup, restoreBackup} from "@/store/backups";
+import {decrypt} from "@/shared/services/cryptography";
+import {flagStore} from "@/store/local";
+import Logo from "@/components/Logo";
 
 const router = createBrowserRouter([
     {

diff --git a/...mponents/elements/CollectionIndicator.tsx → ...eb/src/components/CollectionIndicator.tsx b/...mponents/elements/CollectionIndicator.tsx → ...eb/src/components/CollectionIndicator.tsx
diff --git a/.../src/components/elements/ConfirmPopup.tsx → ...nizer.Web/src/components/ConfirmPopup.tsx b/.../src/components/elements/ConfirmPopup.tsx → ...nizer.Web/src/components/ConfirmPopup.tsx
@@ -1,16 +1,18 @@
-import {EPlacementX, EPlacementY, type IPopupProps, Popup} from "@/components/primitives/Popup.tsx";
-import {type FC} from "react";
-import Button, {EButtonVariant} from "@/components/primitives/Button.tsx";
+import {type FC, ReactElement} from "react";
+import Button, {EButtonVariant} from "@/shared/ui/Button";
+import {Popup} from "@/shared/ui/Popup/Popup";
+import {EPlacement} from "@/shared/ui/Popup/positioning";
 
-interface IConfirmPopupProps extends IPopupProps {
+interface IConfirmPopupProps {
     text: string;
     onYes?: () => void;
     onNo?: () => void;
+    children: ReactElement;
 }
 
 export const ConfirmPopup: FC<IConfirmPopupProps> = ({ children, text, onYes, onNo }) => {
     return (
-        <Popup alignY={EPlacementY.Bottom} alignX={EPlacementX.Center} offset={{ y: 5, x:0 }} content={ () => (
+        <Popup placement={EPlacement.BottomCenter} offset={{ y: 5, x:0 }} content={ () => (
             <div className="max-w-60 text-wrap text-center py-2">
                 <span>{text}</span>
                 <div className="flex-center gap-5 mt-3">

diff --git a/.../src/components/elements/FieldWrapper.tsx → ...nizer.Web/src/components/FieldWrapper.tsx b/.../src/components/elements/FieldWrapper.tsx → ...nizer.Web/src/components/FieldWrapper.tsx
@@ -1,8 +1,4 @@
 import {cloneElement, FC, forwardRef, ReactElement, type ReactNode, useImperativeHandle, useRef} from "react";
-import clsx from "clsx";
-import Input, {IInputProps} from "@/components/primitives/Input.tsx";
-import {CheckBox} from "@/components/primitives/CheckBox";
-import {config, delayedSaveConfig} from "@/store/config.ts";
 
 export const enum ETitlePosition {
     Top,
@@ -31,7 +27,7 @@ export const FieldWrapper:FC<IFieldWrapperProps> = ({className,title, titlePos,
         <div className={className}>
             {titlePos !== ETitlePosition.Inline &&
                 <div className="flex justify-between mb-0.5 ml-0.5 relative gap-3">
-                    <p className="text-chip text-[13px] font-semibold text-nowrap">{title}</p>
+                    <p className="text-chip text-2xs font-semibold text-nowrap">{title}</p>
                     {titleChildren}
                 </div>
             }

diff --git a/SteamOrganizer.Web/src/components/FilterInput/FilterInput.tsx b/SteamOrganizer.Web/src/components/FilterInput/FilterInput.tsx
@@ -0,0 +1,65 @@
+import {type FC, Fragment, useState} from "react";
+import Input, {type IInputProps} from "@/shared/ui/Input";
+import {Popup} from "@/shared/ui/Popup/Popup";
+import {EPlacement} from "@/shared/ui/Popup/positioning";
+import {ELabelVariant, Label} from "@/shared/ui/Label/Label";
+import {EFilterType, FiltersDefinition, type IFilterCell, IFilterConfig} from "./types";
+import {FlagsFilter, OrderFilter, SearchFilter} from "./Filters";
+import styles from "./Filters.module.css"
+
+interface ISearchInputProps extends IInputProps {
+    filters: FiltersDefinition;
+    config: IFilterConfig;
+    onFilterChanged: () => void;
+}
+
+const filterType = {
+    [EFilterType.Search]: SearchFilter,
+    [EFilterType.Order]: OrderFilter,
+    [EFilterType.Flags]: FlagsFilter
+}
+
+const FilterCell: FC<{items: IFilterCell[], callback: () => void, config: IFilterConfig}> = ({  items, config, callback }) => {
+    return <div>
+        {
+            items.map((item, index) => {
+                const Component = filterType[item.type];
+
+                return <Fragment key={index}>
+                    {item.label && <Label children={item.label} variant={ELabelVariant.Colorful}/>}
+                    {<Component fields={item.fields} config={config} callback={callback}/>}
+                </Fragment>
+            })
+        }
+    </div>
+}
+
+
+export const FilterInput: FC<ISearchInputProps> = ({ onFilterChanged, config, filters, ...props}) => {
+    const [isFocused,setFocused] = useState(undefined)
+
+    const content = <div className={styles.filterInput}>
+        {filters.map((item, index) => {
+            return <FilterCell config={config} items={item} key={index} callback={onFilterChanged}/>
+        })}
+    </div>
+
+
+    return (
+        <Popup content={content} exit={{opacity: 0, translateY: "10px"}}
+               placement={EPlacement.BottomFit} state={isFocused}
+               asToggle={isFocused !== undefined}
+               className={styles.popup}>
+            <Input  defaultValue={config[EFilterType.Search].keyword}
+                    onPointerDown={() => setFocused(undefined)}
+                    onInput={(e) => {
+                        setFocused(false)
+                        config[EFilterType.Search].keyword = e.currentTarget.value;
+                        onFilterChanged();
+                    }}
+                    className={"pr-24 h-full bg-primary placeholder:font-semibold rounded-lg"}
+                    {...props}
+            />
+        </Popup>
+    )
+}
diff --git a/SteamOrganizer.Web/src/components/FilterInput/Filters.module.css b/SteamOrganizer.Web/src/components/FilterInput/Filters.module.css
@@ -0,0 +1,19 @@
+.filterInput {
+    @apply bg-primary mt-2 rounded-lg border-tertiary border p-3 flex flex-wrap gap-8 pointer-events-auto;
+}
+
+.popup {
+    @apply rounded-none rounded-b-lg bg-transparent p-0 flex-x-center gap-3 pointer-events-none;
+}
+
+.searchFilter {
+    @apply flex-x-center flex-wrap bg-accent rounded-lg my-3 gap-y-3;
+}
+
+.flagFilter {
+    @apply w-full justify-between flex-y-center mt-1;
+}
+
+.orderFilter {
+    @apply flex-x-center flex-wrap bg-accent rounded-lg gap-y-3;
+}
diff --git a/SteamOrganizer.Web/src/components/FilterInput/Filters.tsx b/SteamOrganizer.Web/src/components/FilterInput/Filters.tsx
@@ -0,0 +1,69 @@
+import React, {FC, useState} from "react";
+import {RadioButton} from "@/shared/ui/RadioButton/RadioButton";
+import {CheckBox} from "@/shared/ui/CheckBox/CheckBox";
+import {EFilterType, IFilterConfig, IPropField} from "@/components/FilterInput/types";
+import {Icon, SvgIcon} from "@/defines";
+import styles from "./Filters.module.css"
+
+type FilterComponent = FC<{ fields: IPropField[], config: IFilterConfig, callback: () => void }>
+
+const OrderFilter: FilterComponent = ({ fields, config, callback }) => {
+    const node = config[EFilterType.Order];
+
+    return (
+        <>
+            <RadioButton layoutId="order"
+                         initialState={node.by?.[1] ?? 0}
+                         generator={["None", ...fields.map(field => field.name)]}
+                         onStateChanged={(o) => {
+                             node.by = o === 0 ? null : [fields[o - 1].prop, o];
+                             callback();
+                         }}
+                         className={`my-3 ${styles.orderFilter}`}/>
+
+            <RadioButton layoutId="order-dir" generator={["Ascending", "Descending"]}
+                         initialState={node.direction ?? 0}
+                         onStateChanged={(o) => {
+                             node.direction = o;
+                             callback();
+                         }}
+                         className={`w-fit ${styles.orderFilter}`}/>
+        </>
+    )
+}
+
+const FlagsFilter: FilterComponent = ({ fields, config, callback }) => {
+    const node = config[EFilterType.Flags];
+
+    return fields.map((field, index) =>
+        <div key={index} className={styles.flagFilter}>
+            {field.name}
+            <CheckBox checkedSymbol={<SvgIcon icon={Icon.Plus} size={16} /> }
+                      initialState={node[field.prop]}
+                      onStateChanged={(o) => {
+                          node[field.prop] = o
+                          callback();
+                      }} allowIndeterminate={true}/>
+        </div>
+    )
+}
+
+const SearchFilter: FilterComponent = ({ fields, config, callback }) => {
+    const node = config[EFilterType.Search];
+
+    if(fields.length == 1) {
+        return;
+    }
+
+    return (
+        <RadioButton layoutId="search" generator={fields.map(field => field.name)}
+                     initialState={node.by[0]}
+                     onStateChanged={(i) => {
+                         node.by = [i, fields[i].prop];
+                         callback();
+                     }}
+                     className={styles.searchFilter}/>
+    )
+}
+
+export { SearchFilter, OrderFilter, FlagsFilter }
diff --git a/SteamOrganizer.Web/src/components/FilterInput/types.ts b/SteamOrganizer.Web/src/components/FilterInput/types.ts
@@ -0,0 +1,38 @@
+export const enum EFilterType {
+    Search,
+    Order,
+    Flags
+}
+
+
+export interface IPropField {
+    name: string;
+    prop: string;
+}
+
+export interface IFilterCell {
+    label?: string;
+    type: EFilterType;
+    fields: IPropField[];
+}
+
+export type FiltersDefinition = IFilterCell[][]
+
+export const enum EOrderDirection {
+    Ascending = 0,
+    Descending = 1
+}
+
+export interface IFilterConfig {
+    [EFilterType.Search]: {
+        keyword?: string,
+        by: [ number, string]
+    },
+    [EFilterType.Order]?: {
+        by?: [string, number] | null,
+        direction?: EOrderDirection
+    },
+    [EFilterType.Flags]?: {
+        [key: string]: boolean | null
+    }
+}