feat: tab title timer, new sounds, better rendering for session list

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "./App.css";
 import ThemeSwitcher from "./components/ThemeSwitcher";
 import CurrentTime from "./components/CurrentTime";
@@ -7,6 +7,9 @@ import dayjs from "dayjs";
 import SetupView from "./components/SetupView";
 import WorkView from "./components/WorkView";
 import SessionList from "./components/SessionList";
+import chime1 from "./assets/notification-1.mp3";
+import chime2 from "./assets/notification-2.mp3";
+import chime3 from "./assets/notification-3.mp3";
 
 export const LocalStorageConsts = {
   WORK_TIME: "workTime",
@@ -27,10 +30,12 @@ function App() {
     []
   );
 
-  const isWorking =
-    sessions.length > 0
-      ? now.unix() < sessions[0].start + sessions[0].work + sessions[0].break
-      : false;
+  const workEndTime =
+    sessions.length > 0 ? sessions[0].start + sessions[0].work : 0;
+  const breakEndTime =
+    sessions.length > 0 ? workEndTime + sessions[0].break : 0;
+  const isWorking = now.unix() < breakEndTime;
+  const isWork = now.unix() < workEndTime;
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -39,6 +44,46 @@ function App() {
     return () => clearInterval(timer);
   }, []);
 
+  const workStateRef = useRef<number>();
+
+  useEffect(() => {
+    const workState = isWorking ? (isWork ? 1 : 2) : 0;
+    if (workState != workStateRef.current) {
+      switch (workState) {
+        case 1:
+          new Audio(chime3).play();
+          break;
+        case 2:
+          new Audio(chime1).play();
+          break;
+        case 0:
+          new Audio(chime2).play();
+          break;
+        default:
+          break;
+      }
+    }
+    workStateRef.current = workState;
+  }, [isWork, isWorking]);
+
+  const updateTitle = () => {
+    if (isWorking) {
+      const secondsLeft =
+        (isWork ? workEndTime : breakEndTime) - now.unix() - 1;
+      const minutesLeft = Math.floor(secondsLeft / 60);
+      let minutes = minutesLeft.toString();
+      if (minutesLeft < 10) minutes = "0" + minutes;
+      let seconds = (secondsLeft % 60).toString();
+      if (secondsLeft % 60 < 10) seconds = "0" + seconds;
+      const time = `⦗${minutes}:${seconds}⦘ `;
+      document.title = time + (isWork ? `Working...` : `Break time!`);
+    } else {
+      document.title = "Brain pls work";
+    }
+  };
+
+  useEffect(updateTitle, [now]);
+
   return (
     <div className="App space-y-6">
       <header className="flex items-center justify-center space-x-4">

src/components/SessionList.tsx

@@ -49,13 +49,14 @@ const SessionList: React.FC<SessionListProps> = ({
   }, [trueSessions, isWorking, now]);
 
   const renderTime = (seconds: number, size: number, className: string) => {
+    const fullBarSize = 25 * 60;
     let tempSeconds = seconds;
     const widths = [];
-    while (tempSeconds > 3600) {
+    while (tempSeconds > fullBarSize) {
       widths.push(100);
-      tempSeconds -= 3600;
+      tempSeconds -= fullBarSize;
     }
-    widths.push(Math.floor((100 * tempSeconds) / 3600));
+    widths.push(Math.floor((100 * tempSeconds) / fullBarSize));
     return (
       <div className="flex space-x-2 items-center">
         {widths.map((w, i) => (
@@ -85,9 +86,9 @@ const SessionList: React.FC<SessionListProps> = ({
       {sessionData.map((day, i) => (
         <li
           key={day.timestamp}
-          className="flex flex-col sm:flex-row items-center space-y-4 sm:space-x-4"
+          className="flex flex-col md:flex-row items-center bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-5 p-2 rounded-lg space-y-4 sm:space-x-4"
         >
-          <div className="w-36">
+          <div className="w-64">
             <span
               className="opacity-80 font-bold text-sm rounded-lg bg-gray-200 dark:bg-gray-800 p-2 sm:p-4 min-w-max"
               title={dayjs.unix(day.timestamp).format("dddd, DD MMMM")}
@@ -99,7 +100,7 @@ const SessionList: React.FC<SessionListProps> = ({
                 : dayjs.unix(day.timestamp + 24 * 3600).fromNow()}
             </span>
           </div>
-          <div className="flex flex-col sm:flex-row sm:justify-between items-start sm:items-end w-full">
+          <div className="flex flex-col sm:flex-row sm:justify-between space-y-4 sm:space-y-0 sm:space-x-8 items-start sm:items-end md:w-full">
             <div>
               {renderTime(
                 day.workSeconds,

src/components/WorkView.tsx

@@ -4,7 +4,6 @@ import { Session } from "../App";
 import Countdown from "./Countdown";
 import clsx from "clsx";
 import { IoClose } from "react-icons/io5";
-import chime from "../assets/chime.mp3";
 
 interface WorkViewProps {
   sessions: Session[];
@@ -13,11 +12,10 @@ interface WorkViewProps {
 }
 
 function WorkView({ sessions, setSessions, now }: WorkViewProps) {
-  const audio = new Audio(chime);
-  const isWork =
-    sessions.length > 0
-      ? now.unix() <= sessions[0].start + sessions[0].work
-      : false;
+  const workEndTime =
+    sessions.length > 0 ? sessions[0].start + sessions[0].work : 0;
+
+  const isWork = sessions.length > 0 ? now.unix() <= workEndTime : false;
 
   const endEarly = () => {
     if (sessions.length > 0) {
@@ -32,15 +30,6 @@ function WorkView({ sessions, setSessions, now }: WorkViewProps) {
     }
   };
 
-  const isWorkRef = useRef<boolean>();
-
-  useEffect(() => {
-    if (!isWork && !!isWorkRef.current) {
-      audio.play();
-    }
-    isWorkRef.current = isWork;
-  }, [isWork]);
-
   return (
     <div className="flex justify-center py-8">
       <div className="flex justify-center flex-col items-center space-y-4">