Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

remake menu section and fix styling issues

Browse Source
This commit is contained in:
fretuks
2026-04-15 21:40:24 +02:00
parent 481e0f10e3
commit 7cff596749
5 changed files with 386 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+60 -39
View File
@@ -109,32 +109,38 @@
</div>
<div class="chat-header-actions">
<div class="chat-actions-menu">
<button id="chatActionsMenuButton" class="secondary-action overflow-trigger" type="button" aria-expanded="false" aria-controls="chatActionsPopover">
Menu
<button id="chatDrawerButton" class="secondary-action overflow-trigger" type="button" aria-expanded="false" aria-controls="chatDrawer">
<span class="overflow-trigger-label">Controls</span>
</button>
<div id="chatActionsPopover" class="chat-drawer hidden" role="dialog" aria-modal="false" aria-labelledby="chatDrawerTitle">
<div id="chatDrawer" class="chat-drawer hidden" role="dialog" aria-modal="false" aria-labelledby="chatDrawerTitle">
<div class="chat-drawer-panel">
<div class="chat-drawer-header">
<div>
<p class="eyebrow">Conversation</p>
<h2 id="chatDrawerTitle">Controls</h2>
<h2 id="chatDrawerTitle">Chat controls</h2>
</div>
<button id="chatDrawerClose" class="icon-button" type="button" aria-label="Close panel">Close</button>
</div>
<div class="chat-drawer-body">
<div class="chat-drawer-section chat-drawer-summary">
<div class="chat-drawer-summary">
<p class="dropdown-section-label">Current mode</p>
<div class="chat-drawer-pills">
<span id="chatCharacterPill" class="context-pill hidden">Character: none</span>
<span id="chatUserPersonaPill" class="context-pill hidden">User persona: none</span>
</div>
</div>
<div class="chat-drawer-section model-menu">
<div class="dropdown-header">
<p class="eyebrow">Model</p>
<p class="dropdown-subtitle">Choose the engine for this chat.</p>
</div>
<div id="modelPopover" class="model-popover" data-static-panel="true">
<details class="chat-drawer-section chat-drawer-disclosure chat-drawer-section--model">
<summary class="chat-drawer-row">
<span class="chat-drawer-row-label">
<span class="eyebrow">Model</span>
<strong>Engine</strong>
</span>
<span class="chat-drawer-row-meta">
<strong id="modelBadgeName">Loading...</strong>
<span class="chat-drawer-row-hint">Change</span>
</span>
</summary>
<div id="modelPanel" class="model-panel chat-drawer-disclosure-panel" data-static-panel="true">
<div class="model-select">
<div class="model-select-header">
<label for="model">Model</label>
@@ -154,18 +160,20 @@
</div>
<p id="modelHelpSummary" class="model-help-summary">Pick a model to see what it is best suited for.</p>
</div>
<div class="model-inline-badge">
<span class="model-badge-label">Current</span>
<strong id="modelBadgeName">Loading...</strong>
</div>
</div>
</div>
<div class="chat-drawer-section persona-menu">
<div class="dropdown-header">
<p class="eyebrow">Persona</p>
<p class="dropdown-subtitle">Set who you are in roleplay chats.</p>
</div>
<div id="personaPopover" class="persona-popover" data-static-panel="true">
</details>
<details class="chat-drawer-section chat-drawer-disclosure chat-drawer-section--persona">
<summary class="chat-drawer-row">
<span class="chat-drawer-row-label">
<span class="eyebrow">Persona</span>
<strong>Identity</strong>
</span>
<span class="chat-drawer-row-meta">
<strong id="chatDrawerPersonaValue">None</strong>
<span class="chat-drawer-row-hint">Change</span>
</span>
</summary>
<div id="personaPanel" class="persona-panel chat-drawer-disclosure-panel" data-static-panel="true">
<div class="persona-section">
<div class="persona-section-header">
<div>
@@ -180,27 +188,40 @@
<div id="userPersonaList" class="persona-list"></div>
</div>
</div>
</div>
<div class="chat-drawer-section">
<p class="dropdown-section-label">Workspace</p>
<div class="dropdown-action-grid">
<a href="/market" class="secondary-action">Market</a>
<a href="/settings" class="secondary-action">Settings</a>
<button id="logout" type="button" class="secondary-action">Logout</button>
<button id="backupWorkspace" class="secondary-action" type="button">Backup</button>
</div>
</div>
</details>
<div class="chat-drawer-section">
<p class="dropdown-section-label">Current chat</p>
<div class="dropdown-action-grid">
<button id="renameChat" class="secondary-action" type="button">Rename</button>
<button id="pinChat" class="secondary-action" type="button">Pin</button>
<button id="moveChatFolder" class="secondary-action" type="button">Folder</button>
<button id="archiveChat" class="secondary-action" type="button">Archive</button>
<button id="clearChat" class="secondary-action" type="button">Clear</button>
<button id="exportChat" class="secondary-action" type="button">Export</button>
<div class="chat-drawer-action-list">
<button id="renameChat" class="secondary-action chat-drawer-action" type="button" data-chat-action="rename">Rename chat</button>
<button id="pinChat" class="secondary-action chat-drawer-action" type="button" data-chat-action="pin">Pin</button>
<button id="archiveChat" class="secondary-action chat-drawer-action" type="button" data-chat-action="archive">Archive</button>
<button id="exportChat" class="secondary-action chat-drawer-action" type="button" data-chat-action="export">Export</button>
</div>
</div>
<details class="chat-drawer-section chat-drawer-more">
<summary class="chat-drawer-row chat-drawer-row--compact">
<span class="chat-drawer-row-label">
<strong>More actions</strong>
</span>
<span class="chat-drawer-row-hint">Expand</span>
</summary>
<div class="chat-drawer-action-list chat-drawer-disclosure-panel">
<button id="moveChatFolder" class="secondary-action chat-drawer-action" type="button" data-chat-action="folder">Move to folder</button>
<button id="backupWorkspace" class="secondary-action chat-drawer-action" type="button">Backup workspace</button>
<button id="logout" type="button" class="secondary-action chat-drawer-action">Logout</button>
</div>
</details>
<details class="chat-drawer-section chat-drawer-danger">
<summary class="chat-drawer-row chat-drawer-row--compact">
<span class="chat-drawer-row-label">
<strong>Danger zone</strong>
</span>
<span class="chat-drawer-row-hint">Expand</span>
</summary>
<div class="chat-drawer-action-list chat-drawer-disclosure-panel">
<button id="clearChat" class="secondary-action chat-drawer-action chat-drawer-action-danger" type="button" data-chat-action="clear">Clear chat</button>
</div>
</details>
</div>
</div>
</div>