feat: use Vikunja's logo for splash screen

.drone.yml

@@ -116,16 +116,36 @@ steps:
       YARN_CACHE_FOLDER: .cache/yarn/
       CYPRESS_CACHE_FOLDER: .cache/cypress/
       CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
-      CYPRESS_RECORD_KEY:
-        from_secret: cypress_project_key
     commands:
       - sed -i 's/localhost/api/g' dist/index.html
       - yarn serve:dist & npx wait-on http://localhost:5000
-      - yarn test:frontend --browser chrome --record
+      - yarn test:frontend --browser chrome
     depends_on:
       - dependencies
       - build-prod
 
+  - name: upload-test-results
+    image: plugins/s3
+    pull: true
+    settings:
+      bucket: drone-test-results
+      access_key:
+        from_secret: test_results_aws_access_key_id
+      secret_key:
+        from_secret: test_results_aws_secret_access_key
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      source: cypress/screenshots/**/**/*
+      strip_prefix: cypress/screenshots/
+      target: /${DRONE_REPO}/${DRONE_PULL_REQUEST}_${DRONE_BRANCH}/${DRONE_BUILD_NUMBER}/
+    depends_on:
+      - test-frontend
+    when:
+      status:
+        - failure
+        - success
+
   - name: deploy-preview
     image: node:16
     pull: true
@@ -645,6 +665,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
+hmac: 188ee90100c5fc5922a445e531e7a47453121edddb2a64a182eb23ed2bf602de
 
 ...

android/.gitignore

@@ -0,0 +1,91 @@
+# NPM renames .gitignore to .npmignore
+# In order to prevent that, we remove the initial "."
+# And the CLI then renames it
+
+# Using Android gitignore template: https://github.com/github/gitignore/blob/master/Android.gitignore
+
+# Built application files
+*.apk
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+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
+
+# 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/
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public

android/app/.gitignore

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

android/app/build.gradle

@@ -0,0 +1,46 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "io.vikunja.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+    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 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.warn("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_1_8
+      targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+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/main/AndroidManifest.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="io.vikunja.app">
+
+    <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"
+            android:name="io.vikunja.app.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="@string/custom_url_scheme" />
+            </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" />
+    <!-- Camera, Photos, input file -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <!-- Geolocation API -->
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-feature android:name="android.hardware.location.gps" />
+    <!-- Network API -->
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <!-- Navigator.getUserMedia -->
+    <!-- Video -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <!-- Audio -->
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+</manifest>

android/app/src/main/assets/capacitor.config.json

@@ -0,0 +1,6 @@
+{
+	"appId": "io.vikunja.app",
+	"appName": "Vikunja",
+	"webDir": "dist",
+	"bundledWebRuntime": false
+}

android/app/src/main/assets/capacitor.plugins.json

@@ -0,0 +1 @@
+[]

android/app/src/main/java/io/vikunja/app/MainActivity.java

@@ -0,0 +1,21 @@
+package io.vikunja.app;
+
+import android.os.Bundle;
+
+import com.getcapacitor.BridgeActivity;
+import com.getcapacitor.Plugin;
+
+import java.util.ArrayList;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Initializes the Bridge
+    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+      // Additional plugins you've installed go here
+      // Ex: add(TotallyAwesomePlugin.class);
+    }});
+  }
+}

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

@@ -0,0 +1,101 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+  <group android:scaleX="0.29109365"
+      android:scaleY="0.29109365"
+      android:translateX="16.740015"
+      android:translateY="16.74">
+    <path
+        android:pathData="m167.62,161.652c4.758,-13.899 12.617,-18.154 13.594,-39.601 0.343,-7.537 -1.955,-31.477 -1.955,-31.477 0,-0 3.735,-9.599 -3.443,-20.292 -11.13,-16.58 -34.053,-17.707 -46.092,-17.707 -12.039,-0 -34.694,1.127 -45.825,17.707 -7.179,10.693 -3.444,20.292 -3.444,20.292 0,-0 -1.271,12.313 -2.234,23.172 -0.227,2.548 0.021,12.629 0.327,15.064 0.55,4.364 1.931,8.652 3.441,12.826 1.912,5.285 4.909,10.648 7.198,16.07 6.907,16.371 1.127,36.647 1.48,54.3 0.298,12.531 -2.668,25.242 -3.831,37.496 13.084,4.434 26.945,6.747 41.162,6.747 15.978,-0 31.507,-2.913 45.987,-8.484 -2.719,-15.342 -5.879,-29.894 -6.366,-35.446 -1.419,-16.785 -5.507,-34.587 -0.001,-50.667"
+        android:strokeWidth="0.048874177"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m79.507,63.921c0.153,2.497 0.4,5.057 1.103,7.488 0.221,0.758 0.547,2.624 1.522,2.902 1.212,0.345 3.455,-1.101 4.305,-1.728 1.648,-1.213 3.19,-2.461 4.838,-3.687 1.051,-0.782 2.199,-1.396 3.228,-2.199 1.12,-0.873 1.963,-1.93 2.895,-2.957 1.131,-1.248 1.98,-2.54 2.85,-3.933 0.68,-1.087 4.943,-1.795 5.625,-2.804 0.745,-1.103 0.122,-2.468 0.122,-3.826 0,-9.889 0.594,-19.675 0.825,-29.372 0.238,-6.652 2.851,-14.55 -7.125,-11.432 -21.375,6.652 -21.137,36.168 -20.187,51.549"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m173.67,77.809c-0.215,-0.233 -0.559,-0.432 -0.835,-0.636 -1.197,-0.887 -2.326,-1.814 -3.354,-2.864 -1.255,-1.282 -2.559,-2.528 -3.755,-3.857 -1.052,-1.168 -2.308,-2.214 -3.334,-3.41 -0.684,-0.795 -1.344,-1.641 -1.948,-2.475 -0.308,-0.423 -0.469,-0.933 -0.712,-1.386 -0.361,-0.668 -5.318,-1.349 -4.825,-2.001 0.84,-1.111 2.71,-2.053 3.16,-3.325 2.299,-6.489 3.303,-32.603 3.58,-39.268 0.714,-17.044 15.676,0.832 18.289,7.691 7.601,19.954 3.086,34.504 -6.175,51.549"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m153.319,143.388c-0.011,-9.841 -1.234,-13.822 -6.721,-18.634 -3.432,-3.009 -7.445,-4.157 -13.832,-3.999 -6.387,-0.158 -10.99,1.784 -14.309,5.23 -5.007,5.199 -6.325,8.274 -6.339,18.114 -0.008,5.319 5.727,17.089 7.434,19.805 2.832,4.791 8.075,6.513 13.214,6.154 5.139,0.359 10.382,-1.363 13.213,-6.154 1.708,-2.716 7.348,-14.261 7.34,-20.517"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#f1e6d3"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m88.003,72.959c-1.282,-11.478 -5.144,-31.997 8.198,-44.165 1.472,-1.343 1.867,3.227 2.113,5.075 0.338,2.538 -0.007,9.789 0.045,12.344 0.095,4.812 1.103,7.329 0.634,9.528 -1.284,6.012 -2.314,5.624 -3.541,9.28 -2.434,7.25 -7.098,11.075 -7.449,7.937"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#f1d7d4"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m171.355,70.691c1.366,2.444 4.933,-10.701 6.051,-16.41 1.053,-5.374 2.39,-12.516 0.541,-17.855 -0.992,-2.864 -7.077,-11.276 -7.795,-8.386 -0.28,1.122 -0.424,9.48 -1.113,13.479 -0.852,4.948 -2.388,9.841 -2.397,14.873 -0.02,11.276 3.378,11.741 4.713,14.299"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#f1d7d4"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m127.391,205.803c-0.289,0.878 -2.479,1.521 -3.302,1.786 -1.988,0.642 -3.753,-0.925 -4.863,-2.246 -1.544,-1.831 -1.503,-4.751 -2.15,-6.886 -0.391,-1.291 -2.604,-1.466 -3.269,-0.272 -2.217,3.987 -10.821,-3.515 -8.822,-6.013 1.318,-1.647 -1.838,-3.102 -3.139,-1.477 -3.86,4.821 6.523,13.799 12.477,11.366 0.265,1.205 0.543,2.408 1.055,3.551 1.003,2.247 3.197,3.698 5.468,4.919 3.093,1.658 9.101,-1.254 10.019,-4.034 0.639,-1.934 -2.837,-2.618 -3.474,-0.695"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#faeee0"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m154.806,176.672c0.319,1.339 0.37,5.876 -2.125,3.394 -1.012,-1.007 -3.022,-0.413 -3.104,0.934 -0.193,3.118 -3.32,3.187 -6.018,2.244 -2.141,-0.747 -3.271,2.212 -1.147,2.953 3.962,1.382 8.261,0.616 9.97,-2.378 1.344,0.633 2.865,0.805 4.084,-0.342 2.129,-2.006 2.45,-4.83 1.831,-7.428 -0.47,-1.968 -3.96,-1.346 -3.49,0.623"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#faeee0"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m161.128,241.87c-0.934,1.909 -2.647,1.79 -4.485,0.988 -1.348,-0.587 -3.014,0.383 -2.608,1.748 0.818,2.736 -2.638,3.535 -4.975,2.559 -2.057,-0.859 -3.845,1.839 -1.766,2.708 4.211,1.757 9.564,0.22 10.34,-3.485 2.708,0.429 5.295,-0.331 6.586,-2.975 0.894,-1.824 -2.187,-3.396 -3.093,-1.544"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#faeee0"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m133.758,94.668c-0.434,2.691 -5.479,-0.443 -6.732,-1.292 -1.103,-0.746 -2.53,-0.293 -2.664,0.965 -0.18,1.695 -2.464,1.203 -3.508,0.99 -1.974,-0.401 -3.649,-1.632 -3.696,-3.481 -0.046,-1.796 1.094,-3.683 1.689,-5.369 0.38,-1.077 -1.163,-2.262 -2.291,-1.542 -2.032,1.297 -11.829,2.464 -7.927,-1.806 1.243,-1.36 -0.951,-3.306 -2.207,-1.931 -1.802,1.973 -3.021,6.493 0.878,7.45 2.058,0.505 5.037,0.479 7.575,-0.1 -1.06,3.397 -1.282,6.507 3.087,8.689 2.953,1.476 7.008,1.465 8.726,-0.814 3.615,1.944 9.295,3.831 10.08,-1.035 0.278,-1.721 -2.728,-2.464 -3.009,-0.725"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#faeee0"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m116.859,157.027c5.249,0.444 10.5,1.636 15.797,1.445 3.386,-0.123 6.892,-0.597 10.233,-1.093 2.427,-0.359 5.403,-0.784 7.026,-2.583 0.152,6.002 -12.335,7.881 -17.178,8.003 -5.619,0.142 -11.935,-2.296 -15.878,-5.772"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#494949"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m131.049,144.504c-0.6,3.853 -0.724,7.76 -0.363,11.636 0.096,1.013 -0.174,3.428 1.173,3.936 1.092,0.413 2.442,-0.363 2.62,-1.348 0.301,-1.661 -0.405,-3.755 -0.465,-5.456 -0.071,-1.992 0,-3.987 0.211,-5.969 0.126,-1.175 0.785,-2.761 -0.56,-3.589 -0.987,-0.607 -2.434,-0.383 -2.616,0.79"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#494949"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m141.253,135.138c-3.155,0.136 -6.084,1.902 -8.453,3.603 -2.144,-1.423 -5.391,-2.731 -8.092,-1.97 -1.61,0.452 -0.148,0.946 0.524,1.375 1.241,0.825 2.253,1.886 3.166,2.982 1.385,1.68 2.617,3.444 4.095,5.064 1.023,-0.737 2,-1.48 2.89,-2.341 0.413,-0.399 3.791,-4.923 4.31,-5.689 0.331,-0.487 0.665,-0.991 1.045,-1.45 0.385,-0.464 1.476,-1.202 0.517,-1.575"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#494949"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m101.325,113.765c1.558,-4.04 3.232,-9.118 7.502,-8.31 3.233,0.693 7.56,11.482 4.79,10.417 -1.5,-0.577 -2.694,-5.481 -5.511,-6.117 -1.79,-0.404 -4.271,5.8 -6.666,6.435 -1.161,0.307 -0.577,-1.385 -0.115,-2.424"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#2c3844"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+    <path
+        android:pathData="m147.202,113.765c1.558,-4.04 3.233,-9.118 7.502,-8.31 3.232,0.693 7.559,11.482 4.79,10.417 -1.5,-0.577 -2.694,-5.481 -5.511,-6.117 -1.79,-0.404 -4.271,5.8 -6.665,6.435 -1.161,0.307 -0.577,-1.385 -0.116,-2.424"
+        android:strokeWidth="0.04884417"
+        android:fillColor="#2c3844"
+        android:strokeColor="#00000000"
+        android:fillType="nonZero"/>
+  </group>
+</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="@drawable/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="@drawable/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">#1973FF</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">Vikunja</string>
+    <string name="title_activity_main">Vikunja</string>
+    <string name="package_name">io.vikunja.app</string>
+    <string name="custom_url_scheme">io.vikunja.app</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.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

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

@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <access origin="*" />
+  
+  
+</widget>

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/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()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.6.1'
+        classpath 'com.google.gms:google-services:4.3.3'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        jcenter()
+    }
+}
+
+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,24 @@
+# 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
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,188 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or 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.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# 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"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# 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
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# 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"
+    which java >/dev/null 2>&1 || 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
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,100 @@
+@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
+
+@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=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@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%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="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!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+: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,17 @@
+ext {
+    minSdkVersion = 21
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+    androidxAppCompatVersion = '1.1.0'
+    androidxCoreVersion =  '1.2.0'
+    androidxMaterialVersion =  '1.1.0-rc02'
+    androidxBrowserVersion =  '1.2.0'
+    androidxLocalbroadcastmanagerVersion =  '1.0.0'
+    androidxExifInterfaceVersion = '1.2.0'
+    firebaseMessagingVersion =  '20.1.2'
+    playServicesLocationVersion =  '17.0.0'
+    junitVersion =  '4.12'
+    androidxJunitVersion =  '1.1.1'
+    androidxEspressoCoreVersion =  '3.2.0'
+    cordovaAndroidVersion =  '7.0.0'
+}

capacitor.config.ts

@@ -0,0 +1,10 @@
+import { CapacitorConfig } from '@capacitor/cli'
+
+const config: CapacitorConfig = {
+	appId: 'io.vikunja.app',
+	appName: 'Vikunja',
+	webDir: 'dist',
+	bundledWebRuntime: false,
+}
+
+export default config

cypress.json

@@ -7,6 +7,5 @@
   "video": false,
   "retries": {
     "runMode": 2
-  },
-  "projectId": "181c7x"
+  }
 }

cypress/factories/bucket.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/labels.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'

cypress/factories/link_sharing.js

@@ -1,6 +1,6 @@
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
-import faker from '@faker-js/faker'
+import faker from 'faker'
 
 export class LinkShareFactory extends Factory {
 	static table = 'link_shares'

cypress/factories/list.js

@@ -1,6 +1,6 @@
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
-import faker from '@faker-js/faker'
+import faker from 'faker'
 
 export class ListFactory extends Factory {
 	static table = 'lists'

cypress/factories/namespace.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/task.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/task_comment.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"

cypress/factories/team.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/user.js

@@ -1,4 +1,4 @@
-import faker from '@faker-js/faker'
+import faker from 'faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"

cypress/integration/list/list-history.spec.js

@@ -1,56 +0,0 @@
-import {ListFactory} from '../../factories/list'
-
-import '../../support/authenticateUser'
-import {prepareLists} from './prepareLists'
-
-describe('List History', () => {
-	prepareLists()
-	
-	it('should show a list history on the home page', () => {
-		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
-		cy.intercept(Cypress.env('API_URL') + '/lists/*').as('loadList')
-		
-		const lists = ListFactory.create(6)
-
-		cy.visit('/')
-		cy.wait('@loadNamespaces')
-		cy.get('body')
-			.should('not.contain', 'Last viewed')
-
-		cy.visit(`/lists/${lists[0].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[1].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[2].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[3].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[4].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[5].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-
-		// cy.visit('/')
-		// cy.wait('@loadNamespaces')
-		// Not using cy.visit here to work around the redirect issue fixed in #1337
-		cy.get('nav.menu.top-menu a')
-			.contains('Overview')
-			.click()
-		
-		cy.get('body')
-			.should('contain', 'Last viewed')
-		cy.get('.list-cards-wrapper-2-rows')
-			.should('not.contain', lists[0].title)
-			.should('contain', lists[1].title)
-			.should('contain', lists[2].title)
-			.should('contain', lists[3].title)
-			.should('contain', lists[4].title)
-			.should('contain', lists[5].title)
-	})
-})

cypress/integration/list/list-view-gantt.spec.js

@@ -1,76 +0,0 @@
-import {formatISO, format} from 'date-fns'
-import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('List View Gantt', () => {
-	prepareLists()
-	
-	it('Hides tasks with no dates', () => {
-		const tasks = TaskFactory.create(1)
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-chart .tasks')
-			.should('not.contain', tasks[0].title)
-	})
-
-	it('Shows tasks from the current and next month', () => {
-		const now = new Date()
-		const nextMonth = now
-		nextMonth.setDate(1)
-		nextMonth.setMonth(now.getMonth() + 1)
-
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-chart .months')
-			.should('contain', format(now, 'MMMM'))
-			.should('contain', format(nextMonth, 'MMMM'))
-	})
-
-	it('Shows tasks with dates', () => {
-		const now = new Date()
-		const tasks = TaskFactory.create(1, {
-			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4))
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-chart .tasks')
-			.should('not.be.empty')
-		cy.get('.gantt-chart .tasks')
-			.should('contain', tasks[0].title)
-	})
-
-	it('Shows tasks with no dates after enabling them', () => {
-		TaskFactory.create(1, {
-			start_date: null,
-			end_date: null,
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-options .fancycheckbox')
-			.contains('Show tasks which don\'t have dates set')
-			.click()
-
-		cy.get('.gantt-chart .tasks')
-			.should('not.be.empty')
-		cy.get('.gantt-chart .tasks .task.nodate')
-			.should('exist')
-	})
-
-	it('Drags a task around', () => {
-		const now = new Date()
-		TaskFactory.create(1, {
-			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4))
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-chart .tasks .task')
-			.first()
-			.trigger('mousedown', {which: 1})
-			.trigger('mousemove', {clientX: 500, clientY: 0})
-			.trigger('mouseup', {force: true})
-	})
-})

cypress/integration/list/list-view-kanban.spec.js

@@ -1,196 +0,0 @@
-import {BucketFactory} from '../../factories/bucket'
-import {ListFactory} from '../../factories/list'
-import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('List View Kanban', () => {
-	let buckets
-	prepareLists()
-
-	beforeEach(() => {
-		buckets = BucketFactory.create(2)
-	})
-
-	it('Shows all buckets with their tasks', () => {
-		const data = TaskFactory.create(10, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[0].title)
-			.should('exist')
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[1].title)
-			.should('exist')
-		cy.get('.kanban .bucket')
-			.first()
-			.should('contain', data[0].title)
-	})
-
-	it('Can add a new task to a bucket', () => {
-		TaskFactory.create(2, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket')
-			.contains(buckets[0].title)
-			.get('.bucket-footer .button')
-			.contains('Add another task')
-			.click()
-		cy.get('.kanban .bucket')
-			.contains(buckets[0].title)
-			.get('.bucket-footer .field .control input.input')
-			.type('New Task{enter}')
-
-		cy.get('.kanban .bucket')
-			.first()
-			.should('contain', 'New Task')
-	})
-
-	it('Can create a new bucket', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.get('.kanban .bucket.new-bucket .button')
-			.click()
-		cy.get('.kanban .bucket.new-bucket input.input')
-			.type('New Bucket{enter}')
-
-		cy.wait(1000) // Wait for the request to finish
-		cy.get('.kanban .bucket .title')
-			.contains('New Bucket')
-			.should('exist')
-	})
-
-	it('Can set a bucket limit', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-			.first()
-			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-			.contains('Limit: Not Set')
-			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
-			.first()
-			.type(3)
-		cy.get('[data-cy="setBucketLimit"]')
-			.first()
-			.click()
-
-		cy.get('.kanban .bucket .bucket-header span.limit')
-			.contains('0/3')
-			.should('exist')
-	})
-
-	it('Can rename a bucket', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .bucket-header .title')
-			.first()
-			.type('{selectall}New Bucket Title{enter}')
-		cy.get('.kanban .bucket .bucket-header .title')
-			.first()
-			.should('contain', 'New Bucket Title')
-	})
-
-	it('Can delete a bucket', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-			.first()
-			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-			.contains('Delete')
-			.click()
-		cy.get('.modal-mask .modal-container .modal-content .header')
-			.should('contain', 'Delete the bucket')
-		cy.get('.modal-mask .modal-container .modal-content .actions .button')
-			.contains('Do it!')
-			.click()
-
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[0].title)
-			.should('not.exist')
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[1].title)
-			.should('exist')
-	})
-
-	it('Can drag tasks around', () => {
-		const tasks = TaskFactory.create(2, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .tasks .task')
-			.contains(tasks[0].title)
-			.first()
-			.drag('.kanban .bucket:nth-child(2) .tasks')
-		
-		cy.get('.kanban .bucket:nth-child(2) .tasks')
-			.should('contain', tasks[0].title)
-		cy.get('.kanban .bucket:nth-child(1) .tasks')
-			.should('not.contain', tasks[0].title)
-	})
-
-	it('Should navigate to the task when the task card is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .tasks .task')
-			.contains(tasks[0].title)
-			.should('be.visible')
-			.click()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`, { timeout: 1000 })
-	})
-
-	it('Should remove a task from the kanban board when moving it to another list', () => {
-		const lists = ListFactory.create(2)
-		BucketFactory.create(2, {
-			list_id: '{increment}',
-		})
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-			bucket_id: 1,
-		})
-		const task = tasks[0]
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .tasks .task')
-			.contains(task.title)
-			.should('be.visible')
-			.click()
-
-		cy.get('.task-view .action-buttons .button', { timeout: 3000 })
-			.contains('Move task')
-			.click()
-		cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-			.type(`${lists[1].title}{enter}`)
-		// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
-		// presses enter and we can't simulate pressing on enter to select the item.
-		cy.get('.task-view .content.details .field .multiselect.control .search-results')
-			.children()
-			.first()
-			.click()
-
-		cy.get('.global-notification', { timeout: 1000 })
-			.should('contain', 'Success')
-		cy.go('back')
-		cy.get('.kanban .bucket')
-			.should('not.contain', task.title)
-	})
-})

cypress/integration/list/list-view-list.spec.js

@@ -1,97 +0,0 @@
-import {UserListFactory} from '../../factories/users_list'
-import {TaskFactory} from '../../factories/task'
-import {UserFactory} from '../../factories/user'
-import {ListFactory} from '../../factories/list'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('List View List', () => {
-	prepareLists()
-
-	it('Should be an empty list', () => {
-		cy.visit('/lists/1')
-		cy.url()
-			.should('contain', '/lists/1/list')
-		cy.get('.list-title h1')
-			.should('contain', 'First List')
-		cy.get('.list-title .dropdown')
-			.should('exist')
-		cy.get('p')
-			.contains('This list is currently empty.')
-			.should('exist')
-	})
-
-	it('Should navigate to the task when the title is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-		})
-		cy.visit('/lists/1/list')
-
-		cy.get('.tasks .task .tasktext')
-			.contains(tasks[0].title)
-			.first()
-			.click()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`)
-	})
-
-	it('Should not see any elements for a list which is shared read only', () => {
-		UserFactory.create(2)
-		UserListFactory.create(1, {
-			list_id: 2,
-			user_id: 1,
-			right: 0,
-		})
-		const lists = ListFactory.create(2, {
-			owner_id: '{increment}',
-			namespace_id: '{increment}',
-		})
-		cy.visit(`/lists/${lists[1].id}/`)
-
-		cy.get('.list-title a.icon')
-			.should('not.exist')
-		cy.get('input.input[placeholder="Add a new task..."')
-			.should('not.exist')
-	})
-
-	it('Should only show the color of a list in the navigation and not in the list view', () => {
-		const lists = ListFactory.create(1, {
-			hex_color: '00db60',
-		})
-		TaskFactory.create(10, {
-			list_id: lists[0].id,
-		})
-		cy.visit(`/lists/${lists[0].id}/`)
-
-		cy.get('.menu-list li .list-menu-link .color-bubble')
-			.should('have.css', 'background-color', 'rgb(0, 219, 96)')
-		cy.get('.tasks-container .tasks .color-bubble')
-			.should('not.exist')
-	})
-
-	it('Should paginate for > 50 tasks', () => {
-		const tasks = TaskFactory.create(100, {
-			id: '{increment}',
-			title: i => `task${i}`,
-			list_id: 1,
-		})
-		cy.visit('/lists/1/list')
-
-		cy.get('.tasks-container .tasks')
-			.should('contain', tasks[99].title)
-
-		cy.get('.card-content .pagination .pagination-link')
-			.contains('2')
-			.click()
-
-		cy.url()
-			.should('contain', '?page=2')
-		cy.get('.tasks-container .tasks')
-			.should('contain', tasks[1].title)
-		cy.get('.tasks-container .tasks')
-			.should('not.contain', tasks[99].title)
-	})
-})

cypress/integration/list/list-view-table.spec.js

@@ -1,52 +0,0 @@
-import {TaskFactory} from '../../factories/task'
-
-import '../../support/authenticateUser'
-
-describe('List View Table', () => {
-	it('Should show a table with tasks', () => {
-		const tasks = TaskFactory.create(1)
-		cy.visit('/lists/1/table')
-
-		cy.get('.list-table table.table')
-			.should('exist')
-		cy.get('.list-table table.table')
-			.should('contain', tasks[0].title)
-	})
-
-	it('Should have working column switches', () => {
-		TaskFactory.create(1)
-		cy.visit('/lists/1/table')
-
-		cy.get('.list-table .filter-container .items .button')
-			.contains('Columns')
-			.click()
-		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-			.contains('Priority')
-			.click()
-		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-			.contains('Done')
-			.click()
-
-		cy.get('.list-table table.table th')
-			.contains('Priority')
-			.should('exist')
-		cy.get('.list-table table.table th')
-			.contains('Done')
-			.should('not.exist')
-	})
-
-	it('Should navigate to the task when the title is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-		})
-		cy.visit('/lists/1/table')
-
-		cy.get('.list-table table.table')
-			.contains(tasks[0].title)
-			.click()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`)
-	})
-})

cypress/integration/list/list.spec.js

@@ -1,11 +1,25 @@
+import {formatISO, format} from 'date-fns'
+
 import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
+import {ListFactory} from '../../factories/list'
+import {UserListFactory} from '../../factories/users_list'
+import {UserFactory} from '../../factories/user'
+import {NamespaceFactory} from '../../factories/namespace'
+import {BucketFactory} from '../../factories/bucket'
 
 import '../../support/authenticateUser'
 
 describe('Lists', () => {
 	let lists
-	prepareLists((newLists) => (lists = newLists))
+
+	beforeEach(() => {
+		UserFactory.create(1)
+		NamespaceFactory.create(1)
+		lists = ListFactory.create(1, {
+			title: 'First List'
+		})
+		TaskFactory.truncate()
+	})
 
 	it('Should create a new list', () => {
 		cy.visit('/')
@@ -15,7 +29,7 @@ describe('Lists', () => {
 			.contains('New list')
 			.click()
 		cy.url()
-			.should('contain', '/lists/new/1')
+			.should('contain', '/namespaces/1/list')
 		cy.get('.card-header-title')
 			.contains('New list')
 		cy.get('input.input')
@@ -42,7 +56,7 @@ describe('Lists', () => {
 	})
 
 	it('Should rename the list in all places', () => {
-		TaskFactory.create(5, {
+		const tasks = TaskFactory.create(5, {
 			id: '{increment}',
 			list_id: 1,
 		})
@@ -98,4 +112,429 @@ describe('Lists', () => {
 		cy.location('pathname')
 			.should('equal', '/')
 	})
+
+	describe('List View', () => {
+		it('Should be an empty list', () => {
+			cy.visit('/lists/1')
+			cy.url()
+				.should('contain', '/lists/1/list')
+			cy.get('.list-title h1')
+				.should('contain', 'First List')
+			cy.get('.list-title .dropdown')
+				.should('exist')
+			cy.get('p')
+				.contains('This list is currently empty.')
+				.should('exist')
+		})
+
+		it('Should navigate to the task when the title is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+			})
+			cy.visit('/lists/1/list')
+
+			cy.get('.tasks .task .tasktext')
+				.contains(tasks[0].title)
+				.first()
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+
+		it('Should not see any elements for a list which is shared read only', () => {
+			UserFactory.create(2)
+			UserListFactory.create(1, {
+				list_id: 2,
+				user_id: 1,
+				right: 0,
+			})
+			const lists = ListFactory.create(2, {
+				owner_id: '{increment}',
+				namespace_id: '{increment}',
+			})
+			cy.visit(`/lists/${lists[1].id}/`)
+
+			cy.get('.list-title a.icon')
+				.should('not.exist')
+			cy.get('input.input[placeholder="Add a new task..."')
+				.should('not.exist')
+		})
+
+		it('Should only show the color of a list in the navigation and not in the list view', () => {
+			const lists = ListFactory.create(1, {
+				hex_color: '00db60',
+			})
+			TaskFactory.create(10, {
+				list_id: lists[0].id,
+			})
+			cy.visit(`/lists/${lists[0].id}/`)
+
+			cy.get('.menu-list li .list-menu-link .color-bubble')
+				.should('have.css', 'background-color', 'rgb(0, 219, 96)')
+			cy.get('.tasks-container .tasks .color-bubble')
+				.should('not.exist')
+		})
+
+		it('Should paginate for > 50 tasks', () => {
+			const tasks = TaskFactory.create(100, {
+				id: '{increment}',
+				title: i => `task${i}`,
+				list_id: 1,
+			})
+			cy.visit('/lists/1/list')
+
+			cy.get('.tasks-container .tasks')
+				.should('contain', tasks[99].title)
+
+			cy.get('.card-content .pagination .pagination-link')
+				.contains('2')
+				.click()
+
+			cy.url()
+				.should('contain', '?page=2')
+			cy.get('.tasks-container .tasks')
+				.should('contain', tasks[1].title)
+			cy.get('.tasks-container .tasks')
+				.should('not.contain', tasks[99].title)
+		})
+	})
+
+	describe('Table View', () => {
+		it('Should show a table with tasks', () => {
+			const tasks = TaskFactory.create(1)
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view table.table')
+				.should('exist')
+			cy.get('.table-view table.table')
+				.should('contain', tasks[0].title)
+		})
+
+		it('Should have working column switches', () => {
+			TaskFactory.create(1)
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view .filter-container .items .button')
+				.contains('Columns')
+				.click()
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+				.contains('Priority')
+				.click()
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+				.contains('Done')
+				.click()
+
+			cy.get('.table-view table.table th')
+				.contains('Priority')
+				.should('exist')
+			cy.get('.table-view table.table th')
+				.contains('Done')
+				.should('not.exist')
+		})
+
+		it('Should navigate to the task when the title is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+			})
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view table.table')
+				.contains(tasks[0].title)
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+	})
+
+	describe('Gantt View', () => {
+		it('Hides tasks with no dates', () => {
+			const tasks = TaskFactory.create(1)
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
+				.should('not.contain', tasks[0].title)
+		})
+
+		it('Shows tasks from the current and next month', () => {
+			const now = new Date()
+			const nextMonth = now
+			nextMonth.setDate(1)
+			nextMonth.setMonth(now.getMonth() + 1)
+
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart .months')
+				.should('contain', format(now, 'MMMM'))
+				.should('contain', format(nextMonth, 'MMMM'))
+		})
+
+		it('Shows tasks with dates', () => {
+			const now = new Date()
+			const tasks = TaskFactory.create(1, {
+				start_date: formatISO(now),
+				end_date: formatISO(now.setDate(now.getDate() + 4))
+			})
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
+				.should('not.be.empty')
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
+				.should('contain', tasks[0].title)
+		})
+
+		it('Shows tasks with no dates after enabling them', () => {
+			TaskFactory.create(1, {
+				start_date: null,
+				end_date: null,
+			})
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-options .fancycheckbox')
+				.contains('Show tasks which don\'t have dates set')
+				.click()
+
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
+				.should('not.be.empty')
+			cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate')
+				.should('exist')
+		})
+
+		it('Drags a task around', () => {
+			const now = new Date()
+			TaskFactory.create(1, {
+				start_date: formatISO(now),
+				end_date: formatISO(now.setDate(now.getDate() + 4))
+			})
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart .tasks .task')
+				.first()
+				.trigger('mousedown', {which: 1})
+				.trigger('mousemove', {clientX: 500, clientY: 0})
+				.trigger('mouseup', {force: true})
+		})
+	})
+
+	describe('Kanban', () => {
+		let buckets
+
+		beforeEach(() => {
+			buckets = BucketFactory.create(2)
+		})
+
+		it('Shows all buckets with their tasks', () => {
+			const data = TaskFactory.create(10, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[0].title)
+				.should('exist')
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[1].title)
+				.should('exist')
+			cy.get('.kanban .bucket')
+				.first()
+				.should('contain', data[0].title)
+		})
+
+		it('Can add a new task to a bucket', () => {
+			const data = TaskFactory.create(2, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket')
+				.contains(buckets[0].title)
+				.get('.bucket-footer .button')
+				.contains('Add another task')
+				.click()
+			cy.get('.kanban .bucket')
+				.contains(buckets[0].title)
+				.get('.bucket-footer .field .control input.input')
+				.type('New Task{enter}')
+
+			cy.get('.kanban .bucket')
+				.first()
+				.should('contain', 'New Task')
+		})
+
+		it('Can create a new bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket.new-bucket .button')
+				.click()
+			cy.get('.kanban .bucket.new-bucket input.input')
+				.type('New Bucket{enter}')
+
+			cy.wait(1000) // Wait for the request to finish
+			cy.get('.kanban .bucket .title')
+				.contains('New Bucket')
+				.should('exist')
+		})
+
+		it('Can set a bucket limit', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+				.first()
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+				.contains('Limit: Not Set')
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
+				.first()
+				.type(3)
+			cy.get('[data-cy="setBucketLimit"]')
+				.first()
+				.click()
+
+			cy.get('.kanban .bucket .bucket-header span.limit')
+				.contains('0/3')
+				.should('exist')
+		})
+
+		it('Can rename a bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .title')
+				.first()
+				.type('{selectall}New Bucket Title{enter}')
+			cy.get('.kanban .bucket .bucket-header .title')
+				.first()
+				.should('contain', 'New Bucket Title')
+		})
+
+		it('Can delete a bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+				.first()
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+				.contains('Delete')
+				.click()
+			cy.get('.modal-mask .modal-container .modal-content .header')
+				.should('contain', 'Delete the bucket')
+			cy.get('.modal-mask .modal-container .modal-content .actions .button')
+				.contains('Do it!')
+				.click()
+
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[0].title)
+				.should('not.exist')
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[1].title)
+				.should('exist')
+		})
+
+		it('Can drag tasks around', () => {
+			const tasks = TaskFactory.create(2, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .tasks .task')
+				.contains(tasks[0].title)
+				.first()
+				.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
+			
+			cy.get('.kanban .bucket:nth-child(2) .tasks')
+				.should('contain', tasks[0].title)
+			cy.get('.kanban .bucket:nth-child(1) .tasks')
+				.should('not.contain', tasks[0].title)
+		})
+
+		it('Should navigate to the task when the task card is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.getSettled('.kanban .bucket .tasks .task')
+				.contains(tasks[0].title)
+				.should('be.visible')
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+
+		it('Should remove a task from the kanban board when moving it to another list', () => {
+			const lists = ListFactory.create(2)
+			BucketFactory.create(2, {
+				list_id: '{increment}',
+			})
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+				bucket_id: 1,
+			})
+			const task = tasks[0]
+			cy.visit('/lists/1/kanban')
+
+			cy.getSettled('.kanban .bucket .tasks .task')
+				.contains(task.title)
+				.should('be.visible')
+				.click()
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Move task')
+				.click()
+			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
+				.type(`${lists[1].title}{enter}`)
+			// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
+			// presses enter and we can't simulate pressing on enter to select the item.
+			cy.get('.task-view .content.details .field .multiselect.control .search-results')
+				.children()
+				.first()
+				.click()
+
+			cy.get('.global-notification', { timeout: 1000 })
+				.should('contain', 'Success')
+			cy.go('back')
+			cy.get('.kanban .bucket')
+				.should('not.contain', task.title)
+		})
+	})
+
+	describe('List history', () => {
+		it('should show a list history on the home page', () => {
+			const lists = ListFactory.create(6)
+
+			cy.visit('/')
+			cy.get('h3')
+				.contains('Last viewed')
+				.should('not.exist')
+
+			cy.visit(`/lists/${lists[0].id}`)
+			cy.visit(`/lists/${lists[1].id}`)
+			cy.visit(`/lists/${lists[2].id}`)
+			cy.visit(`/lists/${lists[3].id}`)
+			cy.visit(`/lists/${lists[4].id}`)
+			cy.visit(`/lists/${lists[5].id}`)
+
+			cy.visit('/')
+			cy.get('h3')
+				.contains('Last viewed')
+				.should('exist')
+			cy.get('.list-cards-wrapper-2-rows')
+				.should('not.contain', lists[0].title)
+				.should('contain', lists[1].title)
+				.should('contain', lists[2].title)
+				.should('contain', lists[3].title)
+				.should('contain', lists[4].title)
+				.should('contain', lists[5].title)
+		})
+	})
 })

cypress/integration/list/prepareLists.js

@@ -1,16 +0,0 @@
-import {ListFactory} from '../../factories/list'
-import {UserFactory} from '../../factories/user'
-import {NamespaceFactory} from '../../factories/namespace'
-import {TaskFactory} from '../../factories/task'
-
-export function prepareLists(setLists = () => {}) {
-	beforeEach(() => {
-		UserFactory.create(1)
-		NamespaceFactory.create(1)
-		const lists = ListFactory.create(1, {
-			title: 'First List'
-		})
-		setLists(lists)
-		TaskFactory.truncate()
-	})
-}

cypress/integration/task/task.spec.js

@@ -116,7 +116,6 @@ describe('Task', () => {
 				.should('be.visible')
 				.should('contain', 'Done')
 			cy.get('.task-view .action-buttons p.created')
-				.scrollIntoView()
 				.should('be.visible')
 				.should('contain', 'Done')
 		})
@@ -373,13 +372,13 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
 				.should('be.visible')
 				.should('contain', labels[0].title)
-			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
 				.children()
 				.first()
-				.get('[data-cy="taskDetail.removeLabel"]')
+				.get('a.delete')
 				.click()
 
 			cy.get('.global-notification')

cypress/integration/user/logout.spec.js

@@ -6,7 +6,7 @@ describe('Log out', () => {
 
 		cy.get('.navbar .user .username')
 			.click()
-		cy.get('.navbar .user .dropdown-menu .dropdown-item')
+		cy.get('.navbar .user .dropdown-menu a.dropdown-item')
 			.contains('Logout')
 			.click()
 

cypress/integration/user/registration.spec.js

@@ -25,6 +25,7 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
+		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.url().should('include', '/')
 		cy.clock(1625656161057) // 13:00
@@ -42,6 +43,7 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
+		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.get('div.message.danger').contains('A user with this username already exists.')
 	})

cypress/integration/user/settings.spec.js

@@ -8,14 +8,12 @@ describe('User Settings', () => {
 	})
 
 	it('Changes the user avatar', () => {
-		cy.intercept(`${Cypress.env('API_URL')}/user/settings/avatar/upload`).as('uploadAvatar')
-		
 		cy.visit('/user/settings/avatar')
 
 		cy.get('input[name=avatarProvider][value=upload]')
 			.click()
-		cy.get('input[type=file]', {timeout: 1000})
-			.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
+		cy.get('input[type=file]', { timeout: 1000 })
+			.attachFile('image.jpg')
 		cy.get('.vue-handler-wrapper.vue-handler-wrapper--south .vue-simple-handler.vue-simple-handler--south')
 			.trigger('mousedown', {which: 1})
 			.trigger('mousemove', {clientY: 100})
@@ -24,7 +22,7 @@ describe('User Settings', () => {
 			.contains('Upload Avatar')
 			.click()
 
-		cy.wait('@uploadAvatar')
+		cy.wait(3000) // Wait for the request to finish
 		cy.get('.global-notification')
 			.should('contain', 'Success')
 	})

cypress/support/index.js

@@ -1,5 +1,6 @@
 
 import './commands'
+import 'cypress-file-upload'
 import '@4tw/cypress-drag-drop'
 
 // see https://github.com/cypress-io/cypress/issues/702#issuecomment-587127275

package.json

@@ -15,23 +15,27 @@
     "test:unit": "vitest run",
     "test:unit-watch": "vitest watch",
     "test:frontend": "cypress run",
-    "browserslist:update": "npx browserslist@latest --update-db"
+    "browserslist:update": "npx browserslist@latest --update-db",
+    "cap:sync": "cap sync"
   },
   "dependencies": {
-    "@github/hotkey": "2.0.0",
+    "@capacitor/android": "3.3.4",
+    "@capacitor/cli": "3.3.4",
+    "@capacitor/core": "3.3.4",
+    "@github/hotkey": "1.6.1",
     "@kyvg/vue3-notification": "2.3.4",
-    "@sentry/tracing": "6.17.7",
-    "@sentry/vue": "6.17.7",
+    "@sentry/tracing": "6.16.1",
+    "@sentry/vue": "6.16.1",
     "@types/is-touch-device": "1.0.0",
-    "@vue/compat": "3.2.30",
-    "@vueuse/core": "7.6.0",
-    "@vueuse/router": "7.6.1",
+    "@vue/compat": "3.2.26",
+    "@vueuse/core": "7.5.2",
+    "@vueuse/router": "7.5.3",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.1",
+    "codemirror": "5.65.0",
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.28.0",
-    "dompurify": "2.3.5",
+    "dompurify": "2.3.4",
     "easymde": "2.16.1",
     "flatpickr": "4.6.9",
     "flexsearch": "0.7.21",
@@ -39,16 +43,16 @@
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.12",
+    "marked": "4.0.10",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "ufo": "0.7.10",
+    "ufo": "0.7.9",
     "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.2.30",
-    "vue-advanced-cropper": "2.8.0",
+    "vue": "3.2.26",
+    "vue-advanced-cropper": "2.7.1",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.5",
-    "vue-i18n": "9.2.0-beta.30",
+    "vue-i18n": "9.2.0-beta.28",
     "vue-router": "4.0.12",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
@@ -56,41 +60,42 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.1.0",
-    "@faker-js/faker": "6.0.0-alpha.6",
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "@types/flexsearch": "0.7.2",
-    "@typescript-eslint/eslint-plugin": "5.11.0",
-    "@typescript-eslint/parser": "5.11.0",
-    "@vitejs/plugin-legacy": "1.7.1",
-    "@vitejs/plugin-vue": "2.2.0",
+    "@typescript-eslint/eslint-plugin": "5.9.1",
+    "@typescript-eslint/parser": "5.9.1",
+    "@vitejs/plugin-legacy": "1.6.4",
+    "@vitejs/plugin-vue": "2.0.1",
     "@vue/eslint-config-typescript": "10.0.0",
     "autoprefixer": "10.4.2",
-    "axios": "0.25.0",
+    "axios": "0.24.0",
     "browserslist": "4.19.1",
-    "caniuse-lite": "1.0.30001311",
-    "cypress": "9.4.1",
-    "esbuild": "0.14.21",
-    "eslint": "8.9.0",
-    "eslint-plugin-vue": "8.4.1",
+    "caniuse-lite": "1.0.30001299",
+    "cypress": "9.2.1",
+    "cypress-file-upload": "5.0.8",
+    "esbuild": "0.14.11",
+    "eslint": "8.7.0",
+    "eslint-plugin-vue": "8.3.0",
     "express": "4.17.2",
-    "happy-dom": "2.31.1",
-    "netlify-cli": "8.16.1",
-    "postcss": "8.4.6",
-    "postcss-preset-env": "7.3.1",
-    "rollup": "2.67.2",
+    "faker": "5.5.3",
+    "happy-dom": "2.25.2",
+    "netlify-cli": "8.8.2",
+    "postcss": "8.4.5",
+    "postcss-preset-env": "7.2.3",
+    "rollup": "2.64.0",
     "rollup-plugin-visualizer": "5.5.4",
-    "sass": "1.49.7",
+    "sass": "1.48.0",
     "slugify": "1.6.5",
-    "typescript": "4.5.5",
-    "vite": "2.7.13",
+    "typescript": "4.5.4",
+    "vite": "2.7.12",
     "vite-plugin-pwa": "0.11.13",
     "vite-svg-loader": "3.1.2",
-    "vitest": "0.3.2",
-    "vue-tsc": "0.31.2",
-    "wait-on": "6.0.1",
+    "vitest": "0.1.17",
+    "vue-tsc": "0.30.3",
+    "wait-on": "6.0.0",
     "workbox-cli": "6.4.2"
   },
   "eslintConfig": {
@@ -129,7 +134,7 @@
     "parser": "vue-eslint-parser",
     "parserOptions": {
       "parser": "@typescript-eslint/parser",
-      "ecmaVersion": 2022
+      "ecmaVersion": 2021
     },
     "ignorePatterns": [
       "*.test.*",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<ready>
 		<template v-if="authUser">
-			<TheNavigation/>
+			<top-navigation/>
 			<content-auth/>
 		</template>
 		<content-link-share v-else-if="authLinkShare"/>
@@ -27,7 +27,7 @@ import {success} from '@/message'
 
 import Notification from '@/components/misc/notification.vue'
 import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
-import TheNavigation from '@/components/home/TheNavigation.vue'
+import TopNavigation from './components/home/topNavigation.vue'
 import ContentAuth from './components/home/contentAuth.vue'
 import ContentLinkShare from './components/home/contentLinkShare.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
@@ -42,7 +42,7 @@ import {useBodyClass} from '@/composables/useBodyClass'
 const store = useStore()
 const router = useRouter()
 
-useBodyClass('is-touch', isTouchDevice())
+useBodyClass('is-touch', isTouchDevice)
 const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
 
 const authUser = computed(() => store.getters['auth/authUser'])

src/components/base/BaseButton.vue

@@ -69,10 +69,10 @@ watchEffect(() => {
 	}
 
 	// if there is a href we assume the user wants an external link via a link element
-	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
+	// we also set the attribute rel to "noopener" but make it possible to overwrite this by the user.
 	if ('href' in attrs) {
 		nodeName = 'a'
-		bindings = {rel: 'noreferrer noopener nofollow'}
+		bindings = {rel: 'noopener'}
 	}
 
 	componentNodeName.value = nodeName

src/components/home/Logo.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useNow } from '@vueuse/core'
-
 import LogoFull from '@/assets/logo-full.svg?component'
 import LogoFullPride from '@/assets/logo-full-pride.svg?component'
 
-const now = useNow()
-const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
+const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFull)
 </script>
 
 <template>

src/components/home/MenuButton.vue

@@ -1,7 +1,8 @@
 <template>
-	<BaseButton
-		class="menu-show-button"
+	<button
+		type="button"
 		@click="$store.commit('toggleMenu')"
+		class="menu-show-button"
 		@shortkey="() => $store.commit('toggleMenu')"
 		v-shortcut="'Control+e'"
 		:title="$t('keyboardShortcuts.toggleMenu')"
@@ -9,14 +10,11 @@
 	/>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {store} from '@/store'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-
-const store = useStore()
-const menuActive = computed(() => store.state.menuActive)
+const menuActive = computed(() => store.menuActive)
 </script>
 
 <style lang="scss" scoped>
@@ -24,6 +22,11 @@ $lineWidth: 2rem;
 $size: $lineWidth + 1rem;
 
 .menu-show-button {
+	// FIXME: create general button component
+	appearance: none;
+	background-color: transparent;
+	border: 0;
+
 	min-height: $size;
 	width: $size;
 

src/components/home/contentAuth.vue

@@ -1,51 +1,33 @@
 <template>
 	<div>
-		<BaseButton
-			v-if="menuActive"
-			@click="$store.commit('menuActive', false)"
-			class="menu-hide-button" 
-		>
+		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
 			<icon icon="times" />
-		</BaseButton>
+		</a>
 		<div
 			:class="{'has-background': background}"
 			:style="{'background-image': background && `url(${background})`}"
 			class="app-container"
 		>
 			<navigation/>
-			<main
+			<div
 				:class="[
 					{ 'is-menu-enabled': menuActive },
 					$route.name,
 				]"
 				class="app-content"
 			>
-				<BaseButton
-					v-if="menuActive"
-					@click="$store.commit('menuActive', false)"
-					class="mobile-overlay"
-				/>
+				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
 
 				<quick-actions/>
 
+				<router-view/>
 
-				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
+				<router-view name="popup" v-slot="{ Component }">
+					<transition name="modal">
 						<component :is="Component" />
-					</keep-alive>
+					</transition>
 				</router-view>
 
-				<transition name="modal">
-					<modal
-						v-if="currentModal" 
-						@close="closeModal()"
-						variant="scrolling"
-						class="task-detail-view-modal"
-					>
-						<component :is="currentModal" />
-					</modal>
-				</transition>
-
 				<a
 					class="keyboard-shortcuts-button"
 					@click="showKeyboardShortcuts()"
@@ -53,13 +35,13 @@
 				>
 					<icon icon="keyboard"/>
 				</a>
-			</main>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
+import {watch, computed} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
@@ -67,59 +49,6 @@ import {useEventListener} from '@vueuse/core'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
-import BaseButton from '@/components/base/BaseButton.vue'
-
-function useRouteWithModal() {
-	const router = useRouter()
-	const route = useRoute()
-	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
-
-	const routeWithModal = computed(() => {
-		return backdropView.value
-			? router.resolve(backdropView.value)
-			: route
-	})
-
-	const currentModal = shallowRef<VNode>()
-	watchEffect(() => {
-		if (!backdropView.value) {
-			currentModal.value = undefined
-			return
-		}
-
-		// logic from vue-router
-		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
-		const routePropsOption = route.matched[0]?.props.default
-		const routeProps = routePropsOption
-			? routePropsOption === true
-				? route.params
-				: typeof routePropsOption === 'function'
-					? routePropsOption(route)
-					: routePropsOption
-			: null
-
-		currentModal.value = h(
-			route.matched[0]?.components.default,
-			routeProps,
-		)
-	})
-
-	function closeModal() {
-		const historyState = computed(() => route.fullPath && window.history.state)
-
-		if (historyState.value) {
-			router.back()
-		} else {
-			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
-			router.push(backdropRoute)
-		}
-	}
-
-	return { routeWithModal, currentModal, closeModal }
-}
-
-const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
-
 
 const store = useStore()
 
@@ -294,6 +223,4 @@ store.dispatch('labels/loadAllLabels')
 		display: none;
 	}
 }
-
-@include modal-transition();
 </style>

src/components/home/navigation.vue

@@ -1,8 +1,8 @@
 <template>
-	<aside :class="{'is-active': menuActive}" class="namespace-container">
-		<nav class="menu top-menu">
+	<div :class="{'is-active': menuActive}" class="namespace-container">
+		<div class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
-				<Logo width="164" height="48"/>
+				<Logo width="164" height="48" />
 			</router-link>
 			<ul class="menu-list">
 				<li>
@@ -46,35 +46,31 @@
 					</router-link>
 				</li>
 			</ul>
-		</nav>
+		</div>
 
-		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
-			<template v-for="(n, nk) in namespaces" :key="n.id">
+		<aside class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
+			<template v-for="(n, nk) in namespaces" :key="n.id" >
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
-						v-tooltip="namespaceTitles[nk]"
-					>
-						<span
-							v-if="n.hexColor !== ''"
-							:style="{ backgroundColor: n.hexColor }"
-							class="color-bubble"
-						/>
+						v-tooltip="namespaceTitles[nk]">
 						<span class="name">
+							<span
+								:style="{ backgroundColor: n.hexColor }"
+								class="color-bubble"
+								v-if="n.hexColor !== ''">
+							</span>
 							{{ namespaceTitles[nk] }}
 						</span>
-						<a
-							class="icon is-small toggle-lists-icon pl-2"
-							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
-							@click="toggleLists(n.id)"
-						>
-							<icon icon="chevron-down"/>
-						</a>
-						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
-							({{ namespaceListsCount[nk] }})
-						</span>
 					</span>
+					<a
+						class="icon is-small toggle-lists-icon"
+						:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
+						@click="toggleLists(n.id)"
+					>
+						<icon icon="chevron-down"/>
+					</a>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
 				<div
@@ -85,20 +81,18 @@
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
 						triggered by the change needs to have access to the current namespace
-					-->
+					--> 
 					<draggable
 						v-bind="dragOptions"
 						:modelValue="activeLists[nk]"
 						@update:modelValue="(lists) => updateActiveLists(n, lists)"
-						group="namespace-lists"
+						:group="`namespace-${n.id}-lists`"
 						@start="() => drag = true"
-						@end="saveListPosition"
+						@end="e => saveListPosition(e, nk)"
 						handle=".handle"
 						:disabled="n.id < 0 || null"
 						tag="transition-group"
 						item-key="id"
-						:data-namespace-id="n.id"
-						:data-namespace-index="nk"
 						:component-data="{
 							type: 'transition',
 							tag: 'ul',
@@ -140,7 +134,7 @@
 											:class="{'is-favorite': l.isFavorite}"
 											@click.prevent.stop="toggleFavoriteList(l)"
 											class="favorite">
-											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
+											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']" />
 										</span>
 									</a>
 								</router-link>
@@ -151,9 +145,9 @@
 					</draggable>
 				</div>
 			</template>
-		</nav>
-		<PoweredByLink/>
-	</aside>
+		</aside>
+		<PoweredByLink />
+	</div>
 </template>
 
 <script>
@@ -200,13 +194,13 @@ export default {
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
 		}),
 		activeLists() {
-			return this.namespaces.map(({lists}) => lists?.filter(item => typeof item !== 'undefined' && !item.isArchived))
+			return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
 		},
 		namespaceTitles() {
-			return this.namespaces.map((namespace) => this.getNamespaceTitle(namespace))
-		},
-		namespaceListsCount() {
-			return this.namespaces.map((_, index) => this.activeLists[index]?.length ?? 0)
+			return this.namespaces.map((namespace, index) => {
+				const title = this.getNamespaceTitle(namespace)
+				return `${title} (${this.activeLists[index]?.length ?? 0})`
+			})
 		},
 	},
 	beforeCreate() {
@@ -243,15 +237,15 @@ export default {
 			this.listsVisible[namespaceId] = !this.listsVisible[namespaceId]
 		},
 		updateActiveLists(namespace, activeLists) {
-			// This is a bit hacky: since we do have to filter out the archived items from the list
+			// this is a bit hacky: since we do have to filter out the archived items from the list
 			// for vue draggable updating it is not as simple as replacing it.
-			// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
-			// because now all archived lists are sorted after the active ones. This is fine because they are sorted 
-			// later when showing them anyway, and it makes the merging happening here a lot easier.
-			const lists = [
-				...activeLists,
-				...namespace.lists.filter(l => l.isArchived),
-			]
+			// instead we iterate over the non archived items in the old list and replace them with the ones in their new order
+			const lists = namespace.lists.map((item) => {
+				if (item.isArchived) {
+					return item
+				}
+				return activeLists.shift()
+			})
 
 			const newNamespace = {
 				...namespace,
@@ -261,11 +255,8 @@ export default {
 			this.$store.commit('namespaces/setNamespaceById', newNamespace)
 		},
 
-		async saveListPosition(e) {
-			const namespaceId = parseInt(e.to.dataset.namespaceId)
-			const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex)
-				
-			const listsActive = this.activeLists[newNamespaceIndex]
+		async saveListPosition(e, namespaceIndex) {
+			const listsActive = this.activeLists[namespaceIndex]
 			const list = listsActive[e.newIndex]
 			const listBefore = listsActive[e.newIndex - 1] ?? null
 			const listAfter = listsActive[e.newIndex + 1] ?? null
@@ -278,7 +269,6 @@ export default {
 				await this.$store.dispatch('lists/updateList', {
 					...list,
 					position,
-					namespaceId,
 				})
 			} finally {
 				this.listUpdating[list.id] = false
@@ -375,9 +365,8 @@ $vikunja-nav-selected-width: 0.4rem;
 
 		.menu-label {
 			.color-bubble {
-				width: 14px;
-				height: 14px;
-				flex-basis: auto;
+				width: 14px !important;
+				height: 14px !important;
 			}
 
 			.is-archived {
@@ -398,12 +387,6 @@ $vikunja-nav-selected-width: 0.4rem;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
-					margin-right: auto;
-				}
-
-				.count {
-					color: var(--grey-500);
-					margin-right: .5rem;
 				}
 			}
 
@@ -499,7 +482,7 @@ $vikunja-nav-selected-width: 0.4rem;
 					height: 1rem;
 					vertical-align: middle;
 					padding-right: 0.5rem;
-
+					
 					&.handle {
 						opacity: 0;
 						transition: opacity $transition;
@@ -507,7 +490,7 @@ $vikunja-nav-selected-width: 0.4rem;
 						cursor: grab;
 					}
 				}
-
+				
 				&:hover .icon.handle {
 					opacity: 1;
 				}
@@ -559,7 +542,7 @@ $vikunja-nav-selected-width: 0.4rem;
 			span.list-menu-link, li > a {
 				padding-left: 2rem;
 				display: inline-block;
-
+				
 				.icon {
 					padding-bottom: .25rem;
 				}

src/components/home/topNavigation.vue

@@ -1,8 +1,9 @@
 <template>
-	<header
+	<nav
 		:class="{'has-background': background}"
 		aria-label="main navigation"
 		class="navbar main-theme is-fixed-top"
+		role="navigation"
 	>
 		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>
@@ -32,13 +33,12 @@
 			</a>
 			<notifications/>
 			<div class="user">
+				<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
 				<dropdown class="is-right" ref="usernameDropdown">
 					<template #trigger>
 						<x-button
 							variant="secondary"
-							:shadow="false"
-						>
-							<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
+							:shadow="false">
 							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">
 								<icon icon="chevron-down"/>
@@ -46,96 +46,92 @@
 						</x-button>
 					</template>
 
-					<BaseButton
-						:to="{name: 'user.settings'}"
-						class="dropdown-item"
-					>
+					<router-link :to="{name: 'user.settings'}" class="dropdown-item">
 						{{ $t('user.settings.title') }}
-					</BaseButton>
-					<BaseButton
-						v-if="imprintUrl"
+					</router-link>
+					<a
 						:href="imprintUrl"
 						class="dropdown-item"
-					>
+						target="_blank"
+						rel="noreferrer noopener nofollow"
+						v-if="imprintUrl">
 						{{ $t('navigation.imprint') }}
-					</BaseButton>
-					<BaseButton
-						v-if="privacyPolicyUrl"
+					</a>
+					<a
 						:href="privacyPolicyUrl"
 						class="dropdown-item"
-					>
+						target="_blank"
+						rel="noreferrer noopener nofollow"
+						v-if="privacyPolicyUrl">
 						{{ $t('navigation.privacy') }}
-					</BaseButton>
-					<BaseButton
-						@click="$store.commit('keyboardShortcutsActive', true)"
-						class="dropdown-item"
-					>
+					</a>
+					<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">
 						{{ $t('keyboardShortcuts.title') }}
-					</BaseButton>
-					<BaseButton
-						:to="{name: 'about'}"
-						class="dropdown-item"
-					>
+					</a>
+					<router-link :to="{name: 'about'}" class="dropdown-item">
 						{{ $t('about.title') }}
-					</BaseButton>
-					<BaseButton
-						@click="logout()"
-						class="dropdown-item"
-					>
+					</router-link>
+					<a @click="logout()" class="dropdown-item">
 						{{ $t('user.auth.logout') }}
-					</BaseButton>
+					</a>
 				</dropdown>
 			</div>
 		</div>
-	</header>
+	</nav>
 </template>
 
-<script setup langs="ts">
-import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter} from 'vue-router'
-
-import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import Rights from '@/models/constants/rights.json'
-
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import Notifications from '@/components/notifications/notifications.vue'
 import Logo from '@/components/home/Logo.vue'
-import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
-const store = useStore()
+export default {
+	name: 'topNavigation',
+	components: {
+		Notifications,
+		Dropdown,
+		ListSettingsDropdown,
+		Update,
+		Logo,
+		MenuButton,
+	},
+	computed: {
+		...mapState({
+			userInfo: state => state.auth.info,
+			userAvatar: state => state.auth.avatarUrl,
+			userAuthenticated: state => state.auth.authenticated,
+			currentList: CURRENT_LIST,
+			background: 'background',
+			imprintUrl: state => state.config.legal.imprintUrl,
+			privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+			canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
+		}),
+	},
+	mounted() {
+		this.$nextTick(() => {
+			if (typeof this.$refs.usernameDropdown === 'undefined' || typeof this.$refs.listTitle === 'undefined') {
+				return
+			}
 
-const userInfo = computed(() => store.state.auth.info)
-const userAvatar = computed(() => store.state.auth.avatarUrl)
-const currentList = computed(() => store.state.currentList)
-const background = computed(() => store.state.background)
-const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
-const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
-const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
-
-const usernameDropdown = ref()
-const listTitle = ref()
-onMounted(async () => {
-	await nextTick()
-	if (typeof usernameDropdown.value === 'undefined' || typeof listTitle.value === 'undefined') {
-		return
-	}
-
-	const usernameWidth = usernameDropdown.value.$el.clientWidth
-	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
-})
-
-const router = useRouter()
-function logout() {
-	store.dispatch('auth/logout')
-	router.push({name: 'user.login'})
-}
-
-function openQuickActions() {
-	store.commit(QUICK_ACTIONS_ACTIVE, true)
+			const usernameWidth = this.$refs.usernameDropdown.$el.clientWidth
+			this.$refs.listTitle.style.setProperty('--nav-username-width', `${usernameWidth}px`)
+		})
+	},
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			this.$router.push({name: 'user.login'})
+		},
+		openQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
+		},
+	},
 }
 </script>
 
@@ -251,7 +247,6 @@ $hamburger-menu-icon-width: 28px;
 			border-radius: 100%;
 			vertical-align: middle;
 			height: 40px;
-			margin-right: var(--button-padding-horizontal);
 		}
 
 		:deep(.dropdown-trigger .button) {

src/components/home/update.vue

@@ -85,8 +85,4 @@ export default {
 		margin-left: .5rem;
 	}
 }
-
-.dark .update-notification {
-	color: var(--grey-200);
-}
 </style>

src/components/input/button.vue

@@ -66,7 +66,7 @@ const showIconOnly = computed(() => props.icon !== '' && typeof slots.default ==
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: bold;
-  min-height: $button-height;
+  height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
 

src/components/input/password.vue

@@ -1,85 +0,0 @@
-<template>
-	<div class="password-field">
-		<input
-			class="input"
-			id="password"
-			name="password"
-			:placeholder="$t('user.auth.passwordPlaceholder')"
-			required
-			:type="passwordFieldType"
-			autocomplete="current-password"
-			@keyup.enter="e => $emit('submit', e)"
-			:tabindex="props.tabindex"
-			@focusout="validate"
-			@input="handleInput"
-		/>
-		<a
-			@click="togglePasswordFieldType"
-			class="password-field-type-toggle"
-			aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
-			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
-			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
-		</a>
-	</div>
-	<p class="help is-danger" v-if="!isValid">
-		{{ $t('user.auth.passwordRequired') }}
-	</p>
-</template>
-
-<script lang="ts" setup>
-import {ref, watch} from 'vue'
-import {useDebounceFn} from '@vueuse/core'
-
-const props = defineProps({
-	tabindex: String,
-	modelValue: String,
-	// This prop is a workaround to trigger validation from the outside when the user never had focus in the input.
-	validateInitially: Boolean,
-})
-
-const emit = defineEmits(['submit', 'update:modelValue'])
-
-const passwordFieldType = ref<String>('password')
-const password = ref<String>('')
-const isValid = ref<Boolean>(!props.validateInitially)
-
-watch(
-	() => props.validateInitially,
-	(doValidate: Boolean) => {
-		if (doValidate) {
-			validate()
-		}
-	},
-)
-
-function validate() {
-	useDebounceFn(() => {
-		isValid.value = password.value !== ''
-	}, 100)()
-}
-
-function togglePasswordFieldType() {
-	passwordFieldType.value = passwordFieldType.value === 'password'
-		? 'text'
-		: 'password'
-}
-
-function handleInput(e) {
-	password.value = e.target.value
-	emit('update:modelValue', e.target.value)
-}
-</script>
-
-<style scoped>
-.password-field {
-	position: relative;
-}
-
-.password-field-type-toggle {
-	position: absolute;
-	color: var(--grey-400);
-	top: 50%;
-	right: 1rem;
-	transform: translateY(-50%);
-}
-</style>

src/components/list/list-settings-dropdown.vue

@@ -2,22 +2,21 @@
 	<dropdown>
 		<template v-if="isSavedFilter">
 			<dropdown-item
-				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
 			</dropdown-item>
 		</template>
-
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -25,38 +24,37 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
+				:to="{ name: `${listRoutePrefix}.background`, params: { listId: list.id } }"
 				v-if="backgroundsEnabled"
-				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.share`, params: { listId: list.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.duplicate`, params: { listId: list.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
-				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="list"
@@ -65,7 +63,7 @@
 				@change="sub => subscription = sub"
 			/>
 			<dropdown-item
-				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
+				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
@@ -75,32 +73,56 @@
 	</dropdown>
 </template>
 
-<script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
-import {useStore} from 'vuex'
-
+<script>
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
-import ListModel from '@/models/list'
-import SubscriptionModel from '@/models/subscription'
 
-const props = defineProps({
-	list: {
-		type: ListModel,
-		required: true,
+export default {
+	name: 'list-settings-dropdown',
+	data() {
+		return {
+			subscription: null,
+		}
 	},
-})
+	components: {
+		TaskSubscription,
+		DropdownItem,
+		Dropdown,
+	},
+	props: {
+		list: {
+			required: true,
+		},
+	},
+	mounted() {
+		this.subscription = this.list.subscription
+	},
+	computed: {
+		backgroundsEnabled() {
+			return this.$store.state.config.enabledBackgroundProviders !== null && this.$store.state.config.enabledBackgroundProviders.length > 0
+		},
+		listRoutePrefix() {
+			let name = 'list'
 
-const subscription = ref<SubscriptionModel>()
-watchEffect(() => {
-	if (props.list.subscription) {
-		subscription.value = props.list.subscription
-	}
-})
 
-const store = useStore()
-const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
-const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
+			if (this.$route.name !== null && this.$route.name.startsWith('list.')) {
+				// HACK: we should implement a better routing for the modals
+				const settingsRoutes = ['edit', 'delete', 'archive', 'background', 'share', 'duplicate']
+				const suffix = settingsRoutes.find((route) => this.$route.name.endsWith(`.settings.${route}`))
+				name = this.$route.name.replace(`.settings.${suffix}`,'')
+			}
+
+			if (this.isSavedFilter) {
+				name = name.replace('list.', 'filter.')
+			}
+
+			return `${name}.settings`
+		},
+		isSavedFilter() {
+			return getSavedFilterIdFromListId(this.list.id) > 0
+		},
+	},
+}
 </script>

src/components/list/partials/filter-popup.vue

@@ -29,10 +29,9 @@
 
 <script>
 import Filters from '@/components/list/partials/filters'
+import {getDefaultParams} from '@/components/tasks/mixins/taskList'
 import Popup from '@/components/misc/popup'
 
-import {getDefaultParams} from '@/composables/taskList'
-
 export default {
 	name: 'filter-popup',
 	components: {

src/components/list/partials/filters.vue

@@ -191,7 +191,7 @@ import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
-import {getDefaultParams} from '@/composables/taskList'
+import {getDefaultParams} from '@/components/tasks/mixins/taskList'
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {

src/components/list/partials/list-card.vue

@@ -28,20 +28,19 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType, ref, watch} from 'vue'
+import {ref, watch} from 'vue'
 import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import ListModel from '@/models/list'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
 
 const props = defineProps({
 	list: {
-		type: Object as PropType<ListModel>,
+		type: Object,
 		required: true,
 	},
 	showArchived: {
@@ -69,7 +68,7 @@ async function loadBackground() {
 
 const store = useStore()
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {

src/components/misc/api-config.vue

@@ -39,66 +39,79 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import {ref, computed, watch} from 'vue'
-import { useI18n } from 'vue-i18n'
+<script>
+import Message from '@/components/misc/message'
 import {parseURL} from 'ufo'
-
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
-import {success} from '@/message'
 
-import Message from '@/components/misc/message.vue'
-
-const props = defineProps({
-	configureOpen: {
-		type: Boolean,
-		required: false,
-		default: false,
+export default {
+	name: 'apiConfig',
+	components: {
+		Message,
 	},
-})
-const emit = defineEmits(['foundApi'])
-
-const apiUrl = ref(window.API_URL)
-const configureApi = ref(apiUrl.value === '')
-
-const apiDomain = computed(() => parseURL(apiUrl.value).host || parseURL(window.location.href).host)
-
-
-watch(() => props.configureOpen, (value) => {
-	configureApi.value = value
-}, { immediate: true })
-
-
-const {t} = useI18n()
-
-const errorMsg = ref('')
-const successMsg = ref('')
-async function setApiUrl() {
-	if (apiUrl.value === '') {
-		// Don't try to check and set an empty url
-		errorMsg.value = t('apiConfig.urlRequired')
-		return
-	}
-
-	try {
-		const url = await checkAndSetApiUrl(apiUrl.value)
-
-		if (url === '') {
-			// If the config setter function could not figure out a url					
-			throw new Error('URL cannot be empty.')
+	data() {
+		return {
+			configureApi: false,
+			apiUrl: window.API_URL,
+			errorMsg: '',
+			successMsg: '',
 		}
+	},
+	emits: ['foundApi'],
+	created() {
+		if (this.apiUrl === '') {
+			this.configureApi = true
+		}
+	},
+	computed: {
+		apiDomain() {
+			return parseURL(this.apiUrl).host || parseURL(window.location.href).host
+		},
+	},
+	props: {
+		configureOpen: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	watch: {
+		configureOpen: {
+			handler(value) {
+				this.configureApi = value
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		async setApiUrl() {
+			if (this.apiUrl === '') {
+				// Don't try to check and set an empty url
+				this.errorMsg = this.$t('apiConfig.urlRequired')
+				return
+			}
 
-		// Set it + save it to local storage to save us the hoops
-		errorMsg.value = ''
-		apiUrl.value = url
-		success({message: t('apiConfig.success', {domain: apiDomain.value})})
-		configureApi.value = false
-		emit('foundApi', apiUrl.value)
-	} catch (e) {
-		// Still not found, url is still invalid
-		successMsg.value = ''
-		errorMsg.value = t('apiConfig.error', {domain: apiDomain.value})
-	}
+			try {
+				const url = await checkAndSetApiUrl(this.apiUrl)
+
+				if (url === '') {
+					// If the config setter function could not figure out a url					
+					throw new Error('URL cannot be empty.')
+				}
+
+				// Set it + save it to local storage to save us the hoops
+				this.errorMsg = ''
+				this.$message.success({message: this.$t('apiConfig.success', {domain: this.apiDomain})})
+				this.configureApi = false
+				this.apiUrl = url
+				this.$emit('foundApi', this.apiUrl)
+			} catch (e) {
+				// Still not found, url is still invalid
+				this.successMsg = ''
+				this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
+			}
+		},
+	},
 }
 </script>
 

src/components/misc/keyboard-shortcuts/index.vue

@@ -4,11 +4,9 @@
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
-				<message class="mb-4" v-if="s.available">
+				<message>
 					{{
-						s.available($route)
-							? $t('keyboardShortcuts.currentPageOnly')
-							: $t('keyboardShortcuts.allPages')
+						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
 					}}
 				</message>
 
@@ -19,8 +17,7 @@
 							class="shortcut-keys"
 							is="dd"
 							:keys="sc.keys"
-							:combination="sc.combination && $t(`keyboardShortcuts.${sc.combination}`)"
-						/>
+							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
 					</template>
 				</dl>
 			</template>
@@ -28,18 +25,28 @@
 	</modal>
 </template>
 
-<script lang="ts" setup>
-import {useStore} from 'vuex'
-
-import Shortcut from '@/components/misc/shortcut.vue'
-import Message from '@/components/misc/message.vue'
-
+<script>
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
-import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
+import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message'
+import {KEYBOARD_SHORTCUTS} from './shortcuts'
 
-const store = useStore()
-function close() {
-	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+export default {
+	name: 'keyboard-shortcuts',
+	components: {
+		Message, 
+		Shortcut,
+	},
+	data() {
+		return {
+			shortcuts: KEYBOARD_SHORTCUTS,
+		}
+	},
+	methods: {
+		close() {
+			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+		},
+	},
 }
 </script>
 

src/components/misc/keyboard-shortcuts/shortcuts.js

@@ -1,24 +1,11 @@
-import {RouteLocation} from 'vue-router'
-
 import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
 
-interface Shortcut {
-	title: string
-	keys: string[]
-	combination?: 'then'
-}
-
-interface ShortcutGroup {
-	title: string
-	available?: (route: RouteLocation) => boolean
-	shortcuts: Shortcut[]
-}
-
-export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
+export const KEYBOARD_SHORTCUTS = [
 	{
 		title: 'keyboardShortcuts.general',
+		available: () => null,
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.toggleMenu',
@@ -42,7 +29,7 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 	},
 	{
 		title: 'keyboardShortcuts.list.title',
-		available: (route) => (route.name as string)?.startsWith('list.'),
+		available: (route) => route.name.startsWith('list.'),
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.list.switchToListView',
@@ -68,7 +55,13 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 	},
 	{
 		title: 'keyboardShortcuts.task.title',
-		available: (route) => route.name === 'task.detail',
+		available: (route) => [
+			'task.detail',
+			'task.list.detail',
+			'task.gantt.detail',
+			'task.kanban.detail',
+			'task.detail',
+		].includes(route.name),
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.assign',

src/components/misc/message.vue

@@ -1,35 +1,18 @@
 <template>
 	<div class="message-wrapper">
-		<div class="message" :class="[variant, textAlignClass]">
+		<div class="message" :class="variant">
 			<slot/>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {computed, PropType} from 'vue'
-
-const TEXT_ALIGN_MAP = Object.freeze({
-	left: '',
-	center: 'has-text-centered',
-	right: 'has-text-right',
-})
-
-type textAlignVariants = keyof typeof TEXT_ALIGN_MAP
-
-const props = defineProps({
+defineProps({
 	variant: {
 		type: String,
 		default: 'info',
 	},
-	textAlign: {
-		type: String as PropType<textAlignVariants>,
-		default: 'left',
-	},
 })
-
-const textAlignClass = computed(() => TEXT_ALIGN_MAP[props.textAlign])
-
 </script>
 
 <style lang="scss" scoped>

src/components/misc/no-auth-wrapper.vue

@@ -14,9 +14,6 @@
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
 					<api-config/>
-					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
-						{{ motd }}
-					</Message>
 					<slot/>
 				</div>
 				<legal/>
@@ -41,8 +38,8 @@ const store = useStore()
 const {t} = useI18n()
 
 const motd = computed(() => store.state.config.motd)
-
-const title = computed(() => t(route.meta?.title as string || ''))
+// @ts-ignore
+const title = computed(() => t(route.meta.title ?? ''))
 useTitle(() => title.value)
 </script>
 

src/components/misc/ready.vue

@@ -52,15 +52,9 @@ import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 import {useOnline} from '@/composables/useOnline'
 
-import {useRouter, useRoute} from 'vue-router'
-import {getAuthForRoute} from '@/router'
-
-const router = useRouter()
-const route = useRoute()
-
 const store = useStore()
 
-const ready = ref(false)
+const ready = computed(() => store.state.vikunjaReady)
 const online = useOnline()
 
 const error = ref('')
@@ -69,12 +63,7 @@ const showLoading = computed(() => !ready.value && error.value === '')
 async function load() {
 	try {
 		await store.dispatch('loadApp')
-		const redirectTo = getAuthForRoute(route)
-		if (typeof redirectTo !== 'undefined') {
-			await router.push(redirectTo)
-		}
-		ready.value = true
-	} catch (e: any) {
+	} catch(e: any) {
 		error.value = e
 	}
 }

src/components/misc/subscription.vue

@@ -1,51 +1,53 @@
 <template>
 	<x-button
-		v-if="isButton"
 		variant="secondary"
-		:icon="iconName"
+		:icon="icon"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:disabled="disabled || null"
+		v-if="isButton"
 	>
 		{{ buttonText }}
 	</x-button>
-	<BaseButton
-		v-else
+	<a
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
+		v-else
 	>
 		<span class="icon">
-			<icon :icon="iconName"/>
+			<icon :icon="icon"/>
 		</span>
 		{{ buttonText }}
-	</BaseButton>
+	</a>
 </template>
 
 <script lang="ts" setup>
 import {computed, shallowRef} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
 
 import {success} from '@/message'
 
-interface Props {
-  entity: string
-  entityId: number
-  subscription: SubscriptionModel
-  isButton?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	isButton: true,
+const props = defineProps({
+	entity: {
+		required: true,
+		type: String,
+	},
+	subscription: {
+		required: true,
+	},
+	entityId: {
+		required: true,
+	},
+	isButton: {
+		type: Boolean,
+		default: true,
+	},
 })
 
-const subscriptionEntity = computed<string>(() => props.subscription.entity)
-
 const emit = defineEmits(['change'])
 
 const subscriptionService = shallowRef(new SubscriptionService())
@@ -55,7 +57,7 @@ const tooltipText = computed(() => {
 	if (disabled.value) {
 		return t('task.subscription.subscribedThroughParent', {
 			entity: props.entity,
-			parent: subscriptionEntity.value,
+			parent: props.subscription.entity,
 		})
 	}
 
@@ -65,13 +67,13 @@ const tooltipText = computed(() => {
 })
 
 const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
+const icon = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
 const disabled = computed(() => {
 	if (props.subscription === null) {
 		return false
 	}
 
-	return subscriptionEntity.value !== props.entity
+	return props.subscription.entity !== props.entity
 })
 
 function changeSubscription() {

src/components/modal/modal.vue

@@ -1,5 +1,4 @@
 <template>
-	<!-- FIXME: transition should not be included in the modal -->
 	<transition name="modal">
 		<section
 			v-if="enabled"
@@ -22,13 +21,6 @@
 						'is-wide': wide
 					}"
 				>
-					<BaseButton
-						@click="$emit('close')"
-						class="close"
-					>
-						<icon icon="times"/>
-					</BaseButton>
-
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -61,8 +53,6 @@
 </template>
 
 <script>
-import BaseButton from '@/components/base/BaseButton.vue'
-
 export const TRANSITION_NAMES = {
 	MODAL: 'modal',
 	FADE: 'fade',
@@ -80,11 +70,6 @@ function validValue(values) {
 
 export default {
 	name: 'modal',
-
-	components: {
-		BaseButton,
-	},
-
 	mounted() {
 		document.addEventListener('keydown', (e) => {
 			// Close the model when escape is pressed
@@ -212,22 +197,17 @@ export default {
 	}
 }
 
-.close {
-	position: fixed;
-	top: 5px;
-	right: 26px;
-	color: var(--white);
-	font-size: 2rem;
 
-	@media screen and (max-width: $desktop) {
-		color: var(--dark);
-	}
+
+/* Transitions */
+
+.modal-enter,
+.modal-leave-active {
+  opacity: 0;
 }
