beginning to implement sidebar

src/components/Main.vue

@@ -16,29 +16,52 @@
 				:station-data="tableData"
 				:favorites="favorites"
 				@doPlay="doPlay"
-				@doFavor="doFavor" />
+				@doFavor="doFavor"
+				@toggleSidebar="toggleSidebar" />
 			<EmptyContent
 				v-if="pageLoading"
 				icon="icon-loading" />
-			<EmptyContent
-				v-if="tableData.length === 0 && !pageLoading"
-				v-show="$route.name==='FAVORITES'"
-				icon="icon-star">
-				No favorites yet
-				<template #desc>
-					Stations you mark as favorite will show up here
-				</template>
-			</EmptyContent>
-			<EmptyContent
-				v-if="tableData.length === 0 && !pageLoading"
-				v-show="$route.name==='SEARCH'"
-				icon="icon-search">
-				No search results
-				<template #desc>
-					No stations were found matching your search term
-				</template>
-			</EmptyContent>
+			<template
+				v-if="tableData.length === 0 && !pageLoading">
+				<EmptyContent
+					v-show="$route.name==='FAVORITES'"
+					icon="icon-star">
+					No favorites yet
+					<template #desc>
+						Stations you mark as favorite will show up here
+					</template>
+				</EmptyContent>
+				<EmptyContent
+					v-if="tableData.length === 0 && !pageLoading"
+					v-show="$route.name==='SEARCH'"
+					icon="icon-search">
+					No search results
+					<template #desc>
+						No stations were found matching your search term
+					</template>
+				</EmptyContent>
+			</template>
 		</AppContent>
+		<AppSidebar v-show="showSidebar"
+			:title="sidebarStation.name"
+			:subtitle="stationTags"
+			@close="showSidebar=false">
+			<div>
+				<h3><span class="icon-tag" /> {{ t('radio', 'Stream URL') }}</h3>
+				<Multiselect
+					class="sidebar__tags"
+					:value="tags"
+					:auto-limit="false"
+					:limit="7"
+					:options="allTags"
+					:multiple="true"
+					:taggable="true"
+					:placeholder="t('bookmarks', 'Select tags and create new ones')"
+					:disabled="!isEditable"
+					@input="onTagsChange"
+					@tag="onAddTag" />
+			</div>
+		</AppSidebar>
 	</Content>
 </template>
 
@@ -48,6 +71,8 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
 import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
+import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
 import Navigation from './Navigation'
 import Table from './Table'
 import { Howl } from 'howler'
@@ -68,17 +93,27 @@ export default {
 		Breadcrumb,
 		Table,
 		EmptyContent,
+		AppSidebar,
+		AppSidebarTab,
 	},
 	data: () => ({
 		tableData: [],
 		pageLoading: false,
 		blurHashes: require('../assets/blurHashes.json'),
 		favorites: null,
+		showSidebar: false,
+		sidebarStation: [],
 	}),
 	computed: {
 		player() {
 			return this.$store.state.player
 		},
+		stationTags() {
+			if (this.sidebarStation.tags) {
+				return this.sidebarStation.tags.replaceAll(',', ', ')
+			}
+			return ''
+		},
 	},
 	watch: {
 		$route: 'onRoute',
@@ -331,6 +366,11 @@ export default {
 					vm.favorites = favorites
 				})
 		},
+
+		toggleSidebar(station) {
+			this.showSidebar = true
+			this.sidebarStation = station
+		},
 	},
 }
 </script>

src/components/Table.vue

@@ -44,7 +44,10 @@
 							@click="doFavor(idx, station)">
 							{{ t('radio', 'Remove from favorites') }}
 						</ActionButton>
-						<ActionButton icon="icon-info" :close-after-click="true">
+						<ActionButton
+							icon="icon-info"
+							:close-after-click="true"
+							@click="toggleSidebar(station)">
 							{{ t('radio', 'Details') }}
 						</ActionButton>
 					</Actions>
@@ -85,6 +88,9 @@ export default {
 		doFavor(idx, station) {
 			this.$emit('doFavor', station)
 		},
+		toggleSidebar(station) {
+			this.$emit('toggleSidebar', station)
+		},
 	},
 }
 </script>