commit 88dfee764fbfd1ef686109764ec5361c2bbad406 · dunkirk.sh/unduckified

+266 -197
src/main.ts
···

       1
       1
        
       import { bangs } from "./bang";

     

       2
       2
        
       import "./global.css";

     

       3
       3
        
       

     

       4
       4
       +
       const CONSTANTS = {

     

       5
       5
       +
       	MAX_HISTORY: 500,

     

       6
       6
       +
       	ANIMATION_DURATION: 375,

     

       7
       7
       +
       	LOCAL_STORAGE_KEYS: {

     

       8
       8
       +
       		SEARCH_HISTORY: "search-history",

     

       9
       9
       +
       		SEARCH_COUNT: "search-count",

     

       10
       10
       +
       		HISTORY_ENABLED: "history-enabled",

     

       11
       11
       +
       		DEFAULT_BANG: "default-bang",

     

       12
       12
       +
       	},

     

       13
       13
       +
       };

     

       14
       14
       +
       

     

       15
       15
       +
       const storage = {

     

       16
       16
       +
       	get: (key: string) => localStorage.getItem(key),

     

       17
       17
       +
       	set: (key: string, value: string) => localStorage.setItem(key, value),

     

       18
       18
       +
       	remove: (key: string) => localStorage.removeItem(key),

     

       19
       19
       +
       };

     

       20
       20
       +
       

     

       21
       21
       +
       const memoizedGetSearchHistory = (() => {

     

       22
       22
       +
       	let cache: Array<{

     

       23
       23
       +
       		query: string;

     

       24
       24
       +
       		bang: string;

     

       25
       25
       +
       		name: string;

     

       26
       26
       +
       		timestamp: number;

     

       27
       27
       +
       	}> | null = null;

     

       28
       28
       +
       	return () => {

     

       29
       29
       +
       		if (!cache) {

     

       30
       30
       +
       			cache = JSON.parse(

     

       31
       31
       +
       				storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_HISTORY) || "[]",

     

       32
       32
       +
       			);

     

       33
       33
       +
       		}

     

       34
       34
       +
       		return cache;

     

       35
       35
       +
       	};

     

       36
       36
       +
       })();

     

       37
       37
       +
       

     

       4
       38
        
       function addToSearchHistory(

     

       5
       39
        
       	query: string,

     

       6
       40
        
       	bang: { bang: string; name: string; url: string },

     

       7
       41
        
       ) {

     

       8
       8
       -
       	const history = getSearchHistory();

     

       42
       42
       +
       	const history = memoizedGetSearchHistory();

     

       43
       43
       +
       	if (!history) return;

     

       44
       44
       +
       

     

       9
       45
        
       	history.unshift({

     

       10
       46
        
       		query,

     

       11
       47
        
       		bang: bang.bang,

     

       12
       48
        
       		name: bang.name,

     

       13
       49
        
       		timestamp: Date.now(),

     

       14
       50
        
       	});

     

       15
       15
       -
       	// Keep only last 500 searches

     

       16
       16
       -
       	history.splice(500);

     

       17
       17
       -
       	localStorage.setItem("search-history", JSON.stringify(history));

     

       51
       51
       +
       	history.splice(CONSTANTS.MAX_HISTORY);

     

       52
       52
       +
       	storage.set(

     

       53
       53
       +
       		CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_HISTORY,

     

       54
       54
       +
       		JSON.stringify(history),

     

       55
       55
       +
       	);

     

       18
       56
        
       }

     

       19
       57
        
       

     

       20
       58
        
       function getSearchHistory(): Array<{

     
···

       24
       62
        
       	timestamp: number;

     

       25
       63
        
       }> {

     

       26
       64
        
       	try {

     

       27
       27
       -
       		return JSON.parse(localStorage.getItem("search-history") || "[]");

     

       65
       65
       +
       		return JSON.parse(

     

       66
       66
       +
       			storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_HISTORY) || "[]",

     

       67
       67
       +
       		);

     

       28
       68
        
       	} catch {

     

       29
       69
        
       		return [];

     

       30
       70
        
       	}

     

       31
       71
        
       }

     

       32
       72
        
       

     

       33
       73
        
       function clearSearchHistory() {

     

       34
       34
       -
       	localStorage.setItem("search-history", "[]");

     

       74
       74
       +
       	storage.set(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_HISTORY, "[]");

     

       35
       75
        
       }

     

       36
       76
        
       

     

       37
       77
        
       function getFocusableElements(

     
···

       55
       95
        
       	}

     

       56
       96
        
       }

     

       57
       97
        
       

     

       98
       98
       +
       const createTemplate = (data: {

     

       99
       99
       +
       	searchCount: string;

     

       100
       100
       +
       	historyEnabled: boolean;

     

       101
       101
       +
       	searchHistory: Array<{

     

       102
       102
       +
       		bang: string;

     

       103
       103
       +
       		query: string;

     

       104
       104
       +
       		name: string;

     

       105
       105
       +
       		timestamp: number;

     

       106
       106
       +
       	}>;

     

       107
       107
       +
       	LS_DEFAULT_BANG: string;

     

       108
       108
       +
       }) => `

     

       109
       109
       +
       	<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">

     

       110
       110
       +
       		<header style="position: absolute; top: 1rem; width: 100%;">

     

       111
       111
       +
       			<div style="display: flex; justify-content: space-between; padding: 0 1rem;">

     

       112
       112
       +
       				<span>${data.searchCount} ${data.searchCount === "1" ? "search" : "searches"}</span>

     

       113
       113
       +
       				<button class="settings-button">

     

       114
       114
       +
       					<img src="/gear.svg" alt="Settings" class="settings" />

     

       115
       115
       +
       				</button>

     

       116
       116
       +
       			</div>

     

       117
       117
       +
       		</header>

     

       118
       118
       +
       		<div class="content-container">

     

       119
       119
       +
       			<h1>┐( ˘_˘ )┌</h1>

     

       120
       120
       +
       			<p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>

     

       121
       121
       +
       			<div class="url-container">

     

       122
       122
       +
       				<input

     

       123
       123
       +
       					type="text"

     

       124
       124
       +
       					class="url-input"

     

       125
       125
       +
       					value="https://unduck.link?q=%s"

     

       126
       126
       +
       					readonly

     

       127
       127
       +
       				/>

     

       128
       128
       +
       				<button class="copy-button">

     

       129
       129
       +
       					<img src="/clipboard.svg" alt="Copy" />

     

       130
       130
       +
       				</button>

     

       131
       131
       +
       			</div>

     

       132
       132
       +
       				${

     

       133
       133
       +
       					data.historyEnabled

     

       134
       134
       +
       						? `

     

       135
       135
       +
       							<h2 style="margin-top: 24px;">Recent Searches</h2>

     

       136
       136
       +
       							<div style="max-height: 200px; overflow-y: auto; text-align: left;">

     

       137
       137
       +
       							${

     

       138
       138
       +
       								data.searchHistory.length === 0

     

       139
       139
       +
       									? `<div style="padding: 8px; text-align: center;">No search history</div>`

     

       140
       140
       +
       									: data.searchHistory

     

       141
       141
       +
       											.map(

     

       142
       142
       +
       												(search) => `

     

       143
       143
       +
       													<div style="padding: 8px; border-bottom: 1px solid var(--border-color);">

     

       144
       144
       +
       														<a href="?q=!${search.bang} ${search.query}">${search.name}: ${search.query}</a>

     

       145
       145
       +
       														<span style="float: right; color: var(--text-color-secondary);">

     

       146
       146
       +
       															${new Date(search.timestamp).toLocaleString()}

     

       147
       147
       +
       														</span>

     

       148
       148
       +
       													</div>

     

       149
       149
       +
       											`,

     

       150
       150
       +
       											)

     

       151
       151
       +
       											.join("")

     

       152
       152
       +
       							}

     

       153
       153
       +
       							</div>

     

       154
       154
       +
       						`

     

       155
       155
       +
       						: ""

     

       156
       156
       +
       				}

     

       157
       157
       +
       		</div>

     

       158
       158
       +
       		<footer class="footer">

     

       159
       159
       +
       			made with ♥ by <a href="https://github.com/taciturnaxolotl" target="_blank">Kieran Klukas</a> as <a href="https://github.com/taciturnaxolotl/unduck" target="_blank">open source</a> software

     

       160
       160
       +
       		</footer>

     

       161
       161
       +
       		<div class="modal" id="settings-modal">

     

       162
       162
       +
       			<div class="modal-content">

     

       163
       163
       +
       					<button class="close-modal">&times;</button>

     

       164
       164
       +
       					<h2>Settings</h2>

     

       165
       165
       +
       					<div class="settings-section">

     

       166
       166
       +
       							<label for="default-bang" id="bang-description">${bangs.find((b) => b.t === data.LS_DEFAULT_BANG)?.s || "Unknown bang"}</label>

     

       167
       167
       +
       							<div class="bang-select-container">

     

       168
       168
       +
       									<input type="text" id="default-bang" class="bang-select" value="${data.LS_DEFAULT_BANG}">

     

       169
       169
       +
       							</div>

     

       170
       170
       +
       					</div>

     

       171
       171
       +
       					<div class="settings-section">

     

       172
       172
       +
       							<h3>Search History (${data.searchHistory.length}/500)</h3>

     

       173
       173
       +
       							<div style="display: flex; justify-content: space-between; align-items: center;">

     

       174
       174
       +
       								<label class="switch">

     

       175
       175
       +
       										<label for="history-toggle">Enable Search History</label>

     

       176
       176
       +
       										<input type="checkbox" id="history-toggle" ${data.historyEnabled ? "checked" : ""}>

     

       177
       177
       +
       										<span class="slider round"></span>

     

       178
       178
       +
       									</label>

     

       179
       179
       +
       									<button class="clear-history">Clear History</button>

     

       180
       180
       +
       							</div>

     

       181
       181
       +
       					</div>

     

       182
       182
       +
       				</div>

     

       183
       183
       +
       			</div>

     

       184
       184
       +
       		</div>

     

       185
       185
       +
       	</div>

     

       186
       186
       +
       `;

     

       187
       187
       +
       

     

       188
       188
       +
       const createAudio = (src: string) => {

     

       189
       189
       +
       	const audio = new Audio();

     

       190
       190
       +
       	audio.src = src;

     

       191
       191
       +
       	return audio;

     

       192
       192
       +
       };

     

       193
       193
       +
       

     

       58
       194
        
       function noSearchDefaultPageRender() {

     

       59
       59
       -
       	const searchCount = localStorage.getItem("search-count") || "0";

     

       60
       60
       -
       	const historyEnabled = localStorage.getItem("history-enabled") === "true";

     

       195
       195
       +
       	const searchCount =

     

       196
       196
       +
       		storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_COUNT) || "0";

     

       197
       197
       +
       	const historyEnabled =

     

       198
       198
       +
       		storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.HISTORY_ENABLED) === "true";

     

       61
       199
        
       	const searchHistory = getSearchHistory();

     

       62
       200
        
       	const app = document.querySelector<HTMLDivElement>("#app");

     

       63
       201
        
       	if (!app) throw new Error("App element not found");

     

       64
       64
       -
       	app.innerHTML = `

     

       65
       65
       -
       		<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">

     

       66
       66
       -
           		<header style="position: absolute; top: 1rem; width: 100%;">

     

       67
       67
       -
          			<div style="display: flex; justify-content: space-between; padding: 0 1rem;">

     

       68
       68
       -
                   <span>${searchCount} ${searchCount === "1" ? "search" : "searches"}</span>

     

       69
       69
       -
           				<button class="settings-button">

     

       70
       70
       -
           						<img src="/gear.svg" alt="Settings" class="settings" />

     

       71
       71
       -
           				</button>

     

       72
       72
       -
          			</div>

     

       73
       73
       -
           		</header>

     

       74
       74
       -
       				<div class="content-container">

     

       75
       75
       -
       						<h1>┐( ˘_˘ )┌</h1>

     

       76
       76
       -
       						<p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>

     

       77
       77
       -
       						<div class="url-container">

     

       78
       78
       -
       								<input

     

       79
       79
       -
       										type="text"

     

       80
       80
       -
       										class="url-input"

     

       81
       81
       -
       										value="https://unduck.link?q=%s"

     

       82
       82
       -
       										readonly

     

       83
       83
       -
       								/>

     

       84
       84
       -
       								<button class="copy-button">

     

       85
       85
       -
       										<img src="/clipboard.svg" alt="Copy" />

     

       86
       86
       -
       								</button>

     

       87
       87
       -
       						</div>

     

       88
       88
       -
       						${

     

       89
       89
       -
       							historyEnabled

     

       90
       90
       -
       								? `

     

       91
       91
       -
       									<h2 style="margin-top: 24px;">Recent Searches</h2>

     

       92
       92
       -
       									<div style="max-height: 200px; overflow-y: auto; text-align: left;">

     

       93
       93
       -
       									${

     

       94
       94
       -
       										searchHistory.length === 0

     

       95
       95
       -
       											? `<div style="padding: 8px; text-align: center;">No search history</div>`

     

       96
       96
       -
       											: searchHistory

     

       97
       97
       -
       													.map(

     

       98
       98
       -
       														(search) => `

     

       99
       99
       -
       															<div style="padding: 8px; border-bottom: 1px solid var(--border-color);">

     

       100
       100
       -
       																	<a href="?q=!${search.bang} ${search.query}">${search.name}: ${search.query}</a>

     

       101
       101
       -
       																	<span style="float: right; color: var(--text-color-secondary);">

     

       102
       102
       -
       																			${new Date(search.timestamp).toLocaleString()}

     

       103
       103
       -
       																	</span>

     

       104
       104
       -
       															</div>

     

       105
       105
       -
       													`,

     

       106
       106
       -
       													)

     

       107
       107
       -
       													.join("")

     

       108
       108
       -
       									}

     

       109
       109
       -
       									</div>

     

       110
       110
       -
       								`

     

       111
       111
       -
       								: ""

     

       112
       112
       -
       						}

     

       113
       113
       -
       				</div>

     

       114
       114
       -
       				<footer class="footer">

     

       115
       115
       -
       						made with ♥ by <a href="https://github.com/taciturnaxolotl" target="_blank">Kieran Klukas</a> as <a href="https://github.com/taciturnaxolotl/unduck" target="_blank">open source</a> software

     

       116
       116
       -
       				</footer>

     

       117
       117
       -
       				<div class="modal" id="settings-modal">

     

       118
       118
       -
                 <div class="modal-content">

     

       119
       119
       -
                   <button class="close-modal">&times;</button>

     

       120
       120
       -
                   <h2>Settings</h2>

     

       121
       121
       -
                   <div class="settings-section">

     

       122
       122
       -
                     <label for="default-bang" id="bang-description">${bangs.find((b) => b.t === LS_DEFAULT_BANG)?.s || "Unknown bang"}</label>

     

       123
       123
       -
                     <div class="bang-select-container">

     

       124
       124
       -
                       <input type="text" id="default-bang" class="bang-select" value="${LS_DEFAULT_BANG}">

     

       125
       125
       -
                     </div>

     

       126
       126
       -
                   </div>

     

       127
       127
       -
                   <div class="settings-section">

     

       128
       128
       -
                     <h3>Search History (${searchHistory.length}/500)</h3>

     

       129
       129
       -
                     <div style="display: flex; justify-content: space-between; align-items: center;">

     

       130
       130
       -
                       <label class="switch">

     

       131
       131
       -
                         <label for="history-toggle">Enable Search History</label>

     

       132
       132
       -
                         <input type="checkbox" id="history-toggle" ${historyEnabled ? "checked" : ""}>

     

       133
       133
       -
                         <span class="slider round"></span>

     

       134
       134
       -
                       </label>

     

       135
       135
       -
                       <button class="clear-history">Clear History</button>

     

       136
       136
       -
                     </div>

     

       137
       137
       -
                   </div>

     

       138
       138
       -
                 </div>

     

       139
       139
       -
               </div>

     

       140
       140
       -
             </div>

     

       141
       141
       -
       		</div>

     

       142
       142
       -
       	`;

     

       202
       202
       +
       

     

       203
       203
       +
       	app.innerHTML = createTemplate({

     

       204
       204
       +
       		searchCount,

     

       205
       205
       +
       		historyEnabled,

     

       206
       206
       +
       		searchHistory,

     

       207
       207
       +
       		LS_DEFAULT_BANG,

     

       208
       208
       +
       	});

     

       209
       209
       +
       

     

       210
       210
       +
       	const elements = {

     

       211
       211
       +
       		app,

     

       212
       212
       +
       		copyInput: app.querySelector<HTMLInputElement>(".url-input"),

     

       213
       213
       +
       		copyButton: app.querySelector<HTMLButtonElement>(".copy-button"),

     

       214
       214
       +
       		copyIcon: app.querySelector<HTMLImageElement>(".copy-button img"),

     

       215
       215
       +
       		urlInput: app.querySelector<HTMLInputElement>(".url-input"),

     

       216
       216
       +
       		settingsButton: app.querySelector<HTMLButtonElement>(".settings-button"),

     

       217
       217
       +
       		modal: app.querySelector<HTMLDivElement>("#settings-modal"),

     

       218
       218
       +
       		closeModal: app.querySelector<HTMLSpanElement>(".close-modal"),

     

       219
       219
       +
       		defaultBangSelect: app.querySelector<HTMLSelectElement>("#default-bang"),

     

       220
       220
       +
       		description: app.querySelector<HTMLParagraphElement>("#bang-description"),

     

       221
       221
       +
       		historyToggle: app.querySelector<HTMLInputElement>("#history-toggle"),

     

       222
       222
       +
       		clearHistory: app.querySelector<HTMLButtonElement>(".clear-history"),

     

       223
       223
       +
       	} as const;

     

       224
       224
       +
       

     

       225
       225
       +
       	// Validate all elements exist

     

       226
       226
       +
       	for (const [key, element] of Object.entries(elements)) {

     

       227
       227
       +
       		if (!element) throw new Error(`${key} not found`);

     

       228
       228
       +
       	}

     

       143
       229
        
       

     

       144
       144
       -
       	const copyInput = app.querySelector<HTMLInputElement>(".url-input");

     

       145
       145
       -
       	if (!copyInput) throw new Error("Copy input not found");

     

       146
       146
       -
       	const copyButton = app.querySelector<HTMLButtonElement>(".copy-button");

     

       147
       147
       -
       	if (!copyButton) throw new Error("Copy button not found");

     

       148
       148
       -
       	const copyIcon = copyButton.querySelector("img");

     

       149
       149
       -
       	if (!copyIcon) throw new Error("Copy icon not found");

     

       150
       150
       -
       	const urlInput = app.querySelector<HTMLInputElement>(".url-input");

     

       151
       151
       -
       	if (!urlInput) throw new Error("URL input not found");

     

       152
       152
       -
       	const settingsButton =

     

       153
       153
       -
       		app.querySelector<HTMLButtonElement>(".settings-button");

     

       154
       154
       -
       	if (!settingsButton) throw new Error("Settings button not found");

     

       155
       155
       -
       	const modal = app.querySelector<HTMLDivElement>("#settings-modal");

     

       156
       156
       -
       	if (!modal) throw new Error("Modal not found");

     

       157
       157
       -
       	const closeModal = app.querySelector<HTMLSpanElement>(".close-modal");

     

       158
       158
       -
       	if (!closeModal) throw new Error("Close modal not found");

     

       159
       159
       -
       	const defaultBangSelect =

     

       160
       160
       -
       		app.querySelector<HTMLSelectElement>("#default-bang");

     

       161
       161
       -
       	if (!defaultBangSelect) throw new Error("Default bang select not found");

     

       162
       162
       -
       	const description =

     

       163
       163
       -
       		app.querySelector<HTMLParagraphElement>("#bang-description");

     

       164
       164
       -
       	if (!description) throw new Error("Bang description not found");

     

       165
       165
       -
       	const historyToggle = app.querySelector<HTMLInputElement>("#history-toggle");

     

       166
       166
       -
       	if (!historyToggle) throw new Error("History toggle not found");

     

       167
       167
       -
       	const clearHistory = app.querySelector<HTMLButtonElement>(".clear-history");

     

       168
       168
       -
       	if (!clearHistory) throw new Error("Clear history button not found");

     

       230
       230
       +
       	// After validation, we can assert elements are non-null

     

       231
       231
       +
       	const validatedElements = elements as {

     

       232
       232
       +
       		[K in keyof typeof elements]: NonNullable<(typeof elements)[K]>;

     

       233
       233
       +
       	};

     

       169
       234
        
       

     

       170
       170
       -
       	urlInput.value = `${window.location.protocol}//${window.location.host}?q=%s`;

     

       235
       235
       +
       	validatedElements.urlInput.value = `${window.location.protocol}//${window.location.host}?q=%s`;

     

       171
       236
        
       

     

       172
       237
        
       	const prefersReducedMotion = window.matchMedia(

     

       173
       238
        
       		"(prefers-reduced-motion: reduce)",

     

       174
       239
        
       	).matches;

     

       240
       240
       +
       

     

       175
       241
        
       	if (!prefersReducedMotion) {

     

       176
       176
       -
       		const spinAudio = new Audio("/heavier-tick-sprite.mp3");

     

       177
       177
       -
       		const toggleOffAudio = new Audio("/toggle-button-off.mp3");

     

       178
       178
       -
       		const toggleOnAudio = new Audio("/toggle-button-on.mp3");

     

       179
       179
       -
       		const clickAudio = new Audio("/click-button.mp3");

     

       180
       180
       -
       		const warningAudio = new Audio("/double-button.mp3");

     

       181
       181
       -
       		const copyAudio = new Audio("/foot-switch.mp3");

     

       242
       242
       +
       		const audio = {

     

       243
       243
       +
       			spin: createAudio("/heavier-tick-sprite.mp3"),

     

       244
       244
       +
       			toggleOff: createAudio("/toggle-button-off.mp3"),

     

       245
       245
       +
       			toggleOn: createAudio("/toggle-button-on.mp3"),

     

       246
       246
       +
       			click: createAudio("/click-button.mp3"),

     

       247
       247
       +
       			warning: createAudio("/double-button.mp3"),

     

       248
       248
       +
       			copy: createAudio("/foot-switch.mp3"),

     

       249
       249
       +
       		};

     

       182
       250
        
       

     

       183
       183
       -
       		copyButton.addEventListener("click", () => {

     

       184
       184
       -
       			copyAudio.currentTime = 0;

     

       185
       185
       -
       			copyAudio.play();

     

       251
       251
       +
       		validatedElements.copyButton.addEventListener("click", () => {

     

       252
       252
       +
       			audio.copy.currentTime = 0;

     

       253
       253
       +
       			audio.copy.play();

     

       186
       254
        
       		});

     

       187
       255
        
       

     

       188
       188
       -
       		settingsButton.addEventListener("mouseenter", () => {

     

       189
       189
       -
       			spinAudio.play();

     

       256
       256
       +
       		validatedElements.settingsButton.addEventListener("mouseenter", () => {

     

       257
       257
       +
       			audio.spin.play();

     

       190
       258
        
       		});

     

       191
       259
        
       

     

       192
       192
       -
       		settingsButton.addEventListener("mouseleave", () => {

     

       193
       193
       -
       			spinAudio.pause();

     

       194
       194
       -
       			spinAudio.currentTime = 0;

     

       260
       260
       +
       		validatedElements.settingsButton.addEventListener("mouseleave", () => {

     

       261
       261
       +
       			audio.spin.pause();

     

       262
       262
       +
       			audio.spin.currentTime = 0;

     

       195
       263
        
       		});

     

       196
       264
        
       

     

       197
       197
       -
       		historyToggle.addEventListener("change", () => {

     

       198
       198
       -
       			if (historyToggle.checked) {

     

       199
       199
       -
       				toggleOffAudio.pause();

     

       200
       200
       -
       				toggleOffAudio.currentTime = 0;

     

       201
       201
       -
       				toggleOnAudio.currentTime = 0;

     

       202
       202
       -
       				toggleOnAudio.play();

     

       265
       265
       +
       		validatedElements.historyToggle.addEventListener("change", () => {

     

       266
       266
       +
       			if (validatedElements.historyToggle.checked) {

     

       267
       267
       +
       				audio.toggleOff.pause();

     

       268
       268
       +
       				audio.toggleOff.currentTime = 0;

     

       269
       269
       +
       				audio.toggleOn.currentTime = 0;

     

       270
       270
       +
       				audio.toggleOn.play();

     

       203
       271
        
       			} else {

     

       204
       204
       -
       				toggleOnAudio.pause();

     

       205
       205
       -
       				toggleOnAudio.currentTime = 0;

     

       206
       206
       -
       				toggleOffAudio.currentTime = 0;

     

       207
       207
       -
       				toggleOffAudio.play();

     

       272
       272
       +
       				audio.toggleOn.pause();

     

       273
       273
       +
       				audio.toggleOn.currentTime = 0;

     

       274
       274
       +
       				audio.toggleOff.currentTime = 0;

     

       275
       275
       +
       				audio.toggleOff.play();

     

       208
       276
        
       			}

     

       209
       277
        
       		});

     

       210
       278
        
       

     

       211
       211
       -
       		clearHistory.addEventListener("click", () => {

     

       212
       212
       -
       			warningAudio.play();

     

       279
       279
       +
       		validatedElements.clearHistory.addEventListener("click", () => {

     

       280
       280
       +
       			audio.warning.play();

     

       213
       281
        
       		});

     

       214
       282
        
       

     

       215
       215
       -
       		defaultBangSelect.addEventListener("bangError", () => {

     

       216
       216
       -
       			warningAudio.currentTime = 0;

     

       217
       217
       -
       			warningAudio.play();

     

       283
       283
       +
       		validatedElements.defaultBangSelect.addEventListener("bangError", () => {

     

       284
       284
       +
       			audio.warning.currentTime = 0;

     

       285
       285
       +
       			audio.warning.play();

     

       218
       286
        
       		});

     

       219
       287
        
       

     

       220
       220
       -
       		defaultBangSelect.addEventListener("bangSuccess", () => {

     

       221
       221
       -
       			clickAudio.currentTime = 0;

     

       222
       222
       -
       			clickAudio.play();

     

       288
       288
       +
       		validatedElements.defaultBangSelect.addEventListener("bangSuccess", () => {

     

       289
       289
       +
       			audio.click.currentTime = 0;

     

       290
       290
       +
       			audio.click.play();

     

       223
       291
        
       		});

     

       224
       292
        
       

     

       225
       225
       -
       		closeModal.addEventListener("closed", () => {

     

       226
       226
       -
       			settingsButton.classList.remove("rotate");

     

       227
       227
       -
       			spinAudio.playbackRate = 0.7;

     

       228
       228
       -
       			spinAudio.currentTime = 0;

     

       229
       229
       -
       			spinAudio.play();

     

       230
       230
       -
       			spinAudio.onended = () => {

     

       231
       231
       -
       				spinAudio.playbackRate = 1;

     

       293
       293
       +
       		validatedElements.closeModal.addEventListener("closed", () => {

     

       294
       294
       +
       			validatedElements.settingsButton.classList.remove("rotate");

     

       295
       295
       +
       			audio.spin.playbackRate = 0.7;

     

       296
       296
       +
       			audio.spin.currentTime = 0;

     

       297
       297
       +
       			audio.spin.play();

     

       298
       298
       +
       			audio.spin.onended = () => {

     

       299
       299
       +
       				audio.spin.playbackRate = 1;

     

       232
       300
        
       			};

     

       233
       301
        
       		});

     

       234
       302
        
       	}

     

       235
       303
        
       

     

       236
       236
       -
       	copyButton.addEventListener("click", async () => {

     

       237
       237
       -
       		await navigator.clipboard.writeText(urlInput.value);

     

       238
       238
       -
       		copyIcon.src = "/clipboard-check.svg";

     

       304
       304
       +
       	validatedElements.copyButton.addEventListener("click", async () => {

     

       305
       305
       +
       		await navigator.clipboard.writeText(validatedElements.urlInput.value);

     

       306
       306
       +
       		validatedElements.copyIcon.src = "/clipboard-check.svg";

     

       239
       307
        
       

     

       240
       240
       -
       		if (!prefersReducedMotion) copyInput.classList.add("flash-white");

     

       308
       308
       +
       		if (!prefersReducedMotion)

     

       309
       309
       +
       			validatedElements.copyInput.classList.add("flash-white");

     

       241
       310
        
       

     

       242
       311
        
       		setTimeout(() => {

     

       243
       243
       -
       			copyInput.classList.remove("flash-white");

     

       244
       244
       -
       			copyIcon.src = "/clipboard.svg";

     

       312
       312
       +
       			validatedElements.copyInput.classList.remove("flash-white");

     

       313
       313
       +
       			validatedElements.copyIcon.src = "/clipboard.svg";

     

       245
       314
        
       		}, 375);

     

       246
       315
        
       	});

     

       247
       316
        
       

     

       248
       248
       -
       	settingsButton.addEventListener("click", () => {

     

       249
       249
       -
       		settingsButton.classList.add("rotate");

     

       250
       250
       -
       		modal.style.display = "block";

     

       251
       251
       -
       		setOutsideElementsTabindex(modal, -1);

     

       317
       317
       +
       	validatedElements.settingsButton.addEventListener("click", () => {

     

       318
       318
       +
       		validatedElements.settingsButton.classList.add("rotate");

     

       319
       319
       +
       		validatedElements.modal.style.display = "block";

     

       320
       320
       +
       		setOutsideElementsTabindex(validatedElements.modal, -1);

     

       252
       321
        
       	});

     

       253
       322
        
       

     

       254
       254
       -
       	closeModal.addEventListener("click", () => {

     

       255
       255
       -
       		closeModal.dispatchEvent(new Event("closed"));

     

       323
       323
       +
       	validatedElements.closeModal.addEventListener("click", () => {

     

       324
       324
       +
       		validatedElements.closeModal.dispatchEvent(new Event("closed"));

     

       256
       325
        
       	});

     

       257
       326
        
       

     

       258
       327
        
       	window.addEventListener("click", (event) => {

     

       259
       259
       -
       		if (event.target === modal) {

     

       260
       260
       -
       			closeModal.dispatchEvent(new Event("closed"));

     

       328
       328
       +
       		if (event.target === validatedElements.modal) {

     

       329
       329
       +
       			validatedElements.closeModal.dispatchEvent(new Event("closed"));

     

       261
       330
        
       		}

     

       262
       331
        
       	});

     

       263
       332
        
       

     

       264
       264
       -
       	closeModal.addEventListener("closed", () => {

     

       265
       265
       -
       		modal.style.display = "none";

     

       266
       266
       -
       		setOutsideElementsTabindex(modal, 0);

     

       333
       333
       +
       	validatedElements.closeModal.addEventListener("closed", () => {

     

       334
       334
       +
       		validatedElements.modal.style.display = "none";

     

       335
       335
       +
       		setOutsideElementsTabindex(validatedElements.modal, 0);

     

       267
       336
        
       

     

       268
       268
       -
       		if (historyToggle.checked !== historyEnabled)

     

       337
       337
       +
       		if (validatedElements.historyToggle.checked !== historyEnabled)

     

       269
       338
        
       			if (!prefersReducedMotion)

     

       270
       339
        
       				setTimeout(() => {

     

       271
       340
        
       					window.location.reload();

     
···

       273
       342
        
       			else window.location.reload();

     

       274
       343
        
       	});

     

       275
       344
        
       

     

       276
       276
       -
       	// Save default bang

     

       277
       277
       -
       	defaultBangSelect.addEventListener("change", (event) => {

     

       345
       345
       +
       	validatedElements.defaultBangSelect.addEventListener("change", (event) => {

     

       278
       346
        
       		const newDefaultBang = (event.target as HTMLSelectElement).value;

     

       279
       347
        
       		const bang = bangs.find((b) => b.t === newDefaultBang);

     

       280
       348
        
       

     

       281
       349
        
       		if (!bang) {

     

       282
       282
       -
       			// Invalid bang entered

     

       283
       283
       -
       			defaultBangSelect.value = LS_DEFAULT_BANG; // Reset to previous value

     

       284
       284
       -
       			defaultBangSelect.classList.add("shake", "flash-red");

     

       285
       285
       -
       

     

       286
       286
       -
       			// Dispatch error event

     

       287
       287
       -
       			defaultBangSelect.dispatchEvent(new CustomEvent("bangError"));

     

       288
       288
       -
       

     

       289
       289
       -
       			// Remove animation classes after animation completes

     

       350
       350
       +
       			validatedElements.defaultBangSelect.value = LS_DEFAULT_BANG;

     

       351
       351
       +
       			validatedElements.defaultBangSelect.classList.add("shake", "flash-red");

     

       352
       352
       +
       			validatedElements.defaultBangSelect.dispatchEvent(

     

       353
       353
       +
       				new CustomEvent("bangError"),

     

       354
       354
       +
       			);

     

       290
       355
        
       			setTimeout(() => {

     

       291
       291
       -
       				defaultBangSelect.classList.remove("shake", "flash-red");

     

       356
       356
       +
       				validatedElements.defaultBangSelect.classList.remove(

     

       357
       357
       +
       					"shake",

     

       358
       358
       +
       					"flash-red",

     

       359
       359
       +
       				);

     

       292
       360
        
       			}, 300);

     

       293
       293
       -
       

     

       294
       361
        
       			return;

     

       295
       362
        
       		}

     

       296
       363
        
       

     

       297
       297
       -
       		defaultBangSelect.dispatchEvent(new CustomEvent("bangSuccess"));

     

       298
       298
       -
       

     

       299
       299
       -
       		localStorage.setItem("default-bang", newDefaultBang);

     

       300
       300
       -
       		description.innerText = bang.s;

     

       364
       364
       +
       		validatedElements.defaultBangSelect.dispatchEvent(

     

       365
       365
       +
       			new CustomEvent("bangSuccess"),

     

       366
       366
       +
       		);

     

       367
       367
       +
       		storage.set(CONSTANTS.LOCAL_STORAGE_KEYS.DEFAULT_BANG, newDefaultBang);

     

       368
       368
       +
       		validatedElements.description.innerText = bang.s;

     

       301
       369
        
       	});

     

       302
       370
        
       

     

       303
       303
       -
       	// Enable/disable search history

     

       304
       304
       -
       	historyToggle.addEventListener("change", (event) => {

     

       305
       305
       -
       		localStorage.setItem(

     

       306
       306
       -
       			"history-enabled",

     

       371
       371
       +
       	validatedElements.historyToggle.addEventListener("change", (event) => {

     

       372
       372
       +
       		storage.set(

     

       373
       373
       +
       			CONSTANTS.LOCAL_STORAGE_KEYS.HISTORY_ENABLED,

     

       307
       374
        
       			(event.target as HTMLInputElement).checked.toString(),

     

       308
       375
        
       		);

     

       309
       376
        
       	});

     

       310
       310
       -
       	clearHistory.addEventListener("click", () => {

     

       377
       377
       +
       

     

       378
       378
       +
       	validatedElements.clearHistory.addEventListener("click", () => {

     

       311
       379
        
       		clearSearchHistory();

     

       312
       380
        
       		if (!prefersReducedMotion)

     

       313
       381
        
       			setTimeout(() => {

     
···

       317
       385
        
       	});

     

       318
       386
        
       }

     

       319
       387
        
       

     

       320
       320
       -
       const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "ddg";

     

       388
       388
       +
       const LS_DEFAULT_BANG =

     

       389
       389
       +
       	storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.DEFAULT_BANG) ?? "ddg";

     

       321
       390
        
       const defaultBang = bangs.find((b) => b.t === LS_DEFAULT_BANG);

     

       322
       391
        
       

     

       323
       392
        
       function getBangredirectUrl() {

     
···

       328
       397
        
       		return null;

     

       329
       398
        
       	}

     

       330
       399
        
       

     

       331
       331
       -
       	// increment search count

     

       332
       400
        
       	const count = (

     

       333
       333
       -
       		Number.parseInt(localStorage.getItem("search-count") || "0") + 1

     

       401
       401
       +
       		Number.parseInt(

     

       402
       402
       +
       			storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_COUNT) || "0",

     

       403
       403
       +
       		) + 1

     

       334
       404
        
       	).toString();

     

       335
       335
       -
       	localStorage.setItem("search-count", count);

     

       405
       405
       +
       	storage.set(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_COUNT, count);

     

       336
       406
        
       

     

       337
       407
        
       	const match = query.match(/!(\S+)/i);

     

       338
       408
        
       	const selectedBang = match

     
···

       340
       410
        
       		: defaultBang;

     

       341
       411
        
       	const cleanQuery = match ? query.replace(/!\S+\s*/i, "").trim() : query;

     

       342
       412
        
       

     

       343
       343
       -
       	// Add search to history

     

       344
       344
       -
       	if (localStorage.getItem("history-enabled") === "true") {

     

       413
       413
       +
       	if (storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.HISTORY_ENABLED) === "true") {

     

       345
       414
        
       		addToSearchHistory(cleanQuery, {

     

       346
       415
        
       			bang: selectedBang?.t || "",

     

       347
       416
        
       			name: selectedBang?.s || "",