chore(ui): adjust ui sidebar and reports page (#1788)

* fix(ui): use ScrollArea so scroll bar is consistent across browser

* chore(ui): tune report page subheader

* chore(ui): collect information sidebar collapsible

* fix-ui

* update

* update

* add usage reports to license table

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

ee/tabby-ui/app/(dashboard)/cluster/page.tsx

@@ -3,7 +3,7 @@ import { Metadata } from 'next'
 import ClusterInfo from './components/cluster'
 
 export const metadata: Metadata = {
-  title: 'Cluster Information'
+  title: 'Cluster'
 }
 
 export default function IndexPage() {

ee/tabby-ui/app/(dashboard)/components/sidebar.tsx

@@ -16,13 +16,11 @@ import {
   CollapsibleTrigger
 } from '@/components/ui/collapsible'
 import {
-  IconBarChart,
+  IconBookOpenText,
   IconChevronRight,
   IconGear,
   IconHome,
   IconLightingBolt,
-  IconNetwork,
-  IconScrollText,
   IconUser
 } from '@/components/ui/icons'
 
@@ -64,17 +62,17 @@ export default function Sidebar({ children, className }: SidebarProps) {
               </SidebarButton>
               {isAdmin && (
                 <>
-                  <SidebarButton href="/cluster">
-                    <IconNetwork /> Cluster Information
-                  </SidebarButton>
-                  <SidebarButton href="/jobs">
-                    <IconScrollText />
-                    Jobs
-                  </SidebarButton>
-                  <SidebarButton href="/reports">
-                    <IconBarChart />
-                    Reports
-                  </SidebarButton>
+                  <SidebarCollapsible
+                    title={
+                      <>
+                        <IconBookOpenText /> Information
+                      </>
+                    }
+                  >
+                    <SidebarButton href="/cluster">Cluster</SidebarButton>
+                    <SidebarButton href="/jobs">Jobs</SidebarButton>
+                    <SidebarButton href="/reports">Reports</SidebarButton>
+                  </SidebarCollapsible>
                   <SidebarCollapsible
                     title={
                       <>
@@ -157,14 +155,10 @@ interface SidebarCollapsibleProps {
   defaultOpen?: boolean
 }
 
-function SidebarCollapsible({
-  title,
-  children,
-  defaultOpen = true
-}: SidebarCollapsibleProps) {
+function SidebarCollapsible({ title, children }: SidebarCollapsibleProps) {
   return (
     <Collapsible
-      defaultOpen={defaultOpen}
+      defaultOpen={true}
       className="[&_svg.ml-auto]:data-[state=open]:rotate-90"
     >
       <CollapsibleTrigger className="w-full">

ee/tabby-ui/app/(dashboard)/layout.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from 'next'
 
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { Header } from '@/components/header'
 
 import Sidebar from './components/sidebar'
@@ -19,10 +20,12 @@ export default function RootLayout({ children }: DashboardLayoutProps) {
   return (
     <main className="flex flex-1">
       <Sidebar />
-      <div className="flex min-h-full flex-1 flex-col">
+
+      {/* Wraps right hand side into ScrollArea, making scroll bar consistent across all browsers */}
+      <ScrollArea className="flex h-[100vh] flex-1 flex-col">
         <Header />
         <div className="flex-1 p-4 lg:p-10">{children}</div>
-      </div>
+      </ScrollArea>
     </main>
   )
 }

ee/tabby-ui/app/(dashboard)/reports/components/report.tsx

@@ -26,6 +26,7 @@ import {
 } from '@/components/ui/select'
 import { Skeleton } from '@/components/ui/skeleton'
 import LoadingWrapper from '@/components/loading-wrapper'
+import { SubHeader } from '@/components/sub-header'
 
 import { queryDailyStats, queryDailyStatsInPastYear } from '../query'
 import type { DailyStats } from '../types/stats'
@@ -147,15 +148,10 @@ export function Report() {
 
   return (
     <div className="mx-auto max-w-5xl">
-      <div className="mb-3 flex flex-col items-center justify-between gap-y-2 md:flex-row md:items-end md:gap-y-0">
-        <div className="flex flex-col">
-          <h1 className="mb-1.5 scroll-m-20 text-center text-4xl font-extrabold tracking-tight md:text-left lg:text-5xl">
-            Reports
-          </h1>
-          <p className="text-muted-foreground">
-            Statistics around Tabby IDE / Extensions
-          </p>
-        </div>
+      <div className="mb-4 flex flex-col items-center justify-between gap-y-2 md:flex-row md:items-end md:gap-y-0">
+        <SubHeader className="mb-0">
+          Statistics around Tabby IDE / Extensions
+        </SubHeader>
 
         <LoadingWrapper
           loading={fetchingDailyState}

ee/tabby-ui/app/(dashboard)/settings/subscription/components/license-table.tsx

@@ -184,6 +184,12 @@ const FEATURES: FeatureGroup[] = [
         team: checked,
         enterprise: checked
       },
+      {
+        name: 'Usage Reports and Analytics',
+        community: checked,
+        team: checked,
+        enterprise: checked
+      },
       {
         name: 'Admin Controls',
         community: dashed,

ee/tabby-ui/components/ui/icons.tsx

@@ -1,8 +1,8 @@
-// FIXME(wwayne): Review each icons and consider re-export from `lucide-react`.
-
 'use client'
 
 import * as React from 'react'
+// FIXME(wwayne): Review each icons and consider re-export from `lucide-react`.
+import { BookOpenText } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 
@@ -1312,6 +1312,13 @@ function IconActivity({ className, ...props }: React.ComponentProps<'svg'>) {
   )
 }
 
+const IconBookOpenText = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof BookOpenText>) => (
+  <BookOpenText className={cn('h4 w-4', className)} {...props} />
+)
+
 export {
   IconEdit,
   IconNextChat,
@@ -1378,5 +1385,6 @@ export {
   IconClock,
   IconStopWatch,
   IconBarChart,
-  IconActivity
+  IconActivity,
+  IconBookOpenText
 }