feat: add sidebar and split components into separate files

app/src/components/interfaces/dashboard/encode-dialog/EncodeDialog.tsx

@@ -0,0 +1,107 @@
+import type { EncodeDialogFragment$key } from '@/__generated__/EncodeDialogFragment.graphql'
+
+import { Button, Card, Chip, Dialog, Typography } from '@giantnodes/react'
+import { IconX } from '@tabler/icons-react'
+import React from 'react'
+import { graphql, useFragment, useSubscription } from 'react-relay'
+
+import EncodeDialogScript from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogScript'
+import EncodeDialogSidebar from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogSidebar'
+import {
+  EncodeDialogContext,
+  EncodeDialogPage,
+  useEncodeDialog,
+} from '@/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook'
+import EncodeStatusBadge from '@/components/ui/encode-badges/EncodeStatusBadge'
+
+const FRAGMENT = graphql`
+  fragment EncodeDialogFragment on Encode {
+    recipe {
+      name
+    }
+    file {
+      path_info {
+        name
+      }
+    }
+    ...EncodeStatusBadgeFragment
+    ...EncodeDialogScriptFragment
+  }
+`
+
+const OUTPUTTED_SUBSCRIPTION = graphql`
+  subscription EncodeDialogOutputtedSubscription {
+    encode_outputted {
+      output
+    }
+  }
+`
+
+type EncodeDialogProps = React.PropsWithChildren & {
+  $key: EncodeDialogFragment$key
+}
+
+const EncodeDialog: React.FC<EncodeDialogProps> = ({ children, $key }) => {
+  const data = useFragment(FRAGMENT, $key)
+  const context = useEncodeDialog({ page: EncodeDialogPage.SCRIPT })
+
+  useSubscription({
+    subscription: OUTPUTTED_SUBSCRIPTION,
+    variables: {},
+  })
+
+  const content = React.useCallback(() => {
+    switch (context.page) {
+      case EncodeDialogPage.SCRIPT:
+        return <EncodeDialogScript $key={data} />
+
+      case EncodeDialogPage.ANALYTICS:
+        return <EncodeDialogScript $key={data} />
+
+      default:
+        throw new Error(`unexpected value ${context.page} was provided.`)
+    }
+  }, [context.page, data])
+
+  return (
+    <Dialog placement="right">
+      {children}
+
+      <Dialog.Content>
+        {({ close }) => (
+          <EncodeDialogContext.Provider value={context}>
+            <Card className="flex flex-row overflow-hidden">
+              <EncodeDialogSidebar />
+
+              <Card className="bg-background">
+                <Card.Header>
+                  <div className="flex flex-row gap-3 justify-between">
+                    <div className="flex flex-row items-center flex-wrap gap-3">
+                      <Typography.Paragraph>{data.file.path_info.name}</Typography.Paragraph>
+
+                      <EncodeStatusBadge $key={data} />
+
+                      <Chip color="info">{data.recipe.name}</Chip>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                      <Button color="transparent" size="xs" onPress={close}>
+                        <IconX size={16} strokeWidth={1} />
+                      </Button>
+                    </div>
+                  </div>
+                </Card.Header>
+
+                <Card.Body className="overflow-hidden">
+                  <div className="flex flex-col grow gap-3 h-full">{content()}</div>
+                </Card.Body>
+              </Card>
+            </Card>
+          </EncodeDialogContext.Provider>
+        )}
+      </Dialog.Content>
+    </Dialog>
+  )
+}
+
+export default EncodeDialog

app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogCommand.tsx

@@ -0,0 +1,23 @@
+import type { EncodeDialogCommandFragment$key } from '@/__generated__/EncodeDialogCommandFragment.graphql'
+
+import { graphql, useFragment } from 'react-relay'
+
+import CodeBlock from '@/components/ui/code-block/CodeBlock'
+
+const FRAGMENT = graphql`
+  fragment EncodeDialogCommandFragment on Encode {
+    command
+  }
+`
+
+type EncodeDialogCommandProps = {
+  $key: EncodeDialogCommandFragment$key
+}
+
+const EncodeDialogCommand: React.FC<EncodeDialogCommandProps> = ({ $key }) => {
+  const data = useFragment(FRAGMENT, $key)
+
+  return <CodeBlock language="powershell">{data.command}</CodeBlock>
+}
+
+export default EncodeDialogCommand

app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogLog.tsx

