Added button bar, cleaned up button styling.

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
         );
     }
 }

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>

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>

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" />
 

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>

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')">

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>

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>

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>