From 71e99d1c94c53b44b576523bb3f6eaaba05be718 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Sun, 31 Aug 2025 16:56:05 -0400
Subject: [PATCH] Added button bar, cleaned up button styling.

---
 finnow-api/source/util/pagination.d           |  2 +-
 web-app/src/components/ButtonBar.vue          | 14 ++++++++++++++
 web-app/src/components/HomeModule.vue         | 11 +++++------
 web-app/src/pages/AccountPage.vue             |  5 +++--
 web-app/src/pages/CategoriesPage.vue          |  5 +++--
 web-app/src/pages/UserAccountLayout.vue       | 14 ++++++++++++--
 web-app/src/pages/VendorsPage.vue             |  5 +++--
 web-app/src/pages/home/AccountsModule.vue     |  2 +-
 web-app/src/pages/home/TransactionsModule.vue |  2 +-
 9 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 web-app/src/components/ButtonBar.vue

diff --git a/finnow-api/source/util/pagination.d b/finnow-api/source/util/pagination.d
index 84864ed..d251c1b 100644
--- a/finnow-api/source/util/pagination.d
+++ b/finnow-api/source/util/pagination.d
@@ -139,7 +139,7 @@ struct Page(T) {
             totalCount,
             pageCount,
             pageRequest.page == 1,
-            pageRequest.page == pageCount
+            pageRequest.page == pageCount || totalCount == 0
         );
     }
 }
