feat: add queue management for admin panel

packages/frontend/admin/package.json

@@ -9,6 +9,7 @@
     "@affine/graphql": "workspace:*",
     "@affine/routes": "workspace:*",
     "@blocksuite/icons": "^2.2.17",
+    "@queuedash/ui": "^3.14.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.3",
     "@radix-ui/react-aspect-ratio": "^1.1.1",

packages/frontend/admin/src/app.tsx

@@ -26,6 +26,9 @@ export const Accounts = lazy(
 export const Workspaces = lazy(
   () => import(/* webpackChunkName: "workspaces" */ './modules/workspaces')
 );
+export const Queue = lazy(
+  () => import(/* webpackChunkName: "queue" */ './modules/queue')
+);
 export const AI = lazy(
   () => import(/* webpackChunkName: "ai" */ './modules/ai')
 );
@@ -98,6 +101,7 @@ export const App = () => {
                   path={ROUTES.admin.workspaces}
                   element={<Workspaces />}
                 />
+                <Route path={`${ROUTES.admin.queue}/*`} element={<Queue />} />
                 <Route path={ROUTES.admin.ai} element={<AI />} />
                 <Route path={ROUTES.admin.about} element={<About />} />
                 <Route

packages/frontend/admin/src/modules/nav/nav.tsx

@@ -2,7 +2,7 @@ import { buttonVariants } from '@affine/admin/components/ui/button';
 import { cn } from '@affine/admin/utils';
 import { AccountIcon, SelfhostIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { LayoutDashboardIcon } from 'lucide-react';
+import { LayoutDashboardIcon, ListChecksIcon } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 
 import { ServerVersion } from './server-version';
@@ -97,6 +97,12 @@ export function Nav({ isCollapsed = false }: NavProps) {
           label="Workspaces"
           isCollapsed={isCollapsed}
         />
+        <NavItem
+          to="/admin/queue"
+          icon={<ListChecksIcon size={18} />}
+          label="Queue"
+          isCollapsed={isCollapsed}
+        />
         {/* <NavItem
           to="/admin/ai"
           icon={<AiOutlineIcon fontSize={20} />}

packages/frontend/admin/src/modules/queue/index.tsx

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import '@queuedash/ui/dist/styles.css';
+import './queue.css';
+
+import { QueueDashApp } from '@queuedash/ui';
+
+import { Header } from '../header';
+
+export function QueuePage() {
+  return (
+    <div className="h-screen flex-1 flex-col flex overflow-hidden">
+      <Header title="Queue" />
+      <div className="flex-1 overflow-hidden">
+        <QueueDashApp
+          apiUrl={`${environment.subPath}/api/queue/trpc`}
+          basename="/admin/queue"
+        />
+      </div>
+    </div>
+  );
+}
+
+export { QueuePage as Component };

packages/frontend/admin/src/modules/queue/queue.css

@@ -0,0 +1,5 @@
+/* Scoped queuedash modal alignment */
+
+.react-aria-ModalOverlay section[role='dialog'] {
+  transform: unset;
+}

packages/frontend/routes/src/routes.ts

@@ -13,6 +13,7 @@ export const ROUTES = {
     setup: '/admin/setup',
     accounts: '/admin/accounts',
     workspaces: '/admin/workspaces',
+    queue: '/admin/queue',
     ai: '/admin/ai',
     settings: { index: '/admin/settings', module: '/admin/settings/:module' },
     about: '/admin/about',
@@ -30,6 +31,7 @@ export const RELATIVE_ROUTES = {
     setup: 'setup',
     accounts: 'accounts',
     workspaces: 'workspaces',
+    queue: 'queue',
     ai: 'ai',
     settings: { index: 'settings', module: ':module' },
     about: 'about',
@@ -45,6 +47,7 @@ admin.auth = () => '/admin/auth';
 admin.setup = () => '/admin/setup';
 admin.accounts = () => '/admin/accounts';
 admin.workspaces = () => '/admin/workspaces';
+admin.queue = () => '/admin/queue';
 admin.ai = () => '/admin/ai';
 const admin_settings = () => '/admin/settings';
 admin_settings.module = (params: { module: string }) =>