WIP: Adds daisyui.

.gitignore

@@ -7,3 +7,5 @@ DerivedData/
 .swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
 .netrc
 .swift-version
+node_modules/
+tailwindcss

Public/css/main.css

@@ -1,13 +1,5 @@
-:root {
-  --primary: #ff66ff;
-  --secondary: #00ffcc;
-  --dark-bg: #14141f;
-  --bg: #1e1e2e;
-  --hover-bg: #444;
+@import "tailwindcss";
+@plugin "daisyui" {
+	themes: light --default, dark --prefersdark, dracula;
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}

Sources/ViewController/Views/MainPage.swift

@@ -15,18 +15,17 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
     meta(.charset(.utf8))
     meta(.name(.viewport), .content("width=device-width, initial-scale=1.0"))
     script(.src("https://unpkg.com/htmx.org@2.0.8")) {}
-    script(.src("https://cdn.tailwindcss.com")) {}
     script(.src("/js/main.js")) {}
-    script(.src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4")) {}
-    link(.rel(.stylesheet), .href("/css/main.css"))
+    link(.rel(.stylesheet), .href("/css/output.css"))
     link(.rel(.icon), .href("/images/favicon.ico"), .custom(name: "type", value: "image/x-icon"))
   }
 
   public var body: some HTML {
-    div(.class("bg-white dark:bg-gray-800 dark:text-white")) {
+    // div(.class("bg-white dark:bg-gray-800 dark:text-white")) {
+    div {
       div(.class("flex flex-row")) {
         Sidebar(active: activeTab)
-        main(.class("flex flex-col h-screen w-full")) {
+        main(.class("flex flex-col h-screen w-full px-6 py-10")) {
           inner
         }
       }

Sources/ViewController/Views/Rooms/RoomsView.swift

@@ -12,25 +12,19 @@ struct RoomsView: HTML, Sendable {
     div(.class("m-10")) {
       Row {
         h1(.class("text-3xl font-bold pb-6")) { "Room Loads" }
-        // div(
-        //   .class("tooltip"),
-        //   .data("tip", value: "Add room")
-        // ) {
-        //   PlusButton()
-        //     .attributes(
-        //       .hx.get(route: .room(.form(dismiss: false))),
-        //       .hx.target("#roomForm"),
-        //       .hx.swap(.outerHTML),
-        //       .class("btn")
-        //     )
-        // }
-        HTMLRaw(
-          """
-          <div class="tooltip" data-tip="hello">
-            <button class="btn">Hover me</button>
-          </div>
-          """
-        )
+        div(
+          .class("tooltip tooltip-left"),
+          .data("tip", value: "Add room")
+        ) {
+          button(
+            .hx.get(route: .room(.form(dismiss: false))),
+            .hx.target("#roomForm"),
+            .hx.swap(.outerHTML),
+            .class("btn btn-primary w-[40px]")
+          ) {
+            "+"
+          }
+        }
       }
 
       div(
@@ -98,17 +92,17 @@ struct RoomsView: HTML, Sendable {
         Row {
           div {}
           Number(rooms.heatingTotal)
-            .attributes(.class("bg-red-500 text-white font-bold rounded-lg shadow-lg px-4 py-2"))
+            .attributes(.class("badge badge-outline badge-error badge-xl text-xl font-bold"))
         }
         Row {
           div {}
           Number(rooms.coolingTotal)
-            .attributes(.class("bg-green-400 text-white font-bold rounded-lg shadow-lg px-4 py-2"))
+            .attributes(.class("badge badge-outline badge-success badge-xl text-xl font-bold"))
         }
         Row {
           div {}
           Number(rooms.coolingSensibleTotal)
-            .attributes(.class("bg-blue-400 text-white font-bold rounded-lg shadow-lg px-4 py-2"))
+            .attributes(.class("badge badge-outline badge-info badge-xl text-xl font-bold"))
         }
         // Empty register count column
         div {}

Sources/ViewController/Views/Sidebar.swift

@@ -17,6 +17,14 @@ struct Sidebar: HTML {
         """
       )
     ) {
+
+      // TODO: Move somewhere outside of the sidebar.
+      Row {
+        Label("Theme")
+        input(.type(.checkbox), .class("toggle theme-controller"), .value("light"))
+      }
+      .attributes(.class("py-4"))
+
       row(title: "Project", icon: .mapPin, route: .project(.index))
         .attributes(.data("active", value: active == .projects ? "true" : "false"))
 

input.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@source not "./tailwindcss";
+@source not "./daisyui{,*}.mjs";
+
+@plugin "./daisyui.mjs";

justfile

@@ -1,5 +1,14 @@
 docker_image := "manuald"
 
+install-deps:
+	@curl -sL daisyui.com/fast | bash
+
+run-css:
+	@./tailwindcss -i input.css -o output.css --watch
+
+run:
+	@swift run App
+
 build-docker:
 	@podman build -f docker/Dockerfile.dev -t {{docker_image}}:dev .
 

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "swift-manual-d",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "npx @tailwindcss/cli -i Public/css/main.css -o Public/css/output.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@git.housh.dev:2222/michael/swift-manual-d.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "daisyui": "^5.5.14",
+    "tailwindcss": "^4.1.18"
+  }
+}