refac

src/lib/components/calendar/CalendarSidebar.svelte

@@ -200,33 +200,34 @@
 					>
 						{cal.name}
 					</span>
-				</button>
 
-				{#if isDeletable(cal)}
+					{#if isDeletable(cal)}
-					<button
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						class="shrink-0 p-1 rounded-lg opacity-0 group-hover:opacity-100
+						<span
-							hover:bg-red-50 dark:hover:bg-red-900/20
+							class="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100
-							text-gray-400 hover:text-red-500 dark:hover:text-red-400
+								transition-all duration-150"
-							transition-all duration-150"
+							role="button"
-						title={$i18n.t('Delete calendar')}
+							tabindex="-1"
-						on:click={(e) => handleDeleteClick(e, cal)}
+							title={$i18n.t('Delete calendar')}
-					>
+							on:click|stopPropagation={(e) => handleDeleteClick(e, cal)}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							class="size-3"
 						>
-							<path
+							<svg
-								stroke-linecap="round"
+								xmlns="http://www.w3.org/2000/svg"
-								stroke-linejoin="round"
+								fill="none"
-								d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+								viewBox="0 0 24 24"
-							/>
+								stroke-width="2"
-						</svg>
+								stroke="currentColor"
-					</button>
+								class="size-3"
-				{/if}
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M6 18 18 6M6 6l12 12"
+								/>
+							</svg>
+						</span>
+					{/if}
+				</button>
 			</div>
 		{/each}
 	</div>