wip

Author: sebastienfontaine

src/Options.vue

@@ -2,8 +2,11 @@
 	<div class="flex h-screen w-screen overflow-hidden">
 		<div class="drawer lg:drawer-open overflow-hidden">
 			<input id="drawer-menu" class="drawer-toggle" type="checkbox" />
-			<div class="drawer-content flex flex-col items-center justify-center overflow-auto">
-				<div class="h-screen w-full">
+			<div class="drawer-content flex flex-col items-center justify-center overflow-auto relative">
+				<div class="absolute inset-0 opacity-10 pointer-events-none">
+					<div class="pattern-background"></div>
+				</div>
+				<div class="h-screen w-full relative z-10">
 					<div class="navbar bg-base-200">
 						<div class="navbar-start">
 							<label
@@ -97,45 +100,45 @@ const panes: Components = {
 const sectionItems = [
 	{
 		title: 'Rules',
-		icon: 'TabRulesIcon',
+		emoji: '📋',
 		component: 'TabRulesPane',
 	},
 	{
 		title: 'Groups',
-		icon: 'TabGroupsIcon',
+		emoji: '🗂️',
 		component: 'TabGroupsPane',
 	},
 	{
-		title: '🍯 Tab Hive',
-		icon: 'TabHiveIcon',
+		title: 'Tab Hive',
+		emoji: '🍯',
 		component: 'TabHivePane',
 	},
 	{
 		title: 'Settings',
-		icon: 'SettingsIcon',
+		emoji: '⚙️',
 		component: 'SettingsPane',
 	},
 	{
 		title: 'Help',
-		icon: 'HelpIcon',
+		emoji: '❓',
 		component: 'HelpPane',
 	},
 ] as MenuItem[];
 
 const resourceItems = [
 	{
 		title: 'Chrome Web Store',
-		icon: 'ChromeIcon',
+		emoji: '🌐',
 		link: 'https://chrome.google.com/webstore/detail/tab-modifier/hcbgadmbdkiilgpifjgcakjehmafcjai',
 	},
 	{
 		title: 'GitHub',
-		icon: 'GithubIcon',
+		emoji: '💻',
 		link: 'https://github.com/furybee/chrome-tab-modifier',
 	},
 	{
 		title: 'Donate',
-		icon: 'DonationIcon',
+		emoji: '💝',
 		component: 'DonationPane',
 	},
 ] as MenuItem[];
@@ -181,4 +184,11 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.pattern-background {
+	width: 100%;
+	height: 100%;
+	background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+	background-size: 32px 32px;
+}
+</style>

src/SidePanel.vue

@@ -1,7 +1,11 @@
 <template>
-	<div class="h-screen bg-base-100 flex flex-col">
+	<div class="h-screen bg-base-100 flex flex-col relative">
+		<div class="absolute inset-0 opacity-10 pointer-events-none">
+			<div class="pattern-background"></div>
+		</div>
+
 		<!-- Tabs -->
-		<div role="tablist" class="tabs tabs-bordered tabs-lg bg-base-200">
+		<div role="tablist" class="tabs tabs-bordered tabs-lg bg-base-200 relative z-10">
 			<a
 				role="tab"
 				class="tab text-sm"
@@ -20,7 +24,7 @@
 			</a>
 		</div>
 
-		<div class="flex-1 overflow-y-auto p-4">
+		<div class="flex-1 overflow-y-auto p-4 relative z-10">
 			<!-- Add Rule Tab -->
 			<div v-if="activeTab === 'add-rule'">
 				<RuleForm
@@ -137,4 +141,11 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.pattern-background {
+	width: 100%;
+	height: 100%;
+	background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+	background-size: 32px 32px;
+}
+</style>

src/common/storage.ts

@@ -13,6 +13,8 @@ export function _getDefaultTabModifierSettings(): TabModifierSettings {
 			theme: 'tabee',
 			lightweight_mode_enabled: false,
 			lightweight_mode_patterns: [],
+			lightweight_mode_apply_to_rules: true,
+			lightweight_mode_apply_to_tab_hive: true,
 			auto_close_enabled: false,
 			auto_close_timeout: 30, // 30 minutes par défaut
 		},

src/common/types.ts

@@ -2,7 +2,7 @@ import { DefineComponent } from 'vue';
 
 export type MenuItem = {
 	title: string;
-	icon: string;
+	emoji: string;
 	component?: string;
 	link?: string;
 };
@@ -56,6 +56,8 @@ export type Settings = {
 	theme: string;
 	lightweight_mode_enabled: boolean;
 	lightweight_mode_patterns: LightweightModePattern[];
+	lightweight_mode_apply_to_rules: boolean;
+	lightweight_mode_apply_to_tab_hive: boolean;
 	auto_close_enabled: boolean;
 	auto_close_timeout: number; // en minutes
 };

src/components/options/center/sections/HelpPane.vue

@@ -35,6 +35,18 @@
 			<div class="card-body">
 				<h2 class="card-title">⌨️ Keyboard Shortcuts</h2>
 
+				<h3 class="font-bold">Spot Search</h3>
+				<p>
+					Quickly search through your open tabs and bookmarks with a spotlight-style interface:
+				</p>
+				<ul class="list-disc ml-3">
+					<li><strong>Windows/Linux:</strong> <kbd class="kbd kbd-sm">Alt</kbd> + <kbd class="kbd kbd-sm">Shift</kbd> + <kbd class="kbd kbd-sm">E</kbd></li>
+					<li><strong>Mac:</strong> <kbd class="kbd kbd-sm">⌘ Command</kbd> + <kbd class="kbd kbd-sm">Shift</kbd> + <kbd class="kbd kbd-sm">E</kbd></li>
+				</ul>
+				<p class="mt-2">
+					Type to filter tabs by title, URL, or tab group. Use arrow keys to navigate and press Enter to switch to a tab or open a bookmark.
+				</p>
+
 				<h3 class="font-bold">Merge All Windows</h3>
 				<p>
 					Quickly merge all browser windows into the currently focused window using the keyboard

src/components/options/center/sections/SettingsPane.vue

@@ -31,15 +31,12 @@
 
 		<div class="card bg-base-200 mt-4">
 			<div class="card-body">
-				<h2 class="card-title">Performance</h2>
+				<h2 class="card-title">Performance & Tab Management</h2>
 
 				<div class="grid grid-cols-6">
 					<div class="col-span-5">
 						<h3 class="font-bold">Lightweight Mode</h3>
-						<p>
-							Reduce memory usage by disabling Tabee on specific domains or URLs. This is useful for
-							sites where you don't need tab modifications.
-						</p>
+						<p>Reduce memory usage by disabling Tabee on specific domains or URLs.</p>
 					</div>
 					<div class="col-span-1 flex justify-end">
 						<input
@@ -51,6 +48,25 @@
 				</div>
 
 				<div v-if="lightweightModeEnabled" class="mt-4">
+					<div class="grid grid-cols-2 gap-4 mb-4">
+						<label class="label cursor-pointer justify-start gap-2">
+							<input
+								v-model="lightweightModeApplyToRules"
+								type="checkbox"
+								class="checkbox checkbox-xs checkbox-primary"
+							/>
+							<span class="label-text text-xs">Apply to Rules</span>
+						</label>
+						<label class="label cursor-pointer justify-start gap-2">
+							<input
+								v-model="lightweightModeApplyToTabHive"
+								type="checkbox"
+								class="checkbox checkbox-xs checkbox-primary"
+							/>
+							<span class="label-text text-xs">Apply to Tab Hive</span>
+						</label>
+					</div>
+
 					<div class="mb-4">
 						<button class="btn btn-xs btn-outline btn-primary" @click="showAddPatternModal">
 							Add Pattern
@@ -153,19 +169,15 @@
 						</div>
 					</div>
 				</dialog>
-			</div>
-		</div>
 
-		<div class="card bg-base-200 mt-4">
-			<div class="card-body">
-				<h2 class="card-title">🍯 Tab Hive</h2>
+				<div class="divider my-6"></div>
 
 				<div class="grid grid-cols-6">
 					<div class="col-span-5">
-						<h3 class="font-bold">Auto-Close Inactive Tabs</h3>
+						<h3 class="font-bold">🍯 Tab Hive: Auto-Close Inactive Tabs</h3>
 						<p>
 							Automatically close tabs that have been inactive for a specified duration. Closed tabs
-							will be saved in the side panel for easy restoration.
+							will be saved in Tab Hive for easy restoration.
 						</p>
 					</div>
 					<div class="col-span-1 flex justify-end">
@@ -308,6 +320,12 @@ const lightweightModeEnabled = ref(rulesStore.settings.lightweight_mode_enabled
 const lightweightModePatterns = ref<LightweightModePattern[]>(
 	rulesStore.settings.lightweight_mode_patterns ?? []
 );
+const lightweightModeApplyToRules = ref(
+	rulesStore.settings.lightweight_mode_apply_to_rules ?? true
+);
+const lightweightModeApplyToTabHive = ref(
+	rulesStore.settings.lightweight_mode_apply_to_tab_hive ?? true
+);
 const addPatternModal = ref<HTMLDialogElement | null>(null);
 const newPattern = ref({
 	type: 'domain' as 'domain' | 'regex',
@@ -334,6 +352,16 @@ watch(lightweightModeEnabled, async (enabled) => {
 	});
 });
 
+watch(lightweightModeApplyToRules, async (enabled) => {
+	rulesStore.settings.lightweight_mode_apply_to_rules = enabled;
+	await rulesStore.save();
+});
+
+watch(lightweightModeApplyToTabHive, async (enabled) => {
+	rulesStore.settings.lightweight_mode_apply_to_tab_hive = enabled;
+	await rulesStore.save();
+});
+
 watch(autoCloseEnabled, async (enabled) => {
 	rulesStore.settings.auto_close_enabled = enabled;
 	await rulesStore.save();

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

@@ -1,8 +1,5 @@
 <template>
 	<div class="hero min-h-screen bg-base-200 relative overflow-hidden">
-		<div class="absolute inset-0 opacity-10">
-			<div class="pattern-background"></div>
-		</div>
 		<div class="hero-content text-center relative z-10">
 			<div class="max-w-lg">
 				<h1 class="text-5xl font-bold">Hello there</h1>
@@ -254,11 +251,4 @@ const rulesTips = [
 ];
 </script>
 
-<style scoped>
-.pattern-background {
-	width: 100%;
-	height: 100%;
-	background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
-	background-size: 32px 32px;
-}
-</style>
+<style scoped></style>

src/components/options/left/Menu.vue

@@ -7,7 +7,7 @@
 				}"
 				@click.prevent="onMenuClicked(menuItem)"
 			>
-				<component :is="icons[menuItem.icon]" class="menuItem-icon" />
+				<span class="text-xl">{{ menuItem.emoji }}</span>
 				{{ menuItem.title }}
 				<template v-if="menuItem.link">
 					<ExternalIcon class="!w-3 !h-3" />
@@ -18,29 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-import { Components, MenuItem } from '../../../common/types.ts';
-import TabRulesIcon from '../../icons/TabRulesIcon.vue';
-import TabGroupsIcon from '../../icons/TabGroupsIcon.vue';
-import TabHiveIcon from '../../icons/TabHiveIcon.vue';
-import SettingsIcon from '../../icons/SettingsIcon.vue';
-import HelpIcon from '../../icons/HelpIcon.vue';
-import GithubIcon from '../../icons/GithubIcon.vue';
-import DonationIcon from '../../icons/DonationIcon.vue';
-import ChromeIcon from '../../icons/ChromeIcon.vue';
+import { MenuItem } from '../../../common/types.ts';
 import ExternalIcon from '../../icons/ExternalIcon.vue';
 import { useMenuStore } from '../../../stores/menu.store.ts';
 
-const icons: Components = {
-	TabRulesIcon,
-	TabGroupsIcon,
-	TabHiveIcon,
-	SettingsIcon,
-	HelpIcon,
-	GithubIcon,
-	DonationIcon,
-	ChromeIcon,
-};
-
 const props = defineProps<{
 	title: string;
 	menuItems: MenuItem[];

src/stores/rules.store.ts

@@ -109,6 +109,12 @@ export const useRulesStore = defineStore('rules', {
 			if (settings.lightweight_mode_patterns === undefined) {
 				settings.lightweight_mode_patterns = [];
 			}
+			if (settings.lightweight_mode_apply_to_rules === undefined) {
+				settings.lightweight_mode_apply_to_rules = true;
+			}
+			if (settings.lightweight_mode_apply_to_tab_hive === undefined) {
+				settings.lightweight_mode_apply_to_tab_hive = true;
+			}
 			// Add default values for auto-close if they don't exist
 			if (settings.auto_close_enabled === undefined) {
 				settings.auto_close_enabled = false;