Add search to the playlist discovery

src/app.css

@@ -58,3 +58,56 @@ p a:hover {
 @utility neon-text {
   @apply text-transparent bg-clip-text bg-gradient-to-r from-neon via-accent to-neon-fuchsia;
 }
+
+input[type='checkbox'] {
+  appearance: none;
+  width: 1.05rem;
+  height: 1.05rem;
+  border-radius: 0.35rem;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background-color: rgba(15, 23, 42, 0.85);
+  display: grid;
+  place-content: center;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+
+input[type='checkbox']::after {
+  content: '';
+  width: 0.55rem;
+  height: 0.55rem;
+  clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 86% 0, 40% 64%);
+  background-color: transparent;
+  transform: scale(0.4) rotate(6deg);
+  opacity: 0;
+  transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
+}
+
+input[type='checkbox']:hover {
+  border-color: rgba(94, 234, 212, 0.4);
+}
+
+input[type='checkbox']:focus-visible {
+  outline: none;
+  border-color: rgba(94, 234, 212, 0.6);
+  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25);
+}
+
+input[type='checkbox']:checked {
+  border-color: rgba(34, 211, 238, 0.8);
+  background-color: rgba(34, 211, 238, 0.18);
+  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
+}
+
+input[type='checkbox']:checked::after {
+  background-color: var(--color-neon);
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+}
+
+input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  box-shadow: none;
+  border-color: rgba(148, 163, 184, 0.2);
+}