Add a button to scroll to current time marker

Author: hasparus

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

@@ -97,14 +97,18 @@ export function ResetFiltersButton({
 }) {
   const hasFilters = Object.values(filters).flat().length > 0
 
+  if (!hasFilters) {
+    return null
+  }
+
   return (
     <Button
       variant="tertiary"
       title="Reset filters"
       onClick={onReset}
       disabled={!hasFilters}
       className={clsx(
-        "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",
+        "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",
         className,
       )}
     >

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

@@ -18,6 +18,7 @@ import {
 } from "./filters"
 import { formatBlockTime } from "./format-block-time"
 import { useCurrentTimeMarker } from "./use-current-time-marker"
+import { Button } from "@/app/conf/_design-system/button"
 
 export interface FiltersConfig
   extends Partial<
@@ -139,23 +140,32 @@ export function ScheduleList({
   const firstDayIsDayZero = Object.keys(firstDay).length < 3
   const startIndex = firstDayIsDayZero ? 0 : 1
 
-  const getTimeMarker = useCurrentTimeMarker()
+  const { getTimeMarker } = useCurrentTimeMarker()
 
   return (
     <>
       <div className="flex justify-between gap-1 max-lg:flex-col">
         <BookmarkOnSched year={year} />
-        <ResetFiltersButton
-          filters={filtersState}
-          onReset={() =>
-            setFiltersState(
-              FilterStates.initial(
-                Object.keys(filterFields) as (keyof ScheduleSession)[],
-              ),
-            )
-          }
-          className="max-lg:mb-4 max-lg:w-fit max-lg:self-end"
-        />
+        <div className="flex gap-2">
+          <Button
+            href="#current-time-marker"
+            variant="tertiary"
+            className="hidden 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 [body:has(#current-time-marker)_&]:flex"
+          >
+            Scroll to current block
+          </Button>
+          <ResetFiltersButton
+            filters={filtersState}
+            onReset={() =>
+              setFiltersState(
+                FilterStates.initial(
+                  Object.keys(filterFields) as (keyof ScheduleSession)[],
+                ),
+              )
+            }
+            className="max-lg:mb-4 max-lg:w-fit max-lg:self-end"
+          />
+        </div>
       </div>
       {showFilter && (
         <Filters

src/app/conf/2025/schedule/_components/use-current-time-marker.ts

@@ -41,5 +41,5 @@ export function useCurrentTimeMarker() {
     }
   }
 
-  return getTimeMarker
+  return { getTimeMarker }
 }

src/app/conf/_design-system/anchor.tsx

@@ -26,7 +26,16 @@ export const Anchor = forwardRef(function Anchor(
   return isInternal(props) ? (
     <NextLink {...props} ref={ref} />
   ) : (
-    <a ref={ref} rel="noopener noreferrer" target="_blank" {...props} />
+    <a
+      ref={ref}
+      {...(!props.href.startsWith("#")
+        ? {
+            rel: "noopener noreferrer",
+            target: "_blank",
+          }
+        : {})}
+      {...props}
+    />
   )
 }) as (props: AnchorProps) => ReactElement