From c271f0b1bb42e1dbc1decea4db94f4caeb9b7fc5 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 30 Jul 2023 17:43:40 +0200
Subject: [PATCH 01/15] Settings page: Move transformations to extra list for
 optical separation

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 88cade3645..8d2b3ab7cd 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -60,6 +60,8 @@
               :footer="objectsSubtitles.pages">
               <f7-icon slot="media" f7="tv" color="gray" />
             </f7-list-item>
+          </f7-list>
+          <f7-list media-list class="search-list">
             <f7-list-item
               v-if="$store.getters.apiEndpoint('transformations')"
               media-item

From e4ec7bb77ef2ad857ad2bf0ff4c0f90b8a8bf3df Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 30 Jul 2023 17:44:15 +0200
Subject: [PATCH 02/15] Settings page: Add add-on settings & Rename system
 services to settings

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/pages/settings/settings-menu.vue  | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 8d2b3ab7cd..6d7cb124ec 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -16,7 +16,7 @@
         search-in=".item-title"
         :disable-button="!$theme.aurora" />
     </f7-navbar>
-    <f7-block class="block-narrow after-big-title settings-menu" v-show="servicesLoaded">
+    <f7-block class="block-narrow settings-menu" v-show="servicesLoaded && addonsLoaded">
       <f7-row>
         <f7-col width="100" medium="50">
           <f7-block-title>Configuration</f7-block-title>
@@ -111,7 +111,7 @@
             </f7-list-item>
           </f7-list>
           <f7-block-title v-if="$store.getters.apiEndpoint('addons')">
-            Add-ons
+            Add-on Store
           </f7-block-title>
           <f7-list media-list class="search-list"
                    v-if="$store.getters.apiEndpoint('addons')">
@@ -127,15 +127,29 @@
             </f7-list-item>
           </f7-list>
         </f7-col>
-        <f7-col width="100" medium="50" v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
-          <f7-block-title>System Services</f7-block-title>
-          <f7-list class="search-list">
-            <f7-list-item
-              v-for="service in systemServices"
-              :key="service.id"
-              :link="'services/' + service.id"
-              :title="service.label" />
-          </f7-list>
+        <f7-col width="100" medium="50">
+          <div v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
+            <f7-block-title>System Settings</f7-block-title>
+            <f7-list class="search-list">
+              <f7-list-item
+                v-for="service in systemServices"
+                :key="service.id"
+                :link="'services/' + service.id"
+                :title="service.label" />
+            </f7-list>
+          </div>
+          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
+            <f7-block-title>
+              Add-on Settings
+            </f7-block-title>
+            <f7-list class="search-list">
+              <f7-list-item
+                v-for="a in addonsInstalled"
+                :key="a.uid"
+                :link="'addons/' + a.uid + '/config'"
+                :title="a.label" />
+            </f7-list>
+          </div>
         </f7-col>
       </f7-row>
       <f7-block-footer v-if="$t('home.overview.title') !== 'Overview'" class="margin text-align-center">
