Project controller design

src/components/CassetteActionsBar.vue

@@ -33,7 +33,11 @@ function removeSource(sourceId: string) {
 const sources = computed(() => {
   return Object.entries(projectStore.sources).map(([id, source]) => ({
     id,
-    name: source.name
+    name: source.name,
+    icon: source.type === "playlist" ? "mdi-playlist-music" : source.type === "album" ? "mdi-album" : "mdi-file",
+    url: source.original_item_url,
+    owner: source.owner_display_name,
+    owner_url: source.owner_url,
   }))
 })
 
@@ -43,9 +47,11 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
 
 <template>
   <v-app-bar class="included pa-1" flat color="transparent">
+    <!-- Open side menu button -->
     <template v-slot:append>
       <v-btn @click="projectStore.drawerOpen = !projectStore.drawerOpen" stacked>
-        <v-badge v-if="menuBadgeContent" color="secondary" :content="menuBadgeContent" location="top left" :offset-x="-5">
+        <v-badge v-if="menuBadgeContent" color="secondary" :content="menuBadgeContent" location="top left"
+          :offset-x="-5">
           <v-icon :icon="menuIcon" />
         </v-badge>
         <v-icon v-else :icon="menuIcon" />
@@ -60,31 +66,35 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
         <!-- Add items -->
         <add-source-dialog />
 
-        <!-- Remove items -->
+        <!-- Sources -->
         <v-select :items="sources" item-value="id" item-title="name" label="Sources" chips multiple density="compact"
           variant="outlined" hide-details v-model="projectStore.selectedSources"
-          @update:modelValue="layoutStore.calculateLayoutDebounced" :disabled="!projectStore.hasSources">
+          @update:modelValue="layoutStore.calculateLayoutDebounced" :disabled="!projectStore.hasSources"
+          min-width="200">
+          <template v-slot:chip="{ props: itemProps, item }">
+            <v-chip v-bind="itemProps" :title="item.raw.name" size="small" class="text-truncate"
+              :prepend-icon="item.raw.icon" max-width="100"/>
+          </template>
           <template v-slot:item="{ props: itemProps, item }">
-            <v-list-item v-bind="itemProps" :title="item.raw.name">
+            <v-list-item v-bind="itemProps">
+              <v-list-item-subtitle class="text-truncate">
+                <a :href="item.raw.owner_url" target="_blank" @click.stop="" style="text-decoration: underline; color: black;">{{ item.raw.owner }}</a>
+              </v-list-item-subtitle>
               <template v-slot:prepend="{ isSelected, select }">
                 <v-list-item-action start>
                   <v-checkbox-btn :model-value="isSelected" @update:model-value="select"></v-checkbox-btn>
                 </v-list-item-action>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-playlist-remove" size="small" variant="text" @click.stop="removeSource(item.raw.id)" />
+                <v-btn icon="mdi-open-in-new" size="small" variant="text" :href="item.raw.url" target="_blank" @click.stop=""/>
+                <v-btn icon="mdi-trash-can" size="small" variant="text" @click.stop="removeSource(item.raw.id)"/>
               </template>
             </v-list-item>
           </template>
         </v-select>
 
         <v-divider vertical />
 
-        <v-btn icon="mdi-cassette" size="small" variant="text" @click="addCassette"
-          :disabled="!projectStore.hasSources" />
-
-        <v-divider vertical />
-
         <!-- Sorting select -->
         <v-select v-model="selectedSortType" :items="layoutStore.getAvailableSorters()" item-value="type"
           density="compact" label="Sorting Algorithm" item-title="name" hide-details min-width="200" variant="outlined"
@@ -93,15 +103,11 @@ const menuBadgeContent = computed(() => trackStore.unavailableTrackIds.length >
             <v-list-item v-bind="itemProps" :subtitle="item.raw.description" :title="item.raw.name" />
           </template>
         </v-select>
-
+        
         <v-divider vertical />
 
-
-        <v-btn icon="mdi-import" size="small" variant="text" />
-        <v-btn icon="mdi-export" size="small" variant="text" :disabled="!projectStore.hasSources" />
-
-        <v-divider vertical />
-        <upload-cassette-dialog />
+        <v-btn append-icon="mdi-cassette" size="small" variant="text" @click="addCassette"
+          :disabled="!projectStore.hasSources" text="+"/>
       </template>
     </v-card>
     <v-spacer />

src/components/CassetteInfoDrawer.vue

@@ -5,7 +5,7 @@ const projectStore = useProjectStore()
 </script>
 
 <template>
-    <v-navigation-drawer floating v-model="projectStore.drawerOpen" location="right">
+    <v-navigation-drawer floating v-model="projectStore.drawerOpen" location="right" color="transparent">
         <unavailable-tracks-list />
     </v-navigation-drawer>
 </template>

src/components/UnavailableTracksList.vue

@@ -49,10 +49,9 @@ function clearUnavailableTracks() {
                     :track-id="trackId" />
             </draggable>
         </v-list>
-        <v-divider class="mb-2" />
 
         <template v-slot:actions>
-            <v-btn variant="text" @click="clearUnavailableTracks">Clear List</v-btn>
+            <v-btn variant="text" @click="clearUnavailableTracks" :disabled="tracksStore.unavailableTrackIds.length === 0">Clear List</v-btn>
         </template>
     </v-card>
 </template>

src/components/cassette/Cassette.vue

@@ -66,7 +66,7 @@ const name = computed<string>({
 
 <template>
   <v-card class="cassette-card">
-    <v-toolbar color="primary" class="pl-2 pr-4">
+    <v-toolbar color="primary">
       <template v-slot:prepend>
         <v-icon icon="mdi-cassette" size="30" class="mr-2" />
         <v-select v-model="capacityMinutes" :items="cassetteStore.possibleLengthsMin" density="compact" hide-details
@@ -75,7 +75,7 @@ const name = computed<string>({
 
       <template v-slot:title>
         <v-text-field v-model="name" density="compact" hide-details placeholder="Cassette name"
-          class="cassette-title-field" />
+          class="mr-4"/>
       </template>
 
       <v-menu v-if="!props.disableControls">