Gray out passed days, scroll to current day by disabling history restoration in History API

public/site.webmanifest

@@ -13,7 +13,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
+    "theme_color": "#020817",
-    "background_color": "#ffffff",
+    "background_color": "#020817",
     "display": "standalone"
 }

src/pages/[group].tsx

@@ -7,6 +7,8 @@ import { NavBar } from '@/widgets/navbar'
 import { LastUpdateAt } from '@/entities/last-update-at'
 import { groups } from '@/shared/data/groups'
 import crypto from 'crypto'
+import React from 'react'
+import { getDayOfWeek } from '@/shared/utils'
 
 type PageProps = NextSerialized<{
   schedule: Day[]
@@ -16,6 +18,25 @@ type PageProps = NextSerialized<{
 export default function HomePage(props: PageProps) {
   const { schedule, parsedAt } = nextDeserializer(props)
 
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if ('scrollRestoration' in history) {
+        history.scrollRestoration = 'manual'
+      }
+      const interval = setInterval(async () => {
+        const today = getDayOfWeek(new Date())
+        const todayBlock = document.getElementById(today)
+        if (todayBlock) {
+          const GAP = 48
+          const HEADER_HEIGHT = 64
+          window.scrollTo({ top: todayBlock.offsetTop - GAP - HEADER_HEIGHT })
+          clearInterval(interval)
+        }
+        await new Promise(resolve => setTimeout(resolve, 100))
+      })
+    }
+  }, [schedule])
+
   return (
     <>
       <NavBar />

src/shared/styles/globals.css

@@ -33,6 +33,8 @@
     --ring: 222.2 84% 4.9%;
  
     --radius: 0.5rem;
+
+    --grayed-out: 214.3 31.8% 93%;
   }
  
   .dark {
@@ -63,6 +65,8 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+
+    --grayed-out: 217.2 32.6% 10%;
   }
 }
  

src/shared/utils.ts

@@ -4,3 +4,16 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function getDayOfWeek(date: Date): 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday' {
+  const weekDays = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday'
+  ] as const
+  return weekDays[date.getDay()] 
+}

src/widgets/navbar/index.tsx

@@ -37,7 +37,7 @@ export function NavBar() {
   }, [theme])
 
   return (
-    <header className="w-full p-2">
+    <header className="sticky top-0 w-full p-2 bg-background z-[1] pb-0 mb-2 shadow-header">
       <nav className={cx('rounded-lg p-2 w-full flex justify-between', { 'bg-slate-200': theme === 'light', 'bg-slate-900': theme === 'dark' })} ref={navRef}>
         <ul className="flex gap-2">
           <NavBarItem url="/ps7">ПС-7</NavBarItem>

src/widgets/schedule/day.tsx

@@ -1,5 +1,7 @@
 import type { Day as DayType } from '@/shared/model/day'
+import { getDayOfWeek } from '@/shared/utils'
 import { Lesson } from '@/widgets/schedule/lesson'
+import { cx } from 'class-variance-authority'
 
 export function Day({ day }: {
   day: DayType
@@ -17,10 +19,14 @@ export function Day({ day }: {
   const longNames = day.lessons
     .some(lesson => 'subject' in lesson && lesson.subject.length > 20)
 
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const dayPassed = day.date.getTime() < today.getTime()
+
   return (
     <div className="flex flex-col gap-3 md:gap-5">
-      <h1 className="scroll-m-20 text-2xl md:text-4xl font-extrabold tracking-tight lg:text-5xl">
+      <h1 className={cx('scroll-m-20 text-2xl md:text-4xl font-extrabold tracking-tight lg:text-5xl', { 'text-[hsl(var(--grayed-out))]': dayPassed })} id={getDayOfWeek(day.date)}>
-        {dayOfWeek} <span className='text-border ml-3'>{Intl.DateTimeFormat('ru-RU', {
+        {dayOfWeek} <span className={cx('ml-3', { 'text-border': !dayPassed })}>{Intl.DateTimeFormat('ru-RU', {
           day: 'numeric',
           month: 'long',
           // year: 'numeric'

tailwind.config.js

@@ -70,6 +70,9 @@ module.exports = {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
+      boxShadow: {
+        'header': '0 0.5rem 10px 0 hsl(var(--background))'
+      },
     },
   },
   plugins: [require('tailwindcss-animate'), require('tailwind-scrollbar-hide')],