v3: error cards across the app, friendly network errors, code quality pass

src/pages/PlaylistDetail.tsx

@@ -13,6 +13,8 @@ import { ConfirmModal } from "../components/ConfirmModal.tsx";
 import { ImagePicker } from "../components/ImagePicker.tsx";
 import { Markdown } from "../components/Markdown.tsx";
 import { FollowPlaylistButton } from "../components/FollowButton.tsx";
+import { ErrorCard } from "../components/ErrorCard.tsx";
+import { friendlyFetchError } from "../utils/apiError.ts";
 
 type LoadState =
   | { status: "loading" }
@@ -94,7 +96,7 @@ export function PlaylistDetail() {
       .catch((err) => {
         setState({
           status: "error",
-          error: err instanceof Error ? err.message : "Failed to load",
+          error: friendlyFetchError(err),
         });
       });
   };
@@ -384,7 +386,7 @@ export function PlaylistDetail() {
       setEditOpen(false);
       fetchPlaylist();
     } catch (err) {
-      setEditError(err instanceof Error ? err.message : "Save failed");
+      setEditError(friendlyFetchError(err));
     } finally {
       setEditSaving(false);
     }
@@ -578,7 +580,9 @@ export function PlaylistDetail() {
                   </>
                 )}
             </div>
-            {editError && <p className="form-error">{editError}</p>}
+            {editError && (
+              <ErrorCard title="Failed to save" message={editError} />
+            )}
           </div>
         </div>
       </div>