Change ordering of manage nav items

elan-ev · Feb 11, 2025 · bc2f541 · bc2f541
1 parent 0ad00d4
commit bc2f541
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 52 deletions.
diff --git a/frontend/src/layout/header/UserBox.tsx b/frontend/src/layout/header/UserBox.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from "react-i18next";
 import {
     LuAlertTriangle, LuLogIn, LuMoon, LuSun, LuFolder, LuFilm,
     LuUpload, LuVideo, LuLogOut, LuChevronDown, LuUserCheck,
-    LuFilePlus,
+    LuPlusCircle,
 } from "react-icons/lu";
 import { HiOutlineFire, HiOutlineTranslate } from "react-icons/hi";
 import {
-    match, ProtoButton, screenWidthAbove, screenWidthAtMost,
+    match, ProtoButton, screenWidthAbove, screenWidthAtMost, Spinner,
     HeaderMenuItemDef, HeaderMenuProps, WithHeaderMenu, checkboxMenuItem, useColorScheme,
 } from "@opencast/appkit";
 
@@ -17,7 +17,6 @@ import { Link } from "../../router";
 import { User, useUser } from "../../User";
 import { ActionIcon, ICON_STYLE } from "./ui";
 import CONFIG from "../../config";
-import { Spinner } from "@opencast/appkit";
 import { focusStyle } from "../../ui";
 import { ExternalLink } from "../../relay/auth";
 import { COLORS } from "../../color";
@@ -226,24 +225,12 @@ const LoggedIn: React.FC<LoggedInProps> = ({ user }) => {
             children: t("manage.my-videos.title"),
             css: indent,
         },
-        {
-            icon: <SeriesIcon />,
-            wrapper: <Link to={ManageSeriesRoute.url} />,
-            children: t("manage.my-series.title"),
-            css: indent,
-        },
         ...user.canUpload ? [{
             icon: <LuUpload />,
             wrapper: <Link to={UploadRoute.url} />,
             children: t("upload.title"),
             css: indent,
         }] : [],
-        {
-            icon: <LuFilePlus />,
-            wrapper: <Link to={CreateSeriesRoute.url} />,
-            children: t("manage.my-series.create.title"),
-            css: indent,
-        },
         ...user.canUseStudio ? [{
             icon: <LuVideo />,
             wrapper: <ExternalLink
@@ -258,6 +245,18 @@ const LoggedIn: React.FC<LoggedInProps> = ({ user }) => {
             children: t("manage.dashboard.studio-tile-title"),
             css: { ...indent, width: "100%" },
         }] : [],
+        {
+            icon: <SeriesIcon />,
+            wrapper: <Link to={ManageSeriesRoute.url} />,
+            children: t("manage.my-series.title"),
+            css: indent,
+        },
+        {
+            icon: <LuPlusCircle />,
+            wrapper: <Link to={CreateSeriesRoute.url} />,
+            children: t("manage.my-series.create.title"),
+            css: indent,
+        },
 
         // Logout button
         {

diff --git a/frontend/src/routes/manage/index.tsx b/frontend/src/routes/manage/index.tsx
@@ -21,7 +21,6 @@ import { COLORS } from "../../color";
 import { useMenu } from "../../layout/MenuState";
 import CONFIG from "../../config";
 import { translatedConfig } from "../../util";
-import i18n from "../../i18n";
 import { UploadRoute } from "../Upload";
 import { ManageVideosRoute } from "./Video";
 import SeriesIcon from "../../icons/series.svg";
@@ -85,29 +84,57 @@ type ManageNavProps = {
 };
 
 export const ManageNav: React.FC<ManageNavProps> = ({ active }) => {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const user = useUser();
     const menu = useMenu();
     const isDark = useColorScheme().scheme === "dark";
 
+    const entries: [NonNullable<ManageNavProps["active"]>, string, ReactElement][] = [];
+
     /* eslint-disable react/jsx-key */
-    const entries: [NonNullable<ManageNavProps["active"]>, string, ReactElement][] = [
-        [PATH, t("manage.dashboard.title"), <LuLayoutTemplate />],
-        [ManageVideosRoute.url, t("manage.my-videos.title"), <LuFilm />],
-        [ManageSeriesRoute.url, t("manage.my-series.title"), <SeriesIcon />],
-        [CreateSeriesRoute.url, t("manage.my-series.create.title"), <LuPlusCircle />],
-    ];
+    entries.push([PATH, t("manage.dashboard.title"), <LuLayoutTemplate />]);
+
     if (isRealUser(user) && user.canCreateUserRealm) {
-        entries.splice(
-            1, 0, [`/@${user.username}`, t("realm.user-realm.my-page"), <HiOutlineFire />]
-        );
+        entries.push([`/@${user.username}`, t("realm.user-realm.my-page"), <HiOutlineFire />]);
     }
+
+    entries.push([ManageVideosRoute.url, t("manage.my-videos.title"), <LuFilm />]);
+
     if (isRealUser(user) && user.canUpload) {
         entries.push([UploadRoute.url, t("upload.title"), <LuUpload />]);
     }
+
+    if (isRealUser(user) && user.canUseStudio) {
+        entries.push(["STUDIO", t("manage.dashboard.studio-tile-title"), <LuVideo />]);
+    }
+
+    entries.push([ManageSeriesRoute.url, t("manage.my-series.title"), <SeriesIcon />]);
+    entries.push([CreateSeriesRoute.url, t("manage.my-series.create.title"), <LuPlusCircle />]);
     /* eslint-enable react/jsx-key */
 
-    const items = entries.map(([path, label, icon]) => (
+    const items = entries.map(([path, label, icon]) => path === "STUDIO" ? (
+        <ExternalLink
+            key={path}
+            service="STUDIO"
+            params={{
+                "return.target": document.location.href,
+                "return.label": translatedConfig(CONFIG.siteTitle, i18n),
+            }}
+            fallback="link"
+            css={{
+                backgroundColor: "inherit",
+                border: "none",
+                color: COLORS.primary0,
+                cursor: "pointer",
+                width: "100%",
+                ...linkWithIconStyle(isDark, "left"),
+                ":hover, :focus-visible": { color: isDark ? COLORS.primary2 : COLORS.primary1 },
+            }}
+        >
+            {icon}
+            {label}
+        </ExternalLink>
+    ) : (
         <LinkWithIcon
             key={path}
             to={path}
@@ -120,30 +147,5 @@ export const ManageNav: React.FC<ManageNavProps> = ({ active }) => {
         </LinkWithIcon>
     ));
 
-    if (isRealUser(user) && user.canUseStudio) {
-        items.push(
-            <ExternalLink
-                service="STUDIO"
-                params={{
-                    "return.target": document.location.href,
-                    "return.label": translatedConfig(CONFIG.siteTitle, i18n),
-                }}
-                fallback="link"
-                css={{
-                    backgroundColor: "inherit",
-                    border: "none",
-                    color: COLORS.primary0,
-                    cursor: "pointer",
-                    width: "100%",
-                    ...linkWithIconStyle(isDark, "left"),
-                    ":hover, :focus-visible": { color: isDark ? COLORS.primary2 : COLORS.primary1 },
-                }}
-            >
-                <LuVideo />
-                {t("manage.dashboard.studio-tile-title")}
-            </ExternalLink>
-        );
-    }
-
     return <LinkList items={items} />;
 };