add a default action to a setting: for text click

src/assets/scss/moz.scss

@@ -3,7 +3,7 @@
 @-moz-document url-prefix() {
   #acontent {
     margin-right: calc(-1rem + 1px);
-    padding-right: 1rem;
+    padding-right: 1.25rem;
   }
 
   // applies to playlist list page

src/components/SettingsView/Group.vue

@@ -10,7 +10,12 @@
         :key="index"
         :class="{ inactive: setting.inactive && setting.inactive() }"
       >
-        <div class="title ellip" @click="setting.action()">
+        <div
+          class="title ellip"
+          @click="
+            setting.defaultAction ? setting.defaultAction() : setting.action()
+          "
+        >
           {{ setting.title }}
         </div>
         <div class="options">

src/interfaces/settings.ts

@@ -12,6 +12,7 @@ export interface Setting {
   inactive?: () => boolean;
   action: (arg0?: any) => void;
   source: () => any;
+  defaultAction?: () => void;
 }
 
 export interface SettingGroup {

src/settings/general/context-children-show-mode.ts

@@ -22,6 +22,7 @@ const context_children_show_mode: Setting = {
   ],
   source: () => settings().contextChildrenShowMode,
   action: (value: mode) => settings().setContextChildrenShowMode(value),
+  defaultAction: () => settings().toggleContextChildrenShowMode(),
 };
 
-export default [context_children_show_mode];
+export default [context_children_show_mode];

src/stores/settings/index.ts

@@ -23,6 +23,12 @@ export default defineStore("settings", {
     setContextChildrenShowMode(mode: contextChildrenShowMode) {
       this.contextChildrenShowMode = mode;
     },
+    toggleContextChildrenShowMode() {
+      this.contextChildrenShowMode =
+        this.contextChildrenShowMode === contextChildrenShowMode.click
+          ? contextChildrenShowMode.hover
+          : contextChildrenShowMode.click;
+    },
   },
   getters: {
     can_extend_width(): boolean {