Restore Market Filter with Custom Expression Parser

package.json

@@ -49,7 +49,6 @@
         "fast-json-stable-stringify": "^2.1.0",
         "file-loader": "^6.2.0",
         "file-replace-loader": "^1.4.2",
-        "filtrex": "^3.1.0",
         "glob": "^11.0.1",
         "globals": "^16.0.0",
         "html-loader": "^5.1.0",

src/lib/components/filter/filter_creator.ts

@@ -1,4 +1,4 @@
-import {css, html, HTMLTemplateResult, nothing} from 'lit';
+import {css, html, nothing} from 'lit';
 import {styleMap} from 'lit-html/directives/style-map.js';
 
 import {state, query} from 'lit/decorators.js';

src/lib/components/market/react/filter_panel.ts

@@ -0,0 +1,61 @@
+import {css, html, nothing, HTMLTemplateResult} from 'lit';
+import {CustomElement, InjectBefore, InjectionMode} from '../../injectors';
+import {FloatElement} from '../../custom';
+import {isReactSteamMarket} from '../mode';
+
+import '../../filter/filter_container';
+
+/**
+ * Steam Market Beta equivalent of {@link UtilityBelt}.
+ */
+@CustomElement()
+@InjectBefore(
+    'div:has(> [style*="grid-columns:repeat(auto-fill, minmax(260px"])',
+    InjectionMode.CONTINUOUS,
+    isReactSteamMarket
+)
+export class BetaFilterPanel extends FloatElement {
+    static styles = [
+        ...FloatElement.styles,
+        css`
+            .panel {
+                margin-bottom: 16px;
+                padding: 16px;
+                background-color: rgba(0, 0, 0, 0.25);
+                border: 1px solid rgba(255, 255, 255, 0.06);
+                border-radius: 8px;
+                color: #c7d5e0;
+                font-family: 'Motiva Sans', sans-serif;
+            }
+
+            .panel-title {
+                font-family: 'Motiva Sans', sans-serif;
+                font-size: 14px;
+                font-weight: 600;
+                letter-spacing: 0.04em;
+                text-transform: uppercase;
+                color: #ebebeb;
+                margin: 0 0 12px;
+            }
+        `,
+    ];
+
+    private get key(): string {
+        return marketHashName() ?? '';
+    }
+
+    protected render(): HTMLTemplateResult | typeof nothing {
+        if (!this.key) return nothing;
+        return html`
+            <div class="panel">
+                <h3 class="panel-title">CSFloat Filters</h3>
+                <csfloat-filter-container .key="${this.key}"></csfloat-filter-container>
+            </div>
+        `;
+    }
+}
+
+/** Use the title of the page to get the market hash name */
+function marketHashName(): string | undefined {
+    return document.title.match(/^(.+?) - Steam Community Market$/)?.[1] ?? undefined;
+}

src/lib/components/market/react/listing.ts

@@ -1,10 +1,13 @@
 import {css, nothing} from 'lit';
+import type {Subscription} from 'rxjs';
 
 import {ItemInfo} from '../../../bridge/handlers/fetch_inspect_info';
 import {FloatElement} from '../../custom';
 import {CustomElement, InjectAppend, InjectionMode} from '../../injectors';
 import {isReactSteamMarket} from '../mode';
 import {gFloatFetcher} from '../../../services/float_fetcher';
+import {gFilterService} from '../../../services/filter';
+import {pickTextColour} from '../../../utils/colours';
 import {BetaListingRank} from './rank';
 import {BetaListingSeedInfo} from './seed_info';
 
@@ -23,6 +26,7 @@ import type {MarketListing, MarketListingProps} from './types';
 export class BetaListingEnhancer extends FloatElement {
     private rankInjected = false;
     private seedInfoInjected = false;
+    private filterSubscription?: Subscription;
 
     static styles = [
         css`
@@ -84,6 +88,15 @@ export class BetaListingEnhancer extends FloatElement {
         return Number(rawFloat);
     }
 
+    get convertedPrice(): number | undefined {
+        const listing = this.listing;
+        if (!listing || !listing.unPrice) {
+            return;
+        }
+
+        return (listing.unPrice + listing.unFee) / 100;
+    }
+
     connectedCallback(): void {
         super.connectedCallback();
 
@@ -94,6 +107,8 @@ export class BetaListingEnhancer extends FloatElement {
 
     disconnectedCallback(): void {
         super.disconnectedCallback();
+        this.filterSubscription?.unsubscribe();
+        this.filterSubscription = undefined;
     }
 
     protected render(): typeof nothing {
@@ -112,6 +127,18 @@ export class BetaListingEnhancer extends FloatElement {
 
         this.injectRank(info);
         this.injectSeedInfo(info);
+        this.applyFilterColour(info);
+    }
+
+    private applyFilterColour(info: ItemInfo): void {
+        this.filterSubscription?.unsubscribe();
+        this.filterSubscription = gFilterService.onUpdate$.subscribe(() => {
+            if (!this.isConnected) return;
+
+            const colour = gFilterService.matchColour(info, this.convertedPrice) || '';
+            this.card.style.backgroundColor = colour;
+            this.card.style.color = colour ? pickTextColour(colour, '#8F98A0', '#484848') : '';
+        });
     }
 
     private injectRank(info: ItemInfo): void {