refactor: update UI components in AppBottombar, AppFloatingPlayer, AppSidebar, and LibraryPlaylistsScreen for consistency and improved theming

assets/fonts/Ubuntu_Mono/UFL.txt

@@ -1,96 +0,0 @@
--------------------------------
-UBUNTU FONT LICENCE Version 1.0
--------------------------------
-
-PREAMBLE
-This licence allows the licensed fonts to be used, studied, modified and
-redistributed freely. The fonts, including any derivative works, can be
-bundled, embedded, and redistributed provided the terms of this licence
-are met. The fonts and derivatives, however, cannot be released under
-any other licence. The requirement for fonts to remain under this
-licence does not require any document created using the fonts or their
-derivatives to be published under this licence, as long as the primary
-purpose of the document is not to be a vehicle for the distribution of
-the fonts.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this licence and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Original Version" refers to the collection of Font Software components
-as received under this licence.
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to
-a new environment.
-
-"Copyright Holder(s)" refers to all individuals and companies who have a
-copyright ownership of the Font Software.
-
-"Substantially Changed" refers to Modified Versions which can be easily
-identified as dissimilar to the Font Software by users of the Font
-Software comparing the Original Version with the Modified Version.
-
-To "Propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy. Propagation includes copying,
-distribution (with or without modification and with or without charging
-a redistribution fee), making available to the public, and in some
-countries other activities as well.
-
-PERMISSION & CONDITIONS
-This licence does not grant any rights under trademark law and all such
-rights are reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a
-copy of the Font Software, to propagate the Font Software, subject to
-the below conditions:
-
-1) Each copy of the Font Software must contain the above copyright
-notice and this licence. These can be included either as stand-alone
-text files, human-readable headers or in the appropriate machine-
-readable metadata fields within text or binary files as long as those
-fields can be easily viewed by the user.
-
-2) The font name complies with the following:
-(a) The Original Version must retain its name, unmodified.
-(b) Modified Versions which are Substantially Changed must be renamed to
-avoid use of the name of the Original Version or similar names entirely.
-(c) Modified Versions which are not Substantially Changed must be
-renamed to both (i) retain the name of the Original Version and (ii) add
-additional naming elements to distinguish the Modified Version from the
-Original Version. The name of such Modified Versions must be the name of
-the Original Version, with "derivative X" where X represents the name of
-the new work, appended to that name.
-
-3) The name(s) of the Copyright Holder(s) and any contributor to the
-Font Software shall not be used to promote, endorse or advertise any
-Modified Version, except (i) as required by this licence, (ii) to
-acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
-their explicit written permission.
-
-4) The Font Software, modified or unmodified, in part or in whole, must
-be distributed entirely under this licence, and must not be distributed
-under any other licence. The requirement for fonts to remain under this
-licence does not affect any document created using the Font Software,
-except any version of the Font Software extracted from a document
-created using the Font Software may only be distributed under this
-licence.
-
-TERMINATION
-This licence becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
-COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
-DEALINGS IN THE FONT SOFTWARE.

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/CollectionDetails.kt

@@ -53,6 +53,7 @@ import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
 import dev.krtirtho.spotube.core.ui.misc.shimmerApply
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
+import dev.krtirtho.spotube.resources.iconsax.IconsaxEdit
 import dev.krtirtho.spotube.resources.iconsax.IconsaxHeart
 import dev.krtirtho.spotube.resources.iconsax.IconsaxHeart2
 import dev.krtirtho.spotube.resources.iconsax.IconsaxPauseCircle
@@ -80,6 +81,7 @@ fun CollectionDetails(
     isFollowing: Boolean = false,
     onFollowClick: () -> Unit = { },
     showFollowButton: Boolean = true,
+    onEdit: (() -> Unit)? = null,
 ) {
 
 
@@ -151,6 +153,15 @@ fun CollectionDetails(
                         }
                     }
                 }
