Merge remote-tracking branch 'origin/develop' into develop

# Conflicts:
#	src/app/app.component.html
#	src/app/app.component.ts
#	src/app/pages/login-form/login-form.component.ts

.gitignore

@@ -1,42 +1,391 @@
-# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+# Created by https://www.toptal.com/developers/gitignore/api/angular,webstorm,node,webstorm+all,visualstudiocode,windows
+# Edit at https://www.toptal.com/developers/gitignore?templates=angular,webstorm,node,webstorm+all,visualstudiocode,windows
 
-# Compiled output
-/dist
-/tmp
-/out-tsc
-/bazel-out
+### Angular ###
+## Angular ##
+# compiled output
+dist/
+tmp/
+app/**/*.js
+app/**/*.js.map
 
-# Node
-/node_modules
-npm-debug.log
-yarn-error.log
+# dependencies
+node_modules/
+bower_components/
 
 # IDEs and editors
 .idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
 
-# Visual Studio Code
+# misc
+.sass-cache/
+connect.lock/
+coverage/
+libpeerconnection.log/
+npm-debug.log
+testem.log
+typings/
+.angular/
+
+# e2e
+e2e/*.js
+e2e/*.map
+
+# System Files
+.DS_Store/
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### VisualStudioCode ###
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-.history/*
+!.vscode/*.code-snippets
 
-# Miscellaneous
-/.angular/cache
-.sass-cache/
-/connect.lock
-/coverage
-/libpeerconnection.log
-testem.log
-/typings
+# Local History for Visual Studio Code
+.history/
 
-# System files
-.DS_Store
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### WebStorm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+# https://plugins.jetbrains.com/plugin/7973-sonarlint
+.idea/**/sonarlint/
+
+# SonarQube Plugin
+# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
+.idea/**/sonarIssues.xml
+
+# Markdown Navigator plugin
+# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
+.idea/**/markdown-navigator.xml
+.idea/**/markdown-navigator-enh.xml
+.idea/**/markdown-navigator/
+
+# Cache file creation bug
+# See https://youtrack.jetbrains.com/issue/JBR-2257
+.idea/$CACHE_FILE$
+
+# CodeStream plugin
+# https://plugins.jetbrains.com/plugin/12206-codestream
+.idea/codestream.xml
+
+# Azure Toolkit for IntelliJ plugin
+# https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij
+.idea/**/azureSettings.xml
+
+### WebStorm+all ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+
+# AWS User-specific
+
+# Generated files
+
+# Sensitive or high-churn files
+
+# Gradle
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+
+# Mongo Explorer plugin
+
+# File-based project format
+
+# IntelliJ
+
+# mpeltonen/sbt-idea plugin
+
+# JIRA plugin
+
+# Cursive Clojure plugin
+
+# SonarLint plugin
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+
+# Editor-based Rest Client
+
+# Android studio 3.1+ serialized cache file
+
+### WebStorm+all Patch ###
+# Ignore everything but code style settings and run configurations
+# that are supposed to be shared within teams.
+
+.idea/*
+
+!.idea/codeStyles
+!.idea/runConfigurations
+
+### Windows ###
+# Windows thumbnail cache files
 Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/angular,webstorm,node,webstorm+all,visualstudiocode,windows

android/.gitignore

@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace = "com.knots.mobile"
+    compileSdk = rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.knots.mobile"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_21
+      targetCompatibility JavaVersion.VERSION_21
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation|density"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>

android/app/src/main/java/com/knots/mobile/MainActivity.java

@@ -0,0 +1,5 @@
+package com.knots.mobile;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">knots</string>
+    <string name="title_activity_main">knots</string>
+    <string name="package_name">com.knots.mobile</string>
+    <string name="custom_url_scheme">com.knots.mobile</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

android/app/src/main/res/xml/file_paths.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/build.gradle

@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.13.0'
+        classpath 'com.google.gms:google-services:4.4.4'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 24
+    compileSdkVersion = 36
+    targetSdkVersion = 36
+    androidxActivityVersion = '1.11.0'
+    androidxAppCompatVersion = '1.7.1'
+    androidxCoordinatorLayoutVersion = '1.3.0'
+    androidxCoreVersion = '1.17.0'
+    androidxFragmentVersion = '1.8.9'
+    coreSplashScreenVersion = '1.2.0'
+    androidxWebkitVersion = '1.14.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.3.0'
+    androidxEspressoCoreVersion = '3.7.0'
+    cordovaAndroidVersion = '14.0.1'
+}

angular.json

@@ -52,7 +52,40 @@
               }
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              {
+                "input": "node_modules/@ionic/angular/css/core.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/normalize.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/structure.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/typography.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/display.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/padding.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/float-elements.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/text-alignment.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/text-transformation.css"
+              },
+              {
+                "input": "node_modules/@ionic/angular/css/flex-utils.css"
+              },
+              {
+                "input": "src/theme/variables.css"
+              }
             ],
             "scripts": []
           },
@@ -82,6 +115,8 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"},
           "configurations": {
             "production": {
               "buildTarget": "Knots-Front:build:production"

capacitor.config.ts

@@ -0,0 +1,9 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.knots.mobile',
+  appName: 'knots',
+  webDir: 'dist'
+};
+
+export default config;

ionic.config.json

@@ -0,0 +1,6 @@
+{
+  "name": "ionic-app",
+  "app_id": "",
+  "type": "angular-standalone",
+  "integrations": {}
+}

openapi-generator.yaml

@@ -0,0 +1,3 @@
+additionalProperties:
+  fileNaming: kebab-case
+  modelPropertyNaming: camelCase

openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "7.22.0"
+  }
+}

package.json

@@ -5,7 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development"
+    "watch": "ng build --watch --configuration development",
+    "openapi": "rm -rf src/app/services/api && openapi-generator-cli generate -i http://localhost:5250/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml"
   },
   "private": true,
   "dependencies": {
@@ -16,7 +17,14 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@capacitor/android": "^8.3.0",
+    "@capacitor/angular": "^2.0.3",
+    "@capacitor/core": "latest",
+    "@capacitor/ios": "^8.3.0",
+    "@capacitor/push-notifications": "^8.0.4",
     "@ionic/angular": "^8.8.3",
+    "@microsoft/signalr": "^10.0.0",
+    "@openapitools/openapi-generator-cli": "^2.32.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -25,6 +33,8 @@
     "@angular-devkit/build-angular": "^19.2.23",
     "@angular/cli": "^19.2.23",
     "@angular/compiler-cli": "^19.2.0",
+    "@capacitor/cli": "latest",
+    "@ionic/angular-toolkit": "latest",
     "typescript": "~5.7.2"
   }
 }

proxy.conf.json

@@ -0,0 +1,7 @@
+{
+  "/API": {
+    "target": "http://localhost:5250",
+    "secure": false,
+    "changeOrigin": true
+  }
+}

public/logo-menu.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="200.000000pt" height="192.000000pt" viewBox="0 0 200.000000 192.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,192.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+</g>
+</svg>

src/app/app.component.html

@@ -1,5 +1,5 @@
-<main class="main">
-    <login-form></login-form>
-</main>
-
-<router-outlet/>
+@if (1) {
+    <router-outlet></router-outlet>
+} @else {
+    redirectLogin();
+}

src/app/app.component.ts

@@ -1,14 +1,20 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import {LoginFormComponent} from "./login-form/login-form.component";
+import {Component, inject} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
 
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, LoginFormComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
+
+  private router = inject(Router)
+
+  redirectLogin() {
+    this.router.navigate(['/login']);
+  }
+
   title = 'Knots-Front';
 }

src/app/app.config.ts

@@ -2,7 +2,11 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+import {provideHttpClient, withInterceptors} from "@angular/common/http";
+import {authInterceptor} from "./core/auth/auth.interceptor";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideIonicAngular({}),provideHttpClient(withInterceptors([authInterceptor])), provideHttpClient()],
 };
+

src/app/app.routes.ts

@@ -1,15 +1,37 @@
 import { Routes } from '@angular/router';
+import {authGuard} from "./core/auth/auth.guard";
 
 export const routes: Routes = [
-
     {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'discussions'
+        redirectTo: '/main/menu',
+    },
+    {
+        path: 'main',
+        canActivate: [authGuard],
+        loadComponent: () => import('./pages/main/main.component').then(x => x.Main),
+        children: [
+            {
+                path: 'messages/:discussionId',
+                loadComponent: () => import('./pages/messages/messages-main/messages-main.component').then(x => x.MessagesMain)
+            },
+            {
+                path: 'menu',
+                loadComponent: () => import('./pages/menu/menu/menu.component').then(x => x.Menu)
+            },
+            {
+                path: 'parameters',
+                loadComponent: () => import('./pages/parameters/parameters-main/parameters-main.component').then(x => x.ParametersMain)
+            }
+        ]
     },
-
     {
         path: 'login',
-        loadComponent: () => import('./login-form/login-form.component').then(m => m.LoginFormComponent)
+        loadComponent: () => import('./pages/login-form/login-form.component').then(x => x.LoginFormComponent)
     },
-];
+    {
+        path: 'register',
+        loadComponent: () => import('./pages/register-form/register-form.component').then(x => x.RegisterFormComponent)
+    },
+];

src/app/core/auth/auth.guard.ts

@@ -0,0 +1,13 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import {AuthService} from "./auth.service";
+
+export const authGuard: CanActivateFn = () => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+
+    if (authService.isLoggedIn()) return true;
+
+    router.navigate(['/login']);
+    return false;
+};

src/app/core/auth/auth.interceptor.ts

@@ -0,0 +1,15 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import {AuthService} from "./auth.service";
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+    const token = inject(AuthService).getToken();
+
+    if (token) {
+        req = req.clone({
+            setHeaders: { Authorization: `Bearer ${token}` }
+        });
+    }
+
+    return next(req);
+};

src/app/core/auth/auth.service.ts

@@ -0,0 +1,110 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+import { LoggedUser } from "../../models/user.model";
+
+interface LoginResponse {
+    token: string;
+    id: number;
+    username: string;
+    email: string | null;
+    tel: string | null;
+    profilePicture: string | null;
+    description: string | null;
+}
+
+interface RegisterRequest {
+    username: string;
+    password: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+    private http = inject(HttpClient);
+    private router = inject(Router);
+
+    private readonly TOKEN_KEY = 'knots_token';
+    private readonly USER_KEY = 'knots_user';
+
+    currentUser = signal<LoggedUser | null>(this.loadUser());
+
+    private loadUser(): LoggedUser | null {
+        const raw = localStorage.getItem(this.USER_KEY);
+        return raw ? JSON.parse(raw) : null;
+    }
+
+    isLoggedIn(): boolean {
+        return !!localStorage.getItem(this.TOKEN_KEY);
+    }
+
+    getToken(): string | null {
+        return localStorage.getItem(this.TOKEN_KEY);
+    }
+
+    async login(username: string, password: string): Promise<void> {
+        const response = await firstValueFrom(
+            this.http.post<LoginResponse>('/API/users/login', { username, password })
+        );
+
+        localStorage.setItem(this.TOKEN_KEY, response.token);
+
+        const user: LoggedUser = {
+            id: String(response.id),
+            username: response.username,
+            email: response.email,
+            tel: response.tel,
+            profilePicture: response.profilePicture,
+            description: response.description,
+        };
+
+        localStorage.setItem(this.USER_KEY, JSON.stringify(user));
+        this.currentUser.set(user);
+
+        await this.router.navigate(['/main/menu']);
+    }
+
+    async register(
+        username: string,
+        password: string,
+        email: string,
+        tel: string,
+        description: string | null = null
+    ): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>('/API/users', {
+                username,
+                password,
+                email,
+                tel,
+                description,
+                profilePicture: null
+            })
+        );
+
+        await this.router.navigate(['/login']);
+    }
+
+    logout(): void {
+        localStorage.removeItem(this.TOKEN_KEY);
+        localStorage.removeItem(this.USER_KEY);
+        this.currentUser.set(null);
+        this.router.navigate(['/login']);
+    }
+
+    updateCurrentUser(partial: Partial<LoggedUser>): void {
+        const user = this.currentUser();
+        if (!user) return;
+        const updated = { ...user, ...partial };
+        localStorage.setItem(this.USER_KEY, JSON.stringify(updated));
+        this.currentUser.set(updated);
+    }
+
+    getCurrentUserId(): number {
+        const user = this.currentUser();
+        if (!user) {
+            throw new Error('Aucun utilisateur connecté');
+        }
+        return Number(user.id);
+    }
+}

src/app/core/chat/chat.service.ts

@@ -0,0 +1,40 @@
+import {inject, Injectable} from '@angular/core';
+import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
+import * as signalR from '@microsoft/signalr';
+import { AuthService } from "../auth/auth.service";
+
+@Injectable({ providedIn: 'root' })
+export class ChatService {
+
+    private authService = inject(AuthService);
+    private hub: signalR.HubConnection;
+
+    constructor() {
+        this.hub = new HubConnectionBuilder()
+            .withUrl('http://localhost:5250/hubs/chat', {
+                accessTokenFactory: () => this.authService.getToken() ?? ''
+            })
+            .withAutomaticReconnect()
+            .build();
+    }
+
+    async connect() {
+        if (this.hub.state === HubConnectionState.Disconnected) {
+            await this.hub.start();
+        }
+    }
+
+    async sendMessage(discussionId: string, content: string) {
+        await this.connect(); // s'assure que la connexion est active
+        await this.hub.invoke('SendMessage', discussionId, content);
+    }
+
+    onMessage(callback: (message: any) => void) {
+        this.hub.on('ReceiveMessage', callback);
+    }
+
+    async joinConversation(discussionId: string) {
+        await this.connect();
+        await this.hub.invoke('JoinConversation', discussionId);
+    }
+}

src/app/core/chat/discussion.service.ts

@@ -0,0 +1,65 @@
+import { Observable } from "rxjs";
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+
+export interface Message {
+    id: number;
+    contenu: string;
+    date: string;
+    userId: number;
+    authorName: string;
+}
+
+export interface MemberWithRole {
+    userId: number;
+    username: string;
+    roleId: number | null;
+    roleLibelle: string | null;
+}
+
+export interface Discussion {
+    id: number;
+    name: string;
+    isGroup: boolean;
+    membersCount?: number;
+    groupId?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class discussionsService {
+
+    private http = inject(HttpClient);
+    private apiUrl = 'http://localhost:5250/API';
+
+    getDiscussions(): Observable<Discussion[]> {
+        return this.http.get<Discussion[]>(`${this.apiUrl}/discussions/my`);
+    }
+
+    getMessages(discussionId: string): Observable<Message[]> {
+        return this.http.get<Message[]>(`${this.apiUrl}/discussions/${discussionId}/messages`);
+    }
+
+    createPrivateDiscussion(username: string): Observable<Discussion> {
+        return this.http.post<Discussion>(`${this.apiUrl}/discussions/private`, { username });
+    }
+
+    createGroupDiscussion(groupName: string, usernames: string[]): Observable<Discussion> {
+        return this.http.post<Discussion>(`${this.apiUrl}/discussions/group`, { groupName, usernames });
+    }
+
+    getDiscussionMembers(discussionId: string): Observable<string[]> {
+        return this.http.get<string[]>(`${this.apiUrl}/discussions/${discussionId}/members`);
+    }
+
+    getMembersWithRoles(discussionId: string): Observable<MemberWithRole[]> {
+        return this.http.get<MemberWithRole[]>(`${this.apiUrl}/discussions/${discussionId}/members/roles`);
+    }
+
+    createRole(libelle: string): Observable<{ id: number, libelle: string }> {
+        return this.http.post<{ id: number, libelle: string }>(`${this.apiUrl}/roles`, { libelle });
+    }
+
+    assignRole(groupId: number, userId: number, roleId: number): Observable<void> {
+        return this.http.post<void>(`${this.apiUrl}/groups/${groupId}/members/${userId}/role`, { roleId });
+    }
+}

src/app/login-form/login-form.component.html

@@ -1,17 +0,0 @@
-<ion-card>
-    <ion-card-header>
-        <ion-card-title>Login</ion-card-title><br><br>
-        <ion-card-subtitle>Connectez-vous à Knots !</ion-card-subtitle><br><br>
-    </ion-card-header>
-
-    <ion-card-content>
-        Login
-        <br>
-        <input type="text">
-        <br>
-        Mot de Passe
-    </ion-card-content><br>
-
-    <ion-button fill="clear">Action 1</ion-button>
-    <ion-button fill="clear">Action 2</ion-button>
-</ion-card>

src/app/login-form/login-form.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  IonButton,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardSubtitle,
-  IonCardTitle,
-} from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'login-form',
-  templateUrl: 'login-form.component.html',
-  styleUrls: ['login-form.component.css'],
-  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle],
-})
-export class LoginFormComponent {}

src/app/models/user.model.ts

@@ -0,0 +1,8 @@
+export interface LoggedUser {
+    id: string;
+    username: string;
+    email: string | null;
+    tel: string | null;
+    profilePicture: string | null;
+    description: string | null;
+}

src/app/pages/login-form/login-form.component.css

@@ -0,0 +1,152 @@
+/* Import Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
+
+/* ---- Page background ---- */
+ion-content.bg {
+    --background: transparent;
+    --overflow: hidden;
+
+    &::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        background: linear-gradient(
+                160deg,
+                #f9e8e8 0%,
+                #f2c4c4 35%,
+                #e89898 70%,
+                #d97070 100%
+        );
+        z-index: -1;
+    }
+}
+
+/* ---- Centered container ---- */
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+    padding: 40px 24px;
+    font-family: 'Nunito', sans-serif;
+    gap: 10px;
+}
+
+/* ---- Logo box ---- */
+.logo-box {
+    width: 80px;
+    height: 80px;
+    background: #ffffff;
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 18px rgba(180, 80, 80, 0.18);
+    overflow: hidden;
+    margin-bottom: 4px;
+
+    img {
+        width: 52px;
+        height: 52px;
+        object-fit: contain;
+    }
+}
+
+/* ---- App title ---- */
+h1 {
+    font-family: 'Nunito', sans-serif;
+    font-size: 28px;
+    font-weight: 800;
+    color: #b05050;
+    margin: 0 0 10px;
+    letter-spacing: 0.5px;
+}
+
+/* ---- White card ---- */
+.card {
+    width: 100%;
+    max-width: 340px;
+    background: rgba(255, 255, 255, 0.88);
+    border-radius: 24px;
+    padding: 28px 24px 32px;
+    box-shadow: 0 8px 32px rgba(180, 80, 80, 0.12);
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+
+    h3 {
+        font-family: 'Nunito', sans-serif;
+        font-size: 16px;
+        font-weight: 700;
+        color: #b05050;
+        text-align: center;
+        margin: 0 0 4px;
+    }
+}
+
+/* ---- Inputs ---- */
+.input {
+    --background: rgba(255, 255, 255, 0.95);
+    --border-radius: 50px;
+    --padding-start: 18px;
+    --padding-end: 18px;
+    --inner-padding-end: 0;
+    --highlight-color-focused: #d97070;
+    border-radius: 50px;
+    box-shadow: 0 2px 8px rgba(180, 80, 80, 0.10);
+    overflow: hidden;
+
+    ion-input {
+        --placeholder-color: #c9a0a0;
+        --placeholder-opacity: 1;
+        --color: #6b3030;
+        font-family: 'Nunito', sans-serif;
+        font-size: 15px;
+        font-weight: 600;
+        caret-color: #d97070;
+    }
+}
+
+/* ---- Login button ---- */
+.btn {
+    --background: #b05050;
+    --background-activated: #903838;
+    --border-radius: 50px;
+    --box-shadow: 0 4px 16px rgba(176, 80, 80, 0.35);
+    --color: #ffffff;
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+    margin-top: 6px;
+    height: 48px;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+    &:active {
+        transform: scale(0.97);
+        --box-shadow: 0 2px 8px rgba(176, 80, 80, 0.25);
+    }
+}
+
+/* ---- Sign-up link ---- */
+.signup {
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    color: #b05050;
+    line-height: 1.7;
+    margin-top: 6px;
+
+    a {
+        color: #b05050;
+        font-weight: 800;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+
+        &:hover {
+            color: #903838;
+        }
+    }
+}

