First session of vibe coding the UI

src/main/resources/net/metaunix/openwebfx/main-view.fxml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+
+<BorderPane fx:id="root"
+            xmlns:fx="http://javafx.com/fxml"
+            fx:controller="net.metaunix.openwebfx.controller.MainController"
+            styleClass="root">
+
+    <!-- LEFT SIDEBAR -->
+    <left>
+        <VBox prefWidth="220" styleClass="sidebar">
+            <Label text="Conversations" styleClass="sidebar-title"/>
+
+            <ListView fx:id="conversationList"
+                      VBox.vgrow="ALWAYS"/>
+        </VBox>
+    </left>
+
+    <!-- TOP BAR -->
+    <top>
+        <HBox alignment="CENTER_LEFT" spacing="10" styleClass="topbar">
+            <padding>
+                <Insets top="10" right="15" bottom="10" left="15"/>
+            </padding>
+
+            <Label text="OpenWebFX" styleClass="app-title"/>
+
+            <Region HBox.hgrow="ALWAYS"/>
+
+            <ComboBox fx:id="modelSelector"
+                      prefWidth="180"/>
+
+            <!-- Dark/Light Mode Switch -->
+            <CheckBox fx:id="darkModeToggle" text="Dark Mode" selected="false"/>
+        </HBox>
+    </top>
+
+    <!-- CHAT AREA -->
+    <center>
+        <ScrollPane fx:id="chatScrollPane"
+                    fitToWidth="true"
+                    styleClass="chat-scroll">
+
+            <VBox fx:id="chatContainer"
+                  spacing="15"
+                  styleClass="chat-container">
+                <padding>
+                    <Insets top="20" right="20" bottom="20" left="20"/>
+                </padding>
+            </VBox>
+
+        </ScrollPane>
+    </center>
+
+    <!-- INPUT AREA -->
+    <bottom>
+        <HBox fx:id="bottomControls"
+            spacing="10" styleClass="input-area">
+            <padding>
+                <Insets top="10" right="20" bottom="20" left="20"/>
+            </padding>
+
+            <HBox spacing="10" alignment="CENTER" HBox.hgrow="ALWAYS">
+                <TextArea fx:id="inputField"
+                      prefRowCount="2"
+                      wrapText="true"
+                      HBox.hgrow="ALWAYS"
+                      promptText="Send a message..."/>
+                <Button fx:id="sendButton" text="Send" HBox.hgrow="ALWAYS" maxWidth="Infinity" maxHeight="Infinity"/>
+            </HBox>
+        </HBox>
+    </bottom>
+
+</BorderPane>

src/main/resources/net/metaunix/openwebfx/style-dark.css

@@ -0,0 +1,20 @@
+/* Backgrounds */
+.root, #chatContainer, #conversationListContainer, #bottomControls {
+    -fx-background-color: #1e1e1e;
+}
+
+.text-area, #chatListView, #conversationList {
+    -fx-background-color: #2b2b2b;
+    -fx-text-fill: white;
+}
+
+/* Title color */
+.app-title {
+    -fx-text-fill: white;
+}
+
+/* Send button - green */
+.send-button {
+    -fx-background-color: #10b981; /* same green as light mode */
+    -fx-text-fill: white;
+}

src/main/resources/net/metaunix/openwebfx/style-light.css

@@ -0,0 +1,20 @@
+/* Backgrounds */
+.root, #chatContainer, #conversationListContainer, #bottomControls {
+    -fx-background-color: #f5f5f5;
+}
+
+.text-area, #chatListView, #conversationList {
+    -fx-background-color: #ffffff;
+    -fx-text-fill: black;
+}
+
+/* Title color */
+.app-title {
+    -fx-text-fill: black;
+}
+
+/* Send button - green */
+.send-button {
+    -fx-background-color: #10b981; /* nice green */
+    -fx-text-fill: white;
+}

src/main/resources/net/metaunix/openwebfx/style.css

@@ -0,0 +1,20 @@
+/* Backgrounds */
+.root, #chatContainer, #conversationListContainer, #bottomControls {
+    -fx-background-color: #f5f5f5;
+}
+
+.text-area, #chatListView, #conversationList {
+    -fx-background-color: #ffffff;
+    -fx-text-fill: black;
+}
+
+/* Title color */
+.app-title {
+    -fx-text-fill: black;
+}
+
+/* Send button - green */
+.send-button {
+    -fx-background-color: #10b981; /* nice green */
+    -fx-text-fill: white;
+}