merge stage into main

.actrc

@@ -0,0 +1,2 @@
+--container-architecture linux/amd64
+-P self-hosted=catthehacker/ubuntu:act-latest

PROJECT_OVERVIEW.md

@@ -88,6 +88,11 @@ Basic relationships:
 - **Exercise Library**: Authenticated users can browse system exercises, create their own exercises, and tag them with muscle groups.
 - **Feedback**: Authenticated users submit feedback; server stores entry and can open a GitHub issue.
 
+## Current Implementation Status
+
+- ✅ Exercise API + client CRUD flow is implemented (`/api/exercises`, `/api/muscle-groups`, `/exercises` page).
+- 🚧 Workout API + client workflow is the primary remaining feature area.
+
 ## API Surface (Current)
 
 - `POST /api/auth/*`: request-access, register, login, refresh-token, logout, forgot/reset-password

README.md

@@ -2,7 +2,9 @@
 [![CI / Build Images](https://github.com/arcot-labs/RepTrack/actions/workflows/build.yml/badge.svg)](https://github.com/arcot-labs/RepTrack/actions/workflows/build.yml)
 [![CD / Deploy Application](https://github.com/arcot-labs/RepTrack/actions/workflows/deploy.yml/badge.svg)](https://github.com/arcot-labs/RepTrack/actions/workflows/deploy.yml)
 
-### Local Development
+# RepTrack
+
+## Local Development
 
 Copy `.env.example` to `.env` & populate variables
 
@@ -25,8 +27,34 @@ Start containers:
 ./scripts/dev.sh
 ```
 
-### Database
+## Local GitHub Actions Testing
+
+Use `act` to run workflows locally for quick validation.
+
+List all workflows:
+
+```bash
+act -l
+```
+
+Run a specific job:
+
+```bash
+act -j {job-id}
+```
+
+## Database Conventions
 
 All writes should go through SQLAlchemy
 
 Alembic updates & bulk SQLAlchemy updates must explicitly set `updated_at`
+
+## Shadcn Component Conventions
+
+shadcn adds components under `client/src/components/ui/`
+
+To ensure custom styles & behavior survive component updates, follow these conventions:
+
+- Create custom component overrides under `client/src/components/ui/overrides/`
+- Import override components in app code instead of generated shadcn components
+- Add ESLint rules to prevent direct imports of generated components & point to override paths

client/eslint.config.js

@@ -46,6 +46,11 @@ export default defineConfig([
                         },
                     ],
                     paths: [
+                        {
+                            name: '@/components/ui/button',
+                            message:
+                                'Use Button from @/components/ui/overrides/button',
+                        },
                         {
                             name: 'sonner',
                             importNames: ['toast'],

client/package.json

@@ -9,7 +9,7 @@
         "generate-api": "openapi-ts",
         "lint": "eslint --fix --max-warnings=0",
         "preview": "vite preview",
-        "update-components": "for file in src/components/ui/*.tsx; do npx shadcn@latest add -o $(basename \"$file\" .tsx); done"
+        "update-components": "for file in src/components/ui/*.tsx; do npx shadcn@latest add -o $(basename \"$file\" .tsx); done && cd .. && npx prettier --write client/src/components/ui"
     },
     "lint-staged": {
         "*": [
@@ -18,7 +18,7 @@
         ]
     },
     "dependencies": {
-        "@hey-api/openapi-ts": "^0.94.1",
+        "@hey-api/openapi-ts": "^0.94.2",
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -58,14 +58,14 @@
         "@types/node": "^25.5.0",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
-        "@vitejs/plugin-react": "^5.1.4",
+        "@vitejs/plugin-react": "^5.2.0",
         "eslint": "^9.39.4",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.4.0",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.9.3",
-        "typescript-eslint": "^8.57.0",
+        "typescript-eslint": "^8.57.1",
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^6.1.1"
     }

client/src/AppRoutes.tsx

@@ -6,6 +6,7 @@ import { AppLayout } from '@/layout/AppLayout'
 import { Admin } from '@/pages/Admin'
 import { Dashboard } from '@/pages/Dashboard'
 import { Docs } from '@/pages/Docs'
+import { Exercises } from '@/pages/Exercises'
 import { ForgotPassword } from '@/pages/ForgotPassword'
 import { Login } from '@/pages/Login'
 import { Register } from '@/pages/Register'
@@ -25,6 +26,7 @@ export function AppRoutes() {
                 }
             >
                 <Route index element={<Dashboard />} />
+                <Route path="exercises" element={<Exercises />} />
                 <Route path="docs" element={<Docs />}>
                     <Route index element={<DocsIndex />} />
                     <Route path=":slug" element={<Doc />} />

client/src/auth/RequireAuth.tsx

@@ -9,9 +9,9 @@ interface RequireAuthProps {
 }
 
 export function RequireAuth({ children, requireAdmin }: RequireAuthProps) {
-    const { loading, authenticated, user } = useSession()
+    const { isLoading, authenticated, user } = useSession()
     const location = useLocation()
-    if (loading) return <Loading />
+    if (isLoading) return <Loading />
     if (!authenticated)
         return <Navigate to="/login" replace state={{ from: location }} />
     if (requireAdmin && !user?.is_admin) return <Navigate to="/" replace />

client/src/auth/RequireGuest.tsx

@@ -5,10 +5,10 @@ import type { JSX } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 
 export function RequireGuest({ children }: { children: JSX.Element }) {
-    const { loading, authenticated } = useSession()
+    const { isLoading, authenticated } = useSession()
     const location = useLocation()
     const state = location.state as LocationState | null
-    if (loading) return <Loading />
+    if (isLoading) return <Loading />
     if (authenticated) {
         const to = state?.from?.pathname ?? '/'
         return <Navigate to={to} replace />

client/src/auth/SessionProvider.tsx

@@ -5,10 +5,10 @@ import { type ReactNode, useEffect, useState } from 'react'
 
 export function SessionProvider({ children }: { children: ReactNode }) {
     const [user, setUser] = useState<UserPublic | null>(null)
-    const [loading, setLoading] = useState(true)
+    const [isLoading, setIsLoading] = useState(true)
 
     const loadSession = async () => {
-        setLoading(true)
+        setIsLoading(true)
         try {
             const { data, error } = await UserService.getCurrentUser()
             if (error) {
@@ -18,7 +18,7 @@ export function SessionProvider({ children }: { children: ReactNode }) {
             logger.info('Fetched current user', data)
             setUser(data)
         } finally {
-            setLoading(false)
+            setIsLoading(false)
         }
     }
 
@@ -30,7 +30,7 @@ export function SessionProvider({ children }: { children: ReactNode }) {
         <SessionContext.Provider
             value={{
                 user,
-                loading,
+                isLoading: isLoading,
                 authenticated: user !== null,
                 refresh: loadSession,
             }}

client/src/components/AccessRequestsTable.tsx

@@ -9,27 +9,23 @@ import { useSession } from '@/auth/session'
 import { DataTable } from '@/components/data-table/DataTable'
 import { DataTableColumnHeader } from '@/components/data-table/DataTableColumnHeader'
 import { DataTableInlineRowActions } from '@/components/data-table/DataTableInlineRowActions'
-import { createSelectColumn } from '@/components/data-table/DataTableSelectColumn'
 import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
 import {
     Dialog,
     DialogContent,
+    DialogFooter,
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/overrides/button'
 import { handleApiError } from '@/lib/http'
 import { notify } from '@/lib/notify'
 import {
     blueText,
-    greenBackground,
-    greenBackgroundHover,
     greenText,
     lightBlueBackground,
     lightGreenBackground,
     lightRedBackground,
-    redBackground,
-    redBackgroundHover,
     redText,
 } from '@/lib/styles'
 import type {
@@ -44,8 +40,6 @@ import { useState } from 'react'
 const blueBadgeClassName = `${lightBlueBackground} ${blueText}`
 const greenBadgeClassName = `${lightGreenBackground} ${greenText}`
 const redBadgeClassName = `${lightRedBackground} ${redText}`
-const greenButtonClassName = `${greenBackground} ${greenBackgroundHover}`
-const redButtonClassName = `${redBackground} ${redBackgroundHover}`
 
 function StatusBadge({ status }: { status: AccessRequestStatus }) {
     switch (status) {
@@ -79,7 +73,7 @@ export function AccessRequestsTable({
     onReloadRequests,
 }: AccessRequestsTableProps) {
     const { user } = useSession()
-    const [loadingRequestIds, setLoadingRequestIds] = useState<Set<number>>(
+    const [isLoadingRequestIds, setIsLoadingRequestIds] = useState<Set<number>>(
         new Set()
     )
     const [confirmDialog, setConfirmDialog] = useState<{
@@ -92,13 +86,7 @@ export function AccessRequestsTable({
         action: null,
     })
 
-    const handleConfirmAction = () => {
-        if (confirmDialog.request && confirmDialog.action)
-            void handleUpdateStatus(confirmDialog.request, confirmDialog.action)
-        setConfirmDialog({ isOpen: false, request: null, action: null })
-    }
-
-    const handleShowConfirmDialog = (
+    const openConfirmDialog = (
         request: AccessRequestPublic,
         action: 'approved' | 'rejected'
     ) => {
@@ -109,11 +97,25 @@ export function AccessRequestsTable({
         })
     }
 
+    const closeConfirmDialog = () => {
+        setConfirmDialog({
+            isOpen: false,
+            request: null,
+            action: null,
+        })
+    }
+
+    const handleConfirmAction = () => {
+        if (confirmDialog.request && confirmDialog.action)
+            void handleUpdateStatus(confirmDialog.request, confirmDialog.action)
+        closeConfirmDialog()
+    }
+
     const handleUpdateStatus = async (
         request: AccessRequestPublic,
         status: 'approved' | 'rejected'
     ) => {
-        setLoadingRequestIds((prev) => new Set(prev).add(request.id))
+        setIsLoadingRequestIds((prev) => new Set(prev).add(request.id))
         try {
             const { error } = await AdminService.updateAccessRequestStatus({
                 path: {
@@ -148,7 +150,7 @@ export function AccessRequestsTable({
             }
             onRequestUpdated(updatedRequest)
         } finally {
-            setLoadingRequestIds((prev) => {
+            setIsLoadingRequestIds((prev) => {
                 const next = new Set(prev)
                 next.delete(request.id)
                 return next
@@ -161,25 +163,23 @@ export function AccessRequestsTable({
         menuItems: (row) => {
             if (row.status !== 'pending') return []
 
-            const isRowLoading = loadingRequestIds.has(row.id)
+            const isRowLoading = isLoadingRequestIds.has(row.id)
             return [
                 {
                     type: 'action',
-                    label: 'Approve',
                     className: greenText,
                     icon: Check,
                     onSelect: () => {
-                        handleShowConfirmDialog(row, 'approved')
+                        openConfirmDialog(row, 'approved')
                     },
                     disabled: isRowLoading,
                 },
                 {
                     type: 'action',
                     className: redText,
-                    label: 'Reject',
                     icon: X,
                     onSelect: () => {
-                        handleShowConfirmDialog(row, 'rejected')
+                        openConfirmDialog(row, 'rejected')
                     },
                     disabled: isRowLoading,
                 },
@@ -188,7 +188,6 @@ export function AccessRequestsTable({
     }
 
     const columns: ColumnDef<AccessRequestPublic>[] = [
-        createSelectColumn<AccessRequestPublic>(),
         {
             id: 'name',
             accessorFn: (row) => `${row.first_name} ${row.last_name}`,
@@ -327,31 +326,21 @@ export function AccessRequestsTable({
                         ?
                         <div className="mt-2">This action is irreversible.</div>
                     </div>
-                    <div className="flex justify-end gap-2">
-                        <Button
-                            variant="outline"
-                            onClick={() => {
-                                setConfirmDialog({
-                                    ...confirmDialog,
-                                    isOpen: false,
-                                })
-                            }}
-                        >
-                            Cancel
-                        </Button>
+                    <DialogFooter>
+                        <Button onClick={closeConfirmDialog}>Cancel</Button>
                         <Button
                             onClick={handleConfirmAction}
-                            className={
+                            variant={
                                 confirmDialog.action === 'approved'
-                                    ? greenButtonClassName
-                                    : redButtonClassName
+                                    ? 'success'
+                                    : 'destructive'
                             }
                         >
                             {confirmDialog.action === 'approved'
                                 ? 'Approve'
                                 : 'Reject'}
                         </Button>
-                    </div>
+                    </DialogFooter>
                 </DialogContent>
             </Dialog>
         </>