feat: add queue management for admin panel

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;
+}