src/app/pages/login-form/login-form.component.html

@@ -0,0 +1,36 @@
+<ion-content [fullscreen]="true" class="bg">
+
+    <div class="container">
+
+        <div class="logo-box">
+            <img src="assets/icon/logo.png" alt="logo">
+        </div>
+
+        <h1>Knots</h1>
+
+        <div class="card" [formGroup]="loginForm">
+
+            <h3>Connectez-vous à Knots !</h3>
+
+            <ion-item lines="none" class="input">
+                <ion-input formControlName="name" placeholder="Login..."></ion-input>
+            </ion-item>
+
+            <ion-item lines="none" class="input">
+                <ion-input formControlName="password" type="password" placeholder="Password..."></ion-input>
+            </ion-item>
+
+            <ion-button expand="block" class="btn" (click)="submitForm()">
+                Se connecter
+            </ion-button>
+
+        </div>
+
+        <div class="signup">
+            Vous êtes nouveau ?<br>
+            <a (click)="goToRegister()">Créez vous un compte ici</a>
+        </div>
+
+    </div>
+
+</ion-content>

src/app/pages/login-form/login-form.component.ts

@@ -0,0 +1,65 @@
+import { Component, inject } from '@angular/core';
+import {
+  IonButton, IonContent, IonInput, IonItem, NavController,
+} from '@ionic/angular/standalone';
+import { CommonModule } from "@angular/common";
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
+import { Router } from "@angular/router";
+import { AuthService } from "../../core/auth/auth.service";
+
+@Component({
+  selector: 'login-form',
+  templateUrl: 'login-form.component.html',
+  styleUrls: ['login-form.component.css'],
+  imports: [IonButton, CommonModule, ReactiveFormsModule, IonItem, IonInput, IonContent],
+})
+export class LoginFormComponent {
+
+  private fb = inject(FormBuilder);
+  private authService = inject(AuthService);
+  private router = inject(Router);
+
+  isLoading = false;
+
+  goToRegister() {
+    this.router.navigate(['/register']);
+  }
+
+  loginForm = this.fb.group({
+    name: ['', [Validators.required]],
+    password: ['', [Validators.required]]
+  });
+
+  async submitForm(): Promise<void> {
+    console.log('submitForm appelé');
+    console.log('form valid:', this.loginForm.valid);
+    console.log('form values:', this.loginForm.value);
+    if (this.loginForm.valid) {
+      this.isLoading = true;
+
+      try {
+        await this.authService.login(
+            this.loginForm.value.name!,
+            this.loginForm.value.password!
+        );
+      } catch (err: any) {
+        console.error('Erreur complète:', err);
+        if (err.status === 401) {
+          console.error('Identifiant ou mot de passe incorrect.');
+        } else {
+          console.error('Impossible de contacter le serveur.');
+        }
+      } finally {
+        this.isLoading = false;
+      }
+
+    } else {
+      Object.values(this.loginForm.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });
+    }
+  }
+}

