minor: heavily simplify server and app content. unify styling (#4)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #4

app/composables/useCameras.js

@@ -1,16 +1,19 @@
-/**
- * Fetches devices + live sessions (unified cameras). Optionally polls when tab is visible.
- */
+/** Fetches devices + live sessions; polls when tab visible. */
 const POLL_MS = 1500
+const EMPTY_RESPONSE = Object.freeze({ devices: [], liveSessions: [] })
 
 export function useCameras(options = {}) {
   const { poll: enablePoll = true } = options
   const { data, refresh } = useAsyncData(
     'cameras',
-    () => $fetch('/api/cameras').catch(() => ({ devices: [], liveSessions: [] })),
-    { default: () => ({ devices: [], liveSessions: [] }) },
+    () => $fetch('/api/cameras').catch(() => EMPTY_RESPONSE),
+    { default: () => EMPTY_RESPONSE },
   )
 
+  const devices = computed(() => Object.freeze([...(data.value?.devices ?? [])]))
+  const liveSessions = computed(() => Object.freeze([...(data.value?.liveSessions ?? [])]))
+  const cameras = computed(() => Object.freeze([...devices.value, ...liveSessions.value]))
+
   const pollInterval = ref(null)
   function startPolling() {
     if (!enablePoll || pollInterval.value) return
@@ -27,22 +30,11 @@ export function useCameras(options = {}) {
   onMounted(() => {
     if (typeof document === 'undefined') return
     document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible') {
-        startPolling()
-        refresh()
-      }
-      else {
-        stopPolling()
-      }
+      document.visibilityState === 'visible' ? (startPolling(), refresh()) : stopPolling()
     })
     if (document.visibilityState === 'visible') startPolling()
   })
   onBeforeUnmount(stopPolling)
 
-  const devices = computed(() => data.value?.devices ?? [])
-  const liveSessions = computed(() => data.value?.liveSessions ?? [])
-  /** All cameras: devices first, then live sessions */
-  const cameras = computed(() => [...devices.value, ...liveSessions.value])
-
-  return { data, devices, liveSessions, cameras, refresh, startPolling, stopPolling }
+  return Object.freeze({ data, devices, liveSessions, cameras, refresh, startPolling, stopPolling })
 }