diff --git a/templates/admin_library_templ.go b/templates/admin_library_templ.go
index 903e2b2..8607508 100644
--- a/templates/admin_library_templ.go
+++ b/templates/admin_library_templ.go
@@ -36,7 +36,7 @@ func AdminLibrary(user User) templ.Component {
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 55, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_library.templ`, Line: 55, Col: 91}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/admin_profile_templ.go b/templates/admin_profile_templ.go
index 38e57eb..b669ab2 100644
--- a/templates/admin_profile_templ.go
+++ b/templates/admin_profile_templ.go
@@ -36,7 +36,7 @@ func AdminProfile(user User) templ.Component {
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 55, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_profile.templ`, Line: 55, Col: 91}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -49,7 +49,7 @@ func AdminProfile(user User) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 101, Col: 92}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_profile.templ`, Line: 101, Col: 92}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -62,7 +62,7 @@ func AdminProfile(user User) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(user.Email)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 110, Col: 87}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_profile.templ`, Line: 110, Col: 87}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/admin_templ.go b/templates/admin_templ.go
index 237d8ac..5cefb85 100644
--- a/templates/admin_templ.go
+++ b/templates/admin_templ.go
@@ -36,7 +36,7 @@ func Admin(user User) templ.Component {
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin.templ`, Line: 55, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin.templ`, Line: 55, Col: 91}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/collections_templ.go b/templates/collections_templ.go
index 65b167d..75802f9 100644
--- a/templates/collections_templ.go
+++ b/templates/collections_templ.go
@@ -55,7 +55,7 @@ func Collection(user User, collections []CollectionData) templ.Component {
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(col.Icon)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 46, Col: 60}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 46, Col: 60}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
@@ -68,7 +68,7 @@ func Collection(user User, collections []CollectionData) templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(col.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 58, Col: 109}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 58, Col: 109}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -81,7 +81,7 @@ func Collection(user User, collections []CollectionData) templ.Component {
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(col.Description)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 59, Col: 103}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 59, Col: 103}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -128,7 +128,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(collection.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 219, Col: 32}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 219, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -149,7 +149,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(collection.Icon)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 234, Col: 95}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 234, Col: 95}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -162,7 +162,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(collection.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 236, Col: 107}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 236, Col: 107}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -175,7 +175,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(collection.Description)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 237, Col: 88}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 237, Col: 88}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -199,7 +199,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(book.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 262, Col: 123}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 262, Col: 123}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -217,7 +217,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(book.Author)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 264, Col: 100}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `collections.templ`, Line: 264, Col: 100}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
diff --git a/templates/conflicts_templ.go b/templates/conflicts_templ.go
index eabf78a..7376a8e 100644
--- a/templates/conflicts_templ.go
+++ b/templates/conflicts_templ.go
@@ -46,7 +46,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(total)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 74, Col: 120}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 74, Col: 120}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -59,7 +59,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(unresolved)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 75, Col: 119}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 75, Col: 119}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -72,7 +72,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(total - unresolved)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 76, Col: 125}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 76, Col: 125}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -96,7 +96,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.MediaItemTitle)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 104, Col: 131}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 104, Col: 131}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -109,7 +109,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.ConflictType)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 105, Col: 122}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 105, Col: 122}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -122,7 +122,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.CreatedAt.Format("2006-01-02 15:04:05"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 112, Col: 97}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 112, Col: 97}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -140,7 +140,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.ResolvedBy)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 114, Col: 78}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `conflicts.templ`, Line: 114, Col: 78}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
diff --git a/templates/devices_templ.go b/templates/devices_templ.go
index 47ff9d3..7bb8e32 100644
--- a/templates/devices_templ.go
+++ b/templates/devices_templ.go
@@ -82,14 +82,14 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div><div class=\"flex space-x-2\"><button onclick=\"showDeviceSettings('{ device.ID }')\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-primary);\">⚙️</button></div></div><h3 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div><div class=\"flex space-x-2\"><button onclick=\"showShelfMappings('{ device.ID }')\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-primary);\">📚</button> <button onclick=\"showDeviceSettings('{ device.ID }')\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-primary);\">⚙️</button></div></div><h3 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary)\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var2 string
 				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(device.DeviceName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 69, Col: 125}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 69, Col: 102}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 				if templ_7745c5c3_Err != nil {
@@ -102,7 +102,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(device.DeviceType)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 70, Col: 112}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 70, Col: 89}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
@@ -135,7 +135,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 					var templ_7745c5c3_Var4 string
 					templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(device.LastSync)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 83, Col: 102}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 83, Col: 70}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 					if templ_7745c5c3_Err != nil {
@@ -163,7 +163,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 					var templ_7745c5c3_Var5 string
 					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(device.LastSeen)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 91, Col: 102}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 91, Col: 70}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 					if templ_7745c5c3_Err != nil {
@@ -206,7 +206,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(reg.DeviceName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 111, Col: 113}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 110, Col: 87}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 				if templ_7745c5c3_Err != nil {
@@ -219,7 +219,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(reg.DeviceType)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 113, Col: 56}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 112, Col: 27}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
@@ -232,7 +232,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(reg.ExpiresAt)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 113, Col: 87}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 112, Col: 58}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
@@ -248,7 +248,7 @@ func Devices(user User, devices []DeviceData, pendingRegistrations []PendingRegi
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<!-- Sync Queue Section --><div id=\"sync-queue-section\" class=\"mt-12 hidden\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Sync Queue</h2><button onclick=\"clearSyncQueue()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Clear Queue</button></div><div id=\"sync-queue\" class=\"space-y-3\"></div></div></div><!-- Add Device Modal --><div id=\"add-device-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add New Device</h2><button onclick=\"hideAddDeviceModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"add-device-form\" onsubmit=\"handleAddDevice(event)\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Name</label> <input type=\"text\" id=\"device-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"My Kindle Paperwhite\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Type</label> <select id=\"device-type\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select device type...</option> <option value=\"koreader\">KOReader (Kindle, Kobo, PocketBook)</option> <option value=\"kobo\">Kobo E-Reader</option> <option value=\"web\">Web Browser</option> <option value=\"mobile\">Mobile App</option></select></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Identifier</label> <input type=\"text\" id=\"device-identifier\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"Hardware ID or Serial Number\"><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">Enter your device's unique identifier</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddDeviceModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Register Device</button></div></form></div></div><!-- Device Settings Modal --><div id=\"device-settings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Device Settings</h2><button onclick=\"hideDeviceSettingsModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"device-settings-form\" onsubmit=\"handleSaveDeviceSettings(event)\"><input type=\"hidden\" id=\"settings-device-id\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Name</label> <input type=\"text\" id=\"settings-device-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-sync-enabled\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Enable Sync</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Allow this device to sync reading progress</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-auto-sync\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Auto Sync</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Automatically sync changes</p></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sync Frequency</label> <select id=\"settings-sync-frequency\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"1\">Every 1 minute</option> <option value=\"5\" selected>Every 5 minutes</option> <option value=\"15\">Every 15 minutes</option> <option value=\"30\">Every 30 minutes</option> <option value=\"60\">Every hour</option></select></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideDeviceSettingsModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"handleRevokeDevice()\" class=\"btn-danger px-4 py-2 rounded-lg\">Revoke Device</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Save Settings</button></div></form></div></div><script>\n            function getDeviceIcon(typeName) {\n                const deviceIcons = {\n                    'koreader': '📖',\n                    'kobo': '📚',\n                    'web': '🌐',\n                    'mobile': '📱'\n                };\n                return deviceIcons[typeName] || '📱';\n            }\n\n            function showAddDeviceModal() {\n                document.getElementById('add-device-modal').classList.remove('hidden');\n            }\n\n            function hideAddDeviceModal() {\n                document.getElementById('add-device-modal').classList.add('hidden');\n                document.getElementById('add-device-form').reset();\n            }\n\n            function handleAddDevice(event) {\n                event.preventDefault();\n\n                const data = {\n                    device_name: document.getElementById('device-name').value,\n                    device_type: document.getElementById('device-type').value,\n                    device_identifier: document.getElementById('device-identifier').value\n                };\n\n                fetch('/api/devices/register', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify(data)\n                })\n                .then(response => response.json())\n                .then(result => {\n                    showToast('Device registered! Check your device for sync instructions.', 'success');\n                    hideAddDeviceModal();\n                    loadDevices();\n                })\n                .catch(error => {\n                    showToast('Failed to register device', 'error');\n                });\n            }\n\n            function showDeviceSettings(deviceId) {\n                const device = devices.find(d => d.id === deviceId);\n                if (!device) return;\n\n                document.getElementById('settings-device-id').value = deviceId;\n                document.getElementById('settings-device-name').value = device.device_name;\n                document.getElementById('settings-sync-enabled').checked = device.sync_enabled;\n                document.getElementById('settings-auto-sync').checked = device.auto_sync;\n                document.getElementById('settings-sync-frequency').value = device.sync_frequency_minutes;\n\n                document.getElementById('device-settings-modal').classList.remove('hidden');\n            }\n\n            function hideDeviceSettingsModal() {\n                document.getElementById('device-settings-modal').classList.add('hidden');\n            }\n\n            function handleSaveDeviceSettings(event) {\n                event.preventDefault();\n\n                const deviceId = document.getElementById('settings-device-id').value;\n                const data = {\n                    device_name: document.getElementById('settings-device-name').value,\n                    sync_enabled: document.getElementById('settings-sync-enabled').checked,\n                    auto_sync: document.getElementById('settings-auto-sync').checked,\n                    sync_frequency_minutes: parseInt(document.getElementById('settings-sync-frequency').value)\n                };\n\n                fetch(`/api/devices/${deviceId}`, {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify(data)\n                })\n                .then(response => response.json())\n                 .then(result => {\n                     showToast('Device settings saved', 'success');\n                     hideDeviceSettingsModal();\n                     location.reload();\n                 })\n                .catch(error => {\n                    showToast('Failed to save settings', 'error');\n                });\n            }\n\n            function handleRevokeDevice() {\n                const deviceId = document.getElementById('settings-device-id').value;\n                if (!confirm('Are you sure you want to revoke this device? It will no longer be able to sync.')) return;\n\n                fetch(`/api/devices/${deviceId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                 .then(response => {\n                     if (response.ok) {\n                         showToast('Device revoked successfully', 'success');\n                         hideDeviceSettingsModal();\n                         location.reload();\n                     } else {\n                         showToast('Failed to revoke device', 'error');\n                     }\n                 })\n                .catch(error => {\n                    showToast('Failed to revoke device', 'error');\n                });\n            }\n\n            function approveDevice(registrationId) {\n                fetch(`/api/devices/approve/${registrationId}`, {\n                    method: 'GET',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                 .then(result => {\n                     showToast('Device approved successfully', 'success');\n                     location.reload();\n                 })\n                .catch(error => {\n                    showToast('Failed to approve device', 'error');\n                });\n            }\n\n            function rejectDevice(registrationId) {\n                fetch(`/api/devices/reject/${registrationId}`, {\n                    method: 'POST',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                 .then(result => {\n                     showToast('Device registration rejected', 'info');\n                     location.reload();\n                 })\n                .catch(error => {\n                    showToast('Failed to reject device', 'error');\n                });\n            }\n\n            function clearSyncQueue() {\n                if (!confirm('Are you sure you want to clear all sync queue items?')) return;\n\n                fetch('/api/queue/clear', {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Sync queue cleared', 'success');\n                    } else {\n                        showToast('Failed to clear queue', 'error');\n                    }\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n\n            // Load devices on page load\n            loadDevices();\n        </script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<!-- Sync Queue Section --><div id=\"sync-queue-section\" class=\"mt-12 hidden\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Sync Queue</h2><button onclick=\"clearSyncQueue()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Clear Queue</button></div><div id=\"sync-queue\" class=\"space-y-3\"></div></div></div><!-- Add Device Modal --><div id=\"add-device-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add New Device</h2><button onclick=\"hideAddDeviceModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"add-device-form\" onsubmit=\"handleAddDevice(event)\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Name</label> <input type=\"text\" id=\"device-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"My Kindle Paperwhite\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Type</label> <select id=\"device-type\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select device type...</option> <option value=\"koreader\">KOReader (Kindle, Kobo, PocketBook)</option> <option value=\"kobo\">Kobo E-Reader</option> <option value=\"web\">Web Browser</option> <option value=\"mobile\">Mobile App</option></select></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Identifier</label> <input type=\"text\" id=\"device-identifier\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"Hardware ID or Serial Number\"><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">Enter your device's unique identifier</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddDeviceModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Register Device</button></div></form></div></div><!-- Device Settings Modal --><div id=\"device-settings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Device Settings</h2><button onclick=\"hideDeviceSettingsModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"device-settings-form\" onsubmit=\"handleSaveDeviceSettings(event)\"><input type=\"hidden\" id=\"settings-device-id\"> <input type=\"hidden\" id=\"settings-device-type\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Name</label> <input type=\"text\" id=\"settings-device-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-sync-enabled\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Enable Sync</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Allow this device to sync reading progress</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-auto-sync\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Auto Sync</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Automatically sync changes</p></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sync Frequency</label> <select id=\"settings-sync-frequency\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"1\">Every 1 minute</option> <option value=\"5\" selected>Every 5 minutes</option> <option value=\"15\">Every 15 minutes</option> <option value=\"30\">Every 30 minutes</option> <option value=\"60\">Every hour</option></select></div><div class=\"border-t pt-6 mb-6\" style=\"border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary)\">Collection View Settings</h3><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary)\">Configure how collections are displayed on this device</p><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Default View Mode</label> <select id=\"settings-view-mode\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"grid\">Grid View</option> <option value=\"list\">List View</option> <option value=\"compact\">Compact View</option></select></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sort Collections By</label> <select id=\"settings-sort-order\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"name\">Collection Name</option> <option value=\"created\">Date Created</option> <option value=\"book_count\">Book Count</option> <option value=\"recent\">Recently Added</option></select></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Items Per Page</label> <select id=\"settings-items-per-page\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"12\">12 items</option> <option value=\"24\" selected>24 items</option> <option value=\"48\">48 items</option> <option value=\"96\">96 items</option></select></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-show-covers\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Show Cover Images</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Display book covers in collection views</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-show-progress\" class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Show Reading Progress</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Display progress indicators for books</p></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideDeviceSettingsModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"handleRevokeDevice()\" class=\"btn-danger px-4 py-2 rounded-lg\">Revoke Device</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Save Settings</button></div></form></div></div><!-- Device Shelf Mappings Modal --><div id=\"shelf-mappings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Collection to Shelf Mappings</h2><button onclick=\"hideShelfMappingsModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><input type=\"hidden\" id=\"mappings-device-id\"><div id=\"shelf-mappings-container\" class=\"space-y-4 mb-6\"><p style=\"color: var(--text-secondary)\">Loading mappings...</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideShelfMappingsModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Close</button> <button type=\"button\" onclick=\"showAddMappingModal()\" class=\"btn-primary px-4 py-2 rounded-lg\">➕ Add Mapping</button></div></div></div><!-- Add/Edit Shelf Mapping Modal --><div id=\"add-mapping-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Collection Mapping</h2><button onclick=\"hideAddMappingModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"mapping-form\" onsubmit=\"handleSaveMapping(event)\"><input type=\"hidden\" id=\"mapping-device-id\"> <input type=\"hidden\" id=\"mapping-id\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Collection</label> <select id=\"mapping-collection\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select collection...</option></select></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Shelf Name</label> <input type=\"text\" id=\"mapping-shelf-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"e.g., Sci-Fi\"><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">Name of the shelf on this device</p></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sync Direction</label> <select id=\"mapping-sync-direction\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"bidirectional\">Bidirectional (sync both ways)</option> <option value=\"book_to_device\">Bookmann → Device</option> <option value=\"device_to_book\">Device → Bookmann</option> <option value=\"none\">No sync</option></select></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddMappingModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Save Mapping</button></div></form></div></div><script>\n            function getDeviceIcon(typeName) {\n                const deviceIcons = {\n                    'koreader': '📖',\n                    'kobo': '📚',\n                    'web': '🌐',\n                    'mobile': '📱'\n                };\n                return deviceIcons[typeName] || '📱';\n            }\n\n            function showAddDeviceModal() {\n                document.getElementById('add-device-modal').classList.remove('hidden');\n            }\n\n            function hideAddDeviceModal() {\n                document.getElementById('add-device-modal').classList.add('hidden');\n                document.getElementById('add-device-form').reset();\n            }\n\n            function handleAddDevice(event) {\n                event.preventDefault();\n\n                const data = {\n                    device_name: document.getElementById('device-name').value,\n                    device_type: document.getElementById('device-type').value,\n                    device_identifier: document.getElementById('device-identifier').value\n                };\n\n                fetch('/api/devices/register', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify(data)\n                })\n                .then(response => response.json())\n                .then(result => {\n                    showToast('Device registered! Check your device for sync instructions.', 'success');\n                    hideAddDeviceModal();\n                    loadDevices();\n                })\n                .catch(error => {\n                    showToast('Failed to register device', 'error');\n                });\n            }\n\n            function showDeviceSettings(deviceId) {\n                const device = devices.find(d => d.id === deviceId);\n                if (!device) return;\n\n                document.getElementById('settings-device-id').value = deviceId;\n                document.getElementById('settings-device-type').value = device.device_type;\n                document.getElementById('settings-device-name').value = device.device_name;\n                document.getElementById('settings-sync-enabled').checked = device.sync_enabled;\n                document.getElementById('settings-auto-sync').checked = device.auto_sync;\n                document.getElementById('settings-sync-frequency').value = device.sync_frequency_minutes;\n\n                const deviceType = device.device_type;\n                \n                fetch('/api/collections', {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.collections && result.collections.length > 0) {\n                        const firstCollection = result.collections[0];\n                        const viewSettings = firstCollection.view_settings || {};\n                        const deviceSettings = viewSettings[deviceType] || {};\n                        \n                        document.getElementById('settings-view-mode').value = deviceSettings.view_mode || 'grid';\n                        document.getElementById('settings-sort-order').value = deviceSettings.sort_order || 'name';\n                        document.getElementById('settings-items-per-page').value = deviceSettings.items_per_page || 24;\n                        document.getElementById('settings-show-covers').checked = deviceSettings.show_covers !== false;\n                        document.getElementById('settings-show-progress').checked = deviceSettings.show_progress || false;\n                    }\n                })\n                .catch(error => {\n                    console.error('Failed to load view settings:', error);\n                });\n\n                document.getElementById('device-settings-modal').classList.remove('hidden');\n            }\n\n            function showShelfMappings(deviceId) {\n                document.getElementById('mappings-device-id').value = deviceId;\n                loadShelfMappings(deviceId);\n                document.getElementById('shelf-mappings-modal').classList.remove('hidden');\n            }\n\n            function hideShelfMappingsModal() {\n                document.getElementById('shelf-mappings-modal').classList.add('hidden');\n            }\n\n            function loadShelfMappings(deviceId) {\n                const container = document.getElementById('shelf-mappings-container');\n\n                fetch(`/api/devices/${deviceId}/collections`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.mappings && result.mappings.length > 0) {\n                        container.innerHTML = result.mappings.map(mapping => `\n                            <div class=\"card p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border);\">\n                                <div class=\"flex justify-between items-center\">\n                                    <div>\n                                        <h4 class=\"font-semibold\" style=\"color: var(--text-primary)\">${mapping.collection_name}</h4>\n                                        <p class=\"text-sm\" style=\"color: var(--text-secondary)\">\n                                            → Device Shelf: <strong>${mapping.device_shelf_name}</strong>\n                                        </p>\n                                        <p class=\"text-xs\" style=\"color: var(--text-secondary)\">\n                                            Sync: ${mapping.sync_direction}\n                                        </p>\n                                    </div>\n                                    <div class=\"flex space-x-2\">\n                                        <button onclick=\"editMapping('${mapping.id}', '${mapping.collection_id}', '${mapping.device_shelf_name}', '${mapping.sync_direction}')\"\n                                                class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-secondary);\">\n                                            ✏️\n                                        </button>\n                                        <button onclick=\"deleteMapping('${mapping.id}')\"\n                                                class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-secondary);\">\n                                            🗑️\n                                        </button>\n                                    </div>\n                                </div>\n                            </div>\n                        `).join('');\n                    } else {\n                        container.innerHTML = '<p style=\"color: var(--text-secondary)\">No shelf mappings configured. Click \"Add Mapping\" to create one.</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p style=\"color: var(--error)\">Failed to load mappings</p>';\n                });\n            }\n\n            function showAddMappingModal() {\n                const deviceId = document.getElementById('mappings-device-id').value;\n                document.getElementById('mapping-device-id').value = deviceId;\n                document.getElementById('mapping-id').value = '';\n                document.getElementById('mapping-collection').value = '';\n                document.getElementById('mapping-shelf-name').value = '';\n                document.getElementById('mapping-sync-direction').value = 'bidirectional';\n\n                loadCollections();\n                document.getElementById('add-mapping-modal').classList.remove('hidden');\n            }\n\n            function hideAddMappingModal() {\n                document.getElementById('add-mapping-modal').classList.add('hidden');\n                document.getElementById('mapping-form').reset();\n            }\n\n            function loadCollections() {\n                const select = document.getElementById('mapping-collection');\n\n                fetch('/api/collections', {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.collections) {\n                        select.innerHTML = '<option value=\"\">Select collection...</option>' +\n                            result.collections.map(col => `<option value=\"${col.id}\">${col.name}</option>`).join('');\n                    }\n                })\n                .catch(error => {\n                    console.error('Failed to load collections', error);\n                });\n            }\n\n            function editMapping(mappingId, collectionId, shelfName, syncDirection) {\n                document.getElementById('mapping-id').value = mappingId;\n                document.getElementById('mapping-collection').value = collectionId;\n                document.getElementById('mapping-shelf-name').value = shelfName;\n                document.getElementById('mapping-sync-direction').value = syncDirection;\n\n                document.getElementById('add-mapping-modal').classList.remove('hidden');\n            }\n\n            function handleSaveMapping(event) {\n                event.preventDefault();\n\n                const deviceId = document.getElementById('mapping-device-id').value;\n                const mappingId = document.getElementById('mapping-id').value;\n                const isUpdate = mappingId !== '';\n\n                const data = {\n                    collection_id: document.getElementById('mapping-collection').value,\n                    device_shelf_name: document.getElementById('mapping-shelf-name').value,\n                    sync_direction: document.getElementById('mapping-sync-direction').value\n                };\n\n                const url = isUpdate ? `/api/devices/${deviceId}/collections/${mappingId}` : `/api/devices/${deviceId}/collections`;\n                const method = isUpdate ? 'PUT' : 'POST';\n\n                fetch(url, {\n                    method: method,\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify(data)\n                })\n                .then(response => response.json())\n                .then(result => {\n                    showToast(isUpdate ? 'Mapping updated' : 'Mapping created', 'success');\n                    hideAddMappingModal();\n                    loadShelfMappings(deviceId);\n                })\n                .catch(error => {\n                    showToast('Failed to save mapping', 'error');\n                });\n            }\n\n            function deleteMapping(mappingId) {\n                if (!confirm('Are you sure you want to delete this mapping?')) return;\n\n                const deviceId = document.getElementById('mappings-device-id').value;\n\n                fetch(`/api/devices/${deviceId}/collections/${mappingId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Mapping deleted', 'success');\n                        loadShelfMappings(deviceId);\n                    } else {\n                        showToast('Failed to delete mapping', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to delete mapping', 'error');\n                });\n            }\n\n            function hideDeviceSettingsModal() {\n                document.getElementById('device-settings-modal').classList.add('hidden');\n            }\n\n            function handleSaveDeviceSettings(event) {\n                event.preventDefault();\n\n                const deviceId = document.getElementById('settings-device-id').value;\n                const deviceType = document.getElementById('settings-device-type')?.value || '';\n                \n                const deviceData = {\n                    device_name: document.getElementById('settings-device-name').value,\n                    sync_enabled: document.getElementById('settings-sync-enabled').checked,\n                    auto_sync: document.getElementById('settings-auto-sync').checked,\n                    sync_frequency_minutes: parseInt(document.getElementById('settings-sync-frequency').value)\n                };\n\n                const viewSettings = {\n                    view_mode: document.getElementById('settings-view-mode').value,\n                    sort_order: document.getElementById('settings-sort-order').value,\n                    items_per_page: parseInt(document.getElementById('settings-items-per-page').value),\n                    show_covers: document.getElementById('settings-show-covers').checked,\n                    show_progress: document.getElementById('settings-show-progress').checked\n                };\n\n                fetch(`/api/devices/${deviceId}`, {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify(deviceData)\n                })\n                .then(response => response.json())\n                .then(result => {\n                    return fetch('/api/collections', {\n                        method: 'GET',\n                        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                    });\n                })\n                .then(response => response.json())\n                .then(result => {\n                    const updatePromises = result.collections.map(collection => {\n                        const currentSettings = collection.view_settings || {};\n                        currentSettings[deviceType] = viewSettings;\n                        \n                        return fetch(`/api/collections/${collection.id}`, {\n                            method: 'PUT',\n                            headers: {\n                                'Content-Type': 'application/json',\n                                'Authorization': 'Bearer ' + localStorage.getItem('token')\n                            },\n                            body: JSON.stringify({\n                                ...collection,\n                                view_settings: currentSettings\n                            })\n                        });\n                    });\n                    \n                    return Promise.all(updatePromises);\n                })\n                .then(() => {\n                    showToast('Device settings saved', 'success');\n                    hideDeviceSettingsModal();\n                    location.reload();\n                })\n                .catch(error => {\n                    showToast('Failed to save settings', 'error');\n                });\n            }\n\n            function handleRevokeDevice() {\n                const deviceId = document.getElementById('settings-device-id').value;\n                if (!confirm('Are you sure you want to revoke this device? It will no longer be able to sync.')) return;\n\n                fetch(`/api/devices/${deviceId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                 .then(response => {\n                     if (response.ok) {\n                         showToast('Device revoked successfully', 'success');\n                         hideDeviceSettingsModal();\n                         location.reload();\n                     } else {\n                         showToast('Failed to revoke device', 'error');\n                     }\n                 })\n                .catch(error => {\n                    showToast('Failed to revoke device', 'error');\n                });\n            }\n\n            function approveDevice(registrationId) {\n                fetch(`/api/devices/approve/${registrationId}`, {\n                    method: 'GET',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                 .then(result => {\n                     showToast('Device approved successfully', 'success');\n                     location.reload();\n                 })\n                .catch(error => {\n                    showToast('Failed to approve device', 'error');\n                });\n            }\n\n            function rejectDevice(registrationId) {\n                fetch(`/api/devices/reject/${registrationId}`, {\n                    method: 'POST',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                 .then(result => {\n                     showToast('Device registration rejected', 'info');\n                     location.reload();\n                 })\n                .catch(error => {\n                    showToast('Failed to reject device', 'error');\n                });\n            }\n\n            function clearSyncQueue() {\n                if (!confirm('Are you sure you want to clear all sync queue items?')) return;\n\n                fetch('/api/queue/clear', {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Sync queue cleared', 'success');\n                    } else {\n                        showToast('Failed to clear queue', 'error');\n                    }\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n\n            // Load devices on page load\n            loadDevices();\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/header_templ.go b/templates/header_templ.go
index f3d2b96..0ef8f2a 100644
--- a/templates/header_templ.go
+++ b/templates/header_templ.go
@@ -36,7 +36,7 @@ func Header(user User, currentPath string) templ.Component {
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/header.templ`, Line: 97, Col: 116}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 97, Col: 116}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/queue_templ.go b/templates/queue_templ.go
index 895d84b..6f92337 100644
--- a/templates/queue_templ.go
+++ b/templates/queue_templ.go
@@ -46,7 +46,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(stats.PendingCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 70, Col: 100}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 70, Col: 100}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -59,7 +59,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(stats.ProcessingCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 74, Col: 103}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 74, Col: 103}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -72,7 +72,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(stats.CompletedCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 78, Col: 102}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 78, Col: 102}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -85,7 +85,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(stats.FailedCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 82, Col: 99}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 82, Col: 99}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -109,7 +109,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Status)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 153, Col: 95}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 153, Col: 95}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -122,7 +122,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.SyncType)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 154, Col: 106}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 154, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -135,7 +135,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Priority)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 156, Col: 100}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 156, Col: 100}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -148,7 +148,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.DeviceID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 159, Col: 54}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 159, Col: 54}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -166,7 +166,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(*item.MediaTitle)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 161, Col: 58}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 161, Col: 58}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -180,7 +180,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Attempts)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 165, Col: 59}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 165, Col: 59}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
@@ -193,7 +193,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.MaxAttempts)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 165, Col: 80}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 165, Col: 80}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
@@ -206,7 +206,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			var templ_7745c5c3_Var13 string
 			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.CreatedAt)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 166, Col: 50}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 166, Col: 50}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
@@ -224,7 +224,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(*item.ErrorMessage)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 170, Col: 59}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `queue.templ`, Line: 170, Col: 59}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {