From 3b4d88a26d82a222b7fda25e5d0296c8a736eeca Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 15 Mar 2024 19:32:55 +0100
Subject: [PATCH 1/8] fix(settings): apps list layout on mobile

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/src/components/AppList.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 18c4331e0f9fb..898e98610eb14 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -21,8 +21,8 @@
   -->
 
 <template>
-	<div id="app-content-inner">
-		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
+	<div id="app-content-inner" class="{ 'with-app-sidebar': !!selectedApp }">
+		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView }">
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
@@ -226,6 +226,9 @@ export default {
 					return false
 				})
 		},
+		selectedApp() {
+			return this.apps.find(app => app.id === this.$route.params.id)
+		},
 		useAppStoreView() {
 			return !this.useListView && !this.useBundleView
 		},

From ad881699d5c39f4654e3e237db5d3631ba957939 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 13 Mar 2024 15:20:08 +0100
Subject: [PATCH 2/8] refactor(settings): remove unneeded classes from hidden
 header

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/src/components/AppList.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 898e98610eb14..615e350eee438 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -40,19 +40,19 @@
 
 				<transition-group name="app-list" tag="table" class="apps-list-container">
 					<tr key="app-list-view-header" class="apps-header">
-						<th class="app-image">
+						<th>
 							<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
 						</th>
-						<th class="app-name">
+						<th>
 							<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
 						</th>
-						<th class="app-version">
+						<th>
 							<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
 						</th>
-						<th class="app-level">
+						<th>
 							<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
 						</th>
-						<th class="actions">
+						<th>
 							<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
 						</th>
 					</tr>
@@ -66,19 +66,19 @@
 			<table v-if="useBundleView"
 				class="apps-list-container">
 				<tr key="app-list-view-header" class="apps-header">
-					<th id="app-table-col-icon" class="app-image">
+					<th id="app-table-col-icon">
 						<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
 					</th>
-					<th id="app-table-col-name" class="app-name">
+					<th id="app-table-col-name">
 						<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
 					</th>
-					<th id="app-table-col-version" class="app-version">
+					<th id="app-table-col-version">
 						<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
 					</th>
-					<th id="app-table-col-level" class="app-level">
+					<th id="app-table-col-level">
 						<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
 					</th>
-					<th id="app-table-col-actions" class="actions">
+					<th id="app-table-col-actions">
 						<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
 					</th>
 				</tr>

From 166269b01ccf8ac79cf1abf01b20e4449c7f3851 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 13 Mar 2024 16:01:46 +0100
Subject: [PATCH 3/8] refactor(settings): remove unused styles from apps
 settings

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/css/settings.scss          | 150 -----------------------
 apps/settings/src/components/AppList.vue |   6 +-
 2 files changed, 2 insertions(+), 154 deletions(-)

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index f2de7fce380bb..e05f3f5c14488 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -539,20 +539,6 @@ span.usersLastLoginTooltip {
 }
 
 /* APPS */
-#app-content > svg.app-filter {
-	float: left;
-	height: 0;
-	width: 0;
-}
-
-#app-category-app-bundles {
-	margin-bottom: 20px;
-}
-
-.appinfo {
-	margin: 1em 40px;
-}
-
 #app-navigation {
 	/* Navigation icons */
 	img {
@@ -570,24 +556,6 @@ span.usersLastLoginTooltip {
 			display: block;
 		}
 	}
-
-	.appwarning {
-		background: #fcc;
-	}
-
-	&.appwarning:hover {
-		background: #fbb;
-	}
-
-	.app-external {
-		color: var(--color-text-maxcontrast);
-	}
-}
-
-span.version {
-	margin-left: 1em;
-	margin-right: 1em;
-	color: var(--color-text-maxcontrast);
 }
 
 .app-version {
@@ -654,10 +622,6 @@ span.version {
 		opacity: 0.5;
 	}
 
-	.app-score-image {
-		height: 14px;
-	}
-
 	.actions {
 		margin-top: 10px;
 
@@ -796,12 +760,6 @@ span.version {
 	}
 }
 
-@media only screen and (max-width: 500px) {
-	.apps-list.installed .app-groups {
-		display: none !important;
-	}
-}
-
 .section {
 	margin-bottom: 0;
 	/* section divider lines, none needed for last one */
@@ -821,11 +779,6 @@ span.version {
 	}
 }
 
-.followupsection {
-	display: block;
-	padding: 0 30px 30px 30px;
-}
-
 .app-image {
 	position: relative;
 	height: 150px;
@@ -833,37 +786,6 @@ span.version {
 	overflow: hidden;
 }
 
-.app-description-toggle-show, .app-description-toggle-hide {
-	clear: both;
-	padding: 7px 0;
-	cursor: pointer;
-	opacity: .5;
-}
-
-.app-description-container {
-	clear: both;
-	position: relative;
-	top: 7px;
-}
-
-.app-description {
-	clear: both;
-}
-
-#app-category-1 {
-	margin-bottom: 18px;
-}
-
-/* capitalize 'Other' category */
-
-#app-category-925 {
-	text-transform: capitalize;
-}
-
-.app-dependencies {
-	color: #ce3702;
-}
-
 .missing-dependencies {
 	list-style: initial;
 	list-style-type: initial;
@@ -934,14 +856,6 @@ span.version {
 
 		}
 
-		.groups-enable {
-			margin-top: 0;
-
-			label {
-				margin-right: 3px;
-			}
-		}
-
 		.app-image {
 			width: 44px;
 			height: auto;
@@ -982,78 +896,14 @@ span.version {
 	flex-wrap: wrap;
 	align-content: flex-start;
 
-	&.hidden {
-		display: none;
-	}
-
 	.section {
 		position: relative;
 		flex: 0 0 auto;
 
-		h2.app-name {
-			display: block;
-			margin: 8px 0;
-		}
-
 		&:hover {
 			background-color: var(--color-background-dark);
 		}
 	}
-
-	.app-description {
-		p {
-			margin: 10px 0;
-		}
-
-		ul {
-			list-style: disc;
-		}
-
-		ol {
-			list-style: decimal;
-
-			ol, ul {
-				padding-left: 15px;
-			}
-		}
-
-		> {
-			ul, ol {
-				margin-left: 19px;
-			}
-		}
-
-		ul {
-			ol, ul {
-				padding-left: 15px;
-			}
-		}
-	}
-
-	/* Bundle header */
-	.apps-header {
-		position: relative;
-
-		div {
-			display: table-cell;
-			height: 70px;
-		}
-
-		h2 {
-			padding-left: 6px;
-			padding-top: 15px;
-			margin-bottom: 12px;
-			.enable {
-				position: relative;
-				top: -1px;
-				margin-left: 12px;
-			}
-
-			+ .section {
-				margin-top: 50px;
-			}
-		}
-	}
 }
 
 // Display buttons above each other on mobile
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 615e350eee438..e4787bb4029e3 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -39,7 +39,7 @@
 				</div>
 
 				<transition-group name="app-list" tag="table" class="apps-list-container">
-					<tr key="app-list-view-header" class="apps-header">
+					<tr key="app-list-view-header">
 						<th>
 							<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
 						</th>
@@ -65,7 +65,7 @@
 
 			<table v-if="useBundleView"
 				class="apps-list-container">
-				<tr key="app-list-view-header" class="apps-header">
+				<tr key="app-list-view-header">
 					<th id="app-table-col-icon">
 						<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
 					</th>
@@ -133,8 +133,6 @@
 			<div id="app-list-empty-icon" class="icon-settings-dark" />
 			<h2>{{ t('settings', 'No apps found for your version') }}</h2>
 		</div>
-
-		<div id="searchresults" />
 	</div>
 </template>
 

From 6dbd9ae0b4b2461aef3aa4ee5149a04a4328f0ea Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 15 Mar 2024 21:28:13 +0100
Subject: [PATCH 4/8] refactor(settings): use more BEM styles in apps settings

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/src/components/AppList.vue      | 32 +++++++++++--------
 .../src/components/AppList/AppItem.vue        | 10 ++++--
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index e4787bb4029e3..9898c3d61ae18 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -21,10 +21,16 @@
   -->
 
 <template>
-	<div id="app-content-inner" class="{ 'with-app-sidebar': !!selectedApp }">
-		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView }">
+	<div id="app-content-inner">
+		<div id="apps-list"
+			class="apps-list"
+			:class="{
+				'apps-list--list-view': (useBundleView || useListView),
+				'apps-list--store-view': useAppStoreView,
+				'apps-list--with-sidebar': !!selectedApp,
+			}">
 			<template v-if="useListView">
