diff options
| author | Owen Jacobson <owen@grimoire.ca> | 2025-07-08 01:06:09 -0400 |
|---|---|---|
| committer | Owen Jacobson <owen@grimoire.ca> | 2025-07-08 01:06:09 -0400 |
| commit | 7b2d114b2444dc4bc66df22675d6dc02b7a8a238 (patch) | |
| tree | dcc2e267cbccb83146e58769aef9a85a0f092592 | |
| parent | c35be3ae29e77983f013c01260dda20208175f2b (diff) | |
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.
| -rw-r--r-- | ui/lib/components/CreateConversationForm.svelte | 10 | ||||
| -rw-r--r-- | ui/lib/components/MessageInput.svelte | 36 | ||||
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 4 | ||||
| -rw-r--r-- | ui/routes/(app)/c/[conversation]/+page.svelte | 4 |
4 files changed, 27 insertions, 27 deletions
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">➕</button> -</form> +<div class="create-conversation"> + <form {onsubmit}> + <input type="text" placeholder="start a conversation" bind:value={name} {disabled} /> + <button type="submit">➕</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">»</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">»</button> + </form> +</div> diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index 658d966..1210b43 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -121,9 +121,7 @@ <div id="interface"> <nav id="sidebar" data-expanded={pageContext.showMenu}> <ConversationList active={conversationId} {conversations} /> - <div class="create-conversation"> - <CreateConversationForm {createConversation} /> - </div> + <CreateConversationForm {createConversation} /> </nav> <main> {@render children?.()} diff --git a/ui/routes/(app)/c/[conversation]/+page.svelte b/ui/routes/(app)/c/[conversation]/+page.svelte index e6cd845..24baa47 100644 --- a/ui/routes/(app)/c/[conversation]/+page.svelte +++ b/ui/routes/(app)/c/[conversation]/+page.svelte @@ -116,6 +116,4 @@ </MessageRun> {/each} </div> -<div class="create-message"> - <MessageInput {sendMessage} /> -</div> +<MessageInput {sendMessage} /> |