-</style>
 
-<style lang="scss">
-// Close icon SVG uses currentColor, change the color to keep it visible
-.dark .task-detail-view-modal .close {
-	color: var(--grey-900);
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  transform: scale(0.9);
 }
 </style>

src/components/namespace/namespace-search.vue

@@ -13,7 +13,6 @@
 import {ref, computed} from 'vue'
 import {useStore} from 'vuex'
 import Multiselect from '@/components/input/multiselect.vue'
-import NamespaceModel from '@/models/namespace'
 
 const emit = defineEmits(['selected'])
 
@@ -26,7 +25,7 @@ function findNamespaces(newQuery: string) {
 	query.value = newQuery
 }
 
-function select(namespace: NamespaceModel) {
+function select(namespace) {
 	emit('selected', namespace)
 }
 </script>

src/components/namespace/namespace-settings-dropdown.vue

@@ -16,13 +16,13 @@
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
+				:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { namespaceId: namespace.id } }"
+				:to="{ name: 'list.create', params: { id: namespace.id } }"
 				icon="plus"
 			>
 				{{ $t('menu.newList') }}
@@ -34,7 +34,6 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
-				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="namespace"

src/components/sharing/linkSharing.vue

@@ -264,6 +264,4 @@ export default {
 .sharables-list:not(.card-content) {
   overflow-y: auto
 }
-
-@include modal-transition();
 </style>

src/components/sharing/userTeam.vue

@@ -365,7 +365,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-@include modal-transition();
-</style>

src/components/tasks/edit-task.vue

@@ -67,7 +67,7 @@
 
 		<router-link
 			class="mt-2 has-text-centered is-block"
-			:to="taskDetailRoute"
+			:to="{name: 'task.detail', params: {id: taskEditTask.id}}"
 		>
 			{{ $t('task.openDetail') }}
 		</router-link>
@@ -97,15 +97,6 @@ export default {
 			taskEditTask: TaskModel,
 		}
 	},