-				<div v-if="showUpdateAll" class="toolbar">
+				<div v-if="showUpdateAll" class="apps-list__toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
 					<NcButton v-if="showUpdateAll"
 						id="app-list-update-all"
@@ -34,11 +40,11 @@
 					</NcButton>
 				</div>
 
-				<div v-if="!showUpdateAll" class="toolbar">
+				<div v-if="!showUpdateAll" class="apps-list__toolbar">
 					{{ t('settings', 'All apps are up-to-date.') }}
 				</div>
 
-				<transition-group name="app-list" tag="table" class="apps-list-container">
+				<TransitionGroup name="apps-list" tag="table" class="apps-list__list-container">
 					<tr key="app-list-view-header">
 						<th>
 							<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
@@ -60,11 +66,11 @@
 						:key="app.id"
 						:app="app"
 						:category="category" />
-				</transition-group>
+				</TransitionGroup>
 			</template>
 
 			<table v-if="useBundleView"
-				class="apps-list-container">
+				class="apps-list__list-container">
 				<tr key="app-list-view-header">
 					<th id="app-table-col-icon">
 						<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
@@ -85,8 +91,8 @@
 				<template v-for="bundle in bundles">
 					<tr :key="bundle.id">
 						<th :id="`app-table-rowgroup-${bundle.id}`" colspan="5" scope="rowgroup">
-							<div class="app-bundle-heading">
-								<span class="app-bundle-header">
+							<div class="apps-list__bundle-heading">
+								<span class="apps-list__bundle-header">
 									{{ bundle.name }}
 								</span>
 								<NcButton type="secondary" @click="toggleBundle(bundle.id)">
@@ -103,7 +109,7 @@
 						:category="category" />
 				</template>
 			</table>
-			<ul v-if="useAppStoreView" class="apps-store-view">
+			<ul v-if="useAppStoreView" class="apps-list__store-container">
 				<AppItem v-for="app in apps"
 					:key="app.id"
 					:app="app"
@@ -112,10 +118,10 @@
 			</ul>
 		</div>
 
-		<div id="apps-list-search" class="apps-list installed">
-			<div class="apps-list-container">
+		<div id="apps-list-search" class="apps-list apps-list--list-view">
+			<div class="apps-list__list-container">
 				<template v-if="search !== '' && searchApps.length > 0">
-					<div class="section">
+					<div class="app-item">
 						<div />
 						<td colspan="5">
 							<h2>{{ t('settings', 'Results from other categories') }}</h2>
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 0838f2c882254..5629b22b2af83 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -22,8 +22,12 @@
 
 <template>
 	<component :is="listView ? `tr` : `li`"
-		class="section"
-		:class="{ selected: isSelected }">
+		class="app-item"
+		:class="{
+			'app-item--list-view': listView,
+			'app-item--store-view': !listView,
+			'app-item--selected': isSelected,
+		}">
 		<component :is="dataItemTag"
 			class="app-image app-image-icon"
 			:headers="getDataItemHeaders(`app-table-col-icon`)">
@@ -79,7 +83,7 @@
 				{{ t('settings', 'Featured') }}</span>
 			<AppScore v-if="hasRating && !listView" :score="app.score" />
 		</component>
-		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="actions">
+		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="app-actions">
 			<div v-if="app.error" class="warning">
 				{{ app.error }}
 			</div>

From 4cea1e93e5f0244506bf0ef58b2f778a0eafded0 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Sat, 16 Mar 2024 00:34:45 +0100
Subject: [PATCH 5/8] refactor(settings): move AppItem styles to AppItem
 component

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/src/components/AppList.vue      |   5 +-
 .../src/components/AppList/AppItem.vue        | 131 ++++++++++++++++++
 2 files changed, 132 insertions(+), 4 deletions(-)

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 9898c3d61ae18..bb0d995a51fa1 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -27,7 +27,6 @@
 			:class="{
 				'apps-list--list-view': (useBundleView || useListView),
 				'apps-list--store-view': useAppStoreView,
