feat(deps): update monaco-editor to version 0.55.1 and add new dependencies

Author: x0sina

dashboard/bun.lock

@@ -63,6 +63,7 @@
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.465.0",
     "mlkem": "^2.7.0",
+    "monaco-editor": "^0.55.1",
     "next-themes": "^0.4.6",
     "ofetch": "^1.5.1",
     "qrcode.react": "^3.2.0",
@@ -111,4 +112,4 @@
     "wait-port": "^1.1.0"
   },
   "packageManager": "bun@1.0.0"
-}
+}

dashboard/package.json

@@ -21,6 +21,7 @@ import {
   PeriodOption,
   toChartQueryEndDate,
 } from '@/utils/chart-period-utils'
+import useDirDetection from '@/hooks/use-dir-detection'
 
 type DataPoint = {
   time: string
@@ -76,7 +77,7 @@ const isNodeRealtimeStats = (stats: SystemStats | NodeRealtimeStats): stats is N
 export function AreaCostumeChart({ nodeId, currentStats, realtimeStats }: AreaCostumeChartProps) {
   const { t, i18n } = useTranslation()
   const { resolvedTheme } = useTheme()
-
+  const dir = useDirDetection()
   const [realtimeHistory, setRealtimeHistory] = useState<DataPoint[]>([])
   const [realtimeError, setRealtimeError] = useState<Error | null>(null)
   const [viewMode, setViewMode] = useState<'realtime' | 'historical'>('realtime')
@@ -309,10 +310,10 @@ export function AreaCostumeChart({ nodeId, currentStats, realtimeStats }: AreaCo
                 }
               }}
             >
-              <SelectTrigger className="h-9 w-full text-xs sm:w-32">
+              <SelectTrigger className="h-9 w-full text-xs sm:w-32" dir={dir}>
                 <SelectValue>{periodOption.label}</SelectValue>
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent dir={dir}>
                 {PERIOD_OPTIONS.map(option => (
                   <SelectItem key={option.value} value={option.value}>
                     {option.label}

dashboard/src/components/charts/area-costume-chart.tsx

@@ -0,0 +1,3 @@
+import '@/lib/configure-monaco'
+
+export { default, DiffEditor, loader, useMonaco } from '@monaco-editor/react'

dashboard/src/components/common/monaco-editor.ts

@@ -19,7 +19,7 @@ import { UseFormReturn } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 
-const MonacoEditor = lazy(() => import('@monaco-editor/react'))
+const MonacoEditor = lazy(() => import('@/components/common/monaco-editor'))
 const MobileJsonAceEditor = lazy(() => import('@/components/common/mobile-json-ace-editor'))
 const MobileYamlAceEditor = lazy(() => import('@/components/common/mobile-yaml-ace-editor'))
 

dashboard/src/components/dialogs/client-template-modal.tsx

@@ -146,7 +146,7 @@ const createWireGuardCoreConfigJson = (keyPair: { privateKey: string; publicKey:
     2,
   )
 
-const MonacoEditor = lazy(() => import('@monaco-editor/react'))
+const MonacoEditor = lazy(() => import('@/components/common/monaco-editor'))
 const MobileJsonAceEditor = lazy(() => import('@/components/common/mobile-json-ace-editor'))
 
 export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, editingCore, editingCoreId }: CoreConfigModalProps) {

dashboard/src/components/dialogs/core-config-modal.tsx

@@ -1,7 +1,7 @@
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
 import { useGetSystemStats } from '@/service/api'
-import { Users, Wifi } from 'lucide-react'
+import { UserCheck, Users } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Card, CardTitle } from '@/components/ui/card'
@@ -73,7 +73,7 @@ const UsersStatistics = () => {
             />
             <CardTitle className="relative z-10 flex min-w-0 items-center justify-between gap-x-4 overflow-hidden">
               <div className="flex min-w-0 flex-1 items-center gap-x-4 overflow-hidden min-h-8">
-                <Wifi className="h-5 w-5 shrink-0" />
+                <UserCheck className="h-5 w-5 shrink-0" />
                 <span>{t('statistics.activeUsers')}</span>
               </div>
               <span className={cn('mx-2 shrink-0 text-3xl transition-all duration-500', isIncreased.active_users ? 'animate-zoom-out' : '')} style={{ animationDuration: '400ms' }}>

dashboard/src/components/users/users-statistics.tsx

@@ -0,0 +1,36 @@
+import { loader } from '@monaco-editor/react'
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+
+type MonacoInstance = NonNullable<Parameters<typeof loader.config>[0]['monaco']>
+
+type MonacoWorkerFactory = (workerId: string, label: string) => Worker
+
+type MonacoEnvironmentShape = {
+  getWorker?: MonacoWorkerFactory
+}
+
+type MonacoGlobal = typeof globalThis & {
+  MonacoEnvironment?: MonacoEnvironmentShape
+}
+
+const monacoGlobal = typeof self === 'undefined' ? null : (self as MonacoGlobal)
+
+if (monacoGlobal && !monacoGlobal.MonacoEnvironment?.getWorker) {
+  monacoGlobal.MonacoEnvironment = {
+    ...monacoGlobal.MonacoEnvironment,
+    getWorker(_, label) {
+      if (label === 'json') {
+        return new jsonWorker()
+      }
+
+      return new editorWorker()
+    },
+  }
+}
+
+// Bun exposes Monaco through a symlinked package path, which makes the loader's
+// Monaco type and the imported Monaco value look different to TypeScript even
+// though they are the same runtime module.
+loader.config({ monaco: monaco as unknown as MonacoInstance })

dashboard/src/lib/configure-monaco.ts

@@ -148,6 +148,7 @@ export default defineConfig({
       workbox: {
         navigateFallback: '/index.html',
         globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
         skipWaiting: true,
         clientsClaim: true,
         runtimeCaching: [