From 8c2b5a19d1d0bb129bd1a11cf6d6e806287a4f70 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Wed, 15 Jan 2025 11:03:07 +0100
Subject: [PATCH] Refactor `manage` code and add series details page

This generalizes the `Nav` and `Details` code that
was used for videos, and repurposes it for series
as well.

With these changes, it should also be fairly
easy to add this for playlists later on.
---
 frontend/src/i18n/locales/de.yaml             |  13 +-
 frontend/src/i18n/locales/en.yaml             |  16 +-
 frontend/src/router.tsx                       |   2 +
 frontend/src/routes/Video.tsx                 |   8 +-
 frontend/src/routes/manage/Series/Details.tsx |  32 +
 frontend/src/routes/manage/Series/Shared.tsx  | 146 +++++
 frontend/src/routes/manage/Series/index.tsx   |  48 +-
 frontend/src/routes/manage/Shared/Details.tsx | 154 +++++
 frontend/src/routes/manage/Shared/Nav.tsx     | 107 ++++
 frontend/src/routes/manage/Shared/Table.tsx   |  10 +-
 frontend/src/routes/manage/Video/Details.tsx  | 221 +++----
 frontend/src/routes/manage/Video/Shared.tsx   | 100 +---
 frontend/src/routes/manage/shared.tsx         | 564 ------------------
 13 files changed, 598 insertions(+), 823 deletions(-)
 create mode 100644 frontend/src/routes/manage/Series/Details.tsx
 create mode 100644 frontend/src/routes/manage/Series/Shared.tsx
 create mode 100644 frontend/src/routes/manage/Shared/Details.tsx
 create mode 100644 frontend/src/routes/manage/Shared/Nav.tsx
 delete mode 100644 frontend/src/routes/manage/shared.tsx

diff --git a/frontend/src/i18n/locales/de.yaml b/frontend/src/i18n/locales/de.yaml
index 1b8523820..6c6bae842 100644
--- a/frontend/src/i18n/locales/de.yaml
+++ b/frontend/src/i18n/locales/de.yaml
@@ -126,8 +126,6 @@ login-page:
 video:
   video: Video
   video-page: 'Video Seite: „{{video}}“'
-  created: Erstellt
-  updated: Zuletzt verändert
   duration: Abspielzeit
   link: Zur Videoseite
   part-of-series: Teil der Serie
@@ -442,6 +440,15 @@ manage:
     no-entries-found: Keine Einträge gefunden.
     missing-date: Unbekannt
 
+  shared:
+    created: Erstellt
+    updated: Zuletzt verändert
+    details:
+      share-direct-link: Via Direktlink teilen
+      copy-direct-link-to-clipboard: Videolink in Zwischenablage kopieren
+    acl:
+      title: Access policy
+
   my-series:
     title: Meine Serien
     content: Inhalt
@@ -451,9 +458,7 @@ manage:
     title: Meine Videos
     details:
       title: Videodetails
-      share-direct-link: Via Direktlink teilen
       set-time: 'Starten bei: '
-      copy-direct-link-to-clipboard: Videolink in Zwischenablage kopieren
       open-in-editor: Im Videoeditor öffnen
       referencing-pages: Referenzierende Seiten
       referencing-pages-explanation: 'Dieses Video wird von den folgenden Seiten referenziert:'
diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
index 77daee062..88b6d45bc 100644
--- a/frontend/src/i18n/locales/en.yaml
+++ b/frontend/src/i18n/locales/en.yaml
@@ -124,8 +124,6 @@ login-page:
 video:
   video: Video
   video-page: 'Video page: “{{video}}”'
-  created: Created
-  updated: Last updated
   duration: Duration
   link: Go to video page
   part-of-series: Part of series
@@ -198,6 +196,7 @@ playlist:
 
 series:
   series: Series
+  series-page: 'Series page: “{{series}}”'
   deleted: Deleted series
   deleted-series-block: The series referenced here was deleted.
   entry-of-series-thumbnail: "Thumbnail for entry of “{{series}}”"
@@ -423,18 +422,27 @@ manage:
     no-entries-found: No entries found.
     missing-date: Unknown
 
+  shared:
+    created: Created
+    updated: Last updated
+    details:
+      share-direct-link: Share via direct link
+      copy-direct-link-to-clipboard: Copy link to clipboard
+    acl:
+      title: Access policy
+
   my-series:
     title: My series
     content: Content
     no-of-videos: '{{count}} videos'
+    details:
+      title: Series details
 
   my-videos:
     title: My videos
     details:
       title: Video details
-      share-direct-link: Share via direct link
       set-time: 'Start at: '
-      copy-direct-link-to-clipboard: Copy video link to clipboard
       open-in-editor: Open in video editor
       referencing-pages: Referencing pages
       referencing-pages-explanation: 'This video is referenced on the following pages:'
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index c9af6ef75..e0ff22ac5 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -30,6 +30,7 @@ import React from "react";
 import { ManageVideoAccessRoute } from "./routes/manage/Video/Access";
 import { DirectPlaylistOCRoute, DirectPlaylistRoute } from "./routes/Playlist";
 import { ManageSeriesRoute } from "./routes/manage/Series";
+import { ManageSeriesDetailsRoute } from "./routes/manage/Series/Details";
 
 
 
