Refactor UI

This commit is contained in:
dwrz
2026-07-04 12:44:59 +00:00
parent eeb7d6f504
commit 4a2ba2fa54
16 changed files with 3163 additions and 3142 deletions

View File

@@ -3,5 +3,6 @@
{{ template "main" . }}
{{ template "templates" . }}
{{ template "modal/settings" . }}
{{ template "modal/edit" . }}
</body>
{{ end }}

View File

@@ -14,6 +14,7 @@
type="button"
class="compose__action-btn"
id="attach"
data-action="attach"
aria-label="Attach files"
>
<svg class="icon"><use href="/static/icons.svg#attach"></use></svg>
@@ -22,6 +23,7 @@
type="button"
class="compose__action-btn"
id="location"
data-action="location"
aria-label="Include location"
title="Include GPS location"
>
@@ -34,6 +36,7 @@
type="button"
class="compose__action-btn"
id="transcribe"
data-action="transcribe"
aria-label="Transcribe to text"
title="Record and transcribe (does not send)"
>
@@ -43,6 +46,7 @@
type="button"
class="compose__action-btn compose__action-btn--record"
id="ptt"
data-action="ptt"
aria-label="Push to talk"
>
<svg class="icon"><use href="/static/icons.svg#mic"></use></svg>
@@ -51,6 +55,7 @@
type="button"
class="compose__action-btn compose__action-btn--send"
id="send"
data-action="send"
aria-label="Send message"
>
<svg class="icon compose__icon--send"><use href="/static/icons.svg#send"></use></svg>

View File

@@ -4,6 +4,7 @@
type="button"
class="footer__toolbar-btn"
id="settings"
data-action="settings"
aria-label="Settings"
>
<svg class="icon"><use href="/static/icons.svg#settings"></use></svg>
@@ -14,6 +15,7 @@
type="button"
class="footer__toolbar-btn"
id="reset"
data-action="reset"
aria-label="Reset conversation"
>
<svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
@@ -22,6 +24,7 @@
type="button"
class="footer__toolbar-btn"
id="scroll"
data-action="scroll"
aria-label="Scroll to top"
>
<svg class="icon scroll-icon--up"><use href="/static/icons.svg#scroll-up"></use></svg>
@@ -31,6 +34,7 @@
type="button"
class="footer__toolbar-btn"
id="mute"
data-action="mute"
aria-label="Mute"
>
<svg class="icon"><use href="/static/icons.svg#volume"></use></svg>

View File

@@ -9,6 +9,6 @@
<meta name="tts-default-voice" content="{{ .TTSDefaultVoice }}">
<title>Odidere</title>
<link rel="stylesheet" href="/static/main.css">
<script defer src="/static/main.js"></script>
<script type="module" src="/static/main.js"></script>
</head>
{{ end }}

View File

@@ -0,0 +1,42 @@
{{ define "modal/edit" }}
<template id="tpl-edit-modal">
<div class="modal">
<div class="modal__header">
<h2></h2>
<button type="button" class="modal__close" aria-label="Cancel">
<svg class="icon"><use href="/static/icons.svg#close"></use></svg>
</button>
</div>
<div class="modal__body">
<textarea class="modal__textarea" id="edit-textarea" rows="10"></textarea>
</div>
<div class="modal__footer">
<button type="button" class="modal__save" id="edit-save">Save</button>
</div>
</div>
</template>
<template id="tpl-edit-tool-modal">
<div class="modal">
<div class="modal__header">
<h2>Edit Tool Call</h2>
<button type="button" class="modal__close" aria-label="Cancel">
<svg class="icon"><use href="/static/icons.svg#close"></use></svg>
</button>
</div>
<div class="modal__body">
<details class="modal__collapsible">
<summary class="modal__collapsible-summary">Tool Call (JSON)</summary>
<textarea class="modal__textarea" id="edit-tool-call" rows="8"></textarea>
</details>
<details class="modal__collapsible">
<summary class="modal__collapsible-summary">Tool Result</summary>
<textarea class="modal__textarea" id="edit-tool-result" rows="6"></textarea>
</details>
</div>
<div class="modal__footer">
<button type="button" class="modal__save" id="edit-save">Save</button>
</div>
</div>
</template>
{{ end }}

