Show last visited list on home page

src/views/Home.vue

@@ -23,6 +23,17 @@
 				{{ $t('home.list.import') }}
 			</x-button>
 		</template>
+		<div v-if="listHistory.length > 0" class="is-max-width-desktop has-text-left">
+			<h3>{{ $t('home.lastViewed') }}</h3>
+			<div class="is-flex list-cards-wrapper-2-rows">
+				<list-card
+					v-for="(l, k) in listHistory"
+					:key="`l${k}`"
+					:list="l"
+					:background-resolver="() => null"
+				/>
+			</div>
+		</div>
 		<ShowTasks :show-all="true" v-if="hasLists"/>
 	</div>
 </template>
@@ -30,10 +41,13 @@
 <script>
 import {mapState} from 'vuex'
 import ShowTasks from './tasks/ShowTasks'
+import {getHistory} from '@/modules/listHistory'
+import ListCard from '@/components/list/partials/list-card'
 
 export default {
 	name: 'Home',
 	components: {
+		ListCard,
 		ShowTasks,
 	},
 	data() {
@@ -51,20 +65,26 @@ export default {
 				return 'Night'
 			}
 
-			if(now.getHours() < 11) {
+			if (now.getHours() < 11) {
 				return 'Morning'
 			}
 
-			if(now.getHours() < 18) {
+			if (now.getHours() < 18) {
 				return 'Day'
 			}
 
-			if(now.getHours() < 23) {
+			if (now.getHours() < 23) {
 				return 'Evening'
 			}
 
 			return 'Night'
 		},
+		listHistory() {
+			const history = getHistory()
+			return history.map(l => {
+				return this.$store.getters['lists/getListById'](l.id)
+			})
+		},
 		...mapState({
 			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
 			authenticated: state => state.auth.authenticated,

src/views/list/ShowList.vue

@@ -44,6 +44,7 @@ import ListModel from '../../models/list'
 import ListService from '../../services/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import {getListView} from '@/helpers/saveListView'
+import {saveListToHistory} from '@/modules/listHistory'
 
 export default {
 	data() {
@@ -92,6 +93,10 @@ export default {
 				return
 			}
 
+			const listData = {id: this.$route.params.listId}
+
+			saveListToHistory(listData)
+
 			this.setTitle(this.currentList.title)
 
 			// This invalidates the loaded list at the kanban board which lets it reload its content when
@@ -134,7 +139,7 @@ export default {
 			console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
 
 			// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
-			let list = new ListModel({id: this.$route.params.listId})
+			const list = new ListModel(listData)
 			this.listService.get(list)
 				.then(r => {
 					this.$set(this, 'list', r)

src/views/namespaces/ListNamespaces.vue

@@ -53,37 +53,13 @@
 			</p>
 
 			<div class="lists">
-				<template v-for="l in n.lists">
-					<router-link
-						:class="{
-							'has-light-text': !colorIsDark(l.hexColor),
-							'has-background': typeof backgrounds[l.id] !== 'undefined',
-						}"
-						:key="`l${l.id}`"
-						:style="{
-							'background-color': l.hexColor,
-							'background-image': typeof backgrounds[l.id] !== 'undefined' ? `url(${backgrounds[l.id]})` : false,
-						}"
-						:to="{ name: 'list.index', params: { listId: l.id} }"
-						class="list"
-						tag="span"
-						v-if="showArchived ? true : !l.isArchived"
-					>
-						<div class="is-archived-container">
-							<span class="is-archived" v-if="l.isArchived">
-								{{ $t('namespace.archived') }}
-							</span>
-							<span
-								:class="{'is-favorite': l.isFavorite, 'is-archived': l.isArchived}"
-								@click.stop="toggleFavoriteList(l)"
-								class="favorite">
-								<icon icon="star" v-if="l.isFavorite"/>
-								<icon :icon="['far', 'star']" v-else/>
-							</span>
-						</div>
-						<div class="title">{{ l.title }}</div>
-					</router-link>
-				</template>
+				<list-card
+					v-for="l in n.lists"
+					:key="`l${l.id}`"
+					:list="l"
+					:show-archived="showArchived"
+					:background-resolver="lId =>  typeof backgrounds[lId] !== 'undefined' ? backgrounds[lId] : null"
+				/>
 			</div>
 		</div>
 	</div>
@@ -94,10 +70,12 @@ import {mapState} from 'vuex'
 import ListService from '../../services/list'
 import Fancycheckbox from '../../components/input/fancycheckbox'
 import {LOADING} from '@/store/mutation-types'
+import ListCard from '@/components/list/partials/list-card'
 
 export default {
 	name: 'ListNamespaces',
 	components: {
+		ListCard,
 		Fancycheckbox,
 	},
 	data() {
@@ -137,15 +115,6 @@ export default {
 				})
 			})
 		},
-		toggleFavoriteList(list) {
-			// The favorites pseudo list is always favorite
-			// Archived lists cannot be marked favorite
-			if (list.id === -1 || list.isArchived) {
-				return
-			}
-			this.$store.dispatch('lists/toggleListFavorite', list)
-				.catch(e => this.error(e))
-		},
 		saveShowArchivedState() {
 			localStorage.setItem('showArchived', JSON.stringify(this.showArchived))
 		},