feat: Integrate

viewer/app/all/substitution-viewer.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { useState, useMemo, useTransition, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { format, parseISO } from 'date-fns';
-import { RefreshCw } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 
 import { SubstitutionData, ChangeEntry } from '@/lib/types';
 import { Button } from '@/components/ui/button';
@@ -18,14 +16,13 @@ import {
 import { Label } from '@/components/ui/label';
 import TakesPlace from '@/components/own/takes-place';
 import { TeacherAbsenceItem } from '@/components/own/teacher-absence';
+import UpdateStatus from '@/components/own/update-status';
 
 interface SubstitutionViewerProps {
   initialData: SubstitutionData | null;
 }
 
 export default function SubstitutionViewer({ initialData }: SubstitutionViewerProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
   const data = initialData;
   
   const [selectedDate, setSelectedDate] = useState<string>('');
@@ -43,12 +40,6 @@ export default function SubstitutionViewer({ initialData }: SubstitutionViewerPr
 
   const currentDayData = data?.schedule?.[selectedDate];
 
-  const handleRefresh = () => {
-    startTransition(() => {
-      router.refresh();
-    });
-  };
-
   const dates = data ? Object.keys(data.schedule).sort() : [];
 
   if (!data) {
@@ -63,20 +54,7 @@ export default function SubstitutionViewer({ initialData }: SubstitutionViewerPr
   return (
 
       <main className="flex-1 w-full max-w-[1920px] mx-auto p-4 md:p-6 space-y-6">
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-sm text-muted-foreground p-4 rounded-lg border">
-          <div>
-            <span className="font-medium">Poslední aktualizace:</span> {data.status.lastUpdated}
-            <span className="mx-2 hidden sm:inline">•</span>
-            <br className="sm:hidden" />
-            <span >
-              Aktualizace každých {data.status.currentUpdateSchedule < 60 ? `${data.status.currentUpdateSchedule} min` : `${data.status.currentUpdateSchedule / 60} hod`}
-            </span>
-          </div>
-          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isPending} className="w-full sm:w-auto">
-            <RefreshCw className={`h-4 w-4 mr-2 ${isPending ? 'animate-spin' : ''}`} />
-            Aktualizovat
-          </Button>
-        </div>
+        <UpdateStatus data={data} />
 
         <div className="max-w-md">
           <Label htmlFor="date-select" className="mb-2 block">Datum</Label>

viewer/app/layout.tsx

@@ -3,10 +3,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-
-import { AlertTriangle, InfoIcon, Menu } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
+import { SiteHeader } from "@/components/site-header";
+import { InfoIcon } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
 const geistSans = Geist({
@@ -40,32 +38,17 @@ export default function RootLayout({
           disableTransitionOnChange
         >
             <div className="flex flex-col min-h-screen">
-              <header className="sticky top-0 z-20 flex items-center justify-between px-4 py-3 border-b bg-background">
-                <div className="flex items-center gap-3">
-                  <Button variant="ghost" size="icon" className="md:hidden">
-                    <Menu className="h-5 w-5" />
-                  </Button>
-                  <h1 className="text-lg font-semibold">
-                    Mimořádný rozvrh
-                  </h1>
-                </div>
-                <div className="flex items-center gap-2">
-                   <Button variant="ghost" size="icon" title="Nahlásit chybu">
-                    <AlertTriangle className="h-5 w-5 text-amber-500" />
-                    <span className="sr-only">Nahlásit chybu</span>
-                  </Button>
-                </div>
-              </header>
-            <div className="w-full flex justify-center pt-8">
-              <Alert className="max-w-100">
-                <InfoIcon />
-                <AlertTitle>Pozor!</AlertTitle>
-                <AlertDescription>
-                  Tento web není oficiální a není jakkoliv spojen se SPŠE Ječná.
-                </AlertDescription>
-              </Alert>
-            </div>
+              <SiteHeader />
               {children}
+              <div className="w-full flex justify-center pt-4 pb-8">
+                <Alert className="max-w-100 mx-auto">
+                  <InfoIcon />
+                  <AlertTitle>Pozor!</AlertTitle>
+                  <AlertDescription>
+                    Tento web není oficiální a není jakkoliv spojen se SPŠE Ječná.
+                  </AlertDescription>
+                </Alert>
+              </div>
               <footer className="text-center text-xs text-white/70 pb-4">
                 &copy; 2026{" "}
                 <a href="https://jzitnik.dev" target="_blank" className="underline hover:text-white/90">Jakub Žitník</a>{" "}

viewer/app/view.tsx

@@ -16,6 +16,8 @@ import { Input } from "@/components/ui/input";
 import { SubstitutionData, LocalData } from "@/lib/types";
 import { Card, CardContent } from "@/components/ui/card";
 import ScheduleViewer from "@/components/own/schedule-viewer";
+import { capitalizeFirstLetter } from "@/lib/utils";
+import UpdateStatus from '@/components/own/update-status';
 
 interface ViewProps {
   data: SubstitutionData | null;
@@ -29,6 +31,7 @@ interface FormValues {
 export default function View({ data }: ViewProps) {
   const [loading, setLoading] = useState(true);
   const [localData, setLocalData] = useState<LocalData | null>(null);
+  const [hideSubstitutions, setHideSubstitutions] = useState(false);
 
   const form = useForm<FormValues>({
     defaultValues: {
@@ -59,7 +62,7 @@ export default function View({ data }: ViewProps) {
       }
 
       const data = {
-        class: classNameProcessed,
+        class: foundKey,
         timetable: jsonData[foundKey]
       };
 
@@ -147,10 +150,18 @@ export default function View({ data }: ViewProps) {
   return (
     <div className="w-full max-w-[1920px] mx-auto p-4 space-y-6">
       <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-bold">Rozvrh třídy {localData.class}</h1>
-        <Button variant="outline" onClick={() => setLocalData(null)}>Změnit třídu/soubor</Button>
+        <h1 className="text-2xl font-bold">Rozvrh třídy {capitalizeFirstLetter(localData.class)}</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => setHideSubstitutions(!hideSubstitutions)}>
+            {hideSubstitutions ? "Zobrazit suplování" : "Skrýt suplování"}
+          </Button>
+          <Button variant="outline" onClick={() => setLocalData(null)}>Změnit třídu/soubor</Button>
+        </div>
       </div>
-      <ScheduleViewer localData={localData} substitutionData={data} />
+      
+      <UpdateStatus data={data} />
+
+      <ScheduleViewer localData={localData} substitutionData={data} hideSubstitutions={hideSubstitutions} />
     </div>
   );
 }