Placeholders now appear in empty sections

For example if there are no unsaved sessions then a placeholder appears with image and text as per material design's 'empty state' guidelines.

src/ui/SessionManager/createSessionCards.js

@@ -4,6 +4,11 @@ import SessionManager from './index.js'
 const unsavedSessionsHeader = document.getElementById('unsaved')
 const unshelvedSessionsHeader = document.getElementById('unshelved')
 const shelvedSessionsHeader = document.getElementById('shelved')
+const sessionHeaders = {
+	'unsaved': unsavedSessionsHeader,
+	'unshelved': unshelvedSessionsHeader,
+	'shelved': shelvedSessionsHeader,
+}
 
 async function createSessionCards () {
 	await createUnsavedSessionCards()
@@ -25,6 +30,8 @@ async function createUnsavedSessionCards () {
 		)
 		unsavedSessionsHeader.after(sessionCard)
 	})
+
+	if (!unsavedSessions.length) createPlaceholder('unsaved')
 }
 
 async function createUnshelvedSessionCards () {
@@ -41,6 +48,8 @@ async function createUnshelvedSessionCards () {
 		)
 		unshelvedSessionsHeader.after(sessionCard)
 	})
+
+	if (!unshelvedSessions.length) createPlaceholder('unshelved')
 }
 
 async function createShelvedSessionCards () {
@@ -56,6 +65,8 @@ async function createShelvedSessionCards () {
 		)
 		shelvedSessionsHeader.after(sessionCard)
 	})
+
+	if (!shelvedSessions.length) createPlaceholder('shelved')
 }
 
 async function addTabIndex () {
@@ -121,4 +132,14 @@ function getSessionInnerHtml (name, tabsCount, thumbnailUrl) {
 	return innerHtml
 }
 
+function createPlaceholder (type) {
+	const placeholder = document.createElement('div')
+	placeholder.classList.add('placeholder')
+	placeholder.innerHTML = `
+		<img src="/ui/status/${type}.png" width="60px"><span>You have no ${type} sessions.</span>
+	`
+	const sessionHeader = sessionHeaders[type]
+	sessionHeader.after(placeholder)
+}
+
 export default createSessionCards

src/ui/SessionManager/index.js

@@ -138,6 +138,7 @@ class UnshelvedSessionManager extends OpenSessionManager {
 	async remove () {
 		await chrome.windows.remove(this.windowId)
 		// Event listener in worker will remove window ID from storage to stop tracking as an open saved session.
+		await bookmarks.removeFolder(this.bookmarkFolderId)
 		this.sessionCard.remove()
 	}
 

src/ui/index.css

@@ -34,3 +34,18 @@ a {
   height: auto !important;
   width: 100%; /* Allows full width text input. */
 }
+
+.placeholder {
+  align-items: center;  
+  color: grey;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  text-align: center;
+}
+
+.placeholder img {
+  width: 25px;
+  height: 25px;
+  margin: 0 5px;
+}

src/ui/status/index.js

@@ -1,5 +1,5 @@
 function saved () {
-	chrome.action.setIcon({path: '../ui/status/saved.png'})
+	chrome.action.setIcon({path: '../ui/status/unshelved.png'})
 }
 
 function saving () {

test/sessionPersistence.test.js

@@ -59,6 +59,8 @@ test('Saving, re-opening, then deleting sessions', async t => {
 	const sessionManagerTitle = await playwrightPage.title()
 	// This is breaking the fourth wall a bit because its actually a window with the session manager that we're making assertions against.
 	await tester.assertUnsavedSessions([sessionManagerTitle])
+	await tester.assertUnshelvedPlaceholderExists()
+	await tester.assertShelvedPlaceholderExists()
 
 	const [page, window] = await tester.createWindow()
 	await playwrightPage.reload() // TODO: Try replacing with page.waitForSelector(selector[, options])
@@ -78,6 +80,7 @@ test('Saving, re-opening, then deleting sessions', async t => {
 	await playwrightPage.reload()
 	await tester.assertUnsavedSessions([sessionManagerTitle])
 	await tester.assertUnshelvedSessions([])
+	await tester.assertUnshelvedPlaceholderExists()
 	await tester.assertShelvedSessions([savedSessionName])
 
 	const updatedSessionName = 'Test session updated'
@@ -95,6 +98,7 @@ test('Saving, re-opening, then deleting sessions', async t => {
 	await tester.assertUnsavedSessions([sessionManagerTitle])
 	await tester.assertUnshelvedSessions([updatedSessionName])
 	await tester.assertShelvedSessions([])
+	await tester.assertShelvedPlaceholderExists()
 	const unshelvedSessionWindow = await tester.getCurrentWindow()
 	await tester.assertWindowTabUrls(unshelvedSessionWindow, urls)
 
@@ -106,9 +110,12 @@ test('Saving, re-opening, then deleting sessions', async t => {
 	await playwrightPage.waitForTimeout(1000) // TODO: Find out how to properly wait for resumed session ID to be added to mapping.
 	t.is((await tester.getWindows()).length, 1)
 
+	await playwrightPage.reload()
 	await tester.assertUnsavedSessions([sessionManagerTitle])
 	await tester.assertUnshelvedSessions([])
 	await tester.assertShelvedSessions([])
+	await tester.assertUnshelvedPlaceholderExists()
+	await tester.assertShelvedPlaceholderExists()
 })
 
 test.todo('Saving, re-opening, then deleting sessions (with keyboard shortcuts)')
@@ -142,6 +149,23 @@ class SessionManagerTester {
 		this.avaExecutionContext.deepEqual(actualSessionNames, expectedSessionNames)
 	}
 
+	async assertUnsavedPlaceholderExists () {
+		await this.assertPlaceholderExists('unsaved')
+	}
+
+	async assertUnshelvedPlaceholderExists () {
+		await this.assertPlaceholderExists('unshelved')
+	}
+
+	async assertShelvedPlaceholderExists () {
+		await this.assertPlaceholderExists('shelved')
+	}
+
+	async assertPlaceholderExists (sessionType) {
+		const placeholder = await this.playwrightPage.$(`text=You have no ${sessionType} sessions.`)
+		this.avaExecutionContext.not(placeholder, null)
+	}
+
 	async createWindow() {
 		const [page, window] = await Promise.all([
 			this.avaExecutionContext.context.browserContext.waitForEvent('page'),