Add /top page

app/history/page.tsx

@@ -13,7 +13,6 @@ import {
 } from "@mui/icons-material";
 import {
   Alert,
-  Container,
   Stack,
   Table,
   TableBody,
@@ -76,7 +75,7 @@ const RecentPage = () => {
   };
 
   return (
-    <Container component="main" sx={{ my: 2 }}>
+    <main>
       {events.length !== 0 ? (
         <Table sx={{ width: "auto", mx: "auto" }}>
           <TableHead>
@@ -115,7 +114,7 @@ const RecentPage = () => {
       ) : (
         <Alert severity="warning">No events</Alert>
       )}
-    </Container>
+    </main>
   );
 };
 

app/layout.tsx

@@ -4,6 +4,7 @@ import { RecentTasksProvider } from "@/components/RecentTasksProvider";
 import { TaskEventsProvider } from "@/components/TaskEventsProvider";
 import { TaskProvider } from "@/components/TasksProvider";
 import ThemeRegistry from "@/components/ThemeRegistry";
+import { Container } from "@mui/material";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
@@ -22,7 +23,9 @@ const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
           <MyAppBar />
           <RecentTasksProvider>
             <MyTabs />
-            <TaskProvider>{children}</TaskProvider>
+            <TaskProvider>
+              <Container sx={{ my: 2 }}>{children}</Container>
+            </TaskProvider>
           </RecentTasksProvider>
         </TaskEventsProvider>
       </ThemeRegistry>

app/page.tsx

@@ -7,7 +7,6 @@ import { Add } from "@mui/icons-material";
 import {
   Box,
   Button,
-  Container,
   Dialog,
   DialogActions,
   DialogContent,
@@ -104,12 +103,12 @@ const Home: React.FC = () => {
   const tasks = [...new Set([...order, ...names.keys()])];
 
   return (
-    <Container component="main">
+    <main>
       <Stack spacing={2} sx={{ my: 2 }} useFlexGap>
         <AddTasksButton onAdd={add} />
         <TaskCards tasks={tasks} onOrderChange={setOrder} />
       </Stack>
-    </Container>
+    </main>
   );
 };
 

app/recent/page.tsx

@@ -2,17 +2,16 @@
 
 import { TaskCards } from "@/components/TaskCards";
 import { useRecentTasks } from "@/lib/hooks/use-recent-tasks";
-import { Container } from "@mui/material";
 import { useState } from "react";
 
 const RecentPage = () => {
   const { tasks: recentTasks } = useRecentTasks();
   const [initialRecentTasks] = useState(recentTasks);
 
   return (
-    <Container component="main" sx={{ my: 2 }}>
+    <main>
       <TaskCards tasks={initialRecentTasks} onOrderChange={undefined} />
-    </Container>
+    </main>
   );
 };
 

app/top/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { TaskCards } from "@/components/TaskCards";
+import { useTaskEvents } from "@/lib/hooks/use-task-events";
+import { useState } from "react";
+
+const RecentPage = () => {
+  const { elapsedTimes, ongoingTasks, lastEventTime } = useTaskEvents();
+
+  const [tasks] = useState(
+    [...elapsedTimes.entries()]
+      .map(
+        ([task, time]) =>
+          [
+            task,
+            ongoingTasks.has(task) && lastEventTime !== undefined
+              ? time + (Date.now() - lastEventTime) / ongoingTasks.size
+              : time,
+          ] as const
+      )
+      .sort(([, a], [, b]) => b - a)
+      .map(([task]) => task)
+  );
+
+  return (
+    <main>
+      <TaskCards tasks={tasks} onOrderChange={undefined} />
+    </main>
+  );
+};
+
+export default RecentPage;

components/MyTabs.tsx

@@ -2,23 +2,29 @@
 
 import { useRecentTasks } from "@/lib/hooks/use-recent-tasks";
 import { useTaskEvents } from "@/lib/hooks/use-task-events";
-import { History, Home, Timeline } from "@mui/icons-material";
+import { History, Home, Sort, Timeline } from "@mui/icons-material";
 import { LinkTab } from "./LinkTab";
 import { LinkTabs } from "./LinkTabs";
 
 export const MyTabs: React.FC = () => {
   const { tasks } = useRecentTasks();
-  const { events } = useTaskEvents();
+  const { events, elapsedTimes } = useTaskEvents();
 
   return (
     <LinkTabs centered>
-      <LinkTab value="/" icon={<Home />} label="Home" />
+      <LinkTab value="/" icon={<Home />} label="All" />
       <LinkTab
         value="/recent/"
         icon={<History />}
         label="Recent"
         disabled={tasks.length === 0}
       />
+      <LinkTab
+        value="/top/"
+        icon={<Sort />}
+        label="Top"
+        disabled={elapsedTimes.size === 0}
+      />
       <LinkTab
         value="/history/"
         icon={<Timeline />}