feat: add a setting to enable pointer on hover (#1585)

* feat: added striped table mode for visual clarity

also added a settings toggle to revert to original behavior

* fix: add pointer on hover behind a toggle

* fix: add `x-link` class to the selector

* fix: indicate that this is global forceful overide

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -180,11 +180,19 @@
                     </ListboxRoot>
                 </Popover>
             </div>
+            <simple-switch
+                :label="t('view.settings.appearance.appearance.striped_data_table_mode')"
+                :value="isDataTableStriped"
+                @change="toggleStripedDataTable" />
             <div class="options-container-item">
                 <Button size="sm" variant="outline" @click="promptMaxTableSizeDialog">{{
                     t('view.settings.appearance.appearance.table_max_size')
                 }}</Button>
             </div>
+            <simple-switch
+                :label="t('view.settings.appearance.appearance.toggle_pointer_on_hover')"
+                :value="showPointerOnHover"
+                @change="togglePointerOnHover" />
         </div>
         <div class="options-container">
             <span class="header">{{ t('view.settings.appearance.timedate.header') }}</span>
@@ -449,12 +457,11 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '@/stores';
+    import { getLanguageName, languageCodes } from '@/localization';
+    import { APP_FONT_FAMILIES } from '@/shared/constants';
     import PresetColorPicker from '@/components/PresetColorPicker.vue';
 
-    import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '../../../../stores';
-    import { getLanguageName, languageCodes } from '../../../../localization';
-    import { APP_FONT_FAMILIES } from '../../../../shared/constants';
-
     import SimpleSwitch from '../SimpleSwitch.vue';
 
     const { t } = useI18n();
@@ -485,7 +492,9 @@
         randomUserColours,
         trustColor,
         notificationIconDot,
-        tablePageSizes
+        tablePageSizes,
+        isDataTableStriped,
+        showPointerOnHover
     } = storeToRefs(appearanceSettingsStore);
 
     const appLanguageDisplayName = computed(() => getLanguageName(String(appLanguage.value)));
@@ -514,6 +523,8 @@
         promptMaxTableSizeDialog,
         setNotificationIconDot,
         setTablePageSizes,
+        toggleStripedDataTable,
+        togglePointerOnHover,
         setAppFontFamily
     } = appearanceSettingsStore;