Better dashboard onboarding process (#604)

<img width="719" alt="image"
src="https://github.com/user-attachments/assets/1a9d10a9-a571-4c61-9702-4cfb4d2efa1c"
/>


<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Enhances dashboard onboarding with a new setup page, refactors metrics
components, and improves UI components and code organization.
> 
>   - **Behavior**:
> - Introduces `SetupPage` in `setup-page.tsx` for onboarding, with
framework selection and key generation.
> - Replaces `OnboardingDialog` with `SetupPage` for a more interactive
onboarding experience.
> - `PageClient` in `page-client.tsx` now toggles between `SetupPage`
and `MetricsPage` based on user count.
>   - **UI Components**:
> - Adds `CodeBlock` component in `code-block.tsx` for displaying code
snippets with syntax highlighting.
> - Enhances `EnvKeys` in `env-keys.tsx` to support downloading keys and
displaying them in tabs.
> - Introduces `InlineCode` component in `inline-code.tsx` for inline
code styling.
>   - **Refactoring**:
> - Moves metrics-related components to `(overview)/(metrics)`
directory.
> - Renames and reorganizes files for better structure, e.g.,
`globe.tsx` and `line-chart.tsx`.
> - Updates `SidebarLayout` and `PageLayout` for improved layout
handling.
>   - **Dependencies**:
> - Adds `react-syntax-highlighter` and its types to `package.json` for
code highlighting.
>   - **Misc**:
>     - Updates `theme.tsx` to improve theme watching logic.
> - Fixes minor issues and improves code readability across several
files.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 194d1ef. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>

Author: fomalhautb

apps/dashboard/package.json

@@ -42,6 +42,7 @@
     "react-globe.gl": "^2.28.2",
     "react-hook-form": "^7.53.1",
     "react-icons": "^5.0.1",
+    "react-syntax-highlighter": "^15.6.1",
     "recharts": "^2.14.1",
     "svix": "^1.32.0",
     "svix-react": "^1.13.0",
@@ -55,6 +56,7 @@
     "@types/node": "20.17.6",
     "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.17",
     "glob": "^10.4.1",
     "import-in-the-middle": "^1.12.0",

apps/dashboard/public/javascript-logo.svg

@@ -1,14 +1,16 @@
+import { useThemeWatcher } from '@/lib/theme';
 import useResizeObserver from '@react-hook/resize-observer';
 import { useUser } from '@stackframe/stack';
 import { getFlagEmoji } from '@stackframe/stack-shared/dist/utils/unicode';
 import { Typography } from '@stackframe/stack-ui';
 import dynamic from 'next/dynamic';
 import { RefObject, use, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { GlobeMethods } from 'react-globe.gl';
+import { globeImages } from '../(utils)/utils';
 
 // https://github.com/vasturiano/react-globe.gl/issues/1#issuecomment-554459831
 const Globe = dynamic(() => import('react-globe.gl').then((mod) => mod.default), { ssr: false });
-const countriesPromise = import('./country-data.geo.json');
+const countriesPromise = import('../(utils)/country-data.geo.json');
 
 function useSize(target: RefObject<HTMLDivElement | null>) {
   const [size, setSize] = useState<DOMRectReadOnly>();
@@ -73,20 +75,7 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
   const user = useUser({ or: "redirect" });
   const displayName = user.displayName ?? user.primaryEmail;
 
-  const [isLightMode, setIsLightMode] = useState<boolean | null>(null);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    const updateIsLightMode = () => {
-      const shouldBeLight = getComputedStyle(document.documentElement).getPropertyValue('color-scheme') === 'light';
-      if (shouldBeLight !== isLightMode) {
-        setIsLightMode(shouldBeLight);
-      }
-      resumeRender();
-    };
-    updateIsLightMode();
-    const interval = setInterval(updateIsLightMode, 10);
-    return () => clearInterval(interval);
-  }, [isLightMode]);
+  const { theme, mounted } = useThemeWatcher();
 
   // Chromium's WebGL is much faster than other browsers, so we can do some extra animations
   const [isFastEngine, setIsFastEngine] = useState<boolean | null>(null);
@@ -172,16 +161,12 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
             </div>
           </div>
         )}
-        {isLightMode !== null && isFastEngine !== null && (
+        {mounted && isFastEngine !== null && (
           <Globe
             key={errorRefreshCount}
             ref={globeRef}
             backgroundColor='#00000000'
-            globeImageUrl={
-              isLightMode
-                ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAAD5Ip3+AAAADUlEQVQIHWO48vjffwAI+QO1AqIWWgAAAABJRU5ErkJggg=='
-                : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAAD5Ip3+AAAADUlEQVQIHWPgF9f8DwAB1wFPLWQXmAAAAABJRU5ErkJggg=='
-            }
+            globeImageUrl={globeImages[theme]}
             width={globeSize?.[0] ?? 64}
             height={128 + (globeSize?.[1] ?? 0)}
             onGlobeReady={() => {
@@ -226,7 +211,7 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
                 const highlight = isFastEngine && country.properties.ISO_A2_EH === selectedCountry?.code;
 
                 if (Number.isNaN(value) || value === null || maxColorValue < 0.0001) {
-                  if (isLightMode) {
+                  if (theme === 'light') {
                     return `hsl(210, 17.20%, ${highlight ? '55.5%' : '45.5%'})`;
                   } else {
                     if (value === null && maxColorValue < 0.0001) {
@@ -238,7 +223,7 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
                   }
                 }
                 const scaled = value / maxColorValue;
-                if (isLightMode) {
+                if (theme === 'light') {
                   return `hsl(${175 * (1 - scaled)}, 100%, ${20 + 40 * scaled + (highlight ? 10 : 0)}%)`;
                 } else {
                   return `hsl(240, 84%, ${24 + 60 * scaled + (highlight ? 10 : 0)}%)`;