Reimplement compose and add tiling windows

This commit is contained in:
2026-03-12 22:03:30 +00:00
parent 79766d279d
commit 6ceff63b71
126 changed files with 5111 additions and 10796 deletions

View File

@@ -1,117 +1,31 @@
<div class="compose-workspace-widget">
<div class="columns is-mobile is-gapless">
<div class="column is-12-mobile is-12-tablet">
<div
style="
margin-bottom: 0.75rem;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
">
<p class="is-size-7 has-text-weight-semibold">Manual Workspace</p>
<h3 class="title is-6" style="margin-bottom: 0.5rem;">Choose A Contact</h3>
<p class="is-size-7">
Open one or more direct chat widgets and keep them live in this workspace.
</p>
</div>
<div class="mb-3">
<h3 class="title is-6 mb-1">Contacts</h3>
<p class="is-size-7 has-text-grey">
See all your contacts. Search to narrow the list.
</p>
</div>
<form
id="compose-workspace-window-form"
style="
margin-bottom: 0.75rem;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
">
<label class="label is-small" for="compose-workspace-limit">Window</label>
<div class="select is-fullwidth is-small">
<select id="compose-workspace-limit" name="limit">
{% for option in limit_options %}
<option value="{{ option }}" {% if option == limit %}selected{% endif %}>
{{ option }} messages
</option>
{% endfor %}
</select>
</div>
<p class="help">
How many recent messages to load in each new message widget.
</p>
</form>
<div>
{% if contact_rows %}
<div class="buttons are-small" style="display: grid; gap: 0.5rem;">
{% for row in contact_rows %}
<button
class="button is-fullwidth"
style="
border-radius: 8px;
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
"
hx-get="{{ row.compose_widget_url }}"
hx-include="#compose-workspace-window-form"
hx-target="#widgets-here"
hx-swap="afterend">
<span
class="tags has-addons"
style="
display: inline-flex;
width: 100%;
margin: 0;
white-space: nowrap;
">
<span
class="tag is-white"
style="
flex: 1;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-left: 0.7rem;
padding-right: 0.7rem;
border: 1px solid rgba(0, 0, 0, 0.2);
min-width: 0;
">
<span
style="
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
min-width: 0;
">
<strong>{{ row.person_name }}</strong>
<small class="has-text-grey">{{ row.service|title }}</small>
</span>
<small
class="has-text-grey"
style="
min-width: 0;
overflow-wrap: anywhere;
word-break: break-all;
text-align: right;
">
{{ row.identifier }}
</small>
</span>
</span>
</button>
{% if not row.linked_person %}
<a
class="button is-small is-light"
href="{{ row.match_url }}"
title="Link this identifier to a person">
<span class="icon is-small"><i class="fa-solid fa-link"></i></span>
<span>Match</span>
</a>
{% endif %}
{% endfor %}
</div>
{% else %}
<p class="has-text-grey">No contacts available yet.</p>
{% endif %}
<form id="{{ launcher_form_id }}">
<div class="field">
<label class="label is-small" for="{{ search_input_id }}">Search</label>
<div class="control has-icons-left">
<input
id="{{ search_input_id }}"
class="input is-small"
type="search"
name="q"
value="{{ search_query }}"
placeholder="Name, identifier, or service"
hx-get="{{ results_url }}"
hx-trigger="input changed delay:250ms, search"
hx-target="#{{ results_id }}"
hx-include="#{{ launcher_form_id }}"
hx-swap="outerHTML">
<span class="icon is-small is-left"><i class="fa-solid fa-magnifying-glass"></i></span>
</div>
</div>
</div>
</form>
{% include "partials/compose-workspace-contact-results.html" %}
</div>