feat: Adds multi-select option for selecting rooms in trunk sizing form.

.gitignore

@@ -14,4 +14,4 @@ tailwindcss
 .env
 .env*
 default.profraw
-./rooms.csv
+/rooms.csv

Public/css/output.css

@@ -7,9 +7,7 @@
     'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
-    --color-amber-300: oklch(87.9% 0.169 91.605);
     --color-green-400: oklch(79.2% 0.209 151.711);
-    --color-sky-300: oklch(82.8% 0.111 230.318);
     --color-sky-600: oklch(58.8% 0.158 241.966);
     --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -17,12 +15,12 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-md: 28rem;
-    --container-lg: 32rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -41,7 +39,6 @@
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1701,6 +1698,9 @@
       opacity: 40%;
     }
   }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .react-day-picker {
     @layer daisyui.l1.l2.l3 {
       user-select: none;
@@ -4232,18 +4232,12 @@
       --toast-y: 0;
     }
   }
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
   .top-10 {
     top: calc(var(--spacing) * 10);
   }
-  .top-20 {
-    top: calc(var(--spacing) * 20);
-  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -4307,21 +4301,12 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .-left-10 {
-    left: calc(var(--spacing) * -10);
-  }
   .-left-15 {
     left: calc(var(--spacing) * -15);
   }
-  .-left-20 {
-    left: calc(var(--spacing) * -20);
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-10 {
-    left: calc(var(--spacing) * 10);
-  }
   .join {
     display: inline-flex;
     align-items: stretch;
@@ -4711,6 +4696,9 @@
   .z-1 {
     z-index: 1;
   }
+  .z-50 {
+    z-index: 50;
+  }
   .tab-content {
     @layer daisyui.l1.l2.l3 {
       order: var(--tabcontent-order);
@@ -5314,9 +5302,6 @@
       }
     }
   }
-  .mx-10 {
-    margin-inline: calc(var(--spacing) * 10);
-  }
   .mx-20 {
     margin-inline: calc(var(--spacing) * 20);
   }
@@ -5409,9 +5394,6 @@
       }
     }
   }
-  .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
   .my-1\.5 {
     margin-block: calc(var(--spacing) * 1.5);
   }
@@ -5681,9 +5663,6 @@
   .-mt-2 {
     margin-top: calc(var(--spacing) * -2);
   }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -5699,12 +5678,6 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
-  .mt-20 {
-    margin-top: calc(var(--spacing) * 20);
-  }
-  .mt-60 {
-    margin-top: calc(var(--spacing) * 60);
-  }
   .breadcrumbs {
     @layer daisyui.l1.l2.l3 {
       max-width: 100%;
@@ -5761,6 +5734,9 @@
       }
     }
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .fieldset-legend {
     @layer daisyui.l1.l2.l3 {
       margin-bottom: calc(0.25rem * -1);
@@ -5781,6 +5757,9 @@
       font-weight: 600;
     }
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -6505,6 +6484,33 @@
       }
     }
   }
+  .\!h-auto {
+    height: auto !important;
+  }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-\[1em\] {
     height: 1em;
   }
@@ -6514,6 +6520,21 @@
   .h-full {
     height: 100%;
   }
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
+  .min-h-14 {
+    min-height: calc(var(--spacing) * 14);
+  }
   .min-h-\[400px\] {
     min-height: 400px;
   }
@@ -6648,8 +6669,17 @@
       width: calc(var(--size-selector, 0.25rem) * 4);
     }
   }