diff --git a/web-app/src/components/ButtonBar.vue b/web-app/src/components/ButtonBar.vue
new file mode 100644
index 0000000..04cb4c3
--- /dev/null
+++ b/web-app/src/components/ButtonBar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div class="button-bar">
+    <slot></slot>
+  </div>
+</template>
+<style lang="css">
+.button-bar {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+</style>
diff --git a/web-app/src/components/HomeModule.vue b/web-app/src/components/HomeModule.vue
index 9f4af7e..d613ad7 100644
--- a/web-app/src/components/HomeModule.vue
+++ b/web-app/src/components/HomeModule.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import ButtonBar from '@/components/ButtonBar.vue';
+
+
 defineProps<{ title: string }>()
 </script>
 <template>
@@ -7,9 +10,9 @@ defineProps<{ title: string }>()
       <h2 class="app-module-header">{{ title }}</h2>
       <slot></slot>
     </div>
-    <div class="app-module-actions">
+    <ButtonBar>
       <slot name="actions"></slot>
-    </div>
+    </ButtonBar>
   </div>
 </template>
 <style lang="css">
@@ -28,8 +31,4 @@ defineProps<{ title: string }>()
 .app-module-header {
   margin: 0;
 }
-
-.app-module-actions {
-  text-align: right;
-}
 </style>
diff --git a/web-app/src/pages/AccountPage.vue b/web-app/src/pages/AccountPage.vue
index 49c0ccc..247b334 100644
--- a/web-app/src/pages/AccountPage.vue
+++ b/web-app/src/pages/AccountPage.vue
@@ -5,6 +5,7 @@ import { getSelectedProfile } from '@/api/profile';
 import AddValueRecordModal from '@/components/AddValueRecordModal.vue';
 import AppButton from '@/components/AppButton.vue';
 import AppPage from '@/components/AppPage.vue';
+import ButtonBar from '@/components/ButtonBar.vue';
 import AccountHistory from '@/components/history/AccountHistory.vue';
 import PropertiesTable from '@/components/PropertiesTable.vue';
 import { showConfirm } from '@/util/alert';
@@ -88,13 +89,13 @@ async function addValueRecord() {
         <td>{{ formatMoney(account.currentBalance, account.currency) }}</td>
       </tr>
     </PropertiesTable>
-    <div>
+    <ButtonBar>
       <AppButton @click="addValueRecord()">Record Value</AppButton>
       <AppButton icon="wrench"
         @click="router.push(`/profiles/${getSelectedProfile(route)}/accounts/${account?.id}/edit`)">
         Edit</AppButton>
       <AppButton icon="trash" @click="deleteAccount()">Delete</AppButton>
-    </div>
+    </ButtonBar>
 
     <AccountHistory :account-id="account.id" v-if="account" />
 
diff --git a/web-app/src/pages/CategoriesPage.vue b/web-app/src/pages/CategoriesPage.vue
index c0f02df..fd80804 100644
--- a/web-app/src/pages/CategoriesPage.vue
+++ b/web-app/src/pages/CategoriesPage.vue
@@ -3,6 +3,7 @@ import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type TransactionCategory, type TransactionCategoryTree } from '@/api/transaction';
 import AppButton from '@/components/AppButton.vue';
 import AppPage from '@/components/AppPage.vue';
+import ButtonBar from '@/components/ButtonBar.vue';
 import CategoryDisplayItem from '@/components/CategoryDisplayItem.vue';
 import EditCategoryModal from '@/components/EditCategoryModal.vue';
 import { showConfirm } from '@/util/alert';
@@ -76,9 +77,9 @@ async function addCategory() {
       <CategoryDisplayItem v-for="category in categories" :key="category.id" :category="category" :editable="true"
         @edited="editCategory" @deleted="deleteCategory" />
     </div>
-    <div style="text-align: right;">
+    <ButtonBar>
       <AppButton icon="plus" @click="addCategory()">Add Category</AppButton>
-    </div>
+    </ButtonBar>
 
     <EditCategoryModal ref="editCategoryModal" :category="editedCategory" />
   </AppPage>
diff --git a/web-app/src/pages/UserAccountLayout.vue b/web-app/src/pages/UserAccountLayout.vue
index 0e4820d..fa007bf 100644
--- a/web-app/src/pages/UserAccountLayout.vue
+++ b/web-app/src/pages/UserAccountLayout.vue
@@ -5,11 +5,13 @@ pages.
 -->
 <script setup lang="ts">
 import { AuthApiClient } from '@/api/auth';
+import { getSelectedProfile } from '@/api/profile';
 import { secondsUntilExpired } from '@/api/token-util';
 import { useAuthStore } from '@/stores/auth-store';
 import { onMounted, ref, type Ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
+const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
@@ -24,6 +26,14 @@ onMounted(async () => {
   authCheckTimer.value = setInterval(checkAuth, 1000)
 })
 
+function onHeaderClicked() {
+  try {
+    router.push('/profiles/' + getSelectedProfile(route))
+  } catch {
+    router.push('/')
+  }
+}
+
 async function checkAuth() {
   if (!authStore.state) {
     clearInterval(authCheckTimer.value)
@@ -51,7 +61,7 @@ async function checkAuth() {
   <div>
     <header class="app-header-bar">
       <div>
-        <h1 class="app-header-text" @click="router.push('/')">Finnow</h1>
+        <h1 class="app-header-text" @click="onHeaderClicked()">Finnow</h1>
       </div>
       <div>
         <span class="app-user-widget" @click="router.push('/me')">
diff --git a/web-app/src/pages/VendorsPage.vue b/web-app/src/pages/VendorsPage.vue
index 8d27bd3..3d47731 100644
--- a/web-app/src/pages/VendorsPage.vue
+++ b/web-app/src/pages/VendorsPage.vue
@@ -3,6 +3,7 @@ import { getSelectedProfile } from '@/api/profile';
 import { TransactionApiClient, type TransactionVendor } from '@/api/transaction';
 import AppButton from '@/components/AppButton.vue';
 import AppPage from '@/components/AppPage.vue';
+import ButtonBar from '@/components/ButtonBar.vue';
 import EditVendorModal from '@/components/EditVendorModal.vue';
 import { showConfirm } from '@/util/alert';
 import { onMounted, ref, useTemplateRef, type Ref } from 'vue';
@@ -65,9 +66,9 @@ async function deleteVendor(vendor: TransactionVendor) {
         </tr>
       </tbody>
     </table>
-    <div style="text-align: right;">
+    <ButtonBar>
       <AppButton button-type="button" icon="plus" @click="addVendor()">Add Vendor</AppButton>
-    </div>
+    </ButtonBar>
 
     <EditVendorModal ref="editVendorModal" :vendor="editedVendor" />
   </AppPage>
diff --git a/web-app/src/pages/home/AccountsModule.vue b/web-app/src/pages/home/AccountsModule.vue
index a67bb0c..878a47a 100644
--- a/web-app/src/pages/home/AccountsModule.vue
+++ b/web-app/src/pages/home/AccountsModule.vue
@@ -42,7 +42,7 @@ onMounted(async () => {
             <td>{{ account.type }}</td>
             <td>
               <span v-if="account.currentBalance">{{ formatMoney(account.currentBalance, account.currency) }}</span>
-              <span v-if="!account.currentBalance">Unknown</span>
+              <span v-if="!account.currentBalance">-</span>
             </td>
           </tr>
         </tbody>
diff --git a/web-app/src/pages/home/TransactionsModule.vue b/web-app/src/pages/home/TransactionsModule.vue
index 77a5162..8bccbcf 100644
--- a/web-app/src/pages/home/TransactionsModule.vue
+++ b/web-app/src/pages/home/TransactionsModule.vue
@@ -70,7 +70,7 @@ async function fetchPage(pageRequest: PageRequest) {
       <PaginationControls :page="transactions" @update="pr => fetchPage(pr)"></PaginationControls>
     </template>
     <template v-slot:actions>
-      <AppButton size="sm" icon="plus" @click="router.push(`/profiles/${getSelectedProfile(route)}/add-transaction`)">
+      <AppButton icon="plus" @click="router.push(`/profiles/${getSelectedProfile(route)}/add-transaction`)">
         Add
         Transaction</AppButton>
     </template>