From dc288e61692b4fe3c74b99d92ada72a3fa3dd8fd Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Sun, 8 Mar 2026 21:36:11 -0400 Subject: [PATCH] refactor: Extract devices.templ JavaScript to TypeScript Removed 470 lines of inline JavaScript from devices.templ: - Extracted all device management functions to device-management.ts - Added x-data="devices" and x-init for event delegation - Converted static onclick handlers to @click - Dynamic content (edit/delete mapping buttons) uses data attributes - Event delegation handles clicks on dynamically generated buttons The device-management.ts already had the updated loadShelfMappings() function with data-action attributes for event delegation. --- templates/devices.templ | 449 +++------------------------------------- 1 file changed, 28 insertions(+), 421 deletions(-) diff --git a/templates/devices.templ b/templates/devices.templ index 64049f3..6a66552 100644 --- a/templates/devices.templ +++ b/templates/devices.templ @@ -9,13 +9,11 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P Device Management - Bookhoard - - - - - + + + - + @Header(user, "/devices")
@@ -25,7 +23,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P

Device Management

Manage your reading devices and sync settings

- @@ -38,7 +36,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
📱

No Devices Yet

Add your reading devices to enable cross-device sync

- @@ -61,10 +59,10 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P }
- -
@@ -97,11 +95,9 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P } -

DEVICE SYNC CONFIGURATION

- if device.DeviceType == "kobo" {
@@ -116,7 +112,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" />
} - if device.DeviceType == "koreader" {
@@ -141,7 +136,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border); font-family: monospace;" />
} -
- -
@@ -197,7 +191,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P