Refactor layout components for improved readability and consistency

src/components/base/SKTableActionBar.vue

@@ -14,10 +14,10 @@
     </v-btn>
 
     <v-tooltip :disabled="!searchToggleTooltipText" location="top" :text="searchToggleTooltipText">
-      <template #activator="{ props }">
+      <template #activator="{ props: activatorProps }">
         <v-btn
           v-if="showSearchToggle"
-          v-bind="props"
+          v-bind="activatorProps"
           density="comfortable"
           icon
           variant="text"
@@ -29,8 +29,8 @@
     </v-tooltip>
 
     <v-tooltip :disabled="!refreshTooltipText" location="top" :text="refreshTooltipText">
-      <template #activator="{ props }">
-        <v-btn v-bind="props" density="comfortable" icon variant="text" @click="$emit('refresh')">
+      <template #activator="{ props: activatorProps }">
+        <v-btn v-bind="activatorProps" density="comfortable" icon variant="text" @click="$emit('refresh')">
           <v-icon :icon="mdiRefresh" />
         </v-btn>
       </template>

src/components/base/login/LoginToolBar.vue

@@ -1,29 +1,38 @@
 <template>
   <div class="d-flex justify-end py-0 py-sm-2">
     <v-btn
-class="d-none d-md-block" color="grey-darken-1" :icon="mdiPaletteOutline" size="small" variant="text"
+      class="d-none d-md-block"
+      color="grey-darken-1"
+      :icon="mdiPaletteOutline"
+      size="small"
+      variant="text"
       @click="toggleTheme"></v-btn>
-    <!-- <v-btn :icon="mdiDockWindow" variant="text" size="small" color="grey-darken-1" @click="handleToggleLayout"></v-btn> -->
     <v-menu location="bottom end">
       <template #activator="{ props: menuActivatorProps }">
         <v-btn
-v-bind="menuActivatorProps" color="grey-darken-1" :icon="mdiTranslate" size="small"
-          variant="text"></v-btn>
+          v-bind="menuActivatorProps"
+          color="grey-darken-1"
+          :icon="mdiTranslate"
+          size="small"
+          variant="text"
+        ></v-btn>
       </template>
       <v-list density="compact">
         <v-list-item
-v-for="locale in localeOptions" :key="locale" :active="locale === props.locale"
-          @click="handleSelectLocale(locale)">
-          <v-list-item-title>{{ localeLabels[locale] ?? locale }}</v-list-item-title>
+          v-for="localeOption in localeOptions"
+          :key="localeOption"
+          :active="localeOption === props.locale"
+          @click="handleSelectLocale(localeOption)"
+        >
+          <v-list-item-title>{{ localeLabels[localeOption] ?? localeOption }}</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>
-    <!-- <v-btn :icon="mdiWeatherNight" variant="text" size="small" color="grey-darken-1"></v-btn> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import { mdiDockWindow, mdiPaletteOutline, mdiTranslate, mdiWeatherNight } from '@mdi/js'
+import { mdiPaletteOutline, mdiTranslate } from '@mdi/js'
 import { computed } from 'vue'
 import { useTheme } from 'vuetify'
 import { getNextThemeName } from '@/utils/theme'