feat(ui): Add UI library (#900)

* feat: scaffold UI library

* Update packages/ui/src/components/theme-provider.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* add lock file

* lint/formatting fixes

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/web/src/App.tsx

@@ -8,6 +8,7 @@ import { ErrorPage } from "@components/UI/ErrorPage.tsx";
 import Footer from "@components/UI/Footer.tsx";
 import { useTheme } from "@core/hooks/useTheme.ts";
 import { SidebarProvider, useAppStore, useDeviceStore } from "@core/stores";
+// import { SidebarProvider, ThemeProvider } from "@meshtastic/ui";
 import { Dashboard } from "@pages/Dashboard/index.tsx";
 import { Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
@@ -15,16 +16,16 @@ import { ErrorBoundary } from "react-error-boundary";
 import { MapProvider } from "react-map-gl/maplibre";
 
 export function App() {
+  useTheme();
+
   const { getDevice } = useDeviceStore();
   const { selectedDeviceId, setConnectDialogOpen, connectDialogOpen } =
     useAppStore();
 
   const device = getDevice(selectedDeviceId);
 
-  // Sets up light/dark mode based on user preferences or system settings
-  useTheme();
-
   return (
+    // <ThemeProvider defaultTheme="system" storageKey="theme">
     <ErrorBoundary FallbackComponent={ErrorPage}>
       <NewDeviceDialog
         open={connectDialogOpen}
@@ -40,7 +41,7 @@ export function App() {
           style={{ scrollbarWidth: "thin" }}
         >
           <SidebarProvider>
-            <div className="h-full flex flex-col">
+            <div className="h-full flex flex-1 flex-col">
               {device ? (
                 <div className="h-full flex w-full">
                   <DialogManager />
@@ -61,5 +62,6 @@ export function App() {
         </div>
       </DeviceWrapper>
     </ErrorBoundary>
+    // </ThemeProvider>
   );
 }

packages/web/src/index.css

@@ -1,11 +1,14 @@
 @import "tailwindcss";
-
+/* @import '@meshtastic/ui/theme/default.css'; */
+/* @source "../node_modules/@meshtastic/ui";  */
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
 @view-transition {
   navigation: auto;
 }
 
+
+
 @theme {
   --font-mono:
     Cascadia Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -76,7 +79,7 @@
 
 .animate-fan-out {
   transform: translate(var(--dx), var(--dy));
-  transition: transform 200ms ease-out; /* expand AND collapse */
+  transition: transform 200ms ease-out;
 }
 
 
@@ -91,11 +94,9 @@ body {
 
 body {
   font-family: var(--font-sans);
+
 }
 
-.app-container {
-  height: 100%;
-}
 
 @layer base {
 
@@ -106,6 +107,32 @@ body {
   ::file-selector-button {
     border-color: var(--color-slate-200, currentColor);
   }
+
+  ::-webkit-scrollbar {
+    @apply bg-transparent w-2;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-gray-400;
+  }
+
+  ::-webkit-scrollbar-corner {
+    @apply bg-slate-200;
+  }
+
+  .dark {
+    ::-webkit-scrollbar {
+      @apply bg-transparent w-2;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      @apply bg-slate-600 rounded-4xl;
+    }
+
+    ::-webkit-scrollbar-corner {
+      @apply bg-slate-900;
+    }
+  }
 }
 
 @layer components {