Fully migrate to the new Virtual Grid

Signed-off-by: Corentin Mors <corentin.mors@dashlane.com>

9 files changed, 188 insertions, 429 deletions

diff --git a/src/components/File.vue b/src/components/File.vue
index 0b301ec3..591a78b9 100644
--- a/src/components/File.vue
+++ b/src/components/File.vue
@@ -1,10 +1,10 @@
 <!--
- - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @copyright Copyright (c) 2020 Corentin Mors
  -
  - @license GNU AGPL version 3 or any later version
  -
+ - @author Corentin Mors <medias@pixelswap.fr>
+ -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
@@ -26,13 +26,13 @@
 		:href="davPath"
 		:aria-label="ariaLabel"
 		@click.prevent="openViewer">
-		<div v-if="mime.includes('video') && hasPreview" class="icon-video-white" />
+		<div v-if="item.injected.mime.includes('video') && hasPreview" class="icon-video-white" />
 		<!-- image and loading placeholder -->
 		<transition name="fade">
 			<img v-show="loaded"
 				ref="img"
 				:src="src"
-				:alt="basename"
+				:alt="item.injected.basename"
 				:aria-describedby="ariaUuid"
 				@load="onLoad">
 		</transition>
@@ -45,7 +45,7 @@
 		</svg>
 
 		<!-- image name and cover -->
-		<p :id="ariaUuid" class="hidden-visually">{{ basename }}</p>
+		<p :id="ariaUuid" class="hidden-visually">{{ item.injected.basename }}</p>
 		<div class="cover" role="none" />
 	</a>
 </template>
