From 7b2d114b2444dc4bc66df22675d6dc02b7a8a238 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 01:06:09 -0400
Subject: Move container divs for components into those components.

The styles for the `MessageInput` and `CreateConversationForm` components assume that the container div will be present, and the components will not render as intended without them. Therefore: they are "part of" the component in most of the ways that matter, not part of the context in which the component is used. Moving the divs into the component will make it easier to reuse these components (for example, in swatches).

The diff for this looks worse than it is because of indentation changes.
---
 ui/lib/components/CreateConversationForm.svelte | 10 ++++---
 ui/lib/components/MessageInput.svelte           | 36 +++++++++++++------------
 2 files changed, 25 insertions(+), 21 deletions(-)

(limited to 'ui/lib')

diff --git a/ui/lib/components/CreateConversationForm.svelte b/ui/lib/components/CreateConversationForm.svelte
index e390a78..d6056d3 100644
--- a/ui/lib/components/CreateConversationForm.svelte
+++ b/ui/lib/components/CreateConversationForm.svelte
@@ -16,7 +16,9 @@
   }
 </script>
 
-<form {onsubmit}>
-  <input type="text" placeholder="start a conversation" bind:value={name} {disabled} />
-  <button type="submit">&#x2795;</button>
-</form>
+<div class="create-conversation">
+  <form {onsubmit}>
+    <input type="text" placeholder="start a conversation" bind:value={name} {disabled} />
+    <button type="submit">&#x2795;</button>
+  </form>
+</div>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 77c39be..7df4ab2 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -45,20 +45,22 @@
   }
 </script>
 
-<form {onsubmit}>
-  <textarea bind:value hidden {disabled}></textarea>
-  <div
-    role="textbox"
-    tabindex="0"
-    contenteditable="plaintext-only"
-    class={{
-      textarea: true,
-      disabled,
-    }}
-    bind:innerText={value}
-    {onkeydown}
-    {onpaste}
-    data-placeholder="Say something..."
-  ></div>
-  <button type="submit">&raquo;</button>
-</form>
+<div class="create-message">
+  <form {onsubmit}>
+    <textarea bind:value hidden {disabled}></textarea>
+    <div
+      role="textbox"
+      tabindex="0"
+      contenteditable="plaintext-only"
+      class={{
+        textarea: true,
+        disabled,
+      }}
+      bind:innerText={value}
+      {onkeydown}
+      {onpaste}
+      data-placeholder="Say something..."
+    ></div>
+    <button type="submit">&raquo;</button>
+  </form>
+</div>
-- 
cgit v1.2.3


From 1b6028c71c6a16905dd7bf0dadbbc89a2a9475ad Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 8 Jul 2025 19:14:32 -0400
Subject: A few semantically-thin wrapper divs.

This is an extension of the previous commit: we don't need these divs _at all_ to achieve the layout we want, and we aren't attaching behaviour or semantics to them, so, out they go.
---
 ui/lib/components/CreateConversationForm.svelte | 10 +++----
 ui/lib/components/MessageInput.svelte           | 36 ++++++++++++-------------
 ui/styles/sidebar.css                           |  3 ---
 ui/styles/textarea.css                          |  2 +-
 4 files changed, 22 insertions(+), 29 deletions(-)

(limited to 'ui/lib')

diff --git a/ui/lib/components/CreateConversationForm.svelte b/ui/lib/components/CreateConversationForm.svelte
index d6056d3..812a5cf 100644
--- a/ui/lib/components/CreateConversationForm.svelte
+++ b/ui/lib/components/CreateConversationForm.svelte
@@ -16,9 +16,7 @@
   }
 </script>
 
-<div class="create-conversation">
-  <form {onsubmit}>
-    <input type="text" placeholder="start a conversation" bind:value={name} {disabled} />
-    <button type="submit">&#x2795;</button>
-  </form>
-</div>
+<form class="create-conversation" {onsubmit}>
+  <input type="text" placeholder="start a conversation" bind:value={name} {disabled} />
+  <button type="submit">&#x2795;</button>
+</form>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 7df4ab2..1a18f63 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -45,22 +45,20 @@
   }
 </script>
 
-<div class="create-message">
-  <form {onsubmit}>
-    <textarea bind:value hidden {disabled}></textarea>
-    <div
-      role="textbox"
-      tabindex="0"
-      contenteditable="plaintext-only"
-      class={{
-        textarea: true,
-        disabled,
-      }}
-      bind:innerText={value}
-      {onkeydown}
-      {onpaste}
-      data-placeholder="Say something..."
-    ></div>
-    <button type="submit">&raquo;</button>
-  </form>
-</div>
+<form class="create-message" {onsubmit}>
+  <textarea bind:value hidden {disabled}></textarea>
+  <div
+    role="textbox"
+    tabindex="0"
+    contenteditable="plaintext-only"
+    class={{
+      textarea: true,
+      disabled,
+    }}
+    bind:innerText={value}
+    {onkeydown}
+    {onpaste}
+    data-placeholder="Say something..."
+  ></div>
+  <button type="submit">&raquo;</button>
+</form>
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index aa0d53b..a06c3e3 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -41,9 +41,6 @@
 /* create conversation form */
 .create-conversation {
   padding-left: 0.5rem;
-}
-
-.create-conversation form {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index d315bcf..ef17a79 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -1,5 +1,5 @@
 /* Message input */
-.create-message form {
+.create-message {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-- 
cgit v1.2.3