refactor(appstore): migrate to Typescript and Vue 3

[susnux]

• for 📦 ❗️Vue 3 Migration - Roadmap #55428
• resolves [Bug] Nextcloud 30 : Information not updating after update or installation (need to refresh page) #47637
• resolves An app store setting to "Hide untested apps" #48112
• resolves App tile is squished on search in Apps page #49423
• resolves In-app search in Apps management #49598
• resolves [Bug]: App list buttons layout is broken on small screens #49813
• resolves Global search for apps #49869
• resolves [Bug]: Limit application to group list is incomplete and does not accept not listed groups #50231
• resolves [Bug]: Restrict app to a group menu isn't working properly #50543
• resolves App management: The "download and enable" button should be moved outside the sidebar tab #44125
• resolves [Bug]: No scrolling on apps page #44568
• resolves Apps management: Search happening in multiple places #23127
• resolves [Bug]: App screenshots are partly covered #36755
• resolves App store shows group gid instead of displayname when restricting access #37333
• resolves Limit to groups selection broken for >~5 groups #39322

Summary

1. Split the settings app into settings + appstore to separate the means
2. Adjust router to allow the appstore app to register root URLs (to prevent breaking changes in the URLs)
3. Migrate appstore frontend to Typescript
4. Use Vue 3 for the appstore frontend

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)
• Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
• Milestone added for target branch/version (ex: 32.x for stable32)

[artonge]

Good got me besides some nitpicks

[artonge]

We don't use BEM anymore?

[artonge]

Also, any reason to not using scss to nest the blocks?

[susnux]

Its BEM:

• Block: officeSuiteSwitcherItem
• Element: none (its the root)
• Modifier: selected

Its just using _ instead of - (as per BEM naming guide) as otherwise you cannot properly use it with dot notation like
$style.officeSuiteSwitcherItem_selected vs $style['officeSuiteSwitcherItem--selected']

[susnux]

Also, any reason to not using scss to nest the blocks?

No need anymore for SCSS, nowadays this is supported by native CSS nesting.
I also saw many complaining about deep nesting and here no nesting is needed for CSS rule specificity.

Or do you mean for things like this:

.base {
   &__sub {
    // ...
  }
}

[artonge]

Its just using _ instead of - (as per BEM naming guide) as otherwise you cannot properly use it with dot notation like
$style.officeSuiteSwitcherItem_selected vs $style['officeSuiteSwitcherItem--selected']

I have no preference, but if this is nicer to use in practice, then we should update our recommendations.

Or do you mean for things like this:

.base {
   &__sub {
    // ...
  }
}

Yes, I was thinking of that. And similarity, if this leads to complaints due to some reason, maybe we should reconsider our recommendations.

[artonge]

IIRC, css supports block specific break points so that this can be done 100% in css, but that might not be broadly available yet.

[susnux]

As far as I know there are no element specific break points.
Only viewport based breakpoints.

But moved it to the styles

[artonge]

Or am I misunderstanding?

https://modern-css.com/responsive-components-without-media-queries/

[susnux]

/compile rebase