src/app/pages/main/main.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/pages/main/main.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import {RouterOutlet} from "@angular/router";
+
+@Component({
+  selector: 'app-main',
+  imports: [RouterOutlet],
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss'],
+})
+export class Main implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/pages/menu/menu-nav/menu-nav.component.css

@@ -0,0 +1,265 @@
+.hamburger-btn {
+    align-self: flex-start;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
+    border: none;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
+
+    &:active {
+        transform: scale(0.94);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
+    }
+}
+
+.modal-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: linear-gradient(160deg, #f9e8e8 0%, #f2c4c4 35%, #e89898 70%, #d97070 100%);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 12px;
+    border-bottom: 1px solid rgba(189, 90, 90, 0.15);
+}
+
+.modal-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #7a2e2e;
+    margin: 0;
+}
+
+.modal-close-btn {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    background: white;
+    border: none;
+    box-shadow: 0 2px 8px rgba(180, 80, 80, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #bd5a5a;
+    cursor: pointer;
+    font-size: 1.2rem;
+    transition: transform 0.15s;
+
+    &:active { transform: scale(0.92); }
+}
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 24px 20px;
+}
+
+.input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.custom-item {
+    --background: white;
+    --border-radius: 12px;
+    --padding-start: 14px;
+    --inner-padding-end: 14px;
+    --color: #7a2e2e;
+    --highlight-color-focused: #bd5a5a;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.1);
+}
+
+.error-msg {
+    color: #7a2e2e;
+    font-size: 0.8rem;
+    padding-left: 4px;
+    margin: 0;
+}
+
+.submit-btn {
+    background: white;
+    color: #bd5a5a;
+    border: none;
+    border-radius: 14px;
+    padding: 14px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.15);
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.2s;
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
+    }
+}
+
+.mode-switch {
+    margin-top: auto;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 14px 16px;
+
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16px;
+
+    backdrop-filter: blur(8px);
+    box-shadow: 0 2px 12px rgba(122, 46, 46, 0.08);
+}
+
+.switch-label {
+    color: #7a2e2e;
+    font-weight: 600;
+    font-size: 0.95rem;
+}
+
+/* SWITCH */
+
+.switch {
+    position: relative;
+    width: 58px;
+    height: 32px;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    inset: 0;
+
+    cursor: pointer;
+
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 999px;
+
+    transition: all 0.25s ease;
+
+    box-shadow:
+            inset 0 1px 3px rgba(0,0,0,0.08),
+            0 2px 8px rgba(0,0,0,0.05);
+}
+
+.slider::before {
+    content: "";
+
+    position: absolute;
+    top: 4px;
+    left: 4px;
+
+    width: 24px;
+    height: 24px;
+
+    border-radius: 50%;
+    background: white;
+
+    transition: all 0.25s ease;
+
+    box-shadow:
+            0 2px 8px rgba(0,0,0,0.15);
+}
+
+.switch input:checked + .slider {
+    background: #bd5a5a;
+}
+
+.switch input:checked + .slider::before {
+    transform: translateX(26px);
+}
+
+.mode-switch:hover .slider {
+    transform: scale(1.03);
+}
+
+.add-member-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    width: 100%;
+
+    padding: 12px 16px;
+
+    border: 2px dashed rgba(189, 90, 90, 0.35);
+    border-radius: 14px;
+
+    background: rgba(255, 255, 255, 0.55);
+
+    color: #bd5a5a;
+    font-size: 0.95rem;
+    font-weight: 600;
+
+    cursor: pointer;
+
+    transition: all 0.2s ease;
+
+    ion-icon {
+        font-size: 1.2rem;
+    }
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.8);
+        border-color: #bd5a5a;
+        transform: translateY(-1px);
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+}
+
+.remove-btn {
+    width: 26px;
+    height: 26px;
+
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: none;
+    border-radius: 50%;
+
+    background: white;
+    color: #bd5a5a;
+
+    cursor: pointer;
+
+    box-shadow: 0 2px 8px rgba(180, 80, 80, 0.12);
+
+    transition: all 0.2s ease;
+
+    ion-icon {
+        font-size: 1.1rem;
+    }
+
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(180, 80, 80, 0.18);
+    }
+
+    &:active {
+        transform: scale(0.92);
+    }
+}

