feat: support specificFolders option

src/entries/popup/index.html

@@ -30,6 +30,10 @@
 				<ul id="associations-folder-names"></ul>
 			</div>
 		</section>
+		<section>
+			<label for="specificFolders">Specific folders</label>
+			<input id="specificFolders" type="checkbox" />
+		</section>
 	</body>
 	<script type="module" src="./main.ts"></script>
 </html>

src/entries/popup/main.ts

@@ -2,7 +2,7 @@ import './styles.css';
 
 import type { Associations, Flavor, IconName } from '@/lib/types';
 
-import { customAssociations, flavor } from '@/lib/storage';
+import { customAssociations, flavor, specificFolders } from '@/lib/storage';
 import { icons } from '@/lib/constants';
 
 async function init() {
@@ -11,12 +11,23 @@ async function init() {
 	flavorEl.value = await flavor.getValue();
 	document.documentElement.setAttribute('theme', flavorEl.value);
 
-	flavorEl.addEventListener('change', async ({ target }) => {
-		const value = (target as HTMLSelectElement).value as Flavor;
+	flavorEl.addEventListener('change', async () => {
+		const value = flavorEl.value as Flavor;
 		await flavor.setValue(value);
 		document.documentElement.setAttribute('theme', value);
 	});
 
+	const specificFoldersEl = document.querySelector(
+		'#specificFolders',
+	) as HTMLInputElement;
+	specificFoldersEl.checked = await specificFolders.getValue();
+
+	specificFoldersEl.addEventListener('change', async () => {
+		const value = specificFoldersEl.checked;
+		await specificFolders.setValue(value);
+		console.log('set value to', value);
+	});
+
 	const associations = await customAssociations.getValue();
 
 	for (const [key, el] of Object.entries({

src/entries/popup/styles.css

@@ -149,6 +149,33 @@ input::placeholder {
 	color: var(--ctp-subtext0);
 }
 
+input[type='checkbox'] {
+	appearance: none;
+	margin: 0;
+	font: inherit;
+	color: currentColor;
+	width: 1.15em;
+	height: 1.15em;
+	border-radius: 0.15em;
+	transform: translateY(-0.075em);
+	display: grid;
+	place-content: center;
+	font-size: 1rem;
+}
+input[type='checkbox']::before {
+	content: '';
+	width: 0.65em;
+	height: 0.65em;
+	transform: scale(0);
+	transition: 120ms transform ease-in-out;
+	box-shadow: inset 1em 1em var(--ctp-mauve);
+	transform-origin: bottom left;
+	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+input[type='checkbox']:checked::before {
+	transform: scale(1);
+}
+
 section {
 	padding: 1rem;
 	border-radius: 0.25rem;

src/lib/replace.ts

@@ -2,7 +2,7 @@ import type { PublicPath } from 'wxt/browser';
 import type { IconName } from '@/lib/types';
 
 import { selectors } from '@/lib/constants';
-import { flavor } from '@/lib/storage';
+import { flavor, specificFolders } from '@/lib/storage';
 import { getAssociations } from './associations';
 
 export async function replaceIconInRow(row: HTMLElement) {
@@ -128,10 +128,12 @@ async function findIconMatch(
 	const associations = await getAssociations();
 
 	if (isDir) {
-		if (fileName in associations.folderNames)
-			return associations.folderNames[fileName];
-		if (fileName.toLowerCase() in associations.folderNames)
-			return associations.folderNames[fileName.toLowerCase()];
+		if (await specificFolders.getValue()) {
+			if (fileName in associations.folderNames)
+				return associations.folderNames[fileName];
+			if (fileName.toLowerCase() in associations.folderNames)
+				return associations.folderNames[fileName.toLowerCase()];
+		}
 
 		return '_folder';
 	} else {

src/lib/storage.ts

@@ -15,3 +15,8 @@ export const customAssociations = storage.defineItem<Associations>(
 		},
 	},
 );
+
+export const specificFolders = storage.defineItem<boolean>(
+	'local:specificFolders',
+	{ defaultValue: true },
+);