View File

@@ -51,7 +51,13 @@
<template id="tpl-assistant-message">
<div class="message message--assistant">
<div class="message__body">
<div class="message__content"></div>
<details class="message__collapsible" open>
<summary class="message__collapsible-summary">
<svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#content"></use></svg>
<span class="message__collapsible-label">Content</span>
</summary>
<div class="message__content"></div>
</details>
<div class="message__actions">
<svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
<div class="message__actions-buttons">
@@ -125,37 +131,6 @@
</div>
</div>
</template>
<template id="tpl-collapsible">
<details class="collapsible">
<summary class="collapsible__summary">
<span class="collapsible__label"></span>
</summary>
<div class="collapsible__content">
<pre></pre>
</div>
</details>
</template>
<template id="tpl-tool-call">
<details class="collapsible collapsible--tool">
<summary class="collapsible__summary">
<svg class="icon"><use href="/static/icons.svg#tool"></use></svg>
<span class="collapsible__label"></span>
</summary>
<div class="collapsible__content">
<div class="collapsible__section">
<div class="collapsible__section-label">Arguments</div>
<pre class="collapsible__pre" data-args></pre>
</div>
<div class="collapsible__section collapsible__section--output" hidden>
<div class="collapsible__section-label">Output</div>
<pre class="collapsible__pre" data-output></pre>
</div>
</div>
</details>
</template>
<template id="tpl-attachment-chip">
<div class="compose__attachment">
<span class="compose__attachment-name"></span>
@@ -173,4 +148,123 @@
<dt></dt>
<dd></dd>
</template>
<template id="tpl-reasoning-message">
<div class="message message--reasoning">
<div class="message__body">
<details class="message__collapsible">
<summary class="message__collapsible-summary">
<svg class="message__icon message__icon--reasoning" aria-hidden="true"><use href="/static/icons.svg#reasoning"></use></svg>
<span class="message__collapsible-label">Reasoning</span>
</summary>
<div class="message__content"></div>
</details>
<div class="message__actions">
<svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
<div class="message__actions-buttons">
<button
type="button"
class="message__action-btn message__action-btn--delete"
data-action="delete"
aria-label="Delete message"
>
<svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
</button>
<button
type="button"
class="message__action-btn"
data-action="inspect"
aria-label="Show details"
aria-expanded="false"
>
<svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
</button>
<button
type="button"
class="message__action-btn"
data-action="edit"
aria-label="Edit message"
>
<svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
</button>
<button
type="button"
class="message__action-btn"
data-action="copy"
aria-label="Copy to clipboard"
>
<svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
</button>
</div>
</div>
<div class="message__debug">
<dl class="message__debug-list"></dl>
</div>
</div>
</div>
</template>
<template id="tpl-tool-message">
<div class="message message--tool">
<div class="message__body">
<details class="message__collapsible">
<summary class="message__collapsible-summary">
<svg class="message__icon message__icon--tool" aria-hidden="true"><use href="/static/icons.svg#tool"></use></svg>
<span class="message__collapsible-label"></span>
</summary>
<div class="message__content">
<div class="message__tool-section">
<div class="message__tool-section-label">Arguments</div>
<pre class="message__tool-pre" data-args></pre>
</div>
<div class="message__tool-section message__tool-section--output" hidden>
<div class="message__tool-section-label">Output</div>
<pre class="message__tool-pre" data-output></pre>
</div>
</div>
</details>
<div class="message__actions">
<svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
<div class="message__actions-buttons">
<button
type="button"
class="message__action-btn message__action-btn--delete"
data-action="delete"
aria-label="Delete message"
>
<svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
</button>
<button
type="button"
class="message__action-btn"
data-action="inspect"
aria-label="Show details"
aria-expanded="false"
>
<svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
</button>
<button
type="button"
class="message__action-btn"
data-action="edit"
aria-label="Edit message"
>
<svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
</button>
<button
type="button"
class="message__action-btn"
data-action="copy"
aria-label="Copy to clipboard"
>
<svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
</button>
</div>
</div>
<div class="message__debug">
<dl class="message__debug-list"></dl>
</div>
</div>
</div>
</template>
{{ end }}