[main ui] Alphabetize semantic classes and properties in pop-over

[SRGDamia1]

The problem

In the (awesome) new ui, the semantic classes and semantic properties are not alphabetized in the pop-over from the "create equipment from thing" and "add items from thing" screens. This makes it harder to quickly find and select the correct one.

Your suggestion

Alphabetize (0-9,A-z) the list of item for the selection

Your environment

runtimeInfo:
  version: 3.0.0
  buildString: Release Build
locale: en_US
systemInfo:
  configFolder: /etc/openhab
  userdataFolder: /var/lib/openhab
  logFolder: /var/log/openhab
  javaVersion: 11.0.9
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu11.43+88-CA
  osName: Linux
  osVersion: 5.4.79-v7+
  osArchitecture: arm
clientInfo:
  device:
    desktop: true
    firefox: true
    windows: true
    os: windows
    pixelRatio: 1.25
    prefersColorScheme: light
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 12
    language: en-US
    languages:
      - en-US
      - en
    onLine: true
    platform: Win32
  screen:
    width: 1536
    height: 864
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: filled
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101
    Firefox/84.0

Additional information

[eikowagenknecht]

I think this should be done in almost all popup dialogs. Also currently when you open a popup selection dialog where an item already is selected, it does still show the top of the list instead of scrolling to the (first) selected item. This can easily be improved with the scrollToSelectedItem option the f7 framework offers.

[ghys]

Sure, sometimes it's best to have a predictable alphabetized list, sometimes it's also nice to have the most "popular/desired" options at the top. I'm ambivalent about this one.

[eikowagenknecht]

I understand where you're coming from @ghys. I think that the argument for a list "sorted by popularity" would be that the user sees the things he probably needs in the first few entries. And the argument for an alphabetical list would be that the user can quickly find an item when he knows the name.

I see that there is a quite big downside with the "popularity" approach. While for the first few entries it might be an obvious choice what is "popular" the further down we go in the list the more random it gets. And who defines what is "popular"? I think openHAB caters to very different needs so for most lists I couldn't say what the user probably needs most.

And a user that often uses the dialog (maybe with weeks / months in between) has to remember this (from his view) arbitrary sort order. That is quite a burden to place on the user and imho makes it a lot more difficult to find what he is actually looking for. Especially larger lists are then only really usable with the search function.

Maybe there is another way to emphasize the "popular choice" if there really is one, like a root element? E.g. putting the default / most prominent choice at the top of the list and making it bold. And then the others alphabetically.. eg for equipment:

• Equipment
• AlarmSystem
• BackDoor
• Battery
• ...
• Window

Another possibility would be to let the user choose / make the list sortable. But I think that adds too muchg UI clutter.

[mufflastig]

I would really like an option to make the list sortable. I do not think there would be too much clutter, as there are many ways this could be achieved.

Some ideas:

1. Add a header to the list ("Name", "Label" or "Thing" and change the dialog title to "Select a thing") and use the default priority sorting. When the user presses the header, the list will be sorted in alphabetical order and change between ascending and descending. (e.g. https://material.io/components/data-tables#anatomy)
2. Use a symbol which shows a context menu to show the available sorting options. (e.g. https://material.io/resources/icons/?search=sort&icon=sort&style=baseline)
3. Use some kind of filtering like you did in other areas. This could be used on top of the list with the options "Priority" and "Alphabetical".

I think in this case there is simply no best default way, so why not let the user decide?