Add device info

index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="view-transition" content="same-origin" />
+    <meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap"

src/routeTree.gen.ts

@@ -21,6 +21,7 @@ import { Route as DashboardPeersImport } from './routes/dashboard/peers'
 import { Route as DashboardHelpImport } from './routes/dashboard/help'
 import { Route as DashboardFavoritesImport } from './routes/dashboard/favorites'
 import { Route as DashboardDisclaimerImport } from './routes/dashboard/disclaimer'
+import { Route as DashboardDeviceImport } from './routes/dashboard/device'
 import { Route as DashboardAvailabilitiesImport } from './routes/dashboard/availabilities'
 import { Route as DashboardAboutImport } from './routes/dashboard/about'
 
@@ -76,6 +77,11 @@ const DashboardDisclaimerRoute = DashboardDisclaimerImport.update({
   getParentRoute: () => DashboardRoute,
 } as any)
 
+const DashboardDeviceRoute = DashboardDeviceImport.update({
+  path: '/device',
+  getParentRoute: () => DashboardRoute,
+} as any)
+
 const DashboardAvailabilitiesRoute = DashboardAvailabilitiesImport.update({
   path: '/availabilities',
   getParentRoute: () => DashboardRoute,
@@ -118,6 +124,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardAvailabilitiesImport
       parentRoute: typeof DashboardImport
     }
+    '/dashboard/device': {
+      id: '/dashboard/device'
+      path: '/device'
+      fullPath: '/dashboard/device'
+      preLoaderRoute: typeof DashboardDeviceImport
+      parentRoute: typeof DashboardImport
+    }
     '/dashboard/disclaimer': {
       id: '/dashboard/disclaimer'
       path: '/disclaimer'
@@ -182,6 +195,7 @@ declare module '@tanstack/react-router' {
 interface DashboardRouteChildren {
   DashboardAboutRoute: typeof DashboardAboutRoute
   DashboardAvailabilitiesRoute: typeof DashboardAvailabilitiesRoute
+  DashboardDeviceRoute: typeof DashboardDeviceRoute
   DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute
   DashboardFavoritesRoute: typeof DashboardFavoritesRoute
   DashboardHelpRoute: typeof DashboardHelpRoute
@@ -195,6 +209,7 @@ interface DashboardRouteChildren {
 const DashboardRouteChildren: DashboardRouteChildren = {
   DashboardAboutRoute: DashboardAboutRoute,
   DashboardAvailabilitiesRoute: DashboardAvailabilitiesRoute,
+  DashboardDeviceRoute: DashboardDeviceRoute,
   DashboardDisclaimerRoute: DashboardDisclaimerRoute,
   DashboardFavoritesRoute: DashboardFavoritesRoute,
   DashboardHelpRoute: DashboardHelpRoute,
@@ -214,6 +229,7 @@ export interface FileRoutesByFullPath {
   '/dashboard': typeof DashboardRouteWithChildren
   '/dashboard/about': typeof DashboardAboutRoute
   '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
+  '/dashboard/device': typeof DashboardDeviceRoute
   '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
   '/dashboard/favorites': typeof DashboardFavoritesRoute
   '/dashboard/help': typeof DashboardHelpRoute
@@ -228,6 +244,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/dashboard/about': typeof DashboardAboutRoute
   '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
+  '/dashboard/device': typeof DashboardDeviceRoute
   '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
   '/dashboard/favorites': typeof DashboardFavoritesRoute
   '/dashboard/help': typeof DashboardHelpRoute
@@ -244,6 +261,7 @@ export interface FileRoutesById {
   '/dashboard': typeof DashboardRouteWithChildren
   '/dashboard/about': typeof DashboardAboutRoute
   '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
+  '/dashboard/device': typeof DashboardDeviceRoute
   '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
   '/dashboard/favorites': typeof DashboardFavoritesRoute
   '/dashboard/help': typeof DashboardHelpRoute
@@ -261,6 +279,7 @@ export interface FileRouteTypes {
     | '/dashboard'
     | '/dashboard/about'
     | '/dashboard/availabilities'
+    | '/dashboard/device'
     | '/dashboard/disclaimer'
     | '/dashboard/favorites'
     | '/dashboard/help'
@@ -274,6 +293,7 @@ export interface FileRouteTypes {
     | '/'
     | '/dashboard/about'
     | '/dashboard/availabilities'
+    | '/dashboard/device'
     | '/dashboard/disclaimer'
     | '/dashboard/favorites'
     | '/dashboard/help'
@@ -288,6 +308,7 @@ export interface FileRouteTypes {
     | '/dashboard'
     | '/dashboard/about'
     | '/dashboard/availabilities'
+    | '/dashboard/device'
     | '/dashboard/disclaimer'
     | '/dashboard/favorites'
     | '/dashboard/help'
@@ -333,6 +354,7 @@ export const routeTree = rootRoute
       "children": [
         "/dashboard/about",
         "/dashboard/availabilities",
+        "/dashboard/device",
         "/dashboard/disclaimer",
         "/dashboard/favorites",
         "/dashboard/help",
@@ -351,6 +373,10 @@ export const routeTree = rootRoute
       "filePath": "dashboard/availabilities.tsx",
       "parent": "/dashboard"
     },
+    "/dashboard/device": {
+      "filePath": "dashboard/device.tsx",
+      "parent": "/dashboard"
+    },
     "/dashboard/disclaimer": {
       "filePath": "dashboard/disclaimer.tsx",
       "parent": "/dashboard"

src/routes/dashboard.tsx

@@ -106,6 +106,15 @@ const Layout = () => {
         </Link>
       ),
     },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <Link to="/dashboard/device" {...p}>
+          <TriangleAlert size={ICON_SIZE} />
+          Device
+        </Link>
+      ),
+    },
   ] satisfies MenuItem[];
 
   return (

src/routes/dashboard/device.tsx

@@ -0,0 +1,41 @@
+import { ErrorBoundary } from "@sentry/react";
+import { createFileRoute } from "@tanstack/react-router";
+import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
+import { useEffect } from "react";
+
+const Device = () => {
+  useEffect(() => {
+    const request = new XMLHttpRequest();
+    request.onreadystatechange = function () {
+      if (request.readyState === XMLHttpRequest.DONE) {
+        //
+        // The following headers may often be similar
+        // to those of the original page request...
+        //
+        console.info(request.getAllResponseHeaders());
+      }
+    };
+
+    //
+    // Re-request the same page (document.location)
+    // We hope to get the same or similar response headers to those which
+    // came with the current page, but we have no guarantee.
+    // Since we are only after the headers, a HEAD request may be sufficient.
+    //
+    request.open("HEAD", document.location, true);
+    request.send(null);
+  }, []);
+
+  return (
+    <ErrorBoundary
+      fallback={({ error }) => (
+        <ErrorPlaceholder error={error} subtitle="Cannot retrieve the data." />
+      )}>
+      couc
+    </ErrorBoundary>
+  );
+};
+
+export const Route = createFileRoute("/dashboard/device")({
+  component: Device,
+});