Add calculator page and enhance header navigation; refactor imports and improve layout

Author: Kaloszer

app/calculator/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import Header from "../components/Header"; // Adjusted import path
+import Calculator from "../components/calculator/Calculator"; // Adjusted import path
+import { WallCalculatorProvider } from "../components/calculator/context/WallCalculatorContext"; // Adjusted import path
+
+export default function CalculatorPage() { // Renamed function for clarity
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <WallCalculatorProvider>
+        <Calculator />
+      </WallCalculatorProvider>
+    </div>
+  );
+}

app/components/Header.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link"; // Add Link import
 import { MoveRight } from "lucide-react"
 import { Button } from "@/components/ui/button"
 
@@ -10,6 +11,10 @@ export default function Header() {
           Calculate thermal performance of wall assemblies
         </p>
       </div>
+      <nav className="flex gap-4 items-center"> {/* Add nav container */}
+        <Link href="/" legacyBehavior><a className="text-sm font-medium hover:underline underline-offset-4">Home</a></Link>
+        <Link href="/calculator" legacyBehavior><a className="text-sm font-medium hover:underline underline-offset-4">Calculator</a></Link>
+      </nav>
       <Button
         variant="ghost"
         size="sm"

app/components/calculator/WallVisualization3D.tsx

@@ -6,6 +6,7 @@ import { Geometry, Base, Subtraction } from '@react-three/csg'
 import { WallComponent, commonMaterials, StudWallConfig } from "./types"
 import { findDewPointPosition } from "@/app/components/calculator/components/TemperatureGradient";
 import * as THREE from "three"; // NEW: Import THREE for DoubleSide
+import { getComponentColor } from "./utils/visualizationHelpers"; // Import the function
 
 interface WallVisualization3DProps {
   components: WallComponent[];
@@ -15,10 +16,6 @@ interface WallVisualization3DProps {
   dewPoint: number;
 }
 
-export const getComponentColor = (material: string) => {
-  const materialInfo = commonMaterials.find(m => m.name === material)
-  return materialInfo ? materialInfo.color : "#95a5a6"
-}
 
 function Studs({ config, depth }: { config: StudWallConfig, depth: number }) {
   const studDepth = config.studDepth / 1000;
@@ -246,4 +243,4 @@ export function WallVisualization3D({ components, studWallConfig, insideTemp, ou
       </div>
     </div>
   )
-}
+}

app/components/house-sample/components/WallSection.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from "react";
 import * as THREE from "three";
 import { WallComponent } from "@/app/components/calculator/types";
-import { getComponentColor } from "@/app/components/calculator/WallVisualization3D";
+import { getComponentColor } from "@/app/components/calculator/utils/visualizationHelpers"; // Corrected import path
 
 interface WallSectionProps {
   position: [number, number, number];
@@ -115,4 +115,4 @@ export function WallSection({
   }
 
   return <group position={position} rotation={rotation}>{wallComponents}</group>;
-}
+}

app/components/house-sample/utils/houseCalculations.ts

@@ -33,12 +33,3 @@ export function calculateRoofHypotenuse(angle: number, width: number): number {
 export function calculateGableWallHeight(baseWallHeight: number, roofHeight: number): number {
   return baseWallHeight + roofHeight;
 }
-
-/**
- * Converts dimensions from millimeters to meters
- * @param mm Dimension in millimeters
- * @returns Dimension in meters
- */
-export function mmToM(mm: number): number {
-  return mm / 1000;
-}

app/page.tsx

@@ -1,16 +1,27 @@
-'use client';
+import Link from 'next/link';
+import Header from './components/Header'; // Keep header for now
 
-import Header from "./components/Header";
-import Calculator from "./components/calculator/Calculator";
-import { WallCalculatorProvider } from "./components/calculator/context/WallCalculatorContext";
-
-export default function Home() {
+export default function StartPage() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <WallCalculatorProvider>
-        <Calculator />
-      </WallCalculatorProvider>
+      <main className="flex-grow flex flex-col items-center justify-center p-6">
+        <h1 className="text-4xl font-bold mb-4">Welcome to Wall U-Value Calculator</h1>
+        <p className="text-lg mb-8 text-center max-w-prose">
+          Calculate the thermal transmittance (U-value) of your wall constructions, visualize temperature gradients, and check for potential condensation issues.
+        </p>
+        <Link href="/calculator" legacyBehavior>
+          <a className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-lg font-semibold">
+            Go to Calculator
+          </a>
+        </Link>
+        {/* Optional: Add link to house sample page if desired */}
+        {/* <Link href="/houseSamplePage" legacyBehavior>
+          <a className="mt-4 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors text-lg font-semibold">
+            View House Sample
+          </a>
+        </Link> */}
+      </main>
     </div>
   );
 }

bun.lockb

@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/**
+ * Converts dimensions from millimeters to meters
+ * @param mm Dimension in millimeters
+ * @returns Dimension in meters
+ */
+export function mmToM(mm: number): number {
+  return mm / 1000;
+}

lib/utils.ts

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"