initial commit

frontend/src/app/layout/layout-shell/layout-shell.component.html

@@ -0,0 +1,17 @@
+<div class="layout-shell">
+  <!-- Desktop/Kiosk: Nav Rail on the left -->
+  <app-nav-rail class="layout-shell__nav-rail" />
+
+  <div class="layout-shell__main">
+    <!-- Header bar at top of content area -->
+    <app-header-bar class="layout-shell__header" />
+
+    <!-- Scrollable content area -->
+    <main class="layout-shell__content">
+      <router-outlet />
+    </main>
+  </div>
+
+  <!-- Mobile: Bottom Navigation Bar -->
+  <app-bottom-nav class="layout-shell__bottom-nav" />
+</div>

frontend/src/app/layout/layout-shell/layout-shell.component.scss

@@ -0,0 +1,57 @@
+// ============================================================================
+// Layout Shell — Adaptive layout container
+// Desktop: Nav Rail (left) + Main Content (right)
+// Mobile: Header + Content + Bottom Nav (stacked)
+// ============================================================================
+
+.layout-shell {
+  display: flex;
+  min-height: 100vh;
+  background-color: var(--cc-background);
+}
+
+.layout-shell__nav-rail {
+  flex-shrink: 0;
+}
+
+.layout-shell__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // Prevent flex overflow
+  overflow: hidden;
+}
+
+.layout-shell__header {
+  flex-shrink: 0;
+}
+
+.layout-shell__content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--cc-section-padding);
+}
+
+.layout-shell__bottom-nav {
+  flex-shrink: 0;
+}
+
+// Mobile: Stack layout vertically, add bottom padding for bottom nav
+@media (max-width: 599px) {
+  .layout-shell {
+    flex-direction: column;
+  }
+
+  .layout-shell__content {
+    // Account for bottom nav bar height
+    padding-bottom: calc(var(--cc-bottom-nav-height) + 16px);
+  }
+}
+
+// Tablet: Ensure content padding accommodates collapsed nav rail
+@media (min-width: 600px) and (max-width: 1023px) {
+  .layout-shell__content {
+    padding: 20px;
+  }
+}

frontend/src/app/layout/layout-shell/layout-shell.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavRailComponent } from '../nav-rail/nav-rail.component';
+import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
+import { HeaderBarComponent } from '../header-bar/header-bar.component';
+
+/**
+ * Layout Shell — wraps the main content area with adaptive navigation.
+ * Desktop/Kiosk: Nav Rail (left) + Header + Content
+ * Mobile: Header + Content + Bottom Nav
+ * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
+ */
+@Component({
+  selector: 'app-layout-shell',
+  standalone: true,
+  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent],
+  templateUrl: './layout-shell.component.html',
+  styleUrl: './layout-shell.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LayoutShellComponent {}