From 256153f7c31e58b2edae6d787d69c6b18cfe0aaa Mon Sep 17 00:00:00 2001
From: VityaSchel <59040542+VityaSchel@users.noreply.github.com>
Date: Tue, 3 Oct 2023 18:05:38 +0400
Subject: [PATCH] Gray out passed days, scroll to current day by disabling
 history restoration in History API

---
 public/site.webmanifest       |  4 ++--
 src/pages/[group].tsx         | 21 +++++++++++++++++++++
 src/shared/styles/globals.css |  4 ++++
 src/shared/utils.ts           | 13 +++++++++++++
 src/widgets/navbar/index.tsx  |  2 +-
 src/widgets/schedule/day.tsx  | 10 ++++++++--
 tailwind.config.js            |  3 +++
 7 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/public/site.webmanifest b/public/site.webmanifest
index b20abb7..637156d 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -13,7 +13,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
+    "theme_color": "#020817",
+    "background_color": "#020817",
     "display": "standalone"
 }
diff --git a/src/pages/[group].tsx b/src/pages/[group].tsx
index 2d5fd6e..2a847e4 100644
--- a/src/pages/[group].tsx
+++ b/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 />
diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css
index 6a75725..9adedda 100644
--- a/src/shared/styles/globals.css
+++ b/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%;
   }
 }
  
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index ac006be..de8963d 100644
--- a/src/shared/utils.ts
+++ b/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()] 
+}
\ No newline at end of file
diff --git a/src/widgets/navbar/index.tsx b/src/widgets/navbar/index.tsx
index c0f35c9..e8d6296 100644
--- a/src/widgets/navbar/index.tsx
+++ b/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>
diff --git a/src/widgets/schedule/day.tsx b/src/widgets/schedule/day.tsx
index 156b6b7..420dec9 100644
--- a/src/widgets/schedule/day.tsx
+++ b/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">
-        {dayOfWeek} <span className='text-border ml-3'>{Intl.DateTimeFormat('ru-RU', {
+      <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={cx('ml-3', { 'text-border': !dayPassed })}>{Intl.DateTimeFormat('ru-RU', {
           day: 'numeric',
           month: 'long',
           // year: 'numeric'
diff --git a/tailwind.config.js b/tailwind.config.js
index c74f42e..da29c83 100644
--- a/tailwind.config.js
+++ b/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')],