feat: combine encoding and encoded tables

app/package.json

@@ -29,7 +29,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@giantnodes/react": "1.0.0-canary.16",
+    "@giantnodes/react": "1.0.0-canary.17",
     "@hookform/resolvers": "^3.3.4",
     "@tabler/icons-react": "^3.3.0",
     "clsx": "^2.1.1",

app/src/app/(dashboard)/page.tsx

@@ -6,44 +6,28 @@ import { Card } from '@giantnodes/react'
 import { Suspense } from 'react'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
-import { EncodedTable, EncodingTable } from '@/components/tables'
+import { EncodeQueue } from '@/components/interfaces/dashboard'
 
 const QUERY = graphql`
-  query page_DashboardPageQuery($first: Int, $after: String, $order: [EncodeSortInput!]) {
-    ...EncodingTableFragment
-      @arguments(
-        where: { status: { nin: [COMPLETED, FAILED, CANCELLED] } }
-        first: $first
-        after: $after
-        order: $order
-      )
-
-    ...EncodedTableFragment
-      @arguments(where: { status: { in: [COMPLETED, FAILED, CANCELLED] } }, first: $first, after: $after, order: $order)
+  query page_DashboardPageQuery($first: Int, $after: String) {
+    ...EncodeQueueFragment_query @arguments(first: $first, after: $after)
   }
 `
 
 const DashboardPage = () => {
   const query = useLazyLoadQuery<page_DashboardPageQuery>(QUERY, {
     first: 8,
-    order: [{ created_at: 'DESC' }],
   })
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3 h-full">
       <Card className="max-w-4xl">
-        <Card.Header>Processing</Card.Header>
+        <Card.Header>Queue</Card.Header>
 
         <Suspense>
-          <EncodingTable $key={query} />
-        </Suspense>
-      </Card>
-
-      <Card className="max-w-4xl">
-        <Card.Header>Completed</Card.Header>
-
-        <Suspense>
-          <EncodedTable $key={query} />
+          <Card.Body className="p-0">
+            <EncodeQueue $key={query} />
+          </Card.Body>
         </Suspense>
       </Card>
     </div>

app/src/app/(libraries)/library/[slug]/page.tsx

@@ -7,11 +7,11 @@ import { Suspense } from 'react'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
 import { useLibraryContext } from '@/app/(libraries)/library/[slug]/use-library.hook'
-import { EncodingTable } from '@/components/tables'
+import { EncodeQueue } from '@/components/interfaces/dashboard'
 
 const QUERY = graphql`
-  query page_LibraryDashboardQuery($where: EncodeFilterInput, $first: Int, $after: String, $order: [EncodeSortInput!]) {
-    ...EncodingTableFragment @arguments(where: $where, first: $first, after: $after, order: $order)
+  query page_LibraryDashboardQuery($where: EncodeFilterInput, $first: Int, $after: String) {
+    ...EncodeQueueFragment_query @arguments(where: $where, first: $first, after: $after)
   }
 `
 
@@ -20,7 +20,6 @@ const LibraryDashboard = () => {
 
   const query = useLazyLoadQuery<page_LibraryDashboardQuery>(QUERY, {
     first: 8,
-    order: [{ created_at: 'DESC' }],
     where: {
       file: {
         library: {
@@ -37,7 +36,7 @@ const LibraryDashboard = () => {
       <Card.Header>Tasks</Card.Header>
 
       <Suspense>
-        <EncodingTable $key={query} />
+        <EncodeQueue $key={query} />
       </Suspense>
     </Card>
   )

app/src/components/interfaces/dashboard/encode-queue/EncodeQueue.tsx

@@ -0,0 +1,146 @@
+import type { EncodeQueueCancelMutation } from '@/__generated__/EncodeQueueCancelMutation.graphql'
+import type {
+  EncodeQueueFragment_query$data,
+  EncodeQueueFragment_query$key,
+} from '@/__generated__/EncodeQueueFragment_query.graphql'
+import type { EncodeQueueRefetchQuery } from '@/__generated__/EncodeQueueRefetchQuery.graphql'
+
+import { Button, Link, Table } from '@giantnodes/react'
+import { IconCircleX } from '@tabler/icons-react'
+import React from 'react'
+import { graphql, useMutation, usePaginationFragment } from 'react-relay'
+
+import { EncodeDuration, EncodePercent, EncodeSpeed, EncodeStatus } from '@/components/interfaces/encode'
+
+const FRAGMENT = graphql`
+  fragment EncodeQueueFragment_query on Query
+  @refetchable(queryName: "EncodeQueueRefetchQuery")
+  @argumentDefinitions(where: { type: "EncodeFilterInput" }, first: { type: "Int" }, after: { type: "String" }) {
+    encode_queue(where: $where, first: $first, after: $after) @connection(key: "EncodeQueueFragment_encode_queue") {
+      edges {
+        node {
+          id
+          status
+          file {
+            path_info {
+              name
+            }
+          }
+          ...EncodeStatusFragment
+          ...EncodePercentFragment
+          ...EncodeSpeedFragment
+          ...EncodeDurationFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+      }
+    }
+  }
+`
+
+const MUTATION = graphql`
+  mutation EncodeQueueCancelMutation($input: Encode_cancelInput!) {
+    encode_cancel(input: $input) {
+      encode {
+        status
+      }
+      errors {
+        ... on DomainError {
+          message
+        }
+        ... on ValidationError {
+          message
+        }
+      }
+    }
+  }
+`
+
+type EncodeEntry = NonNullable<NonNullable<EncodeQueueFragment_query$data['encode_queue']>['edges']>[0]['node']
+
+type EncodeQueueProps = {
+  $key: EncodeQueueFragment_query$key
+}
+
+const EncodeQueue: React.FC<EncodeQueueProps> = ({ $key }) => {
+  const { data, hasNext, isLoadingNext, loadNext } = usePaginationFragment<
+    EncodeQueueRefetchQuery,
+    EncodeQueueFragment_query$key
+  >(FRAGMENT, $key)
+
+  const [commit] = useMutation<EncodeQueueCancelMutation>(MUTATION)
+
+  const cancel = React.useCallback(
+    (entry: EncodeEntry) => {
+      commit({
+        variables: {
+          input: {
+            encode_id: entry.id,
+          },
+        },
+      })
+    },
+    [commit]
+  )
+
+  return (
+    <>
+      <Table headingless aria-label="encode queue" size="sm">
+        <Table.Head>
+          <Table.Column key="name" isRowHeader>
+            name
+          </Table.Column>
+          <Table.Column key="stats">statistics</Table.Column>
+        </Table.Head>
+
+        <Table.Body items={data.encode_queue?.edges ?? []}>
+          {(item) => (
+            <Table.Row id={item.node.id}>
+              <Table.Cell>
+                <Link href={`/encode/${item.node.id}`}>{item.node.file.path_info.name}</Link>
+              </Table.Cell>
+              <Table.Cell>
+                <div className="flex flex-row justify-end gap-1">
+                  <EncodeStatus $key={item.node} />
+
+                  {item.node.status === 'ENCODING' && (
+                    <>
+                      <EncodeSpeed $key={item.node} />
+
+                      <EncodePercent $key={item.node} />
+                    </>
+                  )}
+
+                  {(item.node.status === 'COMPLETED' ||
+                    item.node.status === 'CANCELLED' ||
+                    item.node.status === 'FAILED') && <EncodeDuration $key={item.node} />}
+
+                  {item.node.status !== 'COMPLETED' &&
+                    item.node.status !== 'CANCELLED' &&
+                    item.node.status !== 'FAILED' && (
+                      <div className="flex flex-row justify-end gap-2">
+                        <Button color="neutral" size="xs" onPress={() => cancel(item.node)}>
+                          <IconCircleX size={16} />
+                        </Button>
+                      </div>
+                    )}
+                </div>
+              </Table.Cell>
+            </Table.Row>
+          )}
+        </Table.Body>
+      </Table>
+
+      {hasNext && (
+        <div className="flex flex-row items-center justify-center p-2">
+          <Button isLoading={isLoadingNext} size="xs" onPress={() => loadNext(8)}>
+            Show more
+          </Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default EncodeQueue

app/src/components/interfaces/dashboard/index.ts

@@ -0,0 +1 @@
+export { default as EncodeQueue } from '@/components/interfaces/dashboard/encode-queue/EncodeQueue'

app/src/components/interfaces/encode/chips/EncodeDuration.tsx

@@ -38,7 +38,7 @@ const EncodeDuration: React.FC<EncodeDurationChipProps> = ({ $key }) => {
   }, [data.cancelled_at, data.completed_at, data.failed_at, data.status])
 
   return (
-    <Chip color="info" title={dayjs(date).format('L LT')}>
+    <Chip color="indigo" title={dayjs(date).format('L LT')}>
       {dayjs.duration(dayjs(date).diff(data.created_at)).format('H[h] m[m] s[s]')}
     </Chip>
   )

app/src/components/interfaces/encode/chips/EncodePercent.tsx

@@ -45,7 +45,7 @@ const EncodePercent: React.FC<EncodePercentProps> = ({ $key }) => {
     return undefined
   }
 
-  return <Chip color="brand">{percent(data.percent)}</Chip>
+  return <Chip color="cyan">{percent(data.percent)}</Chip>
 }
 
 export default EncodePercent

app/src/components/interfaces/encode/chips/EncodeSpeed.tsx

@@ -50,11 +50,11 @@ const EncodeSpeed: React.FC<EncodeSpeedProps> = ({ $key }) => {
 
   return (
     <>
-      <Chip color="warning">{data.speed.frames} fps</Chip>
+      <Chip color="emerald">{data.speed.frames} fps</Chip>
 
-      <Chip color="success">{filesize(data.speed.bitrate * 0.125, { bits: true }).toLowerCase()}/s</Chip>
+      <Chip color="emerald">{filesize(data.speed.bitrate * 0.125, { bits: true }).toLowerCase()}/s</Chip>
 
-      <Chip color="info">{data.speed.scale.toFixed(2)}x</Chip>
+      <Chip color="emerald">{data.speed.scale.toFixed(2)}x</Chip>
     </>
   )
 }

app/src/components/interfaces/encode/chips/EncodeStatus.tsx

@@ -24,20 +24,8 @@ const EncodeStatus: React.FC<EncodeStatusChipProps> = ({ $key }) => {
 
   const color = React.useMemo<ChipProps['color']>(() => {
     switch (data.status) {
-      case 'SUBMITTED':
-        return 'info'
-
-      case 'QUEUED':
-        return 'info'
-
-      case 'ENCODING':
-        return 'success'
-
-      case 'DEGRADED':
-        return 'warning'
-
       case 'COMPLETED':
-        return 'success'
+        return 'brand'
 
       case 'CANCELLED':
         return 'neutral'
@@ -46,7 +34,7 @@ const EncodeStatus: React.FC<EncodeStatusChipProps> = ({ $key }) => {
         return 'danger'
 
       default:
-        return 'neutral'
+        return 'warning'
     }
   }, [data.status])
 

app/src/components/interfaces/explore/table/ExploreTable.tsx

@@ -71,7 +71,9 @@ const ExploreTable: React.FC<ExploreTableProps> = ({ $key }) => {
             </Table.Cell>
 
             <Table.Cell>
-              <Typography.Paragraph className="text-right">{filesize(item.size, { base: 2 })}</Typography.Paragraph>
+              <Typography.Paragraph className="text-sm text-right" variant="subtitle">
+                {filesize(item.size, { base: 2 })}
+              </Typography.Paragraph>
             </Table.Cell>
           </Table.Row>
         )}