+                if (onEdit != null) {
+                    ButtonGroupDivider()
+                    GroupIconButton(onClick = onEdit) {
+                        Icon(
+                            imageVector = Iconsax.IconsaxEdit,
+                            contentDescription = "Edit playlist",
+                        )
+                    }
+                }
             }
         }
         val ownerInfo = @Composable {

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt

@@ -103,6 +103,7 @@ import dev.krtirtho.spotube.resources.iconsax.Iconsax3DotsMore
 import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
 import dev.krtirtho.spotube.resources.iconsax.IconsaxDirectboxReceive
 import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
+import dev.krtirtho.spotube.resources.iconsax.IconsaxMusicPlaylist
 import dev.krtirtho.spotube.resources.iconsax.IconsaxNext
 import dev.krtirtho.spotube.resources.iconsax.IconsaxPause
 import dev.krtirtho.spotube.resources.iconsax.IconsaxPlay
@@ -140,6 +141,7 @@ fun TrackList(
     onBulkDownload: (List<MetadataTrack>) -> Unit = {},
     onBulkAddToQueue: (List<MetadataTrack>) -> Unit = {},
     onBulkPlayNext: (List<MetadataTrack>) -> Unit = {},
+    onBulkAddToPlaylist: (List<MetadataTrack>) -> Unit = {},
     currentTrackId: String? = null,
     isCurrentTrackPlaying: Boolean = false,
     trackOptionsState: (MetadataTrack) -> TrackOptionsState = { TrackOptionsState() },
@@ -433,6 +435,11 @@ fun TrackList(
                                 label = if (isAll) "Play All Next" else "Play $trackCount Next",
                                 onClick = { onBulkPlayNext(targetTracks) },
                             ),
+                            AdaptiveMenuItem(
+                                icon = Iconsax.IconsaxMusicPlaylist,
+                                label = if (isAll) "Add All to Playlist" else "Add $trackCount to Playlist",
+                                onClick = { onBulkAddToPlaylist(targetTracks) },
+                            ),
                         ),
                         trigger = { onClick ->
                             GroupIconButton(

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackOptions.kt

@@ -49,6 +49,7 @@ import dev.krtirtho.spotube.resources.iconsax.IconsaxDirectboxReceive
 import dev.krtirtho.spotube.resources.iconsax.IconsaxHeart
 import dev.krtirtho.spotube.resources.iconsax.IconsaxHeart2
 import dev.krtirtho.spotube.resources.iconsax.IconsaxMusicCircle
+import dev.krtirtho.spotube.resources.iconsax.IconsaxMusicPlaylist
 import dev.krtirtho.spotube.resources.iconsax.IconsaxMusicSquareRemove
 import dev.krtirtho.spotube.resources.iconsax.IconsaxNext
 import dev.krtirtho.spotube.resources.iconsax.IconsaxShare
@@ -59,6 +60,7 @@ sealed interface TrackOptionsAction {
     data object AddToQueue : TrackOptionsAction
     data object RemoveFromQueue : TrackOptionsAction
     data object ToggleFavorite : TrackOptionsAction
+    data object AddToPlaylist : TrackOptionsAction
     data object Download : TrackOptionsAction
     data object ToggleBlacklist : TrackOptionsAction
     data object Share : TrackOptionsAction
@@ -274,6 +276,14 @@ private fun buildTrackMenuItems(
         ),
     )
 
+    add(
+        AdaptiveMenuItem(
+            icon = Iconsax.IconsaxMusicPlaylist,
+            label = "Add to playlist",
+            onClick = { onAction(TrackOptionsAction.AddToPlaylist) },
+        ),
+    )
+
     add(
         AdaptiveMenuItem(
             icon = Iconsax.IconsaxDirectboxReceive,

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/album/AlbumScreen.kt

@@ -20,7 +20,12 @@ package dev.krtirtho.spotube.modules.album
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.track.MetadataTrack
@@ -40,6 +45,8 @@ import dev.krtirtho.spotube.core.ui.component.TrackOptionsState
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
 import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.modules.library.playlist.AddToPlaylistPicker
+import kotlinx.coroutines.launch
 import org.koin.compose.koinInject
 import org.koin.compose.viewmodel.koinViewModel
 import org.koin.core.parameter.parametersOf
@@ -50,6 +57,8 @@ fun AlbumScreen(albumId: String) {
     val audioPlayer: AudioPlayer = koinInject()
     val shareService: ShareService = koinInject()
     val downloadsViewModel: DownloadsViewModel = koinViewModel()
+    val libraryRepository: LibraryRepository = koinInject()
+    val scope = rememberCoroutineScope()
     val viewModel = koinViewModel<AlbumViewModel>(
         key = albumId,
         parameters = { parametersOf(albumId) }
@@ -62,6 +71,13 @@ fun AlbumScreen(albumId: String) {
     val playerState by audioPlayer.playerStateFlow.collectAsStateWithLifecycle()
     val savedTrackIds by viewModel.savedTrackIds.collectAsStateWithLifecycle()
     val savedAlbumIds by viewModel.savedAlbumIds.collectAsStateWithLifecycle()
+    var showAddToPlaylistPicker by remember { mutableStateOf(false) }
+    var tracksToAddToPlaylist by remember { mutableStateOf<List<MetadataTrack>>(emptyList()) }
+    var currentUserId by remember { mutableStateOf<String?>(null) }
+
+    LaunchedEffect(Unit) {
+        currentUserId = libraryRepository.currentUser()?.id
+    }
 
     fun getTrackOptionsState(track: MetadataTrack): TrackOptionsState {
         val currentTrackId = (currentQueueEntry as? QueueEntry.StreamingTrack)?.track?.id
@@ -87,6 +103,10 @@ fun AlbumScreen(albumId: String) {
         if (action is TrackOptionsAction.Download) {
             downloadsViewModel.downloadTrack(track)
         }
+        if (action is TrackOptionsAction.AddToPlaylist) {
+            tracksToAddToPlaylist = listOf(track)
+            showAddToPlaylistPicker = true
+        }
     }
 
     Scaffold(
@@ -194,8 +214,26 @@ fun AlbumScreen(albumId: String) {
                     onBulkPlayNext = { tracks ->
                         viewModel.playTracksNext(tracks)
                     },
+                    onBulkAddToPlaylist = { tracks ->
+                        tracksToAddToPlaylist = tracks
+                        showAddToPlaylistPicker = true
+                    },
                 )
             }
         }
+
+        AddToPlaylistPicker(
+            visible = showAddToPlaylistPicker,
+            currentUserId = currentUserId,
+            onDismiss = { showAddToPlaylistPicker = false },
+            onPlaylistSelected = { playlistId ->
+                scope.launch {
+                    libraryRepository.addTracksToPlaylist(
+                        playlistId,
+                        tracksToAddToPlaylist.map { it.id }
+                    )
+                }
+            },
+        )
     }
 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/album/AlbumViewModel.kt

@@ -222,6 +222,7 @@ class AlbumViewModel(
                 is TrackOptionsAction.Download -> {}
                 is TrackOptionsAction.ToggleBlacklist -> {}
                 is TrackOptionsAction.Share -> {}
+                is TrackOptionsAction.AddToPlaylist -> {}
             }
         }
     }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/artist/ArtistScreen.kt

@@ -45,6 +45,10 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -84,12 +88,15 @@ import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
 import dev.krtirtho.spotube.core.ui.misc.shimmerApply
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
+import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.modules.library.playlist.AddToPlaylistPicker
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
 import dev.krtirtho.spotube.resources.iconsax.IconsaxPlay
 import dev.krtirtho.spotube.resources.iconsax.User
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.launch
 import org.koin.compose.koinInject
 import org.koin.compose.viewmodel.koinViewModel
 import org.koin.core.parameter.parametersOf
@@ -101,6 +108,8 @@ fun ArtistScreen(artistId: String) {
     val audioPlayer: AudioPlayer = koinInject()
     val shareService: ShareService = koinInject()
     val downloadsViewModel: DownloadsViewModel = koinViewModel()
+    val libraryRepository: LibraryRepository = koinInject()
+    val scope = rememberCoroutineScope()
     val viewModel = koinViewModel<ArtistViewModel>(
         key = artistId,
         parameters = { parametersOf(artistId) }
@@ -113,6 +122,13 @@ fun ArtistScreen(artistId: String) {
     val playerState by audioPlayer.playerStateFlow.collectAsStateWithLifecycle()
     val savedTrackIds by viewModel.savedTrackIds.collectAsStateWithLifecycle()
     val savedArtistIds by viewModel.savedArtistIds.collectAsStateWithLifecycle()
+    var showAddToPlaylistPicker by remember { mutableStateOf(false) }
+    var tracksToAddToPlaylist by remember { mutableStateOf<List<MetadataTrack>>(emptyList()) }
+    var currentUserId by remember { mutableStateOf<String?>(null) }
+
+    LaunchedEffect(Unit) {
+        currentUserId = libraryRepository.currentUser()?.id
+    }
 
     fun getTrackOptionsState(track: MetadataTrack): TrackOptionsState {
         val currentTrackId = (currentQueueEntry as? QueueEntry.StreamingTrack)?.track?.id
@@ -138,6 +154,10 @@ fun ArtistScreen(artistId: String) {
         if (action is TrackOptionsAction.Download) {
             downloadsViewModel.downloadTrack(track)
         }
+        if (action is TrackOptionsAction.AddToPlaylist) {
+            tracksToAddToPlaylist = listOf(track)
+            showAddToPlaylistPicker = true
+        }
     }
 
     Scaffold(
@@ -213,6 +233,10 @@ fun ArtistScreen(artistId: String) {
                             onBulkDownload = { tracks -> downloadsViewModel.downloadTracks(tracks) },
                             onBulkAddToQueue = { tracks -> viewModel.addTracksToQueue(tracks) },
                             onBulkPlayNext = { tracks -> viewModel.playTracksNext(tracks) },
+                            onBulkAddToPlaylist = { tracks ->
+                                tracksToAddToPlaylist = tracks
+                                showAddToPlaylistPicker = true
+                            },
                         )
                     }
 
@@ -266,6 +290,20 @@ fun ArtistScreen(artistId: String) {
                 }
             }
         }
+
+        AddToPlaylistPicker(
+            visible = showAddToPlaylistPicker,
+            currentUserId = currentUserId,
+            onDismiss = { showAddToPlaylistPicker = false },
+            onPlaylistSelected = { playlistId ->
+                scope.launch {
+                    libraryRepository.addTracksToPlaylist(
+                        playlistId,
+                        tracksToAddToPlaylist.map { it.id }
+                    )
+                }
+            },
+        )
     }
 }
 

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/artist/ArtistViewModel.kt

@@ -269,6 +269,7 @@ class ArtistViewModel(
                 is TrackOptionsAction.Download -> {}
                 is TrackOptionsAction.ToggleBlacklist -> {}
                 is TrackOptionsAction.Share -> {}
+                is TrackOptionsAction.AddToPlaylist -> {}
             }
         }
     }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/library/LibraryRepository.kt

@@ -22,6 +22,7 @@ import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.artist.MetadataArtist
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.common.PaginationResult
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.common.PaginationStrategy
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.playlist.MetadataPlaylist
+import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.user.MetadataUser
 import dev.krtirtho.spotube.modules.plugin.PluginManager
 import io.github.reactivecircus.cache4k.Cache
 import kotlinx.coroutines.CoroutineScope
@@ -276,4 +277,80 @@ class LibraryRepository(
             savedArtistIds.value -= ids.toSet()
         }
     }
+
+    suspend fun currentUser(): MetadataUser? {
+        return plugin?.let { plugin ->
+            pluginManager.withScope {
+                plugin.use {
+                    metadataUserAPI.getUser("")
+                }
+            }
+        }
+    }
+
+    suspend fun createPlaylist(
+        name: String,
+        description: String?,
+        isPublic: Boolean,
+        isCollaborating: Boolean,
+        imageBase64: String,
+        trackIds: List<String>,
+    ): MetadataPlaylist? {
+        return plugin?.let { plugin ->
+            pluginManager.withScope {
+                plugin.use {
+                    val result = metadataPlaylistAPI.createPlaylist(
+                        name = name,
+                        description = description,
+                        isPublic = isPublic,
+                        isCollaborating = isCollaborating,
+                        imageBase64 = imageBase64,
+                        trackIds = trackIds,
+                    )
+                    playlistCache.invalidateAll()
+                    savedPlaylistIds.value += result.id
+                    result
+                }
+            }
+        }
+    }
+
+    suspend fun updatePlaylist(
+        id: String,
+        name: String?,
+        description: String?,
+        isPublic: Boolean?,
+        isCollaborating: Boolean?,
+        imageBase64: String?,
+        trackIds: List<String>?,
+    ): MetadataPlaylist? {
+        return plugin?.let { plugin ->
+            pluginManager.withScope {
+                plugin.use {
+                    val result = metadataPlaylistAPI.updatePlaylist(
+                        id = id,
+                        name = name,
+                        description = description,
+                        isPublic = isPublic,
+                        isCollaborating = isCollaborating,
+                        imageBase64 = imageBase64,
+                        trackIds = trackIds,
+                    )
+                    playlistCache.invalidateAll()
+                    result
+                }
+            }
+        }
+    }
+
+    suspend fun addTracksToPlaylist(playlistId: String, trackIds: List<String>) {
+        plugin?.let { plugin ->
+            pluginManager.withScope {
+                plugin.use {
+                    metadataPlaylistAPI.addTracksToPlaylist(playlistId, trackIds)
+                }
+            }
+            playlistCache.invalidateAll()
+        }
+    }
 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/library/playlist/AddToPlaylistPicker.kt

@@ -0,0 +1,257 @@
+/*
+ * Copyright (C) 2026 Kingmor Roy Tirtho and Spotube Contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package dev.krtirtho.spotube.modules.library.playlist
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.playlist.MetadataPlaylist
+import dev.krtirtho.spotube.core.ui.base.OutlineButton
+import dev.krtirtho.spotube.core.ui.base.TextField
+import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.resources.iconsax.Iconsax
+import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
+import kotlinx.coroutines.launch
+import org.koin.compose.koinInject
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddToPlaylistPicker(
+    visible: Boolean,
+    currentUserId: String?,
+    onDismiss: () -> Unit,
+    onPlaylistSelected: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    libraryRepository: LibraryRepository = koinInject(),
+    breakpointDp: Float = 600f,
+) {
+    if (!visible) return
+
+    val adaptiveInfo = currentWindowAdaptiveInfo()
+    val isLargeScreen = adaptiveInfo.windowSizeClass.minWidthDp >= breakpointDp
+
+    var playlists by remember { mutableStateOf<List<MetadataPlaylist>>(emptyList()) }
+    var isLoading by remember { mutableStateOf(true) }
+    var searchQuery by remember { mutableStateOf("") }
+    val scope = rememberCoroutineScope()
+
+    LaunchedEffect(visible, currentUserId) {
+        if (visible) {
+            isLoading = true
+            scope.launch {
+                val result = libraryRepository.savedPlaylists()
+                playlists = result?.items?.filter {
+                    currentUserId != null && it.owner?.id == currentUserId
+                } ?: emptyList()
+                isLoading = false
+            }
+        }
+    }
+
+    val filteredPlaylists = remember(playlists, searchQuery) {
+        if (searchQuery.isBlank()) {
+            playlists
+        } else {
+            playlists.filter {
+                it.title.contains(searchQuery, ignoreCase = true) ||
+                    it.description?.contains(searchQuery, ignoreCase = true) == true
+            }
+        }
+    }
+
+    val content: @Composable () -> Unit = {
+        Column(modifier = Modifier.fillMaxSize()) {
+            TextField(
+                value = searchQuery,
+                onValueChange = { searchQuery = it },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp),
+                placeholder = { Text("Search your playlists...") },
+                singleLine = true,
+                leadingIcon = {
+                    Icon(
+                        imageVector = Iconsax.IconsaxFilterSearch,
+                        contentDescription = "Search",
+                    )
+                },
+            )
+
+            PlaylistPickerContent(
+                playlists = filteredPlaylists,
+                isLoading = isLoading,
+                onPlaylistSelected = { playlistId ->
+                    onPlaylistSelected(playlistId)
+                    onDismiss()
+                },
+            )
+        }
+    }
+
+    if (isLargeScreen) {
+        AlertDialog(
+            onDismissRequest = onDismiss,
+            modifier = modifier,
+            title = {
+                Text("Add to Your Playlist")
+            },
+            text = {
+                Box(modifier = Modifier.fillMaxWidth().height(400.dp)) {
+                    content()
+                }
+            },
+            confirmButton = {
+                OutlineButton(onClick = onDismiss) {
+                    Text("Cancel")
+                }
+            },
+        )
+    } else {
+        ModalBottomSheet(
+            onDismissRequest = onDismiss,
+            dragHandle = null,
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 8.dp),
+            ) {
+                Text(
+                    text = "Add to Your Playlist",
+                    style = MaterialTheme.typography.headlineSmall,
+                    modifier = Modifier.padding(bottom = 16.dp),
+                )
+                content()
+            }
+        }
+    }
+}
+
+@Composable
+private fun PlaylistPickerContent(
+    playlists: List<MetadataPlaylist>,
+    isLoading: Boolean,
+    onPlaylistSelected: (String) -> Unit,
+) {
+    if (isLoading) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+            Text("Loading your playlists...")
+        }
+    } else if (playlists.isEmpty()) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+            Text("You don't own any playlists yet.\nCreate one to add tracks.")
+        }
+    } else {
+        LazyColumn(
+            modifier = Modifier.fillMaxWidth(),
+            verticalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            items(playlists, key = { it.id }) { playlist ->
+                PlaylistPickerRow(
+                    playlist = playlist,
+                    onClick = { onPlaylistSelected(playlist.id) },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun PlaylistPickerRow(
+    playlist: MetadataPlaylist,
+    onClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .clickable(onClick = onClick)
+            .padding(horizontal = 8.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        val imageUrl = playlist.thumbnails.firstOrNull()?.url
+        if (imageUrl != null) {
+            AsyncImage(
+                model = imageUrl,
+                contentDescription = playlist.title,
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(RoundedCornerShape(8.dp)),
+                contentScale = ContentScale.Crop,
+            )
+        } else {
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(RoundedCornerShape(8.dp)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Text(
+                    text = playlist.title.take(1).uppercase(),
+                    style = MaterialTheme.typography.titleMedium,
+                )
+            }
+        }
+
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = playlist.title,
+                style = MaterialTheme.typography.bodyLarge,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Text(
+                text = "${playlist.trackCount} tracks",
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+    }
+}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/library/playlist/LibraryPlaylistsScreen.kt

@@ -22,10 +22,12 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
@@ -35,12 +37,15 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import dev.krtirtho.spotube.core.ui.base.IconButton
 import dev.krtirtho.spotube.core.ui.component.ErrorDisplay
 import dev.krtirtho.spotube.core.ui.base.TextField
 import dev.krtirtho.spotube.core.ui.component.LikedTracksCard
@@ -49,6 +54,7 @@ import dev.krtirtho.spotube.core.ui.component.cards.PlayableCard
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.modules.shell.LocalAppShellBottomInset
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
+import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
 import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.map
@@ -62,6 +68,7 @@ fun LibraryPlaylistsScreen(
 ) {
     val state by viewModel.uiState.collectAsStateWithLifecycle()
     val gridState = rememberLazyGridState()
+    var showCreatePlaylist by remember { mutableStateOf(false) }
 
 
     LaunchedEffect(gridState) {
@@ -84,8 +91,14 @@ fun LibraryPlaylistsScreen(
     }
 
     Column(modifier = modifier) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
             AnimatedVisibility(
                 visible = searchMode,
+                modifier = Modifier.weight(1f),
             ) {
                 TextField(
                     value = (state as? LibraryPlaylistsState.Data)?.query ?: "",
@@ -101,6 +114,16 @@ fun LibraryPlaylistsScreen(
                     }
                 )
             }
+            IconButton(
+                onClick = { showCreatePlaylist = true },
+                modifier = Modifier.size(48.dp),
+            ) {
+                Icon(
+                    imageVector = Iconsax.IconsaxAddSquare,
+                    contentDescription = "Create Playlist",
+                )
+            }
+        }
         Spacer(modifier = Modifier.height(12.dp))
         when (state) {
             is LibraryPlaylistsState.Loading -> {
@@ -187,5 +210,20 @@ fun LibraryPlaylistsScreen(
                 }
             }
         }
+
+        PlaylistFormSheet(
+            visible = showCreatePlaylist,
+            onDismiss = { showCreatePlaylist = false },
+            onSubmit = { data ->
+                viewModel.createPlaylist(
+                    name = data.name,
+                    description = data.description.ifBlank { null },
+                    isPublic = data.isPublic,
+                    isCollaborating = data.isCollaborating,
+                    imageBase64 = data.imageBase64,
+                    trackIds = emptyList(),
+                )
+            },
+        )
     }
 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/library/playlist/LibraryPlaylistsViewModel.kt

@@ -152,4 +152,31 @@ class LibraryPlaylistsViewModel(
             loadInitialData()
         }
     }
+
+    fun createPlaylist(
+        name: String,
+        description: String?,
+        isPublic: Boolean,
+        isCollaborating: Boolean,
+        imageBase64: String,
+        trackIds: List<String>,
+    ) {
+        viewModelScope.launch {
+            runCatching {
+                repository.createPlaylist(
+                    name = name,
+                    description = description,
+                    isPublic = isPublic,
+                    isCollaborating = isCollaborating,
+                    imageBase64 = imageBase64,
+                    trackIds = trackIds,
+                )
+            }.onFailure { e ->
+                logger.e(e) { "Failed to create playlist" }
+            }.onSuccess {
+                repository.invalidateCaches()
+                loadInitialData()
+            }
+        }
+    }
 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/library/playlist/PlaylistFormSheet.kt

@@ -0,0 +1,335 @@
+/*
+ * Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package dev.krtirtho.spotube.modules.library.playlist
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import dev.krtirtho.spotube.core.ui.base.OutlineButton
+import dev.krtirtho.spotube.core.ui.base.PrimaryButton
+import dev.krtirtho.spotube.core.ui.base.TextField
+import io.github.vinceglb.filekit.dialogs.FileKitType
+import io.github.vinceglb.filekit.dialogs.compose.rememberFilePickerLauncher
+import io.github.vinceglb.filekit.readBytes
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import okio.ByteString.Companion.toByteString
+
+data class PlaylistFormData(
+    val name: String = "",
+    val description: String = "",
+    val isPublic: Boolean = true,
+    val isCollaborating: Boolean = false,
+    val imageBase64: String = "",
+    val imagePreviewUrl: String? = null,
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun PlaylistFormSheet(
+    visible: Boolean,
+    onDismiss: () -> Unit,
+    onSubmit: (PlaylistFormData) -> Unit,
+    modifier: Modifier = Modifier,
+    initialData: PlaylistFormData? = null,
+    isEditing: Boolean = false,
+    breakpointDp: Float = 600f,
+) {
+    if (!visible) return
+
+    val adaptiveInfo = currentWindowAdaptiveInfo()
+    val isLargeScreen = adaptiveInfo.windowSizeClass.minWidthDp >= breakpointDp
+
+    var name by remember(initialData) { mutableStateOf(initialData?.name ?: "") }
+    var description by remember(initialData) { mutableStateOf(initialData?.description ?: "") }
+    var isPublic by remember(initialData) { mutableStateOf(initialData?.isPublic ?: true) }
+    var isCollaborating by remember(initialData) { mutableStateOf(initialData?.isCollaborating ?: false) }
+    var imageBase64 by remember(initialData) { mutableStateOf(initialData?.imageBase64 ?: "") }
+    var imagePreviewUrl by remember(initialData) { mutableStateOf(initialData?.imagePreviewUrl) }
+
+    val scope = rememberCoroutineScope()
+    val imagePicker = rememberFilePickerLauncher(
+        type = FileKitType.Image
+    ) { file ->
+        if (file != null) {
+            scope.launch {
+                val bytes = file.readBytes()
+                val base64 = withContext(Dispatchers.Default) {
+                    bytes.toByteString().base64()
+                }
+                imageBase64 = base64
+                imagePreviewUrl = null
+            }
+        }
+    }
+
+    val currentData = PlaylistFormData(
+        name = name,
+        description = description,
+        isPublic = isPublic,
+        isCollaborating = isCollaborating,
+        imageBase64 = imageBase64,
+        imagePreviewUrl = imagePreviewUrl,
+    )
+
+    val handleImagePick = { imagePicker.launch() }
+
+    if (isLargeScreen) {
+        AlertDialog(
+            onDismissRequest = onDismiss,
+            modifier = modifier,
+            title = {
+                Text(if (isEditing) "Edit Playlist" else "Create Playlist")
+            },
+            text = {
+                PlaylistFormFields(
+                    name = name,
+                    onNameChange = { name = it },
+                    description = description,
+                    onDescriptionChange = { description = it },
+                    isPublic = isPublic,
+                    onIsPublicChange = { isPublic = it },
+                    isCollaborating = isCollaborating,
+                    onIsCollaboratingChange = { isCollaborating = it },
+                    imageBase64 = imageBase64,
+                    imagePreviewUrl = imagePreviewUrl,
+                    onPickImage = handleImagePick,
+                )
+            },
+            confirmButton = {
+                PrimaryButton(
+                    onClick = {
+                        onSubmit(currentData)
+                        onDismiss()
+                    },
+                    enabled = name.isNotBlank(),
+                ) {
+                    Text(if (isEditing) "Save" else "Create")
+                }
+            },
+            dismissButton = {
+                OutlineButton(onClick = onDismiss) {
+                    Text("Cancel")
+                }
+            },
+        )
+    } else {
+        ModalBottomSheet(
+            onDismissRequest = onDismiss,
+            dragHandle = null,
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 8.dp),
+            ) {
+                Text(
+                    text = if (isEditing) "Edit Playlist" else "Create Playlist",
+                    style = MaterialTheme.typography.headlineSmall,
+                    modifier = Modifier.padding(bottom = 16.dp),
+                )
+                PlaylistFormFields(
+                    name = name,
+                    onNameChange = { name = it },
+                    description = description,
+                    onDescriptionChange = { description = it },
+                    isPublic = isPublic,
+                    onIsPublicChange = { isPublic = it },
+                    isCollaborating = isCollaborating,
+                    onIsCollaboratingChange = { isCollaborating = it },
+                    imageBase64 = imageBase64,
+                    imagePreviewUrl = imagePreviewUrl,
+                    onPickImage = handleImagePick,
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.End),
+                ) {
+                    OutlineButton(onClick = onDismiss) {
+                        Text("Cancel")
+                    }
+                    PrimaryButton(
+                        onClick = {
+                            onSubmit(currentData)
+                            onDismiss()
+                        },
+                        enabled = name.isNotBlank(),
+                    ) {
+                        Text(if (isEditing) "Save" else "Create")
+                    }
+                }
+                Spacer(modifier = Modifier.height(8.dp))
+            }
+        }
+    }
+}
+
+@Composable
+private fun PlaylistFormFields(
+    name: String,
+    onNameChange: (String) -> Unit,
+    description: String,
+    onDescriptionChange: (String) -> Unit,
+    isPublic: Boolean,
+    onIsPublicChange: (Boolean) -> Unit,
+    isCollaborating: Boolean,
+    onIsCollaboratingChange: (Boolean) -> Unit,
+    imageBase64: String,
+    imagePreviewUrl: String?,
+    onPickImage: () -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        TextField(
+            value = name,
+            onValueChange = onNameChange,
+            modifier = Modifier.fillMaxWidth(),
+            placeholder = { Text("Playlist name") },
+            singleLine = true,
+            label = { Text("Name") },
+        )
+
+        TextField(
+            value = description,
+            onValueChange = onDescriptionChange,
+            modifier = Modifier.fillMaxWidth(),
+            placeholder = { Text("Description (optional)") },
+            maxLines = 3,
+            label = { Text("Description") },
+        )
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(12.dp))
+                .clickable { onIsPublicChange(!isPublic) }
+                .padding(horizontal = 4.dp, vertical = 8.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(modifier = Modifier.weight(1f)) {
+                Text("Public", style = MaterialTheme.typography.bodyLarge)
+                Text(
+                    "Anyone can see this playlist",
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+            Switch(checked = isPublic, onCheckedChange = onIsPublicChange)
+        }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(12.dp))
+                .clickable { onIsCollaboratingChange(!isCollaborating) }
+                .padding(horizontal = 4.dp, vertical = 8.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(modifier = Modifier.weight(1f)) {
+                Text("Collaborative", style = MaterialTheme.typography.bodyLarge)
+                Text(
+                    "Others can add tracks to this playlist",
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+            Switch(checked = isCollaborating, onCheckedChange = onIsCollaboratingChange)
+        }
+
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Text("Cover Image", style = MaterialTheme.typography.bodyLarge)
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Box(
+                    modifier = Modifier
+                        .size(64.dp)
+                        .clip(RoundedCornerShape(8.dp)),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    when {
+                        imagePreviewUrl != null -> AsyncImage(
+                            model = imagePreviewUrl,
+                            contentDescription = "Playlist cover",
+                            modifier = Modifier.size(64.dp),
+                            contentScale = ContentScale.Crop,
+                        )
+                        imageBase64.isNotBlank() -> {
+                            Text(
+                                "✓",
+                                style = MaterialTheme.typography.titleMedium,
+                                color = MaterialTheme.colorScheme.primary,
+                            )
+                        }
+                        else -> {
+                            Text(
+                                "No image",
+                                style = MaterialTheme.typography.labelSmall,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                    }
+                }
+                PrimaryButton(onClick = onPickImage) {
+                    Text(if (imageBase64.isNotBlank() || imagePreviewUrl != null) "Change Image" else "Pick Image")
+                }
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/playlist/AddTracksToPlaylistDialog.kt

@@ -0,0 +1,325 @@
+/*
+ * Copyright (C) 2026 Kingmor Roy Tirtho and Spotube Contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package dev.krtirtho.spotube.modules.playlist
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.track.MetadataTrack
+import dev.krtirtho.spotube.core.ui.base.IconButton
+import dev.krtirtho.spotube.core.ui.base.OutlineButton
+import dev.krtirtho.spotube.core.ui.base.PrimaryButton
+import dev.krtirtho.spotube.core.ui.base.TextField
+import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.modules.search.SearchRepository
+import dev.krtirtho.spotube.resources.iconsax.Iconsax
+import dev.krtirtho.spotube.resources.iconsax.IconsaxCheckCircle
+import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
+import dev.krtirtho.spotube.resources.iconsax.IconsaxSearch
+import kotlinx.coroutines.launch
+import org.koin.compose.koinInject
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddTracksToPlaylistDialog(
+    visible: Boolean,
+    playlistId: String,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+    searchRepository: SearchRepository = koinInject(),
+    libraryRepository: LibraryRepository = koinInject(),
+    breakpointDp: Float = 600f,
+) {
+    if (!visible) return
+
+    val adaptiveInfo = currentWindowAdaptiveInfo()
+    val isLargeScreen = adaptiveInfo.windowSizeClass.minWidthDp >= breakpointDp
+
+    var query by remember { mutableStateOf("") }
+    var searchResults by remember { mutableStateOf<List<MetadataTrack>>(emptyList()) }
+    var isSearching by remember { mutableStateOf(false) }
+    var hasSearched by remember { mutableStateOf(false) }
+    var addingTrackIds by remember { mutableStateOf<Set<String>>(emptySet()) }
+    var addedTrackIds by remember { mutableStateOf<Set<String>>(emptySet()) }
+    val scope = rememberCoroutineScope()
+
+    LaunchedEffect(visible) {
+        if (!visible) {
+            query = ""
+            searchResults = emptyList()
+            hasSearched = false
+            addingTrackIds = emptySet()
+            addedTrackIds = emptySet()
+        }
+    }
+
+    val handleSearch = {
+        if (query.isNotBlank() && !isSearching) {
+            isSearching = true
+            hasSearched = true
+            scope.launch {
+                val result = searchRepository.searchTracks(query)
+                searchResults = result.items.map { it.data }
+                isSearching = false
+            }
+        }
+    }
+
+    val handleAddTrack = { track: MetadataTrack ->
+        if (!addingTrackIds.contains(track.id) && !addedTrackIds.contains(track.id)) {
+            addingTrackIds = addingTrackIds + track.id
+            scope.launch {
+                libraryRepository.addTracksToPlaylist(playlistId, listOf(track.id))
+                addingTrackIds = addingTrackIds - track.id
+                addedTrackIds = addedTrackIds + track.id
+            }
+        }
+    }
+
+    val content: @Composable () -> Unit = {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                TextField(
+                    value = query,
+                    onValueChange = { query = it },
+                    modifier = Modifier.weight(1f),
+                    placeholder = { Text("Search tracks...") },
+                    singleLine = true,
+                    leadingIcon = {
+                        Icon(
+                            imageVector = Iconsax.IconsaxFilterSearch,
+                            contentDescription = "Search",
+                        )
+                    },
+                )
+                IconButton(onClick = handleSearch) {
+                    Icon(
+                        imageVector = Iconsax.IconsaxSearch,
+                        contentDescription = "Search",
+                    )
+                }
+            }
+
+            when {
+                isSearching -> {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .weight(1f),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        CircularProgressIndicator()
+                    }
+                }
+                hasSearched && searchResults.isEmpty() -> {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .weight(1f),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Text("No tracks found")
+                    }
+                }
+                searchResults.isNotEmpty() -> {
+                    LazyColumn(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .weight(1f),
+                        verticalArrangement = Arrangement.spacedBy(4.dp),
+                    ) {
+                        items(searchResults, key = { it.id }) { track ->
+                            TrackSearchResultRow(
+                                track = track,
+                                isAdding = addingTrackIds.contains(track.id),
+                                isAdded = addedTrackIds.contains(track.id),
+                                onAdd = { handleAddTrack(track) },
+                            )
+                        }
+                    }
+                }
+                else -> {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .weight(1f),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Text("Search for tracks to add")
+                    }
+                }
+            }
+        }
+    }
+
+    if (isLargeScreen) {
+        AlertDialog(
+            onDismissRequest = onDismiss,
+            modifier = modifier,
+            title = {
+                Text("Add Tracks to Playlist")
+            },
+            text = {
+                Box(modifier = Modifier.fillMaxWidth().height(500.dp)) {
+                    content()
+                }
+            },
+            confirmButton = {
+                PrimaryButton(onClick = onDismiss) {
+                    Text("Done")
+                }
+            },
+        )
+    } else {
+        ModalBottomSheet(
+            onDismissRequest = onDismiss,
+            dragHandle = null,
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 8.dp)
+                    .height(600.dp),
+            ) {
+                Text(
+                    text = "Add Tracks to Playlist",
+                    style = MaterialTheme.typography.headlineSmall,
+                    modifier = Modifier.padding(bottom = 16.dp),
+                )
+                content()
+            }
+        }
+    }
+}
+
+@Composable
+private fun TrackSearchResultRow(
+    track: MetadataTrack,
+    isAdding: Boolean,
+    isAdded: Boolean,
+    onAdd: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(8.dp))
+            .padding(horizontal = 8.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        val imageUrl = track.album?.thumbnails?.firstOrNull()?.url
+        if (imageUrl != null) {
+            AsyncImage(
+                model = imageUrl,
+                contentDescription = track.title,
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(RoundedCornerShape(6.dp)),
+                contentScale = ContentScale.Crop,
+            )
+        } else {
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(RoundedCornerShape(6.dp)),
+                contentAlignment = Alignment.Center,
+            ) {
+                Text(
+                    text = track.title.take(1).uppercase(),
+                    style = MaterialTheme.typography.titleMedium,
+                )
+            }
+        }
+
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = track.title,
+                style = MaterialTheme.typography.bodyLarge,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Text(
+                text = track.artists.joinToString(", ") { it.name },
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+
+        when {
+            isAdded -> {
+                Icon(
+                    imageVector = Iconsax.IconsaxCheckCircle,
+                    contentDescription = "Added",
+                    tint = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.size(24.dp),
+                )
+            }
+            isAdding -> {
+                CircularProgressIndicator(
+                    modifier = Modifier.size(24.dp),
+                    strokeWidth = 2.dp,
+                )
+            }
+            else -> {
+                OutlineButton(onClick = onAdd) {
+                    Text("Add")
+                }
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/playlist/PlaylistScreen.kt

@@ -17,11 +17,21 @@
 
 package dev.krtirtho.spotube.modules.playlist
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.track.MetadataTrack
 import dev.krtirtho.spotube.core.audioplayer.AudioPlayer
@@ -31,6 +41,7 @@ import dev.krtirtho.spotube.core.audioplayer.QueueEntry
 import dev.krtirtho.spotube.core.navigation.NavigationCommands
 import dev.krtirtho.spotube.core.navigation.Routes
 import dev.krtirtho.spotube.core.share.ShareService
+import dev.krtirtho.spotube.core.ui.base.OutlineButton
 import dev.krtirtho.spotube.core.ui.component.ApplicationMainBar
 import dev.krtirtho.spotube.core.ui.component.CollectionDetails
 import dev.krtirtho.spotube.core.ui.component.ErrorDisplay
@@ -40,6 +51,13 @@ import dev.krtirtho.spotube.core.ui.component.TrackOptionsState
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
 import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.modules.library.playlist.AddToPlaylistPicker
+import dev.krtirtho.spotube.modules.library.playlist.PlaylistFormData
+import dev.krtirtho.spotube.modules.library.playlist.PlaylistFormSheet
+import dev.krtirtho.spotube.modules.playlist.AddTracksToPlaylistDialog
+import dev.krtirtho.spotube.resources.iconsax.Iconsax
+import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
+import kotlinx.coroutines.launch
 import org.koin.compose.koinInject
 import org.koin.compose.viewmodel.koinViewModel
 import org.koin.core.parameter.parametersOf
@@ -50,6 +68,8 @@ fun PlaylistScreen(playlistId: String) {
     val audioPlayer: AudioPlayer = koinInject()
     val shareService: ShareService = koinInject()
     val downloadsViewModel: DownloadsViewModel = koinViewModel()
+    val libraryRepository: LibraryRepository = koinInject()
+    val scope = rememberCoroutineScope()
     val viewModel = koinViewModel<PlaylistViewModel>(
         key = playlistId,
         parameters = { parametersOf(playlistId) }
@@ -61,6 +81,11 @@ fun PlaylistScreen(playlistId: String) {
     val currentCollectionEntry by audioPlayerQueue.currentCollectionEntryFlow.collectAsStateWithLifecycle()
     val playerState by audioPlayer.playerStateFlow.collectAsStateWithLifecycle()
     val savedPlaylistIds by viewModel.savedPlaylistIds.collectAsStateWithLifecycle()
+    val currentUserId by viewModel.currentUserId.collectAsStateWithLifecycle()
+    var showEditPlaylist by remember { mutableStateOf(false) }
+    var showAddToPlaylistPicker by remember { mutableStateOf(false) }
+    var showAddTracksDialog by remember { mutableStateOf(false) }
+    var tracksToAddToPlaylist by remember { mutableStateOf<List<MetadataTrack>>(emptyList()) }
 
     fun handleTrackOptionsAction(track: MetadataTrack, action: TrackOptionsAction) {
         viewModel.handleTrackOptionsAction(track, action)
@@ -73,6 +98,10 @@ fun PlaylistScreen(playlistId: String) {
         if (action is TrackOptionsAction.Download) {
             downloadsViewModel.downloadTrack(track)
         }
+        if (action is TrackOptionsAction.AddToPlaylist) {
+            tracksToAddToPlaylist = listOf(track)
+            showAddToPlaylistPicker = true
+        }
     }
 
     Scaffold(
@@ -131,6 +160,8 @@ fun PlaylistScreen(playlistId: String) {
                 val ownerName = owner?.displayName ?: owner?.username ?: "Unknown"
                 val ownerImageURL = owner?.thumbnails?.firstOrNull()?.url
 
+                val isOwner = currentUserId != null && playlist?.owner?.id == currentUserId
+
                 val savedTrackIds by viewModel.savedTrackIds.collectAsStateWithLifecycle()
 
 
@@ -166,8 +197,27 @@ fun PlaylistScreen(playlistId: String) {
                             isFollowing = savedPlaylistIds.contains(playlistId),
                             onFollowClick = viewModel::toggleSavedPlaylist,
                             showFollowButton = playlistId != "saved_tracks",
+                            onEdit = if (isOwner) { { showEditPlaylist = true } } else null,
                         )
                     },
+                    footerContent = if (isOwner) {
+                        {
+                            Row(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(vertical = 16.dp),
+                                horizontalArrangement = Arrangement.Center,
+                            ) {
+                                OutlineButton(onClick = { showAddTracksDialog = true }) {
+                                    Icon(
+                                        imageVector = Iconsax.IconsaxAddSquare,
+                                        contentDescription = null,
+                                    )
+                                    Text("Add Tracks", modifier = Modifier.padding(start = 8.dp))
+                                }
+                            }
+                        }
+                    } else null,
                     tracks = dataState.tracks,
                     error = null,
                     hasMore = dataState.nextPagination != null,
@@ -190,8 +240,61 @@ fun PlaylistScreen(playlistId: String) {
                     onBulkPlayNext = { tracks ->
                         viewModel.playTracksNext(tracks)
                     },
+                    onBulkAddToPlaylist = { tracks ->
+                        tracksToAddToPlaylist = tracks
+                        showAddToPlaylistPicker = true
+                    },
                 )
             }
         }
+
+        val dataState = state as? PlaylistScreenState.Data
+        val playlist = (dataState as? PlaylistScreenState.Data.Loaded)?.playlist
+        PlaylistFormSheet(
+            visible = showEditPlaylist,
+            onDismiss = { showEditPlaylist = false },
+            isEditing = true,
+            initialData = playlist?.let {
+                PlaylistFormData(
+                    name = it.title,
+                    description = it.description.orEmpty(),
+                    isPublic = true,
+                    isCollaborating = false,
+                    imagePreviewUrl = it.thumbnails.firstOrNull()?.url,
+                )
+            },
+            onSubmit = { data ->
+                viewModel.updatePlaylist(
+                    name = data.name,
+                    description = data.description.ifBlank { null },
+                    isPublic = data.isPublic,
+                    isCollaborating = data.isCollaborating,
+                    imageBase64 = data.imageBase64.ifBlank { null },
+                )
+            },
+        )
+
+        AddToPlaylistPicker(
+            visible = showAddToPlaylistPicker,
+            currentUserId = currentUserId,
+            onDismiss = { showAddToPlaylistPicker = false },
+            onPlaylistSelected = { selectedPlaylistId ->
+                scope.launch {
+                    libraryRepository.addTracksToPlaylist(
+                        selectedPlaylistId,
+                        tracksToAddToPlaylist.map { it.id }
+                    )
+                }
+            },
+        )
+
+        AddTracksToPlaylistDialog(
+            visible = showAddTracksDialog,
+            playlistId = playlistId,
+            onDismiss = {
+                showAddTracksDialog = false
+                viewModel.refresh()
+            },
+        )
     }
 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/playlist/PlaylistViewModel.kt

@@ -94,6 +94,9 @@ class PlaylistViewModel(
     val savedPlaylistIds
         get() = libraryRepository.savedPlaylistIdsFlow
 
+    private val _currentUserId = MutableStateFlow<String?>(null)
+    val currentUserId: StateFlow<String?> = _currentUserId.asStateFlow()
+
     init {
         viewModelScope.launch {
             repository.pluginManager.selectedMetadataPlugin
@@ -102,10 +105,15 @@ class PlaylistViewModel(
                 .distinctUntilChanged()
                 .collect {
                     loadInitialData()
+                    loadCurrentUser()
                 }
         }
     }
 
+    private suspend fun loadCurrentUser() {
+        _currentUserId.value = libraryRepository.currentUser()?.id
+    }
+
     private suspend fun loadInitialData() = runCatching {
         _state.value = PlaylistScreenState.Loading
         val playlistInfo = repository.getPlaylistInfo(playlistId)
@@ -179,6 +187,33 @@ class PlaylistViewModel(
         }
     }
 
+    fun updatePlaylist(
+        name: String?,
+        description: String?,
+        isPublic: Boolean?,
+        isCollaborating: Boolean?,
+        imageBase64: String?,
+    ) {
+        viewModelScope.launch {
+            runCatching {
+                libraryRepository.updatePlaylist(
+                    id = playlistId,
+                    name = name,
+                    description = description,
+                    isPublic = isPublic,
+                    isCollaborating = isCollaborating,
+                    imageBase64 = imageBase64,
+                    trackIds = null,
+                )
+            }.onFailure { e ->
+                logger.e(e) { "Failed to update playlist" }
+            }.onSuccess {
+                repository.invalidateCaches()
+                loadInitialData()
+            }
+        }
+    }
+
     fun handleTrackOptionsAction(track: MetadataTrack, action: TrackOptionsAction) {
         viewModelScope.launch {
             when (action) {
@@ -224,6 +259,7 @@ class PlaylistViewModel(
                 is TrackOptionsAction.Download -> {}
                 is TrackOptionsAction.ToggleBlacklist -> {}
                 is TrackOptionsAction.Share -> {}
+                is TrackOptionsAction.AddToPlaylist -> {}
             }
         }
     }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/saved_tracks/SavedTracksScreen.kt

@@ -20,7 +20,12 @@ package dev.krtirtho.spotube.modules.saved_tracks
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.track.MetadataTrack
@@ -40,6 +45,9 @@ import dev.krtirtho.spotube.core.ui.component.TrackOptionsAction
 import dev.krtirtho.spotube.core.ui.component.TrackOptionsState
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
+import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.modules.library.playlist.AddToPlaylistPicker
+import kotlinx.coroutines.launch
 import org.jetbrains.compose.resources.DrawableResource
 import org.koin.compose.koinInject
 import org.koin.compose.viewmodel.koinViewModel
@@ -53,6 +61,8 @@ fun SavedTracksScreen() {
     val audioPlayer: AudioPlayer = koinInject()
     val shareService: ShareService = koinInject()
     val downloadsViewModel: DownloadsViewModel = koinViewModel()
+    val libraryRepository: LibraryRepository = koinInject()
+    val scope = rememberCoroutineScope()
     val viewModel = koinViewModel<SavedTracksViewModel>(
         key = SAVED_TRACKS_COLLECTION_ID,
         parameters = { parametersOf() }
@@ -63,6 +73,13 @@ fun SavedTracksScreen() {
     val currentQueueEntry by audioPlayerQueue.currentQueueEntryFlow.collectAsStateWithLifecycle()
     val currentCollectionEntry by audioPlayerQueue.currentCollectionEntryFlow.collectAsStateWithLifecycle()
     val playerState by audioPlayer.playerStateFlow.collectAsStateWithLifecycle()
+    var showAddToPlaylistPicker by remember { mutableStateOf(false) }
+    var tracksToAddToPlaylist by remember { mutableStateOf<List<MetadataTrack>>(emptyList()) }
+    var currentUserId by remember { mutableStateOf<String?>(null) }
+
+    LaunchedEffect(Unit) {
+        currentUserId = libraryRepository.currentUser()?.id
+    }
 
     fun getTrackOptionsState(track: MetadataTrack): TrackOptionsState {
         val currentTrackId = (currentQueueEntry as? QueueEntry.StreamingTrack)?.track?.id
@@ -88,6 +105,10 @@ fun SavedTracksScreen() {
         if (action is TrackOptionsAction.Download) {
             downloadsViewModel.downloadTrack(track)
         }
+        if (action is TrackOptionsAction.AddToPlaylist) {
+            tracksToAddToPlaylist = listOf(track)
+            showAddToPlaylistPicker = true
+        }
     }
 
     Scaffold(
@@ -187,8 +208,26 @@ fun SavedTracksScreen() {
                     onBulkPlayNext = { tracks ->
                         viewModel.playTracksNext(tracks)
                     },
+                    onBulkAddToPlaylist = { tracks ->
+                        tracksToAddToPlaylist = tracks
+                        showAddToPlaylistPicker = true
+                    },
                 )
             }
         }
+
+        AddToPlaylistPicker(
+            visible = showAddToPlaylistPicker,
+            currentUserId = currentUserId,
+            onDismiss = { showAddToPlaylistPicker = false },
+            onPlaylistSelected = { playlistId ->
+                scope.launch {
+                    libraryRepository.addTracksToPlaylist(
+                        playlistId,
+                        tracksToAddToPlaylist.map { it.id }
+                    )
+                }
+            },
+        )
     }
 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/saved_tracks/SavedTracksViewModel.kt

@@ -197,6 +197,7 @@ class SavedTracksViewModel(
                 is TrackOptionsAction.Download -> {}
                 is TrackOptionsAction.ToggleBlacklist -> {}
                 is TrackOptionsAction.Share -> {}
+                is TrackOptionsAction.AddToPlaylist -> {}
             }
         }
     }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/search/SearchScreen.kt

@@ -57,8 +57,10 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -97,6 +99,8 @@ import dev.krtirtho.spotube.core.ui.component.UserCard
 import dev.krtirtho.spotube.core.ui.component.cards.PlayableCard
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
+import dev.krtirtho.spotube.modules.library.LibraryRepository
+import dev.krtirtho.spotube.modules.library.playlist.AddToPlaylistPicker
 import dev.krtirtho.spotube.modules.shell.LocalAppShellBottomInset
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxSearchBroken
@@ -115,10 +119,18 @@ fun SearchScreen(viewModel: SearchScreenViewModel = koinViewModel()) {
     val audioPlayerQueue: AudioPlayerQueue = koinInject()
     val shareService: ShareService = koinInject()
     val downloadsViewModel: DownloadsViewModel = koinViewModel()
+    val libraryRepository: LibraryRepository = koinInject()
     val state by viewModel.state.collectAsStateWithLifecycle()
     val selectedType = state.selectedSearchType
     val scope = rememberCoroutineScope()
     val savedTrackIds by viewModel.savedTrackIds.collectAsStateWithLifecycle()
+    var showAddToPlaylistPicker by remember { mutableStateOf(false) }
+    var tracksToAddToPlaylist by remember { mutableStateOf<List<MetadataTrack>>(emptyList()) }
+    var currentUserId by remember { mutableStateOf<String?>(null) }
+
+    LaunchedEffect(Unit) {
+        currentUserId = libraryRepository.currentUser()?.id
+    }
 
     val focusManager = LocalFocusManager.current
 
@@ -175,6 +187,10 @@ fun SearchScreen(viewModel: SearchScreenViewModel = koinViewModel()) {
                         shareService.share(uri, track.title)
                     }
                 }
+                is TrackOptionsAction.AddToPlaylist -> {
+                    tracksToAddToPlaylist = listOf(track)
+                    showAddToPlaylistPicker = true
+                }
             }
         }
     }
@@ -295,6 +311,10 @@ fun SearchScreen(viewModel: SearchScreenViewModel = koinViewModel()) {
                         onBulkDownload = { tracks -> downloadsViewModel.downloadTracks(tracks) },
                         onBulkAddToQueue = ::bulkAddToQueue,
                         onBulkPlayNext = ::bulkPlayNext,
+                        onBulkAddToPlaylist = { tracks ->
+                            tracksToAddToPlaylist = tracks
+                            showAddToPlaylistPicker = true
+                        },
                         modifier = Modifier
                             .fillMaxSize(),
                     )
@@ -311,6 +331,10 @@ fun SearchScreen(viewModel: SearchScreenViewModel = koinViewModel()) {
                         onBulkDownload = { tracks -> downloadsViewModel.downloadTracks(tracks) },
                         onBulkAddToQueue = ::bulkAddToQueue,
                         onBulkPlayNext = ::bulkPlayNext,
+                        onBulkAddToPlaylist = { tracks ->
+                            tracksToAddToPlaylist = tracks
+                            showAddToPlaylistPicker = true
+                        },
                         modifier = Modifier
                             .fillMaxSize(),
                     )
@@ -357,6 +381,20 @@ fun SearchScreen(viewModel: SearchScreenViewModel = koinViewModel()) {
                 }
             }
         }
+
+        AddToPlaylistPicker(
+            visible = showAddToPlaylistPicker,
+            currentUserId = currentUserId,
+            onDismiss = { showAddToPlaylistPicker = false },
+            onPlaylistSelected = { playlistId ->
+                scope.launch {
+                    libraryRepository.addTracksToPlaylist(
+                        playlistId,
+                        tracksToAddToPlaylist.map { it.id }
+                    )
+                }
+            },
+        )
     }
 }
 
@@ -568,6 +606,7 @@ private fun SearchAllTab(
     onBulkDownload: (List<MetadataTrack>) -> Unit,
     onBulkAddToQueue: (List<MetadataTrack>) -> Unit,
     onBulkPlayNext: (List<MetadataTrack>) -> Unit,
+    onBulkAddToPlaylist: (List<MetadataTrack>) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     if (query.isBlank()) {
@@ -621,6 +660,7 @@ private fun SearchAllTab(
         onBulkDownload = onBulkDownload,
         onBulkAddToQueue = onBulkAddToQueue,
         onBulkPlayNext = onBulkPlayNext,
+        onBulkAddToPlaylist = onBulkAddToPlaylist,
         contentPadding = PaddingValues(top = 12.dp, bottom = 16.dp + bottomInset),
         headerContent = {
             if (showTracks) {
@@ -704,6 +744,7 @@ private fun SearchTracksTab(
     onBulkDownload: (List<MetadataTrack>) -> Unit,
     onBulkAddToQueue: (List<MetadataTrack>) -> Unit,
     onBulkPlayNext: (List<MetadataTrack>) -> Unit,
+    onBulkAddToPlaylist: (List<MetadataTrack>) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     if (query.isBlank()) {
@@ -729,6 +770,7 @@ private fun SearchTracksTab(
         onBulkDownload = onBulkDownload,
         onBulkAddToQueue = onBulkAddToQueue,
         onBulkPlayNext = onBulkPlayNext,
+        onBulkAddToPlaylist = onBulkAddToPlaylist,
         simplified = true,
         modifier = modifier,
     )

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppBottombar.kt

@@ -91,7 +91,7 @@ fun AppBottombar(
                             contentDescription = label,
                             tint = if (selected) MaterialTheme.colorScheme.primary
                             else MaterialTheme.colorScheme.onSurfaceVariant,
-                            modifier = Modifier.size(20.dp),
+                            modifier = Modifier.size(20.dp)
                         )
                         if (screen == Routes.Library) {
                             DownloadBadgeIndicator(

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppFloatingPlayer.kt

@@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -33,10 +34,8 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedIconButton
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -69,6 +68,9 @@ import org.koin.compose.koinInject
 import org.koin.compose.viewmodel.koinViewModel
 import org.koin.core.parameter.parametersOf
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import dev.krtirtho.spotube.core.ui.base.BaseUITheme
+import dev.krtirtho.spotube.core.ui.base.IconButton
+import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
 
 // The floating player on small screens that appears above the floating AppBottombar
 //
@@ -185,15 +187,17 @@ fun AppFloatingPlayer(
                         audioPlayerQueue = audioPlayerQueue,
                         savedTracksViewModel = savedTracksViewModel,
                     )
-                    OutlinedIconButton(
+                    Spacer(modifier = Modifier.size(8.dp))
+                    IconButton(
                         onClick = ::onPlayPause,
-                        enabled = playerUiState.queue.isNotEmpty()
+                        enabled = playerUiState.queue.isNotEmpty(),
+                        theme = LocalBaseUITheme.current.iconButtons.outline.copy(
+                            shape = BaseUITheme.InteractionState.fromSingleValue(CircleShape)
+                        )
                     ) {
                         Icon(
                             if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay,
                             contentDescription = if (playerUiState.isPlaying) "Pause" else "Play",
-                            modifier = Modifier.size(20.dp),
-                            tint = MaterialTheme.colorScheme.inverseOnSurface,
                         )
                     }
                 }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppSidebar.kt

@@ -22,7 +22,6 @@ import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -40,18 +39,22 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import dev.krtirtho.spotube.core.navigation.NavigationState
 import dev.krtirtho.spotube.core.navigation.Navigator
 import dev.krtirtho.spotube.core.navigation.Routes
+import dev.krtirtho.spotube.core.ui.base.GhostIconButton
 import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
 import dev.krtirtho.spotube.core.ui.base.OutlineButton
 import dev.krtirtho.spotube.core.ui.base.SecondaryButton
@@ -63,7 +66,10 @@ import dev.krtirtho.spotube.resources.iconsax.Iconsax
 import dev.krtirtho.spotube.resources.iconsax.IconsaxSidebarLeftBroken
 import dev.krtirtho.spotube.resources.iconsax.IconsaxSidebarRightBroken
 import dev.krtirtho.spotube.tabs
+import org.jetbrains.compose.resources.Font
 import org.koin.compose.koinInject
+import spotube.composeapp.generated.resources.Res
+import spotube.composeapp.generated.resources.cookie_regular
 
 @Composable
 fun AppSidebar(
@@ -93,19 +99,26 @@ fun AppSidebar(
             AnimatedVisibility(visible = expanded, enter = fadeIn(), exit = fadeOut()) {
                 Text(
                     text = "Spotube",
-                    style = MaterialTheme.typography.titleMedium,
+                    style = MaterialTheme.typography.headlineLarge.copy(
+                        fontFamily = FontFamily(
+                            listOf(
+                                Font(Res.font.cookie_regular, weight = FontWeight.Normal)
+                            )
+                        )
+                    ),
                     color = MaterialTheme.colorScheme.onSurface
                 )
             }
+            GhostIconButton(
+                onClick = { expanded = !expanded }
+            ) {
                 Icon(
                     imageVector = if (expanded) Iconsax.IconsaxSidebarLeftBroken else Iconsax.IconsaxSidebarRightBroken,
                     contentDescription = if (expanded) "Collapse sidebar" else "Expand sidebar",
                     tint = MaterialTheme.colorScheme.onSurfaceVariant,
-                modifier = Modifier
-                    .size(22.dp)
-                    .clickable { expanded = !expanded }
                 )
             }
+        }
 
         Spacer(modifier = Modifier.height(8.dp))
 
@@ -189,7 +202,7 @@ fun SidebarItem(
                 },
             )
         }
-        Spacer(modifier = Modifier.weight(if (expanded) 1f else 0f))
+        Spacer(modifier = if (expanded) Modifier.weight(1f) else Modifier)
     }
 
     val buttonModifier = Modifier

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/resources/iconsax/Iconsax.kt

@@ -1,20 +1,3 @@
-/*
- * Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
 package dev.krtirtho.spotube.resources.iconsax
 
 object Iconsax

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/resources/iconsax/IconsaxEdit.kt

@@ -0,0 +1,92 @@
+package dev.krtirtho.spotube.resources.iconsax
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.PathData
+import androidx.compose.ui.graphics.vector.group
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+val Iconsax.IconsaxEdit: ImageVector
+    get() {
+        if (_IconsaxEdit != null) {
+            return _IconsaxEdit!!
+        }
+        _IconsaxEdit = ImageVector.Builder(
+            name = "IconsaxEdit",
+            defaultWidth = 24.dp,
+            defaultHeight = 24.dp,
+            viewportWidth = 24f,
+            viewportHeight = 24f
+        ).apply {
+            group(
+                clipPathData = PathData {
+                    moveTo(0f, 0f)
+                    horizontalLineToRelative(24f)
+                    verticalLineToRelative(24f)
+                    horizontalLineToRelative(-24f)
+                    close()
+                }
+            ) {
+                path(
+                    fill = SolidColor(Color.White),
+                    fillAlpha = 0.4f,
+                    strokeAlpha = 0.4f
+                ) {
+                    moveTo(15.48f, 3f)
+                    horizontalLineTo(7.52f)
+                    curveTo(4.07f, 3f, 2f, 5.06f, 2f, 8.52f)
+                    verticalLineTo(16.47f)
+                    curveTo(2f, 19.94f, 4.07f, 22f, 7.52f, 22f)
+                    horizontalLineTo(15.47f)
+                    curveTo(18.93f, 22f, 20.99f, 19.94f, 20.99f, 16.48f)
+                    verticalLineTo(8.52f)
+                    curveTo(21f, 5.06f, 18.93f, 3f, 15.48f, 3f)
+                    close()
+                }
+                path(fill = SolidColor(Color.White)) {
+                    moveTo(21.02f, 2.98f)
+                    curveTo(19.23f, 1.18f, 17.48f, 1.14f, 15.64f, 2.98f)
+                    lineTo(14.51f, 4.1f)
+                    curveTo(14.41f, 4.2f, 14.38f, 4.34f, 14.42f, 4.47f)
+                    curveTo(15.12f, 6.92f, 17.08f, 8.88f, 19.53f, 9.58f)
+                    curveTo(19.56f, 9.59f, 19.61f, 9.59f, 19.64f, 9.59f)
+                    curveTo(19.74f, 9.59f, 19.84f, 9.55f, 19.91f, 9.48f)
+                    lineTo(21.02f, 8.36f)
+                    curveTo(21.93f, 7.45f, 22.38f, 6.58f, 22.38f, 5.69f)
+                    curveTo(22.38f, 4.79f, 21.93f, 3.9f, 21.02f, 2.98f)
+                    close()
+                }
+                path(fill = SolidColor(Color.White)) {
+                    moveTo(17.86f, 10.42f)
+                    curveTo(17.59f, 10.29f, 17.33f, 10.16f, 17.09f, 10.01f)
+                    curveTo(16.89f, 9.89f, 16.69f, 9.76f, 16.5f, 9.62f)
+                    curveTo(16.34f, 9.52f, 16.16f, 9.37f, 15.98f, 9.22f)
+                    curveTo(15.96f, 9.21f, 15.9f, 9.16f, 15.82f, 9.08f)
+                    curveTo(15.51f, 8.83f, 15.18f, 8.49f, 14.87f, 8.12f)
+                    curveTo(14.85f, 8.1f, 14.79f, 8.04f, 14.74f, 7.95f)
+                    curveTo(14.64f, 7.84f, 14.49f, 7.65f, 14.36f, 7.44f)
+                    curveTo(14.25f, 7.3f, 14.12f, 7.1f, 14f, 6.89f)
+                    curveTo(13.85f, 6.64f, 13.72f, 6.39f, 13.6f, 6.13f)
+                    curveTo(13.47f, 5.85f, 13.37f, 5.59f, 13.28f, 5.34f)
+                    lineTo(7.9f, 10.72f)
+                    curveTo(7.55f, 11.07f, 7.21f, 11.73f, 7.14f, 12.22f)
+                    lineTo(6.71f, 15.2f)
+                    curveTo(6.62f, 15.83f, 6.79f, 16.42f, 7.18f, 16.81f)
+                    curveTo(7.51f, 17.14f, 7.96f, 17.31f, 8.46f, 17.31f)
+                    curveTo(8.57f, 17.31f, 8.68f, 17.3f, 8.79f, 17.29f)
+                    lineTo(11.76f, 16.87f)
+                    curveTo(12.25f, 16.8f, 12.91f, 16.47f, 13.26f, 16.11f)
+                    lineTo(18.64f, 10.73f)
+                    curveTo(18.39f, 10.65f, 18.14f, 10.54f, 17.86f, 10.42f)
+                    close()
+                }
+            }
+        }.build()
+
+        return _IconsaxEdit!!
+    }
+
+@Suppress("ObjectPropertyName")
+private var _IconsaxEdit: ImageVector? = null

js_plugin_example/src/jsMain/kotlin/dev/krtirtho/js_plugin_example/plugin_apis/metadata/FakeMetadataStore.kt

@@ -104,6 +104,8 @@ object FakeMetadataStore {
 
     fun getUser(id: String): MetadataUser? = users[id]?.toModel()
 
+    fun getCurrentUser(): MetadataUser? = users[CURRENT_USER_ID]?.toModel()
+
     fun getTrack(id: String): MetadataTrack = tracks[id]?.toModel()
         ?: error("Track not found: $id")
 

js_plugin_example/src/jsMain/kotlin/dev/krtirtho/js_plugin_example/plugin_apis/metadata/RealMetadataUserAPI.kt

@@ -23,4 +23,8 @@ class RealMetadataUserAPI : MetadataUserAPI {
     override suspend fun getUser(id: String): MetadataUser? {
         return FakeMetadataStore.getUser(id)
     }
+
+    override suspend fun me(): MetadataUser? {
+        return FakeMetadataStore.getCurrentUser()
+    }
 }