-	computed: {
-		taskDetailRoute() {
-			return {
-				name: 'task.detail',
-				params: { id: this.taskEditTask.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
-			}
-		},
-	},
 	components: {
 		ColorPicker,
 		Reminders,

src/components/tasks/mixins/taskList.js

@@ -0,0 +1,101 @@
+import TaskCollectionService from '@/services/taskCollection'
+
+// FIXME: merge with DEFAULT_PARAMS in filters.vue
+export const getDefaultParams = () => ({
+	sort_by: ['position', 'id'],
+	order_by: ['asc', 'desc'],
+	filter_by: ['done'],
+	filter_value: ['false'],
+	filter_comparator: ['equals'],
+	filter_concat: 'and',
+})
+
+/**
+ * This mixin provides a base set of methods and properties to get tasks on a list.
+ */
+export default {
+	data() {
+		return {
+			taskCollectionService: new TaskCollectionService(),
+			tasks: [],
+
+			currentPage: 0,
+
+			loadedList: null,
+
+			searchTerm: '',
+
+			showTaskFilter: false,
+			params: {...getDefaultParams()},
+		}
+	},
+	watch: {
+		// Only listen for query path changes
+		'$route.query': {
+			handler: 'loadTasksForPage',
+			immediate: true,
+		},
+		'$route.path': 'loadTasksOnSavedFilter',
+	},
+	methods: {
+		async loadTasks(
+			page,
+			search = '',
+			params = null,
+			forceLoading = false,
+		) {
+			// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
+			// FIXME: This is a bit hacky -> Cleanup.
+			if (
+				this.$route.name !== 'list.list' &&
+				this.$route.name !== 'list.table' &&
+				!forceLoading
+			) {
+				return
+			}
+
+			if (params === null) {
+				params = this.params
+			}
+
+			if (search !== '') {
+				params.s = search
+			}
+
+			const list = {listId: parseInt(this.$route.params.listId)}
+
+			const currentList = {
+				id: list.listId,
+				params,
+				search,
+				page,
+			}
+			if (JSON.stringify(currentList) === JSON.stringify(this.loadedList) && !forceLoading) {
+				return
+			}
+
+			this.tasks = []
+			this.tasks = await this.taskCollectionService.getAll(list, params, page)
+			this.currentPage = page
+			this.loadedList = JSON.parse(JSON.stringify(currentList))
+		},
+
+		loadTasksForPage(e) {
+			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
+			let page = Number(e.page)
+			if (typeof e.page === 'undefined') {
+				page = 1
+			}
+			let search = e.search
+			if (typeof e.search === 'undefined') {
+				search = ''
+			}
+			this.initTasks(page, search)
+		},
+		loadTasksOnSavedFilter() {
+			if (typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
+				this.loadTasks(1, '', null, true)
+			}
+		},
+	},
+}

src/components/tasks/partials/attachments.vue

@@ -34,7 +34,7 @@
 			>
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
-					<p class="attachment-info-meta">
+					<p class="collapses">
 						<i18n-t keypath="task.attachment.createdBy">
 							<span v-tooltip="formatDate(a.created)">
 								{{ formatDateSince(a.created) }}
@@ -289,6 +289,21 @@ export default {
             content: '·';
             padding: 0 .25rem;
           }
+
+          @media screen and (max-width: $mobile) {
+            &.collapses {
+              flex-direction: column;
+
+              > span:not(:last-child):after,
+              > a:not(:last-child):after {
+                display: none;
+              }
+
+              .user .username {
+                display: none;
+              }
+            }
+          }
         }
       }
     }
@@ -326,10 +341,6 @@ export default {
         height: auto;
         text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
-		
-		@media (prefers-reduced-motion: reduce) {
-          animation: none;
-		}
       }
 
       .hint {
@@ -346,35 +357,6 @@ export default {
   }
 }
 
-.attachment-info-meta {
-	display: flex;
-	align-items: center;
-	
-	:deep(.user) {
-		display: flex !important;
-		align-items: center;
-		margin: 0 .5rem;
-	}
-
-	@media screen and (max-width: $mobile) {
-		flex-direction: column;
-		align-items: flex-start;
-		
-		:deep(.user) {
-			margin: .5rem 0;
-		}
-
-		> span:not(:last-child):after,
-		> a:not(:last-child):after {
-			display: none;
-		}
-
-		.user .username {
-			display: none;
-		}
-	}
-}
-
 @keyframes bounce {
   from,
   20%,
@@ -400,6 +382,4 @@ export default {
     transform: translate3d(0, -4px, 0);
   }
 }
-
-@include modal-transition();
 </style>