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

2026-04-20 11:25:51 -07:00 · 2026-02-28 23:31:26 -08:00
parent 99185499b1
commit 19ab88268e
11 changed files with 973 additions and 109 deletions
--- a/templates/album.gohtml
+++ b/templates/album.gohtml
@@ -1,12 +1,17 @@
 {{define "album"}}
  <div class="profile-top">
    {{if .Album.CoverUrl}}
-    <img src="{{.Album.CoverUrl}}" alt="{{.Album.Title}}'s cover">
+    <img class="editable-image album-cover" data-entity="album" data-id="{{.Album.Id}}" data-field="cover_url" src="{{.Album.CoverUrl}}" alt="{{.Album.Title}}'s cover">
    {{else}}
-    <img src="/files/assets/pfps/default.png" alt="{{.Album.Title}}'s cover">
+    <img class="editable-image album-cover" data-entity="album" data-id="{{.Album.Id}}" data-field="cover_url" src="/files/assets/pfps/default_album.png" alt="{{.Album.Title}}'s cover">
    {{end}}
    <div class="username-bio">
-      <h1>{{.Album.Title}}</h1>
+      <h1>
+        {{.Album.Title}}
+        {{if eq .LoggedInUsername .Username}}
+        <button class="edit-btn" onclick="openEditModal()">Edit</button>
+        {{end}}
+      </h1>
      {{if .Artist.Name}}
      <h2><a href="/profile/{{.Username}}/artist/{{urlquery .Artist.Name}}">{{.Artist.Name}}</a></h2>
      {{end}}
@@ -17,18 +22,6 @@
        <h3>{{formatInt .ListenCount}}</h3> <p>Listens<p>
      </div>
  </div>
-  {{if eq .LoggedInUsername .Username}}
-  <div class="edit-section">
-    <h3>Edit Album</h3>
-    <form method="POST" action="/profile/{{.Username}}/album/{{.Album.Id}}/edit">
-      <label>Title: <input type="text" name="title" value="{{.Album.Title}}"></label>
-      <label>Cover URL: <input type="text" name="cover_url" value="{{.Album.CoverUrl}}"></label>
-      <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Album.SpotifyId}}"></label>
-      <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Album.MusicbrainzId}}"></label>
-      <button type="submit">Save</button>
-    </form>
-  </div>
-  {{end}}
  <div class="history">
    <h3>Scrobbles</h3>
    <table>
@@ -42,7 +35,7 @@
      {{range .Times}}
      <tr>
        <td><a href="/profile/{{$username}}/artist/{{urlquery .ArtistName}}">{{.ArtistName}}</a></td>
-        <td><a href="/profile/{{$username}}/song/{{urlquery .SongName}}">{{.SongName}}</a></td>
+        <td><a href="/profile/{{$username}}/song/{{urlquery .ArtistName}}/{{urlquery .SongName}}">{{.SongName}}</a></td>
        <td>{{.AlbumName}}</td>
        <td title="{{formatTimestampFull .Timestamp}}">{{formatTimestamp .Timestamp}}</td>
      </tr>
@@ -51,8 +44,25 @@
  </div>
  <div class="page_buttons">
    {{if gt .Page 1 }}
-    <a href="/profile/{{.Username}}/album/{{urlquery .Album.Title}}?page={{sub .Page 1}}">Prev Page</a>
+    <a href="/profile/{{.Username}}/album/{{urlquery .Artist.Name}}/{{urlquery .Album.Title}}?page={{sub .Page 1}}">Prev Page</a>
    {{end}}
-    <a href="/profile/{{.Username}}/album/{{urlquery .Album.Title}}?page={{add .Page 1}}">Next Page</a>
+    <a href="/profile/{{.Username}}/album/{{urlquery .Artist.Name}}/{{urlquery .Album.Title}}?page={{add .Page 1}}">Next Page</a>
  </div>
+
+  {{if eq .LoggedInUsername .Username}}
+  <div id="editModal" class="modal-overlay" style="display:none;">
+    <div class="modal-content">
+      <h2>Edit Album</h2>
+      <form id="editForm" data-entity="album" data-id="{{.Album.Id}}">
+        <label>Title: <input type="text" name="title" value="{{.Album.Title}}"></label>
+        <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Album.SpotifyId}}"></label>
+        <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Album.MusicbrainzId}}"></label>
+        <div class="modal-buttons">
+          <button type="button" class="cancel-btn" onclick="closeEditModal()">Cancel</button>
+          <button type="submit">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  {{end}}
 {{end}}
