From 7b74e91621c824b8391dc519352eef8a52df20af Mon Sep 17 00:00:00 2001
From: Ian Mayo <ian@planetmayo.com>
Date: Thu, 12 Jun 2025 19:03:47 +0000
Subject: [PATCH 1/3] animate introduction of plus icon

---
 src/style.css          | 10 ++++++++++
 src/ui/header-utils.ts |  6 ++++++
 2 files changed, 16 insertions(+)

diff --git a/src/style.css b/src/style.css
index 3bcdbd0..7728b4a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -82,6 +82,16 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.gs-plus-icon {
+  opacity: 0;
+  transform: scale(0.7);
+  transition: opacity 500ms cubic-bezier(0.4,0,0.2,1), transform 500ms cubic-bezier(0.4,0,0.2,1);
+}
+.gs-plus-icon.gs-plus-icon--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
diff --git a/src/ui/header-utils.ts b/src/ui/header-utils.ts
index c1e266b..cde58f5 100644
--- a/src/ui/header-utils.ts
+++ b/src/ui/header-utils.ts
@@ -105,6 +105,12 @@ function addPlusIconToHeader(header: HTMLTableCellElement, type: HeaderType): vo
   plusIcon.textContent = '+';
   plusIcon.style.marginLeft = '4px';
   plusIcon.style.cursor = 'pointer';
+
+  // Animate appearance
+  // Add the visible class after a tick to trigger the transition
+  setTimeout(() => {
+    plusIcon.classList.add('gs-plus-icon--visible');
+  }, 10);
   
   // Add click handler
   plusIcon.addEventListener('click', (e) => {

From 04759abc7a52dee86be7c4e90c9dd288d06e989b Mon Sep 17 00:00:00 2001
From: Ian Mayo <ian@planetmayo.com>
Date: Fri, 13 Jun 2025 09:45:31 +0100
Subject: [PATCH 2/3] ignore color code settings

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index d289713..716477b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -137,3 +137,4 @@ dist
 
 *storybook.log
 storybook-static
+.vscode/settings.json

From cbff1e82d57fb17eaee452154b2ceefa3c5e3bc9 Mon Sep 17 00:00:00 2001
From: Ian Mayo <ian@planetmayo.com>
Date: Fri, 13 Jun 2025 16:33:09 +0100
Subject: [PATCH 3/3] codacy fixes

---
 src/style.css          | 1 +
 src/ui/header-utils.ts | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index 7728b4a..ac9bd24 100644
--- a/src/style.css
+++ b/src/style.css
@@ -87,6 +87,7 @@ button:focus-visible {
   transform: scale(0.7);
   transition: opacity 500ms cubic-bezier(0.4,0,0.2,1), transform 500ms cubic-bezier(0.4,0,0.2,1);
 }
+
 .gs-plus-icon.gs-plus-icon--visible {
   opacity: 1;
   transform: scale(1);
diff --git a/src/ui/header-utils.ts b/src/ui/header-utils.ts
index cde58f5..175b2e2 100644
--- a/src/ui/header-utils.ts
+++ b/src/ui/header-utils.ts
@@ -9,6 +9,8 @@ const PLUS_ICON_CLASS = 'gs-plus-icon';
 const HEADER_WITH_ICON_CLASS = 'gs-has-plus-icon';
 const PLUS_ICON_ACTIVE_CLASS = 'gs-plus-icon--active';
 
+const SHORT_TIME = 10
+
 export function injectPlusIcons(table: HTMLTableElement, columnTypes: ColumnType[]): void {
   // Remove any existing plus icons first
   removePlusIcons(table);
@@ -110,7 +112,7 @@ function addPlusIconToHeader(header: HTMLTableCellElement, type: HeaderType): vo
   // Add the visible class after a tick to trigger the transition
   setTimeout(() => {
     plusIcon.classList.add('gs-plus-icon--visible');
-  }, 10);
+  }, SHORT_TIME);
   
   // Add click handler
   plusIcon.addEventListener('click', (e) => {