chore: update API configuration and enhance authentication handling

- Updated Vite configuration to use the production API endpoint.
- Modified TypeScript build info to include new config file.
- Refactored API client to support authenticated URLs.
- Updated various components to utilize the new authenticated API URL for media fetching.
- Removed obsolete CSS and JS files from the distribution directory.

src/features/annotations/AnnotationsPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { useResizablePanel } from '../../hooks/useResizablePanel'
-import { api } from '../../api/client'
+import { api, authenticatedApiUrl } from '../../api/client'
 import MediaList from './MediaList'
 import VideoPlayer, { type VideoPlayerHandle } from './VideoPlayer'
 import CanvasEditor, { type CanvasEditorHandle } from './CanvasEditor'
@@ -96,7 +96,7 @@ export default function AnnotationsPage() {
       img.crossOrigin = 'anonymous'
       img.src = selectedMedia.path.startsWith('blob:')
         ? selectedMedia.path
-        : `/api/annotations/media/${selectedMedia.id}/file`
+        : authenticatedApiUrl(`/api/annotations/media/${selectedMedia.id}/file`)
       await new Promise(res => { img.onload = res; img.onerror = res })
       w = img.naturalWidth
       h = img.naturalHeight

src/features/annotations/CanvasEditor.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react'
 import { MediaType } from '../../types'
 import type { Media, AnnotationListItem, Detection, Affiliation, CombatReadiness } from '../../types'
+import { authenticatedApiUrl } from '../../api/client'
 import { getClassColor, getPhotoModeSuffix, getClassNameFallback } from './classColors'
 
 interface Props {
@@ -76,11 +77,11 @@ const CanvasEditor = forwardRef<CanvasEditorHandle, Props>(function CanvasEditor
     const img = new Image()
     img.crossOrigin = 'anonymous'
     if (annotation && !media.path.startsWith('blob:')) {
-      img.src = `/api/annotations/annotations/${annotation.id}/image`
+      img.src = authenticatedApiUrl(`/api/annotations/annotations/${annotation.id}/image`)
     } else if (media.path.startsWith('blob:')) {
       img.src = media.path
     } else {
-      img.src = `/api/annotations/media/${media.id}/file`
+      img.src = authenticatedApiUrl(`/api/annotations/media/${media.id}/file`)
     }
     img.onload = () => {
       imgRef.current = img

src/features/annotations/VideoPlayer.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react'
 import { FaPlay, FaPause, FaStop, FaStepBackward, FaStepForward, FaVolumeMute, FaVolumeUp } from 'react-icons/fa'
+import { authenticatedApiUrl } from '../../api/client'
 import type { Media } from '../../types'
 
 interface Props {
@@ -38,7 +39,7 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, Props>(function VideoPlayer({
 
   const videoUrl = media.path.startsWith('blob:')
     ? media.path
-    : `/api/annotations/media/${media.id}/file`
+    : authenticatedApiUrl(`/api/annotations/media/${media.id}/file`)
 
   const stepFrames = useCallback((count: number) => {
     const video = videoRef.current