@@ -67,6 +68,7 @@ const {
         ManageVideoTechnicalDetailsRoute,
         ManageRealmRoute,
         ManageSeriesRoute,
+        ManageSeriesDetailsRoute,
         UploadRoute,
         AddChildRoute,
         ManageRealmContentRoute,
diff --git a/frontend/src/routes/Video.tsx b/frontend/src/routes/Video.tsx
index f497c8882..cf2cfaab9 100644
--- a/frontend/src/routes/Video.tsx
+++ b/frontend/src/routes/Video.tsx
@@ -1103,7 +1103,7 @@ const ShareButton: React.FC<{ event: SyncedEvent }> = ({ event }) => {
             return <>
                 <div>
                     <CopyableInput
-                        label={t("manage.my-videos.details.copy-direct-link-to-clipboard")}
+                        label={t("manage.shared.details.copy-direct-link-to-clipboard")}
                         css={{ fontSize: 14, width: 400, marginBottom: 6 }}
                         value={url}
                     />
@@ -1285,7 +1285,7 @@ const VideoDate: React.FC<VideoDateProps> = ({ event }) => {
             }
             {updatedFull && <>
                 <br/>
-                <i>{t("video.updated")}</i>: {updatedFull}
+                <i>{t("manage.shared.updated")}</i>: {updatedFull}
             </>}
         </>;
 
@@ -1307,11 +1307,11 @@ const VideoDate: React.FC<VideoDateProps> = ({ event }) => {
         tooltip = <>
             {startedDate
                 ? <><i>{t("video.started")}</i>: {startFull}</>
-                : <><i>{t("video.created")}</i>: {createdFull}</>
+                : <><i>{t("manage.shared.created")}</i>: {createdFull}</>
             }
             {updatedFull && <>
                 <br/>
-                <i>{t("video.updated")}</i>: {updatedFull}
+                <i>{t("manage.shared.updated")}</i>: {updatedFull}
             </>}
         </>;
 
diff --git a/frontend/src/routes/manage/Series/Details.tsx b/frontend/src/routes/manage/Series/Details.tsx
new file mode 100644
index 000000000..a59ef48b8
--- /dev/null
+++ b/frontend/src/routes/manage/Series/Details.tsx
@@ -0,0 +1,32 @@
+import i18n from "../../../i18n";
+import { makeManageSeriesRoute } from "./Shared";
+import { ManageSeriesRoute } from ".";
+import { DirectSeriesRoute } from "../../Series";
+import { DetailsPage, UpdatedCreatedInfo, DirectLink, MetadataSection } from "../Shared/Details";
+
+
+export const ManageSeriesDetailsRoute = makeManageSeriesRoute(
+    "details",
+    "",
+    series => <DetailsPage
+        pageTitle="manage.my-series.details.title"
+        asset={{
+            ...series,
+            description: series.syncedData?.description,
+            urlProps: {
+                url: new URL(DirectSeriesRoute.url({ seriesId: series.id }), document.baseURI),
+            },
+        }}
+        breadcrumb={{
+            label: i18n.t("manage.my-series.title"),
+            link: ManageSeriesRoute.url,
+        }}
+        sections={series => [
+            <UpdatedCreatedInfo key="created-info" asset={series} />,
+            <DirectLink key="direct-link" asset={series} />,
+            <div key="metadata" css={{ marginBottom: 32 }}>
+                <MetadataSection asset={series} />
+            </div>,
+        ]}
+    />,
+);
diff --git a/frontend/src/routes/manage/Series/Shared.tsx b/frontend/src/routes/manage/Series/Shared.tsx
new file mode 100644
index 000000000..ddb1ba44d
--- /dev/null
+++ b/frontend/src/routes/manage/Series/Shared.tsx
@@ -0,0 +1,146 @@
+import { useTranslation } from "react-i18next";
+import { LuShieldCheck, LuPenLine, LuEye } from "react-icons/lu";
+import { graphql } from "react-relay";
+
+import { RootLoader } from "../../../layout/Root";
+import { makeRoute, Route } from "../../../rauta";
+import { loadQuery } from "../../../relay";
+import { NotFound } from "../../NotFound";
+import { b64regex } from "../../util";
+import { seriesId, keyOfId } from "../../../util";
+import CONFIG from "../../../config";
+import { ManageSeriesRoute, SeriesThumbnail } from ".";
+import { SharedSeriesManageQuery } from "./__generated__/SharedSeriesManageQuery.graphql";
+import { DirectSeriesRoute } from "../../Series";
+import { BackLink, ManageAssetNav, SharedManageAssetNavProps } from "../Shared/Nav";
+import { COLORS } from "../../../color";
+
+
+export const PAGE_WIDTH = 1100;
+
+export type QueryResponse = SharedSeriesManageQuery["response"];
+export type Series = NonNullable<QueryResponse["series"]>;
+
+type ManageSeriesSubPageType = "details" | "acl";
+
+/** Helper around `makeRoute` for manage single series subpages. */
+export const makeManageSeriesRoute = (
+    page: ManageSeriesSubPageType,
+    path: string,
+    render: (series: Series, data: QueryResponse) => JSX.Element,
+): Route & { url: (args: { seriesId: string }) => string } => (
+    makeRoute({
+        url: ({ seriesId }: { seriesId: string }) => `/~manage/series/${keyOfId(seriesId)}/${path}`,
+        match: url => {
+            const regex = new RegExp(`^/~manage/series/(${b64regex}+)${path}/?$`, "u");
+            const params = regex.exec(url.pathname);
+            if (params === null) {
+                return null;
+            }
+
+            const id = decodeURIComponent(params[1]);
+            const queryRef = loadQuery<SharedSeriesManageQuery>(query, {
+                id: seriesId(id),
+            });
+
+            return {
+                render: () => <RootLoader
+                    {...{ query, queryRef }}
+                    noindex
+                    nav={data => data.series ? [
+                        <BackLink
+                            key={1}
+                            url={ManageSeriesRoute.url}
+                            title="manage.my-series.title"
+                        />,
+                        <ManageSeriesNav key={2} series={data.series} active={page} />,
+                    ] : []}
+                    render={data => {
+                        if (data.series == null) {
+                            return <NotFound kind="series" />;
+                        }
+                        return render(data.series, data);
+                    }}
+                />,
+                dispose: () => queryRef.dispose(),
+            };
+        },
+    })
+);
+
+
+const query = graphql`
+    query SharedSeriesManageQuery($id: ID!) {
+        ...UserData
+        ...AccessKnownRolesData
+        series: seriesById(id: $id) {
+            id
+            title
+            created
+            updated
+            syncedData { description }
+            entries {
+                __typename
+                ...on AuthorizedEvent {
+                    isLive
+                    syncedData { thumbnail audioOnly }
+                }
+            }
+        }
+    }
+`;
+
+
+type ManageSeriesNavProps = SharedManageAssetNavProps & {
+    series: Series;
+};
+
+const ManageSeriesNav: React.FC<ManageSeriesNavProps> = ({ series, active }) => {
+    const { t } = useTranslation();
+
+    if (series == null) {
+        return null;
+    }
+
+    const id = keyOfId(series.id);
+
+    const navEntries = [
+        {
+            url: `/~manage/series/${id}`,
+            page: "details",
+            body: <><LuPenLine />{t("manage.my-series.details.title")}</>,
+        },
+    ];
+
+    if (CONFIG.allowAclEdit) {
+        navEntries.splice(1, 0, {
+            url: `/~manage/series/${id}/access`,
+            page: "acl",
+            body: <><LuShieldCheck />{t("manage.shared.acl.title")}</>,
+        });
+    }
+
+    const link = DirectSeriesRoute.url({ seriesId: id });
+    const title = series.title;
+    const ariaLabel = t("series.series-page", { series: series.title });
+
+    const additionalStyles = {
+        padding: 8,
+        borderBottom: `2px solid ${COLORS.neutral05}`,
+    };
+
+    const thumbnail = <>
+        <LuEye />
+        <SeriesThumbnail {...{ series }} />
+    </>;
+
+    return <ManageAssetNav {...{
+        active,
+        link,
+        ariaLabel,
+        title,
+        thumbnail,
+        navEntries,
+        additionalStyles,
+    }} />;
+};
diff --git a/frontend/src/routes/manage/Series/index.tsx b/frontend/src/routes/manage/Series/index.tsx
index 22755d061..d1143248b 100644
--- a/frontend/src/routes/manage/Series/index.tsx
+++ b/frontend/src/routes/manage/Series/index.tsx
@@ -25,8 +25,8 @@ import {
 } from "./__generated__/SeriesManageQuery.graphql";
 import { Link } from "../../../router";
 import { ThumbnailStack } from "../../Search";
-import { DirectSeriesRoute } from "../../Series";
 import { SmallDescription } from "../../../ui/metadata";
+import { keyOfId } from "../../../util";
 
 
 const PATH = "/~manage/series" as const;
@@ -122,29 +122,12 @@ export const seriesColumns: ColumnProps[] = [
 
 export const SeriesRow: React.FC<{ series: SingleSeries }> = ({ series }) => {
     // Todo: change to "series details" route when available
-    const link = DirectSeriesRoute.url({ seriesId: series.id });
-
-    // Seems odd, but simply checking `e => e.__typename === "AuthorizedEvent"` will produce
-    // TS2339 errors when compiling.
-    type Entry = SingleSeries["entries"][number];
-    type AuthorizedEvent = Extract<Entry, { __typename: "AuthorizedEvent" }>;
-    const isAuthorizedEvent = (e: Entry): e is AuthorizedEvent =>
-        e.__typename === "AuthorizedEvent";
-
-    const thumbnails = series.entries
-        .filter(isAuthorizedEvent)
-        .map(e => ({
-            isLive: e.isLive,
-            audioOnly: e.syncedData ? e.syncedData.audioOnly : false,
-            thumbnail: e.syncedData?.thumbnail,
-        }));
+    const link = `${PATH}/${keyOfId(series.id)}`;
 
     return (
         <TableRow
             thumbnail={<Link to={link} css={{ ...thumbnailLinkStyle }}>
-                <span css={{ "> div": { width: "100%" } }}>
-                    <ThumbnailStack title={series.title} {...{ thumbnails }} />
-                </span>
+                <SeriesThumbnail {...{ series }} />
             </Link>}
             title={<Link to={link} css={{ ...titleLinkStyle }}>{series.title}</Link>}
             description={series.syncedData && <SmallDescription
@@ -181,3 +164,28 @@ const queryParamsToSeriesVars = createQueryParamsParser<
         offset,
     })
 );
+
+type SeriesThumbnailProps = {
+    series: SingleSeries;
+}
+
+export const SeriesThumbnail: React.FC<SeriesThumbnailProps> = ({ series }) => {
+    // Seems odd, but simply checking `e => e.__typename === "AuthorizedEvent"` will produce
+    // TS2339 errors when compiling.
+    type Entry = SingleSeries["entries"][number];
+    type AuthorizedEvent = Extract<Entry, { __typename: "AuthorizedEvent" }>;
+    const isAuthorizedEvent = (e: Entry): e is AuthorizedEvent =>
+        e.__typename === "AuthorizedEvent";
+
+    const thumbnails = series.entries
+        .filter(isAuthorizedEvent)
+        .map(e => ({
+            isLive: e.isLive,
+            audioOnly: e.syncedData ? e.syncedData.audioOnly : false,
+            thumbnail: e.syncedData?.thumbnail,
+        }));
+
+    return <div css={{ "> div": { width: "100%" } }}>
+        <ThumbnailStack title={series.title} {...{ thumbnails }} />
+    </div>;
+};
diff --git a/frontend/src/routes/manage/Shared/Details.tsx b/frontend/src/routes/manage/Shared/Details.tsx
new file mode 100644
index 000000000..99e676b2b
--- /dev/null
+++ b/frontend/src/routes/manage/Shared/Details.tsx
@@ -0,0 +1,154 @@
+import { ParseKeys } from "i18next";
+import { ReactNode, PropsWithChildren, useState, useId } from "react";
+import { useTranslation } from "react-i18next";
+
+import { ManageRoute } from "..";
+import { COLORS } from "../../../color";
+import { PageTitle } from "../../../layout/header/ui";
+import { Breadcrumbs } from "../../../ui/Breadcrumbs";
+import { NotAuthorized } from "../../../ui/error";
+import { CopyableInput, InputWithCheckbox, TimeInput, Input, TextArea } from "../../../ui/Input";
+import { InputContainer, TitleLabel } from "../../../ui/metadata";
+import { useUser, isRealUser } from "../../../User";
+import { secondsToTimeString } from "../../../util";
+import { PAGE_WIDTH } from "./Nav";
+import { Form } from "../../../ui/Form";
+
+type NarrowedAssetType = {
+    id: string;
+    title: string;
+    created?: string | null;
+    updated?: string | null;
+    description? : string | null;
+    urlProps: {
+        url: URL;
+        withTimestamp?: boolean;
+    };
+}
+
+type SharedDetailsProps = {
+    asset: NarrowedAssetType;
+}
+type PageProps = SharedDetailsProps & {
+    pageTitle: ParseKeys;
+    breadcrumb: {
+        label: string;
+        link: string;
+    };
+    sections: (item: NarrowedAssetType) => ReactNode[];
+};
+export const DetailsPage: React.FC<PageProps> = ({ asset, pageTitle, breadcrumb, sections }) => {
+    const { t } = useTranslation();
+    const breadcrumbs = [
+        { label: t("user.manage-content"), link: ManageRoute.url },
+        breadcrumb,
+    ];
+
+    const user = useUser();
+    if (!isRealUser(user)) {
+        return <NotAuthorized />;
+    }
+
+    return <>
+        <Breadcrumbs path={breadcrumbs} tail={asset.title} />
+        <PageTitle title={t(pageTitle)} />
+        {sections(asset).map((section, i) => (
+            <DetailsSection key={i}>{section}</DetailsSection>
+        ))}
+    </>;
+};
+
+const DetailsSection: React.FC<PropsWithChildren> = ({ children }) => (
+    <section css={{
+        width: PAGE_WIDTH,
+        maxWidth: "100%",
+    }}>
+        <div css={{ margin: "8px 2px", flex: "1 0 auto" }}>
+            {children}
+        </div>
+    </section>
+);
+
+/** Shows the `created` and `updated` timestamps. */
+export const UpdatedCreatedInfo: React.FC<SharedDetailsProps> = ({ asset }) => {
+    const { t, i18n } = useTranslation();
+    const created = asset.created && new Date(asset.created).toLocaleString(i18n.language);
+
+    const updated = asset.updated == null
+        ? null
+        : new Date(asset.updated).toLocaleString(i18n.language);
+
+    return (
+        <div css={{ marginBottom: 16, fontSize: 14 }}>
+            {created && <DateValue label={t("manage.shared.created")} value={created} />}
+            {updated && <DateValue label={t("manage.shared.updated")} value={updated} />}
+        </div>
+    );
+};
+
+type DateValueProps = {
+    label: string;
+    value: string;
+};
+
+const DateValue: React.FC<DateValueProps> = ({ label, value }) => (
+    <span css={{ "&:not(:last-child):after": { content: "'•'", margin: "0 12px" } }}>
+        <span css={{ color: COLORS.neutral60, lineHeight: 1 }}>{label + ":"}</span>
+        <span css={{ marginLeft: 6, marginTop: 4 }}>{value}</span>
+    </span>
+);
+
+export const DirectLink: React.FC<SharedDetailsProps> = ({ asset }) => {
+    const { t } = useTranslation();
+    const [timestamp, setTimestamp] = useState(0);
+    const [checkboxChecked, setCheckboxChecked] = useState(false);
+
+    const url = (asset.urlProps.withTimestamp && timestamp && checkboxChecked)
+        ? new URL(asset.urlProps.url + `?t=${secondsToTimeString(timestamp)}`)
+        : asset.urlProps.url;
+
+    return (
+        <div css={{ marginBottom: 40 }}>
+            <div css={{ marginBottom: 4 }}>
+                {t("manage.shared.details.share-direct-link") + ":"}
+            </div>
+            <CopyableInput
+                label={t("manage.shared.details.copy-direct-link-to-clipboard")}
+                value={url.href}
+                css={{ width: "100%", fontSize: 14, marginBottom: 6 }}
+            />
+            {asset.urlProps.withTimestamp && <InputWithCheckbox
+                {...{ checkboxChecked, setCheckboxChecked }}
+                label={t("manage.my-videos.details.set-time")}
+                input={<TimeInput {...{ timestamp, setTimestamp }} disabled={!checkboxChecked} />}
+            />}
+        </div>
+    );
+};
+
+export const MetadataSection: React.FC<SharedDetailsProps> = ({ asset }) => {
+    const { t } = useTranslation();
+    const titleFieldId = useId();
+    const descriptionFieldId = useId();
+
+    return (
+        <Form noValidate>
+            <InputContainer>
+                <TitleLabel htmlFor={titleFieldId} />
+                <Input
+                    id={titleFieldId}
+                    value={asset.title}
+                    disabled
+                    css={{ width: "100%" }}
+                />
+            </InputContainer>
+
+            <InputContainer>
+                <label htmlFor={descriptionFieldId}>
+                    {t("upload.metadata.description")}
+                </label>
+                <TextArea id={descriptionFieldId} disabled value={asset.description ?? ""} />
+            </InputContainer>
+        </Form>
+    );
+};
diff --git a/frontend/src/routes/manage/Shared/Nav.tsx b/frontend/src/routes/manage/Shared/Nav.tsx
new file mode 100644
index 000000000..6e41c8704
--- /dev/null
+++ b/frontend/src/routes/manage/Shared/Nav.tsx
@@ -0,0 +1,107 @@
+import { ParseKeys } from "i18next";
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import {
+    LuCornerLeftUp,
+} from "react-icons/lu";
+import { CSSObject } from "@emotion/react";
+
+import { ellipsisOverflowCss, LinkList, LinkWithIcon } from "../../../ui";
+import { Link } from "../../../router";
+
+
+
+export const PAGE_WIDTH = 1100;
+export type ManageSubPageType = "details" | "technical-details" | "acl";
+export type SharedManageAssetNavProps = {
+    active: ManageSubPageType;
+};
+
+/** Simple nav element linking back to the asset table overview page. */
+type BackLinkProps = {
+    url: "/~manage/series" | "/~manage/videos";
+    title: ParseKeys;
+};
+export const BackLink: React.FC<BackLinkProps> = ({ url, title }) => {
+    const { t } = useTranslation();
+    const items = [
+        <LinkWithIcon key={url} to={url} iconPos="left">
+            <LuCornerLeftUp />
+            {t(title)}
+        </LinkWithIcon>,
+    ];
+
+    return <LinkList items={items} />;
+};
+
+type NavEntry = {
+    url: string;
+    page: string;
+    body: ReactNode;
+}
+type ManageAssetNavProps = SharedManageAssetNavProps & {
+    link: string;
+    ariaLabel: string;
+    title: string;
+    thumbnail: ReactNode;
+    navEntries: NavEntry[];
+    additionalStyles?: CSSObject;
+}
+export const ManageAssetNav: React.FC<ManageAssetNavProps> = ({
+    active,
+    link,
+    ariaLabel,
+    title,
+    thumbnail,
+    navEntries,
+    additionalStyles,
+}) => {
+    const items = navEntries.map(({ url, page, body }, i) => (
+        <LinkWithIcon key={i} to={url} iconPos="left" active={page === active}>
+            {body}
+        </LinkWithIcon>
+    ));
+
+    const header = (
+        <div css={{ display: "flex", flexDirection: "column" }}>
+            <Link
+                aria-label={ariaLabel}
+                to={link}
+                css={{
+                    display: "block",
+                    position: "relative",
+                    width: "100%",
+                    maxWidth: "calc(40vh * 16 / 9)",
+                    alignSelf: "center",
+                    "& > svg": {
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        zIndex: 5,
+                        fontSize: 64,
+                        color: "white",
+                        transform: "translate(-50%, -50%)",
+                    },
+                    "&:not(:hover, :focus) > svg": {
+                        display: "none",
+                    },
+                    "&:hover > div, &:focus > div": {
+                        filter: "brightness(70%)",
+                    },
+                    ...additionalStyles,
+                }}
+            >
+                {thumbnail}
+            </Link>
+            <div css={{
+                textAlign: "center",
+                fontWeight: "bold",
+                marginTop: 4,
+                marginBottom: 8,
+                ...ellipsisOverflowCss(2),
+            }}>{title}</div>
+        </div>
+    );
+
+    return <LinkList items={[header, ...items]} />;
+};
diff --git a/frontend/src/routes/manage/Shared/Table.tsx b/frontend/src/routes/manage/Shared/Table.tsx
index 85f5bc1d8..d22461660 100644
--- a/frontend/src/routes/manage/Shared/Table.tsx
+++ b/frontend/src/routes/manage/Shared/Table.tsx
@@ -242,19 +242,19 @@ export const descriptionStyle = {
 } as const;
 
 // Used for both `EventRow` and `SeriesRow`.
-export const CreatedColumn: React.FC<{ created?: string }> = ({ created }) => {
+export const DateColumn: React.FC<{ date?: string }> = ({ date }) => {
     const { t, i18n } = useTranslation();
     const isDark = useColorScheme().scheme === "dark";
-    const createdDate = created && new Date(created);
+    const parsedDate = date && new Date(date);
     const greyColor = { color: isDark ? COLORS.neutral60 : COLORS.neutral50 };
 
     return <td css={{ fontSize: 14 }}>
-        {createdDate
+        {parsedDate
             ? <>
-                {createdDate.toLocaleDateString(i18n.language)}
+                {parsedDate.toLocaleDateString(i18n.language)}
                 <br />
                 <span css={greyColor}>
-                    {createdDate.toLocaleTimeString(i18n.language)}
+                    {parsedDate.toLocaleTimeString(i18n.language)}
                 </span>
             </>
             : <i css={greyColor}>
diff --git a/frontend/src/routes/manage/Video/Details.tsx b/frontend/src/routes/manage/Video/Details.tsx
index 775dcb15f..13a5f4bb6 100644
--- a/frontend/src/routes/manage/Video/Details.tsx
+++ b/frontend/src/routes/manage/Video/Details.tsx
@@ -1,32 +1,52 @@
+import i18n from "../../../i18n";
+import { useRef } from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { graphql, useMutation } from "react-relay";
+import { Button, buttonStyle, useAppkitConfig, useColorScheme } from "@opencast/appkit";
 
-import { useId, useRef, useState } from "react";
 import { Link, useRouter } from "../../../router";
 import { NotAuthorized } from "../../../ui/error";
-import { Form } from "../../../ui/Form";
-import { CopyableInput, Input, InputWithCheckbox, TextArea, TimeInput } from "../../../ui/Input";
-import { InputContainer, TitleLabel } from "../../../ui/metadata";
 import { isRealUser, useUser } from "../../../User";
-import { Breadcrumbs } from "../../../ui/Breadcrumbs";
-import { PageTitle } from "../../../layout/header/ui";
-import { AuthorizedEvent, makeManageVideoRoute, PAGE_WIDTH } from "./Shared";
+import { AuthorizedEvent, makeManageVideoRoute } from "./Shared";
 import { ExternalLink } from "../../../relay/auth";
-import { Button, buttonStyle, useAppkitConfig, useColorScheme } from "@opencast/appkit";
-import { COLORS } from "../../../color";
-import { currentRef, secondsToTimeString, translatedConfig } from "../../../util";
+import { currentRef, translatedConfig } from "../../../util";
 import { DirectVideoRoute, VideoRoute } from "../../Video";
-import { ManageRoute } from "..";
 import { ManageVideosRoute } from ".";
 import CONFIG from "../../../config";
-import { graphql, useMutation } from "react-relay";
 import { displayCommitError } from "../Realm/util";
 import { ConfirmationModal, ConfirmationModalHandle } from "../../../ui/Modal";
+import { DetailsPage, UpdatedCreatedInfo, DirectLink, MetadataSection } from "../Shared/Details";
 
 
 export const ManageVideoDetailsRoute = makeManageVideoRoute(
     "details",
     "",
-    event => <Page event={event} />,
+    authEvent => <DetailsPage
+        pageTitle="manage.my-videos.details.title"
+        asset={{
+            ...authEvent,
+            updated: authEvent.syncedData?.updated,
+            urlProps: {
+                url: new URL(DirectVideoRoute.url({ videoId: authEvent.id }), document.baseURI),
+                withTimestamp: true,
+            },
+        }}
+        breadcrumb={{
+            label: i18n.t("manage.my-videos.title"),
+            link: ManageVideosRoute.url,
+        }}
+        sections={event => [
+            <UpdatedCreatedInfo key="created-info" asset={event} />,
+            <ButtonSection key="button-section" event={authEvent} />,
+            <DirectLink key="direct-link" asset={event} />,
+            <div key="metadata" css={{ marginBottom: 32 }}>
+                <MetadataSection asset={event} />
+            </div>,
+            <div key="host-realms" css={{ marginBottom: 32 }}>
+                <HostRealms event={authEvent} />
+            </div>,
+        ]}
+    />
 );
 
 const deleteVideoMutation = graphql`
@@ -35,60 +55,36 @@ const deleteVideoMutation = graphql`
     }
 `;
 
-type Props = {
-    event: AuthorizedEvent;
-};
-
-const Page: React.FC<Props> = ({ event }) => {
+const ButtonSection: React.FC<{ event: AuthorizedEvent }> = ({ event }) => {
     const { t, i18n } = useTranslation();
     const { isHighContrast } = useColorScheme();
     const config = useAppkitConfig();
-
-    const breadcrumbs = [
-        { label: t("user.manage-content"), link: ManageRoute.url },
-        { label: t("manage.my-videos.title"), link: ManageVideosRoute.url },
-    ];
-
     const user = useUser();
     if (!isRealUser(user)) {
         return <NotAuthorized />;
     }
 
-    return <>
-        <Breadcrumbs path={breadcrumbs} tail={event.title} />
-        <PageTitle title={t("manage.my-videos.details.title")} />
-        <section css={{
-            width: PAGE_WIDTH,
-            maxWidth: "100%",
-            marginBottom: 32,
-        }}>
-            <UpdatedCreatedInfo event={event} />
-            <div css={{ margin: "8px 2px", flex: "1 0 auto" }}>
-                <div css={{ display: "flex", gap: 12, marginBottom: 16 }}>
-                    {user.canUseEditor && !event.isLive && event.canWrite && (
-                        <ExternalLink
-                            service="EDITOR"
-                            params={{
-                                id: event.opencastId,
-                                callbackUrl: document.location.href,
-                                callbackSystem: translatedConfig(CONFIG.siteTitle, i18n),
-                            }}
-                            fallback="button"
-                            css={buttonStyle(config, "normal", isHighContrast)}
-                        >
-                            {t("manage.my-videos.details.open-in-editor")}
-                        </ExternalLink>
-                    )}
-                    <DeleteButton {...{ event }} />
-                </div>
-                <DirectLink {...{ event }} />
-                <MetadataSection {...{ event }} />
-            </div>
-        </section>
-        <section css={{ marginBottom: 32 }}>
-            <HostRealms {...{ event }} />
-        </section>
-    </>;
+    return <div css={{ display: "flex", gap: 12, marginBottom: 16 }}>
+        {user.canUseEditor && !event.isLive && event.canWrite && (
+            <ExternalLink
+                service="EDITOR"
+                params={{
+                    id: event.opencastId,
+                    callbackUrl: document.location.href,
+                    callbackSystem: translatedConfig(CONFIG.siteTitle, i18n),
+                }}
+                fallback="button"
+                css={buttonStyle(config, "normal", isHighContrast)}
+            >
+                {t("manage.my-videos.details.open-in-editor")}
+            </ExternalLink>
+        )}
+        <DeleteButton {...{ event }} />
+    </div>;
+};
+
+type Props = {
+    event: AuthorizedEvent;
 };
 
 const DeleteButton: React.FC<Props> = ({ event }) => {
@@ -134,90 +130,6 @@ const DeleteButton: React.FC<Props> = ({ event }) => {
     </>;
 };
 
-const DirectLink: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-    const [timestamp, setTimestamp] = useState(0);
-    const [checkboxChecked, setCheckboxChecked] = useState(false);
-
-    let url = new URL(DirectVideoRoute.url({ videoId: event.id }), document.baseURI);
-    if (timestamp && checkboxChecked) {
-        url = new URL(url + `?t=${secondsToTimeString(timestamp)}`);
-    }
-
-    return (
-        <div css={{ marginBottom: 40 }}>
-            <div css={{ marginBottom: 4 }}>
-                {t("manage.my-videos.details.share-direct-link") + ":"}
-            </div>
-            <CopyableInput
-                label={t("manage.my-videos.details.copy-direct-link-to-clipboard")}
-                value={url.href}
-                css={{ width: "100%", fontSize: 14, marginBottom: 6 }}
-            />
-            <InputWithCheckbox
-                {...{ checkboxChecked, setCheckboxChecked }}
-                label={t("manage.my-videos.details.set-time")}
-                input={<TimeInput {...{ timestamp, setTimestamp }} disabled={!checkboxChecked} />}
-            />
-        </div>
-    );
-};
-
-/** Shows the `created` and `updated` timestamps. */
-const UpdatedCreatedInfo: React.FC<Props> = ({ event }) => {
-    const { t, i18n } = useTranslation();
-    const created = new Date(event.created).toLocaleString(i18n.language);
-    const updated = event.syncedData?.updated == null
-        ? null
-        : new Date(event.syncedData.updated).toLocaleString(i18n.language);
-
-    return (
-        <div css={{ marginBottom: 16, fontSize: 14 }}>
-            <DateValue label={t("video.created")} value={created} />
-            {updated && <DateValue label={t("video.updated")} value={updated} />}
-        </div>
-    );
-};
-
-type DateValueProps = {
-    label: string;
-    value: string;
-};
-
-const DateValue: React.FC<DateValueProps> = ({ label, value }) => (
-    <span css={{ "&:not(:last-child):after": { content: "'•'", margin: "0 12px" } }}>
-        <span css={{ color: COLORS.neutral60, lineHeight: 1 }}>{label + ":"}</span>
-        <span css={{ marginLeft: 6, marginTop: 4 }}>{value}</span>
-    </span>
-);
-
-const MetadataSection: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-    const titleFieldId = useId();
-    const descriptionFieldId = useId();
-
-    return (
-        <Form noValidate>
-            <InputContainer>
-                <TitleLabel htmlFor={titleFieldId} />
-                <Input
-                    id={titleFieldId}
-                    value={event.title}
-                    disabled
-                    css={{ width: "100%" }}
-                />
-            </InputContainer>
-
-            <InputContainer>
-                <label htmlFor={descriptionFieldId}>
-                    {t("upload.metadata.description")}
-                </label>
-                <TextArea id={descriptionFieldId} disabled value={event.description ?? ""} />
-            </InputContainer>
-        </Form>
-    );
-};
-
 const HostRealms: React.FC<Props> = ({ event }) => {
     const { t } = useTranslation();
 
@@ -229,15 +141,18 @@ const HostRealms: React.FC<Props> = ({ event }) => {
             ? <i>{t("manage.my-videos.details.no-referencing-pages")}</i>
             : <>
                 <p>{t("manage.my-videos.details.referencing-pages-explanation")}</p>
-                <ul>{event.hostRealms.map(realm => <li key={realm.id}>
-                    {realm.isMainRoot ? <i>{t("general.homepage")}</i> : realm.name}
-                    &nbsp;
-                    (<Link to={realm.path}>{t("general.page")}</Link>,
-                    &nbsp;
-                    <Link to={VideoRoute.url({ realmPath: realm.path, videoID: event.id })}>
-                        {t("video.video")}
-                    </Link>)
-                </li>)}</ul>
-            </>}
+                <ul>{event.hostRealms.map(realm => (
+                    <li key={realm.id}>
+                        {realm.isMainRoot ? <i>{t("general.homepage")}</i> : realm.name}
+                        &nbsp;
+                        (<Link to={realm.path}>{t("general.page")}</Link>,
+                        &nbsp;
+                        <Link to={VideoRoute.url({ realmPath: realm.path, videoID: event.id })}>
+                            {t("video.video")}
+                        </Link>)
+                    </li>
+                ))}</ul>
+            </>
+        }
     </>;
 };
diff --git a/frontend/src/routes/manage/Video/Shared.tsx b/frontend/src/routes/manage/Video/Shared.tsx
index 2663d3462..946f1e3f6 100644
--- a/frontend/src/routes/manage/Video/Shared.tsx
+++ b/frontend/src/routes/manage/Video/Shared.tsx
@@ -1,21 +1,20 @@
 import { useTranslation } from "react-i18next";
-import { LuCornerLeftUp, LuInfo, LuShieldCheck, LuPlay, LuPenLine } from "react-icons/lu";
+import { LuInfo, LuShieldCheck, LuPlay, LuPenLine } from "react-icons/lu";
 import { graphql } from "react-relay";
 
 import { RootLoader } from "../../../layout/Root";
 import { makeRoute, Route } from "../../../rauta";
 import { loadQuery } from "../../../relay";
-import { ellipsisOverflowCss, LinkList, LinkWithIcon } from "../../../ui";
 import { NotAuthorized } from "../../../ui/error";
 import { NotFound } from "../../NotFound";
 import { b64regex } from "../../util";
 import { Thumbnail } from "../../../ui/Video";
 import { SharedVideoManageQuery } from "./__generated__/SharedVideoManageQuery.graphql";
-import { Link } from "../../../router";
 import { eventId, keyOfId } from "../../../util";
 import { DirectVideoRoute, VideoRoute } from "../../Video";
 import { ManageVideosRoute } from ".";
 import CONFIG from "../../../config";
+import { BackLink, ManageAssetNav, ManageSubPageType } from "../Shared/Nav";
 
 
 export const PAGE_WIDTH = 1100;
@@ -28,7 +27,7 @@ type ManageVideoSubPageType = "details" | "technical-details" | "acl";
 
 /** Helper around `makeRoute` for manage single video subpages. */
 export const makeManageVideoRoute = (
-    page: ManageVideoSubPageType,
+    page: ManageSubPageType,
     path: string,
     render: (event: AuthorizedEvent, data: QueryResponse) => JSX.Element,
     options?: { fetchWorkflowState?: boolean },
@@ -53,7 +52,11 @@ export const makeManageVideoRoute = (
                     {...{ query, queryRef }}
                     noindex
                     nav={data => [
-                        <BackLink key={1} />,
+                        <BackLink
+                            key={1}
+                            url={ManageVideosRoute.url}
+                            title="manage.my-videos.title"
+                        />,
                         <ManageVideoNav key={2} event={data.event} active={page} />,
                     ]}
                     render={data => {
@@ -117,20 +120,6 @@ const query = graphql`
 `;
 
 
-/** Simple nav element linking back to "my videos" overview page. */
-const BackLink: React.FC = () => {
-    const { t } = useTranslation();
-    const items = [
-        <LinkWithIcon key={ManageVideosRoute.url} to={ManageVideosRoute.url} iconPos="left">
-            <LuCornerLeftUp />
-            {t("manage.my-videos.title")}
-        </LinkWithIcon>,
-    ];
-
-    return <LinkList items={items} />;
-};
-
-
 type ManageVideoNavProps = {
     event: Event;
     active: ManageVideoSubPageType;
@@ -148,7 +137,7 @@ const ManageVideoNav: React.FC<ManageVideoNavProps> = ({ event, active }) => {
 
     const id = keyOfId(event.id);
 
-    const entries = [
+    const navEntries = [
         {
             url: `/~manage/videos/${id}`,
             page: "details",
@@ -162,61 +151,34 @@ const ManageVideoNav: React.FC<ManageVideoNavProps> = ({ event, active }) => {
     ];
 
     if (CONFIG.allowAclEdit) {
-        entries.splice(1, 0, {
+        navEntries.splice(1, 0, {
             url: `/~manage/videos/${id}/access`,
             page: "acl",
             body: <><LuShieldCheck />{t("manage.my-videos.acl.title")}</>,
         });
     }
 
-    const items = entries.map(({ url, page, body }, i) => (
-        <LinkWithIcon key={i} to={url} iconPos="left" active={page === active}>
-            {body}
-        </LinkWithIcon>
-    ));
-
-    const videoLink = event.hostRealms.length === 1
+    const link = event.hostRealms.length === 1
         ? VideoRoute.url({ realmPath: event.hostRealms[0].path, videoID: id })
         : DirectVideoRoute.url({ videoId: id });
-
-    const header = (
-        <div css={{ display: "flex", flexDirection: "column" }}>
-            <Link aria-label={t("video.video-page", { video: event.title })} to={videoLink} css={{
-                display: "block",
-                position: "relative",
-                width: "100%",
-                maxWidth: "calc(40vh * 16 / 9)",
-                alignSelf: "center",
-                "& > svg": {
-                    position: "absolute",
-                    top: "50%",
-                    left: "50%",
-                    zIndex: 5,
-                    fontSize: 64,
-                    color: "white",
-                    transform: "translate(-50%, -50%)",
-                },
-                "&:not(:hover, :focus) > svg": {
-                    display: "none",
-                },
-                "&:hover > div, &:focus > div": {
-                    opacity: 0.7,
-                },
-                backgroundColor: "black",
-                borderRadius: 8,
-            }}>
-                <LuPlay />
-                <Thumbnail event={event} />
-            </Link>
-            <div css={{
-                textAlign: "center",
-                fontWeight: "bold",
-                marginTop: 4,
-                marginBottom: 8,
-                ...ellipsisOverflowCss(2),
-            }}>{event.title}</div>
-        </div>
-    );
-
-    return <LinkList items={[header, ...items]} />;
+    const title = event.title;
+    const ariaLabel = t("video.video-page", { video: event.title });
+    const additionalStyles = {
+        backgroundColor: "black",
+        borderRadius: 8,
+    };
+    const thumbnail = <>
+        <LuPlay />
+        <Thumbnail event={event} />
+    </>;
+
+    return <ManageAssetNav {...{
+        active,
+        link,
+        ariaLabel,
+        title,
+        thumbnail,
+        navEntries,
+        additionalStyles,
+    }} />;
 };
diff --git a/frontend/src/routes/manage/shared.tsx b/frontend/src/routes/manage/shared.tsx
deleted file mode 100644
index 199ac2adf..000000000
--- a/frontend/src/routes/manage/shared.tsx
+++ /dev/null
@@ -1,564 +0,0 @@
-import { Card, match, useColorScheme } from "@opencast/appkit";
-import { useState, useRef, useEffect, ReactNode } from "react";
-import { ParseKeys } from "i18next";
-import { useTranslation } from "react-i18next";
-import {
-    LuArrowDownNarrowWide,
-    LuArrowUpWideNarrow,
-    LuChevronLeft,
-    LuChevronRight,
-} from "react-icons/lu";
-
-import FirstPage from "../../icons/first-page.svg";
-import LastPage from "../../icons/last-page.svg";
-import { ManageRoute } from ".";
-import { COLORS } from "../../color";
-import { PageTitle } from "../../layout/header/ui";
-import { Breadcrumbs } from "../../ui/Breadcrumbs";
-import {
-    SortDirection,
-    VideosSortColumn,
-} from "./Video/__generated__/VideoManageQuery.graphql";
-import { Event, EventConnection, EventRow, videoColumns } from "./Video";
-import { Link } from "../../router";
-import { SeriesConnection, SeriesRow, seriesColumns, SingleSeries } from "./Series";
-import { SeriesSortColumn } from "./Series/__generated__/SeriesManageQuery.graphql";
-
-
-type Connection = EventConnection | SeriesConnection;
-type AssetVars = {
-    order: {
-        column: SortColumn;
-        direction: SortDirection;
-    };
-    limit: number;
-    offset: number;
-};
-
-type SharedProps = {
-    connection: Connection;
-    vars: AssetVars;
-};
-
-type ManageAssetsProps = SharedProps & {
-    titleKey: ParseKeys;
-}
-
-const LIMIT = 15;
-
-export const ManageAssets: React.FC<ManageAssetsProps> = ({ connection, vars, titleKey }) => {
-    const { t } = useTranslation();
-
-    const totalCount = connection.totalCount;
-    const limit = vars.limit ?? 15;
-    const pageParam = new URLSearchParams(document.location.search).get("page");
-    const page = pageParam ? parseInt(pageParam, 10) : 1;
-
-    useEffect(() => {
-        const maxPage = Math.max(Math.ceil(totalCount / limit), 1);
-
-        if (page > maxPage) {
-            window.location.href = `?page=${maxPage}`;
-        } else if (page < 1) {
-            window.location.href = "?page=1";
-        }
-    }, [page, totalCount, limit]);
-
-    let inner;
-    if (connection.items.length === 0 && connection.totalCount === 0) {
-        inner = <Card kind="info">{t("manage.asset-table.no-entries-found")}</Card>;
-    } else {
-        inner = <>
-            <PageNavigation {...{ vars, connection }} />
-            <div css={{ flex: "1 0 0", margin: "16px 0" }}>
-                <AssetTable {...{ vars, connection }} />
-            </div>
-            <PageNavigation {...{ vars, connection }} />
-        </>;
-    }
-
-    const title = t(titleKey);
-
-    return (
-        <div css={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
-        }}>
-            <Breadcrumbs
-                path={[{ label: t("user.manage-content"), link: ManageRoute.url }]}
-                tail={title}
-            />
-            <PageTitle title={title} css={{ marginBottom: 32 }}/>
-            {inner}
-        </div>
-    );
-};
-
-const THUMBNAIL_WIDTH = 16 * 8;
-
-type Asset = Event | SingleSeries;
-type SortColumn = VideosSortColumn | SeriesSortColumn;
-
-export type ColumnProps = {
-    key: SortColumn;
-    label: ParseKeys;
-    headerWidth?: number;
-    column: (item: Asset) => ReactNode;
-};
-
-type GenericTableProps = SharedProps & {
-    thumbnailWidth?: number;
-}
-
-const AssetTable: React.FC<GenericTableProps> = ({
-    connection,
-    vars,
-    thumbnailWidth,
-}) => {
-    const { t } = useTranslation();
-
-    // We need to know whether the table header is in its "sticky" position to apply a box
-    // shadow to indicate that the user can still scroll up. This solution uses intersection
-    // observer. Compare: https://stackoverflow.com/a/57991537/2408867
-    const [headerSticks, setHeaderSticks] = useState(false);
-    const tableHeaderRef = useRef<HTMLTableSectionElement>(null);
-    useEffect(() => {
-        const tableHeader = tableHeaderRef.current;
-        if (tableHeader) {
-            const observer = new IntersectionObserver(
-                ([e]) => setHeaderSticks(!e.isIntersecting),
-                { threshold: [1], rootMargin: "-1px 0px 0px 0px" },
-            );
-
-            observer.observe(tableHeader);
-            return () => observer.unobserve(tableHeader);
-        }
-        return () => {};
-    });
-
-    const additionalColumns = match(connection.__typename, {
-        "EventConnection": () => videoColumns,
-        "SeriesConnection": () => seriesColumns,
-    });
-
-    return <div css={{ position: "relative" }}>
-        <table css={{
-            width: "100%",
-            borderSpacing: 0,
-            tableLayout: "fixed",
-            "& > thead": {
-                position: "sticky",
-                top: 0,
-                zIndex: 10,
-                backgroundColor: COLORS.neutral05,
-                "&  > tr > th": {
-                    borderBottom: `1px solid ${COLORS.neutral25}`,
-                    textAlign: "left",
-                    padding: "8px 12px",
-                },
-                ...headerSticks && {
-                    boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",
-                    clipPath: "inset(0px 0px -20px 0px)",
-                },
-            },
-            "& > tbody": {
-                "& > tr:hover, tr:focus-within": {
-                    backgroundColor: COLORS.neutral15,
-                },
-                "& > tr:not(:first-child) > td": {
-                    borderTop: `1px solid ${COLORS.neutral25}`,
-                },
-                "& td": {
-                    padding: 6,
-                    verticalAlign: "top",
-                    "&:not(:first-child)": {
-                        padding: "8px 12px 8px 8px",
-                    },
-                },
-            },
-        }}>
-            <colgroup>
-                {/* Each table has thumbnails, but their width might vary */}
-                <col span={1} css={{ width: (thumbnailWidth ?? THUMBNAIL_WIDTH) + 2 * 6 }} />
-                {/* Each table has a title and description */}
-                <col span={1} />
-                {/*
-                    Additional columns can be declared in the specific column array.
-                */}
-                {additionalColumns?.map(col =>
-                    <col key={col.key} span={1} css={{ width: col.headerWidth ?? 135 }} />)
-                }
-            </colgroup>
-
-            <thead ref={tableHeaderRef}>
-                <tr>
-                    {/* Thumbnail */}
-                    <th></th>
-                    {/* Title */}
-                    <ColumnHeader
-                        label={t("manage.asset-table.columns.title")}
-                        sortKey="TITLE"
-                        {...{ vars }}
-                    />
-                    {/* Sort columns */}
-                    {additionalColumns?.map(col => (
-                        <ColumnHeader
-                            key={col.key}
-                            label={t(col.label)}
-                            sortKey={col.key}
-                            {...{ vars }}
-                        />
-                    ))}
-                </tr>
-            </thead>
-            <tbody>
-                {connection.__typename === "EventConnection" && connection.items.map(event =>
-                    <EventRow key={event.id} event={event} />)
-                }
-                {connection.__typename === "SeriesConnection" && connection.items.map(series =>
-                    <SeriesRow key={series.id} series={series} />)
-                }
-            </tbody>
-        </table>
-    </div>;
-};
-
-// Some styles are used by more than one row component.
-// Declaring these here helps with keeping them in sync.
-export const thumbnailLinkStyle = {
-    ":focus-visible": { outline: "none" },
-    ":focus-within div:first-child": {
-        outline: `2.5px solid ${COLORS.focus}`,
-        outlineOffset: 1,
-    },
-} as const;
-
-export const titleLinkStyle = {
-    ":focus, :focus-visible": {
-        outline: "none",
-    },
-    textDecoration: "none",
-} as const;
-
-export const descriptionStyle = {
-    padding: "0 4px",
-} as const;
-
-// Used for both `EventRow` and `SeriesRow`.
-export const DateColumn: React.FC<{ date?: string }> = ({ date }) => {
-    const { t, i18n } = useTranslation();
-    const isDark = useColorScheme().scheme === "dark";
-    const parsedDate = date && new Date(date);
-    const greyColor = { color: isDark ? COLORS.neutral60 : COLORS.neutral50 };
-
-    return <td css={{ fontSize: 14 }}>
-        {parsedDate
-            ? <>
-                {parsedDate.toLocaleDateString(i18n.language)}
-                <br />
-                <span css={greyColor}>
-                    {parsedDate.toLocaleTimeString(i18n.language)}
-                </span>
-            </>
-            : <i css={greyColor}>
-                {t("manage.asset-table.missing-date")}
-            </i>
-        }
-    </td>;
-};
-
-type TableRowProps = {
-    thumbnail: ReactNode;
-    title: ReactNode;
-    description: ReactNode;
-    customColumns?: ReactNode[];
-    syncInfo?: {
-        isSynced: boolean;
-        notReadyLabel: ParseKeys;
-    };
-};
-
-/**
- * A row in the asset table
- * This is assuming that each asset (video, series, playlist) has a thumbnail, title,
- * and description. These can still be somewhat customized.
- * Additional columns can be declared in the respective asset column arrays.
- */
-export const TableRow: React.FC<TableRowProps> = ({
-    thumbnail,
-    title,
-    description,
-    customColumns,
-    syncInfo,
-}) => {
-    const { t } = useTranslation();
-
-    return <tr>
-        {/* Thumbnail */}
-        <td>{thumbnail}</td>
-        {/* Title & description */}
-        <td>
-            <div css={{
-                display: "flex",
-                alignItems: "baseline",
-                gap: 8,
-            }}>
-                <div css={{
-                    whiteSpace: "nowrap",
-                    textOverflow: "ellipsis",
-                    overflow: "hidden",
-                    padding: "0 4px",
-                    ":focus-within": {
-                        borderRadius: 4,
-                        outline: `2.5px solid ${COLORS.focus}`,
-                    },
-                }}>{title}</div>
-                {syncInfo && !syncInfo.isSynced && (
-                    <span css={{
-                        padding: "0 8px",
-                        fontSize: "small",
-                        borderRadius: 10,
-                        backgroundColor: COLORS.neutral10,
-                    }}>
-                        {t(syncInfo.notReadyLabel)}
-                    </span>
-                )}
-            </div>
-            {description}
-        </td>
-        {customColumns}
-    </tr>;
-};
-
-type ColumnHeaderProps = {
-    label: string;
-    sortKey: SortColumn;
-    vars: AssetVars;
-};
-
-const ColumnHeader: React.FC<ColumnHeaderProps> = ({ label, sortKey, vars }) => {
-    const { t } = useTranslation();
-    const direction = vars.order.column === sortKey && vars.order.direction === "ASCENDING"
-        ? "DESCENDING"
-        : "ASCENDING";
-    const directionTransKey = direction.toLowerCase() as Lowercase<typeof direction>;
-
-    return <th>
-        <Link
-            aria-label={t("manage.asset-table.columns.description",
-                { title: label, direction: t(`manage.asset-table.columns.${directionTransKey}`) })
-            }
-            to={varsToLink({
-                order: {
-                    column: sortKey,
-                    direction,
-                },
-                limit: vars.limit ?? LIMIT,
-                offset: vars.offset ?? 0,
-            })}
-            css={{
-                display: "inline-flex",
-                alignItems: "center",
-                cursor: "pointer",
-                transition: "color 70ms",
-                textDecoration: "none",
-                borderRadius: 4,
-                outlineOffset: 1,
-                "& > svg": {
-                    marginLeft: 6,
-                    fontSize: 22,
-                },
-            }}
-        >
-            {label}
-            {vars.order.column === sortKey && match(vars.order.direction, {
-                // Seems like this is flipped right? But no, a short internal
-                // poll showed that this matches the intuition of almost everyone.
-                "ASCENDING": () => <LuArrowDownNarrowWide />,
-                "DESCENDING": () => <LuArrowUpWideNarrow />,
-            }, () => null)}
-        </Link>
-    </th>;
-};
-
-const PageNavigation: React.FC<SharedProps> = ({ connection, vars }) => {
-    const { t } = useTranslation();
-    const pageInfo = connection.pageInfo;
-    const total = connection.totalCount;
-
-    const limit = vars.limit ?? LIMIT;
-    const offset = vars.offset ?? 0;
-
-    const prevOffset = Math.max(0, offset - limit);
-    const nextOffset = offset + limit;
-    const lastOffset = total > 0
-        ? Math.floor((total - 1) / limit) * limit
-        : 0;
-
-    return (
-        <div css={{
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-            gap: 48,
-        }}>
-            <div>
-                {t("manage.asset-table.page-showing-ids", {
-                    start: connection.pageInfo.startIndex ?? "?",
-                    end: connection.pageInfo.endIndex ?? "?",
-                    total,
-                })}
-            </div>
-            <div css={{ display: "flex", alignItems: "center" }}>
-                {/* First page */}
-                <PageLink
-                    vars={{ ...vars, offset: 0 }}
-                    disabled={!pageInfo.hasPreviousPage && connection.items.length === limit}
-                    label={t("manage.asset-table.navigation.first")}
-                ><FirstPage /></PageLink>
-                {/* Previous page */}
-                <PageLink
-                    vars={{ ...vars, offset: prevOffset }}
-                    disabled={!pageInfo.hasPreviousPage}
-                    label={t("manage.asset-table.navigation.previous")}
-                ><LuChevronLeft /></PageLink>
-                {/* Next page */}
-                <PageLink
-                    vars={{ ...vars, offset: nextOffset }}
-                    disabled={!pageInfo.hasNextPage}
-                    label={t("manage.asset-table.navigation.next")}
-                ><LuChevronRight /></PageLink>
-                {/* Last page */}
-                <PageLink
-                    vars={{ ...vars, offset: lastOffset }}
-                    disabled={!pageInfo.hasNextPage}
-                    label={t("manage.asset-table.navigation.last")}
-                ><LastPage /></PageLink>
-            </div>
-        </div>
-    );
-};
-
-type PageLinkProps = {
-    vars: AssetVars;
-    disabled: boolean;
-    children: ReactNode;
-    label: string;
-};
-
-const PageLink: React.FC<PageLinkProps> = ({ children, vars, disabled, label }) => (
-    <Link
-        to={varsToLink(vars)}
-        tabIndex={disabled ? -1 : 0}
-        aria-hidden={disabled}
-        aria-label={label}
-        css={{
-            background: "none",
-            border: "none",
-            fontSize: 24,
-            padding: "4px 4px",
-            margin: "0 4px",
-            lineHeight: 0,
-            borderRadius: 4,
-            ...disabled
-                ? {
-                    color: COLORS.neutral25,
-                    pointerEvents: "none",
-                }
-                : {
-                    color: COLORS.neutral60,
-                    cursor: "pointer",
-                    ":hover, :focus": {
-                        color: COLORS.neutral90,
-                    },
-                },
-        }}
-    >{children}</Link>
-);
-
-// TODO: add default sort column of playlists
-const DEFAULT_SORT_COLUMN = "CREATED";
-const DEFAULT_SORT_DIRECTION = "DESCENDING";
-
-/** Helper functions to read URL query parameters and convert them into query variables */
-type QueryVars = {
-    limit: number;
-    offset: number;
-    direction: SortDirection;
-}
-export const parsePaginationAndDirection = (
-    queryParams: URLSearchParams,
-    defaultDirection: SortDirection = "DESCENDING",
-): QueryVars => {
-    const limitParam = queryParams.get("limit");
-    const limit = limitParam ? parseInt(limitParam, 10) : LIMIT;
-
-    const pageParam = queryParams.get("page");
-    const page = pageParam ? parseInt(pageParam, 10) : 1;
-    const offset = Math.max(0, (page - 1) * limit);
-
-    const sortOrder = queryParams.get("sortOrder");
-    const direction = sortOrder !== null
-        ? match<string, SortDirection>(sortOrder, {
-            desc: () => "DESCENDING",
-            asc: () => "ASCENDING",
-        })
-        : defaultDirection;
-
-    return { limit, offset, direction };
-};
-
-/**
- * Creates a parser function that extracts query variables for a specific resource
- * (i.e. series, videos or playlists) from URL query parameters.
- * This abstracts the shared logic for parsing pagination and sort direction
- * but still allows specific handling of sort columns.
- */
-export function createQueryParamsParser<ColumnType extends string, T>(
-    parseColumnFn: (sortBy: string | null) => ColumnType,
-    buildVars: (column: ColumnType, { limit, offset, direction }: QueryVars) => T,
-) {
-    return (queryParams: URLSearchParams): T => {
-        const { limit, offset, direction } = parsePaginationAndDirection(queryParams);
-        const sortBy = queryParams.get("sortBy");
-        const column = parseColumnFn(sortBy);
-        return buildVars(column, { direction, limit, offset });
-    };
-}
-
-/** Converts query variables to URL query parameters */
-const varsToQueryParams = (vars: AssetVars): URLSearchParams => {
-    const searchParams = new URLSearchParams();
-
-    // Sort order
-    const isDefaultOrder = vars.order.column === DEFAULT_SORT_COLUMN
-        && vars.order.direction === DEFAULT_SORT_DIRECTION;
-    if (!isDefaultOrder) {
-        searchParams.set("sortBy", vars.order.column.toLowerCase());
-        searchParams.set("sortOrder", match(vars.order.direction, {
-            "ASCENDING": () => "asc",
-            "DESCENDING": () => "desc",
-        }, () => ""));
-    }
-
-    // Pagination
-    const limit = vars.limit ?? LIMIT;
-    const offset = vars.offset ?? 0;
-    const page = Math.floor(offset / limit) + 1;
-
-    if (page !== 1) {
-        searchParams.set("page", String(page));
-    }
-    if (limit !== LIMIT) {
-        searchParams.set("limit", String(limit));
-    }
-
-    return searchParams;
-};
-
-const varsToLink = (vars: AssetVars): string => {
-    const url = new URL(document.location.href);
-    url.search = varsToQueryParams(vars).toString();
-    return url.href;
-};