From 2bd6efa503793df56785d33252ed444038ee6151 Mon Sep 17 00:00:00 2001
From: Markus Unterwaditzer <markus-tarpit+git@unterwaditzer.net>
Date: Sun, 25 Jan 2026 23:20:57 +0100
Subject: [PATCH] UI: Enforce snake case for functions

It's more common to write functions in camelCase in JS, so some people
started doing it, including me. But the majority of the codebase is
snake_case, so let's enforce that.
---
 daemon/web/eslint.config.js                          | 11 +++++++++++
 .../web/src/lib/components/ApiRequestButton.svelte   |  4 ++--
 daemon/web/src/lib/components/ConfigForm.svelte      | 12 ++++++------
 daemon/web/src/lib/components/DeleteButton.svelte    |  4 ++--
 daemon/web/src/lib/components/ReAnalyzeButton.svelte |  4 ++--
 daemon/web/src/lib/stores/breakpoint.ts              | 10 +++++-----
 6 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/daemon/web/eslint.config.js b/daemon/web/eslint.config.js
index 1ef0f52..b19dc75 100644
--- a/daemon/web/eslint.config.js
+++ b/daemon/web/eslint.config.js
@@ -37,6 +37,17 @@ export default ts.config(
                 { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
             ],
             '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/naming-convention': [
+                'error',
+                {
+                    selector: 'function',
+                    format: ['snake_case'],
+                },
+                {
+                    selector: 'method',
+                    format: ['snake_case'],
+                },
+            ],
         },
     }
 );
diff --git a/daemon/web/src/lib/components/ApiRequestButton.svelte b/daemon/web/src/lib/components/ApiRequestButton.svelte
index b43b60c..c7d683f 100644
--- a/daemon/web/src/lib/components/ApiRequestButton.svelte
+++ b/daemon/web/src/lib/components/ApiRequestButton.svelte
@@ -43,7 +43,7 @@
         },
     };
 
-    async function handleClick() {
+    async function handle_click() {
         if (is_disabled) return;
 
         is_requesting = true;
@@ -71,7 +71,7 @@
 
 <button
     class="text-white font-bold py-2 px-2 sm:px-4 rounded-md flex flex-row items-center gap-1 {buttonClasses}"
-    onclick={handleClick}
+    onclick={handle_click}
     disabled={is_disabled}
     aria-label={ariaLabel || label}
 >
diff --git a/daemon/web/src/lib/components/ConfigForm.svelte b/daemon/web/src/lib/components/ConfigForm.svelte
index f0b7a90..146a97c 100644
--- a/daemon/web/src/lib/components/ConfigForm.svelte
+++ b/daemon/web/src/lib/components/ConfigForm.svelte
@@ -12,7 +12,7 @@
     let testMessageType = $state<'success' | 'error' | null>(null);
     let showConfig = $state(false);
 
-    async function loadConfig() {
+    async function load_config() {
         try {
             loading = true;
             config = await get_config();
@@ -26,7 +26,7 @@
         }
     }
 
-    async function saveConfig() {
+    async function save_config() {
         if (!config) return;
 
         try {
@@ -43,7 +43,7 @@
         }
     }
 
-    async function sendTestNotification() {
+    async function send_test_notification() {
         try {
             testingNotification = true;
             testMessage = '';
@@ -61,7 +61,7 @@
 
     $effect(() => {
         if (showConfig && !config) {
-            loadConfig();
+            load_config();
         }
     });
 </script>
@@ -91,7 +91,7 @@
                 class="space-y-4"
                 onsubmit={(e) => {
                     e.preventDefault();
-                    saveConfig();
+                    save_config();
                 }}
             >
                 <div>
@@ -164,7 +164,7 @@
                     <div>
                         <button
                             type="button"
-                            onclick={sendTestNotification}
+                            onclick={send_test_notification}
                             disabled={testingNotification}
                             class="bg-rayhunter-blue hover:bg-rayhunter-dark-blue disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1 items-center"
                         >
diff --git a/daemon/web/src/lib/components/DeleteButton.svelte b/daemon/web/src/lib/components/DeleteButton.svelte
index db08845..8588e6b 100644
--- a/daemon/web/src/lib/components/DeleteButton.svelte
+++ b/daemon/web/src/lib/components/DeleteButton.svelte
@@ -12,7 +12,7 @@
         name: string;
     } = $props();
 
-    function confirmDelete() {
+    function confirm_delete() {
         if (window.confirm(prompt)) {
             user_action_req('POST', url, 'Unable to delete recording ' + name);
         }
@@ -21,7 +21,7 @@
 
 <button
     class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-2 sm:px-4 rounded-md flex flex-row"
-    onclick={confirmDelete}
+    onclick={confirm_delete}
     aria-label="delete"
 >
     <p>{text}</p>
diff --git a/daemon/web/src/lib/components/ReAnalyzeButton.svelte b/daemon/web/src/lib/components/ReAnalyzeButton.svelte
index eda7def..e94bbaa 100644
--- a/daemon/web/src/lib/components/ReAnalyzeButton.svelte
+++ b/daemon/web/src/lib/components/ReAnalyzeButton.svelte
@@ -19,7 +19,7 @@
         analysis_status === AnalysisStatus.Queued || analysis_status === AnalysisStatus.Running
     );
 
-    async function handleReAnalyze() {
+    async function handle_re_analyze() {
         // Update the entry directly for immediate UI feedback
         entry.analysis_status = AnalysisStatus.Queued;
         entry.analysis_report = undefined;
@@ -33,7 +33,7 @@
     loadingLabel="Analyzing..."
     disabled={is_processing}
     variant="blue"
-    onclick={handleReAnalyze}
+    onclick={handle_re_analyze}
     ariaLabel="re-analyze"
     errorMessage="Error re-analyzing recoding"
 >
diff --git a/daemon/web/src/lib/stores/breakpoint.ts b/daemon/web/src/lib/stores/breakpoint.ts
index 288f6b7..811e64d 100644
--- a/daemon/web/src/lib/stores/breakpoint.ts
+++ b/daemon/web/src/lib/stores/breakpoint.ts
@@ -5,7 +5,7 @@ import { breakpoints } from '../../theme';
 type Breakpoint = keyof typeof breakpoints;
 
 // Store that tracks if a specific breakpoint matches
-export function createBreakpointStore(breakpoint: Breakpoint): Readable<boolean> {
+export function create_breakpoint_store(breakpoint: Breakpoint): Readable<boolean> {
     return readable<boolean>(false, (set) => {
         const width = breakpoints[breakpoint];
         const mediaQuery = window.matchMedia(`(min-width: ${width})`);
@@ -23,7 +23,7 @@ export function createBreakpointStore(breakpoint: Breakpoint): Readable<boolean>
 }
 
 // Create stores for each breakpoint
-export const screenIsSmUp: Readable<boolean> = createBreakpointStore('sm');
-export const screenIsMdUp: Readable<boolean> = createBreakpointStore('md');
-export const screenIsLgUp: Readable<boolean> = createBreakpointStore('lg');
-export const screenIsXlUp: Readable<boolean> = createBreakpointStore('xl');
+export const screenIsSmUp: Readable<boolean> = create_breakpoint_store('sm');
+export const screenIsMdUp: Readable<boolean> = create_breakpoint_store('md');
+export const screenIsLgUp: Readable<boolean> = create_breakpoint_store('lg');
+export const screenIsXlUp: Readable<boolean> = create_breakpoint_store('xl');