Fix shop detail navigation titles and table panel headers

frontend/src/components/layout/Panel.vue

@@ -108,4 +108,14 @@ withDefaults(
     overflow-y: hidden;
   }
 }
+
+.panel-table > .panel-title {
+  padding: 1.25rem 1.25rem 0.75rem;
+  margin-bottom: 0;
+}
+
+.panel-table > .panel-header {
+  padding: 1.25rem 1.25rem 1rem;
+  margin-bottom: 0;
+}
 </style>

frontend/src/components/layout/SidebarDetail.vue

@@ -6,8 +6,8 @@
       @click="toggleMobileOpen"
     >
       {{ shop.nameCombined }}
-      {{ route.meta.title && route.name !== "account.shops.detail" ? " / " : "" }}
-      {{ route.meta.title }}
+      {{ currentRouteTitle && route.name !== "account.shops.detail" ? " / " : "" }}
+      {{ currentRouteTitle }}
     </div>
 
     <div ref="sidebarRef" :class="['sidebar', 'sidebar-detail', { 'mobile-open': isMobileOpen }]">
@@ -56,7 +56,9 @@
             v-if="$router.resolve({ name: item.route }).meta.icon"
             class="nav-link-icon"
           />
-          <span class="nav-link-name">{{ $router.resolve({ name: item.route }).meta.title }}</span>
+          <span class="nav-link-name">{{
+            $t($router.resolve({ name: item.route }).meta.titleKey ?? "")
+          }}</span>
           <span v-if="item.count !== undefined" class="nav-link-count">{{ item.count }}</span>
         </router-link>
       </nav>
@@ -68,9 +70,11 @@
 import type { RouterOutput } from "@/helpers/trpc";
 import { computed, ref, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import StatusIcon from "@/components/StatusIcon.vue";
 
 const route = useRoute();
+const { t } = useI18n();
 
 const isMobileOpen = ref(false);
 const sidebarRef = ref<HTMLElement | null>(null);
@@ -80,6 +84,11 @@ const props = defineProps<{
   shop: RouterOutput["organization"]["shop"]["get"] | null;
 }>();
 
+const currentRouteTitle = computed(() => {
+  const titleKey = route.meta.titleKey;
+  return typeof titleKey === "string" ? t(titleKey) : "";
+});
+
 const isRouteActive = (routeName: string) => {
   // Exact match
   if (route.name === routeName) return true;

frontend/src/composables/useShopDetail.ts

@@ -4,6 +4,7 @@ import { compareVersions } from "compare-versions";
 import { trpcClient } from "@/helpers/trpc";
 import type { RouterOutput } from "@/helpers/trpc";
 import { useAlert } from "@/composables/useAlert";
+import { i18n } from "@/i18n";
 
 export function useShopDetail() {
   const route = useRoute();
@@ -46,7 +47,8 @@ export function useShopDetail() {
       latestShopwareVersion.value = shopwareVersions.value[0];
 
       if (shop.value?.name) {
-        const pageTitle = route.meta.title;
+        const titleKey = route.meta.titleKey;
+        const pageTitle = typeof titleKey === "string" ? i18n.global.t(titleKey) : null;
         document.title =
           typeof pageTitle === "string"
             ? `${pageTitle} - ${shop.value.name} | Shopmon`

frontend/src/layouts/ShopDetailLayout.vue

@@ -6,7 +6,9 @@
       v-if="shop"
       :breadcrumb="
         shop.nameCombined +
-        (route.meta.title && route.name !== 'account.shops.detail' ? ' / ' + route.meta.title : '')
+        (currentRouteTitle && route.name !== 'account.shops.detail'
+          ? ' / ' + currentRouteTitle
+          : '')
       "
       :title="shop.name"
       :titleMobileHide="true"
@@ -103,6 +105,8 @@
 
 <script setup lang="ts">
 import { useRoute } from "vue-router";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useShopDetail } from "@/composables/useShopDetail";
 import SidebarDetail from "@/components/layout/SidebarDetail.vue";
 import HeaderContainer from "@/components/layout/HeaderContainer.vue";
@@ -112,6 +116,12 @@ import Modal from "@/components/layout/Modal.vue";
 import FaRotate from "~icons/fa6-solid/rotate";
 
 const route = useRoute();
+const { t } = useI18n();
+
+const currentRouteTitle = computed(() => {
+  const titleKey = route.meta.titleKey;
+  return typeof titleKey === "string" ? t(titleKey) : "";
+});
 
 const {
   shop,