Add two buttons and options for them

resources/assets/v2/src/pages/accounts/index.js

@@ -30,6 +30,9 @@ import '../../css/grid-ff3-theme.css';
 import Get from "../../api/v2/model/account/get.js";
 import Put from "../../api/v2/model/account/put.js";
 import AccountRenderer from "../../support/renderers/AccountRenderer.js";
+import {showInternalsButton} from "../../support/page-settings/show-internals-button.js";
+import {showWizardButton} from "../../support/page-settings/show-wizard-button.js";
+
 
 // set type from URL
 const beforeQuery = window.location.href.split('?');
@@ -47,6 +50,10 @@ sortingColumn = params.column ?? '';
 sortDirection = params.direction ?? '';
 
 
+
+showInternalsButton();
+showWizardButton();
+
 let index = function () {
     return {
         // notifications

resources/assets/v2/src/support/page-settings/show-internals-button.js

@@ -0,0 +1,25 @@
+/*
+ * show-internals-button.js
+ * Copyright (c) 2024 james@firefly-iii.org.
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+
+export function showInternalsButton() {
+    console.log('showInternalsButton');
+    document.querySelector('.toggle-page-internals').classList.remove('d-none')
+}

resources/assets/v2/src/support/page-settings/show-wizard-button.js

@@ -0,0 +1,24 @@
+/*
+ * show-settings-button.js
+ * Copyright (c) 2024 james@firefly-iii.org.
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+
+export function showWizardButton() {
+    document.querySelector('.toggle-page-wizard').classList.remove('d-none')
+}

resources/views/v2/accounts/index.blade.php

@@ -7,7 +7,7 @@
                 <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                     <div class="card">
                         <div class="card-header">
-                            <h3 class="card-title">Info</h3>
+                            <h3 class="card-title">Net worth</h3>
                         </div>
                         <div class="card-body">
                             some chart
@@ -17,7 +17,7 @@
                 <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                     <div class="card">
                         <div class="card-header">
-                            <h3 class="card-title">Info</h3>
+                            <h3 class="card-title">In + out this period</h3>
                         </div>
                         <div class="card-body">
                             Same
@@ -27,7 +27,7 @@
                 <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                     <div class="card">
                         <div class="card-header">
-                            <h3 class="card-title">Info</h3>
+                            <h3 class="card-title">Something else</h3>
                         </div>
                         <div class="card-body">
                             Same
@@ -186,6 +186,48 @@
                     Nav
                 </div>
             </div>
+
+            <!-- Internal settings modal -->
+            <div class="modal fade" id="internalsModal" tabindex="-1" aria-labelledby="internalsModalLabel" aria-hidden="true">
+                <div class="modal-dialog modal-lg">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h1 class="modal-title fs-5" id="internalsModalLabel">TODO Page settings</h1>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            - Group accounts <br>
+                            - Columns to show<br>
+                            - Show / hide inactive accounts (dropdown: both, active inactive only)<br>
+                            - default sort field<br>
+                            - default sort direction<br>
+                            - show info boxes (once they contain info)<br>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="wizardModal" tabindex="-1" aria-labelledby="wizardModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="wizardModalLabel">TODO Would you like to know more?</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    Need to learn what's on this page?<br>
+                    Take me to the help pages (opens in a new window or tab)
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal"><em class="fa-solid fa-hat-wizard"></em> Show me around</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> <em class="fa-solid fa-right-from-bracket"></em> Take me to the documentation</button>
+                </div>
+            </div>
         </div>
     </div>
 

resources/views/v2/partials/layout/footer.blade.php

@@ -1,7 +1,13 @@
 <footer class="app-footer">
     <!--begin::To the end-->
     <div class="float-end d-none d-sm-inline">
-        <a href="{{ route('debug') }}">v{{ $FF_VERSION }}</a>
+        <a href="{{ route('debug') }}">
+            @if(str_starts_with($FF_VERSION, 'develop'))
+                <span class="text-danger">{{ $FF_VERSION }}</span>
+            @else
+                v{{ $FF_VERSION }}
+            @endif
+        </a>
     </div>
     <!--end::To the end-->
     <!--begin::Copyright-->

resources/views/v2/partials/layout/topbar.blade.php

@@ -3,13 +3,13 @@
         <i class="fa-solid fa-landmark"></i>
     </a>
 </li>
-<li class="nav-item">
+<li class="nav-item toggle-page-internals d-none">
-    <a class="nav-link" href="#">
+    <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#internalsModal">
         <em class="fa-solid fa-sliders"></em>
     </a>
 </li>
-<li class="nav-item">
+<li class="nav-item toggle-page-wizard d-none">
-    <a class="nav-link" href="#">
+    <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#wizardModal">
         <em class="fa-solid fa-hat-wizard"></em>
     </a>
 </li>