Merge pull request #480 from CactusPuppy/479-feateditor-make-add-item…

…-button-in-left-sidebar-sticky

feat(editor): make "Add Item" button in left sidebar sticky to bottom

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

app/javascript/scss/editor/_editor.scss

@@ -34,10 +34,20 @@ $top-height: 4rem;
 .editor__scrollable {
   height: 100%;
   max-width: 100%;
-  padding: $margin * 0.25 0;
+  padding: $margin * 0.25 0 0;
   overflow: auto;
 
   @include styled-scrollbar;
+
+  .item-list__add-item {
+    position: sticky;
+    bottom: 0;
+    padding: 1.5rem 0.5rem 0.5rem;
+
+    background: linear-gradient(180deg,
+      change-color(darken($bg-dark, 5%), $alpha: 0) 0,
+      darken($bg-dark, 5%) 1.5rem);
+  }
 }
 
 .editor__top {

app/javascript/src/components/editor/EditorAside.svelte

@@ -27,7 +27,7 @@
     <p class="mt-0 mb-0 pl-1/4 pr-1/4 small text-dark"><em>Start by creating a new item using the button below.</em></p>
   {/if}
 
-  <div class="p-1/8 mt-1/4">
+  <div class="item-list__add-item">
     <EditorItemCreate>
       <span class="button button--secondary w-100 button--square">Add</span>
     </EditorItemCreate>

package.json

@@ -61,10 +61,10 @@
   "scripts": {
     "test": "vitest",
     "postinstall": "patch-package",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,.ts,.svelte}": [
+    "*.{js,ts,svelte}": [
       "eslint --cache --fix"
     ]
   },