src/app/pages/menu/menu-nav/menu-nav.component.html

@@ -0,0 +1,101 @@
+<button class="hamburger-btn" (click)="openNav()">
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
+        <g fill-opacity="0.8" fill="#bd5a5a" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-size="none" style="mix-blend-mode: normal">
+            <g transform="scale(3.55556,3.55556)">
+                <path d="M56,48c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0zM56,32c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0zM56,16c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0z"></path></g></g>
+    </svg>
+</button>
+
+<ion-modal [isOpen]="isModalOpen()" (didDismiss)="closeNav()">
+    <ng-template>
+        <div class="modal-layout">
+
+            <div class="modal-header">
+                <h2 class="modal-title">{{ isGroup() ? 'Nouveau groupe' : 'Nouvelle conversation' }}</h2>
+                <div class="header-actions">
+                    <button class="modal-close-btn" (click)="closeNav()">
+                        <ion-icon name="close-outline" />
+                    </button>
+                </div>
+            </div>
+
+            <div class="modal-body">
+
+                <!-- Mode privé -->
+                <ng-container *ngIf="!isGroup()">
+                    <div class="input-wrapper">
+                        <ion-item class="custom-item">
+                            <ion-input
+                                    [formControl]="username"
+                                    label="Nom d'utilisateur"
+                                    labelPlacement="floating"
+                                    placeholder="ex: jean_dupont"
+                            />
+                        </ion-item>
+                        <p class="error-msg" *ngIf="errorMsg()">{{ errorMsg() }}</p>
+                    </div>
+                    <button class="submit-btn" (click)="startConversation()" [disabled]="isLoading()">
+                        {{ isLoading() ? 'Création...' : 'Démarrer la conversation' }}
+                    </button>
+                </ng-container>
+
+                <!-- Mode groupe -->
+                <ng-container *ngIf="isGroup()">
+                    <div class="input-wrapper">
+                        <ion-item class="custom-item">
+                            <ion-input
+                                    [formControl]="groupName"
+                                    label="Nom du groupe"
+                                    labelPlacement="floating"
+                                    placeholder="ex: Les amis"
+                            />
+                        </ion-item>
+                    </div>
+
+                    <div class="members-list">
+                        <div class="member-row" *ngFor="let ctrl of groupMembers; let i = index">
+                            <ion-item class="custom-item member-item">
+                                <ion-input
+                                        [formControl]="ctrl"
+                                        label="Membre {{ i + 1 }}"
+                                        labelPlacement="floating"
+                                        placeholder="ex: jean_dupont"
+                                />
+                            </ion-item>
+                            <button class="remove-btn" (click)="removeMember(i)" *ngIf="groupMembers.length > 1">
+                                <ion-icon name="close-outline" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <button class="add-member-btn" (click)="addMember()" *ngIf="groupMembers.length < 10">
+                        <ion-icon name="add-outline" />
+                        Ajouter un membre
+                    </button>
+
+                    <p class="error-msg" *ngIf="errorMsg()">{{ errorMsg() }}</p>
+
+                    <button class="submit-btn" (click)="startGroupConversation()" [disabled]="isLoading()">
+                        {{ isLoading() ? 'Création...' : 'Créer le groupe' }}
+                    </button>
+                </ng-container>
+
+                <div class="mode-switch">
+                    <span class="switch-label">
+                        {{ isGroup() ? 'Mode groupe' : 'Conversation privée' }}
+                    </span>
+
+                    <label class="switch">
+                        <input
+                                type="checkbox"
+                                [checked]="isGroup()"
+                                (change)="toggleMode()"
+                        >
+                        <span class="slider"></span>
+                    </label>
+                </div>
+
+            </div>
+        </div>
+    </ng-template>
+</ion-modal>

