Merge pull request #1506 from moodlemobile/app-docs

[docs] Documentation update for app version 5.1.0

Author: dpalou

general/app/upgrading/plugins-upgrade-guide.md

@@ -18,6 +18,20 @@ Depending on which version of the app you're upgrading from, you'll need to go t
 
 Other than the changes outlined in this document, there may be smaller API changes that aren't highlighted here. Make sure to check the [UPGRADE.md](https://github.com/moodlehq/moodleapp/blob/latest/UPGRADE.md) file for an exhaustive list with all the changes.
 
+## 5.0 to 5.1
+
+In this version, the app has undergone a major framework modernization. The most significant change is the upgrade of **Angular from v17 to v20**.
+
+### Angular 20 Upgrade
+
+This is a major jump that aligns the app with the latest web standards and performance improvements. While Angular 20 maintains backward compatibility for many patterns, there is a key area you should review in your site plugins:
+
+**[New Control Flow Syntax](https://v20.angular.dev/guide/templates/control-flow):** Angular 20 stabilizes the modern control flow syntax. We recommend replacing structural directives like `*ngIf`, `*ngFor`, and `[ngSwitch]` with the new `@if`, `@for`, and `@switch` blocks. We strongly recommend migrating to this new syntax as it offers better performance, improved type safety, and is the current standard for Angular development, while the old directives have been deprecated. This new control flow can be used since Moodle app 4.4.
+
+Make sure to test your plugin thoroughly, especially any custom templates that might be affected by in newer Angular versions. Refer to the official Angular upgrade guide for a detailed list of breaking changes between v17 and v20.
+
+**Note for developers:** Please remember to check the [UPGRADE.md](https://github.com/moodlehq/moodleapp/blob/latest/UPGRADE.md) file regularly for any deprecated methods or classes within the Moodle App API to ensure your plugin remains compatible with future releases.
+
 ## 4.4 to 4.5
 
 The Ionic version has been upgraded to v8 (from v7), make sure to check the relevant upgrade guides for [v8](https://ionicframework.com/docs/updating/8-0). In particular, the legacy syntax to declare input labels that was deprecated on Ionic7 now has been removed.

general/app_releases.md

@@ -10,6 +10,7 @@ tags:
 
 | **Version name** | **Date** |
 |---|---|
+| [Moodle App 5.1.0](./app_releases/v5/v5.1.0) |  9 January 2026 |
 | [Moodle App 5.0.0](./app_releases/v5/v5.0.0) |  27 June 2025 |
 
 ## Moodle App 4.x

general/app_releases/v5/v5.1.0.md

@@ -0,0 +1,85 @@
+---
+title: Moodle App 5.1.0 release notes
+sidebar_label: Moodle App 5.1.0
+tags:
+  - Moodle App
+  - Release notes
+---
+
+Release date: 9 January 2026
+
+## New features and improvements
+
+New features and improvements:
+
+- Edit your profile picture before uploading it (crop, rotate, and center).
+- Support for the new course activities overview page.
+- Improved QR code scanner with flashlight support and easier QR code alignment.
+- Support for Bootstrap 4 and 5 components in app content.
+
+## Complete list of issues
+
+### New feature
+
+- [MOBILE-4770](https://moodle.atlassian.net/browse/MOBILE-4770) - New course activities overview page consistent with LMS one
+
+### Task
+
+- [MOBILE-4921](https://moodle.atlassian.net/browse/MOBILE-4921) - Add data-category-id in the same places where we added data-course-id, the main objective is able to apply CSS per category (not only course)
+- [MOBILE-4887](https://moodle.atlassian.net/browse/MOBILE-4887) - Add course id data attribute to course page
+- [MOBILE-4840](https://moodle.atlassian.net/browse/MOBILE-4840) - Support edge-to-edge Android 15 and update StatusBar API
+- [MOBILE-4839](https://moodle.atlassian.net/browse/MOBILE-4839) - Update Android SDK API level to 36
+- [MOBILE-4825](https://moodle.atlassian.net/browse/MOBILE-4825) - Google Play's 16 KB page size compatibility requirement
+- [MOBILE-4739](https://moodle.atlassian.net/browse/MOBILE-4739) - Update Angular to the latest version supported by Ionic (as of now, Angular 20)
+
+### Improvement
+
+- [MOBILE-4928](https://moodle.atlassian.net/browse/MOBILE-4928) - The courses search page should not display all courses when the search is reset
+- [MOBILE-4926](https://moodle.atlassian.net/browse/MOBILE-4926) - Add classes to be able to change the display mode of elements on the mobile app
+- [MOBILE-4908](https://moodle.atlassian.net/browse/MOBILE-4908) - Support the expand attribute in course/overview.php links in the app
+- [MOBILE-4906](https://moodle.atlassian.net/browse/MOBILE-4906) - Remove the cancel button from the "Where can I find my QR code?" screen
+- [MOBILE-4902](https://moodle.atlassian.net/browse/MOBILE-4902) - Emoji are not displayed on format-text for iPhones
+- [MOBILE-4891](https://moodle.atlassian.net/browse/MOBILE-4891) - Support Bootstrap 5 Carousels
+- [MOBILE-4869](https://moodle.atlassian.net/browse/MOBILE-4869) - Add a log in Moodle when an activity type is expanded in course overview
+- [MOBILE-4868](https://moodle.atlassian.net/browse/MOBILE-4868) - Support course overview of activities that are still not supported in the app
+- [MOBILE-4867](https://moodle.atlassian.net/browse/MOBILE-4867) - Support the new overview_action output in course overview in the app
+- [MOBILE-4866](https://moodle.atlassian.net/browse/MOBILE-4866) - Support pix_icon output in course overview in the app
+- [MOBILE-4864](https://moodle.atlassian.net/browse/MOBILE-4864) - Upgrade to Ionic 8.7
+- [MOBILE-4855](https://moodle.atlassian.net/browse/MOBILE-4855) - Support Bootstrap 5 Tabs
+- [MOBILE-4854](https://moodle.atlassian.net/browse/MOBILE-4854) - Disable message functionality for LMS 3.5 version
+- [MOBILE-4853](https://moodle.atlassian.net/browse/MOBILE-4853) - Decide whether to underline links in the app
+- [MOBILE-4852](https://moodle.atlassian.net/browse/MOBILE-4852) - Redirect search done in my overview block to the search course list when no results
+- [MOBILE-4851](https://moodle.atlassian.net/browse/MOBILE-4851) - Add GHA Docker build tests
+- [MOBILE-4834](https://moodle.atlassian.net/browse/MOBILE-4834) - Support Bootstrap 5 Collapse, Accordion and Modals
+- [MOBILE-4829](https://moodle.atlassian.net/browse/MOBILE-4829) - Make it easier for site plugins to be displayed in the user menu
+- [MOBILE-4820](https://moodle.atlassian.net/browse/MOBILE-4820) - Add the ability to crop and re-center the avatar on upload
+- [MOBILE-4819](https://moodle.atlassian.net/browse/MOBILE-4819) - Improve QR code scanner screen
+- [MOBILE-4811](https://moodle.atlassian.net/browse/MOBILE-4811) - Use data-open-in attribute to force the non local version of a hosted file in the site to be opened in the external browser or in-app browser
+- [MOBILE-4799](https://moodle.atlassian.net/browse/MOBILE-4799) - Site home: site announcements should no longer be hidden in Main menu block
+- [MOBILE-4557](https://moodle.atlassian.net/browse/MOBILE-4557) - Evaluate partially disabling user tours by default
+- [MOBILE-4515](https://moodle.atlassian.net/browse/MOBILE-4515) - Disable the Download button inside the activity information menu when "Offline" mode is disabled via site configuration (disabled features)
+- [MOBILE-4417](https://moodle.atlassian.net/browse/MOBILE-4417) - Generic support for displaying alternative content or URLs on the Moodle app
+- [MOBILE-4295](https://moodle.atlassian.net/browse/MOBILE-4295) - Include variable to control course card image aspect ratio
+- [MOBILE-4196](https://moodle.atlassian.net/browse/MOBILE-4196) - Support Bootstrap 5 missing pure CSS components
+
+### Bug
+
+- [MOBILE-4922](https://moodle.atlassian.net/browse/MOBILE-4922) - Android crash: JNI Global Reference Table Overflow (SodiumAndroid / SecureStorage)
+- [MOBILE-4918](https://moodle.atlassian.net/browse/MOBILE-4918) - When downloading a course or a section with embedded files, the app always says that the size couldn't be calculated
+- [MOBILE-4909](https://moodle.atlassian.net/browse/MOBILE-4909) - Activities with empty completion conditions don't display completion in the app
+- [MOBILE-4862](https://moodle.atlassian.net/browse/MOBILE-4862) - App crashes when opening files without a compatible app (in Android devices)
+- [MOBILE-4860](https://moodle.atlassian.net/browse/MOBILE-4860) - Opening a course using a link (in Site Home) displays the header wrong
+- [MOBILE-4858](https://moodle.atlassian.net/browse/MOBILE-4858) - Certainty info is not displayed on quiz
+- [MOBILE-4857](https://moodle.atlassian.net/browse/MOBILE-4857) - Pinch to zoom does not work in certain pages such as calendar
+- [MOBILE-4856](https://moodle.atlassian.net/browse/MOBILE-4856) - Private files, when a file is downloaded the icon is very close to the file name, it is lacking some margin
+- [MOBILE-4850](https://moodle.atlassian.net/browse/MOBILE-4850) - Send message input is hidden behind keyboard in iPhones
+- [MOBILE-4849](https://moodle.atlassian.net/browse/MOBILE-4849) - Unable to view module preview when resource activity is restricted
+- [MOBILE-4827](https://moodle.atlassian.net/browse/MOBILE-4827) - TinyMCE dialogs and fullscreen not displayed correctly on iOS
+- [MOBILE-4824](https://moodle.atlassian.net/browse/MOBILE-4824) - mod_url No update url after changes
+- [MOBILE-4821](https://moodle.atlassian.net/browse/MOBILE-4821) - Fix editor behaviour when opening/closing the keyboard
+- [MOBILE-4817](https://moodle.atlassian.net/browse/MOBILE-4817) - Feedback activities are not marked as completed when meets the requirements
+- [MOBILE-4816](https://moodle.atlassian.net/browse/MOBILE-4816) - Email confirmation modal throws an unexpected error
+- [MOBILE-4810](https://moodle.atlassian.net/browse/MOBILE-4810) - Cannot Set Date Fields Individually in Database Activity Entries
+- [MOBILE-4802](https://moodle.atlassian.net/browse/MOBILE-4802) - Multiple download courses button doesn't appear
+- [MOBILE-4798](https://moodle.atlassian.net/browse/MOBILE-4798) - Handle blog visibility levels from config when create a new entry
+- [MOBILE-4796](https://moodle.atlassian.net/browse/MOBILE-4796) - Fullscreen for videos in Android does not remove the Android native bars

general/development/policies/codingstyle-moodleapp.md

@@ -601,37 +601,9 @@ There is a maximum line length of 140 characters for templates. Whenever that le
 If you are using VSCode, this should be done automatically on every save with the [configuration that ships with the app](https://github.com/moodlehq/moodleapp/blob/latest/.vscode/settings.json#L8).
 :::
 
-### Avoid default exports
-
-Using default exports should be avoided for Angular applications because they [cause issues with AOT compiler](https://stackoverflow.com/questions/45962317/why-isnt-export-default-recommended-in-angular). Technically only components have this problem, but in order to avoid the mental load of thinking about this every time, we disallow it altogether.
-
-<ValidExample title="Good">
-
-```ts
-@Component({
-    selector: 'my-component',
-    templateUrl: 'my-component.html',
-})
-export class MyComponent {}
-```
-
-</ValidExample>
-
-<InvalidExample title="Bad">
-
-```ts
-@Component({
-    selector: 'my-component',
-    templateUrl: 'my-component.html',
-})
-export default class MyComponent {}
-```
-
-</InvalidExample>
-
 ### Declaring page modules
 
-When creating a page component, it should be declared in the feature's [lazy modules](../../../general/app/development/development-guide.md#routing). Exceptionally, pages that are used by more than one module can create a page module; but this module should only declare components, it shouldn't include any routing functionality.
+When creating a page component, it should be declared as a standalone component and exported as default class so it can be easily [lazy loaded](../../../general/app/development/development-guide.md#routing).
 
 <ValidExample title="Good">
 
@@ -640,66 +612,33 @@ When creating a page component, it should be declared in the feature's [lazy mod
 @Component({
     selector: 'page-core-feature-index',
     templateUrl: 'index.html',
+    imports: [
+        CoreSharedModule,
+    ],
 })
-export class CoreFeatureIndexPageComponent {}
+export default class CoreFeatureIndexPageComponent {}
 ```
 
 ```ts
-// file: core/features/feature/feature-lazy.module.ts
+// file: core/features/feature/feature.module.ts
 const routes: Routes = [
     {
         path: 'feature',
-        component: CoreFeatureIndexPageComponent,
+        loadComponent: () => import('./pages/index/index'),
     },
 ];
-
-@NgModule({
-    imports: [
-        RouterModule.forChild(routes),
-        CoreSharedModule,
-    ],
-    declarations: [
-        CoreFeatureIndexPageComponent,
-    ],
-})
-export class CoreFeatureLazyModule {}
 ```
 
 </ValidExample>
 
-<CodeExample type="warning" title="Allowed only if the page is used in multiple modules">
-
-```ts
-// file: core/features/feature/pages/index/index.page.ts
-@Component({
-    selector: 'page-core-feature-index',
-    templateUrl: 'index.html',
-})
-export class CoreFeatureIndexPageComponent {}
-```
-
-```ts
-// file: core/features/feature/pages/index/index.module.ts
-@NgModule({
-    imports: [
-        CoreSharedModule,
-    ],
-    declarations: [
-        CoreFeatureIndexPageComponent,
-    ],
-})
-export class CoreFeatureIndexPageModule {}
-```
-
-</CodeExample>
-
 <InvalidExample title="Bad">
 
 ```ts
 // file: core/features/feature/pages/index/index.page.ts
 @Component({
     selector: 'page-core-feature-index',
     templateUrl: 'index.html',
+    standalone: false,
 })
 export class CoreFeatureIndexPageComponent {}
 ```