From 92dd4e31250a0e97862c92558f9da48f65bcacca Mon Sep 17 00:00:00 2001
From: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
Date: Fri, 3 Jul 2026 12:25:53 +0300
Subject: [PATCH] extend subtle animations from settings to the rest of the app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar collapse now transitions width instead of snapping via
display:none. Export menu, the modal, and the search overlay all get
a short pop-in (scale + fade) matching the settings panel's motion.
Buttons, doc-list items, and status-bar text ease their hover/color
changes instead of snapping.

Left alone on purpose: the results overlay (re-rendered on every
keystroke — animating it would feel laggy, not smooth), the
autocomplete tooltip (CodeMirror's own timing), and the column-resize
drag handle (wants instant feedback while dragging).
---
 src/ui/app.css | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/ui/app.css b/src/ui/app.css
index cf06890..4f7d82e 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -48,6 +48,12 @@
 }
 
 * { box-sizing: border-box; }
+/* app-wide: buttons/list items/status text ease their hover and state
+   changes instead of snapping; high-frequency UI (results overlay,
+   autocomplete, drag handles) is deliberately excluded below */
+button, .doc-item, .search-item, #rates-info, #total-line {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
 html, body { margin: 0; height: 100%; }
 body {
   font-family: var(--font);
@@ -68,8 +74,15 @@ body {
   display: flex;
   flex-direction: column;
   padding: 6px;
+  overflow: hidden;
+  transition: width 0.18s ease, min-width 0.18s ease, padding 0.18s ease, border-right-color 0.18s ease;
+}
+#sidebar.hidden {
+  width: 0;
+  min-width: 0;
+  padding: 0;
+  border-right-color: transparent;
 }
-#sidebar.hidden { display: none; }
 #doc-list { flex: 1; overflow-y: auto; }
 .doc-item {
   padding: 7px 10px;
@@ -99,6 +112,7 @@ body {
   border-radius: 4px;
   padding: 2px 4px;
   line-height: 1;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
 }
 .doc-item:hover .pin-btn,
 .doc-item:hover .move-btn,
@@ -224,8 +238,14 @@ body {
   min-width: 160px;
   padding: 4px 0;
   z-index: 100;
+  transform-origin: bottom right;
 }
 #export-menu.hidden { display: none; }
+#export-menu:not(.hidden) { animation: menu-pop-in 0.12s ease; }
+@keyframes menu-pop-in {
+  from { opacity: 0; transform: scale(0.97) translateY(4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
 #export-menu button {
   display: block;
   width: 100%;
@@ -451,6 +471,16 @@ body {
 }
 .settings-footer button:hover { background: var(--hover); }
 
+/* shared entrance animations for centered overlays (modal, search) */
+@keyframes overlay-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
 /* ---------- toast */
 #toast {
   position: fixed;
@@ -479,6 +509,8 @@ body {
   z-index: 200;
 }
 #modal.hidden { display: none; }
+#modal:not(.hidden) { animation: overlay-fade-in 0.15s ease; }
+#modal:not(.hidden) .modal-box { animation: pop-in 0.15s ease; }
 .modal-box {
   background: var(--bg-soft);
   border: 1px solid var(--border);
@@ -513,6 +545,8 @@ body {
   z-index: 200;
 }
 #search-overlay.hidden { display: none; }
+#search-overlay:not(.hidden) { animation: overlay-fade-in 0.15s ease; }
+#search-overlay:not(.hidden) .search-box { animation: pop-in 0.15s ease; }
 .search-box {
   background: var(--bg-soft);
   border: 1px solid var(--border);