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>
   );
 }