@@ -0,0 +1,49 @@
+import type { EncodeDialogLogFragment$key } from '@/__generated__/EncodeDialogLogFragment.graphql'
+import type { EncodeDialogLogSubscription } from '@/__generated__/EncodeDialogLogSubscription.graphql'
+
+import { graphql, useFragment, useSubscription } from 'react-relay'
+
+import CodeBlock from '@/components/ui/code-block/CodeBlock'
+import ScrollAnchor from '@/components/ui/ScrollAnchor'
+
+const FRAGMENT = graphql`
+  fragment EncodeDialogLogFragment on Encode {
+    id
+    output
+  }
+`
+
+const SUBSCRIPTION = graphql`
+  subscription EncodeDialogLogSubscription($where: EncodeFilterInput) {
+    encode_outputted(where: $where) {
+      ...EncodeDialogLogFragment
+    }
+  }
+`
+
+type EncodeDialogLogProps = {
+  $key: EncodeDialogLogFragment$key
+}
+
+const EncodeDialogLog: React.FC<EncodeDialogLogProps> = ({ $key }) => {
+  const data = useFragment(FRAGMENT, $key)
+
+  useSubscription<EncodeDialogLogSubscription>({
+    subscription: SUBSCRIPTION,
+    variables: {
+      where: {
+        id: {
+          eq: data.id,
+        },
+      },
+    },
+  })
+
+  return (
+    <ScrollAnchor>
+      <CodeBlock language="powershell">{data.output}</CodeBlock>
+    </ScrollAnchor>
+  )
+}
+
+export default EncodeDialogLog

app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogScript.tsx

@@ -0,0 +1,44 @@
+import type { EncodeDialogScriptFragment$key } from '@/__generated__/EncodeDialogScriptFragment.graphql'
+
+import { Card } from '@giantnodes/react'
+import { graphql, useFragment } from 'react-relay'
+
+import EncodeDialogCommand from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogCommand'
+import EncodeDialogLog from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogLog'
+
+const FRAGMENT = graphql`
+  fragment EncodeDialogScriptFragment on Encode {
+    ...EncodeDialogCommandFragment
+    ...EncodeDialogLogFragment
+  }
+`
+
+type EncodeDialogScriptProps = {
+  $key: EncodeDialogScriptFragment$key
+}
+
+const EncodeDialogScript: React.FC<EncodeDialogScriptProps> = ({ $key }) => {
+  const data = useFragment(FRAGMENT, $key)
+
+  return (
+    <>
+      <Card className="flex-none">
+        <Card.Header>Command</Card.Header>
+
+        <Card.Body>
+          <EncodeDialogCommand $key={data} />
+        </Card.Body>
+      </Card>
+
+      <Card className="shrink">
+        <Card.Header>Logs</Card.Header>
+
+        <Card.Body className="overflow-y-auto">
+          <EncodeDialogLog $key={data} />
+        </Card.Body>
+      </Card>
+    </>
+  )
+}
+
+export default EncodeDialogScript

app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogSidebar.tsx

@@ -0,0 +1,31 @@
+import { Navigation } from '@giantnodes/react'
+import { IconReportAnalytics, IconScript } from '@tabler/icons-react'
+
+import {
+  EncodeDialogPage,
+  useEncodeDialogContext,
+} from '@/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook'
+
+const EncodeDialogSidebar = () => {
+  const { page, setPage } = useEncodeDialogContext()
+
+  return (
+    <Navigation orientation="vertical" size="sm">
+      <Navigation.Segment>
+        <Navigation.Item onClick={() => setPage(EncodeDialogPage.SCRIPT)}>
+          <Navigation.Link href="/" isSelected={page === EncodeDialogPage.SCRIPT}>
+            <IconScript href="/" strokeWidth={1.5} />
+          </Navigation.Link>
+        </Navigation.Item>
+
+        <Navigation.Item onClick={() => setPage(EncodeDialogPage.ANALYTICS)}>
+          <Navigation.Link href="/" isSelected={page === EncodeDialogPage.ANALYTICS}>
+            <IconReportAnalytics href="/" strokeWidth={1.5} />
+          </Navigation.Link>
+        </Navigation.Item>
+      </Navigation.Segment>
+    </Navigation>
+  )
+}
+
+export default EncodeDialogSidebar

app/src/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { createContext } from '@/utilities/context'
+
+export enum EncodeDialogPage {
+  SCRIPT,
+  ANALYTICS,
+}
+
+type UseEncodeDialogReturn = ReturnType<typeof useEncodeDialog>
+
+type UseEncodeDialogProps = {
+  page: EncodeDialogPage
+}
+
+export const useEncodeDialog = (props: UseEncodeDialogProps) => {
+  const [page, setPage] = React.useState<EncodeDialogPage>(props.page)
+
+  return {
+    page,
+    setPage,
+  }
+}
+
+export const [EncodeDialogContext, useEncodeDialogContext] = createContext<UseEncodeDialogReturn>({
+  name: 'EncodeDialogContext',
+  strict: true,
+  errorMessage:
+    'useEncodeDialogContext: `context` is undefined. Seems you forgot to wrap component within <EncodeDialogContext.Provider />',
+})

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

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