feat: album management improvements (#550)

* fix: album delete endpoint and track ordering from ATProto list

fixes two user-reported issues:

1. album deletion: adds DELETE /albums/{album_id} endpoint
- by default orphans tracks (sets album_id to null)
- with ?cascade=true deletes all tracks in the album
- cleans up ATProto list record and cover image

2. album track ordering: respects ATProto list record order
- get_album now fetches the ATProto list record to determine track order
- falls back to created_at order if no ATProto record exists
- fixes issue where reordering tracks in the frontend didn't persist

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* feat: album edit mode with ATProto sync and portal UX improvements

- add PATCH /albums/{album_id} endpoint for title/description updates
- sync album title changes to all track ATProto records
- add DELETE /albums/{album_id}/tracks/{track_id} to remove tracks from albums
- implement album page edit mode (inline title, cover upload, delete album)
- simplify portal albums section to clickable links (matches playlist UX)
- fix icon buttons to use square shape matching playlist page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

---------

Co-authored-by: Claude <[e-mail]>

backend/src/backend/api/albums.py

···
 
 import asyncio
 import contextlib
+import logging
 from io import BytesIO
 from pathlib import Path
 from typing import Annotated
 
-from fastapi import APIRouter, Cookie, Depends, File, HTTPException, Request, UploadFile
+from fastapi import (
+    APIRouter,
+    Cookie,
+    Depends,
+    File,
+    HTTPException,
+    Query,
+    Request,
+    UploadFile,
+)
 from pydantic import BaseModel
 from sqlalchemy import func, select
 from sqlalchemy.ext.asyncio import AsyncSession
···
     get_track_tags,
 )
 from backend.utilities.hashing import CHUNK_SIZE
+
+logger = logging.getLogger(__name__)
 
 router = APIRouter(prefix="/albums", tags=["albums"])
 
···
     request: Request,
     session_id_cookie: Annotated[str | None, Cookie(alias="session_id")] = None,
 ) -> AlbumResponse:
-    """get album details with all tracks for a specific artist."""
+    """get album details with all tracks for a specific artist.
+
+    if the album has an ATProto list record, tracks are returned in the
+    order stored in that record. otherwise, tracks are ordered by created_at.
+    """
+    from backend._internal.atproto.records import get_record_public
+
     # look up artist + album
     album_result = await db.execute(
         select(Album, Artist)
···
 
     album, artist = row
 
-    # batch fetch like counts
+    # ensure PDS URL cached (needed for ATProto record fetch)
+    pds_cache: dict[str, str | None] = {}
+    if artist.pds_url:
+        pds_cache[artist.did] = artist.pds_url
+    else:
+        from atproto_identity.did.resolver import AsyncDidResolver
+
+        resolver = AsyncDidResolver()
+        try:
+            atproto_data = await resolver.resolve_atproto_data(artist.did)
+            pds_cache[artist.did] = atproto_data.pds
+            artist.pds_url = atproto_data.pds
+            db.add(artist)
+            await db.commit()
+        except Exception:
+            pds_cache[artist.did] = None
+
+    # fetch all tracks for this album
     track_stmt = (
         select(Track)
         .options(selectinload(Track.artist), selectinload(Track.album_rel))
         .where(Track.album_id == album.id)
-        .order_by(Track.created_at.asc())
     )
     track_result = await db.execute(track_stmt)
-    tracks = track_result.scalars().all()
+    all_tracks = list(track_result.scalars().all())
+
+    # determine track order: use ATProto list record if available
+    ordered_tracks: list[Track] = []
+    if album.atproto_record_uri and artist.pds_url:
+        try:
+            record_data = await get_record_public(
+                record_uri=album.atproto_record_uri,
+                pds_url=artist.pds_url,
+            )
+            items = record_data.get("value", {}).get("items", [])
+            track_uris = [item.get("subject", {}).get("uri") for item in items]
+            track_uris = [uri for uri in track_uris if uri]
+
+            # build uri -> track map
+            track_by_uri = {t.atproto_record_uri: t for t in all_tracks}
+
+            # order tracks by ATProto list, append any not in list at end
+            seen_ids = set()
+            for uri in track_uris:
+                if uri in track_by_uri:
+                    track = track_by_uri[uri]
+                    ordered_tracks.append(track)
+                    seen_ids.add(track.id)
+
+            # append any tracks not in the ATProto list (fallback)
+            for track in sorted(all_tracks, key=lambda t: t.created_at):
+                if track.id not in seen_ids:
+                    ordered_tracks.append(track)
+
+        except Exception as e:
+            logger.warning(f"failed to fetch ATProto list for album ordering: {e}")
+            # fallback to created_at order
+            ordered_tracks = sorted(all_tracks, key=lambda t: t.created_at)
+    else:
+        # no ATProto record - order by created_at
+        ordered_tracks = sorted(all_tracks, key=lambda t: t.created_at)
+
+    tracks = ordered_tracks
     track_ids = [track.id for track in tracks]
+
+    # batch fetch aggregations
     if track_ids:
         like_counts, comment_counts, track_tags = await asyncio.gather(
             get_like_counts(db, track_ids),
···
             )
             liked_track_ids = set(liked_result.scalars().all())
 
-    # ensure PDS URL cached
-    pds_cache: dict[str, str | None] = {}
-    if artist.pds_url:
-        pds_cache[artist.did] = artist.pds_url
-    else:
-        from atproto_identity.did.resolver import AsyncDidResolver
-
-        resolver = AsyncDidResolver()
-        try:
-            atproto_data = await resolver.resolve_atproto_data(artist.did)
-            pds_cache[artist.did] = atproto_data.pds
-            artist.pds_url = atproto_data.pds
-            db.add(artist)
-            await db.commit()
-        except Exception:
-            pds_cache[artist.did] = None
-
-    # build track responses
+    # build track responses (maintaining order)
     track_responses = await asyncio.gather(
         *[
             TrackResponse.from_track(
···
         raise HTTPException(
             status_code=500, detail=f"failed to upload image: {e!s}"
         ) from e
+
+
[e-mail]("/{album_id}")
+async def update_album(
+    album_id: str,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    auth_session: Annotated[AuthSession, Depends(require_artist_profile)],
+    title: Annotated[str | None, Query(description="new album title")] = None,
+    description: Annotated[
+        str | None, Query(description="new album description")
+    ] = None,
+) -> AlbumMetadata:
+    """update album metadata (title, description).
+
+    when title changes, all tracks in the album have their ATProto records
+    updated to reflect the new album name.
+    """
+    from backend._internal.atproto.records.fm_plyr.track import (
+        build_track_record,
+        update_record,
+    )
+
+    result = await db.execute(
+        select(Album)
+        .where(Album.id == album_id)
+        .options(selectinload(Album.tracks).selectinload(Track.artist))
+    )
+    album = result.scalar_one_or_none()
+    if not album:
+        raise HTTPException(status_code=404, detail="album not found")
+    if album.artist_did != auth_session.did:
+        raise HTTPException(
+            status_code=403, detail="you can only update your own albums"
+        )
+
+    old_title = album.title
+    title_changed = title is not None and title.strip() != old_title
+
+    if title is not None:
+        album.title = title.strip()
+    if description is not None:
+        album.description = description.strip() if description.strip() else None
+
+    # if title changed, update all tracks' extra["album"] and ATProto records
+    if title_changed and title is not None:
+        new_title = title.strip()
+
+        for track in album.tracks:
+            # update the track's extra["album"] field
+            if track.extra is None:
+                track.extra = {}
+            track.extra = {**track.extra, "album": new_title}
+
+            # update ATProto record
+            updated_record = build_track_record(
+                title=track.title,
+                artist=track.artist.display_name,
+                audio_url=track.r2_url,
+                file_type=track.file_type,
+                album=new_title,
+                duration=track.duration,
+                features=track.features if track.features else None,
+                image_url=await track.get_image_url(),
+            )
+
+            _, new_cid = await update_record(
+                auth_session=auth_session,
+                record_uri=track.atproto_record_uri,
+                record=updated_record,
+            )
+            track.atproto_record_cid = new_cid
+
+    await db.commit()
+
+    # fetch artist for response
+    artist_result = await db.execute(
+        select(Artist).where(Artist.did == album.artist_did)
+    )
+    artist = artist_result.scalar_one()
+    track_count, total_plays = await _album_stats(db, album_id)
+
+    return await _album_metadata(album, artist, track_count, total_plays)
+
+
[e-mail]("/{album_id}/tracks/{track_id}")
+async def remove_track_from_album(
+    album_id: str,
+    track_id: int,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    auth_session: Annotated[AuthSession, Depends(require_artist_profile)],
+) -> dict:
+    """remove a track from an album (orphan it, don't delete).
+
+    the track remains available as a standalone track.
+    """
+    # verify album exists and belongs to the authenticated artist
+    album_result = await db.execute(select(Album).where(Album.id == album_id))
+    album = album_result.scalar_one_or_none()
+    if not album:
+        raise HTTPException(status_code=404, detail="album not found")
+    if album.artist_did != auth_session.did:
+        raise HTTPException(
+            status_code=403, detail="you can only modify your own albums"
+        )
+
+    # verify track exists and is in this album
+    track_result = await db.execute(select(Track).where(Track.id == track_id))
+    track = track_result.scalar_one_or_none()
+    if not track:
+        raise HTTPException(status_code=404, detail="track not found")
+    if track.album_id != album_id:
+        raise HTTPException(status_code=400, detail="track is not in this album")
+
+    # orphan the track
+    track.album_id = None
+    await db.commit()
+
+    return {"removed": True, "track_id": track_id}
+
+
[e-mail]("/{album_id}")
+async def delete_album(
+    album_id: str,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    auth_session: Annotated[AuthSession, Depends(require_artist_profile)],
+    cascade: Annotated[
+        bool,
+        Query(description="if true, also delete all tracks in the album"),
+    ] = False,
+) -> dict:
+    """delete an album.
+
+    by default, tracks are orphaned (album_id set to null) and remain
+    available as standalone tracks. with cascade=true, tracks are also deleted.
+
+    also deletes the ATProto list record if one exists.
+    """
+    from backend._internal.atproto.records import delete_record_by_uri
+
+    # verify album exists and belongs to the authenticated artist
+    result = await db.execute(select(Album).where(Album.id == album_id))
+    album = result.scalar_one_or_none()
+    if not album:
+        raise HTTPException(status_code=404, detail="album not found")
+    if album.artist_did != auth_session.did:
+        raise HTTPException(
+            status_code=403, detail="you can only delete your own albums"
+        )
+
+    # handle tracks
+    if cascade:
+        # delete all tracks in album
+        from backend.api.tracks.mutations import delete_track
+
+        tracks_result = await db.execute(
+            select(Track).where(Track.album_id == album_id)
+        )
+        tracks = tracks_result.scalars().all()
+        for track in tracks:
+            try:
+                await delete_track(track.id, db, auth_session)
+            except Exception as e:
+                logger.warning(f"failed to delete track {track.id}: {e}")
+    else:
+        # orphan tracks - set album_id to null
+        from sqlalchemy import update
+
+        await db.execute(
+            update(Track).where(Track.album_id == album_id).values(album_id=None)
+        )
+
+    # delete ATProto record if exists
+    if album.atproto_record_uri:
+        try:
+            await delete_record_by_uri(auth_session, album.atproto_record_uri)
+        except Exception as e:
+            logger.warning(f"failed to delete ATProto record: {e}")
+            # continue with database cleanup even if ATProto delete fails
+
+    # delete cover image from storage if exists
+    if album.image_id:
+        with contextlib.suppress(Exception):
+            await storage.delete(album.image_id)
+
+    # delete album from database
+    await db.delete(album)
+    await db.commit()
+
+    return {"deleted": True, "cascade": cascade}

backend/tests/api/test_albums.py

···
 """tests for album API helpers."""
 
 from collections.abc import Generator
+from unittest.mock import AsyncMock, patch
 
 import pytest
 from fastapi import FastAPI
 from httpx import ASGITransport, AsyncClient
+from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from backend._internal import Session
···
 
     def __init__(self, did: str = "did:test:user123"):
         self.did = did
+        self.handle = "testuser.bsky.social"
+        self.session_id = "test_session_id"
         self.access_token = "test_token"
         self.refresh_token = "test_refresh"
+        self.oauth_session = {
+            "did": did,
+            "handle": "testuser.bsky.social",
+            "pds_url": "https://test.pds",
+            "authserver_iss": "https://auth.test",
+            "scope": "atproto transition:generic",
+            "access_token": "test_token",
+            "refresh_token": "test_refresh",
+            "dpop_private_key_pem": "fake_key",
+            "dpop_authserver_nonce": "",
+            "dpop_pds_nonce": "",
+        }
 
 
 @pytest.fixture
 def test_app(db_session: AsyncSession) -> Generator[FastAPI, None, None]:
     """create test app with mocked auth."""
-    from backend._internal import require_auth
+    from backend._internal import require_artist_profile, require_auth
 
     async def mock_require_auth() -> Session:
         return MockSession()
 
+    async def mock_require_artist_profile() -> Session:
+        return MockSession()
+
     app.dependency_overrides[require_auth] = mock_require_auth
+    app.dependency_overrides[require_artist_profile] = mock_require_artist_profile
 
     yield app
 
···
     assert data["tracks"][0]["album"]["id"] == album.id
     assert data["tracks"][0]["album"]["slug"] == "test-album"
     assert data["tracks"][0]["album"]["title"] == "Test Album"
+
+
+async def test_delete_album_orphans_tracks_by_default(
+    test_app: FastAPI, db_session: AsyncSession
+):
+    """test that deleting album orphans tracks (sets album_id to null).
+
+    regression test for user report: unable to delete empty album after
+    deleting individual tracks.
+    """
+    # create artist matching mock session
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album
+    album = Album(
+        artist_did=artist.did,
+        slug="test-album",
+        title="Test Album",
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create tracks linked to album
+    track1 = Track(
+        title="Track 1",
+        file_id="test-file-1",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+    )
+    track2 = Track(
+        title="Track 2",
+        file_id="test-file-2",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+    )
+    db_session.add_all([track1, track2])
+    await db_session.commit()
+
+    album_id = album.id
+    track1_id = track1.id
+    track2_id = track2.id
+
+    # mock ATProto delete (imported inside the function from _internal.atproto.records)
+    with patch(
+        "backend._internal.atproto.records.fm_plyr.track.delete_record_by_uri",
+        new_callable=AsyncMock,
+    ):
+        async with AsyncClient(
+            transport=ASGITransport(app=test_app), base_url="http://test"
+        ) as client:
+            response = await client.delete(f"/albums/{album_id}")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data["deleted"] is True
+    assert data["cascade"] is False
+
+    # close test session and create fresh one to read committed data
+    await db_session.close()
+
+    # verify album is deleted by checking response
+    # (the API committed in a separate session, test session can't see it)
+    # Use a fresh query to verify the state
+    from backend.utilities.database import get_engine
+
+    engine = get_engine()
+    async with AsyncSession(engine, expire_on_commit=False) as fresh_session:
+        # verify album is deleted
+        result = await fresh_session.execute(select(Album).where(Album.id == album_id))
+        assert result.scalar_one_or_none() is None
+
+        # verify tracks still exist but are orphaned (album_id = null)
+        result = await fresh_session.execute(select(Track).where(Track.id == track1_id))
+        track1_after = result.scalar_one_or_none()
+        assert track1_after is not None
+        assert track1_after.album_id is None
+
+        result = await fresh_session.execute(select(Track).where(Track.id == track2_id))
+        track2_after = result.scalar_one_or_none()
+        assert track2_after is not None
+        assert track2_after.album_id is None
+
+
+async def test_delete_album_cascade_deletes_tracks(
+    test_app: FastAPI, db_session: AsyncSession
+):
+    """test that deleting album with cascade=true also deletes all tracks."""
+    # create artist matching mock session
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album
+    album = Album(
+        artist_did=artist.did,
+        slug="test-album-cascade",
+        title="Test Album Cascade",
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create tracks linked to album
+    track1 = Track(
+        title="Track 1",
+        file_id="cascade-file-1",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+    )
+    track2 = Track(
+        title="Track 2",
+        file_id="cascade-file-2",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+    )
+    db_session.add_all([track1, track2])
+    await db_session.commit()
+
+    album_id = album.id
+    track1_id = track1.id
+    track2_id = track2.id
+
+    # mock ATProto and storage deletes
+    with (
+        patch(
+            "backend._internal.atproto.records.fm_plyr.track.delete_record_by_uri",
+            new_callable=AsyncMock,
+        ),
+        patch(
+            "backend.api.tracks.mutations.delete_record_by_uri",
+            new_callable=AsyncMock,
+        ),
+        patch(
+            "backend.api.tracks.mutations.storage.delete",
+            new_callable=AsyncMock,
+        ),
+    ):
+        async with AsyncClient(
+            transport=ASGITransport(app=test_app), base_url="http://test"
+        ) as client:
+            response = await client.delete(f"/albums/{album_id}?cascade=true")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data["deleted"] is True
+    assert data["cascade"] is True
+
+    # verify album is deleted
+    result = await db_session.execute(select(Album).where(Album.id == album_id))
+    assert result.scalar_one_or_none() is None
+
+    # verify tracks are also deleted
+    result = await db_session.execute(select(Track).where(Track.id == track1_id))
+    assert result.scalar_one_or_none() is None
+
+    result = await db_session.execute(select(Track).where(Track.id == track2_id))
+    assert result.scalar_one_or_none() is None
+
+
+async def test_delete_album_forbidden_for_non_owner(
+    test_app: FastAPI, db_session: AsyncSession
+):
+    """test that users cannot delete albums they don't own."""
+    # create a different artist (not the mock session's did)
+    other_artist = Artist(
+        did="did:other:artist999",
+        handle="other.artist",
+        display_name="Other Artist",
+    )
+    db_session.add(other_artist)
+    await db_session.flush()
+
+    # create album owned by other artist
+    album = Album(
+        artist_did=other_artist.did,
+        slug="other-album",
+        title="Other Album",
+    )
+    db_session.add(album)
+    await db_session.commit()
+
+    album_id = album.id
+
+    async with AsyncClient(
+        transport=ASGITransport(app=test_app), base_url="http://test"
+    ) as client:
+        response = await client.delete(f"/albums/{album_id}")
+
+    assert response.status_code == 403
+    assert "your own albums" in response.json()["detail"]
+
+
+async def test_delete_empty_album(test_app: FastAPI, db_session: AsyncSession):
+    """test deleting an album with no tracks (empty album shell).
+
+    regression test for user report: after deleting all tracks individually,
+    the album folder remains and cannot be deleted.
+    """
+    # create artist matching mock session
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create empty album (no tracks)
+    album = Album(
+        artist_did=artist.did,
+        slug="empty-album",
+        title="Empty Album",
+    )
+    db_session.add(album)
+    await db_session.commit()
+
+    album_id = album.id
+
+    # mock ATProto delete
+    with patch(
+        "backend._internal.atproto.records.fm_plyr.track.delete_record_by_uri",
+        new_callable=AsyncMock,
+    ):
+        async with AsyncClient(
+            transport=ASGITransport(app=test_app), base_url="http://test"
+        ) as client:
+            response = await client.delete(f"/albums/{album_id}")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data["deleted"] is True
+
+    # verify album is deleted
+    result = await db_session.execute(select(Album).where(Album.id == album_id))
+    assert result.scalar_one_or_none() is None
+
+
+async def test_get_album_respects_atproto_track_order(
+    test_app: FastAPI, db_session: AsyncSession
+):
+    """test that get_album returns tracks in ATProto list order.
+
+    regression test for user report: album track reorder doesn't persist.
+    the frontend saves order to ATProto, but backend was ignoring it.
+    """
+    from datetime import UTC, datetime, timedelta
+
+    # create artist
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+        pds_url="https://test.pds",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album with ATProto record URI
+    album = Album(
+        artist_did=artist.did,
+        slug="ordered-album",
+        title="Ordered Album",
+        atproto_record_uri="at://did:test:user123/fm.plyr.list/album123",
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create tracks with staggered created_at (track3 first, track1 last)
+    base_time = datetime.now(UTC)
+    track1 = Track(
+        title="Track 1",
+        file_id="order-file-1",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        atproto_record_uri="at://did:test:user123/fm.plyr.track/track1",
+        atproto_record_cid="cid1",
+        created_at=base_time + timedelta(hours=2),  # created last
+    )
+    track2 = Track(
+        title="Track 2",
+        file_id="order-file-2",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        atproto_record_uri="at://did:test:user123/fm.plyr.track/track2",
+        atproto_record_cid="cid2",
+        created_at=base_time + timedelta(hours=1),  # created second
+    )
+    track3 = Track(
+        title="Track 3",
+        file_id="order-file-3",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        atproto_record_uri="at://did:test:user123/fm.plyr.track/track3",
+        atproto_record_cid="cid3",
+        created_at=base_time,  # created first
+    )
+    db_session.add_all([track1, track2, track3])
+    await db_session.commit()
+
+    # mock ATProto record fetch to return custom order: track2, track3, track1
+    # (different from created_at order which would be track3, track2, track1)
+    mock_record = {
+        "value": {
+            "items": [
+                {"subject": {"uri": track2.atproto_record_uri, "cid": "cid2"}},
+                {"subject": {"uri": track3.atproto_record_uri, "cid": "cid3"}},
+                {"subject": {"uri": track1.atproto_record_uri, "cid": "cid1"}},
+            ]
+        }
+    }
+
+    with patch(
+        "backend._internal.atproto.records.get_record_public",
+        new_callable=AsyncMock,
+        return_value=mock_record,
+    ):
+        async with AsyncClient(
+            transport=ASGITransport(app=test_app), base_url="http://test"
+        ) as client:
+            response = await client.get(f"/albums/{artist.handle}/{album.slug}")
+
+    assert response.status_code == 200
+    data = response.json()
+
+    # verify tracks are in ATProto order (track2, track3, track1)
+    # NOT created_at order (which would be track3, track2, track1)
+    assert len(data["tracks"]) == 3
+    assert data["tracks"][0]["title"] == "Track 2"
+    assert data["tracks"][1]["title"] == "Track 3"
+    assert data["tracks"][2]["title"] == "Track 1"
+
+
+async def test_get_album_fallback_to_created_at_without_atproto(
+    test_app: FastAPI, db_session: AsyncSession
+):
+    """test that get_album falls back to created_at order without ATProto record."""
+    from datetime import UTC, datetime, timedelta
+
+    # create artist
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album WITHOUT ATProto record URI
+    album = Album(
+        artist_did=artist.did,
+        slug="no-atproto-album",
+        title="No ATProto Album",
+        atproto_record_uri=None,  # no ATProto record
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create tracks with specific order
+    base_time = datetime.now(UTC)
+    track1 = Track(
+        title="First Track",
+        file_id="first-file",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        created_at=base_time,
+    )
+    track2 = Track(
+        title="Second Track",
+        file_id="second-file",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        created_at=base_time + timedelta(hours=1),
+    )
+    track3 = Track(
+        title="Third Track",
+        file_id="third-file",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        created_at=base_time + timedelta(hours=2),
+    )
+    db_session.add_all([track1, track2, track3])
+    await db_session.commit()
+
+    async with AsyncClient(
+        transport=ASGITransport(app=test_app), base_url="http://test"
+    ) as client:
+        response = await client.get(f"/albums/{artist.handle}/{album.slug}")
+
+    assert response.status_code == 200
+    data = response.json()
+
+    # verify tracks are in created_at order (default fallback)
+    assert len(data["tracks"]) == 3
+    assert data["tracks"][0]["title"] == "First Track"
+    assert data["tracks"][1]["title"] == "Second Track"
+    assert data["tracks"][2]["title"] == "Third Track"
+
+
+async def test_update_album_title(test_app: FastAPI, db_session: AsyncSession):
+    """test updating album title via PATCH endpoint.
+
+    verifies that:
+    1. album title is updated in database
+    2. track extra["album"] is updated for all tracks
+    3. ATProto records are updated for tracks that have them
+    """
+    # create artist matching mock session
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album
+    album = Album(
+        artist_did=artist.did,
+        slug="test-album",
+        title="Original Title",
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create track with ATProto record
+    track = Track(
+        title="Test Track",
+        file_id="test-file-update",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+        extra={"album": "Original Title"},
+        atproto_record_uri="at://did:test:user123/fm.plyr.track/track123",
+        atproto_record_cid="original_cid",
+    )
+    db_session.add(track)
+    await db_session.commit()
+
+    album_id = album.id
+    track_id = track.id
+
+    # mock ATProto update_record
+    with patch(
+        "backend._internal.atproto.records.fm_plyr.track.update_record",
+        new_callable=AsyncMock,
+        return_value=("at://did:test:user123/fm.plyr.track/track123", "new_cid"),
+    ) as mock_update:
+        async with AsyncClient(
+            transport=ASGITransport(app=test_app), base_url="http://test"
+        ) as client:
+            response = await client.patch(f"/albums/{album_id}?title=Updated%20Title")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data["title"] == "Updated Title"
+    assert data["id"] == album_id
+
+    # verify ATProto update was called
+    mock_update.assert_called_once()
+    call_kwargs = mock_update.call_args.kwargs
+    assert call_kwargs["record"]["album"] == "Updated Title"
+
+    # verify track extra["album"] was updated in database
+    from backend.utilities.database import get_engine
+
+    engine = get_engine()
+    async with AsyncSession(engine, expire_on_commit=False) as fresh_session:
+        result = await fresh_session.execute(select(Track).where(Track.id == track_id))
+        updated_track = result.scalar_one()
+        assert updated_track.extra["album"] == "Updated Title"
+        assert updated_track.atproto_record_cid == "new_cid"
+
+
+async def test_update_album_forbidden_for_non_owner(
+    test_app: FastAPI, db_session: AsyncSession
+):
+    """test that users cannot update albums they don't own."""
+    # create a different artist
+    other_artist = Artist(
+        did="did:other:artist999",
+        handle="other.artist",
+        display_name="Other Artist",
+    )
+    db_session.add(other_artist)
+    await db_session.flush()
+
+    # create album owned by other artist
+    album = Album(
+        artist_did=other_artist.did,
+        slug="other-album",
+        title="Other Album",
+    )
+    db_session.add(album)
+    await db_session.commit()
+
+    album_id = album.id
+
+    async with AsyncClient(
+        transport=ASGITransport(app=test_app), base_url="http://test"
+    ) as client:
+        response = await client.patch(f"/albums/{album_id}?title=Hacked%20Title")
+
+    assert response.status_code == 403
+    assert "your own albums" in response.json()["detail"]
+
+
+async def test_remove_track_from_album(test_app: FastAPI, db_session: AsyncSession):
+    """test removing a track from an album (orphaning it)."""
+    # create artist matching mock session
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album
+    album = Album(
+        artist_did=artist.did,
+        slug="test-album",
+        title="Test Album",
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create track in album
+    track = Track(
+        title="Track to Remove",
+        file_id="remove-file-1",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=album.id,
+    )
+    db_session.add(track)
+    await db_session.commit()
+
+    album_id = album.id
+    track_id = track.id
+
+    async with AsyncClient(
+        transport=ASGITransport(app=test_app), base_url="http://test"
+    ) as client:
+        response = await client.delete(f"/albums/{album_id}/tracks/{track_id}")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data["removed"] is True
+    assert data["track_id"] == track_id
+
+    # verify track is orphaned (album_id = null)
+    from backend.utilities.database import get_engine
+
+    engine = get_engine()
+    async with AsyncSession(engine, expire_on_commit=False) as fresh_session:
+        result = await fresh_session.execute(select(Track).where(Track.id == track_id))
+        track_after = result.scalar_one_or_none()
+        assert track_after is not None
+        assert track_after.album_id is None
+
+
+async def test_remove_track_not_in_album(test_app: FastAPI, db_session: AsyncSession):
+    """test that removing a track not in the album returns 400."""
+    # create artist
+    artist = Artist(
+        did="did:test:user123",
+        handle="test.artist",
+        display_name="Test Artist",
+    )
+    db_session.add(artist)
+    await db_session.flush()
+
+    # create album
+    album = Album(
+        artist_did=artist.did,
+        slug="test-album",
+        title="Test Album",
+    )
+    db_session.add(album)
+    await db_session.flush()
+
+    # create track NOT in this album (orphaned)
+    track = Track(
+        title="Orphan Track",
+        file_id="orphan-file-1",
+        file_type="audio/mpeg",
+        artist_did=artist.did,
+        album_id=None,  # not in any album
+    )
+    db_session.add(track)
+    await db_session.commit()
+
+    album_id = album.id
+    track_id = track.id
+
+    async with AsyncClient(
+        transport=ASGITransport(app=test_app), base_url="http://test"
+    ) as client:
+        response = await client.delete(f"/albums/{album_id}/tracks/{track_id}")
+
+    assert response.status_code == 400
+    assert "not in this album" in response.json()["detail"]

frontend/src/routes/portal/+page.svelte

···
 	// album management state
 	let albums = $state<AlbumSummary[]>([]);
 	let loadingAlbums = $state(false);
-	let editingAlbumId = $state<string | null>(null);
-	let editAlbumCoverFile = $state<File | null>(null);
 
 	// playlist management state
 	let playlists = $state<Playlist[]>([]);
···
 		} finally {
 			loadingPlaylists = false;
 		}
-	}
-
-	async function uploadAlbumCover(albumId: string) {
-		if (!editAlbumCoverFile) {
-			toast.error('no cover art selected');
-			return;
-		}
-
-		const formData = new FormData();
-		formData.append('image', editAlbumCoverFile);
-
-		try {
-			const response = await fetch(`${API_URL}/albums/${albumId}/cover`, {
-				method: 'POST',
-				credentials: 'include',
-				body: formData
-			});
-
-			if (response.ok) {
-				toast.success('album cover updated');
-				editingAlbumId = null;
-				editAlbumCoverFile = null;
-				await loadMyAlbums();
-			} else {
-				const data = await response.json();
-				toast.error(data.detail || 'failed to upload cover');
-			}
-		} catch (_e) {
-			console.error('failed to upload album cover:', _e);
-			toast.error('failed to upload cover art');
-		}
-	}
-
-	function startEditingAlbum(albumId: string) {
-		editingAlbumId = albumId;
-		editAlbumCoverFile = null;
-	}
-
-	function cancelEditAlbum() {
-		editingAlbumId = null;
-		editAlbumCoverFile = null;
 	}
 
 	async function saveProfile(e: SubmitEvent) {
···
 			{:else}
 				<div class="albums-grid">
 					{#each albums as album}
-						<div class="album-card" class:editing={editingAlbumId === album.id}>
-							{#if editingAlbumId === album.id}
-								<div class="album-edit-container">
-									<div class="album-edit-preview">
-										{#if album.image_url && !editAlbumCoverFile}
-											<img src={album.image_url} alt="{album.title} cover" class="album-cover" />
-										{:else if editAlbumCoverFile}
-											<div class="album-cover-placeholder">
-												<span class="file-name">{editAlbumCoverFile.name}</span>
-												<span class="file-size">({(editAlbumCoverFile.size / 1024 / 1024).toFixed(2)} MB)</span>
-											</div>
-										{:else}
-											<div class="album-cover-placeholder">
-												<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-													<rect x="3" y="3" width="18" height="18" stroke="currentColor" stroke-width="1.5" fill="none"/>
-													<circle cx="12" cy="12" r="4" fill="currentColor"/>
-												</svg>
-											</div>
-										{/if}
-									</div>
-									<div class="album-edit-actions">
-										<label for="album-cover-input-{album.id}" class="file-input-label">
-											select album artwork
-										</label>
-										<input
-											id="album-cover-input-{album.id}"
-											type="file"
-											accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
-											onchange={(e) => {
-												const target = e.target as HTMLInputElement;
-												editAlbumCoverFile = target.files?.[0] ?? null;
-											}}
-											class="file-input"
-										/>
-										<div class="edit-buttons">
-											<button
-												class="action-btn save-btn"
-												onclick={() => uploadAlbumCover(album.id)}
-												title="upload cover"
-												disabled={!editAlbumCoverFile}
-											>
-												✓
-											</button>
-											<button
-												class="action-btn cancel-btn"
-												onclick={cancelEditAlbum}
-												title="cancel"
-											>
-												✕
-											</button>
-										</div>
-									</div>
-								</div>
+						<a href="/u/{auth.user?.handle}/album/{album.slug}" class="album-card">
+							{#if album.image_url}
+								<img src={album.image_url} alt="{album.title} cover" class="album-cover" />
 							{:else}
-								<div class="album-cover-container">
-									{#if album.image_url}
-										<img src={album.image_url} alt="{album.title} cover" class="album-cover" />
-									{:else}
-										<div class="album-cover-placeholder">
-											<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-												<rect x="3" y="3" width="18" height="18" stroke="currentColor" stroke-width="1.5" fill="none"/>
-												<circle cx="12" cy="12" r="4" fill="currentColor"/>
-											</svg>
-										</div>
-									{/if}
-								</div>
-								<div class="album-info">
-									<h3 class="album-title">{album.title}</h3>
-									<p class="album-stats">
-										{album.track_count} {album.track_count === 1 ? 'track' : 'tracks'} •
-										{album.total_plays} {album.total_plays === 1 ? 'play' : 'plays'}
-									</p>
-								</div>
-								<div class="album-actions">
-									<button
-										class="action-btn edit-cover-btn"
-										onclick={() => startEditingAlbum(album.id)}
-										title="edit cover art"
-									>
-										<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-											<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-											<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-										</svg>
-									</button>
+								<div class="album-cover-placeholder">
+									<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+										<rect x="3" y="3" width="18" height="18" stroke="currentColor" stroke-width="1.5" fill="none"/>
+										<circle cx="12" cy="12" r="4" fill="currentColor"/>
+									</svg>
 								</div>
 							{/if}
-						</div>
+							<div class="album-info">
+								<h3 class="album-title">{album.title}</h3>
+								<p class="album-stats">
+									{album.track_count} {album.track_count === 1 ? 'track' : 'tracks'} •
+									{album.total_plays} {album.total_plays === 1 ? 'play' : 'plays'}
+								</p>
+							</div>
+						</a>
 					{/each}
 				</div>
 			{/if}
···
 		display: flex;
 		flex-direction: column;
 		gap: 0.75rem;
+		text-decoration: none;
+		color: inherit;
 	}
 
 	.album-card:hover {
-		border-color: var(--border-emphasis);
+		border-color: var(--accent);
 		transform: translateY(-2px);
 	}
 
-	.album-card.editing {
-		border-color: var(--accent);
-	}
-
-	.album-cover-container {
+	.album-cover {
 		width: 100%;
 		aspect-ratio: 1;
 		border-radius: 6px;
-		overflow: hidden;
-		background: var(--bg-primary);
-		border: 1px solid var(--border-subtle);
-	}
-
-	.album-cover {
-		width: 100%;
-		height: 100%;
 		object-fit: cover;
 	}
 
 	.album-cover-placeholder {
 		width: 100%;
-		height: 100%;
+		aspect-ratio: 1;
+		border-radius: 6px;
+		background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05));
 		display: flex;
-		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		color: var(--text-muted);
-		gap: 0.5rem;
-	}
-
-	.album-cover-placeholder .file-name {
-		font-size: 0.85rem;
-		color: var(--text-tertiary);
-		text-align: center;
-		word-break: break-word;
-		padding: 0 0.5rem;
-	}
-
-	.album-cover-placeholder .file-size {
-		font-size: 0.75rem;
-		color: var(--text-muted);
+		color: var(--accent);
 	}
 
 	.album-info {
+		min-width: 0;
 		flex: 1;
 	}
 
···
 		font-size: 0.85rem;
 		color: var(--text-tertiary);
 		margin: 0;
-	}
-
-	.album-actions {
-		display: flex;
-		gap: 0.5rem;
-		justify-content: flex-end;
-	}
-
-	.edit-cover-btn {
-		padding: 0.5rem;
-		background: var(--border-subtle);
-		border: 1px solid var(--border-emphasis);
-		border-radius: 4px;
-		cursor: pointer;
-		transition: all 0.2s;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.edit-cover-btn:hover {
-		background: var(--border-emphasis);
-		border-color: var(--accent);
-		color: var(--accent);
-	}
-
-	.album-edit-container {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
-	.album-edit-preview {
-		width: 100%;
-		aspect-ratio: 1;
-		border-radius: 6px;
-		overflow: hidden;
-		background: var(--bg-primary);
-		border: 1px solid var(--border-subtle);
-	}
-
-	.album-edit-actions {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.file-input-label {
-		font-size: 0.85rem;
-		color: var(--text-secondary);
-		font-weight: 500;
-		margin-bottom: 0.25rem;
-	}
-
-	.album-edit-actions .file-input {
-		padding: 0.5rem;
-		background: var(--border-subtle);
-		border: 1px solid var(--border-emphasis);
-		border-radius: 4px;
-		color: var(--text-primary);
-		font-size: 0.85rem;
-		cursor: pointer;
-	}
-
-	.album-edit-actions .file-input:hover {
-		background: var(--border-emphasis);
-		border-color: var(--accent);
-	}
-
-	.edit-buttons {
-		display: flex;
-		gap: 0.5rem;
-		justify-content: flex-end;
 	}
 
 	/* playlists section */

frontend/src/routes/u/[handle]/album/[slug]/+page.svelte

···
 
 	let { data }: { data: PageData } = $props();
 
-	const album = $derived(data.album);
+	// local mutable album metadata for editing
+	let albumMetadata = $state({ ...data.album.metadata });
 	const isAuthenticated = $derived(auth.isAuthenticated);
 
+	// sync when data changes (e.g., navigation)
+	$effect(() => {
+		albumMetadata = { ...data.album.metadata };
+		tracks = [...data.album.tracks];
+	});
+
 	// check if current user owns this album
-	const isOwner = $derived(auth.user?.did === album.metadata.artist_did);
+	const isOwner = $derived(auth.user?.did === albumMetadata.artist_did);
 	// can only reorder if owner and album has an ATProto list
-	const canReorder = $derived(isOwner && !!album.metadata.list_uri);
+	const canReorder = $derived(isOwner && !!albumMetadata.list_uri);
 
 	// local mutable copy of tracks for reordering
 	let tracks = $state<Track[]>([...data.album.tracks]);
-
-	// sync when data changes (e.g., navigation)
-	$effect(() => {
-		tracks = [...data.album.tracks];
-	});
 
 	// edit mode state
 	let isEditMode = $state(false);
 	let isSaving = $state(false);
+	let editTitle = $state('');
+
+	// delete confirmation modal
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+
+	// cover upload
+	let coverInputElement = $state<HTMLInputElement | null>(null);
+	let uploadingCover = $state(false);
+
+	// track removal
+	let removingTrackId = $state<number | null>(null);
 
 	// drag state
 	let draggedIndex = $state<number | null>(null);
···
 		if (tracks.length > 0) {
 			queue.setQueue(tracks);
 			queue.playNow(tracks[0]);
-			toast.success(`playing ${album.metadata.title}`, 1800);
+			toast.success(`playing ${albumMetadata.title}`, 1800);
 		}
 	}
 
 	function addToQueue() {
 		if (tracks.length > 0) {
 			queue.addTracks(tracks);
-			toast.success(`added ${album.metadata.title} to queue`, 1800);
+			toast.success(`added ${albumMetadata.title} to queue`, 1800);
 		}
 	}
 
 	function toggleEditMode() {
 		if (isEditMode) {
-			saveOrder();
+			// exiting edit mode - save changes
+			saveAllChanges();
+		} else {
+			// entering edit mode - initialize edit state
+			editTitle = albumMetadata.title;
 		}
 		isEditMode = !isEditMode;
 	}
 
+	async function saveAllChanges() {
+		// save track order if album has ATProto list
+		if (canReorder) {
+			await saveOrder();
+		}
+
+		// save title if changed
+		if (editTitle.trim() && editTitle.trim() !== albumMetadata.title) {
+			await saveTitleChange();
+		}
+	}
+
+	async function saveTitleChange() {
+		if (!editTitle.trim() || editTitle.trim() === albumMetadata.title) return;
+
+		try {
+			const response = await fetch(
+				`${API_URL}/albums/${albumMetadata.id}?title=${encodeURIComponent(editTitle.trim())}`,
+				{
+					method: 'PATCH',
+					credentials: 'include'
+				}
+			);
+
+			if (!response.ok) {
+				throw new Error('failed to update title');
+			}
+
+			const updated = await response.json();
+			albumMetadata.title = updated.title;
+			toast.success('title updated');
+		} catch (e) {
+			console.error('failed to save title:', e);
+			toast.error(e instanceof Error ? e.message : 'failed to save title');
+			// revert to original title
+			editTitle = albumMetadata.title;
+		}
+	}
+
+	function handleCoverSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		if (!file.type.startsWith('image/')) {
+			toast.error('please select an image file');
+			return;
+		}
+
+		if (file.size > 20 * 1024 * 1024) {
+			toast.error('image must be under 20MB');
+			return;
+		}
+
+		uploadCover(file);
+	}
+
+	async function uploadCover(file: File) {
+		uploadingCover = true;
+		try {
+			const formData = new FormData();
+			formData.append('image', file);
+
+			const response = await fetch(`${API_URL}/albums/${albumMetadata.id}/cover`, {
+				method: 'POST',
+				credentials: 'include',
+				body: formData
+			});
+
+			if (!response.ok) {
+				throw new Error('failed to upload cover');
+			}
+
+			const result = await response.json();
+			albumMetadata.image_url = result.image_url;
+			toast.success('cover updated');
+		} catch (e) {
+			console.error('failed to upload cover:', e);
+			toast.error(e instanceof Error ? e.message : 'failed to upload cover');
+		} finally {
+			uploadingCover = false;
+		}
+	}
+
+	async function removeTrack(track: Track) {
+		removingTrackId = track.id;
+
+		try {
+			const response = await fetch(`${API_URL}/albums/${albumMetadata.id}/tracks/${track.id}`, {
+				method: 'DELETE',
+				credentials: 'include'
+			});
+
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.detail || 'failed to remove track');
+			}
+
+			tracks = tracks.filter((t) => t.id !== track.id);
+			albumMetadata.track_count = tracks.length;
+
+			toast.success(`removed "${track.title}" from album`);
+		} catch (e) {
+			console.error('failed to remove track:', e);
+			toast.error(e instanceof Error ? e.message : 'failed to remove track');
+		} finally {
+			removingTrackId = null;
+		}
+	}
+
+	async function deleteAlbum() {
+		deleting = true;
+
+		try {
+			const response = await fetch(`${API_URL}/albums/${albumMetadata.id}`, {
+				method: 'DELETE',
+				credentials: 'include'
+			});
+
+			if (!response.ok) {
+				throw new Error('failed to delete album');
+			}
+
+			toast.success('album deleted');
+			goto(`/u/${albumMetadata.artist_handle}`);
+		} catch (e) {
+			console.error('failed to delete album:', e);
+			toast.error(e instanceof Error ? e.message : 'failed to delete album');
+			deleting = false;
+			showDeleteConfirm = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			if (showDeleteConfirm) {
+				showDeleteConfirm = false;
+			} else if (isEditMode) {
+				// revert title change and exit edit mode
+				editTitle = albumMetadata.title;
+				isEditMode = false;
+			}
+		}
+	}
+
 	async function saveOrder() {
-		if (!album.metadata.list_uri) return;
+		if (!albumMetadata.list_uri) return;
 
 		// extract rkey from list URI (at://did/collection/rkey)
-		const rkey = album.metadata.list_uri.split('/').pop();
+		const rkey = albumMetadata.list_uri.split('/').pop();
 		if (!rkey) return;
 
 		// build strongRefs from current track order
···
 
 	$effect(() => {
 		if (typeof window !== 'undefined') {
-			shareUrl = `${window.location.origin}/u/${album.metadata.artist_handle}/album/${album.metadata.slug}`;
+			shareUrl = `${window.location.origin}/u/${albumMetadata.artist_handle}/album/${albumMetadata.slug}`;
 		}
 	});
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <svelte:head>
-	<title>{album.metadata.title} by {album.metadata.artist} - plyr.fm</title>
-	<meta name="description" content="{album.metadata.title} by {album.metadata.artist} - {album.metadata.track_count} tracks on plyr.fm" />
+	<title>{albumMetadata.title} by {albumMetadata.artist} - plyr.fm</title>
+	<meta name="description" content="{albumMetadata.title} by {albumMetadata.artist} - {albumMetadata.track_count} tracks on plyr.fm" />
 
 	<!-- Open Graph / Facebook -->
 	<meta property="og:type" content="music.album" />
-	<meta property="og:title" content="{album.metadata.title} by {album.metadata.artist}" />
-	<meta property="og:description" content="{album.metadata.track_count} tracks • {album.metadata.total_plays} plays" />
-	<meta property="og:url" content="{APP_CANONICAL_URL}/u/{album.metadata.artist_handle}/album/{album.metadata.slug}" />
+	<meta property="og:title" content="{albumMetadata.title} by {albumMetadata.artist}" />
+	<meta property="og:description" content="{albumMetadata.track_count} tracks • {albumMetadata.total_plays} plays" />
+	<meta property="og:url" content="{APP_CANONICAL_URL}/u/{albumMetadata.artist_handle}/album/{albumMetadata.slug}" />
 	<meta property="og:site_name" content={APP_NAME} />
-	<meta property="music:musician" content="{album.metadata.artist_handle}" />
-	{#if album.metadata.image_url && !isImageSensitiveSSR(album.metadata.image_url)}
-		<meta property="og:image" content="{album.metadata.image_url}" />
-		<meta property="og:image:secure_url" content="{album.metadata.image_url}" />
+	<meta property="music:musician" content="{albumMetadata.artist_handle}" />
+	{#if albumMetadata.image_url && !isImageSensitiveSSR(albumMetadata.image_url)}
+		<meta property="og:image" content="{albumMetadata.image_url}" />
+		<meta property="og:image:secure_url" content="{albumMetadata.image_url}" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="1200" />
-		<meta property="og:image:alt" content="{album.metadata.title} by {album.metadata.artist}" />
+		<meta property="og:image:alt" content="{albumMetadata.title} by {albumMetadata.artist}" />
 	{/if}
 
 	<!-- Twitter -->
 	<meta name="twitter:card" content="summary" />
-	<meta name="twitter:title" content="{album.metadata.title} by {album.metadata.artist}" />
-	<meta name="twitter:description" content="{album.metadata.track_count} tracks • {album.metadata.total_plays} plays" />
-	{#if album.metadata.image_url && !isImageSensitiveSSR(album.metadata.image_url)}
-		<meta name="twitter:image" content="{album.metadata.image_url}" />
+	<meta name="twitter:title" content="{albumMetadata.title} by {albumMetadata.artist}" />
+	<meta name="twitter:description" content="{albumMetadata.track_count} tracks • {albumMetadata.total_plays} plays" />
+	{#if albumMetadata.image_url && !isImageSensitiveSSR(albumMetadata.image_url)}
+		<meta name="twitter:image" content="{albumMetadata.image_url}" />
 	{/if}
 </svelte:head>
 
 <Header user={auth.user} isAuthenticated={auth.isAuthenticated} onLogout={() => goto('/login')} />
 <div class="container">
 	<main>
-		<div class="album-hero">
-			{#if album.metadata.image_url}
-				<SensitiveImage src={album.metadata.image_url} tooltipPosition="center">
-					<img src={album.metadata.image_url} alt="{album.metadata.title} artwork" class="album-art" />
+		<!-- hidden file input for cover upload -->
+		<input
+			type="file"
+			accept="image/jpeg,image/png,image/webp"
+			bind:this={coverInputElement}
+			onchange={handleCoverSelect}
+			hidden
+		/>
+
+		<div class="album-hero" class:edit-mode={isEditMode && isOwner}>
+			{#if isEditMode && isOwner}
+				<button
+					class="album-art-wrapper clickable"
+					onclick={() => coverInputElement?.click()}
+					type="button"
+					aria-label="change cover image"
+					disabled={uploadingCover}
+				>
+					{#if albumMetadata.image_url}
+						<img src={albumMetadata.image_url} alt="{albumMetadata.title} artwork" class="album-art" />
+					{:else}
+						<div class="album-art-placeholder">
+							<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+								<rect x="3" y="3" width="18" height="18" stroke="currentColor" stroke-width="1.5" fill="none"/>
+								<circle cx="12" cy="12" r="4" fill="currentColor"/>
+							</svg>
+						</div>
+					{/if}
+					<div class="art-edit-overlay" class:uploading={uploadingCover}>
+						{#if uploadingCover}
+							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
+								<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
+							</svg>
+							<span>uploading...</span>
+						{:else}
+							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+								<circle cx="8.5" cy="8.5" r="1.5"></circle>
+								<polyline points="21 15 16 10 5 21"></polyline>
+							</svg>
+							<span>change cover</span>
+						{/if}
+					</div>
+				</button>
+			{:else if albumMetadata.image_url}
+				<SensitiveImage src={albumMetadata.image_url} tooltipPosition="center">
+					<img src={albumMetadata.image_url} alt="{albumMetadata.title} artwork" class="album-art" />
 				</SensitiveImage>
 			{:else}
 				<div class="album-art-placeholder">
···
 			<div class="album-info-wrapper">
 				<div class="album-info">
 					<p class="album-type">album</p>
-					<h1 class="album-title">{album.metadata.title}</h1>
+					{#if isEditMode && isOwner}
+						<input
+							type="text"
+							class="album-title-input"
+							bind:value={editTitle}
+							placeholder="album title"
+						/>
+					{:else}
+						<h1 class="album-title">{albumMetadata.title}</h1>
+					{/if}
 					<div class="album-meta">
-						<a href="/u/{album.metadata.artist_handle}" class="artist-link">
-							{album.metadata.artist}
+						<a href="/u/{albumMetadata.artist_handle}" class="artist-link">
+							{albumMetadata.artist}
 						</a>
 						<span class="meta-separator">•</span>
-						<span>{album.metadata.track_count} {album.metadata.track_count === 1 ? 'track' : 'tracks'}</span>
+						<span>{albumMetadata.track_count} {albumMetadata.track_count === 1 ? 'track' : 'tracks'}</span>
 						<span class="meta-separator">•</span>
-						<span>{album.metadata.total_plays} {album.metadata.total_plays === 1 ? 'play' : 'plays'}</span>
+						<span>{albumMetadata.total_plays} {albumMetadata.total_plays === 1 ? 'play' : 'plays'}</span>
 					</div>
 				</div>
 
-				<div class="side-button-right">
+				<div class="side-buttons">
 					<ShareButton url={shareUrl} title="share album" />
+					{#if isOwner}
+						<button
+							class="icon-btn"
+							class:active={isEditMode}
+							onclick={toggleEditMode}
+							aria-label={isEditMode ? 'done editing' : 'edit album'}
+							title={isEditMode ? 'done editing' : 'edit album'}
+						>
+							{#if isEditMode}
+								{#if isSaving}
+									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
+										<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
+									</svg>
+								{:else}
+									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<polyline points="20 6 9 17 4 12"></polyline>
+									</svg>
+								{/if}
+							{:else}
+								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+									<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+									<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+								</svg>
+							{/if}
+						</button>
+						<button
+							class="icon-btn danger"
+							onclick={() => (showDeleteConfirm = true)}
+							aria-label="delete album"
+							title="delete album"
+						>
+							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<polyline points="3 6 5 6 21 6"></polyline>
+								<path d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"></path>
+								<path d="M10 11v6"></path>
+								<path d="M14 11v6"></path>
+								<path d="m9 6 .5-2h5l.5 2"></path>
+							</svg>
+						</button>
+					{/if}
 				</div>
 			</div>
 		</div>
···
 				</svg>
 				add to queue
 			</button>
-			{#if canReorder}
-				<button
-					class="reorder-button"
-					class:active={isEditMode}
-					onclick={toggleEditMode}
-					disabled={isSaving}
-					title={isEditMode ? 'save order' : 'reorder tracks'}
-				>
-					{#if isEditMode}
-						{#if isSaving}
-							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
-								<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
-							</svg>
-							saving...
+			<div class="mobile-buttons">
+				<ShareButton url={shareUrl} title="share album" />
+				{#if isOwner}
+					<button
+						class="icon-btn"
+						class:active={isEditMode}
+						onclick={toggleEditMode}
+						aria-label={isEditMode ? 'done editing' : 'edit album'}
+						title={isEditMode ? 'done editing' : 'edit album'}
+					>
+						{#if isEditMode}
+							{#if isSaving}
+								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinner">
+									<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
+								</svg>
+							{:else}
+								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+									<polyline points="20 6 9 17 4 12"></polyline>
+								</svg>
+							{/if}
 						{:else}
 							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<polyline points="20 6 9 17 4 12"></polyline>
+								<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+								<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
 							</svg>
-							done
 						{/if}
-					{:else}
+					</button>
+					<button
+						class="icon-btn danger"
+						onclick={() => (showDeleteConfirm = true)}
+						aria-label="delete album"
+						title="delete album"
+					>
 						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-							<line x1="3" y1="12" x2="21" y2="12"></line>
-							<line x1="3" y1="6" x2="21" y2="6"></line>
-							<line x1="3" y1="18" x2="21" y2="18"></line>
+							<polyline points="3 6 5 6 21 6"></polyline>
+							<path d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"></path>
+							<path d="M10 11v6"></path>
+							<path d="M14 11v6"></path>
+							<path d="m9 6 .5-2h5l.5 2"></path>
 						</svg>
-						reorder
-					{/if}
-				</button>
-			{/if}
-			<div class="mobile-share-button">
-				<ShareButton url={shareUrl} title="share album" />
+					</button>
+				{/if}
 			</div>
 		</div>
 
···
 							ondrop={(e) => handleDrop(e, i)}
 							ondragend={handleDragEnd}
 						>
-							<button
-								class="drag-handle"
-								ontouchstart={(e) => handleTouchStart(e, i)}
-								onclick={(e) => e.stopPropagation()}
-								aria-label="drag to reorder"
-								title="drag to reorder"
-							>
-								<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-									<circle cx="5" cy="3" r="1.5"></circle>
-									<circle cx="11" cy="3" r="1.5"></circle>
-									<circle cx="5" cy="8" r="1.5"></circle>
-									<circle cx="11" cy="8" r="1.5"></circle>
-									<circle cx="5" cy="13" r="1.5"></circle>
-									<circle cx="11" cy="13" r="1.5"></circle>
-								</svg>
-							</button>
+							{#if canReorder}
+								<button
+									class="drag-handle"
+									ontouchstart={(e) => handleTouchStart(e, i)}
+									onclick={(e) => e.stopPropagation()}
+									aria-label="drag to reorder"
+									title="drag to reorder"
+								>
+									<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+										<circle cx="5" cy="3" r="1.5"></circle>
+										<circle cx="11" cy="3" r="1.5"></circle>
+										<circle cx="5" cy="8" r="1.5"></circle>
+										<circle cx="11" cy="8" r="1.5"></circle>
+										<circle cx="5" cy="13" r="1.5"></circle>
+										<circle cx="11" cy="13" r="1.5"></circle>
+									</svg>
+								</button>
+							{/if}
 							<div class="track-content">
 								<TrackItem
 									{track}
···
 									hideArtist={true}
 								/>
 							</div>
+							<button
+								class="remove-track-btn"
+								onclick={(e) => {
+									e.stopPropagation();
+									removeTrack(track);
+								}}
+								disabled={removingTrackId === track.id}
+								aria-label="remove track from album"
+								title="remove track"
+							>
+								{#if removingTrackId === track.id}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spinner">
+										<circle cx="12" cy="12" r="10" stroke-dasharray="31.4" stroke-dashoffset="10"></circle>
+									</svg>
+								{:else}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<line x1="18" y1="6" x2="6" y2="18"></line>
+										<line x1="6" y1="6" x2="18" y2="18"></line>
+									</svg>
+								{/if}
+							</button>
 						</div>
 					{:else}
 						<TrackItem
···
 	</main>
 </div>
 
+{#if showDeleteConfirm}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		class="modal-overlay"
+		role="presentation"
+		onclick={() => (showDeleteConfirm = false)}
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+		<div
+			class="modal"
+			role="alertdialog"
+			aria-modal="true"
+			aria-labelledby="delete-confirm-title"
+			tabindex="-1"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<div class="modal-header">
+				<h3 id="delete-confirm-title">delete album?</h3>
+			</div>
+			<div class="modal-body">
+				<p>
+					are you sure you want to delete "{albumMetadata.title}"? the tracks will remain as standalone tracks.
+				</p>
+			</div>
+			<div class="modal-footer">
+				<button
+					class="cancel-btn"
+					onclick={() => (showDeleteConfirm = false)}
+					disabled={deleting}
+				>
+					cancel
+				</button>
+				<button
+					class="confirm-btn danger"
+					onclick={deleteAlbum}
+					disabled={deleting}
+				>
+					{deleting ? 'deleting...' : 'delete'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
 	.container {
 		max-width: 1200px;
···
 		gap: 0.5rem;
 	}
 
-	.side-button-right {
+	.side-buttons {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		gap: 0.5rem;
 		padding-bottom: 0.5rem;
 	}
 
-	.mobile-share-button {
+	.mobile-buttons {
 		display: none;
 	}
 
+	.icon-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		background: transparent;
+		border: 1px solid var(--border-default);
+		border-radius: 4px;
+		color: var(--text-tertiary);
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.icon-btn:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.icon-btn.danger:hover {
+		border-color: var(--error);
+		color: var(--error);
+	}
+
+	.icon-btn.active {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
+	}
+
+	.album-art-wrapper {
+		position: relative;
+		border: none;
+		padding: 0;
+		background: none;
+	}
+
+	.album-art-wrapper.clickable {
+		cursor: pointer;
+	}
+
+	.album-art-wrapper.clickable:hover .art-edit-overlay {
+		opacity: 1;
+	}
+
+	.art-edit-overlay {
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.6);
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		color: white;
+		font-size: 0.85rem;
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+
+	.art-edit-overlay.uploading {
+		opacity: 1;
+	}
+
+	.album-title-input {
+		font-size: 2.5rem;
+		font-weight: 700;
+		background: transparent;
+		border: none;
+		border-bottom: 2px solid var(--accent);
+		color: var(--text-primary);
+		padding: 0.25rem 0;
+		width: 100%;
+		outline: none;
+		font-family: inherit;
+	}
+
+	.album-title-input::placeholder {
+		color: var(--text-muted);
+	}
+
 	.album-type {
 		text-transform: uppercase;
 		font-size: 0.75rem;
···
 		color: var(--accent);
 	}
 
-	.reorder-button {
-		padding: 0.75rem 1.5rem;
-		border-radius: 24px;
-		font-weight: 600;
-		font-size: 0.95rem;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.2s;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		background: transparent;
-		color: var(--text-primary);
-		border: 1px solid var(--border-default);
-	}
-
-	.reorder-button:hover {
-		border-color: var(--accent);
-		color: var(--accent);
-	}
-
-	.reorder-button:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.reorder-button.active {
-		border-color: var(--accent);
-		color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 10%, transparent);
-	}
-
 	.spinner {
 		animation: spin 1s linear infinite;
 	}
···
 			width: 100%;
 		}
 
-		.side-button-right {
+		.side-buttons {
 			display: none;
 		}
 
-		.mobile-share-button {
+		.mobile-buttons {
 			display: flex;
-			width: 100%;
-			justify-content: center;
+			gap: 0.5rem;
 		}
 
 		.album-title {
···
 		}
 
 		.play-button,
-		.queue-button,
-		.reorder-button {
+		.queue-button {
 			width: 100%;
 			justify-content: center;
 		}
···
 			font-size: 0.8rem;
 			flex-wrap: wrap;
 		}
+	}
+
+	/* remove track button */
+	.remove-track-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		background: transparent;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition: all 0.2s;
+		flex-shrink: 0;
+	}
+
+	.remove-track-btn:hover {
+		color: var(--error);
+		background: color-mix(in srgb, var(--error) 10%, transparent);
+	}
+
+	.remove-track-btn:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* modal styles */
+	.modal-overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.7);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+		backdrop-filter: blur(4px);
+	}
+
+	.modal {
+		background: var(--bg-secondary);
+		border-radius: 12px;
+		padding: 1.5rem;
+		max-width: 400px;
+		width: calc(100% - 2rem);
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+		border: 1px solid var(--border-subtle);
+	}
+
+	.modal-header {
+		margin-bottom: 1rem;
+	}
+
+	.modal-header h3 {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: var(--text-primary);
+	}
+
+	.modal-body {
+		margin-bottom: 1.5rem;
+	}
+
+	.modal-body p {
+		margin: 0;
+		color: var(--text-secondary);
+		line-height: 1.5;
+	}
+
+	.modal-footer {
+		display: flex;
+		gap: 0.75rem;
+		justify-content: flex-end;
+	}
+
+	.cancel-btn,
+	.confirm-btn {
+		padding: 0.625rem 1.25rem;
+		border-radius: 8px;
+		font-weight: 500;
+		font-size: 0.9rem;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.2s;
+		border: none;
+	}
+
+	.cancel-btn {
+		background: var(--bg-tertiary);
+		color: var(--text-primary);
+	}
+
+	.cancel-btn:hover {
+		background: var(--bg-hover);
+	}
+
+	.cancel-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.confirm-btn {
+		background: var(--accent);
+		color: var(--bg-primary);
+	}
+
+	.confirm-btn:hover {
+		filter: brightness(1.1);
+	}
+
+	.confirm-btn.danger {
+		background: var(--error);
+	}
+
+	.confirm-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 	}
 </style>