Add "closed" sort option

web/components/contract-card.tsx

@@ -150,7 +150,8 @@ function AbbrContractDetails(props: {
         ) : showCloseTime ? (
           <Row className="gap-1">
             <ClockIcon className="h-5 w-5" />
-            Closes {fromNow(closeTime || 0)}
+            {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
+            {fromNow(closeTime || 0)}
           </Row>
         ) : (
           <Row className="gap-1">
@@ -312,7 +313,7 @@ function EditableCloseDate(props: {
             className="btn btn-xs btn-ghost"
             onClick={() => setIsEditingCloseTime(true)}
           >
-            <PencilIcon className="inline h-4 w-4 mr-2" /> Edit
+            <PencilIcon className="mr-2 inline h-4 w-4" /> Edit
           </button>
         ))}
     </>

web/components/contracts-list.tsx

@@ -229,11 +229,13 @@ export function SearchableGrid(props: {
     )
   } else if (sort === 'oldest') {
     matches.sort((a, b) => a.createdTime - b.createdTime)
-  } else if (sort === 'close-date') {
+  } else if (sort === 'close-date' || sort === 'closed') {
     matches = _.sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
     matches = _.sortBy(matches, (contract) => contract.closeTime)
-    // Hide contracts that have already closed
+    const hideClosed = sort === 'closed'
-    matches = matches.filter(({ closeTime }) => (closeTime || 0) > Date.now())
+    matches = matches.filter(
+      ({ closeTime }) => closeTime && closeTime > Date.now() !== hideClosed
+    )
   } else if (sort === 'most-traded') {
     matches.sort(
       (a, b) => contractMetrics(b).truePool - contractMetrics(a).truePool
@@ -272,6 +274,7 @@ export function SearchableGrid(props: {
           <option value="most-traded">Most traded</option>
           <option value="24-hour-vol">24h volume</option>
           <option value="close-date">Closing soon</option>
+          <option value="closed">Closed</option>
           <option value="newest">Newest</option>
           <option value="oldest">Oldest</option>
 
@@ -289,7 +292,7 @@ export function SearchableGrid(props: {
       ) : (
         <ContractsGrid
           contracts={matches}
-          showCloseTime={sort == 'close-date'}
+          showCloseTime={['close-date', 'closed'].includes(sort)}
         />
       )}
     </div>

web/hooks/use-sort-and-query-params.tsx

@@ -10,6 +10,7 @@ export type Sort =
   | 'most-traded'
   | '24-hour-vol'
   | 'close-date'
+  | 'closed'
   | 'resolved'
   | 'all'