From fcf39d778645e4af54c68848b18b00a1bdc2d3d2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 30 Mar 2026 18:14:23 +0300
Subject: [PATCH] feat(llm): show footer only on hover

---
 .../src/widgets/sidebar/SidebarChat.css       | 12 ++----
 .../type_widgets/llm_chat/ChatMessage.tsx     |  8 ++--
 .../widgets/type_widgets/llm_chat/LlmChat.css | 40 +++++++++++++------
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/apps/client/src/widgets/sidebar/SidebarChat.css b/apps/client/src/widgets/sidebar/SidebarChat.css
index 1f332bb5a3..ee3c16e000 100644
--- a/apps/client/src/widgets/sidebar/SidebarChat.css
+++ b/apps/client/src/widgets/sidebar/SidebarChat.css
@@ -28,18 +28,14 @@
 }
 
 /* Reuse llm-chat-message styles but make them more compact */
-.sidebar-chat-messages .llm-chat-message {
-    padding: 0.5rem 0.75rem;
+.sidebar-chat-messages .llm-chat-message-wrapper {
     margin-top: 0;
-    margin-bottom: 0;
     max-width: 100%;
-    font-size: 0.9rem;
 }
 
-/* Footer: pull it closer to the message above by collapsing the flex gap */
-.sidebar-chat-messages .llm-chat-footer {
-    margin-top: -0.35rem;
-    margin-bottom: 0;
+.sidebar-chat-messages .llm-chat-message {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
 }
 
 .sidebar-chat-messages .llm-chat-message-role {
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx b/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
index 0702bd5953..1098ba4d25 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
+++ b/apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
@@ -1,13 +1,11 @@
 import "./LlmChat.css";
 
-import type { LlmCitation, LlmUsage } from "@triliumnext/commons";
 import { marked } from "marked";
 import { useMemo } from "preact/hooks";
 
 import { t } from "../../../services/i18n.js";
 import utils from "../../../services/utils.js";
-import type { ContentBlock, StoredMessage, ToolCall } from "./llm_chat_types.js";
-import { getMessageText, getMessageToolCalls } from "./llm_chat_types.js";
+import { type ContentBlock, getMessageText, type StoredMessage, type ToolCall } from "./llm_chat_types.js";
 
 function shortenNumber(n: number): string {
     if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
@@ -127,7 +125,7 @@ export default function ChatMessage({ message, isStreaming }: Props) {
     const hasBlockContent = Array.isArray(message.content);
 
     return (
-        <>
+        <div className={`llm-chat-message-wrapper llm-chat-message-wrapper-${message.role}`}>
             <div className={messageClasses}>
                 <div className="llm-chat-message-role">
                     {isError ? "Error" : roleLabel}
@@ -241,6 +239,6 @@ export default function ChatMessage({ message, isStreaming }: Props) {
                     </>
                 )}
             </div>
-        </>
+        </div>
     );
 }
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
index bbd4fe8b4d..567949e556 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
+++ b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
@@ -12,32 +12,43 @@
     padding-bottom: 1rem;
 }
 
-.llm-chat-message {
+.llm-chat-message-wrapper {
+    position: relative;
     margin-top: 1rem;
-    padding: 0.75rem 1rem;
-    border-radius: 8px;
+    padding-bottom: 1.25rem;
     max-width: 85%;
-    user-select: text;
 }
 
-.llm-chat-message:first-child {
+.llm-chat-message-wrapper:first-child {
     margin-top: 0;
 }
 
-/* Collapse gap between the footer and the next message */
-.llm-chat-footer + .llm-chat-message {
-    margin-top: 0.5rem;
+.llm-chat-message-wrapper-user {
+    margin-left: auto;
+}
+
+.llm-chat-message-wrapper-assistant {
+    margin-right: auto;
+}
+
+/* Show footer only on hover */
+.llm-chat-message-wrapper:hover .llm-chat-footer {
+    opacity: 1;
+}
+
+.llm-chat-message {
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    user-select: text;
 }
 
 .llm-chat-message-user {
     background: var(--accented-background-color);
-    margin-left: auto;
 }
 
 .llm-chat-message-assistant {
     background: var(--main-background-color);
     border: 1px solid var(--main-border-color);
-    margin-right: auto;
 }
 
 .llm-chat-message-role {
@@ -620,14 +631,19 @@
 
 /* Message footer (timestamp + token usage, sits below the bubble) */
 .llm-chat-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     gap: 0.375rem;
-    margin-top: 0.25rem;
-    padding: 0 0.5rem;
+    padding: 0.125rem 0.5rem;
     font-size: 0.7rem;
     color: var(--muted-text-color);
     cursor: default;
+    opacity: 0;
+    transition: opacity 0.15s ease;
 }
 
 .llm-chat-footer-user {