# frontend/src
dir: frontend/src

index: frontend/src/.pi-map.index.md

## role
Root-level frontend source directory providing the application entry point, routing, authentication, global styling, and shared state/type definitions for user management.
## files
- App.tsx | This file serves as the root component for a React application, setting up routing, authentication, layout (sidebar, top bar), and dark mode state. | exp: func:App() | dep: react-router-dom, @tanstack/react-query, react, lucide-react, react-oidc-context, ./pages/Dashboard, ./pages/NamedDashboardPage, ./pages/Settings, ./pages/ServicePage, ./pages/ServiceTypePage, ./pages/ServicesPage, ./auth, ./api/client, ./version, ./hooks/usePersistentState, ./hooks/useIsMobile, ./hooks/useServices, ./hooks/useDashboards, ./integrations/navEntries, @/components/ui/button, @/components/ui/tooltip, @/components/ui/sheet, @/components/ui/*, ./hooks/*, ./pages/*
- auth.ts | Manages OIDC authentication configuration and access token retrieval for a browser-based application. | exp: func:isOidcConfigured() → boolean, call:(import.meta.env.VITE_OIDC_ENABLED ?? "true").toLowerCase, call:Boolean, func:getOidcConfig(), call:window.history.replaceState, func:setAccessToken(token: string | null | undefined), func:getAccessToken() → string | null, call:getStoredAccessToken | dep: oidc-client-ts
- index.css | Defines global theme variables, dark mode colors, and base styles using Tailwind CSS v4 with semantic design tokens. | dep: Tailwind CSS, Google Fonts (Inter)
- main.tsx | Entry point that renders the React application into the DOM root element with StrictMode enabled. | dep: react, react-dom/client, ./App, ./index.css
- userState.d.ts | Defines TypeScript type declarations for user activity state management, including interfaces for user activity summaries and state items, plus function declarations for merging users with activity data and resolving user selections. | exp: UserActivitySummary, UserStateItem, mergeUsersWithActivity, resolveUserSelection | dep: ./types, types (NowPlayingSession, UserDirectoryItem)
- userState.js | Merges Jellyfin users with their session activity data and provides user lookup by identifier. | exp: func:mergeUsersWithActivity(users, sessions), call:users.map, call:sessions.filter, call:sessionMatchesUser, call:buildActivitySummary, func:resolveUserSelection(users, identifier), call:normalize, call:users.find, call:userKeys(user).some
- users.d.ts | Defines TypeScript interfaces and a function declaration for building a user drawer model from directory data. | exp: UserDetailField, UserContactAction, UserContactState, UserDrawerModel, buildUserDrawerModel | dep: ./types, types
- users.js | Transforms raw user data into a structured UI model for a user details drawer component. | exp: func:buildUserDrawerModel(user), call:displayName, call:splitValues, call:String, call:user.role.charAt(0).toUpperCase, call:user.role.slice, call:permissions.join, call:syncStatus
- version.ts | Exports frontend version and build info constants with a formatter for semantic version labels | exp: FRONTEND_VERSION, FRONTEND_BUILD_INFO, FRONTEND_VERSION_LABEL, func:formatVersionLabel(version: string, buildInfo: string) → string, call:version.trim, call:buildInfo.trim
## arch
React SPA with OIDC authentication, TypeScript-first type declarations paired with plain JS implementations, Tailwind CSS v4 theming with semantic design tokens, and declarative data-transform modules following a functional pattern.
## tags
user, activity, state, version, react, users, drawer, model
## symbols
- App
- isOidcConfigured
- getOidcConfig
- setAccessToken
- getAccessToken
- formatVersionLabel
- call:(import.meta.env.VITE_OIDC_ENABLED ?? "true").toLowerCase
- call:Boolean
## workflows
- change src behavior
  read: App.tsx, auth.ts, index.css
- explore src subdirectories
  index: frontend/src/api/.pi-map.index.md, frontend/src/components/.pi-map.index.md, frontend/src/hooks/.pi-map.index.md
## dirty
-