src/app/pages/menu/menu-nav/menu-nav.component.ts

@@ -0,0 +1,110 @@
+import { Component, inject, signal } from '@angular/core';
+import { Router } from "@angular/router";
+import { ReactiveFormsModule, FormControl } from "@angular/forms";
+import { addIcons } from "ionicons";
+import { IonIcon, IonInput, IonItem, IonModal } from "@ionic/angular/standalone";
+import { closeOutline, addOutline } from "ionicons/icons";
+import { discussionsService } from "../../../core/chat/discussion.service";
+import {CommonModule} from "@angular/common";
+
+@Component({
+  selector: 'app-menu-nav',
+  imports: [IonModal, IonItem, IonInput, IonIcon, ReactiveFormsModule, CommonModule],
+  templateUrl: './menu-nav.component.html',
+  styleUrl: './menu-nav.component.css'
+})
+export class MenuNav {
+
+  private router = inject(Router);
+  private discussionService = inject(discussionsService);
+
+  isModalOpen = signal(false);
+  isLoading = signal(false);
+  errorMsg = signal<string | null>(null);
+  isGroup = signal(false);
+
+  // Mode privé
+  username = new FormControl('');
+
+  // Mode groupe
+  groupName = new FormControl('');
+  groupMembers: FormControl[] = [new FormControl('')];
+
+  constructor() {
+    addIcons({ closeOutline, addOutline });
+  }
+
+  openNav() { this.isModalOpen.set(true); }
+
+  closeNav() {
+    this.isModalOpen.set(false);
+    this.username.reset();
+    this.groupName.reset();
+    this.groupMembers = [new FormControl('')];
+    this.errorMsg.set(null);
+    this.isGroup.set(false);
+  }
+
+  toggleMode() {
+    this.isGroup.update(v => !v);
+    this.errorMsg.set(null);
+  }
+
+  addMember() {
+    if (this.groupMembers.length < 10) {
+      this.groupMembers.push(new FormControl(''));
+    }
+  }
+
+  removeMember(index: number) {
+    this.groupMembers.splice(index, 1);
+  }
+
+  startConversation() {
+    const name = this.username.value?.trim();
+    if (!name || this.isLoading()) return;
+
+    this.isLoading.set(true);
+    this.errorMsg.set(null);
+
+    this.discussionService.createPrivateDiscussion(name).subscribe({
+      next: (discussion) => {
+        this.isLoading.set(false);
+        this.closeNav();
+        this.router.navigate(['/main/messages', discussion.id]);
+      },
+      error: (err) => {
+        this.isLoading.set(false);
+        this.errorMsg.set(
+            err.status === 404 ? 'Utilisateur introuvable.' : 'Une erreur est survenue.'
+        );
+      }
+    });
+  }
+
+  startGroupConversation() {
+    const name = this.groupName.value?.trim();
+    const usernames = this.groupMembers
+        .map(c => c.value?.trim())
+        .filter(v => !!v);
+
+    if (!name || usernames.length === 0 || this.isLoading()) return;
+
+    this.isLoading.set(true);
+    this.errorMsg.set(null);
+
+    this.discussionService.createGroupDiscussion(name, usernames).subscribe({
+      next: (discussion) => {
+        this.isLoading.set(false);
+        this.closeNav();
+        this.router.navigate(['/main/messages', discussion.id]);
+      },
+      error: (err) => {
+        this.isLoading.set(false);
+        this.errorMsg.set(
+            err.status === 404 ? 'Un ou plusieurs utilisateurs introuvables.' : 'Une erreur est survenue.'
+        );
+      }
+    });
+  }
+}

