feat: add toggle rule activation

Author: sebastienfontaine

src/common/helpers.ts

@@ -1,3 +1,5 @@
+import { Rule } from './types.ts';
+
 export function _clone(obj: any) {
 	if (obj === null || typeof obj !== 'object') {
 		return obj;
@@ -230,6 +232,14 @@ export function _getIcons() {
 	];
 }
 
-export function _generateRandomId() {
+export function _generateRandomId(): string {
 	return Math.random().toString(36).substring(2, 9);
 }
+
+export function _isRuleEnabled(rule: Rule): boolean {
+	if (rule.is_enabled === undefined) {
+		return true;
+	}
+
+	return rule.is_enabled;
+}

src/common/storage.ts

@@ -17,6 +17,7 @@ export function _getDefaultTabModifierSettings(): TabModifierSettings {
 export function _getDefaultRule(name: string, title: string, urlFragment: string): Rule {
 	return {
 		id: _generateRandomId(),
+		is_enabled: true,
 		name: name,
 		detection: 'CONTAINS',
 		url_fragment: urlFragment,

src/common/types.ts

@@ -25,6 +25,7 @@ export type Rule = {
 	detection: string;
 	url_fragment: string;
 	tab: Tab;
+	is_enabled: boolean;
 };
 
 export type Group = {

src/components/options/center/sections/TabRules/RuleForm.vue

@@ -1,6 +1,14 @@
 <template>
-	<h3 v-if="options.showTitle" class="font-bold text-lg flex justify-between mb-2">
-		<span v-if="isEditMode">Edit rule</span>
+	<h3 v-if="options.showTitle" class="font-bold text-lg flex justify-between mb-2 gap-4">
+		<div v-if="isEditMode" class="flex justify-between w-full items-center justify-center">
+			<span>Edit rule</span>
+
+			<input
+				v-model="currentRule.is_enabled"
+				type="checkbox"
+				class="toggle toggle-xs toggle-primary"
+			/>
+		</div>
 		<span v-else>Add a new rule</span>
 
 		<div class="flex gap-2 items-center">

src/components/options/center/sections/TabRules/TableRules.vue

@@ -3,6 +3,7 @@
 		<table class="table table-zebra">
 			<thead>
 				<tr>
+					<th scope="col"></th>
 					<th scope="col">Name</th>
 					<th scope="col">Group</th>
 					<th scope="col">Title</th>
@@ -16,6 +17,23 @@
 			<draggable v-model="rules" tag="tbody" item-key="id" @end="onDragEnd">
 				<template #item="{ element: rule }">
 					<tr class="group cursor-pointer hover:bg-base-100" @click="editRule(rule)">
+						<td>
+							<div class="tooltip tooltip-right" data-tip="Enable / Disable Rule">
+								<input
+									v-if="rule.is_enabled"
+									checked="checked"
+									type="checkbox"
+									class="toggle toggle-xs toggle-primary"
+									@click.prevent="(event) => toggleRule(event, rule)"
+								/>
+								<input
+									v-else
+									type="checkbox"
+									class="toggle toggle-xs toggle-success"
+									@click.prevent="(event) => toggleRule(event, rule)"
+								/>
+							</div>
+						</td>
 						<td scope="row">{{ rule.name }}</td>
 						<td>
 							<template v-if="!rule.tab.group_id">-</template>
@@ -129,6 +147,17 @@ const editRule = (rule: Rule) => {
 	} as RuleModalParams);
 };
 
+const toggleRule = async (event: MouseEvent, rule: Rule) => {
+	event.stopPropagation();
+
+	if (typeof rule.is_enabled === 'undefined') {
+		rule.is_enabled = true;
+	}
+
+	await rulesStore.toggleRule(rule.id);
+	rules.value = [...rulesStore.rules]; // Update the rules array after toggling
+};
+
 const duplicateRule = async (event: MouseEvent, ruleId: string) => {
 	event.stopPropagation();
 	await rulesStore.duplicateRule(ruleId);

src/content.js

@@ -189,6 +189,10 @@ export async function applyRule(ruleParam, updateTitle) {
 		return;
 	}
 
+	if (rule.is_enabled === undefined || !rule.is_enabled) {
+		return;
+	}
+
 	if (rule.tab.title && updateTitle) {
 		let originalTitleElement = document.querySelector('meta[name="original-tab-modifier-title"]');
 

src/stores/rules.store.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { Group, Rule, Settings, TabModifierSettings } from '../common/types.ts';
-import { _clone, _generateRandomId } from '../common/helpers.ts';
+import { _clone, _generateRandomId, _isRuleEnabled } from '../common/helpers.ts';
 import {
 	_clearStorage,
 	_getDefaultTabModifierSettings,
@@ -40,6 +40,17 @@ export const useRulesStore = defineStore('rules', {
 
 			return rules;
 		},
+		fixRuleIsEnabled(rules: Rule[]) {
+			rules = rules.map((rule) => {
+				if (rule.is_enabled === undefined) {
+					rule.is_enabled = true;
+				}
+
+				return rule;
+			});
+
+			return rules;
+		},
 		handleMissingRuleSettings(rules: Rule[]): Rule[] {
 			rules = rules.map((rule) => {
 				if (!rule.id) {
@@ -106,6 +117,7 @@ export const useRulesStore = defineStore('rules', {
 					tabModifier.groups = tabModifier.groups ?? [];
 					tabModifier.rules = this.handleMissingRuleSettings(tabModifier.rules);
 					tabModifier.rules = this.fixDuplicateRuleIds(tabModifier.rules);
+					tabModifier.rules = this.fixRuleIsEnabled(tabModifier.rules);
 					tabModifier.groups = this.addMissingInvisibleChar(tabModifier.groups);
 
 					this.groups = tabModifier.groups;
@@ -129,6 +141,7 @@ export const useRulesStore = defineStore('rules', {
 				config.groups = config.groups ?? [];
 				config.rules = this.handleMissingRuleSettings(config.rules);
 				config.rules = this.fixDuplicateRuleIds(config.rules);
+				config.rules = this.fixRuleIsEnabled(config.rules);
 				config.groups = this.addMissingInvisibleChar(config.groups);
 
 				const defaultConfig = _getDefaultTabModifierSettings();
@@ -247,6 +260,15 @@ export const useRulesStore = defineStore('rules', {
 
 			await this.save();
 		},
+		async toggleRule(ruleId: string) {
+			const index = this.getRuleIndexById(ruleId);
+			const rule = this.rules[index];
+			const isEnabled = _isRuleEnabled(rule);
+
+			this.rules[index].is_enabled = !isEnabled;
+
+			await this.save();
+		},
 		async duplicateRule(ruleId: string): Promise<Rule> {
 			const index = this.getRuleIndexById(ruleId);