feat: add dedicated encode detail page

PHILLIPS71 · May 11, 2024 · 5447c62 · 5447c62
1 parent 83a92c4
commit 5447c62
Show file tree

Hide file tree

Showing 19 changed files with 101 additions and 56 deletions.
diff --git a/app/src/app/(dashboard)/@dialog/(.)encode/[id]/page.tsx b/app/src/app/(dashboard)/@dialog/(.)encode/[id]/page.tsx
@@ -5,7 +5,7 @@ import type { page_EncodedDialog_Query } from '@/__generated__/page_EncodedDialo
 import { notFound, useRouter } from 'next/navigation'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
-import { EncodeDialog } from '@/components/interfaces/dashboard'
+import { EncodeDialog } from '@/components/interfaces/encode'
 
 const QUERY = graphql`
   query page_EncodedDialog_Query($where: EncodeFilterInput) {

diff --git a/app/src/app/(dashboard)/encode/[id]/page.tsx b/app/src/app/(dashboard)/encode/[id]/page.tsx
@@ -2,15 +2,22 @@
 
 import type { page_EncodedPage_Query } from '@/__generated__/page_EncodedPage_Query.graphql'
 
-import { notFound, useRouter } from 'next/navigation'
+import { Card, Typography } from '@giantnodes/react'
+import { notFound } from 'next/navigation'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
-import { EncodeDialog } from '@/components/interfaces/dashboard'
+import { EncodeCommandWidget, EncodeOutputWidget, EncodeSizeWidget } from '@/components/interfaces/encode'
+import { FileSystemBreadcrumb } from '@/components/interfaces/file-system'
 
 const QUERY = graphql`
   query page_EncodedPage_Query($where: EncodeFilterInput) {
     encode(where: $where) {
-      ...EncodeDialogFragment
+      file {
+        ...FileSystemBreadcrumbFragment
+      }
+      ...EncodeCommandWidgetFragment
+      ...EncodeOutputWidgetFragment
+      ...EncodeSizeWidgetFragment
     }
   }
 `
@@ -21,9 +28,7 @@ type EncodePageProps = React.PropsWithChildren & {
   }
 }
 
-const EncodePage: React.FC<EncodePageProps> = ({ children, params }) => {
-  const router = useRouter()
-
+const EncodePage: React.FC<EncodePageProps> = ({ params }) => {
   const query = useLazyLoadQuery<page_EncodedPage_Query>(QUERY, {
     where: {
       id: {
@@ -37,9 +42,55 @@ const EncodePage: React.FC<EncodePageProps> = ({ children, params }) => {
   }
 
   return (
-    <EncodeDialog isOpen $key={query.encode} onOpenChange={router.back}>
-      {children}
-    </EncodeDialog>
+    <div className="max-w-6xl mx-auto ">
+      <div className="flex flex-col lg:flex-row gap-3">
+        <div className="flex flex-col grow gap-3">
+          <Card>
+            <Card.Body>
+              <FileSystemBreadcrumb $key={query.encode.file} />
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Header>
+              <Typography.Text>Size</Typography.Text>
+            </Card.Header>
+
+            <Card.Body className="h-56">
+              <EncodeSizeWidget $key={query.encode} />
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Header>
+              <Typography.Text>Command</Typography.Text>
+            </Card.Header>
+
+            <Card.Body>
+              <EncodeCommandWidget $key={query.encode} />
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Header>
+              <Typography.Text>Output</Typography.Text>
+            </Card.Header>
+
+            <Card.Body>
+              <EncodeOutputWidget $key={query.encode} />
+            </Card.Body>
+          </Card>
+        </div>
+
+        <div className="flex flex-col gap-3 min-w-80">
+          <Card>
+            <Card.Header>
+              <Typography.Text>Tbd</Typography.Text>
+            </Card.Header>
+          </Card>
+        </div>
+      </div>
+    </div>
   )
 }
 

diff --git a/app/src/app/(dashboard)/recipes/page.tsx b/app/src/app/(dashboard)/recipes/page.tsx
@@ -23,7 +23,7 @@ const RecipeListPage: React.FC = () => {
   return (
     <div className="max-w-6xl mx-auto">
       <div className="flex flex-col gap-6">
-        <div className="flex lg:flex-row flex-col gap-2">
+        <div className="flex lg:flex-row flex-col gap-3">
           <Typography.HeadingLevel>
             <div className="flex-grow">
               <Typography.Heading level={3}>Recipes</Typography.Heading>

diff --git a/app/src/app/(libraries)/library/[slug]/explore/[[...path]]/page.tsx b/app/src/app/(libraries)/library/[slug]/explore/[[...path]]/page.tsx
@@ -8,20 +8,15 @@ import React, { Suspense } from 'react'
 import { graphql, useLazyLoadQuery } from 'react-relay'
 
 import { useLibraryContext } from '@/app/(libraries)/library/[slug]/use-library.hook'
-import {
-  ExploreBreadcrumbs,
-  ExploreContext,
-  ExploreControls,
-  ExploreTable,
-  useExplore,
-} from '@/components/interfaces/explore'
+import { ExploreContext, ExploreControls, ExploreTable, useExplore } from '@/components/interfaces/explore'
+import { FileSystemBreadcrumb } from '@/components/interfaces/file-system'
 import { ResolutionWidget } from '@/components/widgets'
 
 const QUERY = graphql`
   query page_LibrarySlugExploreQuery($where: FileSystemDirectoryFilterInput, $order: [FileSystemEntrySortInput!]) {
     file_system_directory(where: $where) {
       id
-      ...ExploreBreadcrumbsFragment
+      ...FileSystemBreadcrumbFragment
       ...ExploreControlsFragment
       ...ExploreTableFragment @arguments(order: $order)
     }
@@ -88,7 +83,7 @@ const LibraryExplorePage: React.FC<LibraryExplorePageProps> = ({ params }) => {
           <Card>
             <Card.Header>
               <Suspense fallback="LOADING...">
-                <ExploreBreadcrumbs $key={query.file_system_directory} />
+                <FileSystemBreadcrumb $key={query.file_system_directory} />
               </Suspense>
             </Card.Header>
           </Card>
@@ -109,7 +104,7 @@ const LibraryExplorePage: React.FC<LibraryExplorePageProps> = ({ params }) => {
         </div>
       </ExploreContext.Provider>
 
-      <div className="flex flex-col gap-3 w-80">
+      <div className="flex flex-col gap-3 min-w-80">
         <Card>
           <Card.Header>
             <Typography.Text>Resolution</Typography.Text>

diff --git a/app/src/components/interfaces/dashboard/index.ts b/app/src/components/interfaces/dashboard/index.ts
diff --git a/.../dashboard/encode-dialog/EncodeDialog.tsx → ...interfaces/encode/dialog/EncodeDialog.tsx b/.../dashboard/encode-dialog/EncodeDialog.tsx → ...interfaces/encode/dialog/EncodeDialog.tsx
@@ -6,14 +6,14 @@ import { IconX } from '@tabler/icons-react'
 import React from 'react'
 import { graphql, useFragment, useSubscription } from 'react-relay'
 
-import EncodeDialogSidebar from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogSidebar'
-import EncodeAnalyticsPanel from '@/components/interfaces/dashboard/encode-dialog/panels/EncodeAnalyticsPanel'
-import EncodeDialogScript from '@/components/interfaces/dashboard/encode-dialog/panels/EncodeScriptPanel'
+import EncodeDialogSidebar from '@/components/interfaces/encode/dialog/EncodeDialogSidebar'
+import EncodeAnalyticsPanel from '@/components/interfaces/encode/dialog/panels/EncodeAnalyticsPanel'
+import EncodeDialogScript from '@/components/interfaces/encode/dialog/panels/EncodeScriptPanel'
 import {
   EncodeDialogContext,
   EncodeDialogPanel,
   useEncodeDialog,
-} from '@/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook'
+} from '@/components/interfaces/encode/dialog/use-encode-dialog.hook'
 import EncodeStatusBadge from '@/components/ui/encode-badges/EncodeStatusBadge'
 
 const FRAGMENT = graphql`

diff --git a/...ard/encode-dialog/EncodeDialogSidebar.tsx → ...ces/encode/dialog/EncodeDialogSidebar.tsx b/...ard/encode-dialog/EncodeDialogSidebar.tsx → ...ces/encode/dialog/EncodeDialogSidebar.tsx
@@ -1,10 +1,7 @@
 import { Navigation } from '@giantnodes/react'
 import { IconReportAnalytics, IconScript } from '@tabler/icons-react'
 
-import {
-  EncodeDialogPanel,
-  useEncodeDialogContext,
-} from '@/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook'
+import { EncodeDialogPanel, useEncodeDialogContext } from '@/components/interfaces/encode/dialog/use-encode-dialog.hook'
 
 const EncodeDialogSidebar = () => {
   const { panel, setPanel } = useEncodeDialogContext()

diff --git a/...de-dialog/panels/EncodeAnalyticsPanel.tsx → ...de/dialog/panels/EncodeAnalyticsPanel.tsx b/...de-dialog/panels/EncodeAnalyticsPanel.tsx → ...de/dialog/panels/EncodeAnalyticsPanel.tsx
@@ -1,9 +1,9 @@
 import type { EncodeAnalyticsPanelFragment$key } from '@/__generated__/EncodeAnalyticsPanelFragment.graphql'
 
-import { Card } from '@giantnodes/react'
+import { Card, Typography } from '@giantnodes/react'
 import { graphql, useFragment } from 'react-relay'
 
-import EncodeSizeWidget from '@/components/interfaces/dashboard/encode-dialog/widgets/EncodeSizeWidget'
+import { EncodeSizeWidget } from '@/components/interfaces/encode'
 
 const FRAGMENT = graphql`
   fragment EncodeAnalyticsPanelFragment on Encode {
@@ -20,9 +20,11 @@ const EncodeAnalyticsPanel: React.FC<EncodeAnalyticsPanelProps> = ({ $key }) =>
 
   return (
     <Card>
-      <Card.Header>Size</Card.Header>
+      <Card.Header>
+        <Typography.Text>Size</Typography.Text>
+      </Card.Header>
 
-      <Card.Body className="min-h-56">
+      <Card.Body className="h-56">
         <EncodeSizeWidget $key={data} />
       </Card.Body>
     </Card>

diff --git a/...ncode-dialog/panels/EncodeScriptPanel.tsx → ...ncode/dialog/panels/EncodeScriptPanel.tsx b/...ncode-dialog/panels/EncodeScriptPanel.tsx → ...ncode/dialog/panels/EncodeScriptPanel.tsx
@@ -1,10 +1,9 @@
 import type { EncodeScriptPanelFragment$key } from '@/__generated__/EncodeScriptPanelFragment.graphql'
 
-import { Card } from '@giantnodes/react'
+import { Card, Typography } from '@giantnodes/react'
 import { graphql, useFragment } from 'react-relay'
 
-import EncodeDialogCommand from '@/components/interfaces/dashboard/encode-dialog/widgets/EncodeCommandWidget'
-import EncodeDialogLog from '@/components/interfaces/dashboard/encode-dialog/widgets/EncodeOutputWidget'
+import { EncodeCommandWidget, EncodeOutputWidget } from '@/components/interfaces/encode'
 
 const FRAGMENT = graphql`
   fragment EncodeScriptPanelFragment on Encode {
@@ -23,18 +22,22 @@ const EncodeScriptPanel: React.FC<EncodeScriptPanelProps> = ({ $key }) => {
   return (
     <>
       <Card className="flex-none">
-        <Card.Header>Command</Card.Header>
+        <Card.Header>
+          <Typography.Text>Command</Typography.Text>
+        </Card.Header>
 
         <Card.Body>
-          <EncodeDialogCommand $key={data} />
+          <EncodeCommandWidget $key={data} />
         </Card.Body>
       </Card>
 
       <Card className="shrink">
-        <Card.Header>Output</Card.Header>
+        <Card.Header>
+          <Typography.Text>Output</Typography.Text>
+        </Card.Header>
 
         <Card.Body className="overflow-y-auto">
-          <EncodeDialogLog $key={data} />
+          <EncodeOutputWidget $key={data} />
         </Card.Body>
       </Card>
     </>

diff --git a/...d/encode-dialog/use-encode-dialog.hook.ts → ...s/encode/dialog/use-encode-dialog.hook.ts b/...d/encode-dialog/use-encode-dialog.hook.ts → ...s/encode/dialog/use-encode-dialog.hook.ts
diff --git a/app/src/components/interfaces/encode/index.ts b/app/src/components/interfaces/encode/index.ts
@@ -0,0 +1,5 @@
+export { default as EncodeDialog } from '@/components/interfaces/encode/dialog/EncodeDialog'
+
+export { default as EncodeCommandWidget } from '@/components/interfaces/encode/widgets/EncodeCommandWidget'
+export { default as EncodeOutputWidget } from '@/components/interfaces/encode/widgets/EncodeOutputWidget'
+export { default as EncodeSizeWidget } from '@/components/interfaces/encode/widgets/EncodeSizeWidget'
diff --git a/...de-dialog/widgets/EncodeCommandWidget.tsx → ...es/encode/widgets/EncodeCommandWidget.tsx b/...de-dialog/widgets/EncodeCommandWidget.tsx → ...es/encode/widgets/EncodeCommandWidget.tsx
diff --git a/...ode-dialog/widgets/EncodeOutputWidget.tsx → ...ces/encode/widgets/EncodeOutputWidget.tsx b/...ode-dialog/widgets/EncodeOutputWidget.tsx → ...ces/encode/widgets/EncodeOutputWidget.tsx
diff --git a/...ncode-dialog/widgets/EncodeSizeWidget.tsx → ...faces/encode/widgets/EncodeSizeWidget.tsx b/...ncode-dialog/widgets/EncodeSizeWidget.tsx → ...faces/encode/widgets/EncodeSizeWidget.tsx
diff --git a/app/src/components/interfaces/explore/index.ts b/app/src/components/interfaces/explore/index.ts
@@ -1,4 +1,3 @@
-export { default as ExploreBreadcrumbs } from '@/components/interfaces/explore/breadcrumbs/ExploreBreadcrumbs'
 export { default as ExploreControls } from '@/components/interfaces/explore/controls/ExploreControls'
 export { default as ExploreTable } from '@/components/interfaces/explore/table/ExploreTable'
 

diff --git a/...xplore/breadcrumbs/ExploreBreadcrumbs.tsx → ...aces/file-system/FileSystemBreadcrumb.tsx b/...xplore/breadcrumbs/ExploreBreadcrumbs.tsx → ...aces/file-system/FileSystemBreadcrumb.tsx
@@ -1,11 +1,11 @@
-import type { ExploreBreadcrumbsFragment$key } from '@/__generated__/ExploreBreadcrumbsFragment.graphql'
+import type { FileSystemBreadcrumbFragment$key } from '@/__generated__/FileSystemBreadcrumbFragment.graphql'
 
 import { Breadcrumb, Link } from '@giantnodes/react'
 import React from 'react'
 import { graphql, useFragment } from 'react-relay'
 
 const FRAGMENT = graphql`
-  fragment ExploreBreadcrumbsFragment on FileSystemDirectory {
+  fragment FileSystemBreadcrumbFragment on FileSystemEntry {
     library {
       slug
       path_info {
@@ -20,11 +20,11 @@ const FRAGMENT = graphql`
   }
 `
 
-type ExploreBreadcrumbsProps = {
-  $key: ExploreBreadcrumbsFragment$key
+type FileSystemBreadcrumbProps = {
+  $key: FileSystemBreadcrumbFragment$key
 }
 
-const ExploreBreadcrumbs: React.FC<ExploreBreadcrumbsProps> = ({ $key }) => {
+const FileSystemBreadcrumb: React.FC<FileSystemBreadcrumbProps> = ({ $key }) => {
   const data = useFragment(FRAGMENT, $key)
 
   const directories = React.useMemo<Map<string, string>>(() => {
@@ -73,4 +73,4 @@ const ExploreBreadcrumbs: React.FC<ExploreBreadcrumbsProps> = ({ $key }) => {
   )
 }
 
-export default ExploreBreadcrumbs
+export default FileSystemBreadcrumb
diff --git a/app/src/components/interfaces/file-system/index.ts b/app/src/components/interfaces/file-system/index.ts
@@ -0,0 +1 @@
+export { default as FileSystemBreadcrumb } from '@/components/interfaces/file-system/FileSystemBreadcrumb'
diff --git a/app/src/components/interfaces/index.ts b/app/src/components/interfaces/index.ts
diff --git a/app/src/components/tables/encoding/EncodingTable.tsx b/app/src/components/tables/encoding/EncodingTable.tsx
@@ -10,7 +10,6 @@ import { IconProgressX } from '@tabler/icons-react'
 import React from 'react'
 import { graphql, useMutation, usePaginationFragment, useSubscription } from 'react-relay'
 
-import { EncodeDialog } from '@/components/interfaces/dashboard'
 import { EncodeBadges } from '@/components/ui'
 
 const FRAGMENT = graphql`
@@ -33,7 +32,6 @@ const FRAGMENT = graphql`
             }
           }
           ...EncodeBadgesFragment
-          ...EncodeDialogFragment
         }
       }
       pageInfo {
@@ -132,11 +130,7 @@ const EncodingTable: React.FC<EncodingTableProps> = ({ $key }) => {
           {(item) => (
             <Table.Row id={item.node.id}>
               <Table.Cell>
-                <EncodeDialog $key={item.node}>
-                  <Button as={Link} className="p-0" color="transparent">
-                    {item.node.file.path_info.name}
-                  </Button>
-                </EncodeDialog>
+                <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-2">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as FileSystemBreadcrumb } from '@/components/interfaces/file-system/FileSystemBreadcrumb'