--- a/templates/artist.gohtml
+++ b/templates/artist.gohtml
@@ -1,13 +1,17 @@
 {{define "artist"}}
  <div class="profile-top">
    {{if .Artist.ImageUrl}}
-    <img src="{{.Artist.ImageUrl}}" alt="{{.Artist.Name}}'s image">
+    <img class="editable-image" data-entity="artist" data-id="{{.Artist.Id}}" data-field="image_url" src="{{.Artist.ImageUrl}}" alt="{{.Artist.Name}}'s image">
    {{else}}
-    <img src="/files/assets/pfps/default_artist.png" alt="{{.Artist.Name}}'s image">
+    <img class="editable-image" data-entity="artist" data-id="{{.Artist.Id}}" data-field="image_url" src="/files/assets/pfps/default_artist.png" alt="{{.Artist.Name}}'s image">
    {{end}}
    <div class="username-bio">
-      <h1>{{.Artist.Name}}</h1>
-      <h2>{{.Artist.Bio}}</h2>
+      <h1>
+        {{.Artist.Name}}
+        {{if eq .LoggedInUsername .Username}}
+        <button class="edit-btn" onclick="openEditModal()">Edit</button>
+        {{end}}
+      </h1>
    </div>
    <div class="profile-top-blank">
    </div>
@@ -15,19 +19,6 @@
        <h3>{{formatInt .ListenCount}}</h3> <p>Listens<p>
      </div>
  </div>
-  {{if eq .LoggedInUsername .Username}}
-  <div class="edit-section">
-    <h3>Edit Artist</h3>
-    <form method="POST" action="/profile/{{.Username}}/artist/{{.Artist.Id}}/edit">
-      <label>Name: <input type="text" name="name" value="{{.Artist.Name}}"></label>
-      <label>Image URL: <input type="text" name="image_url" value="{{.Artist.ImageUrl}}"></label>
-      <label>Bio: <textarea name="bio">{{.Artist.Bio}}</textarea></label>
-      <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Artist.SpotifyId}}"></label>
-      <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Artist.MusicbrainzId}}"></label>
-      <button type="submit">Save</button>
-    </form>
-  </div>
-  {{end}}
  <div class="history">
    <h3>Scrobbles</h3>
    <table>
@@ -41,7 +32,7 @@
      {{range .Times}}
      <tr>
        <td><a href="/profile/{{$username}}/artist/{{urlquery .ArtistName}}">{{.ArtistName}}</a></td>
-        <td><a href="/profile/{{$username}}/song/{{urlquery .SongName}}">{{.SongName}}</a></td>
+        <td><a href="/profile/{{$username}}/song/{{urlquery .ArtistName}}/{{urlquery .SongName}}">{{.SongName}}</a></td>
        <td><a href="/profile/{{$username}}/album/{{urlquery .AlbumName}}">{{.AlbumName}}</a></td>
        <td title="{{formatTimestampFull .Timestamp}}">{{formatTimestamp .Timestamp}}</td>
      </tr>
@@ -54,4 +45,26 @@
    {{end}}
    <a href="/profile/{{.Username}}/artist/{{urlquery .Artist.Name}}?page={{add .Page 1}}">Next Page</a>
  </div>
+  <div class="bio-box">
+    <h3>Bio</h3>
+    <p id="bio-display">{{.Artist.Bio}}</p>
+  </div>
+
+  {{if eq .LoggedInUsername .Username}}
+  <div id="editModal" class="modal-overlay" style="display:none;">
+    <div class="modal-content">
+      <h2>Edit Artist</h2>
+      <form id="editForm" data-entity="artist" data-id="{{.Artist.Id}}">
+        <label>Name: <input type="text" name="name" value="{{.Artist.Name}}"></label>
+        <label>Bio: <textarea name="bio">{{.Artist.Bio}}</textarea></label>
+        <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Artist.SpotifyId}}"></label>
+        <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Artist.MusicbrainzId}}"></label>
+        <div class="modal-buttons">
+          <button type="button" class="cancel-btn" onclick="closeEditModal()">Cancel</button>
+          <button type="submit">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  {{end}}
 {{end}}
--- a/templates/profile.gohtml
+++ b/templates/profile.gohtml
@@ -33,7 +33,7 @@
      {{range $index, $title := .Titles}}
      <tr>
        <td><a href="/profile/{{$username}}/artist/{{urlquery (index $artists $index)}}">{{index $artists $index}}</a></td>