src/app/pages/menu/menu-param/menu-param.component.css

@@ -0,0 +1,21 @@
+.hamburger-btn {
+    align-self: flex-start;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
+    border: none;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
+
+    &:active {
+        transform: scale(0.94);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
+    }
+}

src/app/pages/menu/menu-param/menu-param.component.html

@@ -0,0 +1,9 @@
+<button class="hamburger-btn" (click)="openParam()">
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0,0,256,256">
+        <g fill-opacity="0.81176" fill="#bd5a5a" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+            <g transform="scale(5.12,5.12)">
+                <path d="M47.16,21.221l-5.91,-0.966c-0.346,-1.186 -0.819,-2.326 -1.411,-3.405l3.45,-4.917c0.279,-0.397 0.231,-0.938 -0.112,-1.282l-3.889,-3.887c-0.347,-0.346 -0.893,-0.391 -1.291,-0.104l-4.843,3.481c-1.089,-0.602 -2.239,-1.08 -3.432,-1.427l-1.031,-5.886c-0.084,-0.478 -0.499,-0.828 -0.985,-0.828h-5.5c-0.49,0 -0.908,0.355 -0.987,0.839l-0.956,5.854c-1.2,0.345 -2.352,0.818 -3.437,1.412l-4.83,-3.45c-0.399,-0.285 -0.942,-0.239 -1.289,0.106l-3.887,3.887c-0.343,0.343 -0.391,0.883 -0.112,1.28l3.399,4.863c-0.605,1.095 -1.087,2.254 -1.438,3.46l-5.831,0.971c-0.482,0.08 -0.836,0.498 -0.836,0.986v5.5c0,0.485 0.348,0.9 0.825,0.985l5.831,1.034c0.349,1.203 0.831,2.362 1.438,3.46l-3.441,4.813c-0.284,0.397 -0.239,0.942 0.106,1.289l3.888,3.891c0.343,0.343 0.884,0.391 1.281,0.112l4.87,-3.411c1.093,0.601 2.248,1.078 3.445,1.424l0.976,5.861c0.079,0.481 0.496,0.834 0.985,0.834h5.5c0.485,0 0.9,-0.348 0.984,-0.825l1.045,-5.89c1.199,-0.353 2.348,-0.833 3.43,-1.435l4.905,3.441c0.398,0.281 0.938,0.232 1.282,-0.111l3.888,-3.891c0.346,-0.347 0.391,-0.894 0.104,-1.292l-3.498,-4.857c0.593,-1.08 1.064,-2.222 1.407,-3.408l5.918,-1.039c0.479,-0.084 0.827,-0.5 0.827,-0.985v-5.5c0.001,-0.49 -0.354,-0.908 -0.838,-0.987zM25,32c-3.866,0 -7,-3.134 -7,-7c0,-3.866 3.134,-7 7,-7c3.866,0 7,3.134 7,7c0,3.866 -3.134,7 -7,7z"></path>
+            </g>
+        </g>
+    </svg>
+</button>

src/app/pages/menu/menu-param/menu-param.component.ts

@@ -0,0 +1,17 @@
+import {Component, inject} from '@angular/core';
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-menu-param',
+  imports: [],
+  templateUrl: './menu-param.component.html',
+  styleUrl: './menu-param.component.css'
+})
+export class MenuParamComponent {
+
+  private router = inject(Router)
+
+  openParam() {
+    this.router.navigate(['/main/parameters']);
+  }
+}

src/app/pages/menu/menu-users/menu-users.component.css

@@ -0,0 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
+
+.discussions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.discussion-btn {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.88);
+    border: none;
+    border-radius: 50px;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.10);
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s;
+
+    img {
+        opacity: 0.7;
+        flex-shrink: 0;
+    }
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.08);
+    }
+}
+
+.discussion-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.username {
+    font-family: 'Nunito', sans-serif;
+    font-size: 15px;
+    font-weight: 700;
+    color: #b05050;
+}
+
+.members {
+    font-family: 'Nunito', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    color: #c98080;
+}

src/app/pages/menu/menu-users/menu-users.component.html

@@ -0,0 +1,20 @@
+<div class="discussions-list">
+    <button
+            class="discussion-btn"
+            *ngFor="let disc of discussions"
+            (click)="openDiscussion(disc.id)">
+
+        <img
+                width="36" height="36"
+                [src]="disc.isGroup
+        ? 'https://img.icons8.com/ios/50/conference-call--v1.png'
+        : 'https://img.icons8.com/ios/50/user-male-circle--v1.png'"
+                alt="avatar"/>
+
+        <div class="discussion-info">
+            <span class="username">{{ disc.name }}</span>
+            <span class="members" *ngIf="disc.isGroup"> {{ disc.membersCount }} membres </span>
+        </div>
+
+    </button>
+</div>

src/app/pages/menu/menu-users/menu-users.component.ts

@@ -0,0 +1,36 @@
+import {Component, inject, OnInit} from '@angular/core';
+import { Router } from "@angular/router";
+import { CommonModule } from "@angular/common";
+import {discussionsService} from "../../../core/chat/discussion.service";
+
+export interface Discussion {
+  id: number;
+  name: string;
+  isGroup: boolean;
+  membersCount?: number;
+}
+
+@Component({
+  selector: 'app-menu-users',
+  imports: [CommonModule],
+  templateUrl: './menu-users.component.html',
+  styleUrl: './menu-users.component.css'
+})
+export class MenuUsersComponent implements OnInit {
+
+  private router = inject(Router);
+  private discussionService = inject(discussionsService);
+
+  discussions: Discussion[] = [];
+
+  ngOnInit() {
+    this.discussionService.getDiscussions().subscribe({
+      next: (discussions) => this.discussions = discussions,
+      error: (err) => console.error('Impossible de charger les discussions', err)
+    });
+  }
+
+  openDiscussion(discussionId: number) {
+    this.router.navigate(['/main/messages', discussionId]);
+  }
+}

