feat: show selected albums first when modal is first opened

fix: change the color of the dropdown for tags to match the base theme
chore: pass props into some of the components instead of fetching from store inside of components

3 files changed, 33 insertions, 19 deletions

diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 9d57e55..8974a11 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -13,12 +13,12 @@
 		</button>
 
 		<b-dropdown-item
-			v-for="album in albums"
+			v-for="album in orderedAlbums"
 			:key="album.id"
 			:value="album.id"
 			aria-role="listitem"
 			@click="handleClick(album.id)">
-			<span>{{ album. name }}</span>
+			<span>{{ album.name }}</span>
 		</b-dropdown-item>
 	</b-dropdown>
 </template>
@@ -37,18 +37,37 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		albums: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
-			selectedOptions: this.imageAlbums.map((e) => e.id),
+			selectedOptions: [],
+			orderedAlbums: [],
 		};
 	},
-	computed: {
-		...mapState({
-			albums: (state) => state.albums.tinyDetails,
-		}),
+	created() {
+		this.orderedAlbums = this.getOrderedAlbums();
+		// we're sorting here instead of computed because we want sort on creation
+		// then the array's values should be frozen
+		this.selectedOptions = this.imageAlbums.map((e) => e.id);
 	},
 	methods: {
+		getOrderedAlbums() {
+			return [...this.albums].sort(
+				(a, b) => {
+					const selectedA = this.imageAlbums.findIndex(({ name }) => name === a.name) !== -1;
+					const selectedB = this.imageAlbums.findIndex(({ name }) => name === b.name) !== -1;
+
+					if (selectedA !== selectedB) {
+						return selectedA ? -1 : 1;
+					}
+					return a.name.localeCompare(b.name);
+				},
+			);
+		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
 			const found = this.showingModalForFile.albums.find((el) => el.id === id);
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 485a8aa..0562e1f 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -102,7 +102,7 @@
 					<div class="divider is-lolisafe has-text-light">
 						Albums
 					</div>
-					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
 				</div>
 			</div>
 		</div>
@@ -134,7 +134,10 @@ export default {
 			default: () => ([]),
 		},
 	},
-	computed: mapState(['images']),
+	computed: mapState({
+		images: (state) => state.images,
+		tinyDetails: (state) => state.albums.tinyDetails,
+	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
 			if (bytes === 0) return '0 Bytes';
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index 2054e6a..a337148 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -88,16 +88,8 @@ export default {
 
 .taginp {
 	::v-deep .dropdown-content {
-		background-color: hsl(0, 0%, 100%);
-
-		.dropdown-item {
-			color: hsl(0, 0%, 29%);
-
-			&:hover {
-				color: hsl(0, 0%, 4%);
-				background-color: hsl(0, 0%, 90%);
-			}
-		}
+		background-color: #323846;
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 	}
 }
 </style>