-        <td><a href="/profile/{{$username}}/song/{{urlquery $title}}">{{$title}}</a></td>
+        <td><a href="/profile/{{$username}}/song/{{urlquery (index $artists $index)}}/{{urlquery $title}}">{{$title}}</a></td>
        <td title="{{formatTimestampFull (index $times $index)}}">{{formatTimestamp (index $times $index)}}</td>
      </tr>
      {{end}}
--- a/templates/song.gohtml
+++ b/templates/song.gohtml
@@ -1,12 +1,17 @@
 {{define "song"}}
  <div class="profile-top">
    <div class="username-bio">
-      <h1>{{.Song.Title}}</h1>
+      <h1>
+        {{.Song.Title}}
+        {{if eq .LoggedInUsername .Username}}
+        <button class="edit-btn" onclick="openEditModal()">Edit</button>
+        {{end}}
+      </h1>
      {{if .Artist.Name}}
      <h2><a href="/profile/{{.Username}}/artist/{{urlquery .Artist.Name}}">{{.Artist.Name}}</a></h2>
      {{end}}
      {{if .Album.Title}}
-      <h3><a href="/profile/{{.Username}}/album/{{urlquery .Album.Title}}">{{.Album.Title}}</a></h3>
+      <h3><a href="/profile/{{.Username}}/album/{{urlquery .Artist.Name}}/{{urlquery .Album.Title}}">{{.Album.Title}}</a></h3>
      {{end}}
    </div>
    <div class="profile-top-blank">
@@ -15,17 +20,6 @@
        <h3>{{formatInt .ListenCount}}</h3> <p>Listens<p>
      </div>
  </div>
-  {{if eq .LoggedInUsername .Username}}
-  <div class="edit-section">
-    <h3>Edit Song</h3>
-    <form method="POST" action="/profile/{{.Username}}/song/{{.Song.Id}}/edit">
-      <label>Title: <input type="text" name="title" value="{{.Song.Title}}"></label>
-      <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Song.SpotifyId}}"></label>
-      <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Song.MusicbrainzId}}"></label>
-      <button type="submit">Save</button>
-    </form>
-  </div>
-  {{end}}
  <div class="history">
    <h3>Scrobbles</h3>
    <table>
@@ -39,7 +33,7 @@
      {{range .Times}}
      <tr>
        <td><a href="/profile/{{$username}}/artist/{{urlquery .ArtistName}}">{{.ArtistName}}</a></td>
-        <td><a href="/profile/{{$username}}/song/{{urlquery .SongName}}">{{.SongName}}</a></td>
+        <td><a href="/profile/{{$username}}/song/{{urlquery .ArtistName}}/{{urlquery .SongName}}">{{.SongName}}</a></td>
        <td><a href="/profile/{{$username}}/album/{{urlquery .AlbumName}}">{{.AlbumName}}</a></td>
        <td title="{{formatTimestampFull .Timestamp}}">{{formatTimestamp .Timestamp}}</td>
      </tr>
@@ -48,8 +42,25 @@
  </div>
  <div class="page_buttons">
    {{if gt .Page 1 }}
-    <a href="/profile/{{.Username}}/song/{{urlquery .Song.Title}}?page={{sub .Page 1}}">Prev Page</a>
+    <a href="/profile/{{.Username}}/song/{{urlquery .Artist.Name}}/{{urlquery .Song.Title}}?page={{sub .Page 1}}">Prev Page</a>
    {{end}}
-    <a href="/profile/{{.Username}}/song/{{urlquery .Song.Title}}?page={{add .Page 1}}">Next Page</a>
+    <a href="/profile/{{.Username}}/song/{{urlquery .Artist.Name}}/{{urlquery .Song.Title}}?page={{add .Page 1}}">Next Page</a>
  </div>
+
+  {{if eq .LoggedInUsername .Username}}
+  <div id="editModal" class="modal-overlay" style="display:none;">
+    <div class="modal-content">
+      <h2>Edit Song</h2>
+      <form id="editForm" data-entity="song" data-id="{{.Song.Id}}">
+        <label>Title: <input type="text" name="title" value="{{.Song.Title}}"></label>
+        <label>Spotify ID: <input type="text" name="spotify_id" value="{{.Song.SpotifyId}}"></label>
+        <label>MusicBrainz ID: <input type="text" name="musicbrainz_id" value="{{.Song.MusicbrainzId}}"></label>
+        <div class="modal-buttons">
+          <button type="button" class="cancel-btn" onclick="closeEditModal()">Cancel</button>
+          <button type="submit">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  {{end}}
 {{end}}