sort by filter!

app/(stats)/compositions/[[...range]]/compositions.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { Card } from '@/ui';
-import { useSmallSamplesFilter } from '@/ui/filter/small-samples-filter';
-import { useFactionFilter } from '@/ui/filter/faction-filter';
+import { useSmallSamplesFilter } from '@/ui/params/small-samples-filter';
+import { useFactionFilter } from '@/ui/params/faction-filter';
+import { useSortParam } from '@/ui/params/sort-param';
 import { CompositionTable } from '@/ui/stats/composition-stats';
 
 import type { CompositionData } from '@/lib/stats/module/composition';
@@ -14,6 +15,7 @@ export interface CompositionsProps {
 export const Compositions = ({ data }: CompositionsProps) => {
   const [smallSamples] = useSmallSamplesFilter();
   const [faction] = useFactionFilter();
+  const [sort] = useSortParam();
 
   return (
     <Card inset="headless">
@@ -32,6 +34,7 @@ export const Compositions = ({ data }: CompositionsProps) => {
 
             return true;
           }}
+          sortBy={sort}
         />
       </Card.Body>
     </Card>

app/(stats)/compositions/[[...range]]/page.tsx

@@ -10,14 +10,14 @@ import { fromDateRange } from '@/lib/utils/url.utils';
 import { Caption, Inline, Title } from '@/ui';
 import { Calendar, Rocket, Trophy } from '@/ui/icons';
 
-import { StatsFilter } from '@/ui/stats/stats-filter';
 import { StatsHint } from '@/ui/stats/stats-hint';
 import { setup } from '@/lib/stats';
 import { CompositionData, composition } from '@/lib/stats/module';
 
-import { DateRangeFilter } from '@/ui/filter/date-range-filter';
-import { FactionFilter } from '@/ui/filter/faction-filter';
-import { SmallSamplesFilter } from '@/ui/filter/small-samples-filter';
+import { DateRangeFilter } from '@/ui/params/date-range-filter';
+import { FactionFilter } from '@/ui/params/faction-filter';
+import { SmallSamplesFilter } from '@/ui/params/small-samples-filter';
+import { SortParam } from '@/ui/params/sort-param';
 
 import { Compositions } from './compositions';
 
@@ -103,13 +103,14 @@ const CompositionsPage = async ({ params }: PageProps) => {
           </Inline>
         </Caption>
       </div>
-      <Inline className="gap-4" align="end">
+      <Inline className="gap-2 pb-8 sm:gap-4" align="end">
         <SmallSamplesFilter />
         <DateRangeFilter
           pathname="/compositions"
           defaultValue={toDate(from, to)}
         />
         <FactionFilter />
+        <SortParam />
       </Inline>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
         <div className="col-span-full">

ui/index.ts

@@ -28,6 +28,7 @@ export * from './select';
 export * from './sheet';
 export * from './ship-icon';
 export * from './skeleton';
+export * from './sort-selection';
 export * from './spinner';
 export * from './squad';
 export * from './switch';

ui/params/sort-param.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { SortOptions, SortSelection } from '@/ui/sort-selection';
+import { useParams } from './useParams';
+
+// Hook
+// ---------------
+export const useSortParam = () => {
+  const [filter, setFilter] = useParams(['sort']);
+
+  const setSort = (sortBy: SortOptions) => {
+    setFilter({
+      sort: sortBy !== 'percentile' ? sortBy : null,
+    });
+  };
+
+  return [filter.sort || 'percentile', setSort] as [
+    SortOptions,
+    (sortBy: SortOptions) => void,
+  ];
+};
+
+// Components
+// ---------------
+export const SortParam = () => {
+  const [sort, setSort] = useSortParam();
+  return <SortSelection value={sort} onChange={setSort} />;
+};

ui/sort-selection.tsx

@@ -0,0 +1,34 @@
+import { Select } from './select';
+
+// Props
+// ---------------
+export type SortOptions =
+  | 'percentile'
+  | 'deviation'
+  | 'winrate'
+  | 'frequency'
+  | 'count'
+  | 'score';
+
+export interface SortSelectionProps {
+  value: SortOptions;
+  onChange: (sortBy: SortOptions) => void;
+}
+
+// Component
+// ---------------
+export const SortSelection = ({ value, onChange }: SortSelectionProps) => (
+  <Select
+    size="small"
+    aria-label="Select a value to sort by"
+    value={value}
+    onChange={e => onChange(e.target.value as any)}
+  >
+    <Select.Option value="percentile">By Percentile</Select.Option>
+    <Select.Option value="deviation">By Std. Deviation</Select.Option>
+    <Select.Option value="winrate">By Winrate</Select.Option>
+    <Select.Option value="frequency">By Frequency</Select.Option>
+    <Select.Option value="count">By Count</Select.Option>
+    <Select.Option value="score">By Score</Select.Option>
+  </Select>
+);

ui/stats/composition-stats/composition-stats.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { Card, FactionSelection, Select } from '@/ui';
+import { Card, FactionSelection, SortSelection } from '@/ui';
+import type { SortOptions } from '@/ui';
 
 import { CompositionTable } from './composition-table';
-import type { SortOptions } from './composition-table';
 import type { CompositionStatsType } from './types';
 import { XWSFaction } from '@/lib/types';
 
@@ -26,18 +26,7 @@ export const CompositionStats = ({ value }: CompositionStatsProps) => {
         <Card.Title>Compositions</Card.Title>
         <Card.Actions>
           <FactionSelection value={faction} onChange={setFaction} allowAll />
-          <Select
-            size="small"
-            value={sortBy}
-            onChange={e => setSortBy(e.target.value as any)}
-          >
-            <Select.Option value="percentile">By Percentile</Select.Option>
-            <Select.Option value="deviation">By Std. Deviation</Select.Option>
-            <Select.Option value="winrate">By Winrate</Select.Option>
-            <Select.Option value="frequency">By Frequency</Select.Option>
-            <Select.Option value="count">By Count</Select.Option>
-            <Select.Option value="score">By Score</Select.Option>
-          </Select>
+          <SortSelection value={sortBy} onChange={setSortBy} />
         </Card.Actions>
       </Card.Header>
       <Card.Body>

ui/stats/composition-stats/composition-table.tsx

@@ -3,21 +3,12 @@
 import { Fragment } from 'react';
 
 import { toPercentage } from '@/lib/utils';
+import type { SortOptions } from '@/ui';
 import { Collapsible, FactionIcon, Link, ShipIcon, Table } from '@/ui';
 import { Folder } from '@/ui/icons';
 
 import type { CompositionStatsType } from './types';
 
-// Types
-// ---------------
-export type SortOptions =
-  | 'percentile'
-  | 'deviation'
-  | 'winrate'
-  | 'frequency'
-  | 'count'
-  | 'score';
-
 // Props
 // ---------------
 export interface CompositionTableProps {