evan/aethera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(style): align sidebar controls
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Evan Reichard
2026-05-17 18:29:04 -04:00
parent f5bc4e2ae4
commit 0c002cf5ee
2 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/public/pages/chats.html
View File

@@ -14,12 +14,12 @@
<template x-if="!$store.chatSidebar.collapsed">
<div
class="flex flex-col h-full"
style="padding-top: var(--nav-h);"
style="padding-top: max(1rem, env(safe-area-inset-top));"
>
<div class="px-2 py-3 flex items-center gap-1">
<div class="px-2 pb-3 flex items-center gap-1">
<button
@click="$store.chatSidebar.toggleCollapsed()"
class="p-1.5 rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
title="Collapse sidebar"
aria-label="Collapse sidebar"
>
@@ -29,12 +29,13 @@
</button>
<button
@click="selectChat(null)"
class="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-200/60 hover:bg-primary-200 text-primary-800 text-sm font-medium transition-colors cursor-pointer"
class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
title="New conversation"
aria-label="New conversation"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
<span>New conversation</span>
</button>
</div>
@@ -94,12 +95,12 @@
<!-- Collapsed Icon Rail -->
<template x-if="$store.chatSidebar.collapsed">
<div
class="flex flex-col items-center py-3 gap-1"
style="padding-top: var(--nav-h);"
class="flex flex-col items-center px-2 pb-3 gap-1"
style="padding-top: max(1rem, env(safe-area-inset-top));"
>
<button
@click="$store.chatSidebar.toggleCollapsed()"
class="p-2 rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer"
class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer"
title="Expand sidebar"
aria-label="Expand sidebar"
>
@@ -109,7 +110,7 @@
</button>
<button
@click="selectChat(null)"
class="p-2 rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
title="New conversation"
aria-label="New conversation"
>
@@ -407,7 +408,7 @@
x-cloak
x-transition.opacity
@click="$store.chatSidebar.mobileOpen = false"
class="md:hidden fixed inset-0 z-40 bg-black/40"
class="md:hidden fixed inset-0 z-60 bg-black/40"
></div>
<div
x-show="$store.chatSidebar.mobileOpen"
@@ -418,20 +419,31 @@
x-transition:leave="transform transition-transform duration-300 ease-in"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full"
class="md:hidden fixed top-0 left-0 bottom-0 z-40 w-80 max-w-[85vw] bg-primary-50 shadow-2xl flex flex-col"
class="md:hidden fixed top-0 left-0 bottom-0 z-60 w-[calc(100vw-3.5rem)] max-w-none bg-primary-50 flex flex-col"
>
<div
class="px-3 pb-3 flex items-center gap-2 border-b border-primary-200/60"
style="padding-top: var(--nav-h);"
style="padding-top: max(1rem, env(safe-area-inset-top));"
>
<button
@click="$store.chatSidebar.mobileOpen = false"
class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
title="Collapse sidebar"
aria-label="Collapse sidebar"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
@click="selectChat(null); $store.chatSidebar.mobileOpen = false"
class="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-200/60 hover:bg-primary-200 text-primary-800 text-sm font-medium transition-colors cursor-pointer"
class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
title="New conversation"
aria-label="New conversation"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
<span>New conversation</span>
</button>
</div>