src/app/pages/menu/menu/menu.component.css

@@ -0,0 +1,37 @@
+.page-menu {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(
+            160deg,
+            #f9e8e8 0%,
+            #f2c4c4 35%,
+            #e89898 70%,
+            #d97070 100%
+    );
+    padding: 26px;
+    gap: 30px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+}
+
+@media (min-width: 480px) {
+    .header {
+        padding: 0 24px;
+    }
+}
+
+@media (min-width: 768px) {
+    .header {
+        padding: 0 40px;
+    }
+}
+
+.param {
+    align-items: flex-end;
+}

src/app/pages/menu/menu/menu.component.html

@@ -0,0 +1,12 @@
+<div class="page-menu">
+    <div class="header">
+        <app-menu-nav/>
+        <app-menu-param/>
+    </div>
+
+    <div class="users">
+        <app-menu-users/>
+
+    </div>
+
+</div>

src/app/pages/menu/menu/menu.component.ts

@@ -0,0 +1,44 @@
+import {Component, inject, signal} from '@angular/core';
+import {MenuNav} from "../menu-nav/menu-nav.component";
+import {MenuParamComponent} from "../menu-param/menu-param.component";
+import {MenuUsersComponent} from "../menu-users/menu-users.component";
+import {KnotsDTOUserGetUserDto, UsersService} from "../../../services/api";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+  selector: 'app-menu',
+    imports: [
+        MenuNav,
+        MenuParamComponent,
+        MenuUsersComponent
+    ],
+  templateUrl: './menu.component.html',
+  styleUrl: './menu.component.css'
+})
+export class Menu {
+    private usersService = inject(UsersService);
+
+    router = inject(Router);
+
+    users = signal<KnotsDTOUserGetUserDto[]>([]);
+    usersLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+
+    }
+
+    async fetchUsers() {
+        this.usersLoading.set(true);
+        try {
+            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint());
+            this.users.set(users);
+
+        } catch (e) {
+            console.log('Erreur', 'Erreur de communication avec l\'API');
+        }
+
+        this.usersLoading.set(false);
+    }
+
+}

src/app/pages/messages/messages-infouser/messages-infouser.component.css

@@ -0,0 +1,255 @@
+.profile-btn {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 7px 130px 7px 5px;
+    border: none;
+    cursor: pointer;
+    border-radius: 50px;
+    background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+    box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.profile-btn:hover {
+    transform: scale(1.02);
+    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+}
+
+.profile-btn:active {
+    transform: scale(0.98);
+}
+
+.profile-btn .icon-wrapper {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #c07070;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.profile-btn .icon-wrapper img {
+    width: 28px;
+    height: 28px;
+    filter: brightness(0) invert(1); /* rend l'icône blanche */
+}
+
+.profile-btn .username {
+    font-size: 18px;
+    font-weight: 500;
+    color: #c07070;
+}
+
+ion-modal {
+    --background: transparent;
+}
+
+/* MODALE */
+.modal-layout {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    background: radial-gradient(
+            ellipse at top,
+            #fff 0%,
+            #f9ece9 45%,
+            #f3d4cc 100%
+    );
+
+    border-radius: 22px 22px 0 0;
+
+    box-shadow: 0 -12px 45px rgba(200, 120, 100, 0.25);
+
+    overflow: hidden;
+}
+
+/* HEADER */
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 18px;
+
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(10px);
+
+    border-bottom: 1px solid rgba(192, 112, 112, 0.15);
+}
+
+.modal-title {
+    margin: 0;
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: #c07070;
+}
+
+/* CLOSE */
+
+.modal-close-btn {
+    width: 38px;
+    height: 38px;
+
+    border: none;
+    border-radius: 50%;
+
+    background: #fff;
+    color: #c07070;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    box-shadow: 0 3px 12px rgba(200, 120, 100, 0.15);
+
+    cursor: pointer;
+
+    transition: all 0.2s ease;
+
+    ion-icon {
+        font-size: 1.2rem;
+    }
+
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 18px rgba(200, 120, 100, 0.22);
+    }
+
+    &:active {
+        transform: scale(0.92);
+    }
+}
+
+/* BODY */
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    padding: 18px;
+
+    overflow-y: auto;
+}
+
+/* MEMBER CARD */
+
+.member-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 14px;
+
+    background: rgba(255, 255, 255, 0.75);
+    border-radius: 16px;
+
+    box-shadow: 0 2px 12px rgba(200, 120, 100, 0.12);
+
+    transition: all 0.2s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        background: rgba(255, 255, 255, 0.92);
+    }
+}
+
+/* MEMBER INFO */
+
+.member-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.member-info img {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+}
+
+.member-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.member-name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #7a3a3a;
+}
+
+.member-role {
+    font-size: 0.75rem;
+    color: rgba(122, 58, 58, 0.6);
+}
+
+/* ROLE ASSIGN */
+
+.role-assign {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* INPUT */
+
+.role-input {
+    width: 120px;
+
+    padding: 8px 10px;
+
+    border: 1px solid rgba(192, 112, 112, 0.25);
+    border-radius: 10px;
+
+    background: rgba(255, 255, 255, 0.8);
+
+    font-size: 0.85rem;
+    color: #7a3a3a;
+
+    outline: none;
+
+    transition: all 0.2s ease;
+
+    &:focus {
+        border-color: #c07070;
+        box-shadow: 0 0 0 3px rgba(192, 112, 112, 0.15);
+    }
+}
+
+/* BUTTON + */
+
+.role-btn {
+    width: 34px;
+    height: 34px;
+
+    border: none;
+    border-radius: 10px;
+
+    background: #c07070;
+    color: white;
+
+    font-size: 18px;
+    font-weight: 600;
+
+    cursor: pointer;
+
+    box-shadow: 0 2px 10px rgba(192, 112, 112, 0.25);
+
+    transition: all 0.2s ease;
+
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 16px rgba(192, 112, 112, 0.35);
+    }
+
+    &:active {
+        transform: scale(0.92);
+    }
+}

src/app/pages/messages/messages-infouser/messages-infouser.component.html

@@ -0,0 +1,40 @@
+<button class="profile-btn" (click)="openModal()">
+    <div class="icon-wrapper">
+        <img width="50" height="50" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user"/>
+    </div>
+    <span class="username">{{ name || 'Utilisateur' }}</span>
+</button>
+
+<ion-modal [isOpen]="isModalOpen()" (didDismiss)="closeModal()">
+    <ng-template>
+        <div class="modal-layout">
+            <div class="modal-header">
+                <h2 class="modal-title">Membres</h2>
+                <button class="modal-close-btn" (click)="closeModal()">
+                    <ion-icon name="close-outline"/>
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="member-card" *ngFor="let member of members()">
+                    <div class="member-info">
+                        <img width="36" height="36" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user"/>
+                        <div class="member-text">
+                            <span class="member-name">{{ member.username }}</span>
+                            <span class="member-role" *ngIf="member.roleLibelle">{{ member.roleLibelle }}</span>
+                        </div>
+                    </div>
+
+                    <div class="role-assign" *ngIf="groupId">
+                        <input
+                                class="role-input"
+                                [(ngModel)]="newRoleInput[member.userId]"
+                                placeholder="Nouveau rôle..."
+                        />
+                        <button class="role-btn" (click)="assignRole(member.userId)">+</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+</ion-modal>

