Improve [Clear Filters] button

Author: hasparus

src/app/conf/2025/schedule/_components/filters.tsx

@@ -1,24 +1,23 @@
 import clsx from "clsx"
 import { useState } from "react"
+import { Combobox } from "@headlessui/react"
+
+import { Tag } from "@/app/conf/_design-system/tag"
+import { Button } from "@/app/conf/_design-system/button"
 
 import CloseIcon from "@/app/conf/2025/pixelarticons/close.svg?svgr"
 import CaretDownIcon from "@/app/conf/2025/pixelarticons/caret-down.svg?svgr"
-import { Combobox } from "@headlessui/react"
-import { Tag } from "@/app/conf/_design-system/tag"
 import { eventsColors } from "../../utils"
-
 type FiltersProps = {
   categories: { name: string; options: string[] }[]
   filterState: Record<string, string[]>
   onFilterChange: (category: string, newSelectedOptions: string[]) => void
-  onReset: () => void
 }
 
 export function Filters({
   categories,
   filterState,
   onFilterChange,
-  onReset,
 }: FiltersProps) {
   return (
     <div className="flex flex-wrap justify-stretch gap-x-2 gap-y-4 pb-10">
@@ -35,33 +34,35 @@ export function Filters({
           className="flex-1"
         />
       ))}
-      {Object.values(filterState).flat().length > 0 && (
-        <div className="relative">
-          <ResetButton onReset={onReset} className="absolute top-[18px]" />
-        </div>
-      )}
     </div>
   )
 }
 
-function ResetButton({
+export function ResetFiltersButton({
   onReset,
   className,
+  filters,
 }: {
+  filters: Record<string, string[]>
   onReset: () => void
   className?: string
 }) {
+  const hasFilters = Object.values(filters).flat().length > 0
+
   return (
-    <button
+    <Button
+      variant="tertiary"
       title="Reset filters"
       onClick={onReset}
+      disabled={!hasFilters}
       className={clsx(
-        "flex h-fit cursor-pointer items-center gap-x-2 bg-neu-100 p-2 text-neu-700 hover:bg-neu-200/80 hover:text-neu-900",
+        "h-fit items-center gap-x-2 bg-neu-100 !p-2 text-neu-700 transition-opacity hover:bg-neu-200/80 hover:text-neu-900 disabled:opacity-0",
         className,
       )}
     >
+      Clear filters
       <CloseIcon className="inline-block size-4" />
-    </button>
+    </Button>
   )
 }
 
@@ -180,14 +181,14 @@ function CheckboxIcon({ checked, ...rest }: CheckboxIconProps) {
           />
         </>
       ) : (
-        <>
+        <g className="[&>path]:fill-neu-0">
           <rect x="2" y="3" width="15" height="15" />
-          <path d="M6 10.3333H7.66667V12H6V10.3333Z" fill="white" />
-          <path d="M7.66667 12H9.33333V13.6667H7.66667V12Z" fill="white" />
-          <path d="M9.33333 10.3333H11V12H9.33333V10.3333Z" fill="white" />
-          <path d="M11 8.66667H12.6667V10.3333H11V8.66667Z" fill="white" />
-          <path d="M12.6667 7H14.3333V8.66667H12.6667V7Z" fill="white" />
-        </>
+          <path d="M6 10.3333H7.66667V12H6V10.3333Z" />
+          <path d="M7.66667 12H9.33333V13.6667H7.66667V12Z" />
+          <path d="M9.33333 10.3333H11V12H9.33333V10.3333Z" />
+          <path d="M11 8.66667H12.6667V10.3333H11V8.66667Z" />
+          <path d="M12.6667 7H14.3333V8.66667H12.6667V7Z" />
+        </g>
       )}
     </svg>
   )

src/app/conf/2025/schedule/_components/schedule-list.tsx

@@ -6,7 +6,7 @@ import { ReactElement, useEffect, useState } from "react"
 import { getEventTitle } from "@/app/conf/2023/utils"
 import { SchedSpeaker } from "@/app/conf/2023/types"
 
-import { Filters } from "./filters"
+import { Filters, ResetFiltersButton } from "./filters"
 import {
   type ScheduleSession,
   CategoryName,
@@ -119,6 +119,19 @@ export function ScheduleList({
 
   return (
     <>
+      <div className="flex justify-between gap-1 max-lg:flex-col">
+        <BookmarkOnSched />
+        <ResetFiltersButton
+          filters={filtersState}
+          onReset={() =>
+            setFiltersState({
+              Audience: [],
+              "Talk category": [],
+              "Event type": [],
+            })
+          }
+        />
+      </div>
       {showFilter && (
         <Filters
           categories={filterCategories}
@@ -129,13 +142,6 @@ export function ScheduleList({
               [category]: newSelectedOptions,
             }))
           }}
-          onReset={() => {
-            setFiltersState({
-              Audience: [],
-              "Talk category": [],
-              "Event type": [],
-            })
-          }}
         />
       )}
       {Object.entries(sessionsState).length === 0 ? (
@@ -270,3 +276,27 @@ function ScheduleSession({
     </a>
   )
 }
+
+function BookmarkOnSched() {
+  return (
+    <a
+      href="https://graphqlconf2024.sched.com"
+      target="_blank"
+      rel="noreferrer"
+      className="mb-8 block w-fit decoration-neu-400 typography-link"
+    >
+      Bookmark sessions & plan your days on Sched
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className="m-1 mb-2 inline-block size-4"
+      >
+        <path
+          d="M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4h2zM11 5H3v16h16v-8h-2v6H5V7h6V5z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  )
+}