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 ReactFilterPanel 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 getSteamMarketID() || '';
+    }
+
+    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>
+        `;
+    }
+}
+
+/** Example: G18FD03209F033003 */
+function getSteamMarketID(): string | undefined {
+    return location.pathname.split('/').pop();
+}

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

@@ -0,0 +1,49 @@
+import {nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import type {Subscription} from 'rxjs';
+import {CustomElement, InjectIntoScope} from '../../injectors';
+import {FloatElement} from '../../custom';
+import {gFilterService} from '../../../services/filter';
+import {pickTextColour} from '../../../utils/colours';
+import {ReactMarketListingScope, type ReactListingContext} from './listing';
+
+@CustomElement()
+@InjectIntoScope(ReactMarketListingScope, {
+    anchor: ({scope}) => scope,
+})
+export class ReactListingHighlight extends FloatElement {
+    @property({attribute: false}) injectionContext?: ReactListingContext;
+
+    private filterSubscription?: Subscription;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.filterSubscription = gFilterService.onUpdate$.subscribe(() => this.applyColour());
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.filterSubscription?.unsubscribe();
+        this.filterSubscription = undefined;
+    }
+
+    private get convertedPrice(): number | undefined {
+        const listing = this.injectionContext?.listing;
+        if (!listing?.unPrice) return undefined;
+        return (listing.unPrice + listing.unFee) / 100;
+    }
+
+    private applyColour(): void {
+        const card = this.parentElement;
+        const context = this.injectionContext;
+        if (!card || !context) return;
+
+        const colour = gFilterService.matchColour(context.itemInfo, this.convertedPrice) || '';
+        card.style.backgroundColor = colour;
+        card.style.color = colour ? pickTextColour(colour, '#8F98A0', '#484848') : '';
+    }
+
+    protected render() {
+        return nothing;
+    }
+}