fix: resolve Next.js warnings and SVG path errors (#98)

* fix: move viewport metadata to separate export

- Remove viewport from metadata export in layout.tsx
- Add separate viewport export following Next.js 14+ conventions
- Fixes unsupported metadata viewport warning

* fix: resolve Next.js warnings and SVG path errors

- Move viewport metadata to separate export in layout.tsx (Next.js 14+ compliance)
- Fix malformed SVG arc command in CategorySidebar.tsx key icon
- Add allowedDevOrigins configuration for cross-origin requests from local networks
- Support all private network ranges without hardcoding specific IPs

Author: michelroegl-brunner

next.config.js

@@ -18,6 +18,30 @@ const config = {
       },
     ],
   },
+  // Allow cross-origin requests from local network ranges
+  allowedDevOrigins: [
+    'http://localhost:3000',
+    'http://127.0.0.1:3000',
+    'http://[::1]:3000',    
+    'http://10.*',
+    'http://172.16.*',
+    'http://172.17.*',
+    'http://172.18.*',
+    'http://172.19.*',
+    'http://172.20.*',
+    'http://172.21.*',
+    'http://172.22.*',
+    'http://172.23.*',
+    'http://172.24.*',
+    'http://172.25.*',
+    'http://172.26.*',
+    'http://172.27.*',
+    'http://172.28.*',
+    'http://172.29.*',
+    'http://172.30.*',
+    'http://172.31.*',
+    'http://192.168.*',
+  ],
 };
 
 export default config;

src/app/_components/CategorySidebar.tsx

@@ -40,7 +40,7 @@ const CategoryIcon = ({ iconName, className = "w-5 h-5" }: { iconName: string; c
     ),
     key: (
       <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1721 9z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1 0 21 9z" />
       </svg>
     ),
     archive: (

src/app/layout.tsx

@@ -1,21 +1,26 @@
 import "~/styles/globals.css";
 
-import { type Metadata } from "next";
+import { type Metadata, type Viewport } from "next";
 import { Geist } from "next/font/google";
 
 import { TRPCReactProvider } from "~/trpc/react";
 
 export const metadata: Metadata = {
   title: "PVE Scripts local",
   description: "Manage and execute Proxmox helper scripts locally with live output streaming",
-  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
   icons: [
     { rel: "icon", url: "/favicon.png", type: "image/png" },
     { rel: "icon", url: "/favicon.ico", sizes: "any" },
     { rel: "apple-touch-icon", url: "/favicon.png" },
   ],
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+};
+
 const geist = Geist({
   subsets: ["latin"],
   variable: "--font-jetbrains-mono",