@@ -59,34 +59,10 @@ export default {
 	inheritAttrs: false,
 
 	props: {
-		basename: {
-			type: String,
-			required: true,
-		},
-		filename: {
-			type: String,
-			required: true,
-		},
-		etag: {
-			type: String,
-			required: true,
-		},
-		fileid: {
-			type: Number,
+		item: {
+			type: Object,
 			required: true,
 		},
-		mime: {
-			type: String,
-			required: true,
-		},
-		list: {
-			type: Array,
-			required: true,
-		},
-		loadMore: {
-			type: Function,
-			default: () => ([]),
-		},
 	},
 
 	data() {
@@ -97,19 +73,19 @@ export default {
 
 	computed: {
 		davPath() {
-			return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + this.filename
+			return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + this.item.injected.filename
 		},
 		ariaUuid() {
-			return `image-${this.fileid}`
+			return `image-${this.item.injected.fileid}`
 		},
 		ariaLabel() {
-			return t('photos', 'Open the full size "{name}" image', { name: this.basename })
+			return t('photos', 'Open the full size "{name}" image', { name: this.item.injected.basename })
 		},
 		isImage() {
-			return this.mime.startsWith('image')
+			return this.item.injected.mime.startsWith('image')
 		},
 		src() {
-			return generateUrl(`/core/preview?fileId=${this.fileid}&x=${256}&y=${256}&a=false&v=${this.etag}`)
+			return generateUrl(`/core/preview?fileId=${this.item.injected.fileid}&x=${256}&y=${256}&a=false&v=${this.item.injected.etag}`)
 		},
 	},
 
@@ -120,8 +96,14 @@ export default {
 
 	methods: {
 		openViewer() {
-			OCA.Viewer.open({ path: this.filename, list: this.list, loadMore: this.loadMore })
+			OCA.Viewer.open({
+				path: this.item.injected.filename,
+				list: this.item.injected.list,
+				loadMore: async() => await this.item.injected.loadMore(true),
+			})
 		},
+
+		/** When the image is fully loaded by browser we remove the placeholder */
 		onLoad() {
 			this.loaded = true
 		},
@@ -153,4 +135,8 @@ svg {
 	width: 70%;
 	height: 70%;
 }
+
+.file--clear {
+	background: var(--color-background-hover);
+}
 </style>
diff --git a/src/components/FileVirtualGrid.vue b/src/components/FileVirtualGrid.vue
deleted file mode 100644
index 6f921f1b..00000000
--- a/src/components/FileVirtualGrid.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
- - @copyright Copyright (c) 2020 Corentin Mors
- -
- - @license GNU AGPL version 3 or any later version
- -
- - @author Corentin Mors <medias@pixelswap.fr>
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-
-<template>
-	<a :class="{'file--clear': !loaded}"
-		class="file"
-		:href="davPath"
-		:aria-label="ariaLabel"
-		@click.prevent="openViewer">
-		<div v-if="item.injected.mime.includes('video') && hasPreview" class="icon-video-white" />
-		<!-- image and loading placeholder -->
-		<transition name="fade">
-			<img v-show="loaded"
-				ref="img"
-				:src="src"
-				:alt="item.injected.basename"
-				:aria-describedby="ariaUuid"
-				@load="onLoad">
-		</transition>
-		<svg v-if="!loaded"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 32 32"
-			fill="url(#placeholder__gradient)">
-			<use v-if="isImage" xlink:href="#placeholder--img" />
-			<use v-else xlink:href="#placeholder--video" />
-		</svg>
-
-		<!-- image name and cover -->
-		<p :id="ariaUuid" class="hidden-visually">{{ item.injected.basename }}</p>
-		<div class="cover" role="none" />
-	</a>
-</template>
-
-<script>
-import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
-import { getCurrentUser } from '@nextcloud/auth'
-
-export default {
-	name: 'FileVirtualGrid',
-	inheritAttrs: false,
-
-	props: {
-		item: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			loaded: false,
-		}
-	},
-
-	computed: {
-		davPath() {
-			return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + this.item.injected.filename
-		},
-		ariaUuid() {
-			return `image-${this.item.injected.fileid}`
-		},
-		ariaLabel() {
-			return t('photos', 'Open the full size "{name}" image', { name: this.item.injected.basename })
-		},
-		isImage() {
-			return this.item.injected.mime.startsWith('image')
-		},
-		src() {
-			return generateUrl(`/core/preview?fileId=${this.item.injected.fileid}&x=${256}&y=${256}&a=false&v=${this.item.injected.etag}`)
-		},
-	},
-
-	beforeDestroy() {
-		// cancel any pending load
-		this.$refs.src = ''
-	},
-
-	methods: {
-		openViewer() {
-			OCA.Viewer.open({
-				path: this.item.injected.filename,
-				list: this.item.injected.list,
-				loadMore: async() => await this.item.injected.loadMore(true),
-			})
-		},
-
-		/** When the image is fully loaded by browser we remove the placeholder */
-		onLoad() {
-			this.loaded = true
-		},
-	},
-
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../mixins/FileFolder.scss';
-
-.icon-video-white {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	z-index: 5;
-}
-
-img {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-
-	object-fit: cover;
-}
-
-svg {
-	position: absolute;
-	width: 70%;
-	height: 70%;
-}
-
-.file--clear {
-	background: var(--color-background-hover);
-}
-</style>
diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index 9dc94f83..84053fbf 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -2,6 +2,7 @@
  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @author Corentin Mors <medias@pixelswap.fr>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -21,9 +22,9 @@
  -->
 
 <template>
-	<FolderTagPreview :id="fileid"
-		:name="basename"
-		:path="filename"
+	<FolderTagPreview :id="item.injected.fileid"
+		:name="item.injected.basename"
+		:path="item.injected.filename"
 		:file-list="fileList" />
 </template>
 
@@ -43,22 +44,10 @@ export default {
 	inheritAttrs: false,
 
 	props: {
-		basename: {
-			type: String,
+		item: {
+			type: Object,
 			required: true,
 		},
-		filename: {
-			type: String,
-			required: true,
-		},
-		fileid: {
-			type: Number,
-			required: true,
-		},
-		showShared: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	data() {
@@ -76,7 +65,7 @@ export default {
 
 		// files list of the current folder
 		folderContent() {
-			return this.folders[this.fileid]
+			return this.folders[this.item.injected.fileid]
 		},
 		fileList() {
 			return this.folderContent
@@ -95,12 +84,12 @@ export default {
 
 		try {
 			// get data
-			const { folder, folders, files } = await request(this.filename, { shared: this.showShared })
+			const { folder, folders, files } = await request(this.item.injected.filename, { shared: this.item.injected.showShared })
 			this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
 			this.$store.dispatch('updateFiles', { folder, files, folders })
 		} catch (error) {
 			if (error.response && error.response.status) {
-				console.error('Failed to get folder content', this.folder, error.response)
+				console.error('Failed to get folder content', this.item.injected.folder, error.response)
 			}
 			// else we just cancelled the request
 		} finally {
diff --git a/src/components/Grid.vue b/src/components/Grid.vue
deleted file mode 100644
index 822ecd10..00000000
--- a/src/components/Grid.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
- - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-
-<template>
-	<!-- Folder content -->
-	<transition-group
-		class="photos-grid"
-		role="grid"
-		name="list"
-		tag="div">
-		<slot />
-		<div key="footer" role="none" class="photos-grid__footer-spacer" />
-	</transition-group>
-</template>
-
-<script>
-export default {
-	name: 'Grid',
-}
-</script>
-
-<style scoped lang="scss">
-.photos-grid {
-	display: grid;
-	align-items: center;
-	justify-content: center;
-	grid-template-columns: repeat(10, 1fr);
-	position: relative;
-
-	// always put one more row of grid for the spacer
-	&__footer-spacer {
-		// always add one row, so placing it on the first
-		// column will always add one more
-		grid-column: 1;
-		// same height as the width
-		padding-bottom: 100%;
-	}
-}
-
-.list-move {
-	transition: transform var(--animation-quick);
-}
-
-// TODO: use mixins/GridSizes as soon as node-sass supports it
-// needs node-sass 5.0 (with libsass 3.6)
-// https://github.com/sass/node-sass/pull/2312
-$previous: 0;
-@each $size, $config in get('sizes') {
-	$count: map-get($config, 'count');
-	$marginTop: map-get($config, 'marginTop');
-	$marginW: map-get($config, 'marginW');
-	$gap: map-get($config, 'gap');
-
-	// if this is the last entry, only use min-width
-	$rule: '(min-width: #{$previous}px) and (max-width: #{$size}px)';
-	@if $size == 'max' {
-		$rule: '(min-width: #{$previous}px)';
-	}
-
-	@media #{$rule} {
-		.photos-grid {
-			gap: #{$gap}px;
-			padding: #{$marginTop}px #{$marginW}px #{$marginW}px #{$marginW}px;
-			grid-template-columns: repeat($count, 1fr);
-		}
-	}
-	$previous: $size;
-}
-</style>
diff --git a/src/components/GridRow.vue b/src/components/GridRow.vue
deleted file mode 100644
index 6ba385da..00000000
--- a/src/components/GridRow.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--
- - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-
-<template>
-	<!-- Folder content -->
-	<transition-group
-		class="photos-grid-row"
-		role="grid"
-		name="list"
-		tag="div">
-		<slot />
-	</transition-group>
-</template>
-
-<script>
-export default {
-	name: 'GridRow',
-}
-</script>
-
-<style scoped lang="scss">
-.photos-grid-row {
-	display: grid;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	margin-bottom: 8px;
-	grid-template-columns: repeat(10, 1fr);
-	position: relative;
-}
-
-.list-move {
-	transition: transform 2s;
-}
-
-// TODO: use mixins/GridSizes as soon as node-sass supports it
-// needs node-sass 5.0 (with libsass 3.6)
-// https://github.com/sass/node-sass/pull/2312
-$previous: 0;
-@each $size, $config in get('sizes') {
-	$count: map-get($config, 'count');
-	$marginTop: map-get($config, 'marginTop');
-	$marginW: map-get($config, 'marginW');
-
-	// if this is the last entry, only use min-width
-	$rule: '(min-width: #{$previous}px) and (max-width: #{$size}px)';
-	@if $size == 'max' {
-		$rule: '(min-width: #{$previous}px)';
-	}
-
-	@media #{$rule} {
-		.photos-grid-row {
-			grid-template-columns: repeat($count, 1fr);
-		}
-	}
-	$previous: $size;
-}
-</style>
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 07d31255..4005702a 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -2,6 +2,7 @@
  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @author Corentin Mors <medias@pixelswap.fr>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -21,10 +22,10 @@
  -->
 
 <template>
-	<FolderTagPreview :id="id"
+	<FolderTagPreview :id="item.injected.id"
 		icon="icon-tag"
-		:name="displayName"
-		:path="displayName"
+		:name="item.injected.displayName"
+		:path="item.injected.displayName"
 		:file-list="fileList" />
 </template>
 
@@ -44,12 +45,8 @@ export default {
 	inheritAttrs: false,
 
 	props: {
-		displayName: {
-			type: String,
-			required: true,
-		},
-		id: {
-			type: Number,
+		item: {
+			type: Object,
 			required: true,
 		},
 	},
@@ -69,7 +66,7 @@ export default {
 
 		// files list of the current folder
 		folderContent() {
-			return this.tags[this.id].files
+			return this.tags[this.item.injected.id].files
 		},
 		fileList() {
 			return this.folderContent
@@ -95,12 +92,12 @@ export default {
 
 		try {
 			// get data
-			const files = await request(this.id)
-			this.$store.dispatch('updateTag', { id: this.id, files })
+			const files = await request(this.item.injected.id)
+			this.$store.dispatch('updateTag', { id: this.item.injected.id, files })
 			this.$store.dispatch('appendFiles', files)
 		} catch (error) {
 			if (error.response && error.response.status) {
-				console.error('Failed to get folder content', this.id, error.response)
+				console.error('Failed to get folder content', this.item.injected.id, error.response)
 			}
 		} finally {
 			this.cancelRequest = null
diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index 3efcc7c3..f3ac2ee7 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -2,6 +2,7 @@
  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @author Corentin Mors <medias@pixelswap.fr>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -36,24 +37,18 @@
 			v-bind="folder"
 			:root-title="rootTitle"
 			:show-actions="true" />
-		<Grid>
-			<!-- Empty folder, should only happen via direct link -->
-			<EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
-				{{ t('photos', 'No photos in here') }}
-			</EmptyContent>
-
-			<!-- Folders and files list -->
-			<template v-else>
-				<Folder v-for="dir in folderList"
-					:key="dir.fileid"
-					v-bind="dir"
-					:show-shared="showShared" />
-				<File v-for="file in fileList"
-					:key="file.fileid"
-					:list="fileList"
-					v-bind="file" />
-			</template>
-		</Grid>
+		<!-- Empty folder, should only happen via direct link -->
+		<EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
+			{{ t('photos', 'No photos in here') }}
+		</EmptyContent>
+
+		<div v-else class="grid-container">
+			<VirtualGrid
+				ref="virtualgrid"
+				:items="contentList"
+				:get-column-count="() => gridConfig.count"
+				:get-grid-gap="() => gridConfig.gap" />
+		</div>
 	</div>
 </template>
 
@@ -62,23 +57,24 @@ import { mapGetters } from 'vuex'
 
 import getAlbumContent from '../services/AlbumContent'
 
+import VirtualGrid from 'vue-virtual-grid'
 import EmptyContent from '../components/EmptyContent'
 import Folder from '../components/Folder'
 import File from '../components/File'
-import Grid from '../components/Grid'
 import Navigation from '../components/Navigation'
 
+import GridConfigMixin from '../mixins/GridConfig'
+
 import cancelableRequest from '../utils/CancelableRequest'
 
 export default {
 	name: 'Albums',
 	components: {
+		VirtualGrid,
 		EmptyContent,
-		File,
-		Folder,
-		Grid,
 		Navigation,
 	},
+	mixins: [GridConfigMixin],
 	props: {
 		rootTitle: {
 			type: String,
@@ -145,6 +141,37 @@ export default {
 					.filter(file => !!file)
 			return list
 		},
+		contentList() {
+			const folders = this.folderList.map((folder) => {
+				return {
+					id: `folder-${folder.fileid}`,
+					injected: {
+						...folder,
+						showShared: this.showShared,
+					},
+					width: 256,
+					height: 256,
+					columnSpan: 1,
+					renderComponent: Folder,
+				}
+			})
+
+			const files = this.fileList.map((file) => {
+				return {
+					id: `file-${file.fileid}`,
+					injected: {
+						...file,
+						list: this.fileList,
+					},
+					width: 256,
+					height: 256,
+					columnSpan: 1,
+					renderComponent: File,
+				}
+			})
+
+			return [...folders, ...files]
+		},
 
 		// is current folder empty?
 		isEmpty() {
@@ -222,3 +249,22 @@ export default {
 
 }
 </script>
+
+<style lang="scss" scoped>
+$previous: 0;
+@each $size, $config in get('sizes') {
+	$marginTop: map-get($config, 'marginTop');
+	$marginW: map-get($config, 'marginW');
+	// if this is the last entry, only use min-width
+	$rule: '(min-width: #{$previous}px) and (max-width: #{$size}px)';
+	@if $size == 'max' {
+		$rule: '(min-width: #{$previous}px)';
+	}
+	@media #{$rule} {
+		.grid-container {
+			padding: #{$marginTop}px #{$marginW}px 256px #{$marginW}px;
+		}
+	}
+	$previous: $size;
+}
+</style>
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index 65c79cd6..0e88d1cc 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -2,6 +2,7 @@
  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @author Corentin Mors <medias@pixelswap.fr>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -33,36 +34,26 @@
 			:basename="path"
 			:filename="'/' + path"
 			:root-title="rootTitle" />
-		<Grid>
-			<!-- Tags list -->
-			<template v-if="isRoot">
-				<Tag v-for="id in tagsNames"
-					:key="id"
-					v-bind="tags[id]"
-					:fileid="id"
-					:basename="tags[id].displayName" />
+		<EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
+			{{ t('photos', 'No tags yet') }}
+			<template #desc>
+				{{ t('photos', 'Photos with tags will show up here') }}
 			</template>
+		</EmptyContent>
 
-			<!-- Content list -->
-			<template v-else>
-				<EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
-					{{ t('photos', 'No tags yet') }}
-					<template #desc>
-						{{ t('photos', 'Photos with tags will show up here') }}
-					</template>
-				</EmptyContent>
-
-				<File v-for="file in fileList"
-					:key="file.fileid"
-					:list="fileList"
-					v-bind="file" />
-			</template>
-		</Grid>
+		<div v-else class="grid-container">
+			<VirtualGrid
+				ref="virtualgrid"
+				:items="contentList"
+				:get-column-count="() => gridConfig.count"
+				:get-grid-gap="() => gridConfig.gap" />
+		</div>
 	</div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import VirtualGrid from 'vue-virtual-grid'
 
 import getSystemTags from '../services/SystemTags'
 import getTaggedImages from '../services/TaggedImages'
@@ -70,20 +61,20 @@ import getTaggedImages from '../services/TaggedImages'
 import EmptyContent from '../components/EmptyContent'
 import Tag from '../components/Tag'
 import File from '../components/File'
-import Grid from '../components/Grid'
 import Navigation from '../components/Navigation'
 
+import GridConfigMixin from '../mixins/GridConfig'
+
 import cancelableRequest from '../utils/CancelableRequest'
 
 export default {
 	name: 'Tags',
 	components: {
+		VirtualGrid,
 		EmptyContent,
-		File,
-		Tag,
-		Grid,
 		Navigation,
 	},
+	mixins: [GridConfigMixin],
 	props: {
 		rootTitle: {
 			type: String,
@@ -127,6 +118,11 @@ export default {
 		tag() {
 			return this.tags[this.tagId]
 		},
+
+		tagsList() {
+			return Object.values(this.tagsNames).map((tagsId) => this.tags[tagsId])
+		},
+
 		// files list of the current tag
 		fileList() {
 			return this.tag && this.tag.files
@@ -134,6 +130,38 @@ export default {
 				.filter(file => !!file)
 		},
 
+		contentList() {
+			if (this.isRoot) {
+				return this.tagsList.flatMap((tag) => {
+					return tag.id === ''
+						? []
+						: [{
+							id: `tag-${tag.id}`,
+							injected: {
+								...tag,
+							},
+							width: 256,
+							height: 256,
+							columnSpan: 1,
+							renderComponent: Tag,
+						}]
+				})
+			}
+			return this.fileList.map((file) => {
+				return {
+					id: `file-${file.fileid}`,
+					injected: {
+						...file,
+						list: this.fileList,
+					},
+					width: 256,
+					height: 256,
+					columnSpan: 1,
+					renderComponent: File,
+				}
+			})
+		},
+
 		isEmpty() {
 			if (this.isRoot) {
 				return Object.keys(this.tagsNames).length === 0
@@ -249,3 +277,22 @@ export default {
 
 }
 </script>
+
+<style lang="scss" scoped>
+$previous: 0;
+@each $size, $config in get('sizes') {
+	$marginTop: map-get($config, 'marginTop');
+	$marginW: map-get($config, 'marginW');
+	// if this is the last entry, only use min-width
+	$rule: '(min-width: #{$previous}px) and (max-width: #{$size}px)';
+	@if $size == 'max' {
+		$rule: '(min-width: #{$previous}px)';
+	}
+	@media #{$rule} {
+		.grid-container {
+			padding: #{$marginTop}px #{$marginW}px 256px #{$marginW}px;
+		}
+	}
+	$previous: $size;
+}
+</style>
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 25ec394f..3c09627d 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -63,7 +63,7 @@ import { mapGetters } from 'vuex'
 import getPhotos from '../services/PhotoSearch'
 
 import EmptyContent from '../components/EmptyContent'
-import FileVirtualGrid from '../components/FileVirtualGrid'
+import File from '../components/File'
 import SeparatorVirtualGrid from '../components/SeparatorVirtualGrid'
 import VirtualGrid from 'vue-virtual-grid'
 import Navigation from '../components/Navigation'
@@ -168,7 +168,7 @@ export default {
 					width: 256,
 					height: 256,
 					columnSpan: 1,
-					renderComponent: FileVirtualGrid,
+					renderComponent: File,
 				})
 				return finalArray
 			})
@@ -201,6 +201,7 @@ export default {
 		if (this.cancelRequest) {
 			this.cancelRequest('Changed view')
 		}
+		this.resetState()
 	},
 
 	methods: {