Update gitignore

.gitea/workflows/frontend.yml

@@ -51,6 +51,8 @@ jobs:
         run: |
           docker buildx build \
             --platform linux/arm64 \
+            --build-arg VITE_APP_VERSION=$(git describe --tags) \
+            --build-arg VITE_APP_GITSHA=$(git rev-parse --short HEAD) \
             -t gitea.lan/jacobh2/babymonitor-frontend:${{ env.VERSION }} \
             ./frontend \
             --push

.gitignore

@@ -5,6 +5,8 @@
 *.js
 *.jsx
 
+.omo/
+
 ### Node ###
 # Logs
 logs

frontend/Dockerfile

@@ -1,5 +1,9 @@
 FROM node:22-alpine AS build
 
+ARG VITE_APP_VERSION=unknown
+ARG VITE_APP_GITSHA=unknown
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+ENV VITE_APP_GITSHA=$VITE_APP_GITSHA
 WORKDIR /app
 
 # Copy package files first to leverage Docker cache

frontend/src/App.tsx

@@ -4,6 +4,8 @@ import TrackerPage from './components/tracker/TrackerPage';
 import StatsPage from './components/stats/StatsPage';
 import Navbar from './components/Navbar';
 import Playground from './components/Playground';
+import Footer from './components/Footer';
+
 
 function App() {
   return (
@@ -17,6 +19,7 @@ function App() {
             <Route path="/playground" element={<Playground />} />
           </Routes>
         </main>
+        <Footer />
       </div>
     </Router>
   );

frontend/src/components/Footer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="py-4 text-center">
+      <p className="text-xs text-slate-500">
+        v{__APP_VERSION__} ({__APP_GITSHA__})
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;

frontend/src/components/stats/DailySummary.tsx

@@ -100,8 +100,8 @@ const DailySummary: React.FC<DailySummaryProps> = ({ from_date, to_date, day_sta
              width={60}
            />
           <Tooltip
-              formatter={(value: any, name: any) => [
+              formatter={(value: number | string | readonly (string | number)[] | undefined, name: string | number | undefined) => [
-                formatMinutes(Math.round(Number(value ?? 0) * 60)),
+                formatMinutes(Math.round(Number((Array.isArray(value) ? value[0] : value ?? 0) * 60))),
                 name === 'daySleep' ? 'Day' : 'Night',
               ]}
           />

frontend/src/components/stats/SleepTimetable.tsx

@@ -52,7 +52,8 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
 
   useEffect(() => {
     if (days.length > 0) {
-      setSelectedDayIndex(days.length - 1);
+      const newIndex = days.length - 1;
+      setSelectedDayIndex(prev => (prev !== newIndex ? newIndex : prev));
     }
   }, [days]);
 
@@ -158,7 +159,7 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
               </button>
             );
           })}
-        </div >
+        </div>
       )}
 
       {/* Grid Container */}
@@ -176,27 +177,27 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
           {visibleDays.map((day) => (
             <div key={day} className="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-2">
               {getDayName(day)}
-            </div >
+            </div>
           ))}
-        </div >
+        </div>
 
         {/* Time Grid Container */}
         <div className="relative">
           <div 
-          className="grid" 
+            className="grid" 
-          style={{ 
+            style={{ 
-            gridTemplateColumns: tier === 'desktop' 
+              gridTemplateColumns: tier === 'desktop' 
-              ? `4rem repeat(${days.length}, minmax(40px, 1fr))`
+                ? `4rem repeat(${days.length}, minmax(40px, 1fr))`
-              : `4rem repeat(${visibleDays.length}, 1fr)`
+                : `4rem repeat(${visibleDays.length}, 1fr)`
-          }}
+            }}
-        >
+          >
             {/* Time Rows */}
             {timeSteps.map((step) => (
               <Fragment key={step}>
                 {/* Time Label */}
                 <div className="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-2">
                   {step % 60 === 0 ? formatTimeLabel(step) : ''}
-                </div >
+                </div>
                 
                 {/* Grid Cells */}
                 {visibleDays.map((day) => {
@@ -220,11 +221,11 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
                 transform: 'translateY(-50%)'
               }}
             />
-          </div >
+          </div>
-        </div >
+        </div>
-      </div >
+      </div>
-    </div >
+    </div>
   );
 };
 
-export default Timetable;
+export default Timetable;

frontend/src/hooks/SettingsProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { createContext, useState, useEffect, ReactNode } from 'react';
 
 const STORAGE_KEY = 'baby-sleep-settings';
 

frontend/src/hooks/useSettings.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { SettingsContext, Settings } from './SettingsProvider';
+import { SettingsContext } from './SettingsProvider';
 
 export function useSettings() {
   const context = useContext(SettingsContext);

frontend/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;
+declare const __APP_GITSHA__: string;

frontend/vite.config.ts

@@ -3,9 +3,16 @@ import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
+const APP_VERSION = process.env.VITE_APP_VERSION || 'unknown';
+const APP_GITSHA = process.env.VITE_APP_GITSHA || 'unknown';
+
 export default defineConfig({
   base: './',
   plugins: [react(), tailwindcss()],
+  define: {
+    __APP_VERSION__: JSON.stringify(APP_VERSION),
+    __APP_GITSHA__: JSON.stringify(APP_GITSHA),
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

todo.md

@@ -19,9 +19,9 @@ exitcode '1': failure
 ```
 
 - [ ] Editing a sleep session in "sleep sessions", when I click the edit button the times show up as UTC but should show as my local timezone
-- [ ] We should drop the "notes" column from the sleep_session table
+- [/] We should drop the "notes" column from the sleep_session table
 - [x] Switch over to oh-my-opencode and try it out
-- [/] Adda footer at the bottom of the app that shows the version (aka git tag) of the app
+- [x] Adda footer at the bottom of the app that shows the version (aka git tag) of the app
 - [-] Fix race condition of gitea workflows
 
 If both workflows run at the same time, a race condition occurs: