feat: upload queue

package.json

@@ -67,7 +67,8 @@
     "dayjs": "work with dates (e.g., parse, validate, etc.)",
     "hls.js": "stream video data",
     "leaflet": "interactive maps",
-    "solid-js": "JS ui framework"
+    "solid-js": "JS ui framework",
+    "solid-transition-group": "animate components when they are inserted/removed from the DOM"
   },
   "dependencies": {
     "@mapbox/polyline": "^1.2.1",
@@ -80,7 +81,8 @@
     "hls.js": "^1.5.20",
     "leaflet": "^1.9.4",
     "qr-scanner": "^1.4.2",
-    "solid-js": "^1.9.5"
+    "solid-js": "^1.9.5",
+    "solid-transition-group": "^0.3.0"
   },
   "engines": {
     "node": ">=20.11.0"

src/ci/check_bundle_size.ts

@@ -31,7 +31,7 @@ files.push({ path: '', sizeKB: '', compressedSizeKB: '' }, { path: 'Total', size
 console.table(files, ['path', 'sizeKB', 'compressedSizeKB'])
 
 const lowerBoundKB = 200
-const upperBoundKB = 250
+const upperBoundKB = 252
 if (totalCompressedSize < lowerBoundKB * 1024) {
   console.warn(`Bundle size lower than expected, let's lower the limit! (${totalCompressedSizeKB}KB < ${lowerBoundKB}KB)`)
   process.exit(1)

src/components/material/Icon.tsx

@@ -5,9 +5,10 @@ import clsx from 'clsx'
 // https://developers.google.com/fonts/docs/material_symbols#optimize_the_icon_font
 // biome-ignore format: the array should not be formatted
 export const Icons = [
-  'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'close', 'description', 'directions_car', 'download', 'error',
-  'file_copy', 'info', 'menu', 'my_location', 'open_in_new', 'payments', 'person', 'progress_activity', 'satellite_alt', 'search',
-  'settings', 'sync', 'upload', 'videocam',
+  'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'cloud_done', 'close', 'delete', 'description',
+  'directions_car', 'download', 'error', 'face', 'file_copy', 'info', 'keyboard_arrow_down', 'keyboard_arrow_up', 
+  'local_fire_department', 'menu', 'my_location', 'open_in_new', 'payments', 'person', 'progress_activity', 
+  'satellite_alt', 'search', 'settings', 'signal_disconnected', 'sync', 'upload', 'videocam',
 ] as const
 
 export type IconName = (typeof Icons)[number]

src/components/upload-queue/QueueItem.tsx

@@ -0,0 +1,52 @@
+import { Component, createMemo } from 'solid-js'
+
+import { COMMA_CONNECT_PRIORITY } from '~/api/athena'
+import Icon from '~/components/material/Icon'
+import LinearProgress from '~/components/material/LinearProgress'
+import { UploadItem } from '~/types'
+
+const QueueItem: Component<{ item: UploadItem }> = (props) => {
+  const progress = createMemo(() => {
+    if (props.item.status === 'waiting_for_network') return 'Waiting for network'
+    if (props.item.status === 'queued') return 'Queued'
+    if (props.item.progress === 100) return 'Finishing'
+    return `${props.item.progress}%`
+  })
+
+  const progressColor = createMemo(() => {
+    switch (props.item.status) {
+      case 'completed':
+        return 'tertiary'
+      case 'queued':
+      case 'waiting_for_network':
+        return 'secondary'
+      default:
+        return 'primary'
+    }
+  })
+
+  const icon = createMemo(() => (props.item.priority === COMMA_CONNECT_PRIORITY ? 'face' : 'local_fire_department'))
+
+  return (
+    <div class="flex flex-col">
+      <div class="flex items-center justify-between flex-wrap mb-1 gap-x-4 min-w-0">
+        <div class="flex items-center min-w-0 flex-1">
+          <Icon class="text-on-surface-variant flex-shrink-0 mr-2" name={icon()} />
+          <div class="flex min-w-0 gap-1">
+            <span class="text-body-sm font-mono truncate text-on-surface">
+              {[props.item.route, props.item.segment, props.item.filename].join(' ')}
+            </span>
+          </div>
+        </div>
+        <div class="flex items-center gap-2 flex-shrink-0 justify-end">
+          <span class="text-body-sm font-mono whitespace-nowrap">{progress()}</span>
+        </div>
+      </div>
+      <div class="h-1.5 w-full overflow-hidden rounded-full bg-surface-container-highest">
+        <LinearProgress progress={props.item.progress / 100} color={progressColor()} />
+      </div>
+    </div>
+  )
+}
+
+export default QueueItem

src/components/upload-queue/QueueItemTable.tsx

@@ -0,0 +1,69 @@
+import { Component, Suspense } from 'solid-js'
+import { For, Match, Switch } from 'solid-js'
+import { Transition, TransitionGroup } from 'solid-transition-group'
+
+import Icon from '~/components/material/Icon'
+import { UploadItem } from '~/types'
+
+import QueueItem from './QueueItem'
+import clsx from 'clsx'
+
+const animations = (slide: boolean) => {
+  return {
+    enterActiveClass: 'transition-all duration-300 ease-in-out',
+    exitActiveClass: 'transition-all duration-300 ease-in-out',
+    enterClass: clsx('opacity-0', slide && 'transform translate-x-4'),
+    enterToClass: clsx('opacity-100', slide && 'transform translate-x-0'),
+    exitClass: clsx('opacity-100', slide && 'transform translate-x-0'),
+    exitToClass: clsx('opacity-0', slide && 'transform -translate-x-4'),
+    moveClass: clsx(slide && 'transition-transform duration-300'),
+  }
+}
+
+const QueueItemTable: Component<{ items?: () => UploadItem[] | undefined; error?: () => string | undefined; offline?: boolean }> = (
+  props,
+) => {
+  return (
+    <div class="relative h-[calc(4*3rem)] sm:h-[calc(6*3rem)]">
+      <Transition appear {...animations(false)}>
+        <Suspense
+          fallback={
+            <div class="flex justify-center items-center h-full animate-spin absolute inset-0">
+              <Icon name="progress_activity" />
+            </div>
+          }
+        >
+          <Switch>
+            <Match when={props.error?.() !== undefined && props.items?.()?.length === 0}>
+              <div class="flex items-center justify-center h-full gap-2 text-on-surface-variant absolute inset-0">
+                <Icon name="signal_disconnected" />
+                <span>{props.error?.()}</span>
+              </div>
+            </Match>
+            <Match when={props.items?.()?.length === 0}>
+              <div class="flex items-center justify-center h-full gap-2 text-on-surface-variant absolute inset-0">
+                <Icon name="cloud_done" />
+                <span>No files in queue</span>
+              </div>
+            </Match>
+            <Match when={true}>
+              <div class="absolute inset-0 overflow-y-auto hide-scrollbar">
+                <TransitionGroup name="list" {...animations(true)}>
+                  <For each={props.items?.()}>
+                    {(item) => (
+                      <div class="bg-surface-container-lowest rounded-md pb-1 sm:pb-2">
+                        <QueueItem item={item} />
+                      </div>
+                    )}
+                  </For>
+                </TransitionGroup>
+              </div>
+            </Match>
+          </Switch>
+        </Suspense>
+      </Transition>
+    </div>
+  )
+}
+
+export default QueueItemTable

src/components/upload-queue/index.tsx

@@ -0,0 +1,56 @@
+import clsx from 'clsx'
+import { createResource, Suspense } from 'solid-js'
+import type { Component } from 'solid-js'
+
+import IconButton from '~/components/material/IconButton'
+import { useUploadQueue } from '~/hooks/use-upload-queue'
+
+import QueueItemTable from './QueueItemTable'
+import StatisticBar from '../StatisticBar'
+
+const UploadQueue: Component<{ dongleId: string }> = (props) => {
+  const [queue] = createResource(() => props.dongleId, useUploadQueue)
+  const items = () => queue()?.items()
+  return (
+    <div class="flex flex-col border-2 border-t-0 border-surface-container-high bg-surface-container-lowest">
+      <div class="flex">
+        <div class="flex-auto p-4">
+          <StatisticBar
+            statistics={[
+              {
+                label: 'Uploading',
+                value: () =>
+                  queue()
+                    ?.items()
+                    .filter((i) => i.status === 'uploading').length,
+              },
+              {
+                label: 'Waiting',
+                value: () =>
+                  queue()
+                    ?.items()
+                    .filter((i) => i.status === 'queued').length,
+              },
+              { label: 'Total', value: () => queue()?.items().length },
+            ]}
+          />
+        </div>
+        <div class="flex p-4">
+          <Suspense fallback={<IconButton name="delete" />}>
+            <IconButton
+              class={clsx(queue()?.clearingQueue() && 'animate-spin')}
+              name={queue()?.clearingQueue() ? 'progress_activity' : queue()?.clearQueueError() ? 'error' : 'delete'}
+              onClick={() => void queue()?.clearQueue()}
+              disabled={queue()?.clearingQueue()}
+            />
+          </Suspense>
+        </div>
+      </div>
+      <div class="rounded-md border-2 border-surface-container-high mx-4 mb-4 p-4">
+        <QueueItemTable items={items} error={queue()?.error} offline={queue()?.offline()} />
+      </div>
+    </div>
+  )
+}
+
+export default UploadQueue