Fix legacy tabs

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

4 files changed, 16 insertions, 14 deletions

diff --git a/apps/files/src/components/LegacyTab.vue b/apps/files/src/components/LegacyTab.vue
index e358499cb69..7f9f420d718 100644
--- a/apps/files/src/components/LegacyTab.vue
+++ b/apps/files/src/components/LegacyTab.vue
@@ -21,7 +21,9 @@
   -->
 
 <template>
-	<AppSidebarTab :icon="icon"
+	<AppSidebarTab
+		:id="id"
+		:icon="icon"
 		:name="name"
 		:active-tab="activeTab" />
 </template>
@@ -38,7 +40,7 @@ export default {
 			type: Object,
 			required: true,
 		},
-		name: {
+		id: {
 			type: String,
 			required: true,
 		},
@@ -52,9 +54,8 @@ export default {
 		icon() {
 			return this.component.getIcon()
 		},
-		id() {
-			// copied from AppSidebarTab
-			return this.name.toLowerCase().replace(/ /g, '-')
+		name() {
+			return this.component.getLabel()
 		},
 		order() {
 			return this.component.order
diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js
index 2a045551c54..fd1ea9888d9 100644
--- a/apps/files/src/models/Tab.js
+++ b/apps/files/src/models/Tab.js
@@ -24,23 +24,23 @@ export default class Tab {
 
 	#component
 	#legacy
-	#name
+	#id
 	#enabled
 
 	/**
 	 * Create a new tab instance
 	 *
-	 * @param {string} name the name of this tab
+	 * @param {string} id the unique id of this tab
 	 * @param {Object} component the vue component
 	 * @param {Function} [enabled] function that returns if the tab should be shown or not
 	 * @param {boolean} [legacy] is this a legacy tab
 	 */
-	constructor(name, component, enabled = () => true, legacy) {
+	constructor(id, component, enabled = () => true, legacy) {
 		if (typeof enabled !== 'function') {
 			throw new Error('The enabled argument should be a function')
 		}
 
-		this.#name = name
+		this.#id = id
 		this.#component = component
 		this.#enabled = enabled
 		this.#legacy = legacy === true
@@ -51,8 +51,8 @@ export default class Tab {
 
 	}
 
-	get name() {
-		return this.#name
+	get id() {
+		return this.#id
 	}
 
 	get component() {
diff --git a/apps/files/src/services/Sidebar.js b/apps/files/src/services/Sidebar.js
index f2a1f8f2124..3a777419643 100644
--- a/apps/files/src/services/Sidebar.js
+++ b/apps/files/src/services/Sidebar.js
@@ -56,17 +56,17 @@ export default class Sidebar {
 	 * @returns {Boolean}
 	 */
 	registerTab(tab) {
-		const hasDuplicate = this.#state.tabs.findIndex(check => check.name === tab.name) > -1
+		const hasDuplicate = this.#state.tabs.findIndex(check => check.id === tab.id) > -1
 		if (!hasDuplicate) {
 			this.#state.tabs.push(tab)
 			return true
 		}
-		console.error(`An tab with the same name ${tab.name} already exists`, tab)
+		console.error(`An tab with the same id ${tab.id} already exists`, tab)
 		return false
 	}
 
 	registerSecondaryView(view) {
-		const hasDuplicate = this.#state.views.findIndex(check => check.name === view.name) > -1
+		const hasDuplicate = this.#state.views.findIndex(check => check.id === view.id) > -1
 		if (!hasDuplicate) {
 			this.#state.views.push(view)
 			return true
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 81c4e728380..e734f12c03b 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -62,6 +62,7 @@
 			<component
 				:is="tabComponent(tab).is"
 				v-if="canDisplay(tab)"
+				:id="tab.id"
 				:key="tab.id"
 				:component="tabComponent(tab).component"
 				:name="tab.name"