added tabs and scroll area shadcn components. changing the layout.css to match CMI colors and adding node_modules to gitignore

Author: kimit0310

.gitignore

@@ -1,5 +1,6 @@
 .ruff_cache
 .DS_Store
+node_modules/
 
 # Frontend static build output
 src/MoBI_View/web/static/

frontend/package-lock.json

@@ -15,12 +15,14 @@
   },
   "devDependencies": {
     "@fontsource-variable/inter": "^5.2.8",
+    "@internationalized/date": "^3.12.1",
     "@lucide/svelte": "^1.14.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.57.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^25.6.0",
+    "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
     "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.1",

frontend/package.json

@@ -1 +1,2 @@
+/** This is the layout file */
 export const prerender = true;

frontend/src/routes/+layout.ts

@@ -1,5 +1,11 @@
 <script lang="ts">
-  const websocketUrl = "ws://localhost:8765";
+  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
+  import * as Tabs from "$lib/components/ui/tabs/index.js";
+
+  const channels = Array.from(
+    { length: 10 },
+    (_, index) => `Channel ${index + 1}`,
+  );
 </script>
 
 <svelte:head>
@@ -10,31 +16,25 @@
   />
 </svelte:head>
 
-<main class="shell">
-  <section
-    class="flex w-full max-w-3xl items-center justify-between gap-6 rounded-lg border bg-card p-6 text-card-foreground shadow-sm max-sm:flex-col max-sm:items-start"
-    aria-labelledby="app-title"
-  >
-    <div>
-      <p class="mb-1 text-xs font-semibold text-muted-foreground uppercase">
-        MoBI-View
-      </p>
-      <h1 id="app-title" class="text-3xl leading-tight font-semibold">
-        Real-time stream visualization
-      </h1>
-    </div>
-    <p class="font-mono text-sm text-muted-foreground max-sm:break-all">
-      Frontend scaffold ready for {websocketUrl}
-    </p>
-  </section>
-</main>
+<main class="min-h-screen bg-background p-6 text-foreground">
+  <Tabs.Root value="channels" class="w-full max-w-md">
+    <Tabs.List aria-label="MoBI-View demo tabs">
+      <Tabs.Trigger value="channels">Channels</Tabs.Trigger>
+      <Tabs.Trigger value="details">Details</Tabs.Trigger>
+    </Tabs.List>
 
-<style>
-  .shell {
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: 2rem;
-    box-sizing: border-box;
-  }
-</style>
+    <Tabs.Content value="channels" class="mt-4">
+      <ScrollArea class="h-64 rounded-md border">
+        <div class="p-4">
+          {#each channels as channel}
+            <div class="py-2 text-sm">{channel}</div>
+          {/each}
+        </div>
+      </ScrollArea>
+    </Tabs.Content>
+
+    <Tabs.Content value="details" class="mt-4 rounded-md border p-4 text-sm">
+      Select a channel to view stream details.
+    </Tabs.Content>
+  </Tabs.Root>
+</main>