Merge pull request #228 from Zephyrrus/begone_trailing_commas

Merge own dev branch into main dev branch

20 files changed, 2229 insertions, 656 deletions

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
new file mode 100644
index 0000000..4067853
--- /dev/null
+++ b/src/site/components/album/AlbumDetails.vue
@@ -0,0 +1,270 @@
+<template>
+	<div class="details">
+		<h2>Public links for this album:</h2>
+
+		<b-table
+			:data="details.links || []"
+			:mobile-cards="true">
+			<b-table-column
+				v-slot="props"
+				field="identifier"
+				label="Link"
+				centered>
+				<a
+					:href="`${config.URL}/a/${props.row.identifier}`"
+					target="_blank">
+					{{ props.row.identifier }}
+				</a>
+			</b-table-column>
+
+			<b-table-column
+				v-slot="props"
+				field="views"
+				label="Views"
+				centered>
+				{{ props.row.views }}
+			</b-table-column>
+
+			<b-table-column
+				v-slot="props"
+				field="enableDownload"
+				label="Allow download"
+				centered>
+				<b-switch
+					v-model="props.row.enableDownload"
+					@input="updateLinkOptions(albumId, props.row)" />
+			</b-table-column>
+
+			<b-table-column
+				v-slot="props"
+				field="enabled"
+				numeric>
+				<button
+					:class="{ 'is-loading': isDeleting(props.row.identifier) }"
+					class="button is-danger"
+					:disabled="isDeleting(props.row.identifier)"
+					@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
+					Delete link
+				</button>
+			</b-table-column>
+
+			<template slot="empty">
+				<div class="has-text-centered">
+					<i class="icon-misc-mood-sad" />
+				</div>
+				<div class="has-text-centered">
+					Nothing here
+				</div>
+			</template>
+
+			<template slot="footer">
+				<div class="level is-paddingless">
+					<div class="level-left">
+						<div class="level-item">
+							<b-field v-if="auth.user.isAdmin">
+								<p class="control">
+									<button
+										:class="{ 'is-loading': isCreatingLink }"
+										class="button is-primary reset-font-size-button"
+										style="float: left"
+										@click="createLink(albumId)">
+										Create new link
+									</button>
+								</p>
+								<p class="control">
+									<b-dropdown>
+										<button slot="trigger" class="button is-primary reset-font-size-button">
+											<b-icon icon="menu-down" />
+										</button>
+
+										<b-dropdown-item @click="createCustomLink(albumId)">
+											Custom link
+										</b-dropdown-item>
+									</b-dropdown>
+								</p>
+							</b-field>
+							<button
+								v-else
+								:class="{ 'is-loading': isCreatingLink }"
+								class="button is-primary"
+								style="float: left"
+								@click="createLink(albumId)">
+								Create new link
+							</button>
+						</div>
+						<div class="level-item">
+							<span class="has-text-default">{{ details.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
+						</div>
+					</div>
+
+					<div class="level-right">
+						<div class="level-item">
+							<button
+								class="button is-danger"
+								style="float: right"
+								@click="promptDeleteAlbum(albumId)">
+								Delete album
+							</button>
+						</div>
+					</div>
+				</div>
+			</template>
+		</b-table>
+	</div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+	props: {
+		albumId: {
+			type: Number,
+			default: 0
+		},
+		details: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			isCreatingLink: false,
+			isDeletingLinks: []
+		};
+	},
+	computed: mapState(['config', 'auth']),
+	methods: {
+		...mapActions({
+			deleteAlbumAction: 'albums/deleteAlbum',
+			deleteAlbumLinkAction: 'albums/deleteLink',
+			updateLinkOptionsAction: 'albums/updateLinkOptions',
+			createLinkAction: 'albums/createLink',
+			createCustomLinkAction: 'albums/createCustomLink',
+			alert: 'alert/set'
+		}),
+		promptDeleteAlbum(id) {
+			this.$buefy.dialog.confirm({
+				type: 'is-danger',
+				message: 'Are you sure you want to delete this album?',
+				onConfirm: () => this.deleteAlbum(id)
+			});
+		},
+		promptDeleteAlbumLink(albumId, identifier) {
+			this.$buefy.dialog.confirm({
+				type: 'is-danger',
+				message: 'Are you sure you want to delete this album link?',
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
+			});
+		},
+		async deleteAlbum(id) {
+			try {
+				const response = await this.deleteAlbumAction(id);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			}
+		},
+		async deleteAlbumLink(albumId, identifier) {
+			this.isDeletingLinks.push(identifier);
+			try {
+				const response = await this.deleteAlbumLinkAction({ albumId, identifier });
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} finally {
+				this.isDeletingLinks = this.isDeletingLinks.filter((e) => e !== identifier);
+			}
+		},
+		async createLink(albumId) {
+			this.isCreatingLink = true;
+			try {
+				const response = await this.createLinkAction(albumId);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} finally {
+				this.isCreatingLink = false;
+			}
+		},
+		async updateLinkOptions(albumId, linkOpts) {
+			try {
+				const response = await this.updateLinkOptionsAction({ albumId, linkOpts });
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			}
+		},
+		async createCustomLink(albumId) {
+			this.$buefy.dialog.prompt({
+				message: 'Custom link identifier',
+				inputAttrs: {
+					placeholder: '',
+					maxlength: 10
+				},
+				trapFocus: true,
+				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value })
+			});
+		},
+		isDeleting(identifier) {
+			return this.isDeletingLinks.indexOf(identifier) > -1;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	.reset-font-size-button {
+		font-size: 1rem;
+		height: 2.25em;
+	}
+
+	div.details {
+		flex: 0 1 100%;
+		padding-left: 2em;
+		padding-top: 1em;
+		min-height: 50px;
+
+		.b-table {
+			padding: 2em 0em;
+
+			.table-wrapper {
+				-webkit-box-shadow: $boxShadowLight;
+						box-shadow: $boxShadowLight;
+			}
+		}
+	}
+</style>
+
+<style lang="scss">
+	@import '~/assets/styles/_colors.scss';
+
+	.b-table {
+		.table-wrapper {
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+	}
+
+	.dialog.modal .modal-card-body input {
+		border: 2px solid #21252d;
+		border-radius: 0.3em !important;
+		background: rgba(0, 0, 0, 0.15);
+		padding: 1rem;
+		color: $textColor;
+		height: 3rem;
+		&:focus,
+		&:hover {
+			border: 2px solid #21252d;
+		}
+		&::placeholder {
+			color: $textColor;
+		}
+	}
+</style>
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
new file mode 100644
index 0000000..1e1b2cf
--- /dev/null
+++ b/src/site/components/album/AlbumEntry.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="album">
+		<div
+			class="arrow-container"
+			@click="toggleDetails(album)">
+			<i
+				:class="{ active: isExpanded }"
+				class="icon-arrow" />
+		</div>
+		<div class="thumb">
+			<figure class="image is-64x64 thumb">
+				<img src="~/assets/images/blank_darker.png">
+			</figure>
+		</div>
+		<div class="info">
+			<h4>
+				<router-link :to="`/dashboard/albums/${album.id}`">
+					{{ album.name }}
+				</router-link>
+			</h4>
+			<span>
+				Created <span class="is-inline has-text-weight-semibold"><timeago :since="album.createdAt" /></span>
+			</span>
+			<span>{{ album.fileCount || 0 }} files</span>
+		</div>
+		<div class="latest is-hidden-mobile">
+			<template v-if="album.fileCount > 0">
+				<div
+					v-for="file of album.files"
+					:key="file.id"
+					class="thumb">
+					<figure class="image is-64x64">
+						<a
+							:href="file.url"
+							target="_blank">
+							<img :src="file.thumbSquare">
+						</a>
+					</figure>
+				</div>
+				<div
+					v-if="album.fileCount > 5"
+					class="thumb more no-background">
+					<router-link :to="`/dashboard/albums/${album.id}`">
+						{{ album.fileCount - 5 }}+ more
+					</router-link>
+				</div>
+			</template>
+			<template v-else>
+				<span class="no-files">Nothing to show here</span>
+			</template>
+		</div>
+
+		<AlbumDetails
+			v-if="isExpanded"
+			:details="getDetails(album.id)"
+			:albumId="album.id" />
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import AlbumDetails from '~/components/album/AlbumDetails.vue';
+
+export default {
+	components: {
+		AlbumDetails
+	},
+	props: {
+		album: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	computed: {
+		...mapGetters({
+			isExpandedGetter: 'albums/isExpanded',
+			getDetails: 'albums/getDetails'
+		}),
+		isExpanded() {
+			return this.isExpandedGetter(this.album.id);
+		}
+	},
+	methods: {
+		async toggleDetails(album) {
+			if (!this.isExpanded) {
+				await this.$store.dispatch('albums/fetchDetails', album.id);
+			}
+			this.$store.commit('albums/toggleExpandedState', album.id);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	div.album {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 10px;
+
+		div.arrow-container {
+			width: 2em;
+			height: 64px;
+			position: relative;
+			cursor: pointer;
+
+			i {
+				border: 2px solid $defaultTextColor;
+				border-right: 0;
+				border-top: 0;
+				display: block;
+				height: 1em;
+				position: absolute;
+				transform: rotate(-135deg);
+				transform-origin: center;
+				width: 1em;
+				z-index: 4;
+				top: 22px;
+
+				-webkit-transition: transform 0.1s linear;
+				-moz-transition: transform 0.1s linear;
+				-ms-transition: transform 0.1s linear;
+				-o-transition: transform 0.1s linear;
+				transition: transform 0.1s linear;
+
+				&.active {
+					transform: rotate(-45deg);
+				}
+			}
+		}
+
+		div.thumb {
+			width: 64px;
+			height: 64px;
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+
+		div.info {
+			margin-left: 15px;
+			text-align: left;
+			h4 {
+				font-size: 1.5rem;
+				a {
+					color: $defaultTextColor;
+					font-weight: 400;
+					&:hover { text-decoration: underline; }
+				}
+			}
+			span { display: block; }
+			span:nth-child(3) {
+				font-size: 0.9rem;
+			}
+		}
+
+		div.latest {
+			flex-grow: 1;
+			justify-content: flex-end;
+			display: flex;
+			margin-left: 15px;
+
+			span.no-files {
+				font-size: 1.5em;
+				color: #b1b1b1;
+				padding-top: 17px;
+			}
+
+			div.more {
+				width: 64px;
+				height: 64px;
+				background: white;
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				text-align: center;
+				a {
+					line-height: 1rem;
+					color: $defaultTextColor;
+					&:hover { text-decoration: underline; }
+				}
+			}
+		}
+	}
+
+	div.no-background { background: none !important; }
+</style>
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 9f51fee..b409cf5 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -1,12 +1,18 @@
 <template>
+	<!-- eslint-disable max-len -->
 	<footer>
-		<svg viewBox="0 0 1920 250"
+		<svg
+			viewBox="0 0 1920 250"
 			class="waves">
-			<path d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
+
+			<path
+				d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
 				class="wave-1" />
-			<path d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
+			<path
+				d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
 				class="wave-2" />
-			<path d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
+			<path
+				d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
 				class="wave-3" />
 		</svg>
 		<div>
@@ -15,7 +21,8 @@
 					<div class="column is-narrow">
 						<h4>lolisafe</h4>
 						<span>© 2017-2020
-							<a href="https://github.com/pitu"
+							<a
+								href="https://github.com/pitu"
 								class="no-block">Pitu</a>
 						</span><br>
 						<span>v{{ version }}</span>
@@ -24,22 +31,33 @@
 						<div class="columns is-gapless">
 							<div class="column" />
 							<div class="column">
-								<nuxt-link to="/">Home</nuxt-link>
-								<nuxt-link to="/faq">FAQ</nuxt-link>
+								<nuxt-link to="/">
+									Home
+								</nuxt-link>
+								<nuxt-link to="/faq">
+									FAQ
+								</nuxt-link>
 							</div>
 							<div class="column">
-								<nuxt-link to="/dashboard">Dashboard</nuxt-link>
-								<nuxt-link to="/dashboard">Files</nuxt-link>
-								<nuxt-link to="/dashboard/albums">Albums</nuxt-link>
-								<nuxt-link to="/dashboard/account">Account</nuxt-link>
+								<nuxt-link to="/dashboard">
+									Dashboard
+								</nuxt-link>
+								<nuxt-link to="/dashboard">
+									Files
+								</nuxt-link>
+								<nuxt-link to="/dashboard/albums">
+									Albums
+								</nuxt-link>
+								<nuxt-link to="/dashboard/account">
+									Account
+								</nuxt-link>
 							</div>
 							<div class="column">
 								<a href="https://github.com/weebdev/lolisafe">GitHub</a>
-								<a href="https://patreon.com/pitu">Patreon</a>
-								<a href="https://discord.gg/5g6vgwn">Discord</a>
 							</div>
 							<div class="column">
-								<a v-if="loggedIn"
+								<a
+									v-if="loggedIn"
 									@click="createShareXThing">ShareX Config</a>
 								<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
 							</div>
@@ -50,27 +68,32 @@
 		</div>
 	</footer>
 </template>
+
 <script>
+/* eslint-disable no-restricted-globals */
+
+import { mapState, mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
+
 export default {
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		version() {
-			return this.$store.state.config.version;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState({
+			version: (state) => state.config.version,
+			serviceName: (state) => state.config.serviceName,
+			token: (state) => state.auth.token
+		})
 	},
 	methods: {
 		createShareXThing() {
 			const sharexFile = `{
-				"Name": "${this.$store.state.config.serviceName}",
+				"Name": "${this.serviceName}",
 				"DestinationType": "ImageUploader, FileUploader",
 				"RequestType": "POST",
 				"RequestURL": "${location.origin}/api/upload",
 				"FileFormName": "files[]",
 				"Headers": {
-					"authorization": "Bearer ${this.$store.state.token}",
+					"authorization": "Bearer ${this.token}",
 					"accept": "application/vnd.lolisafe.json"
 				},
 				"ResponseType": "Text",
@@ -83,6 +106,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	footer {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d0a5ea3..ea568f0 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,163 +1,135 @@
 <template>
 	<div>
-		<div v-if="enableToolbar"
-			class="toolbar">
-			<div class="block">
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="true">
-					List
-				</b-radio>
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="false">
-					Grid
-				</b-radio>
+		<nav class="level">
+			<div class="level-left">
+				<div class="level-item">
+					<slot name="pagination" />
+				</div>
 			</div>
-		</div>
+			<!-- TODO: Externalize this so it can be saved as an user config (and between re-renders) -->
+			<div v-if="enableToolbar" class="level-right toolbar">
+				<div class="level-item">
+					<div class="block">
+						<b-radio v-model="showList" name="name" :native-value="true">
+							List
+						</b-radio>
+						<b-radio v-model="showList" name="name" :native-value="false">
+							Grid
+						</b-radio>
+					</div>
+				</div>
+			</div>
+		</nav>
 
-		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
-				:gutterHeight="4">
-				<!--
-					TODO: Implement search based on originalName, albumName and tags
-					<input v-if="enableSearch"
-						v-model="searchTerm"
-						type="text"
-						placeholder="Search..."
-						@input="search()"
-						@keyup.enter="search()">
-				-->
-
-				<!-- TODO: Implement pagination -->
-
-				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
-					:key="index"
-					:width="width"
-					move-class="item-move">
+		<template v-if="!images.showList">
+			<Waterfall
+				:gutterWidth="10"
+				:gutterHeight="4"
+				:options="{fitWidth: true}"
+				:itemWidth="width"
+				:items="gridFiles">
+				<template v-slot="{item}">
 					<template v-if="isPublic">
-						<a :href="`${item.url}`"
-							target="_blank">
+						<a
+							:href="`${item.url}`"
+							class="preview-container"
+							target="_blank"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+
 							<img :src="item.thumb ? item.thumb : blank">
-							<span v-if="!item.thumb && item.name"
-								class="extension">{{ item.name.split('.').pop() }}</span>
+							<div v-if="item.preview && isHovered(item.id)" class="preview">
+								<video ref="video" class="preview" autoplay loop muted>
+									<source :src="item.preview" type="video/mp4">
+								</video>
+							</div>
+
+							<span v-if="!item.thumb && item.name" class="extension">{{
+								item.name.split('.').pop()
+							}}</span>
 						</a>
 					</template>
 					<template v-else>
 						<img :src="item.thumb ? item.thumb : blank">
-						<span v-if="!item.thumb && item.name"
-							class="extension">{{ item.name.split('.').pop() }}</span>
-						<div v-if="!isPublic"
+						<div v-if="item.preview && isHovered(item.id)" class="preview">
+							<video ref="video" class="preview" autoplay loop muted>
+								<source :src="item.preview" type="video/mp4">
+							</video>
+						</div>
+
+						<span v-if="!item.thumb && item.name" class="extension">{{ item.name.split('.').pop() }}</span>
+						<div
+							v-if="!isPublic"
 							:class="{ fixed }"
-							class="actions">
-							<b-tooltip label="Link"
-								position="is-top">
-								<a :href="`${item.url}`"
-									target="_blank"
-									class="btn">
-									<i class="icon-web-code" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(item)">
-									<i class="icon-interface-window" />
+							class="actions"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+							<b-tooltip label="Link" position="is-top">
+								<a :href="`${item.url}`" target="_blank" class="btn">
+									<i class="mdi mdi-open-in-new" />
 								</a>
 							</b-tooltip>
-							<!--
-							<b-tooltip label="Tags"
-								position="is-top">
-								<a @click="manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
+							<b-tooltip label="Edit" position="is-top">
+								<a class="btn" @click="handleFileModal(item)">
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
-							-->
-							<b-tooltip label="Delete"
-								position="is-top">
-								<a class="btn"
-									@click="deleteFile(item, index)">
-									<i class="icon-editorial-trash-a-l" />
+							<b-tooltip label="Delete" position="is-top">
+								<a class="btn" @click="deleteFile(item)">
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</div>
 					</template>
-				</WaterfallItem>
+				</template>
 			</Waterfall>
-			<button
-				v-if="moreFiles"
-				class="button is-primary"
-				@click="loadMoreFiles">Load more</button>
 		</template>
 		<div v-else>
-			<b-table
-				:data="gridFiles || []"
-				:mobile-cards="true">
-				<template slot-scope="props">
-					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url"
-							label="URL">
-							<a :href="props.row.url"
-								target="_blank">{{ props.row.url }}</a>
-						</b-table-column>
-
-						<b-table-column field="albums"
-							label="Albums"
-							centered>
-							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index"
-									:to="`/dashboard/albums/${album.id}`">
-									{{ album.name }}
-								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">, </template>
-							</template>
-
-							{{ props.row.username }}
-						</b-table-column>
-
-						<b-table-column field="uploaded"
-							label="Uploaded"
-							centered>
-							<span><timeago :since="props.row.createdAt" /></span>
-						</b-table-column>
-
-						<b-table-column field="purge"
-							centered>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(props.row)">
-									<i class="icon-interface-window" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Delete"
-								position="is-top"
-								class="is-danger">
-								<a class="is-danger"
-									@click="deleteFile(props.row)">
-									<i class="icon-editorial-trash-a-l" />
-								</a>
-							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
-								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="icon-interface-more" />
-								</nuxt-link>
-							</b-tooltip>
-						</b-table-column>
+			<b-table :data="gridFiles || []" :mobile-cards="true">
+				<b-table-column v-slot="props" field="url" label="URL">
+					<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="albums" label="Albums" centered>
+					<template v-for="(album, index) in props.row.albums">
+						<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
+							{{ album.name }}
+						</nuxt-link>
+						<template v-if="index < props.row.albums.length - 1">
+							,
+						</template>
 					</template>
-				</template>
+
+					{{ props.row.username }}
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="uploaded" label="Uploaded" centered>
+					<span><timeago :since="props.row.createdAt" /></span>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="purge" centered>
+					<b-tooltip label="Edit" position="is-top">
+						<a class="btn" @click="handleFileModal(props.row)">
+							<i class="mdi mdi-pencil" />
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Delete" position="is-top" class="is-danger">
+						<a class="is-danger" @click="deleteFile(props.row)">
+							<i class="mdi mdi-delete" />
+						</a>
+					</b-tooltip>
+					<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
+						<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
+							<i class="mdi mdi-dots-horizontal" />
+						</nuxt-link>
+					</b-tooltip>
+				</b-table-column>
+
 				<template slot="empty">
 					<div class="has-text-centered">
 						<i class="icon-misc-mood-sad" />
@@ -167,54 +139,39 @@
 					</div>
 				</template>
 				<template slot="footer">
-					<div class="has-text-right">
-						{{ files.length }} files
+					<div class="has-text-right has-text-default">
+						Showing {{ files.length }} files ({{ total }} total)
 					</div>
 				</template>
 			</b-table>
-			<button
-				v-if="moreFiles"
-				class="button is-primary mt2"
-				@click="loadMoreFiles">Load more</button>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive"
-			:width="640"
-			scroll="keep">
-			<div class="card albumsModal">
-				<div class="card-content">
-					<div class="content">
-						<h3 class="subtitle">Select the albums this file should be a part of</h3>
-						<hr>
-						<div class="albums-container">
-							<div v-for="(album, index) in albums"
-								:key="index"
-								class="album">
-								<div class="field">
-									<b-checkbox :value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
+
+		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
+			<ImageInfo :file="modalData.file" :albums="modalData.albums" :tags="modalData.tags" />
 		</b-modal>
 	</div>
 </template>
+
 <script>
+import { mapState } from 'vuex';
+
 import Waterfall from './waterfall/Waterfall.vue';
-import WaterfallItem from './waterfall/WaterfallItem.vue';
+import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem
+		ImageInfo
 	},
 	props: {
 		files: {
 			type: Array,
 			default: () => []
 		},
+		total: {
+			type: Number,
+			default: 0
+		},
 		fixed: {
 			type: Boolean,
 			default: false
@@ -238,212 +195,309 @@ export default {
 	},
 	data() {
 		return {
-			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
-			albums: [],
+			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
-			filesOffset: 0,
-			filesOffsetEnd: 50,
-			filesPerPage: 50
+			filesOffsetWaterfall: 0,
+			filesOffsetEndWaterfall: 50,
+			filesPerPageWaterfall: 50,
+			modalData: {
+				file: null,
+				tags: null,
+				albums: null
+			}
 		};
 	},
 	computed: {
-		user() {
-			return this.$store.state.user;
-		},
+		...mapState({
+			user: (state) => state.auth.user,
+			albums: (state) => state.albums.tinyDetails,
+			images: (state) => state.images
+		}),
 		blank() {
-			return require('@/assets/images/blank2.jpg');
+			// eslint-disable-next-line global-require, import/no-unresolved
+			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffset, this.filesOffsetEnd);
-		},
-		moreFiles() {
-			return this.files.length > this.filesOffsetEnd;
+			return (this.files || []).filter((v) => !v.hideFromList);
 		}
 	},
+	watch: {
+		showList: 'displayTypeChange'
+	},
+	created() {
+		// TODO: Create a middleware for this
+		this.getAlbums();
+		this.getTags();
+
+		this.showList = this.images.showList;
+	},
 	methods: {
-		loadMoreFiles() {
-			this.filesOffsetEnd = this.filesOffsetEnd + this.filesPerPage;
-		},
 		async search() {
-			const data = await this.$search.do(this.searchTerm, [
-				'name',
-				'original',
-				'type',
-				'albums:name'
-			]);
-			console.log('> Search result data', data);
+			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
+			console.log('> Search result data', data); // eslint-disable-line no-console
 		},
-		deleteFile(file, index) {
+		deleteFile(file) {
+			// this.$emit('delete', file);
 			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
-				hasIcon: true,
 				onConfirm: async () => {
-					const response = await this.$axios.$delete(`file/${file.id}`);
-					if (this.showList) {
-						file.hideFromList = true;
-						this.$forceUpdate();
-					} else {
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
+					try {
+						const response = await this.$store.dispatch('images/deleteFile', file.id);
+
+						this.$buefy.toast.open(response.message);
+					} catch (e) {
+						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-					return this.$buefy.toast.open(response.message);
 				}
 			});
 		},
 		isAlbumSelected(id) {
-			if (!this.showingModalForFile) return;
-			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found ? found.id ? true : false : false;
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
+			const { id } = file;
 			this.showingModalForFile = file;
 			this.showingModalForFile.albums = [];
-			this.isAlbumsModalActive = true;
 
-			const response = await this.$axios.$get(`file/${file.id}/albums`);
-			this.showingModalForFile.albums = response.albums;
+			try {
+				await this.$store.dispatch('images/getFileAlbums', id);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+			this.showingModalForFile.albums = this.images.fileAlbumsMap[id];
 
-			this.getAlbums();
+			this.isAlbumsModalActive = true;
 		},
-		async albumCheckboxClicked(value, id) {
-			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-				albumId: id,
-				fileId: this.showingModalForFile.id
-			});
-			this.$buefy.toast.open(response.message);
+		async albumCheckboxClicked(add, id) {
+			try {
+				let response;
+				if (add) {
+					response = await this.$store.dispatch('images/addToAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id
+					});
+				} else {
+					response = await this.$store.dispatch('images/removeFromAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id
+					});
+				}
 
-			// Not the prettiest solution to refetch on each click but it'll do for now
-			this.$parent.getFiles();
+				this.$buefy.toast.open(response.message);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
-			this.albums = response.albums;
-			this.$forceUpdate();
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+		},
+		async handleFileModal(file) {
+			const { id } = file;
+
+			try {
+				await this.$store.dispatch('images/fetchFileMeta', id);
+				this.modalData.file = this.images.fileExtraInfoMap[id];
+				this.modalData.albums = this.images.fileAlbumsMap[id];
+				this.modalData.tags = this.images.fileTagsMap[id];
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+
+			this.isAlbumsModalActive = true;
+		},
+		async getTags() {
+			try {
+				await this.$store.dispatch('tags/fetch');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+		},
+		mouseOver(id) {
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) return;
+			this.hoveredItems.push(id);
+		},
+		mouseOut(id) {
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
+		},
+		isHovered(id) {
+			return this.hoveredItems.includes(id);
+		},
+		displayTypeChange(showList) {
+			this.$store.commit('images/setShowList', showList);
 		}
 	}
 };
 </script>
+
 <style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.item-move {
-		transition: all .25s cubic-bezier(.55,0,.1,1);
-	}
+@import '~/assets/styles/_colors.scss';
+.item-move {
+	transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
+}
 
-	div.toolbar {
-		padding: 1rem;
+div.toolbar {
+	padding: 1rem;
 
-		.block {
-			text-align: right;
-		}
+	.block {
+		text-align: right;
 	}
+}
 
-	span.extension {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		pointer-events: none;
-		opacity: .75;
-		max-width: 150px;
-	}
+span.extension {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	pointer-events: none;
+	opacity: 0.75;
+	max-width: 150px;
+}
 
-	div.actions {
-		opacity: 0;
-		-webkit-transition: opacity 0.1s linear;
-		-moz-transition: opacity 0.1s linear;
-		-ms-transition: opacity 0.1s linear;
-		-o-transition: opacity 0.1s linear;
-		transition: opacity 0.1s linear;
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: calc(100% - 6px);
-		background: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		span {
-			padding: 3px;
-			&.more {
-				position: absolute;
-				top: 0;
-				right: 0;
-			}
+div.preview {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	overflow: hidden;
+}
 
-			&:nth-child(1), &:nth-child(2) {
-				align-items: flex-end;
-			}
+.preview-container {
+	display: inline-block;
+}
 
-			&:nth-child(1), &:nth-child(3) {
-				justify-content: flex-end;
-			}
-			a {
+div.actions {
+	opacity: 0;
+	-webkit-transition: opacity 0.1s linear;
+	-moz-transition: opacity 0.1s linear;
+	-ms-transition: opacity 0.1s linear;
+	-o-transition: opacity 0.1s linear;
+	transition: opacity 0.1s linear;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	// background: rgba(0, 0, 0, 0.5);
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 60px),
+		linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 45px);
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+
+	span {
+		padding: 3px;
+
+		&.more {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+		&:nth-child(1),
+		&:nth-child(2) {
+			align-items: flex-end;
+			padding-bottom: 10px;
+		}
+
+		&:nth-child(3),
+		&:nth-child(4) {
+			justify-content: flex-end;
+			padding-bottom: 10px;
+		}
+
+		a {
+			width: 30px;
+			height: 30px;
+			color: white;
+			justify-content: center;
+			align-items: center;
+			display: flex;
+			&.btn:before {
+				content: '';
 				width: 30px;
 				height: 30px;
-				color: white;
-				justify-content: center;
-				align-items: center;
-				display: flex;
-				&.btn:before {
-					content: '';
-					width: 30px;
-					height: 30px;
-					border: 1px solid white;
-					border-radius: 50%;
-					position: absolute;
-				}
+				border: 1px solid white;
+				border-radius: 50%;
+				position: absolute;
 			}
 		}
+	}
 
-		&.fixed {
-			position: relative;
-			opacity: 1;
-			background: none;
-
-			a {
-				width: auto;
-				height: auto;
-				color: $defaultTextColor;
-				&:before {
-					display: none;
-				}
-			}
+	&.fixed {
+		position: relative;
+		opacity: 1;
+		background: none;
 
+		a {
+			width: auto;
+			height: auto;
+			color: $defaultTextColor;
+			&:before {
+				display: none;
+			}
 		}
 	}
+}
 
-	.albums-container {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		.album {
-			flex-basis: 33%;
-			text-align: left;
-		}
+.albums-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	.album {
+		flex-basis: 33%;
+		text-align: left;
 	}
-</style>
+}
+
+.hidden {
+	display: none;
+}
+
+.waterfall {
+	margin: 0 auto;
+}
+
+.waterfall-item:hover {
+	div.actions {
+		opacity: 1;
+	}
+}
+
+.imageinfo-modal::-webkit-scrollbar {
+    width: 0px;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
+}
+
+i.mdi {
+	font-size: 16px;
+}
 
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
+.imageinfo-modal{
+	::v-deep .modal-content {
+		@media screen and (max-width: 768px) {
+			min-height: 100vh;
 		}
 	}
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 8631ea5..af2af3f 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,180 +1,134 @@
-<style>
-	.waterfall {
-		position: relative;
-	}
-</style>
 <template>
-	<div class="waterfall">
-		<slot />
+	<div ref="waterfall" class="waterfall">
+		<WaterfallItem
+			v-for="item in items"
+			:key="item.id"
+			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
+			:width="itemWidth">
+			<slot :item="item" />
+		</WaterfallItem>
 	</div>
 </template>
 <script>
-// import {quickSort, getMinIndex, _, sum} from './util'
+import WaterfallItem from './WaterfallItem.vue';
 
-const quickSort = (arr, type) => {
-	const left = [];
-	const right = [];
-	if (arr.length <= 1) {
-		return arr;
-	}
-	const povis = arr[0];
-	for (let i = 1; i < arr.length; i++) {
-		if (arr[i][type] < povis[type]) {
-			left.push(arr[i]);
-		} else {
-			right.push(arr[i]);
-		}
-	}
-	return quickSort(left, type).concat(povis, quickSort(right, type))
-};
+const isBrowser = typeof window !== 'undefined';
+// eslint-disable-next-line global-require
+const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
+const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
-const getMinIndex = arr => {
-	let pos = 0;
-	for (let i = 0; i < arr.length; i++) {
-		if (arr[pos] > arr[i]) {
-			pos = i;
-		}
-	}
-	return pos;
-};
-
-const _ = {
-	on(el, type, func, capture = false) {
-		el.addEventListener(type, func, capture);
-	},
-	off(el, type, func, capture = false) {
-		el.removeEventListener(type, func, capture);
-	}
-};
-
-const sum = arr => arr.reduce((sum, val) => sum + val);
 export default {
 	name: 'Waterfall',
+	components: {
+		WaterfallItem
+	},
 	props: {
-		gutterWidth: {
-			type: Number,
-			default: 0
-		},
-		gutterHeight: {
-			type: Number,
-			default: 0
-		},
-		resizable: {
-			type: Boolean,
-			default: true
+		options: {
+			type: Object,
+			default: () => {}
 		},
-		align: {
-			type: String,
-			default: 'center'
+		items: {
+			type: Array,
+			default: () => []
 		},
-		fixWidth: {
-			type: Number
-		},
-		minCol: {
+		itemWidth: {
 			type: Number,
-			default: 1
+			default: 150
 		},
-		maxCol: {
-			type: Number
+		gutterWidth: {
+			type: Number,
+			default: 10
 		},
-		percent: {
-			type: Array
+		gutterHeight: {
+			type: Number,
+			default: 4
 		}
 	},
-	data() {
-		return {
-			timer: null,
-			colNum: 0,
-			lastWidth: 0,
-			percentWidthArr: []
-		};
+	mounted() {
+		this.initializeMasonry();
+		this.imagesLoaded();
 	},
-	created() {
-		this.$on('itemRender', () => {
-			if (this.timer) {
-				clearTimeout(this.timer);
-			}
-			this.timer = setTimeout(() => {
-				this.render();
-			}, 0);
-		});
+	updated() {
+		this.performLayout();
+		this.imagesLoaded();
 	},
-	mounted() {
-		this.resizeHandle();
-		this.$watch('resizable', this.resizeHandle);
+	unmounted() {
+		this.masonry.destroy();
 	},
 	methods: {
-		calulate(arr) {
-			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
-			// 百分比布局计算
-			if (this.percent) {
-				this.colNum = this.percent.length;
-				const total = sum(this.percent);
-				this.percentWidthArr = this.percent.map(value => (value / total) * pageWidth);
-				this.lastWidth = 0;
-			// 正常布局计算
-			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
-				if (this.minCol && this.colNum < this.minCol) {
-					this.colNum = this.minCol;
-					this.lastWidth = 0;
-				} else if (this.maxCol && this.colNum > this.maxCol) {
-					this.colNum = this.maxCol;
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				} else {
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
+		imagesLoaded() {
+			const node = this.$refs.waterfall;
+			imagesloaded(
+				node,
+				() => {
+					this.masonry.layout();
 				}
+			);
+		},
+		performLayout() {
+			const diff = this.diffDomChildren();
+			if (diff.removed.length > 0) {
+				this.masonry.remove(diff.removed);
+				this.masonry.reloadItems();
+			}
+			if (diff.appended.length > 0) {
+				this.masonry.appended(diff.appended);
+				this.masonry.reloadItems();
 			}
+			if (diff.prepended.length > 0) {
+				this.masonry.prepended(diff.prepended);
+			}
+			if (diff.moved.length > 0) {
+				this.masonry.reloadItems();
+			}
+			this.masonry.layout();
 		},
-		resizeHandle() {
-			if (this.resizable) {
-				_.on(window, 'resize', this.render, false);
-			} else {
-				_.off(window, 'resize', this.render, false);
+		diffDomChildren() {
+			const oldChildren = this.domChildren.filter((element) => !!element.parentNode);
+			const newChildren = this.getNewDomChildren();
+			const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild));
+			const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild));
+			const prepended = domDiff.filter((newChild, index) => newChildren[index] === newChild);
+			const appended = domDiff.filter((el) => !prepended.includes(el));
+			let moved = [];
+			if (removed.length === 0) {
+				moved = oldChildren.filter((child, index) => index !== newChildren.indexOf(child));
 			}
+			this.domChildren = newChildren;
+			return {
+				old: oldChildren,
+				new: newChildren,
+				removed,
+				appended,
+				prepended,
+				moved
+			};
 		},
-		render() {
-			// 重新排序
-			let childArr = [];
-			childArr = this.$children.map(child => child.getMeta());
-			childArr = quickSort(childArr, 'order');
-			// 计算列数
-			this.calulate(childArr[0])
-			let offsetArr = Array(this.colNum).fill(0);
-			// 渲染
-			childArr.forEach(child => {
-				let position = getMinIndex(offsetArr);
-				// 百分比布局渲染
-				if (this.percent) {
-					let left = 0;
-					child.el.style.width = `${this.percentWidthArr[position]}px`;
-					if (position === 0) {
-						left = 0;
-					} else {
-						for (let i = 0; i < position; i++) {
-							left += this.percentWidthArr[i];
-						}
-					}
-					child.el.style.left = `${left}px`;
-				// 正常布局渲染
-				} else {
-					if (this.align === 'left') { // eslint-disable-line no-lonely-if
-						child.el.style.left = `${position * (child.width + this.gutterWidth)}px`;
-					} else if (this.align === 'right') {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth}px`;
-					} else {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth / 2}px`;
+		initializeMasonry() {
+			if (!this.masonry) {
+				this.masonry = new Masonry(
+					this.$refs.waterfall,
+					{
+						columnWidth: this.itemWidth,
+						gutter: this.gutterWidth,
+						...this.options
 					}
-				}
-				if (child.height === 0) {
-					return;
-				}
-				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
-				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
-			});
-			this.$emit('rendered', this);
+				);
+				this.domChildren = this.getNewDomChildren();
+			}
+		},
+		getNewDomChildren() {
+			const node = this.$refs.waterfall;
+			const children = this.options && this.options.itemSelector
+				? node.querySelectorAll(this.options.itemSelector) : node.children;
+			return Array.prototype.slice.call(children);
 		}
 	}
 };
 </script>
+
+<style lang="scss" scoped>
+.wfi {
+
+}
+</style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..2a18606 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,60 +1,10 @@
-<style>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
 <script>
-import imagesLoaded from 'imagesloaded';
 export default {
-	name: 'WaterfallItem',
-	props: {
-		order: {
-			type: Number,
-			default: 0
-		},
-		width: {
-			type: Number,
-			default: 150
-		}
-	},
-	data() {
-		return {
-			itemWidth: 0,
-			height: 0
-		};
-	},
-	created() {
-		this.$watch(() => this.height, this.emit);
-	},
-	mounted() {
-		this.$el.style.display = 'none';
-		this.$el.style.width = `${this.width}px`;
-		this.emit();
-		imagesLoaded(this.$el, () => {
-			this.$el.style.left = '-9999px';
-			this.$el.style.top = '-9999px';
-			this.$el.style.display = 'block';
-			this.height = this.$el.offsetHeight;
-			this.itemWidth = this.$el.offsetWidth;
-		});
-	},
-	methods: {
-		emit() {
-			this.$parent.$emit('itemRender');
-		},
-		getMeta() {
-			return {
-				el: this.$el,
-				height: this.height,
-				width: this.itemWidth,
-				order: this.order
-			};
-		}
-	}
-}
+	name: 'WaterfallItem'
+};
 </script>
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 41bd271..b20649f 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="links">
-		<a href="https://github.com/WeebDev/lolisafe"
+		<a
+			href="https://github.com/WeebDev/lolisafe"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
@@ -8,15 +9,21 @@
 				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
 			</header>
 		</a>
-		<div v-if="loggedIn"
+		<div
+			v-if="loggedIn"
 			class="link"
 			@click="createShareXThing">
 			<header class="bd-footer-star-header">
-				<h4 class="bd-footer-title">ShareX</h4>
-				<p class="bd-footer-subtitle">Upload from your Desktop</p>
+				<h4 class="bd-footer-title">
+					ShareX
+				</h4>
+				<p class="bd-footer-subtitle">
+					Upload from your Desktop
+				</p>
 			</header>
 		</div>
-		<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
+		<a
+			href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
@@ -24,17 +31,23 @@
 				<p class="bd-footer-subtitle">Upload from any website</p>
 			</header>
 		</a>
-		<router-link to="/faq"
+		<router-link
+			to="/faq"
 			class="link">
 			<header class="bd-footer-star-header">
-				<h4 class="bd-footer-title">FAQ</h4>
-				<p class="bd-footer-subtitle">We got you covered</p>
+				<h4 class="bd-footer-title">
+					FAQ
+				</h4>
+				<p class="bd-footer-subtitle">
+					We got you covered
+				</p>
 			</header>
 		</router-link>
 	</div>
 </template>
 <script>
 import { saveAs } from 'file-saver';
+
 export default {
 	computed: {
 		loggedIn() {
diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
new file mode 100644
index 0000000..17c375a
--- /dev/null
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -0,0 +1,92 @@
+<template>
+	<b-dropdown
+		v-model="selectedOptions"
+		multiple
+		expanded
+		scrollable
+		inline
+		aria-role="list"
+		max-height="500px">
+		<button slot="trigger" class="button is-primary" type="button">
+			<span>Albums ({{ selectedOptions.length }})</span>
+			<b-icon icon="menu-down" />
+		</button>
+
+		<b-dropdown-item
+			v-for="album in orderedAlbums"
+			:key="album.id"
+			:value="album.id"
+			aria-role="listitem"
+			@click="handleClick(album.id)">
+			<span>{{ album.name }}</span>
+		</b-dropdown-item>
+	</b-dropdown>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Albuminfo',
+	props: {
+		imageId: {
+			type: Number,
+			default: 0
+		},
+		imageAlbums: {
+			type: Array,
+			default: () => []
+		},
+		albums: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			selectedOptions: [],
+			orderedAlbums: []
+		};
+	},
+	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);
+			return !!(found && found.id);
+		},
+		async handleClick(id) {
+			// here the album should be already removed from the selected list
+			if (this.selectedOptions.indexOf(id) > -1) {
+				this.$handler.executeAction('images/addToAlbum', {
+					albumId: id,
+					fileId: this.imageId
+				});
+			} else {
+				this.$handler.executeAction('images/removeFromAlbum', {
+					albumId: id,
+					fileId: this.imageId
+				});
+			}
+		}
+	}
+};
+</script>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
new file mode 100644
index 0000000..73b6339
--- /dev/null
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -0,0 +1,210 @@
+<template>
+	<div class="container has-background-lolisafe">
+		<div class="columns is-marginless">
+			<div class="column image-col has-centered-items">
+				<img v-if="!isVideo(file.type)" class="col-img" :src="file.url">
+				<video v-else class="col-vid" controls>
+					<source :src="file.url" :type="file.type">
+				</video>
+			</div>
+			<div class="column data-col is-one-third">
+				<div class="sticky">
+					<div class="divider is-lolisafe has-text-light">
+						File information
+					</div>
+					<b-field
+						label="ID"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.id }}</span>
+						</div>
+					</b-field>
+					<b-field
+						label="Name"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.name }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Original Name"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.original }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="IP"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.ip }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Link"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<a
+								class="fake-input"
+								:href="file.url"
+								target="_blank">{{ file.url }}</a>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Size"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ formatBytes(file.size) }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Hash"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.hash }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Uploaded"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input"><timeago :since="file.createdAt" /></span>
+						</div>
+					</b-field>
+
+					<div class="divider is-lolisafe has-text-light">
+						Tags
+					</div>
+					<Taginfo :imageId="file.id" :imageTags="tags" />
+
+					<div class="divider is-lolisafe has-text-light">
+						Albums
+					</div>
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+import Albuminfo from './AlbumInfo.vue';
+import Taginfo from './TagInfo.vue';
+
+export default {
+	components: {
+		Taginfo,
+		Albuminfo
+	},
+	props: {
+		file: {
+			type: Object,
+			default: () => ({})
+		},
+		albums: {
+			type: Array,
+			default: () => ([])
+		},
+		tags: {
+			type: Array,
+			default: () => ([])
+		}
+	},
+	computed: mapState({
+		images: (state) => state.images,
+		tinyDetails: (state) => state.albums.tinyDetails
+	}),
+	methods: {
+		formatBytes(bytes, decimals = 2) {
+			if (bytes === 0) return '0 Bytes';
+
+			const k = 1024;
+			const dm = decimals < 0 ? 0 : decimals;
+			const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+		},
+		isVideo(type) {
+			return type.startsWith('video');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/styles/_colors.scss';
+.modal-content, .modal-card {
+	max-height: 100%;
+}
+
+.fake-input {
+	font-size: 1rem !important;
+	height: 2.5rem;
+	border-color: #323846; /* $lolisafe */
+	max-width: 100%;
+	width: 100%;
+    border-radius: 4px;
+    display: inline-block;
+    font-size: 1rem;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-top: calc(0.375em - 1px);
+	background-color: #21252d;
+	border: 2px solid #21252d;
+	border-radius: 0.3em !important;
+
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.divider:first-child {
+    margin: 10px 0 25px;
+}
+
+.col-vid {
+	width: 100%;
+}
+
+.image-col {
+	align-items: start;
+}
+
+.data-col  {
+	@media screen and (min-width: 769px) {
+		padding-right: 1.5rem;
+	}
+	@media screen and (max-width: 769px) {
+		padding-bottom: 3rem;
+	}
+}
+</style>
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
new file mode 100644
index 0000000..59d01f5
--- /dev/null
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -0,0 +1,95 @@
+<template>
+	<b-field label="Add some tags">
+		<b-taginput
+			:value="selectedTags"
+			:data="filteredTags"
+			class="lolisafe taginp"
+			ellipsis
+			icon="label"
+			placeholder="Add a tag"
+			autocomplete
+			allow-new
+			@typing="getFilteredTags"
+			@add="tagAdded"
+			@remove="tagRemoved" />
+	</b-field>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Taginfo',
+	props: {
+		imageId: {
+			type: Number,
+			default: 0
+		},
+		imageTags: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			filteredTags: []
+		};
+	},
+	computed: {
+		...mapState({
+			tags: (state) => state.tags.tagsList
+		}),
+		selectedTags() { return this.imageTags.map((e) => e.name); },
+		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); }
+	},
+	methods: {
+		getFilteredTags(str) {
+			this.filteredTags = this.tags.map((e) => e.name).filter((e) => {
+				// check if the search string matches any of the tags
+				const sanitezedTag = e.toString().toLowerCase();
+				const matches = sanitezedTag.indexOf(str.toLowerCase()) >= 0;
+
+				// check if this tag is already added to our image, to avoid duplicates
+				if (matches) {
+					const foundIndex = this.lowercaseTags.indexOf(sanitezedTag);
+					if (foundIndex === -1) {
+						return true;
+					}
+				}
+
+				return false;
+			});
+		},
+		async tagAdded(tag) {
+			if (!tag) return;
+
+			// normalize into NFC form (diactirics and moonrunes)
+			// replace all whitespace with _
+			// replace multiple __ with a single one
+			tag = tag.normalize('NFC').replace(/\s/g, '_').replace(/_+/g, '_');
+
+			const foundIndex = this.tags.findIndex(({ name }) => name === tag);
+
+			if (foundIndex === -1) {
+				await this.$handler.executeAction('tags/createTag', tag);
+			}
+
+			await this.$handler.executeAction('images/addTag', { fileId: this.imageId, tagName: tag });
+		},
+		tagRemoved(tag) {
+			this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag });
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/styles/_colors.scss';
+
+.taginp {
+	::v-deep .dropdown-content {
+		background-color: #323846;
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+	}
+}
+</style>
diff --git a/src/site/components/loading/BulmaLoading.vue b/src/site/components/loading/BulmaLoading.vue
new file mode 100644
index 0000000..37cc5a5
--- /dev/null
+++ b/src/site/components/loading/BulmaLoading.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="loader-wrapper">
+		<div class="loader is-loading" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.loader-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		background: #fff;
+		opacity: 0;
+		z-index: -1;
+		transition: opacity .3s;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 6px;
+
+			.loader {
+				height: 80px;
+				width: 80px;
+			}
+
+		&.is-active {
+			opacity: 1;
+			z-index: 1;
+		}
+	}
+</style>
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index af31dac..71b5da5 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--cube-shadow" />
 </template>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index d1b523d..59c5d8f 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner-origami">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner loading">
 			<span class="slice" />
 			<span class="slice" />
@@ -23,7 +25,7 @@ export default {
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${(size / 60)})` };
 		},
 		styles() {
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index ac33e28..c04ae72 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -1,12 +1,14 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--ping-pong">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner">
 			<div class="board">
-				<div class="left"/>
-				<div class="right"/>
-				<div class="ball"/>
+				<div class="left" />
+				<div class="right" />
+				<div class="ball" />
 			</div>
 		</div>
 	</div>
@@ -22,7 +24,7 @@ export default {
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${size / 250})` };
 		},
 		styles() {
@@ -32,7 +34,7 @@ export default {
 			};
 		}
 	}
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 4da8300..7bc9bb0 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--rotate-square-2" />
 </template>
 
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 48dfeb1..22d41d4 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,70 +1,74 @@
 <template>
-	<nav :class="{ isWhite }"
-		class="navbar is-transparent">
-		<div class="navbar-brand">
-			<a role="button"
-				class="navbar-burger burger"
-				aria-label="menu"
-				aria-expanded="false"
-				data-target="navbarBasicExample">
-				<span aria-hidden="true" />
-				<span aria-hidden="true" />
-				<span aria-hidden="true" />
-			</a>
-		</div>
-		<div class="navbar-menu">
-			<div class="navbar-end">
+	<b-navbar
+		:class="{ isWhite }"
+		transparent>
+		<template slot="end">
+			<b-navbar-item tag="div">
 				<router-link
 					to="/"
 					class="navbar-item no-active"
 					exact>
 					Home
 				</router-link>
+			</b-navbar-item>
+			<b-navbar-item tag="div">
 				<router-link
-					to="/"
+					to="/faq"
 					class="navbar-item no-active"
 					exact>
 					Docs
 				</router-link>
-				<template v-if="loggedIn">
+			</b-navbar-item>
+			<template v-if="loggedIn">
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard"
 						class="navbar-item no-active"
 						exact>
 						Uploads
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard/albums"
 						class="navbar-item no-active"
 						exact>
 						Albums
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard/account"
 						class="navbar-item no-active"
 						exact>
 						Account
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/"
 						class="navbar-item no-active"
 						@click.native="logOut">
 						Logout
 					</router-link>
-				</template>
-				<template v-else>
+				</b-navbar-item>
+			</template>
+			<template v-else>
+				<b-navbar-item tag="div">
 					<router-link
 						class="navbar-item"
 						to="/login">
 						Login
 					</router-link>
-				</template>
-			</div>
-		</div>
-	</nav>
+				</b-navbar-item>
+			</template>
+		</template>
+	</b-navbar>
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 export default {
 	props: {
 		isWhite: {
@@ -76,20 +80,18 @@ export default {
 		return { hamburger: false };
 	},
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		config() {
-			return this.$store.state.config;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState(['config'])
 	},
 	methods: {
-		logOut() {
-			this.$store.dispatch('logout');
+		async logOut() {
+			await this.$store.dispatch('auth/logout');
+			this.$router.replace('/login');
 		}
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	nav.navbar {
@@ -135,4 +137,8 @@ export default {
 			}
 		}
 	}
+
+	.no-active {
+		text-decoration: none !important;
+	}
 </style>
diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
new file mode 100644
index 0000000..1c5b983
--- /dev/null
+++ b/src/site/components/search-input/SearchInput.vue
@@ -0,0 +1,516 @@
+<template>
+	<div
+		class="autocomplete control"
+		:class="{'is-expanded': expanded}">
+		<b-input
+			ref="input"
+			v-model="newValue"
+			type="text"
+			:size="size"
+			:loading="loading"
+			:rounded="rounded"
+			:icon="icon"
+			:icon-right="newIconRight"
+			:icon-right-clickable="newIconRightClickable"
+			:icon-pack="iconPack"
+			:maxlength="maxlength"
+			:autocomplete="newAutocomplete"
+			:use-html5-validation="false"
+			v-bind="$attrs"
+			@input="onInput"
+			@focus="focused"
+			@blur="onBlur"
+			@keyup.native.esc.prevent="isActive = false"
+			@keydown.native.tab="tabPressed"
+			@keydown.native.enter.prevent="enterPressed"
+			@keydown.native.up.prevent="keyArrows('up')"
+			@keydown.native.down.prevent="keyArrows('down')"
+			@icon-right-click="rightIconClick"
+			@icon-click="(event) => $emit('icon-click', event)" />
+
+		<transition name="fade">
+			<div
+				v-show="isActive && (data.length > 0 || hasEmptySlot || hasHeaderSlot)"
+				ref="dropdown"
+				class="dropdown-menu"
+				:class="{ 'is-opened-top': isOpenedTop && !appendToBody }"
+				:style="style">
+				<div
+					v-show="isActive"
+					class="dropdown-content"
+					:style="contentStyle">
+					<div
+						v-if="hasHeaderSlot"
+						class="dropdown-item">
+						<slot name="header" />
+					</div>
+					<a
+						v-for="(option, index) in data"
+						:key="index"
+						class="dropdown-item"
+						:class="{ 'is-hovered': option === hovered }"
+						@click="setSelected(option, undefined, $event)">
+
+						<slot
+							v-if="hasDefaultSlot"
+							:option="option"
+							:index="index" />
+						<span v-else>
+							{{ getValue(option, true) }}
+						</span>
+					</a>
+					<div
+						v-if="data.length === 0 && hasEmptySlot"
+						class="dropdown-item is-disabled">
+						<slot name="empty" />
+					</div>
+					<div
+						v-if="hasFooterSlot"
+						class="dropdown-item">
+						<slot name="footer" />
+					</div>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/no-reserved-keys */
+import { getValueByPath, removeElement, createAbsoluteElement } from '../../../../node_modules/buefy/src/utils/helpers';
+import FormElementMixin from '../../../../node_modules/buefy/src/utils/FormElementMixin';
+
+export default {
+	name: 'SearchInput',
+	mixins: [FormElementMixin],
+	inheritAttrs: false,
+	props: {
+		value: [Number, String],
+		data: {
+			type: Array,
+			default: () => []
+		},
+		field: {
+			type: String,
+			default: 'value'
+		},
+		keepFirst: Boolean,
+		clearOnSelect: Boolean,
+		openOnFocus: Boolean,
+		customFormatter: Function,
+		checkInfiniteScroll: Boolean,
+		keepOpen: Boolean,
+		clearable: Boolean,
+		maxHeight: [String, Number],
+		dropdownPosition: {
+			type: String,
+			default: 'auto'
+		},
+		iconRight: String,
+		iconRightClickable: Boolean,
+		appendToBody: Boolean,
+		customSelector: Function
+	},
+	data() {
+		return {
+			selected: null,
+			hovered: null,
+			isActive: false,
+			newValue: this.value,
+			newAutocomplete: this.autocomplete || 'off',
+			isListInViewportVertically: true,
+			hasFocus: false,
+			style: {},
+			_isAutocomplete: true,
+			_elementRef: 'input',
+			_bodyEl: undefined // Used to append to body
+		};
+	},
+	computed: {
+		/**
+         * White-listed items to not close when clicked.
+         * Add input, dropdown and all children.
+         */
+		whiteList() {
+			const whiteList = [];
+			whiteList.push(this.$refs.input.$el.querySelector('input'));
+			whiteList.push(this.$refs.dropdown);
+			// Add all chidren from dropdown
+			if (this.$refs.dropdown !== undefined) {
+				const children = this.$refs.dropdown.querySelectorAll('*');
+				for (const child of children) {
+					whiteList.push(child);
+				}
+			}
+			if (this.$parent.$data._isTaginput) {
+				// Add taginput container
+				whiteList.push(this.$parent.$el);
+				// Add .tag and .delete
+				const tagInputChildren = this.$parent.$el.querySelectorAll('*');
+				for (const tagInputChild of tagInputChildren) {
+					whiteList.push(tagInputChild);
+				}
+			}
+			return whiteList;
+		},
+		/**
+         * Check if exists default slot
+         */
+		hasDefaultSlot() {
+			return !!this.$scopedSlots.default;
+		},
+		/**
+         * Check if exists "empty" slot
+         */
+		hasEmptySlot() {
+			return !!this.$slots.empty;
+		},
+		/**
+         * Check if exists "header" slot
+         */
+		hasHeaderSlot() {
+			return !!this.$slots.header;
+		},
+		/**
+         * Check if exists "footer" slot
+         */
+		hasFooterSlot() {
+			return !!this.$slots.footer;
+		},
+		/**
+         * Apply dropdownPosition property
+         */
+		isOpenedTop() {
+			return this.dropdownPosition === 'top' || (this.dropdownPosition === 'auto' && !this.isListInViewportVertically);
+		},
+		newIconRight() {
+			if (this.clearable && this.newValue) {
+				return 'close-circle';
+			}
+			return this.iconRight;
+		},
+		newIconRightClickable() {
+			if (this.clearable) {
+				return true;
+			}
+			return this.iconRightClickable;
+		},
+		contentStyle() {
+			return {
+				// eslint-disable-next-line no-nested-ternary
+				maxHeight: this.maxHeight === undefined
+					// eslint-disable-next-line no-restricted-globals
+					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`)
+			};
+		}
+	},
+	watch: {
+		/**
+         * When dropdown is toggled, check the visibility to know when
+         * to open upwards.
+         */
+		isActive(active) {
+			if (this.dropdownPosition === 'auto') {
+				if (active) {
+					this.calcDropdownInViewportVertical();
+				} else {
+					// Timeout to wait for the animation to finish before recalculating
+					setTimeout(() => {
+						this.calcDropdownInViewportVertical();
+					}, 100);
+				}
+			}
+			if (active) this.$nextTick(() => this.setHovered(null));
+		},
+		/**
+         * When updating input's value
+         *   1. Emit changes
+         *   2. If value isn't the same as selected, set null
+         *   3. Close dropdown if value is clear or else open it
+         */
+		newValue(value) {
+			this.$emit('input', value);
+			// Check if selected is invalid
+			const currentValue = this.getValue(this.selected);
+			if (currentValue && currentValue !== value) {
+				this.setSelected(null, false);
+			}
+			// Close dropdown if input is clear or else open it
+			if (this.hasFocus && (!this.openOnFocus || value)) {
+				this.isActive = !!value;
+			}
+		},
+		/**
+         * When v-model is changed:
+         *   1. Update internal value.
+         *   2. If it's invalid, validate again.
+         */
+		value(value) {
+			this.newValue = value;
+		},
+		/**
+         * Select first option if "keep-first
+         */
+		data(value) {
+			// Keep first option always pre-selected
+			if (this.keepFirst) {
+				this.selectFirstOption(value);
+			}
+		}
+	},
+	created() {
+		if (typeof window !== 'undefined') {
+			document.addEventListener('click', this.clickedOutside);
+			if (this.dropdownPosition === 'auto') window.addEventListener('resize', this.calcDropdownInViewportVertical);
+		}
+	},
+	mounted() {
+		if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+			const list = this.$refs.dropdown.querySelector('.dropdown-content');
+			list.addEventListener('scroll', () => this.checkIfReachedTheEndOfScroll(list));
+		}
+		if (this.appendToBody) {
+			this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown);
+			this.updateAppendToBody();
+		}
+	},
+	beforeDestroy() {
+		if (typeof window !== 'undefined') {
+			document.removeEventListener('click', this.clickedOutside);
+			if (this.dropdownPosition === 'auto') window.removeEventListener('resize', this.calcDropdownInViewportVertical);
+		}
+		if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+			const list = this.$refs.dropdown.querySelector('.dropdown-content');
+			list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+		}
+		if (this.appendToBody) {
+			removeElement(this.$data._bodyEl);
+		}
+	},
+	methods: {
+		/**
+         * Set which option is currently hovered.
+         */
+		setHovered(option) {
+			if (option === undefined) return;
+			this.hovered = option;
+		},
+		/**
+         * Set which option is currently selected, update v-model,
+         * update input value and close dropdown.
+         */
+		setSelected(option, closeDropdown = true, event = undefined) {
+			if (option === undefined) return;
+			this.selected = option;
+			this.$emit('select', this.selected, event);
+			if (this.selected !== null) {
+				if (this.customSelector) {
+					this.newValue = this.clearOnSelect ? '' : this.customSelector(this.selected, this.newValue);
+				} else {
+					this.newValue = this.clearOnSelect ? '' : this.getValue(this.selected);
+				}
+				this.setHovered(null);
+			}
+			// eslint-disable-next-line no-unused-expressions
+			closeDropdown && this.$nextTick(() => { this.isActive = false; });
+			this.checkValidity();
+		},
+		/**
+         * Select first option
+         */
+		selectFirstOption(options) {
+			this.$nextTick(() => {
+				if (options.length) {
+					// If has visible data or open on focus, keep updating the hovered
+					if (this.openOnFocus || (this.newValue !== '' && this.hovered !== options[0])) {
+						this.setHovered(options[0]);
+					}
+				} else {
+					this.setHovered(null);
+				}
+			});
+		},
+		/**
+         * Enter key listener.
+         * Select the hovered option.
+         */
+		enterPressed(event) {
+			if (this.hovered === null) return;
+			this.setSelected(this.hovered, !this.keepOpen, event);
+		},
+		/**
+         * Tab key listener.
+         * Select hovered option if it exists, close dropdown, then allow
+         * native handling to move to next tabbable element.
+         */
+		tabPressed(event) {
+			if (this.hovered === null) {
+				this.isActive = false;
+				return;
+			}
+			this.setSelected(this.hovered, !this.keepOpen, event);
+		},
+		/**
+         * Close dropdown if clicked outside.
+         */
+		clickedOutside(event) {
+			if (this.whiteList.indexOf(event.target) < 0) this.isActive = false;
+		},
+		/**
+         * Return display text for the input.
+         * If object, get value from path, or else just the value.
+         */
+		getValue(option) {
+			if (option === null) return;
+			if (typeof this.customFormatter !== 'undefined') {
+				// eslint-disable-next-line consistent-return
+				return this.customFormatter(option);
+			}
+			// eslint-disable-next-line consistent-return
+			return typeof option === 'object'
+				? getValueByPath(option, this.field)
+				: option;
+		},
+		/**
+         * Check if the scroll list inside the dropdown
+         * reached it's end.
+         */
+		checkIfReachedTheEndOfScroll(list) {
+			if (list.clientHeight !== list.scrollHeight
+                && list.scrollTop + list.clientHeight >= list.scrollHeight) {
+				this.$emit('infinite-scroll');
+			}
+		},
+		/**
+         * Calculate if the dropdown is vertically visible when activated,
+         * otherwise it is openened upwards.
+         */
+		calcDropdownInViewportVertical() {
+			this.$nextTick(() => {
+				/**
+                * this.$refs.dropdown may be undefined
+                * when Autocomplete is conditional rendered
+                */
+				if (this.$refs.dropdown === undefined) return;
+				const rect = this.$refs.dropdown.getBoundingClientRect();
+				this.isListInViewportVertically = (
+					rect.top >= 0
+                    && rect.bottom <= (window.innerHeight
+                        || document.documentElement.clientHeight)
+				);
+				if (this.appendToBody) {
+					this.updateAppendToBody();
+				}
+			});
+		},
+		/**
+         * Arrows keys listener.
+         * If dropdown is active, set hovered option, or else just open.
+         */
+		keyArrows(direction) {
+			const sum = direction === 'down' ? 1 : -1;
+			if (this.isActive) {
+				let index = this.data.indexOf(this.hovered) + sum;
+				index = index > this.data.length - 1 ? this.data.length : index;
+				index = index < 0 ? 0 : index;
+				this.setHovered(this.data[index]);
+				const list = this.$refs.dropdown.querySelector('.dropdown-content');
+				const element = list.querySelectorAll('a.dropdown-item:not(.is-disabled)')[index];
+				if (!element) return;
+				const visMin = list.scrollTop;
+				const visMax = list.scrollTop + list.clientHeight - element.clientHeight;
+				if (element.offsetTop < visMin) {
+					list.scrollTop = element.offsetTop;
+				} else if (element.offsetTop >= visMax) {
+					list.scrollTop = (
+						element.offsetTop
+                        - list.clientHeight
+                        + element.clientHeight
+					);
+				}
+			} else {
+				this.isActive = true;
+			}
+		},
+		/**
+         * Focus listener.
+         * If value is the same as selected, select all text.
+         */
+		focused(event) {
+			if (this.getValue(this.selected) === this.newValue) {
+				this.$el.querySelector('input').select();
+			}
+			if (this.openOnFocus) {
+				this.isActive = true;
+				if (this.keepFirst) {
+					this.selectFirstOption(this.data);
+				}
+			}
+			this.hasFocus = true;
+			this.$emit('focus', event);
+		},
+		/**
+        * Blur listener.
+        */
+		onBlur(event) {
+			this.hasFocus = false;
+			this.$emit('blur', event);
+		},
+		onInput() {
+			const currentValue = this.getValue(this.selected);
+			if (currentValue && currentValue === this.newValue) return;
+			this.$emit('typing', this.newValue);
+			this.checkValidity();
+		},
+		rightIconClick(event) {
+			if (this.clearable) {
+				this.newValue = '';
+				if (this.openOnFocus) {
+					this.$el.focus();
+				}
+			} else {
+				this.$emit('icon-right-click', event);
+			}
+		},
+		checkValidity() {
+			if (this.useHtml5Validation) {
+				this.$nextTick(() => {
+					this.checkHtml5Validity();
+				});
+			}
+		},
+		updateAppendToBody() {
+			const dropdownMenu = this.$refs.dropdown;
+			const trigger = this.$refs.input.$el;
+			if (dropdownMenu && trigger) {
+				// update wrapper dropdown
+				const root = this.$data._bodyEl;
+				root.classList.forEach((item) => root.classList.remove(item));
+				root.classList.add('autocomplete');
+				root.classList.add('control');
+				if (this.expandend) {
+					root.classList.add('is-expandend');
+				}
+				const rect = trigger.getBoundingClientRect();
+				let top = rect.top + window.scrollY;
+				const left = rect.left + window.scrollX;
+				if (!this.isOpenedTop) {
+					top += trigger.clientHeight;
+				} else {
+					top -= dropdownMenu.clientHeight;
+				}
+				this.style = {
+					position: 'absolute',
+					top: `${top}px`,
+					left: `${left}px`,
+					width: `${trigger.clientWidth}px`,
+					maxWidth: `${trigger.clientWidth}px`,
+					zIndex: '99'
+				};
+			}
+		}
+	}
+};
+</script>
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
new file mode 100644
index 0000000..778474c
--- /dev/null
+++ b/src/site/components/search/Search.vue
@@ -0,0 +1,136 @@
+<template>
+	<div class="level-right">
+		<div class="level-item">
+			<b-field>
+				<SearchInput
+					ref="autocomplete"
+					v-model="query"
+					:data="filteredHints"
+					:customSelector="handleSelect"
+					field="name"
+					class="lolisafe-input search"
+					placeholder="Search"
+					type="search"
+					open-on-focus
+					@typing="handleTyping"
+					@keydown.native.enter="onSubmit">
+					<template slot-scope="props">
+						<b>{{ props.option.name }}:</b>
+						<small>
+							{{ props.option.valueFormat }}
+						</small>
+					</template>
+				</SearchInput>
+				<p class="control">
+					<b-button type="is-lolisafe" @click="onSubmit">
+						Search
+					</b-button>
+				</p>
+			</b-field>
+		</div>
+	</div>
+</template>
+
+<script>
+import SearchInput from '~/components/search-input/SearchInput.vue';
+
+export default {
+	components: {
+		SearchInput
+	},
+	props: {
+		hiddenHints: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			query: '',
+			hints: [
+				{
+					'name': 'tag',
+					'valueFormat': 'name',
+					'hint': ''
+				},
+				{
+					'name': 'album',
+					'valueFormat': 'name',
+					'hint': ''
+				},
+				{
+					'name': 'before',
+					'valueFormat': 'specific date',
+					'hint': ''
+				},
+				{
+					'name': 'during',
+					'valueFormat': 'specific date',
+					'hint': ''
+				},
+				{
+					'name': 'after',
+					'valueFormat': 'specific date',
+					'hint': ''
+				},
+				{
+					'name': 'file',
+					'valueFormat': 'generated name',
+					'hint': ''
+				}
+			],
+			filteredHints: []
+		};
+	},
+	created() {
+		this.hints = this.hints.filter(({ name }) => this.hiddenHints.indexOf(name) === -1);
+		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
+	},
+	methods: {
+		handleSelect(selected, currentValue) {
+			this.$refs.autocomplete.focus();
+			if (!currentValue) { return `${selected.name}:`; }
+			if (/[^:][\s|;|,]+$/gi.test(currentValue)) return `${currentValue}${selected.name}:`;
+			return currentValue.replace(/\w+$/gi, `${selected.name}:`);
+		},
+		handleTyping(qry) {
+			qry = qry || '';
+			// get the last word or group of words
+			let lastWord = (qry.match(/("[^"]*")|[^\s]+/g) || ['']).pop().toLowerCase();
+			// if there's an open/unbalanced quote, don't autosuggest
+			if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; }
+			// don't autosuggest if we have an open query but no text yet
+			if (/:\s+$/gi.test(qry)) { this.filteredHints = []; return; }
+			// if the above query didn't match (all quotes are balanced
+			// and the previous tag has value
+			// check if we're about to start a new tag
+			if (/\s+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+
+			// ignore starting `-` from lastword, because - is used to
+			// exclude something, so -alb should autosuggest album
+			lastWord = lastWord.replace(/^-/, '');
+
+			// if we got here, then we handled all special cases
+			// now take last word, and check if we can autosuggest a tag
+			this.filteredHints = this.hints.filter((hint) => hint.name
+				.toString()
+				.toLowerCase()
+				.indexOf(lastWord) === 0);
+		},
+		onSubmit(event) {
+			if (event.key === 'Enter') {
+				if (/:$/gi.test(this.query)) { return; }
+			}
+			this.$emit('search', this.query, event);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.search {
+		::v-deep .dropdown-content {
+			background-color: #323846;
+		}
+	}
+</style>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index a2ad3f4..e0c8fa2 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,64 +1,80 @@
 <template>
-	<div class="dashboard-menu">
-		<router-link to="/dashboard">
-			<i class="icon-com-pictures" />Files
-		</router-link>
-		<router-link to="/dashboard/albums">
-			<i class="icon-interface-window" />Albums
-		</router-link>
-		<!--
-		<router-link to="/dashboard/tags">
-			<i class="icon-ecommerce-tag-c" />Tags
-		</router-link>
-		-->
-		<router-link to="/dashboard/account">
-			<i class="icon-ecommerce-tag-c" />Account
-		</router-link>
-		<template v-if="user && user.isAdmin">
-			<router-link to="/dashboard/admin/users">
-				<i class="icon-setting-gear-a" />Users
-			</router-link>
-			<!--
-			TODO: Dont wanna deal with this now
-			<router-link to="/dashboard/admin/settings">
-				<i class="icon-setting-gear-a" />Settings
-			</router-link>
-			-->
-		</template>
-	</div>
+	<b-menu class="dashboard-menu">
+		<b-menu-list label="Menu">
+			<b-menu-item
+				class="item"
+				icon="information-outline"
+				label="Dashboard"
+				tag="nuxt-link"
+				to="/dashboard"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="image-multiple-outline"
+				label="Albums"
+				tag="nuxt-link"
+				to="/dashboard/albums"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="tag-outline"
+				label="Tags"
+				tag="nuxt-link"
+				to="/dashboard/tags"
+				exact />
+			<b-menu-item icon="menu" expanded>
+				<template slot="label" slot-scope="props">
+					Administration
+					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
+				</template>
+				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
+				<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
+			</b-menu-item>
+			<b-menu-item
+				class="item"
+				icon="account-cog-outline"
+				label="My account"
+				tag="nuxt-link"
+				to="/dashboard/account"
+				exact />
+		</b-menu-list>
+		<b-menu-list label="Actions">
+			<b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact />
+		</b-menu-list>
+	</b-menu>
 </template>
 <script>
+import { mapState } from 'vuex';
+
 export default {
-	computed: {
-		user() {
-			return this.$store.state.user;
+	computed: mapState({
+		user: (state) => state.auth.user
+	}),
+	methods: {
+		isRouteActive(id) {
+			if (this.$route.path.includes(id)) {
+				return true;
+			}
+			return false;
 		}
 	}
 };
+
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.dashboard-menu {
-		padding: 2rem;
-		border-radius: 8px;
+		::v-deep a:hover {
+			cursor: pointer;
+			text-decoration: none;
+		}
 
-		a {
-			display: block;
-			font-weight: 700;
-			color: $textColor;
-			position: relative;
-			padding-left: 40px;
-			height: 35px;
-			&:hover{
-				color: white;
-			}
+		::v-deep .icon {
+			margin-right: 0.5rem;
+		}
 
-			i {
-				position: absolute;
-				font-size: 1.5em;
-				top: -4px;
-				left: 5px;
-			}
+		::v-deep .icon.is-pulled-right {
+			margin-right: 0;
 		}
 
 		hr { margin-top: 0.6em; }
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 1b03ff8..2740bee 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :class="{ 'has-files': alreadyAddedFiles }"
+	<div
+		:class="{ 'has-files': alreadyAddedFiles }"
 		class="uploader-wrapper">
-		<b-select v-if="loggedIn"
+		<b-select
+			v-if="loggedIn"
 			v-model="selectedAlbum"
 			placeholder="Upload to album"
 			size="is-medium"
@@ -13,7 +15,8 @@
 				{{ album.name }}
 			</option>
 		</b-select>
-		<dropzone v-if="showDropzone"
+		<dropzone
+			v-if="showDropzone"
 			id="dropzone"
 			ref="el"
 			:options="dropzoneOptions"
@@ -25,16 +28,22 @@
 			Add or drop more files
 		</label>
 
-		<div id="template"
+		<div
+			id="template"
 			ref="template">
 			<div class="dz-preview dz-file-preview">
 				<div class="dz-details">
-					<div class="dz-filename"><span data-dz-name /></div>
-					<div class="dz-size"><span data-dz-size /></div>
+					<div class="dz-filename">
+						<span data-dz-name />
+					</div>
+					<div class="dz-size">
+						<span data-dz-size />
+					</div>
 				</div>
 				<div class="result">
 					<div class="openLink">
-						<a class="link"
+						<a
+							class="link"
 							target="_blank">
 							Link
 						</a>
@@ -43,14 +52,16 @@
 				<div class="error">
 					<div>
 						<span>
-							<span class="error-message"
+							<span
+								class="error-message"
 								data-dz-errormessage />
 							<i class="icon-web-warning" />
 						</span>
 					</div>
 				</div>
 				<div class="dz-progress">
-					<span class="dz-upload"
+					<span
+						class="dz-upload"
 						data-dz-uploadprogress />
 				</div>
 				<!--
@@ -64,6 +75,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 import Dropzone from 'nuxt-dropzone';
 import '~/assets/styles/dropzone.scss';
 
@@ -75,20 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			albums: [],
 			selectedAlbum: null
 		};
 	},
 	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-		token() {
-			return this.$store.state.token;
-		},
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		}
+		...mapState({
+			config: (state) => state.config,
+			albums: (state) => state.albums.tinyDetails
+		}),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' })
 	},
 	watch: {
 		loggedIn() {
@@ -129,8 +137,11 @@ export default {
 			Get all available albums so the user can upload directly to one (or several soon™) of them.
 		*/
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
-			this.albums = response.albums;
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 			this.updateDropzoneConfig();
 		},
 
@@ -150,7 +161,7 @@ export default {
 		/*
 			Dropzone stuff
 		*/
-		dropzoneFilesAdded(files) {
+		dropzoneFilesAdded() {
 			this.alreadyAddedFiles = true;
 		},
 		dropzoneSuccess(file, response) {
@@ -161,6 +172,7 @@ export default {
 				text: 'There was an error uploading this file. Check the console.',
 				error: true
 			});
+			// eslint-disable-next-line no-console
 			console.error(file, message, xhr);
 		},
 		async dropzoneChunksUploaded(file, done) {
@@ -175,7 +187,6 @@ export default {
 			});
 
 			this.processResult(file, data);
-			this.$forceUpdate();
 			return done();
 		},