-				'apps-list--with-sidebar': !!selectedApp,
 			}">
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="apps-list__toolbar">
@@ -201,6 +200,7 @@ export default {
 				// An app level of `200` will be set for apps featured on the app store
 				return apps.filter(app => app.level === 200)
 			}
+
 			// filter app store categories
 			return apps.filter(app => {
 				return app.appstore && app.category !== undefined
@@ -230,9 +230,6 @@ export default {
 					return false
 				})
 		},
-		selectedApp() {
-			return this.apps.find(app => app.id === this.$route.params.id)
-		},
 		useAppStoreView() {
 			return !this.useListView && !this.useBundleView
 		},
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 5629b22b2af83..a95e986beec99 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -27,6 +27,7 @@
 			'app-item--list-view': listView,
 			'app-item--store-view': !listView,
 			'app-item--selected': isSelected,
+			'app-item--with-sidebar': withSidebar,
 		}">
 		<component :is="dataItemTag"
 			class="app-image app-image-icon"
@@ -169,6 +170,9 @@ export default {
 		dataItemTag() {
 			return this.listView ? 'td' : 'div'
 		},
+		withSidebar() {
+			return !!this.$route.params.id
+		},
 	},
 	watch: {
 		'$route.params.id'(id) {
@@ -201,6 +205,133 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use '../../../../../core/css/variables.scss' as variables;
+
+.app-item {
+	position: relative;
+
+	&:hover {
+		background-color: var(--color-background-dark);
+	}
+
+	&--list-view {
+		&.app-item--selected {
+			background-color: var(--color-background-dark);
+		}
+
+		> * {
+			vertical-align: middle;
+			border-bottom: 1px solid var(--color-border);
+			padding: 6px;
+		}
+
+		.app-image {
+			width: 44px;
+			height: auto;
+			text-align: right;
+		}
+
+		.app-image-icon svg,
+		.app-image-icon .icon-settings-dark {
+			margin-top: 5px;
+			width: 20px;
+			height: 20px;
+			opacity: .5;
+			background-size: cover;
+			display: inline-block;
+		}
+
+		.app-actions {
+			display: flex;
+			gap: 8px;
+			flex-wrap: wrap;
+			justify-content: end;
+
+			.icon-loading-small {
+				display: inline-block;
+				top: 4px;
+				margin-right: 10px;
+			}
+		}
+
+		/* hide app version and level on narrower screens */
+		@media only screen and (max-width: 900px) {
+			.app-version,
+			.app-level {
+				display: none !important;
+			}
+		}
+	}
+
+	&--store-view {
+		padding: 30px;
+
+		.app-image-icon .icon-settings-dark {
+			width: 100%;
+			height: 150px;
+			background-size: 45px;
+			opacity: 0.5;
+		}
+
+		.app-image-icon svg {
+			position: absolute;
+			bottom: 43px;
+			/* position halfway vertically */
+			width: 64px;
+			height: 64px;
+			opacity: .1;
+		}
+
+		.app-name {
+			margin: 5px 0;
+		}
+
+		.app-actions {
+			margin: 10px 0;
+		}
+
+		@media only screen and (min-width: 1601px) {
+			width: 25%;
+
+			&.app-item--with-sidebar {
+				width: 33%;
+			}
+		}
+
+		@media only screen and (max-width: 1600px) {
+			width: 25%;
+
+			&.app-item--with-sidebar {
+				width: 33%;
+			}
+		}
+
+		@media only screen and (max-width: 1400px) {
+			width: 33%;
+
+			&.app-item--with-sidebar {
+				width: 50%;
+			}
+		}
+
+		@media only screen and (max-width: 900px) {
+			width: 50%;
+
+			&.app-item--with-sidebar {
+				width: 100%;
+			}
+		}
+
+		@media only screen and (max-width: variables.$breakpoint-mobile) {
+			width: 50%;
+		}
+
+		@media only screen and (max-width: 480px) {
+			width: 100%;
+		}
+	}
+}
+
 .app-icon {
 	filter: var(--background-invert-if-bright);
 }

From b4699b97e38b8e9bffe346992fcb47df15eeba77 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Sat, 16 Mar 2024 01:52:28 +0100
Subject: [PATCH 6/8] fix(settings): app list scroll on Safari

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../src/components/AppList/AppItem.vue        | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index a95e986beec99..e66507cc5b7d7 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -206,6 +206,7 @@ export default {
 
 <style scoped lang="scss">
 @use '../../../../../core/css/variables.scss' as variables;
+@use 'sass:math';
 
 .app-item {
 	position: relative;
@@ -215,6 +216,9 @@ export default {
 	}
 
 	&--list-view {
+		--app-item-padding: calc(var(--default-grid-baseline) * 2);
+		--app-item-height: calc(var(--default-clickable-area) + var(--app-item-padding) * 2);
+
 		&.app-item--selected {
 			background-color: var(--color-background-dark);
 		}
@@ -222,11 +226,12 @@ export default {
 		> * {
 			vertical-align: middle;
 			border-bottom: 1px solid var(--color-border);
-			padding: 6px;
+			padding: var(--app-item-padding);
+			height: var(--app-item-height);
 		}
 
 		.app-image {
-			width: 44px;
+			width: var(--default-clickable-area);
 			height: auto;
 			text-align: right;
 		}
@@ -241,9 +246,30 @@ export default {
 			display: inline-block;
 		}
 
+		.app-name {
+			padding: 0 var(--app-item-padding);
+		}
+
+		.app-name--link {
+			height: var(--app-item-height);
+			display: flex;
+			align-items: center;
+		}
+
+		// Note: because of Safari bug, we cannot position link overlay relative to the table row
+		// So we need to manually position it relative to the table container and cell
+		// See: https://bugs.webkit.org/show_bug.cgi?id=240961
+		.app-name--link::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			height: var(--app-item-height);
+		}
+
 		.app-actions {
 			display: flex;
-			gap: 8px;
+			gap: var(--app-item-padding);
 			flex-wrap: wrap;
 			justify-content: end;
 
@@ -258,7 +284,14 @@ export default {
 		@media only screen and (max-width: 900px) {
 			.app-version,
 			.app-level {
-				display: none !important;
+				display: none;
+			}
+		}
+
+		/* Hide actions on a small screen. Click on app opens fill-screen sidebar with the buttons */
+		@media only screen and (max-width: math.div(variables.$breakpoint-mobile, 2)) {
+			.app-actions {
+				display: none;
 			}
 		}
 	}
@@ -286,6 +319,15 @@ export default {
 			margin: 5px 0;
 		}
 
+		.app-name--link::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+
 		.app-actions {
 			margin: 10px 0;
 		}

From ddfb7d0d5560050662c80da271bf518b40bb0783 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 18 Mar 2024 17:44:15 +0100
Subject: [PATCH 7/8] fix(settings): make apps list search result valid table

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/settings/src/components/AppList.vue | 30 +++++++++++++++++-------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index bb0d995a51fa1..0646f041340fa 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -119,18 +119,32 @@
 
 		<div id="apps-list-search" class="apps-list apps-list--list-view">
 			<div class="apps-list__list-container">
-				<template v-if="search !== '' && searchApps.length > 0">
-					<div class="app-item">
-						<div />
-						<td colspan="5">
-							<h2>{{ t('settings', 'Results from other categories') }}</h2>
-						</td>
-					</div>
+				<table v-if="search !== '' && searchApps.length > 0" class="apps-list__list-container">
+					<caption class="apps-list__bundle-header">
+						{{ t('settings', 'Results from other categories') }}
+					</caption>
+					<tr key="app-list-view-header">
+						<th>
+							<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
+						</th>
+						<th>
+							<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
+						</th>
+						<th>
+							<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
+						</th>
+						<th>
+							<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
+						</th>
+						<th>
+							<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
+						</th>
+					</tr>
 					<AppItem v-for="app in searchApps"
 						:key="app.id"
 						:app="app"
 						:category="category" />
-				</template>
+				</table>
 			</div>
 		</div>
 

From 858c61f80fe790c92065670d89920e78cb6742ab Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 18 Mar 2024 15:18:36 +0100
Subject: [PATCH 8/8] test(settings): adjust e2e tests selectors to new
 structure

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

[skip ci]
---
 cypress/e2e/settings/apps.cy.ts | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/settings/apps.cy.ts b/cypress/e2e/settings/apps.cy.ts
index bfd6b1965fa31..f2fd753e44587 100644
--- a/cypress/e2e/settings/apps.cy.ts
+++ b/cypress/e2e/settings/apps.cy.ts
@@ -39,11 +39,10 @@ describe('Settings: App management', { testIsolation: true }, () => {
 	})
 
 	it('Can enable an installed app', () => {
-		cy.get('#apps-list').should('be.visible')
+		cy.get('#apps-list').should('exist')
 			// Wait for the app list to load
 			.contains('tr', 'QA testing', { timeout: 10000 })
 			.should('exist')
-			.find('.actions')
 			// I enable the "QA testing" app
 			.contains('button', 'Enable')
 			.click({ force: true })
@@ -51,10 +50,9 @@ describe('Settings: App management', { testIsolation: true }, () => {
 		handlePasswordConfirmation(admin.password)
 
 		// Wait until we see the disable button for the app
-		cy.get('#apps-list').should('be.visible')
+		cy.get('#apps-list').should('exist')
 			.contains('tr', 'QA testing')
 			.should('exist')
-			.find('.actions')
 			// I see the disable button for the app
 			.contains('button', 'Disable', { timeout: 10000 })
 
@@ -62,15 +60,15 @@ describe('Settings: App management', { testIsolation: true }, () => {
 		cy.get('#app-category-enabled a').click({ force: true })
 		cy.url().should('match', /settings\/apps\/enabled$/)
 		// I see that the "QA testing" app has been enabled
-		cy.get('.apps-list-container').contains('tr', 'QA testing')
+		cy.get('#apps-list').contains('tr', 'QA testing')
 	})
 
 	it('Can disable an installed app', () => {
-		cy.get('#apps-list').should('be.visible')
+		cy.get('#apps-list')
+			.should('exist')
 			// Wait for the app list to load
 			.contains('tr', 'Update notification', { timeout: 10000 })
 			.should('exist')
-			.find('.actions')
 			// I disable the "Update notification" app
 			.contains('button', 'Disable')
 			.click({ force: true })
@@ -78,10 +76,9 @@ describe('Settings: App management', { testIsolation: true }, () => {
 		handlePasswordConfirmation(admin.password)
 
 		// Wait until we see the disable button for the app
-		cy.get('#apps-list').should('be.visible')
+		cy.get('#apps-list').should('exist')
 			.contains('tr', 'Update notification')
 			.should('exist')
-			.find('.actions')
 			// I see the enable button for the app
 			.contains('button', 'Enable', { timeout: 10000 })
 
@@ -89,7 +86,7 @@ describe('Settings: App management', { testIsolation: true }, () => {
 		cy.get('#app-category-disabled a').click({ force: true })
 		cy.url().should('match', /settings\/apps\/disabled$/)
 		// I see that the "Update notification" app has been disabled
-		cy.get('.apps-list-container').contains('tr', 'Update notification')
+		cy.get('#apps-list').contains('tr', 'Update notification')
 	})
 
 	it('Browse enabled apps', () => {
@@ -102,8 +99,8 @@ describe('Settings: App management', { testIsolation: true }, () => {
 		cy.get('#app-category-enabled').find('.active').should('exist')
 		// I see that there are only enabled apps
 		cy.get('#apps-list')
-			.should('be.visible')
-			.find('tr .actions')
+			.should('exist')
+			.find('tr button')
 			.each(($action) => {
 				cy.wrap($action).should('not.contain', 'Enable')
 			})
@@ -119,8 +116,8 @@ describe('Settings: App management', { testIsolation: true }, () => {
 		cy.get('#app-category-disabled').find('.active').should('exist')
 		// I see that there are only disabled apps
 		cy.get('#apps-list')
-			.should('be.visible')
-			.find('tr .actions')
+			.should('exist')
+			.find('tr button')
 			.each(($action) => {
 				cy.wrap($action).should('not.contain', 'Disable')
 			})