feat(transactions): hide filter on page load to prevent flashing

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Docker: Dev",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "docker compose --env-file .env -f docker-compose.dev.yml up --build",
+            "cwd": "${workspaceFolder}",
+            "postDebugTask": "Docker: Dev Down"
+        },
+        {
+            "name": "Docker: Dev (no rebuild)",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "docker compose --env-file .env -f docker-compose.dev.yml up",
+            "cwd": "${workspaceFolder}",
+            "postDebugTask": "Docker: Dev Down"
+        },
+        {
+            "name": "Docker: Prod",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "docker compose --env-file .prod.env -f docker-compose.prod.yml up --build",
+            "cwd": "${workspaceFolder}",
+            "postDebugTask": "Docker: Prod Down"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,119 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Docker: Dev",
+            "type": "shell",
+            "command": "docker",
+            "args": [
+                "compose",
+                "--env-file",
+                ".env",
+                "-f",
+                "docker-compose.dev.yml",
+                "up",
+                "--build"
+            ],
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "label": "Docker: Dev (no rebuild)",
+            "type": "shell",
+            "command": "docker",
+            "args": [
+                "compose",
+                "--env-file",
+                ".env",
+                "-f",
+                "docker-compose.dev.yml",
+                "up"
+            ],
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": []
+        },
+        {
+            "label": "Docker: Dev Refresh Vite Deps",
+            "type": "shell",
+            "command": "docker compose --env-file .env -f docker-compose.dev.yml rm -sfv vite; docker compose --env-file .env -f docker-compose.dev.yml up --build",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": []
+        },
+        {
+            "label": "Docker: Dev Down",
+            "type": "shell",
+            "command": "docker",
+            "args": [
+                "compose",
+                "--env-file",
+                ".env",
+                "-f",
+                "docker-compose.dev.yml",
+                "down"
+            ],
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": []
+        },
+        {
+            "label": "Docker: Prod",
+            "type": "shell",
+            "command": "docker",
+            "args": [
+                "compose",
+                "--env-file",
+                ".prod.env",
+                "-f",
+                "docker-compose.prod.yml",
+                "up",
+                "--build"
+            ],
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": []
+        },
+        {
+            "label": "Docker: Prod Down",
+            "type": "shell",
+            "command": "docker",
+            "args": [
+                "compose",
+                "--env-file",
+                ".prod.env",
+                "-f",
+                "docker-compose.prod.yml",
+                "down"
+            ],
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": []
+        },
+        {
+            "label": "Django: Runserver localhost:8000",
+            "type": "shell",
+            "command": "${command:python.interpreterPath}",
+            "args": [
+                "manage.py",
+                "runserver",
+                "localhost:8000"
+            ],
+            "options": {
+                "cwd": "${workspaceFolder}/app",
+                "env": {
+                    "PYTHONUNBUFFERED": "1"
+                }
+            },
+            "problemMatcher": []
+        }
+    ]
+}

app/templates/monthly_overview/pages/overview.html

@@ -268,7 +268,7 @@
           </div>
 
           {# Filter transactions form #}
-          <div class="z-1" x-show="filterOpen" x-collapse>
+          <div class="z-1" x-show="filterOpen" x-collapse x-cloak>
             <div class="card card-body bg-base-200 mt-2">
               <div class="text-right">
                 <button class="btn btn-outline btn-error btn-sm w-fit"

app/templates/transactions/pages/transactions.html

@@ -218,7 +218,7 @@
           </div>
 
           {# Filter transactions form #}
-          <div class="z-1" x-show="filterOpen" x-collapse>
+          <div class="z-1" x-show="filterOpen" x-collapse x-cloak>
             <div class="card card-body bg-base-200 mt-2">
               <div class="text-right">
                 <button class="btn btn-outline btn-error btn-sm w-fit"

docker/dev/vite/Dockerfile

@@ -2,9 +2,9 @@ FROM node:lts-alpine
 
 WORKDIR /usr/src/frontend
 
-COPY ./frontend/package.json .
+COPY ./frontend/package.json ./frontend/package-lock.json ./
 
-RUN npm install --verbose && npm cache clean --force
+RUN npm ci --verbose && npm cache clean --force
 
 ENV PATH ./node_modules/.bin/:$PATH
 

frontend/package-lock.json

@@ -23,7 +23,7 @@
         "bootstrap": "^5.3.8",
         "chart.js": "^4.5.1",
         "chartjs-chart-sankey": "^0.14.0",
-        "daisyui": "^5.5.5",
+        "daisyui": "5.5.19",
         "htmx.org": "^2.0.8",
         "hyperscript.org": "^0.9.14",
         "mathjs": "^15.2.0",
@@ -1667,12 +1667,15 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.25",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz",
-      "integrity": "sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==",
+      "version": "2.10.24",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.24.tgz",
+      "integrity": "sha512-I2NkZOOrj2XuguvWCK6OVh9GavsNjZjK908Rq3mIBK25+GD8vPX5w2WdxVqnQ7xx3SrZJiCiZFu+/Oz50oSYSA==",
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/bootstrap": {
@@ -1743,9 +1746,9 @@
       "license": "MIT"
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001754",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
-      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
+      "version": "1.0.30001791",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
+      "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1816,9 +1819,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "5.5.5",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.5.tgz",
-      "integrity": "sha512-ekvI93ZkWIJoCOtDl0D2QMxnWvTejk9V5nWBqRv+7t0xjiBXqAK5U6o6JE2RPvlIC3EqwNyUoIZSdHX9MZK3nw==",
+      "version": "5.5.19",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.19.tgz",
+      "integrity": "sha512-pbFAkl1VCEh/MPCeclKL61I/MqRIFFhNU7yiXoDDRapXN4/qNCoMxeCCswyxEEhqL5eiTTfwHvucFtOE71C9sA==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/saadeghi/daisyui?sponsor=1"

frontend/package.json

@@ -30,7 +30,7 @@
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "chartjs-chart-sankey": "^0.14.0",
-    "daisyui": "^5.5.5",
+    "daisyui": "5.5.19",
     "htmx.org": "^2.0.8",
     "hyperscript.org": "^0.9.14",
     "mathjs": "^15.2.0",

frontend/src/js/htmx.js

@@ -1,4 +1,4 @@
-import 'hyperscript.org';
+import _hyperscript from 'hyperscript.org';
 import './_htmx.js';
 import Alpine from "alpinejs";
 import mask from '@alpinejs/mask';
@@ -6,8 +6,10 @@ import collapse from '@alpinejs/collapse'
 import { create, all } from 'mathjs';
 
 window.Alpine = Alpine;
-const _hyperscript = window._hyperscript;
-window._hyperscript = _hyperscript;
+if (!window._hyperscript) {
+    window._hyperscript = _hyperscript;
+    _hyperscript.browserInit();
+}
 window.math = create(all, {
     number: 'BigNumber',
 });

frontend/src/plugins/tw-bootstrap-grid-plugin.js

@@ -0,0 +1,3 @@
+import twBootstrapGrid from "tw-bootstrap-grid";
+
+export default twBootstrapGrid;

frontend/src/styles/tailwind.css

@@ -4,7 +4,7 @@
   themes: wygiwyh_dark --default, wygiwyh_light;
   logs: true;
 }
-@plugin "tw-bootstrap-grid";
+@plugin "../plugins/tw-bootstrap-grid-plugin.js";
 
 @plugin "daisyui/theme" {
   name: "wygiwyh_light";