fix name collisions and add better track/artist/album edit UX

2026-03-04 00:51:59 -08:00 · 2026-02-28 23:31:26 -08:00
parent 99185499b1
commit 19ab88268e
11 changed files with 973 additions and 109 deletions
--- a/static/style.css
+++ b/static/style.css
@@ -274,6 +274,14 @@
    font-size: 15px;
    margin: 0;
  }
+  h2 a {
+    color: #AFA;
+    text-decoration: none;
+  }
+  h2 a:hover {
+    color: #FFF;
+    text-decoration: underline;
+  }
  img {
    object-fit: cover;
    width: 250px;
@@ -551,3 +559,188 @@ a.button {
 a.button:hover {
  background: #1ed760;
 }
+
+.edit-toggle {
+  cursor: pointer;
+  font-size: 0.8em;
+  margin-left: 8px;
+  color: #888;
+  vertical-align: middle;
+}
+
+.edit-toggle:hover {
+  color: #AFA;
+}
+
+.inline-edit-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 8px;
+}
+
+.inline-edit-form input,
+.inline-edit-form textarea {
+  padding: 5px 10px;
+  border: 1px solid #444;
+  border-radius: 4px;
+  background: #333;
+  color: #AFA;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.inline-edit-form textarea {
+  min-width: 200px;
+  min-height: 60px;
+}
+
+.inline-edit-form button {
+  padding: 5px 10px;
+  background: #1DB954;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9em;
+}
+
+.inline-edit-form button:hover {
+  background: #1ed760;
+}
+
+.editable-image {
+  transition: opacity 0.2s;
+}
+
+.editable-image:hover {
+  opacity: 0.7;
+}
+
+.album-cover {
+  border-radius: 0 !important;
+}
+
+.edit-btn {
+  margin-left: 15px;
+  padding: 5px 15px;
+  background: #444;
+  color: #AFA;
+  border: 1px solid #AFA;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8em;
+}
+
+.edit-btn:hover {
+  background: #555;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+.modal-content {
+  background: #2a2a2a;
+  padding: 30px;
+  border-radius: 15px;
+  min-width: 400px;
+  max-width: 500px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.modal-content h2 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+.modal-content form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.modal-content label {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  gap: 5px;
+}
+
+.modal-content input,
+.modal-content textarea {
+  padding: 10px;
+  border: 1px solid #444;
+  border-radius: 5px;
+  background: #333;
+  color: #AFA;
+  font-size: 1em;
+  font-family: inherit;
+}
+
+.modal-content textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.modal-buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.modal-buttons button[type="submit"] {
+  background: #1DB954;
+  color: #fff;
+}
+
+.modal-buttons button[type="submit"]:hover {
+  background: #1ed760;
+}
+
+.modal-buttons .cancel-btn {
+  background: #444;
+  color: #AFA;
+}
+
+.modal-buttons .cancel-btn:hover {
+  background: #555;
+}
+
+.bio-box {
+  margin-top: 40px;
+  padding: 20px;
+  background: #2a2a2a;
+  border-radius: 10px;
+  width: 100%;
+  text-align: left;
+}
+
+.bio-box h3 {
+  margin-top: 0;
+  border-bottom: 1px solid #444;
+  padding-bottom: 10px;
+}
+
+.bio-box p {
+  margin: 0;
+  line-height: 1.6;
+}