@@ -154,6 +168,7 @@ export default {
       addonsLoaded: false,
       servicesLoaded: false,
       addonStoreTabShortcuts: AddonStoreTabShortcuts,
+      addonsInstalled: [],
       systemServices: [],
       objectsSubtitles: {
         things: 'Manage the physical layer',
@@ -189,13 +204,17 @@ export default {
       if (!this.apiEndpoints) return
 
       const servicesPromise = (this.$store.getters.apiEndpoint('services')) ? this.$oh.api.get('/rest/services') : Promise.resolve([])
-      const addonsPromise = (this.$store.getters.apiEndpoint('addons')) ? this.$oh.api.get('/rest/addons/types') : Promise.resolve([])
+      const addonsPromise = (this.$store.getters.apiEndpoint('addons')) ? this.$oh.api.get('/rest/addons') : Promise.resolve([])
 
       // can be done in parallel!
       servicesPromise.then((data) => {
         this.systemServices = data.filter(s => s.category === 'system')
         this.servicesLoaded = true
       })
+      addonsPromise.then((data) => {
+        this.addonsInstalled = data.filter(a => a.installed === true)
+        this.addonsLoaded = true
+      })
     },
     loadCounters () {
       if (!this.apiEndpoints) return

From c71ef8d38911a887b8640b1588647404d32e724e Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 30 Jul 2023 17:44:28 +0200
Subject: [PATCH 03/15] Settings page: Add missing counters

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/pages/settings/settings-menu.vue    | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 6d7cb124ec..9ecc20c710 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -81,6 +81,7 @@
               media-item
               link="rules/"
               title="Rules"
+              :after="rulesCount"
               badge-color="blue"
               :footer="objectsSubtitles.rules">
               <f7-icon slot="media" f7="wand_stars" color="gray" />
@@ -89,6 +90,7 @@
               media-item
               link="scenes/"
               title="Scenes"
+              :after="scenesCount"
               badge-color="blue"
               :footer="objectsSubtitles.scenes">
               <f7-icon slot="media" f7="film" color="gray" />
@@ -97,6 +99,7 @@
               media-item
               link="scripts/"
               title="Scripts"
+              :after="scriptsCount"
               badge-color="blue"
               :footer="objectsSubtitles.scripts">
               <f7-icon slot="media" f7="doc_plaintext" color="gray" />
@@ -185,7 +188,10 @@ export default {
       thingsCount: '',
       itemsCount: '',
       transformationsCount: '',
-      sitemapsCount: 0
+      sitemapsCount: 0,
+      rulesCount: '',
+      scenesCount: '',
+      scriptsCount: ''
     }
   },
   computed: {
@@ -222,7 +228,14 @@ export default {
       if (this.$store.getters.apiEndpoint('things')) this.$oh.api.get('/rest/things?staticDataOnly=true').then((data) => { this.thingsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('items')) this.$oh.api.get('/rest/items?staticDataOnly=true').then((data) => { this.itemsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('ui')) this.$oh.api.get('/rest/ui/components/system:sitemap').then((data) => { this.sitemapsCount = data.length })
-      if (this.$store.getters.apiEndpoint('transformations')) this.$oh.api.get('/rest/transformations').then((data) => { this.transformationsCount = data.length })
+      if (this.$store.getters.apiEndpoint('transformations')) this.$oh.api.get('/rest/transformations').then((data) => { this.transformationsCount = data.length.toString() })
+      if (this.$store.getters.apiEndpoint('rules')) {
+        this.$oh.api.get('/rest/rules?staticDataOnly=true').then((data) => {
+          this.rulesCount = data.filter((r) => r.tags.indexOf('Scene') < 0 && r.tags.indexOf('Script') < 0).length.toString()
+          this.scenesCount = data.filter((r) => r.tags.indexOf('Scene') >= 0).length.toString()
+          this.scriptsCount = data.filter((r) => r.tags.indexOf('Script') >= 0).length.toString()
+        })
+      }
     },
     navigateToStore (tab) {
       this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })

From 461ade1b24c76ab04ba076b4cdd285dfd7bc6c71 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 6 Aug 2023 16:56:15 +0200
Subject: [PATCH 04/15] Settings page: Update transformations icon &
 description

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../org.openhab.ui/web/src/pages/settings/settings-menu.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 9ecc20c710..987521e57d 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -70,7 +70,7 @@
               :after="transformationsCount"
               badge-color="blue"
               :footer="objectsSubtitles.transform">
-              <f7-icon slot="media" f7="arrow_2_squarepath" color="gray" />
+              <f7-icon slot="media" f7="function" color="gray" />
             </f7-list-item>
           </f7-list>
           <f7-block-title v-if="$store.getters.apiEndpoint('rules')">
@@ -178,7 +178,7 @@ export default {
         model: 'The semantic model of your home',
         items: 'Manage the functional layer',
         pages: 'Design displays for user control & monitoring',
-        transform: 'Manage transformations',
+        transform: 'Make raw data human-readable',
         rules: 'Automate with triggers and actions',
         scenes: 'Store a set of desired states as a scene',
         scripts: 'Rules dedicated to running code',

From 6cdeb69545cbe23cf5d743cd83b247d24c2a91c1 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 6 Aug 2023 17:36:31 +0200
Subject: [PATCH 05/15] Settings page: Hide advanced add-on settings by default

Only add-ons which provide configuration via config-descriptions or persistence add-ons are listed by default.
All other add-ons are considered advanced.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/pages/settings/settings-menu.vue  | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 987521e57d..94817f1703 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -147,10 +147,16 @@
             </f7-block-title>
             <f7-list class="search-list">
               <f7-list-item
-                v-for="a in addonsInstalled"
+                v-for="a in addonsSettings"
                 :key="a.uid"
                 :link="'addons/' + a.uid + '/config'"
                 :title="a.label" />
+              <f7-list-button v-if="!showingAll('addonsInstalled')" color="blue" @click="$set(expandedTypes, 'addonsInstalled', true)">
+                Show Advanced
+              </f7-list-button>
+              <f7-list-button v-if="showingAll('addonsInstalled')" color="red" @click="$set(expandedTypes, 'addonsInstalled', false)">
+                Hide Advanced
+              </f7-list-button>
             </f7-list>
           </div>
         </f7-col>
@@ -172,6 +178,7 @@ export default {
       servicesLoaded: false,
       addonStoreTabShortcuts: AddonStoreTabShortcuts,
       addonsInstalled: [],
+      addonsServices: [],
       systemServices: [],
       objectsSubtitles: {
         things: 'Manage the physical layer',
@@ -191,12 +198,21 @@ export default {
       sitemapsCount: 0,
       rulesCount: '',
       scenesCount: '',
-      scriptsCount: ''
+      scriptsCount: '',
+
+      expandedTypes: {}
     }
   },
   computed: {
     apiEndpoints () {
       return this.$store.state.apiEndpoints
+    },
+    addonsSettings () {
+      if (this.expandedTypes.addonsInstalled) return this.addonsInstalled
+      return this.addonsInstalled.filter((a) =>
+        a.type === 'persistence' ||
+        this.addonsServices.findIndex((as) => as.configDescriptionURI === a.uid.replace('-', ':')) > -1
+      )
     }
   },
   watch: {
@@ -215,6 +231,7 @@ export default {
       // can be done in parallel!
       servicesPromise.then((data) => {
         this.systemServices = data.filter(s => s.category === 'system')
+        this.addonsServices = data.filter(s => s.category !== 'system')
         this.servicesLoaded = true
       })
       addonsPromise.then((data) => {
@@ -237,6 +254,9 @@ export default {
         })
       }
     },
+    showingAll (type) {
+      return (this.expandedTypes[type] || this[type].length <= 5)
+    },
     navigateToStore (tab) {
       this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })
     },

From 7cd4f725dd84e4fc65c0ef182ef8de71a8aaccdc Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 6 Aug 2023 18:30:46 +0200
Subject: [PATCH 06/15] Settings page: Improve add-ons advanced logic

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 94817f1703..708a6b743b 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -211,7 +211,7 @@ export default {
       if (this.expandedTypes.addonsInstalled) return this.addonsInstalled
       return this.addonsInstalled.filter((a) =>
         a.type === 'persistence' ||
-        this.addonsServices.findIndex((as) => as.configDescriptionURI === a.uid.replace('-', ':')) > -1
+        this.addonsServices.findIndex((as) => as.configDescriptionURI.split(':')[1] === a.id) > -1
       )
     }
   },

From 8c38d91506d41090f5d46b89196afe888e0c7e2a Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 6 Aug 2023 18:31:18 +0200
Subject: [PATCH 07/15] Add descriptions to Items, Things & transformations
 lists

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../src/pages/settings/items/items-list-vlist.vue    | 12 ++++++++++++
 .../web/src/pages/settings/things/things-list.vue    | 12 ++++++++++++
 .../transformations/transformations-list.vue         | 11 +++++++++++
 3 files changed, 35 insertions(+)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
index 7178bf926b..1bb9903621 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@@ -30,6 +30,18 @@
     <f7-list class="searchbar-not-found">
       <f7-list-item title="Nothing found" />
     </f7-list>
+
+    <f7-block class="block-narrow">
+      <f7-col>
+        <f7-block-footer>
+          In openHAB, Items represent all properties and capabilities of the user's home automation.<br>While a Thing is quite specific to the device or service, Items provide a unified way to monitor and control functionality provided by Things.
+          <f7-link external color="blue" target="_blank" :href="`https://${$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/items`">
+            Learn more about Items.
+          </f7-link>
+        </f7-block-footer>
+      </f7-col>
+    </f7-block>
+
     <!-- skeleton for not ready -->
     <f7-block class="block-narrow">
       <f7-col v-show="!ready">
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
index a46c0f383c..fb52252595 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
@@ -48,6 +48,18 @@
     <f7-list class="searchbar-not-found">
       <f7-list-item title="Nothing found" />
     </f7-list>
+
+    <f7-block class="block-narrow">
+      <f7-col>
+        <f7-block-footer>
+          Things represent the physical layer of an openHAB system. From a configuration standpoint, Things tell openHAB which physical entities (devices, web services, information sources, etc.) are to be managed by the system.
+          <f7-link external color="blue" target="_blank" :href="`https://${$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/thing`">
+            Learn more about Things.
+          </f7-link>
+        </f7-block-footer>
+      </f7-col>
+    </f7-block>
+
     <f7-block class="block-narrow">
       <f7-col>
         <f7-block-title class="searchbar-hide-on-search">
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
index 31ebab766a..338baf7d9e 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
@@ -42,6 +42,17 @@
       <f7-list-item title="Nothing found" />
     </f7-list>
 
+    <f7-block class="block-narrow">
+      <f7-col>
+        <f7-block-footer>
+          Transformations are used to translate data from a cluttered or technical raw value to a processed human-readable representation.
+          <f7-link external color="blue" target="_blank" :href="`https://${$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/transformations`">
+            Learn more about transformations.
+          </f7-link>
+        </f7-block-footer>
+      </f7-col>
+    </f7-block>
+
     <f7-block class="block-narrow">
       <!-- skeleton for not ready -->
       <f7-col v-if="!ready">

From 99fc92e6e27e24a0fa8cbac7eeff31b3bde9ad6c Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Mon, 14 Aug 2023 19:47:03 +0200
Subject: [PATCH 08/15] Address review: "Show All" instead of "Show/Hide
 Advanced"

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../org.openhab.ui/web/src/pages/settings/settings-menu.vue  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index 708a6b743b..25a3be1ad2 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -152,10 +152,7 @@
                 :link="'addons/' + a.uid + '/config'"
                 :title="a.label" />
               <f7-list-button v-if="!showingAll('addonsInstalled')" color="blue" @click="$set(expandedTypes, 'addonsInstalled', true)">
-                Show Advanced
-              </f7-list-button>
-              <f7-list-button v-if="showingAll('addonsInstalled')" color="red" @click="$set(expandedTypes, 'addonsInstalled', false)">
-                Hide Advanced
+                Show All
               </f7-list-button>
             </f7-list>
           </div>

From 68b1d476a5310260c4ddd62216d762f445a99bb7 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Mon, 14 Aug 2023 19:52:45 +0200
Subject: [PATCH 09/15] Address review: Add docs links to "empty state
 placeholder" and "x Items - Open documentation"

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../pages/settings/items/items-list-vlist.vue | 27 +++++-----
 .../pages/settings/things/thing-details.vue   | 17 +++---
 .../src/pages/settings/things/things-list.vue | 53 ++++++++++---------
 .../transformations/transformations-list.vue  | 27 +++++-----
 4 files changed, 60 insertions(+), 64 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
index 1bb9903621..6c62633849 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@@ -32,18 +32,7 @@
     </f7-list>
 
     <f7-block class="block-narrow">
-      <f7-col>
-        <f7-block-footer>
-          In openHAB, Items represent all properties and capabilities of the user's home automation.<br>While a Thing is quite specific to the device or service, Items provide a unified way to monitor and control functionality provided by Things.
-          <f7-link external color="blue" target="_blank" :href="`https://${$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/items`">
-            Learn more about Items.
-          </f7-link>
-        </f7-block-footer>
-      </f7-col>
-    </f7-block>
-
-    <!-- skeleton for not ready -->
-    <f7-block class="block-narrow">
+      <!-- skeleton for not ready -->
       <f7-col v-show="!ready">
         <f7-block-title>&nbsp;Loading...</f7-block-title>
         <f7-list media-list class="col wide">
@@ -62,9 +51,11 @@
           </f7-list-group>
         </f7-list>
       </f7-col>
-      <f7-col v-show="ready">
+
+      <f7-col v-show="ready && items.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ items.length }} Items
+          {{ items.length }} Items -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
         </f7-block-title>
         <f7-list
           v-show="items.length > 0"
@@ -100,9 +91,14 @@
         </f7-list>
       </f7-col>
     </f7-block>
+
     <f7-block v-if="ready && !items.length" class="service-config block-narrow">
       <empty-state-placeholder icon="square_on_circle" title="items.title" text="items.text" />
+      <f7-row class="display-flex justify-content-center">
+        <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
+      </f7-row>
     </f7-block>
+
     <f7-fab v-show="!showCheckboxes" position="center-bottom" text="Refresh" slot="fixed" color="blue" @click="load()">
       <f7-icon ios="f7:arrow_clockwise" md="material:refresh" aurora="f7:arrow_clockwise" />
     </f7-fab>
@@ -293,6 +289,9 @@ export default {
     }
   },
   computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/items`
+    },
     searchPlaceholder () {
       return window.innerWidth >= 1280 ? 'Search (for advanced search, use the developer sidebar (Shift+Alt+D))' : 'Search'
     }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
index e38ad29168..da1ae2c93a 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -768,17 +768,14 @@ export default {
       }
 
       for (const channel of this.thing.channels) {
-        if (isExtensible(channel, this.thingType)) {
-          console.debug(`Adding ${channel.uid} to code because it is extensible`)
-          const editableChannel = {
-            id: channel.id,
-            channelTypeUID: channel.channelTypeUID,
-            label: channel.label,
-            description: channel.description,
-            configuration: channel.configuration
-          }
-          editableChannels.push(editableChannel)
+        const editableChannel = {
+          id: channel.id,
+          channelTypeUID: channel.channelTypeUID,
+          label: channel.label,
+          description: channel.description,
+          configuration: channel.configuration
         }
+        editableChannels.push(editableChannel)
       }
 
       if (editableChannels.length > 0) editableThing.channels = editableChannels
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
index fb52252595..e4f5c0d5e8 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
@@ -50,22 +50,29 @@
     </f7-list>
 
     <f7-block class="block-narrow">
-      <f7-col>
-        <f7-block-footer>
-          Things represent the physical layer of an openHAB system. From a configuration standpoint, Things tell openHAB which physical entities (devices, web services, information sources, etc.) are to be managed by the system.
-          <f7-link external color="blue" target="_blank" :href="`https://${$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/thing`">
-            Learn more about Things.
-          </f7-link>
-        </f7-block-footer>
+      <!-- skeleton for not ready -->
+      <f7-col v-if="!ready">
+        <f7-block-title>&nbsp;Loading...</f7-block-title>
+        <f7-list contacts-list class="col things-list">
+          <f7-list-group>
+            <f7-list-item
+              media-item
+              v-for="n in 10"
+              :key="n"
+              :class="`skeleton-text skeleton-effect-blink`"
+              title="Label of the thing"
+              subtitle="This contains the thing UID"
+              after="status badge" />
+          </f7-list-group>
+        </f7-list>
       </f7-col>
-    </f7-block>
 
-    <f7-block class="block-narrow">
-      <f7-col>
+      <f7-col v-else-if="things.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          <span v-if="ready">{{ things.length }} things</span><span v-else>Loading...</span>
+          {{ things.length }} Things -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
         </f7-block-title>
-        <div class="searchbar-found padding-left padding-right" v-show="!ready || things.length > 0">
+        <div class="searchbar-found padding-left padding-right">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
               Alphabetical
@@ -75,19 +82,7 @@
             </f7-button>
           </f7-segmented>
         </div>
-        <f7-list v-if="!ready" contacts-list class="col things-list">
-          <f7-list-group>
-            <f7-list-item
-              media-item
-              v-for="n in 10"
-              :key="n"
-              :class="`skeleton-text skeleton-effect-blink`"
-              title="Label of the thing"
-              subtitle="This contains the thing UID"
-              after="status badge" />
-          </f7-list-group>
-        </f7-list>
-        <f7-list v-else class="searchbar-found col things-list" :contacts-list="groupBy === 'alphabetical'">
+        <f7-list class="searchbar-found col things-list" :contacts-list="groupBy === 'alphabetical'">
           <f7-list-group v-for="(thingsWithInitial, initial) in indexedThings" :key="initial">
             <f7-list-item v-if="thingsWithInitial.length" :title="initial" group-title />
             <f7-list-item
@@ -115,9 +110,14 @@
         </f7-list>
       </f7-col>
     </f7-block>
+
     <f7-block v-if="ready && !things.length" class="block-narrow">
       <empty-state-placeholder icon="lightbulb" title="things.title" text="things.text" />
+      <f7-row class="display-flex justify-content-center">
+        <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
+      </f7-row>
     </f7-block>
+
     <f7-fab position="right-bottom" slot="fixed" color="blue" href="add">
       <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
       <!-- <f7-fab-buttons position="top">
@@ -163,6 +163,9 @@ export default {
 
   },
   computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/thing`
+    },
     indexedThings () {
       if (this.groupBy === 'alphabetical') {
         return this.things.reduce((prev, thing, i, things) => {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
index 338baf7d9e..5d48b71d96 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
@@ -42,17 +42,6 @@
       <f7-list-item title="Nothing found" />
     </f7-list>
 
-    <f7-block class="block-narrow">
-      <f7-col>
-        <f7-block-footer>
-          Transformations are used to translate data from a cluttered or technical raw value to a processed human-readable representation.
-          <f7-link external color="blue" target="_blank" :href="`https://${$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/transformations`">
-            Learn more about transformations.
-          </f7-link>
-        </f7-block-footer>
-      </f7-col>
-    </f7-block>
-
     <f7-block class="block-narrow">
       <!-- skeleton for not ready -->
       <f7-col v-if="!ready">
@@ -71,11 +60,12 @@
         </f7-list>
       </f7-col>
 
-      <f7-col v-else>
+      <f7-col v-else-if="transformations.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ transformations.length }} transformations
+          {{ transformations.length }} transformations -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
         </f7-block-title>
-        <div class="padding-left padding-right searchbar-found" v-show="transformations.length > 0">
+        <div class="padding-left padding-right searchbar-found">
           <f7-segmented strong tag="p">
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
               Alphabetical
@@ -87,7 +77,6 @@
         </div>
 
         <f7-list
-          v-show="transformations.length > 0"
           class="searchbar-found col transformations-list"
           ref="transformationsList"
           :contacts-list="groupBy === 'alphabetical'">
@@ -113,9 +102,14 @@
         </f7-list>
       </f7-col>
     </f7-block>
+
     <f7-block v-if="ready && !transformations.length" class="service-config block-narrow">
       <empty-state-placeholder icon="arrow_2_squarepath" title="transformations.title" text="transformations.text" />
+      <f7-row class="display-flex justify-content-center">
+        <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
+      </f7-row>
     </f7-block>
+
     <f7-fab v-show="ready && !showCheckboxes" position="right-bottom" slot="fixed" color="blue" href="add">
       <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
     </f7-fab>
@@ -140,6 +134,9 @@ export default {
     }
   },
   computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/transformations`
+    },
     indexedTransformations () {
       if (this.groupBy === 'alphabetical') {
         return this.transformations.reduce((prev, transformation, i, transformations) => {

From c101bfd143761a4cbd7fabc709ff8eee3b3af5a7 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Mon, 14 Aug 2023 19:53:52 +0200
Subject: [PATCH 10/15] Add missing i18n texts for no transformations

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../org.openhab.ui/web/src/assets/i18n/empty-states/en.json    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json b/bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json
index 10e6258360..aef295efca 100644
--- a/bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json
+++ b/bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json
@@ -11,6 +11,9 @@
   "things.nobindings.title": "No bindings",
   "things.nobindings.text": "To add things to your system, you first need to install binding add-ons.",
 
+  "transformations.title": "No transformations yet",
+  "transformations.text": "Transformations are used to translate data from a cluttered or technical raw value to a processed human-readable representation.",
+
   "model.title": "Start modelling your home",
   "model.text": "Build a model from your items to organize them and relate them to each other semantically.<br><br>Begin with a hierarchy of locations: buildings, outside areas, floors and rooms, as needed. Then, insert equipment and points from your things (or manually).",
 

From e987bd21f0d2e74c21d348e620e5801afeb39d6b Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sat, 19 Aug 2023 16:01:22 +0200
Subject: [PATCH 11/15] Consolidate add-on store & settings and rfc to own
 component

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 bundles/org.openhab.ui/web/src/js/routes.js   |  2 +-
 .../pages/settings/menu/add-on-section.vue    | 48 +++++++++++++++++++
 .../settings/{ => menu}/settings-menu.vue     | 42 ++--------------
 3 files changed, 54 insertions(+), 38 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue
 rename bundles/org.openhab.ui/web/src/pages/settings/{ => menu}/settings-menu.vue (85%)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 6380a56c2e..009ca5231d 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -9,7 +9,7 @@ import AnalyzerPopup from '../pages/analyzer/analyzer-popup.vue'
 const AboutPage = () => import(/* webpackChunkName: "about-page" */ '../pages/about.vue')
 const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../pages/profile.vue')
 
-const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/settings-menu.vue')
+const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/menu/settings-menu.vue')
 const ServiceSettingsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/services/service-settings.vue')
 const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-list.vue')
 const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue b/bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue
new file mode 100644
index 0000000000..9b5127e365
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <f7-block-title>
+      Add-ons
+    </f7-block-title>
+    <f7-list media-list>
+      <f7-list-item
+        media-item
+        :link="true"
+        @click="$f7.views.main.router.navigate('addons')"
+        title="Add-on Store"
+        footer="Bindings, automations, UIs and others">
+        <f7-icon slot="media" f7="bag" color="gray" />
+      </f7-list-item>
+    </f7-list>
+    <f7-list class="search-list">
+      <f7-list-item
+        v-for="a in addonsSettings"
+        :key="a.uid"
+        :link="'addons/' + a.uid + '/config'"
+        :title="a.label" />
+      <f7-list-button v-if="!expanded && addonsInstalled.length > addonsSettings.length" color="blue" @click="expanded = true">
+        Show All
+      </f7-list-button>
+    </f7-list>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['addonsInstalled', 'addonsServices'],
+  data () {
+    return {
+      ready: false,
+      expanded: false
+    }
+  },
+  computed: {
+    addonsSettings () {
+      if (this.expanded) return this.addonsInstalled
+      return this.addonsInstalled.filter((a) =>
+        a.type === 'persistence' ||
+        this.addonsServices.findIndex((as) => as.configDescriptionURI.split(':')[1] === a.id) > -1
+      )
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
similarity index 85%
rename from bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
rename to bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
index 25a3be1ad2..13fe24b65d 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
@@ -113,22 +113,6 @@
               <f7-icon slot="media" f7="calendar" color="gray" />
             </f7-list-item>
           </f7-list>
-          <f7-block-title v-if="$store.getters.apiEndpoint('addons')">
-            Add-on Store
-          </f7-block-title>
-          <f7-list media-list class="search-list"
-                   v-if="$store.getters.apiEndpoint('addons')">
-            <f7-list-item
-              media-item
-              v-for="shortcut in addonStoreTabShortcuts"
-              :key="shortcut.id"
-              :link="true"
-              @click="navigateToStore(shortcut.id)"
-              :title="shortcut.label"
-              :footer="shortcut.subtitle">
-              <f7-icon slot="media" :f7="shortcut.icon" color="gray" />
-            </f7-list-item>
-          </f7-list>
         </f7-col>
         <f7-col width="100" medium="50">
           <div v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
@@ -142,19 +126,7 @@
             </f7-list>
           </div>
           <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
-            <f7-block-title>
-              Add-on Settings
-            </f7-block-title>
-            <f7-list class="search-list">
-              <f7-list-item
-                v-for="a in addonsSettings"
-                :key="a.uid"
-                :link="'addons/' + a.uid + '/config'"
-                :title="a.label" />
-              <f7-list-button v-if="!showingAll('addonsInstalled')" color="blue" @click="$set(expandedTypes, 'addonsInstalled', true)">
-                Show All
-              </f7-list-button>
-            </f7-list>
+            <add-on-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
           </div>
         </f7-col>
       </f7-row>
@@ -166,9 +138,12 @@
 </template>
 
 <script>
-import { AddonStoreTabShortcuts } from '@/assets/addon-store'
+import AddOnSection from './add-on-section.vue'
 
 export default {
+  components: {
+    AddOnSection: AddOnSection
+  },
   data () {
     return {
       addonsLoaded: false,
@@ -203,13 +178,6 @@ export default {
   computed: {
     apiEndpoints () {
       return this.$store.state.apiEndpoints
-    },
-    addonsSettings () {
-      if (this.expandedTypes.addonsInstalled) return this.addonsInstalled
-      return this.addonsInstalled.filter((a) =>
-        a.type === 'persistence' ||
-        this.addonsServices.findIndex((as) => as.configDescriptionURI.split(':')[1] === a.id) > -1
-      )
     }
   },
   watch: {

From 802eed26ffa96656278def3f1b1b268de912ae91 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sat, 19 Aug 2023 16:02:46 +0200
Subject: [PATCH 12/15] Introduce advanced system settings & Use 3 cols on
 large screens

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../src/pages/settings/menu/settings-menu.vue | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
index 13fe24b65d..cba9290b32 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
@@ -18,7 +18,7 @@
     </f7-navbar>
     <f7-block class="block-narrow settings-menu" v-show="servicesLoaded && addonsLoaded">
       <f7-row>
-        <f7-col width="100" medium="50">
+        <f7-col class="settings-col" width="100" medium="50">
           <f7-block-title>Configuration</f7-block-title>
           <f7-list media-list class="search-list">
             <f7-list-item
@@ -114,17 +114,25 @@
             </f7-list-item>
           </f7-list>
         </f7-col>
-        <f7-col width="100" medium="50">
+        <f7-col class="settings-col" width="100" medium="50">
           <div v-if="$store.getters.apiEndpoint('services') && servicesLoaded">
             <f7-block-title>System Settings</f7-block-title>
             <f7-list class="search-list">
               <f7-list-item
-                v-for="service in systemServices"
+                v-for="service in systemSettings"
                 :key="service.id"
                 :link="'services/' + service.id"
                 :title="service.label" />
+              <f7-list-button v-if="!showingAll('systemSettings')" color="blue" @click="$set(expandedTypes, 'systemSettings', true)">
+                Show All
+              </f7-list-button>
             </f7-list>
           </div>
+          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
+            <add-on-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
+          </div>
+        </f7-col>
+        <f7-col width="33" class="add-on-col">
           <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
             <add-on-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
           </div>
@@ -148,7 +156,6 @@ export default {
     return {
       addonsLoaded: false,
       servicesLoaded: false,
-      addonStoreTabShortcuts: AddonStoreTabShortcuts,
       addonsInstalled: [],
       addonsServices: [],
       systemServices: [],
@@ -172,12 +179,27 @@ export default {
       scenesCount: '',
       scriptsCount: '',
 
+      advancedSystemServices: [
+        'org.openhab.storage.json',
+        'org.openhab.restauth',
+        'org.openhab.addons',
+        'org.openhab.marketplace',
+        'org.openhab.jsonaddonservice',
+        'org.openhab.inbox',
+        'org.openhab.sitemap',
+        'org.openhab.lsp'
+      ],
+
       expandedTypes: {}
     }
   },
   computed: {
     apiEndpoints () {
       return this.$store.state.apiEndpoints
+    },
+    systemSettings () {
+      if (this.expandedTypes.systemSettings) return this.systemServices
+      return this.systemServices.filter((s) => this.advancedSystemServices.indexOf(s.id) < 0)
     }
   },
   watch: {
@@ -222,9 +244,6 @@ export default {
     showingAll (type) {
       return (this.expandedTypes[type] || this[type].length <= 5)
     },
-    navigateToStore (tab) {
-      this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })
-    },
     onPageInit () {
       this.loadMenu()
     },
@@ -239,6 +258,20 @@ export default {
 <style lang="stylus">
 .device-desktop .settings-menu
   --f7-list-item-footer-line-height 1.3
+  @media (max-width 1449px)
+    z-index auto
+  @media (min-width 1450px)
+    .row
+      width 1065px
+      max-width 100%
+    .settings-col
+      width 33%
+      .add-on-section
+        visibility hidden
+  .add-on-col
+    visibility hidden
+    @media (min-width 1450px)
+      visibility visible
 .settings-menu .icon
   color var(--f7-color-blue)
 .theme-filled .settings-menu .icon

From 5be5734f4e52bf79c687868a7b483857220f8c9c Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sat, 19 Aug 2023 16:02:52 +0200
Subject: [PATCH 13/15] Clean-Ups

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/assets/addon-store.js             | 27 -------------------
 1 file changed, 27 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/assets/addon-store.js b/bundles/org.openhab.ui/web/src/assets/addon-store.js
index 9daabbcab0..e8eb669a29 100644
--- a/bundles/org.openhab.ui/web/src/assets/addon-store.js
+++ b/bundles/org.openhab.ui/web/src/assets/addon-store.js
@@ -29,33 +29,6 @@ export const Formats = {
   'karaf': 'Karaf'
 }
 
-export const AddonStoreTabShortcuts = [
-  {
-    id: 'bindings',
-    label: 'Bindings',
-    icon: 'circle_grid_hex',
-    subtitle: 'Connect and control hardware and online services'
-  },
-  {
-    id: 'automation',
-    label: 'Automation',
-    icon: 'sparkles',
-    subtitle: 'Scripting languages, templates and module types'
-  },
-  {
-    id: 'ui',
-    label: 'User Interfaces',
-    icon: 'play_rectangle',
-    subtitle: 'Community widgets & alternative frontends'
-  },
-  {
-    id: 'other',
-    label: 'Other Add-ons',
-    icon: 'ellipsis',
-    subtitle: 'System integrations, persistence, voice & more'
-  }
-]
-
 export function compareAddons (a1, a2) {
   if (a1.installed && !a2.installed) return -1
   if (a2.installed && !a1.installed) return 1

From b8f932b51bd5f3046af9e9a30ac1fa6cf9b6098b Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sat, 19 Aug 2023 16:30:03 +0200
Subject: [PATCH 14/15] Add doc links to missing lists (pages, rules, scenes,
 scripts)

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../src/pages/settings/pages/pages-list.vue   | 49 ++++++++++---------
 .../src/pages/settings/rules/rules-list.vue   | 29 ++++++-----
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
index 90377aa998..016dcbb43a 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
@@ -45,20 +45,8 @@
 
     <!-- skeleton for not ready -->
     <f7-block class="block-narrow">
-      <f7-col>
-        <f7-block-title class="searchbar-hide-on-search">
-          <span v-if="ready">{{ pages.length }} pages</span><span v-else>Loading...</span>
-        </f7-block-title>
-        <div class="padding-left padding-right searchbar-found" v-show="!ready || pages.length > 0">
-          <f7-segmented strong tag="p">
-            <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
-              Alphabetical
-            </f7-button>
-            <f7-button :active="groupBy === 'type'" @click="switchGroupOrder('type')">
-              By type
-            </f7-button>
-          </f7-segmented>
-        </div>
+      <f7-col v-if="!ready">
+        <f7-block-title>&nbsp;Loading...</f7-block-title>
         <f7-list v-if="!ready" contacts-list class="col wide pages-list">
           <f7-list-group>
             <f7-list-item
@@ -74,8 +62,25 @@
             </f7-list-item>
           </f7-list-group>
         </f7-list>
-        <f7-list v-else
-                 v-show="pages.length > 0"
+      </f7-col>
+
+      <f7-col v-else>
+        <f7-block-title class="searchbar-hide-on-search">
+          {{ pages.length }} pages -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
+        </f7-block-title>
+        <div class="padding-left padding-right searchbar-found" v-show="!ready || pages.length > 0">
+          <f7-segmented strong tag="p">
+            <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
+              Alphabetical
+            </f7-button>
+            <f7-button :active="groupBy === 'type'" @click="switchGroupOrder('type')">
+              By type
+            </f7-button>
+          </f7-segmented>
+        </div>
+
+        <f7-list v-show="pages.length > 0"
                  class="searchbar-found col pages-list"
                  ref="pagesList"
                  :contacts-list="groupBy === 'alphabetical'" media-list>
@@ -112,9 +117,9 @@
         </f7-list>
       </f7-col>
     </f7-block>
-    <f7-block v-if="ready && !pages.length" class="service-config block-narrow">
-      <empty-state-placeholder icon="tv" title="pages.title" text="pages.text" />
-    </f7-block>
+
+    <!-- empty-state-placeholder not needed because the overview page cannot be deleted, so there is at least 1 page -->
+
     <f7-fab v-show="ready && !showCheckboxes" position="right-bottom" slot="fixed" color="blue">
       <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
       <f7-icon ios="f7:multiply" md="material:close" aurora="f7:multiply" />
@@ -144,9 +149,6 @@
 
 <script>
 export default {
-  components: {
-    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
-  },
   data () {
     return {
       ready: false,
@@ -168,6 +170,9 @@ export default {
     }
   },
   computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/pages`
+    },
     indexedPages () {
       if (this.groupBy === 'alphabetical') {
         return this.pages.reduce((prev, page, i, pages) => {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index a23c4ace3e..b6c27ba681 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -1,6 +1,6 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
-    <f7-navbar :title="(showScripts) ? 'Scripts' : ((showScenes) ? 'Scenes' : 'Rules')" back-link="Settings" back-link-url="/settings/" back-link-force>
+    <f7-navbar :title="type" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
@@ -53,8 +53,8 @@
 
     <empty-state-placeholder v-if="noRuleEngine" icon="exclamationmark_triangle" title="rules.missingengine.title" text="rules.missingengine.text" />
 
-    <!-- skeleton for not ready -->
     <f7-block class="block-narrow" v-show="!noRuleEngine">
+      <!-- skeleton for not ready -->
       <f7-col v-if="!ready">
         <f7-block-title>&nbsp;Loading...</f7-block-title>
         <f7-list contacts-list class="col rules-list">
@@ -71,15 +71,11 @@
           </f7-list-group>
         </f7-list>
       </f7-col>
-      <f7-col v-else>
-        <f7-block-title v-if="showScripts" class="searchbar-hide-on-search">
-          {{ rules.length }} scripts
-        </f7-block-title>
-        <f7-block-title v-else-if="showScenes" class="searchbar-hide-on-search">
-          {{ rules.length }} scenes
-        </f7-block-title>
-        <f7-block-title v-else class="searchbar-hide-on-search">
-          {{ rules.length }} rules
+
+      <f7-col v-else-if="rules.length > 0">
+        <f7-block-title class="searchbar-hide-on-search">
+          {{ rules.length }} {{ type.toLowerCase() }} -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
         </f7-block-title>
 
         <f7-list
@@ -117,11 +113,16 @@
         </f7-list>
       </f7-col>
     </f7-block>
+
     <f7-block v-if="ready && !noRuleEngine && !rules.length" class="service-config block-narrow">
       <empty-state-placeholder v-if="showScripts" icon="doc_plaintext" title="scripts.title" text="scripts.text" />
       <empty-state-placeholder v-else-if="showScenes" icon="film" title="scenes.title" text="scenes.text" />
       <empty-state-placeholder v-else icon="wand_stars" title="rules.title" text="rules.text" />
+      <f7-row class="display-flex justify-content-center">
+        <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
+      </f7-row>
     </f7-block>
+
     <f7-fab v-show="ready && !showCheckboxes" position="right-bottom" slot="fixed" color="blue" href="add">
       <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
       <f7-icon ios="f7:close" md="material:close" aurora="f7:close" />
@@ -151,6 +152,12 @@ export default {
     }
   },
   computed: {
+    type () {
+      return this.showScripts ? 'Scripts' : (this.showScenes ? 'Scenes' : 'Rules')
+    },
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/${this.type.toLowerCase()}`
+    },
     indexedRules () {
       return this.rules.reduce((prev, rule, i, rules) => {
         const initial = rule.name.substring(0, 1).toUpperCase()

From 311dcb1f566ba0ed22754797bf58194d15adddde Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Mon, 21 Aug 2023 17:38:07 +0200
Subject: [PATCH 15/15] Fix style issues with hidden elements

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/pages/settings/menu/settings-menu.vue    | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
index cba9290b32..fea842bd2e 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
@@ -128,12 +128,12 @@
               </f7-list-button>
             </f7-list>
           </div>
-          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
+          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && $f7.width < 1450">
             <add-on-section class="add-on-section" :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
           </div>
         </f7-col>
         <f7-col width="33" class="add-on-col">
-          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
+          <div v-if="$store.getters.apiEndpoint('addons') && addonsLoaded && $f7.width >= 1450">
             <add-on-section :addonsInstalled="addonsInstalled" :addonsServices="addonsServices" />
           </div>
         </f7-col>
@@ -258,20 +258,12 @@ export default {
 <style lang="stylus">
 .device-desktop .settings-menu
   --f7-list-item-footer-line-height 1.3
-  @media (max-width 1449px)
-    z-index auto
   @media (min-width 1450px)
     .row
       width 1065px
       max-width 100%
     .settings-col
       width 33%
-      .add-on-section
-        visibility hidden
-  .add-on-col
-    visibility hidden
-    @media (min-width 1450px)
-      visibility visible
 .settings-menu .icon
   color var(--f7-color-blue)
 .theme-filled .settings-menu .icon