-  .w-\[200px\] {
+  .w-3 {
-    width: 200px;
+    width: calc(var(--spacing) * 3);
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
   }
   .w-\[250px\] {
     width: 250px;
@@ -6663,8 +6693,11 @@
   .w-full {
     width: 100%;
   }
-  .min-w-\[80\%\] {
+  .w-px {
-    min-width: 80%;
+    width: 1px;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
   }
   .min-w-\[200px\] {
     min-width: 200px;
@@ -6684,6 +6717,12 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -6709,9 +6748,6 @@
   .-rotate-45 {
     rotate: calc(45deg * -1);
   }
-  .rotate-45 {
-    rotate: 45deg;
-  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -6770,6 +6806,12 @@
       }
     }
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
@@ -6889,12 +6931,12 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
-  .items-baseline {
-    align-items: baseline;
-  }
   .items-center {
     align-items: center;
   }
@@ -6916,12 +6958,18 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -6960,6 +7008,9 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -7072,6 +7123,9 @@
       }
     }
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
@@ -7087,6 +7141,9 @@
   .rounded-field {
     border-radius: var(--radius-field);
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
@@ -7290,10 +7347,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 6px;
   }
-  .border-b-8 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 8px;
-  }
   .badge-dash {
     @layer daisyui.l1.l2 {
       color: var(--badge-color);
@@ -7406,6 +7459,9 @@
   .border-accent {
     border-color: var(--color-accent);
   }
+  .border-base-300 {
+    border-color: var(--color-base-300);
+  }
   .border-error {
     border-color: var(--color-error);
   }
@@ -7415,11 +7471,8 @@
   .border-primary {
     border-color: var(--color-primary);
   }
-  .border-secondary {
+  .border-success {
-    border-color: var(--color-secondary);
+    border-color: var(--color-success);
-  }
-  .border-sky-600 {
-    border-color: var(--color-sky-600);
   }
   .menu-active {
     :where(:not(ul, details, .menu-title, .btn))& {
@@ -7578,18 +7631,15 @@
   .bg-base-300 {
     background-color: var(--color-base-300);
   }
+  .bg-current {
+    background-color: currentcolor;
+  }
   .bg-error {
     background-color: var(--color-error);
   }
-  .bg-primary {
-    background-color: var(--color-primary);
-  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
-  .bg-violet-600 {
-    background-color: var(--color-violet-600);
-  }
   .divider-accent {
     @layer daisyui.l1.l2 {
       &:before, &:after {
@@ -7799,18 +7849,12 @@
       }
     }
   }
-  .mask-contain {
-    mask-size: contain;
-  }
-  .mask-clip-border {
-    mask-clip: border-box;
-  }
-  .mask-clip-content {
-    mask-clip: content-box;
-  }
   .mask-repeat {
     mask-repeat: repeat;
   }
+  .stroke-current {
+    stroke: currentcolor;
+  }
   .checkbox-lg {
     @layer daisyui.l1.l2 {
       padding: 0.3125rem;
@@ -7881,9 +7925,24 @@
       }
     }
   }
+  .\!p-1\.5 {
+    padding: calc(var(--spacing) * 1.5) !important;
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -8007,12 +8066,27 @@
       }
     }
   }
+  .\!px-0 {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
+  .\!px-3 {
+    padding-inline: calc(var(--spacing) * 3) !important;
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -8045,6 +8119,9 @@
   .text-center {
     text-align: center;
   }
+  .text-left {
+    text-align: left;
+  }
   .file-input-lg {
     @layer daisyui.l1.l2 {
       --size: calc(var(--size-field, 0.25rem) * 12);
@@ -8093,10 +8170,6 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-  }
   .text-5xl {
     font-size: var(--text-5xl);
     line-height: var(--tw-leading, var(--text-5xl--line-height));
@@ -8105,6 +8178,10 @@
     font-size: var(--text-8xl);
     line-height: var(--tw-leading, var(--text-8xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -8675,9 +8752,6 @@
       color: var(--color-warning);
     }
   }
-  .text-accent {
-    color: var(--color-accent);
-  }
   .text-base-content {
     color: var(--color-base-content);
   }
@@ -8696,9 +8770,6 @@
   .text-primary {
     color: var(--color-primary);
   }
-  .text-secondary {
-    color: var(--color-secondary);
-  }
   .text-success {
     color: var(--color-success);
   }
@@ -8763,9 +8834,18 @@
       }
     }
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-30 {
+    opacity: 30%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-60 {
+    opacity: 60%;
+  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -8818,6 +8898,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -9573,6 +9663,44 @@
       }
     }
   }
+  .hover\:opacity-75 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 75%;
+      }
+    }
+  }
+  .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .focus\:\!bg-transparent {
+    &:focus {
+      background-color: transparent !important;
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .active\:scale-100 {
+    &:active {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .active\:\!bg-transparent {
+    &:active {
+      background-color: transparent !important;
+    }
+  }
   .data-active\:bg-neutral {
     &[data-active] {
       background-color: var(--color-neutral);
@@ -9661,11 +9789,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .dark\:bg-base-300 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-base-300);
-    }
-  }
   .is-drawer-close\:mx-auto {
     &:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
       margin-inline: auto;
@@ -9705,11 +9828,6 @@
       overflow: visible;
     }
   }
-  .is-drawer-close\:text-error {
-    &:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
-      color: var(--color-error);
-    }
-  }
   .is-drawer-close\:text-green-400 {
     &:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
       color: var(--color-green-400);
@@ -11297,6 +11415,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -11352,6 +11485,9 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-ease: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }

Sources/Styleguide/MultiSelect.swift

@@ -0,0 +1,46 @@
+import Elementary
+
+extension HTMLTag {
+  public enum daisyMultiSelect: HTMLTrait.Paired { public static let name = "daisy-multiselect" }
+}
+public typealias daisyMultiSelect<Content: HTML> = HTMLElement<HTMLTag.daisyMultiSelect, Content>
+
+extension HTMLTrait.Attributes {
+  public protocol chipStyle {}
+  public protocol showSelectAll {}
+  public protocol showClear {}
+  public protocol virtualScroll {}
+}
+
+extension HTMLAttribute where Tag: HTMLTrait.Attributes.chipStyle {
+  public static var chipStyle: Self {
+    HTMLAttribute(name: "chip-style", value: nil)
+  }
+}
+
+extension HTMLAttribute where Tag: HTMLTrait.Attributes.showSelectAll {
+  public static var showSelectAll: Self {
+    HTMLAttribute(name: "show-select-all", value: nil)
+  }
+}
+
+extension HTMLAttribute where Tag: HTMLTrait.Attributes.showClear {
+  public static var showClear: Self {
+    HTMLAttribute(name: "show-clear", value: nil)
+  }
+}
+
+extension HTMLAttribute where Tag: HTMLTrait.Attributes.virtualScroll {
+  public static var virtualScroll: Self {
+    HTMLAttribute(name: "virtual-scroll", value: nil)
+  }
+}
+
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.required {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.disabled {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.placeholder {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.name {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.chipStyle {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.showSelectAll {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.showClear {}
+extension HTMLTag.daisyMultiSelect: HTMLTrait.Attributes.virtualScroll {}

Sources/ViewController/Live.swift

@@ -17,7 +17,7 @@ extension ViewController.Request {
     @Dependency(\.pdfClient) var pdfClient
 
     switch route {
-      case .home:
+    case .home:
       return await view {
         HomeView()
       }
@@ -104,7 +104,7 @@ extension ViewController.Request {
     let inner = await inner()
     let theme = await self.theme
 
-    return MainPage(displayFooter: displayFooter, theme: theme) {
+    return MainPage(displayFooter: displayFooter, theme: theme ?? .default) {
       inner
     }
   }
@@ -605,6 +605,7 @@ extension SiteRoute.View.ProjectRoute.DuctSizingRoute {
           try await database.trunkSizes.delete(id)
         }
       case .submit(let form):
+        request.logger.debug("Trunk Form: \(form)")
         return await view(on: request, projectID: projectID) {
           _ = try await database.trunkSizes.create(
             form.toCreate(logger: request.logger)

Sources/ViewController/Views/DuctSizing/TrunkSizeForm.swift

@@ -39,6 +39,7 @@ struct TrunkSizeForm: HTML, Sendable {
   }
 
   var body: some HTML {
+    script(.src("/js/daisy-multiselect.js")) {}
     ModalForm(id: Self.id(container), dismiss: dismiss) {
       h1(.class("text-lg font-bold mb-4")) { "Trunk / Runout Size" }
       form(
@@ -77,40 +78,33 @@ struct TrunkSizeForm: HTML, Sendable {
           .type(.text),
           .name("name"),
           .value(trunk?.name),
-          .placeholder("Trunk-1 (Optional)")
+          .placeholder("Trunk-1"),
+          .required
         )
 
         div {
           h2(.class("label font-bold col-span-3 mb-6")) { "Associated Supply Runs" }
-          div(
+          daisyMultiSelect(
-            .class(
+            .class("z-50 bg-base-200"),
-              """
+            .placeholder("Select rooms"),
-              grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center items-center gap-4
+            .name("rooms"),
-              """
+            .chipStyle,
-            )
+            .showSelectAll,
+            .showClear,
+            .required,
+            .virtualScroll
           ) {
             for room in rooms {
-              div(.class("block grow")) {
+              option(.value("\(room.roomID)_\(room.roomRegister)")) {
-                div(.class("grid grid-cols-1 space-y-1")) {
+                room.roomName
-                  div(.class("flex justify-center")) {
-                    p(.class("label")) { room.roomName }
-                  }
-                  div(.class("flex justify-center")) {
-                    input(
-                      .class("checkbox"),
-                      .type(.checkbox),
-                      .name("rooms"),
-                      .value("\(room.roomID)_\(room.roomRegister)")
-                    )
-                    .attributes(
-                      .checked,
-                      when: trunk == nil ? false : trunk!.rooms.hasRoom(room)
-                    )
-                  }
-                }
               }
+              .attributes(
+                .selected,
+                when: trunk == nil ? false : trunk!.rooms.hasRoom(room)
+              )
             }
           }
+
         }
 
         SubmitButton()

Sources/ViewController/Views/Home.swift

@@ -43,7 +43,7 @@ struct HomeView: HTML, Sendable {
             header
             a(
               .class("btn btn-ghost text-md text-primary font-bold italic"),
-              .href("https://git.housh.dev/michael/swift-manual-d"),
+              .href("https://git.housh.dev/michael/swift-duct-calc"),
               .target(.blank)
             ) {
               "Open source residential duct design program"
@@ -70,6 +70,7 @@ struct HomeView: HTML, Sendable {
             }
           }
         }
+
       }
 
       div(.class("grid grid-cols-1 md:grid-cols-2 gap-4 mx-20 my-6")) {

Sources/ViewController/Views/MainPage.swift

@@ -52,6 +52,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
     script(.src("https://unpkg.com/htmx.org@2.0.8")) {}
     script(.src("/js/htmx-download.js")) {}
     script(.src("/js/main.js")) {}
+    script(.src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4")) {}
     link(.rel(.stylesheet), .href("/css/output.css"))
     link(.rel(.stylesheet), .href("/css/htmx.css"))
     link(
@@ -104,7 +105,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
               }
               a(
                 .class("btn btn-ghost"),
-                .href("https://git.housh.dev/michael/swift-manual-d/src/branch/main/LICENSE"),
+                .href("https://git.housh.dev/michael/swift-duct-calc/src/branch/main/LICENSE"),
                 .target(.blank)
               ) {
                 "Openly licensed via CC-BY-NC-SA 4.0"

Sources/ViewController/Views/Project/ProjectView.swift

@@ -190,25 +190,25 @@ extension ProjectView {
             div(.class("flex items-center justify-center")) {
               SVG(icon)
             }
-            .attributes(.class("is-drawer-close:text-green-400"), when: isComplete)
+            .attributes(.class("text-green-400"), when: isComplete)
-            .attributes(.class("is-drawer-close:text-error"), when: !isComplete && !hideIsComplete)
+            .attributes(.class("text-error"), when: !isComplete && !hideIsComplete)
 
             div(.class("flex items-center justify-center")) {
               span { title }
             }
           }
 
-          if !hideIsComplete {
+          // if !hideIsComplete {
-            div(.class("flex grow justify-end items-end is-drawer-close:hidden")) {
+          //   div(.class("flex grow justify-end items-end is-drawer-close:hidden")) {
-              if isComplete {
+          //     if isComplete {
-                SVG(.badgeCheck)
+          //       SVG(.badgeCheck)
-              } else {
+          //     } else {
-                SVG(.ban)
+          //       SVG(.ban)
-              }
+          //     }
-            }
+          //   }
-            .attributes(.class("text-green-400"), when: isComplete)
+          //   .attributes(.class("text-green-400"), when: isComplete)
-            .attributes(.class("text-error"), when: !isComplete)
+          //   .attributes(.class("text-error"), when: !isComplete)
-          }
+          // }
         }
       }
     }