Show mails with currently selected label

src/common/api/common/TutanotaConstants.ts

@@ -105,6 +105,10 @@ export enum MailSetKind {
 	LABEL = "8",
 }
 
+export function getMailSetKind(folder: MailFolder): MailSetKind {
+	return folder.folderType as MailSetKind
+}
+
 export const enum ReplyType {
 	NONE = "0",
 	REPLY = "1",

src/common/gui/base/SidebarSectionRow.ts

@@ -17,6 +17,8 @@ export interface SidebarSectionRowAttrs {
 	moreButton: IconButtonAttrs
 	iconColor?: string
 	alwaysShowMoreButton?: boolean
+	isSelectedPrefix?: string | boolean
+	disabled?: boolean
 }
 
 /**
@@ -48,6 +50,8 @@ export class SidebarSectionRow implements Component<SidebarSectionRowAttrs> {
 			click: attrs.onClick,
 			onfocus: onHover,
 			onkeydown: handleBackwardsTab,
+			isSelectedPrefix: attrs.isSelectedPrefix,
+			disabled: attrs.disabled,
 		}
 
 		return m(

src/common/gui/main-styles.ts

@@ -1613,9 +1613,9 @@ styles.registerStyle("main", () => {
 			"line-height": px(18),
 		},
 		".list-font-icons": {
-			"letter-spacing": "8px",
+			"letter-spacing": "1px",
 			"text-align": "right",
-			"margin-right": "-8px",
+			"margin-right": "-3px",
 		},
 		".monospace": {
 			"font-family": '"Lucida Console", Monaco, monospace',

src/mail-app/mail/model/MailModel.ts

@@ -601,13 +601,18 @@ export class MailModel {
 		await this.mailFacade.deleteLabel(label)
 	}
 
-	async getFolderById(folderElementId: Id): Promise<MailFolder | null> {
+	async getMailSetById(folderElementId: Id): Promise<MailFolder | null> {
 		const folderStructures = await this.loadMailSets()
 		for (const folders of folderStructures.values()) {
 			const folder = folders.folders.getFolderById(folderElementId)
 			if (folder) {
 				return folder
 			}
+
+			const label = folders.labels.get(folderElementId)
+			if (label) {
+				return label
+			}
 		}
 		return null
 	}

src/mail-app/mail/model/MailUtils.ts

@@ -1,12 +1,12 @@
-import { FolderSystem, type IndentedFolder } from "../../../common/api/common/mail/FolderSystem.js"
+import { FolderSystem, IndentedFolder } from "../../../common/api/common/mail/FolderSystem.js"
 import { Header, InboxRule, Mail, MailDetails, MailFolder, TutanotaProperties } from "../../../common/api/entities/tutanota/TypeRefs.js"
 import { assertNotNull, contains, first, isNotEmpty, neverNull } from "@tutao/tutanota-utils"
-import { getListId, isSameId } from "../../../common/api/common/utils/EntityUtils.js"
 import { MailModel } from "./MailModel.js"
 import { lang } from "../../../common/misc/LanguageViewModel.js"
 import { UserController } from "../../../common/api/main/UserController.js"
 import { getEnabledMailAddressesForGroupInfo } from "../../../common/api/common/utils/GroupUtils.js"
 import { MailSetKind } from "../../../common/api/common/TutanotaConstants.js"
+import { getListId, isSameId } from "../../../common/api/common/utils/EntityUtils"
 
 export type FolderInfo = { level: number; folder: MailFolder }
 export const MAX_FOLDER_INDENT_LEVEL = 10
@@ -59,18 +59,28 @@ export async function getMoveTargetFolderSystems(foldersModel: MailModel, mails:
 	if (folders == null) {
 		return []
 	}
-	const folder = foldersModel.getMailFolderForMail(firstMail)
-	if (folder == null) {
+	const folderOfFirstMail = foldersModel.getMailFolderForMail(firstMail)
+	if (folderOfFirstMail == null) {
 		return []
 	}
 
-	return folders.getIndentedList().filter((f: IndentedFolder) => {
-		if (f.folder.isMailSet && isNotEmpty(firstMail.sets)) {
-			return !isSameId(f.folder._id, folder._id)
-		} else {
-			return f.folder.mails !== getListId(firstMail)
-		}
-	})
+	const areMailsInDifferentFolders =
+		mails.length > 1 &&
+		mails.some((mail) => {
+			return !isSameId(folderOfFirstMail._id, assertNotNull(foldersModel.getMailFolderForMail(mail))._id)
+		})
+
+	if (areMailsInDifferentFolders) {
+		return folders.getIndentedList()
+	} else {
+		return folders.getIndentedList().filter((f: IndentedFolder) => {
+			if (f.folder.isMailSet && isNotEmpty(firstMail.sets)) {
+				return !isSameId(f.folder._id, folderOfFirstMail._id)
+			} else {
+				return f.folder.mails !== getListId(firstMail)
+			}
+		})
+	}
 }
 
 /**

src/mail-app/mail/view/MailListView.ts

@@ -76,7 +76,7 @@ export class MailListView implements Component<MailListViewAttrs> {
 		multiselectionAllowed: MultiselectMode.Enabled,
 		createElement: (dom: HTMLElement) => {
 			const mailRow = new MailRow(
-				false,
+				this.mailViewModel.getSelectedMailSetKind() === MailSetKind.LABEL,
 				(mail) => this.mailViewModel.getLabelsForMail(mail),
 				(entity) => this.attrs.onSingleExclusiveSelection(entity),
 			)

src/mail-app/mail/view/MailView.ts

@@ -69,6 +69,7 @@ import { attachDropdown } from "../../../common/gui/base/Dropdown"
 import { ButtonSize } from "../../../common/gui/base/ButtonSize"
 import { RowButton } from "../../../common/gui/base/buttons/RowButton"
 import { getLabelColor } from "../../../common/gui/base/Label.js"
+import { MAIL_PREFIX } from "../../../common/misc/RouteChange"
 
 assertMainOrNode()
 
@@ -695,7 +696,7 @@ export class MailView extends BaseTopLevelView implements TopLevelView<MailViewA
 	}
 
 	private showMail(args: Record<string, any>) {
-		this.mailViewModel.showMailWithFolderId(args.folderId, args.mailId)
+		this.mailViewModel.showMailWithMailSetId(args.folderId, args.mailId)
 		if (styles.isSingleColumnLayout() && !args.mailId && this.viewSlider.focusedColumn === this.mailColumn) {
 			this.viewSlider.focus(this.listColumn)
 		}
@@ -807,14 +808,20 @@ export class MailView extends BaseTopLevelView implements TopLevelView<MailViewA
 				[
 					m(".flex.col", [
 						Array.from(mailLocator.mailModel.getLabelsByGroupId(mailboxDetail.mailGroup._id).values()).map((label) => {
+							const path = `${MAIL_PREFIX}/${getElementId(label)}`
+
 							return m(SidebarSectionRow, {
 								icon: Icons.Label,
 								iconColor: getLabelColor(label.color),
 								label: () => label.name,
-								// FIXME
-								path: "#",
-								// FIXME
-								onClick: noOp,
+								path,
+								isSelectedPrefix: inEditMode ? false : path,
+								disabled: inEditMode,
+								onClick: () => {
+									if (!inEditMode) {
+										this.viewSlider.focus(this.listColumn)
+									}
+								},
 								alwaysShowMoreButton: inEditMode,
 								moreButton: attachDropdown({
 									mainButtonAttrs: {

src/mail-app/mail/view/MailViewModel.ts

@@ -33,7 +33,7 @@ import { ListState } from "../../../common/gui/base/List.js"
 import { ConversationPrefProvider, ConversationViewModel, ConversationViewModelFactory } from "./ConversationViewModel.js"
 import { CreateMailViewerOptions } from "./MailViewer.js"
 import { isOfflineError } from "../../../common/api/common/utils/ErrorUtils.js"
-import { MailSetKind, OperationType } from "../../../common/api/common/TutanotaConstants.js"
+import { getMailSetKind, MailSetKind, OperationType } from "../../../common/api/common/TutanotaConstants.js"
 import { WsConnectionState } from "../../../common/api/main/WorkerClient.js"
 import { WebsocketConnectivityModel } from "../../../common/misc/WebsocketConnectivityModel.js"
 import { ExposedCacheStorage } from "../../../common/api/worker/rest/DefaultEntityRestCache.js"
@@ -113,6 +113,10 @@ export class MailViewModel {
 		private readonly updateUi: () => unknown,
 	) {}
 
+	getSelectedMailSetKind(): MailSetKind | null {
+		return this._folder ? getMailSetKind(this._folder) : null
+	}
+
 	/** Map from element id of MailSetEntry to an entry itself. Needed to react to entity updates. Reset on folder change. */
 	private mailSetEntries: () => Map<Id, MailSetEntry> = memoizedWithHiddenArgument(
 		() => this._folder?._id?.[1],
@@ -128,11 +132,11 @@ export class MailViewModel {
 		this.listModel?.setFilter(getMailFilterForType(filter))
 	}
 
-	async showMailWithFolderId(folderId?: Id, mailId?: Id): Promise<void> {
-		if (folderId) {
-			const folder = await this.mailModel.getFolderById(folderId)
-			if (folder) {
-				return this.showMail(folder, mailId)
+	async showMailWithMailSetId(mailsetId?: Id, mailId?: Id): Promise<void> {
+		if (mailsetId) {
+			const mailset = await this.mailModel.getMailSetById(mailsetId)
+			if (mailset) {
+				return this.showMail(mailset, mailId)
 			}
 		}
 		return this.showMail(null, mailId)

src/mail-app/search/view/SearchViewModel.ts

@@ -708,7 +708,7 @@ export class SearchViewModel {
 		const selectedMailFolder = this._selectedMailFolder
 
 		if (selectedMailFolder[0]) {
-			const mailFolder = await mailLocator.mailModel.getFolderById(selectedMailFolder[0])
+			const mailFolder = await mailLocator.mailModel.getMailSetById(selectedMailFolder[0])
 			if (!mailFolder) {
 				const folderSystem = assertNotNull(mailLocator.mailModel.getFolderSystemByGroupId(mailboxes[0].mailGroup._id))
 				this._selectedMailFolder = [getElementId(assertNotNull(folderSystem.getSystemFolderByType(MailSetKind.INBOX)))]