feat: add insight route in dev

Author: moonrailgun

src/client/components/insights/MetricsBlock.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+interface MetricsBlockProps {
+  title: string;
+  list: string[];
+}
+export const MetricsBlock: React.FC<MetricsBlockProps> = React.memo((props) => {
+  const [title, setTitle] = useState(props.title);
+
+  return (
+    <div className="w-full">
+      <Popover>
+        <PopoverTrigger asChild>
+          <div className="border-muted hover:bg-muted w-full cursor-pointer rounded-lg border p-1">
+            {title}
+          </div>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div>
+            {props.list.map((item, i) => {
+              return <div key={i}>{item}</div>;
+            })}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});
+MetricsBlock.displayName = 'MetricsBlock';

src/client/components/insights/MetricsSection.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MetricsBlock } from './MetricsBlock';
+
+interface MetricsSectionProps {
+  title: string;
+}
+export const MetricsSection: React.FC<MetricsSectionProps> = React.memo(
+  (props) => {
+    return (
+      <div>
+        <div>{props.title}</div>
+
+        <MetricsBlock title={props.title} list={[]} />
+      </div>
+    );
+  }
+);
+MetricsSection.displayName = 'MetricsSection';

src/client/components/layout/DesktopLayout.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   LuActivitySquare,
   LuAreaChart,
+  LuCompass,
   LuFilePieChart,
   LuMonitorDot,
   LuServer,
@@ -67,6 +68,17 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
         <CommandPanel isCollapsed={isCollapsed} />
       </div>
       <Separator />
+      <Nav
+        isCollapsed={isCollapsed}
+        links={[
+          {
+            title: t('Insights'),
+            icon: LuCompass,
+            to: '/insights',
+          },
+        ]}
+      />
+      <Separator />
       <Nav
         isCollapsed={isCollapsed}
         links={[

src/client/routeTree.gen.ts

@@ -22,6 +22,7 @@ import { Route as PlaygroundImport } from './routes/playground'
 import { Route as PageImport } from './routes/page'
 import { Route as MonitorImport } from './routes/monitor'
 import { Route as LoginImport } from './routes/login'
+import { Route as InsightsImport } from './routes/insights'
 import { Route as FeedImport } from './routes/feed'
 import { Route as IndexImport } from './routes/index'
 import { Route as WebsiteOverviewImport } from './routes/website/overview'
@@ -108,6 +109,11 @@ const LoginRoute = LoginImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const InsightsRoute = InsightsImport.update({
+  path: '/insights',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const FeedRoute = FeedImport.update({
   path: '/feed',
   getParentRoute: () => rootRoute,
@@ -260,6 +266,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof FeedImport
       parentRoute: typeof rootRoute
     }
+    '/insights': {
+      preLoaderRoute: typeof InsightsImport
+      parentRoute: typeof rootRoute
+    }
     '/login': {
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
@@ -420,6 +430,7 @@ export const routeTree = rootRoute.addChildren([
     FeedChannelIdEditRoute,
     FeedChannelIdIndexRoute,
   ]),
+  InsightsRoute,
   LoginRoute,
   MonitorRoute.addChildren([
     MonitorAddRoute,

src/client/routes/insights.tsx

@@ -0,0 +1,61 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { useTranslation } from '@i18next-toolkit/react';
+import { CommonWrapper } from '@/components/CommonWrapper';
+import { routeAuthBeforeLoad } from '@/utils/route';
+import { CommonHeader } from '@/components/CommonHeader';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Layout } from '@/components/layout';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+import { cn } from '@/utils/style';
+import { MetricsSection } from '@/components/insights/MetricsSection';
+import { isDev } from '@/utils/env';
+
+export const Route = createFileRoute('/insights')({
+  beforeLoad: (opts) => {
+    if (!isDev) {
+      throw redirect({
+        to: '/',
+      });
+    }
+
+    return routeAuthBeforeLoad?.(opts);
+  },
+  component: PageComponent,
+});
+
+function PageComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <Layout>
+      <CommonWrapper header={<CommonHeader title={t('Insights')} />}>
+        <ResizablePanelGroup
+          className="flex-1 items-stretch"
+          direction="horizontal"
+        >
+          <ResizablePanel collapsedSize={1} className={cn('flex flex-col')}>
+            <ScrollArea className="h-full overflow-hidden p-4">
+              <div>foooooooooo</div>
+            </ScrollArea>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          <ResizablePanel defaultSize={30}>
+            <ScrollArea className="h-full overflow-hidden p-4">
+              <div className="flex flex-col space-y-8">
+                <MetricsSection title="Metrics" />
+                <MetricsSection title="Filters" />
+                <MetricsSection title="Breakdown" />
+              </div>
+            </ScrollArea>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </CommonWrapper>
+    </Layout>
+  );
+}