src/app/pages/messages/messages-infouser/messages-infouser.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonModal, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { closeOutline } from 'ionicons/icons';
+import { discussionsService, MemberWithRole } from '../../../core/chat/discussion.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-messages-infouser',
+  imports: [CommonModule, IonModal, IonIcon, FormsModule],
+  templateUrl: './messages-infouser.component.html',
+  styleUrl: './messages-infouser.component.css'
+})
+export class MessagesInfoUser {
+  @Input() name: string = '';
+  @Input() groupId: number | null = null;
+
+  private discussionService = inject(discussionsService);
+  private route = inject(ActivatedRoute);
+
+  isModalOpen = signal(false);
+  members = signal<MemberWithRole[]>([]);
+  newRoleInput: { [userId: number]: string } = {};
+
+  constructor() {
+    addIcons({ closeOutline });
+  }
+
+  openModal() {
+    const discussionId = this.route.snapshot.paramMap.get('discussionId')!;
+    this.discussionService.getMembersWithRoles(discussionId).subscribe({
+      next: (members) => {
+        this.members.set(members);
+        this.isModalOpen.set(true);
+      }
+    });
+  }
+
+  closeModal() { this.isModalOpen.set(false); }
+
+  assignRole(userId: number) {
+    const libelle = this.newRoleInput[userId]?.trim();
+    if (!libelle || !this.groupId) return;
+
+    this.discussionService.createRole(libelle).subscribe({
+      next: (role) => {
+        this.discussionService.assignRole(this.groupId!, userId, role.id).subscribe({
+          next: () => {
+            this.members.update(members =>
+                members.map(m => m.userId === userId
+                    ? { ...m, roleId: role.id, roleLibelle: libelle }
+                    : m
+                )
+            );
+            this.newRoleInput[userId] = '';
+          }
+        });
+      }
+    });
+  }
+}

src/app/pages/messages/messages-main/messages-main.component.css

@@ -0,0 +1,84 @@
+.page-mess {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(
+            160deg,
+            #f9e8e8 0%,
+            #f2c4c4 35%,
+            #e89898 70%,
+            #d97070 100%
+    );
+    padding: 16px;
+    gap: 12px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+}
+
+@media (min-width: 480px) {
+    .header {
+        padding: 0 24px;
+    }
+}
+
+@media (min-width: 768px) {
+    .header {
+        padding: 0 40px;
+    }
+}
+
+.messages {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 4px 0;
+}
+
+.message {
+    max-width: 75%;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.message p {
+    background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 80%);
+    color: #555;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 12px 16px;
+    border-radius: 18px;
+    box-shadow: 0 2px 12px rgba(200, 120, 100, 0.1);
+}
+
+.message .timestamp {
+    font-size: 11px;
+    color: #c07070;
+    padding: 0 4px;
+}
+
+.message.received {
+    align-self: flex-start;
+}
+
+.message.sent {
+    align-self: flex-end;
+}
+
+.message.sent {
+    align-self: flex-end;
+}
+
+.message.sent p {
+    background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+}
+
+.bottombar {
+    margin-top: auto;
+}

src/app/pages/messages/messages-main/messages-main.component.html

@@ -0,0 +1,23 @@
+<div class="page-mess">
+
+    <div class="header">
+        <app-messages-menu/>
+        <app-messages-infouser [name]="discussionName" [groupId]="groupId"/>
+    </div>
+
+    <div class="messages">
+        <div *ngFor="let message of messages"
+             class="message"
+             [class.sent]="isSent(message)"
+             [class.received]="!isSent(message)">
+            <p>{{ message.contenu }}</p>
+            <span class="timestamp">{{ message.date | date:'HH:mm' }}</span>
+        </div>
+    </div>
+
+    <div class="bottombar">
+        <app-messages-send [discussionId]="currentDiscussionId" />
+    </div>
+
+</div>
+

src/app/pages/messages/messages-main/messages-main.component.ts

@@ -0,0 +1,62 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MessagesMenu } from "../messages-menu/messages-menu.component";
+import { MessagesInfoUser } from "../messages-infouser/messages-infouser.component";
+import { MessagesSend } from "../messages-send/messages-send.component";
+import { ActivatedRoute } from '@angular/router';
+import { discussionsService, Message } from "../../../core/chat/discussion.service";
+import { AuthService } from "../../../core/auth/auth.service";
+import {ChatService} from "../../../core/chat/chat.service";
+
+@Component({
+  selector: 'app-messages-main',
+  imports: [CommonModule, MessagesMenu, MessagesInfoUser, MessagesSend],
+  templateUrl: './messages-main.component.html',
+  styleUrl: './messages-main.component.css'
+})
+export class MessagesMain implements OnInit {
+
+  private route = inject(ActivatedRoute);
+  private discussionService = inject(discussionsService);
+  private authService = inject(AuthService);
+  private chatService = inject(ChatService);
+
+  currentDiscussionId!: string;
+  currentUserId!: number;
+  messages: Message[] = [];
+  discussionName: string = '';
+  groupId: number | null = null;
+
+  async ngOnInit() {
+    this.currentDiscussionId = this.route.snapshot.paramMap.get('discussionId')!;
+    this.currentUserId = this.authService.getCurrentUserId();
+
+    this.discussionService.getDiscussions().subscribe({
+      next: (discussions) => {
+        const discussion = discussions.find(d => d.id === +this.currentDiscussionId);
+        console.log('discussion:', discussion);
+        this.discussionName = discussion?.name ?? '';
+        this.groupId = discussion?.groupId ?? null;
+        console.log('groupId:', this.groupId);
+      }
+    });
+
+    this.discussionService.getMessages(this.currentDiscussionId).subscribe({
+      next: (messages) => this.messages = messages,
+      error: (err) => console.error('Impossible de charger les messages', err)
+    });
+
+    // réception temps réel
+    this.chatService.onMessage((message: Message) => {
+      this.messages = [...this.messages, message];
+    });
+
+    // rejoindre la room pour ne recevoir que cette conversation
+    await this.chatService.connect();
+    await this.chatService.joinConversation(this.currentDiscussionId);
+  }
+
+  isSent(message: Message): boolean {
+    return message.userId === this.currentUserId;
+  }
+}