tabSize: 4

.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
-  "tabWidth": 2,
+  "tabWidth": 4,
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none",

Makefile

@@ -1,2 +1,11 @@
 pretty:
 	npx prettier --write "./src/**/*.(ts|vue)"
+
+check:
+	npm run type-check && npm run lint
+
+local: check
+	npm run local
+
+deploy: check
+	npm run deploy

android/app/capacitor.build.gradle

@@ -9,9 +9,11 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-firebase-authentication')
     implementation project(':capacitor-dialog')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
 
 }

android/app/google-services.json

@@ -0,0 +1,40 @@
+{
+  "project_info": {
+    "project_number": "1048273547256",
+    "firebase_url": "https://contexted-f8b4e.firebaseio.com",
+    "project_id": "contexted-f8b4e",
+    "storage_bucket": "contexted-f8b4e.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:1048273547256:android:878e44df2e5f0b200f700d",
+        "android_client_info": {
+          "package_name": "com.contexted.app"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "1048273547256-mq8b1irdiovpblrdcuf8bb30is29rfm9.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyCJ-A3ziDw_2qMWnP2uXFDoY2O8DrUlXp8"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "1048273547256-mq8b1irdiovpblrdcuf8bb30is29rfm9.apps.googleusercontent.com",
+              "client_type": 3
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

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

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

android/capacitor.settings.gradle

@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-firebase-authentication'
+project(':capacitor-firebase-authentication').projectDir = new File('../node_modules/@capacitor-firebase/authentication/android')
+
 include ':capacitor-dialog'
 project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')
 
@@ -11,5 +14,8 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

android/variables.gradle

@@ -13,4 +13,5 @@ ext {
     androidxJunitVersion = '1.1.5'
     androidxEspressoCoreVersion = '3.5.1'
     cordovaAndroidVersion = '10.1.1'
+    rgcfaIncludeGoogle = true
 }

capacitor.config.ts

@@ -8,8 +8,15 @@ const config: CapacitorConfig = {
     androidScheme: 'https'
   },
   plugins: {
+    SplashScreen: {
+      backgroundColor: '#1E4BC4'
+    },
     Keyboard: {
       resize: 'native'
+    },
+    FirebaseAuthentication: {
+      skipNativeAuth: false,
+      providers: ['google.com', 'microsoft.com', 'github.com']
     }
   }
 }

ios/App/App.xcodeproj/project.pbxproj

@@ -15,6 +15,7 @@
 		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
 		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
 		A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; };
+		A9A186E62A2FB826009CBA16 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = A9A186E52A2FB826009CBA16 /* GoogleService-Info.plist */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -27,6 +28,7 @@
 		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
+		A9A186E52A2FB826009CBA16 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
 		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
 		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
@@ -74,6 +76,7 @@
 			isa = PBXGroup;
 			children = (
 				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				A9A186E52A2FB826009CBA16 /* GoogleService-Info.plist */,
 				504EC3071FED79650016851F /* AppDelegate.swift */,
 				504EC30B1FED79650016851F /* Main.storyboard */,
 				504EC30E1FED79650016851F /* Assets.xcassets */,
@@ -161,6 +164,7 @@
 				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
 				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
 				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+				A9A186E62A2FB826009CBA16 /* GoogleService-Info.plist in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -347,6 +351,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 5XQS3G6YV7;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -367,6 +372,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 5XQS3G6YV7;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "AppIcon-512@2x.png",
+      "filename" : "AppIcon-1024@2x.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"

ios/App/App/Assets.xcassets/Splash.imageset/Contents.json

@@ -1,23 +1,23 @@
 {
   "images" : [
     {
+      "filename" : "splash-landscape@1x.png",
       "idiom" : "universal",
-      "filename" : "splash-2732x2732-2.png",
       "scale" : "1x"
     },
     {
+      "filename" : "splash-landscape@2x.png",
       "idiom" : "universal",
-      "filename" : "splash-2732x2732-1.png",
       "scale" : "2x"
     },
     {
+      "filename" : "splash-landscape@3x.png",
       "idiom" : "universal",
-      "filename" : "splash-2732x2732.png",
       "scale" : "3x"
     }
   ],
   "info" : {
-    "version" : 1,
+    "author" : "xcode",
-    "author" : "xcode"
+    "version" : 1
   }
 }

ios/App/App/GoogleService-Info.plist

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CLIENT_ID</key>
+	<string>1048273547256-fes4qqj6po81ki21doggnst5ptjsa940.apps.googleusercontent.com</string>
+	<key>REVERSED_CLIENT_ID</key>
+	<string>com.googleusercontent.apps.1048273547256-fes4qqj6po81ki21doggnst5ptjsa940</string>
+	<key>ANDROID_CLIENT_ID</key>
+	<string>1048273547256-qq9j4hcvni377p8cva7v10u9us1pjrc9.apps.googleusercontent.com</string>
+	<key>API_KEY</key>
+	<string>AIzaSyCkN_Fm0wGcDZJJ6ltz5NHDvs9zPgKiSTQ</string>
+	<key>GCM_SENDER_ID</key>
+	<string>1048273547256</string>
+	<key>PLIST_VERSION</key>
+	<string>1</string>
+	<key>BUNDLE_ID</key>
+	<string>com.contexted.app</string>
+	<key>PROJECT_ID</key>
+	<string>contexted-f8b4e</string>
+	<key>STORAGE_BUCKET</key>
+	<string>contexted-f8b4e.appspot.com</string>
+	<key>IS_ADS_ENABLED</key>
+	<false></false>
+	<key>IS_ANALYTICS_ENABLED</key>
+	<false></false>
+	<key>IS_APPINVITE_ENABLED</key>
+	<true></true>
+	<key>IS_GCM_ENABLED</key>
+	<true></true>
+	<key>IS_SIGNIN_ENABLED</key>
+	<true></true>
+	<key>GOOGLE_APP_ID</key>
+	<string>1:1048273547256:ios:e57d78bd483100900f700d</string>
+	<key>DATABASE_URL</key>
+	<string>https://contexted-f8b4e.firebaseio.com</string>
+</dict>
+</plist>

ios/App/App/Info.plist

@@ -18,6 +18,19 @@
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
 	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Editor</string>
+			<key>CFBundleURLName</key>
+			<string>Firebase</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>com.googleusercontent.apps.1048273547256-fes4qqj6po81ki21doggnst5ptjsa940</string>
+			</array>
+		</dict>
+	</array>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>LSRequiresIPhoneOS</key>

ios/App/Podfile

@@ -11,17 +11,29 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorFirebaseAuthentication', :path => '../../node_modules/@capacitor-firebase/authentication'
   pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end
 
 target 'App' do
   capacitor_pods
   # Add your Pods here
+  pod 'CapacitorFirebaseAuthentication/Google', :path => '../../node_modules/@capacitor-firebase/authentication'
 end
 
 post_install do |installer|
   assertDeploymentTarget(installer)
+  installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+          if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
+              target.build_configurations.each do |config|
+                  config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+              end
+          end
+      end
+  end
 end

ios/App/Podfile.lock

@@ -1,24 +1,96 @@
 PODS:
+  - AppAuth (1.6.2):
+    - AppAuth/Core (= 1.6.2)
+    - AppAuth/ExternalUserAgent (= 1.6.2)
+  - AppAuth/Core (1.6.2)
+  - AppAuth/ExternalUserAgent (1.6.2):
+    - AppAuth/Core
   - Capacitor (5.0.4):
     - CapacitorCordova
   - CapacitorCordova (5.0.4)
   - CapacitorDialog (5.0.2):
     - Capacitor
+  - CapacitorFirebaseAuthentication (5.0.0):
+    - Capacitor
+    - CapacitorFirebaseAuthentication/Lite (= 5.0.0)
+    - FirebaseAuth (= 10.8.0)
+  - CapacitorFirebaseAuthentication/Google (5.0.0):
+    - Capacitor
+    - FirebaseAuth (= 10.8.0)
+    - GoogleSignIn (= 7.0.0)
+  - CapacitorFirebaseAuthentication/Lite (5.0.0):
+    - Capacitor
+    - FirebaseAuth (= 10.8.0)
   - CapacitorHaptics (5.0.2):
     - Capacitor
   - CapacitorKeyboard (5.0.2):
     - Capacitor
+  - CapacitorSplashScreen (5.0.2):
+    - Capacitor
   - CapacitorStatusBar (5.0.2):
     - Capacitor
+  - FirebaseAppCheckInterop (10.10.0)
+  - FirebaseAuth (10.8.0):
+    - FirebaseAppCheckInterop (~> 10.0)
+    - FirebaseCore (~> 10.0)
+    - GoogleUtilities/AppDelegateSwizzler (~> 7.8)
+    - GoogleUtilities/Environment (~> 7.8)
+    - GTMSessionFetcher/Core (< 4.0, >= 2.1)
+  - FirebaseCore (10.10.0):
+    - FirebaseCoreInternal (~> 10.0)
+    - GoogleUtilities/Environment (~> 7.8)
+    - GoogleUtilities/Logger (~> 7.8)
+  - FirebaseCoreInternal (10.10.0):
+    - "GoogleUtilities/NSData+zlib (~> 7.8)"
+  - GoogleSignIn (7.0.0):
+    - AppAuth (~> 1.5)
+    - GTMAppAuth (< 3.0, >= 1.3)
+    - GTMSessionFetcher/Core (< 4.0, >= 1.1)
+  - GoogleUtilities/AppDelegateSwizzler (7.11.1):
+    - GoogleUtilities/Environment
+    - GoogleUtilities/Logger
+    - GoogleUtilities/Network
+  - GoogleUtilities/Environment (7.11.1):
+    - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleUtilities/Logger (7.11.1):
+    - GoogleUtilities/Environment
+  - GoogleUtilities/Network (7.11.1):
+    - GoogleUtilities/Logger
+    - "GoogleUtilities/NSData+zlib"
+    - GoogleUtilities/Reachability
+  - "GoogleUtilities/NSData+zlib (7.11.1)"
+  - GoogleUtilities/Reachability (7.11.1):
+    - GoogleUtilities/Logger
+  - GTMAppAuth (2.0.0):
+    - AppAuth/Core (~> 1.6)
+    - GTMSessionFetcher/Core (< 4.0, >= 1.5)
+  - GTMSessionFetcher/Core (3.1.1)
+  - PromisesObjC (2.2.0)
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorDialog (from `../../node_modules/@capacitor/dialog`)"
+  - "CapacitorFirebaseAuthentication (from `../../node_modules/@capacitor-firebase/authentication`)"
+  - "CapacitorFirebaseAuthentication/Google (from `../../node_modules/@capacitor-firebase/authentication`)"
   - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)"
   - "CapacitorKeyboard (from `../../node_modules/@capacitor/keyboard`)"
+  - "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)"
   - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
 
+SPEC REPOS:
+  trunk:
+    - AppAuth
+    - FirebaseAppCheckInterop
+    - FirebaseAuth
+    - FirebaseCore
+    - FirebaseCoreInternal
+    - GoogleSignIn
+    - GoogleUtilities
+    - GTMAppAuth
+    - GTMSessionFetcher
+    - PromisesObjC
+
 EXTERNAL SOURCES:
   Capacitor:
     :path: "../../node_modules/@capacitor/ios"
@@ -26,21 +98,37 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/ios"
   CapacitorDialog:
     :path: "../../node_modules/@capacitor/dialog"
+  CapacitorFirebaseAuthentication:
+    :path: "../../node_modules/@capacitor-firebase/authentication"
   CapacitorHaptics:
     :path: "../../node_modules/@capacitor/haptics"
   CapacitorKeyboard:
     :path: "../../node_modules/@capacitor/keyboard"
+  CapacitorSplashScreen:
+    :path: "../../node_modules/@capacitor/splash-screen"
   CapacitorStatusBar:
     :path: "../../node_modules/@capacitor/status-bar"
 
 SPEC CHECKSUMS:
+  AppAuth: 3bb1d1cd9340bd09f5ed189fb00b1cc28e1e8570
   Capacitor: d3d4463573438b9fa65326d1f3549da6f4c21634
   CapacitorCordova: b1fe6bf1f36974a8e4a9044b342d22d49c0996d6
   CapacitorDialog: 01c49f7f4b37e7ad59e38fd317a6e5f006f23cdc
+  CapacitorFirebaseAuthentication: f2e3c2a7488b87078025855588670840f93a721e
   CapacitorHaptics: 864585542a435bd41eaabf7f30d9ff5ec03024d3
   CapacitorKeyboard: e628d4e66d621c69e449945ebabded17c5b9c2e8
+  CapacitorSplashScreen: bd2a056394ba0b8807e7bb3e746424f67c426e03
   CapacitorStatusBar: 48f2899f6846cc7d8431b251ebfc58e1c10e3d58
+  FirebaseAppCheckInterop: 7d3521f56872cf74a01792c0a095a30e054ff6ae
+  FirebaseAuth: 28e6fff787467cd15ab51c8c7aa904003b2f57aa
+  FirebaseCore: d027ff503d37edb78db98429b11f580a24a7df2a
+  FirebaseCoreInternal: 971029061d326000d65bfdc21f5502c75c8b0893
+  GoogleSignIn: b232380cf495a429b8095d3178a8d5855b42e842
+  GoogleUtilities: 9aa0ad5a7bc171f8bae016300bfcfa3fb8425749
+  GTMAppAuth: 99fb010047ba3973b7026e45393f51f27ab965ae
+  GTMSessionFetcher: e8647203b65cee28c5f73d0f473d096653945e72
+  PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
 
-PODFILE CHECKSUM: b469cdc64593e190968b9aa15066224f10938107
+PODFILE CHECKSUM: 9a19ff50409d024bca91266c62454036ebb27258
 
 COCOAPODS: 1.12.1

package.json

@@ -9,18 +9,20 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "local": "npm run build && firebase serve --only hosting",
     "deploy": "npm run build && firebase deploy --only hosting:contexted-v3"
   },
   "dependencies": {
+    "@capacitor-firebase/authentication": "^5.0.0",
     "@capacitor/android": "^5.0.4",
     "@capacitor/core": "^5.0.4",
     "@capacitor/dialog": "^5.0.2",
     "@capacitor/haptics": "^5.0.2",
     "@capacitor/ios": "^5.0.4",
     "@capacitor/keyboard": "^5.0.2",
+    "@capacitor/splash-screen": "^5.0.2",
     "@capacitor/status-bar": "^5.0.2",
     "@ckeditor/ckeditor5-autoformat": "^37.1.0",
     "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
@@ -40,7 +42,6 @@
     "@vueuse/core": "^10.1.2",
     "crypto-js": "^4.1.1",
     "cytoscape": "^3.25.0",
-    "daisyui": "^3.0.0",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.2",
     "file-saver": "^2.0.5",
@@ -52,8 +53,7 @@
     "marked": "^4.3.0",
     "shortid": "^2.2.16",
     "turndown": "^7.1.2",
-    "vue": "^3.3.4",
+    "vue": "^3.3.4"
-    "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.0.4",
@@ -72,6 +72,7 @@
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
+    "daisyui": "^4.4.19",
     "eslint": "^8.40.0",
     "eslint-plugin-vue": "^9.13.0",
     "firebase-tools": "^12.1.0",

src/App.vue

@@ -11,12 +11,13 @@ import {
 import { initializeSettings } from '@/composables/useSettings'
 import { windowIsMobile } from '@/utils/helpers'
 import SideBar from '@/components/SideBar.vue'
-import firebase from 'firebase/compat/app'
-import * as firebaseui from 'firebaseui'
 import { useWindowSize } from '@vueuse/core'
+import { SplashScreen } from '@capacitor/splash-screen'
 
 initializeSettings()
 
+onMounted(() => SplashScreen.hide())
+
 const sideBarCollapsed = ref<boolean>(windowIsMobile())
 
 const { width } = useWindowSize()
@@ -26,9 +27,9 @@ watch(width, () => (sideBarCollapsed.value = windowIsMobile()))
 // const ListView = defineAsyncComponent(() => import('@/components/ViewModes/ListView.vue'))
 // const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindmap.vue'))
 
-const firebaseAuthUI =
+// const firebaseAuthUI =
-  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+//   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
-provide('firebaseAuthUI', firebaseAuthUI)
+// provide('firebaseAuthUI', firebaseAuthUI)
 
 watch(
     [activeNotesSource, encryptionKey],
@@ -91,10 +92,10 @@ const topBarHeightWithSafeArea = computed(() => `calc(${topBarHeight}px + var(--
             />
         </Transition>
         <main
-      class="transition[margin-left] z-10 mx-auto flex h-full w-full max-w-app flex-col overflow-y-auto border-x-[1px] bg-white pb-[var(--safe-area-bottom)] duration-200 ease-out"
+            class="transition[margin-left] z-10 mx-auto flex h-full w-full max-w-app flex-col overflow-y-auto bg-white pb-[var(--safe-area-bottom)] duration-200 ease-out sm:border-x-[1px]"
             :class="sideBarCollapsed ? 'ml-0' : 'sm:ml-sidebar'"
         >
-      <div class="flex h-full w-full px-10 py-6 max-sm:px-4 max-sm:py-3">
+            <div class="flex w-full flex-grow px-10 py-6 max-sm:px-4 max-sm:py-3">
                 <template v-if="!loading">
                     <Note
                         v-if="activeViewMode.name === 'Note' && activeNote"
@@ -110,12 +111,12 @@ const topBarHeightWithSafeArea = computed(() => `calc(${topBarHeight}px + var(--
             </div>
         </main>
     </div>
-  <UIModal :open="passphraseRequired" :persistent="true">
+    <UIModal :open="passphraseRequired" persistent>
         <template #title>Enter your passphrase</template>
         <template #default="{ close }">
             <div>
-        Your notes are encrypted. Please enter your encryption key passphrase to decrypt your cloud
+                Your notes are encrypted. Please enter your encryption key passphrase to decrypt
-        notes.
+                your cloud notes.
             </div>
             <form @submit.prevent="submitPassphrase(close)">
                 <UIInputText

src/ckeditor/CKEditor.ts

@@ -124,7 +124,9 @@ export default defineComponent({
             const [major] = CKEDITOR_VERSION.split('.').map(Number)
 
             if (major < 37) {
-        console.warn('The <CKEditor> component requires using CKEditor 5 in version 37 or higher.')
+                console.warn(
+                    'The <CKEditor> component requires using CKEditor 5 in version 37 or higher.'
+                )
             }
         } else {
             console.warn('Cannot find the "CKEDITOR_VERSION" in the "window" scope.')

src/ckeditor/ContextedPlugin.ts

@@ -116,10 +116,16 @@ export default class ContextedLinkEditing extends Plugin {
             }
             model.enqueueChange((writer) => {
                 const rangesToFormat = format.map((array) =>
-          model.createRange(range.start.getShiftedBy(array[0]), range.start.getShiftedBy(array[1]))
+                    model.createRange(
+                        range.start.getShiftedBy(array[0]),
+                        range.start.getShiftedBy(array[1])
+                    )
                 )
 
-        const validRanges = editor.model.schema.getValidRanges(rangesToFormat, 'contextedLink')
+                const validRanges = editor.model.schema.getValidRanges(
+                    rangesToFormat,
+                    'contextedLink'
+                )
                 for (const range of validRanges) {
                     for (const item of range.getItems()) {
                         if ((item as any).data) {
@@ -145,8 +151,8 @@ export default class ContextedLinkEditing extends Plugin {
                 }
                 const keyCodes = [...keyCodesConfirm, ...keyCodesCycle]
                 const selection = editor.model.document.selection
-        const selectionInContextedLink = ['contextedLink', 'autocomplete'].some((attribute) =>
+                const selectionInContextedLink = ['contextedLink', 'autocomplete'].some(
-          selection.hasAttribute(attribute)
+                    (attribute) => selection.hasAttribute(attribute)
                 )
                 if (selectionInContextedLink && keyCodes.includes(keyCode)) {
                     if (selection.hasAttribute('contextedLink')) {
@@ -216,7 +222,10 @@ function fireAutocompleteEvent(editor: any, show: boolean, autocompleteNode?: an
         event = {
             position: getNodePosition(
                 editor,
-        editor.model.createPositionFromPath(autocompleteNode.root, autocompleteNode.getPath())
+                editor.model.createPositionFromPath(
+                    autocompleteNode.root,
+                    autocompleteNode.getPath()
+                )
             ),
             autocompleteText: autocompleteNode.data,
             domElement,

src/components/Auth.vue

@@ -2,23 +2,17 @@
 import firebase from 'firebase/compat/app'
 import 'firebase/compat/auth'
 import 'firebaseui/dist/firebaseui.css'
-import {
+import * as firebaseui from 'firebaseui'
-  getAuth,
+import { FirebaseAuthentication } from '@capacitor-firebase/authentication'
-  signInWithRedirect,
+import { getAuth, GoogleAuthProvider, signInWithCredential } from 'firebase/auth'
-  GoogleAuthProvider,
-  GithubAuthProvider,
-  OAuthProvider
-} from 'firebase/auth'
-
-// const props = defineProps<{
-//   authenticating?: boolean
-// }>()
 
 const emit = defineEmits<{
     signedIn: [authResult: any]
 }>()
 
-const ui: any = inject('firebaseAuthUI')
+// const ui: any = inject('firebaseAuthUI')
+const auth = getAuth()
+const firebaseAuthUI = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth)
 
 const uiConfig = {
     signInOptions: [
@@ -48,50 +42,93 @@ const uiConfig = {
 }
 // onMounted(() => ui.start('#auth', uiConfig))
 
-type AuthProvider = 'google' | 'github' | 'microsoft'
+interface Provider {
-const providers: { [key in AuthProvider]: any | (() => any) } = {
+    name: 'google' | 'microsoft' | 'github'
-  google: new GoogleAuthProvider(),
+    icon: string
-  github: () => {
+    signin: () => Promise<void>
-    const provider = new GithubAuthProvider()
+    // (options?: SignInOptions) => Promise<SignInResult>
-    provider.addScope('user:email')
-    return provider
-  },
-  microsoft: new OAuthProvider('microsoft.com')
 }
 
-const signIn = (providerName: AuthProvider) => {
+const providers: Provider[] = [
-  const auth = getAuth()
+    {
-  const provider =
+        name: 'google',
-    typeof providers[providerName] === 'function'
+        icon: 'fa-brands fa-google',
-      ? providers[providerName]()
+        signin: async () => {
-      : providers[providerName]
+            const result = await FirebaseAuthentication.signInWithGoogle({
-  signInWithRedirect(auth, provider)
+                mode: 'redirect'
+            })
+            const credential = GoogleAuthProvider.credential(result.credential?.idToken)
+            await signInWithCredential(auth, credential)
+        }
+    }
+    // {
+    //   name: 'microsoft',
+    //   icon: 'fa-brands fa-microsoft',
+    //   signin: async () => {
+    //     const result = await FirebaseAuthentication.signInWithMicrosoft({
+    //       mode: 'redirect'
+    //     })
+    //     const provider = new OAuthProvider('microsoft.com')
+    //     const credential = provider.credential({
+    //       idToken: result.credential?.idToken,
+    //       rawNonce: result.credential?.nonce
+    //     })
+    //     await signInWithCredential(auth, credential)
+    //   }
+    // },
+    // {
+    //   name: 'github',
+    //   icon: 'fa-brands fa-github',
+    //   signin: async () => {
+    //     const result = await FirebaseAuthentication.signInWithGithub({
+    //       mode: 'redirect'
+    //     })
+    //     const provider = new OAuthProvider('github.com')
+    //     const credential = provider.credential({
+    //       idToken: result.credential?.idToken,
+    //       rawNonce: result.credential?.nonce
+    //     })
+    //     await signInWithCredential(auth, credential)
+    //   }
+    // }
+]
+// type Provider = (typeof providers)[number]
+const signInWithProvider = async (provider: Provider) => {
+    provider.signin()
 }
 
-const authenticatingWithEmail = ref(false)
+const signingInWithEmail = ref(false)
 const signInWithEmail = () => {
-  authenticatingWithEmail.value = true
+    firebaseAuthUI.start('#auth', uiConfig)
-  ui.start('#auth', uiConfig)
+    signingInWithEmail.value = true
 }
 </script>
 <template>
-  <div class="flex flex-col items-center" v-if="!authenticatingWithEmail">
+    <div class="space-y-2">
-    <UIButton class="mx-auto w-[200px] bg-red-500 text-center" @click="signIn('google')">
+        <template v-if="!signingInWithEmail">
-      Sign in with Google
+            <UIButton
+                class="mx-auto !block w-[225px] max-sm:w-full"
+                size="sm"
+                @click="signInWithProvider(provider)"
+                v-for="provider in providers"
+                :key="provider.name"
+            >
+                <i class="fa-fw mr-2" :class="provider.icon"></i>
+                Sign in with {{ provider.name }}
             </UIButton>
-    <UIButton class="mx-auto w-[200px] bg-blue-300 text-center" @click="signIn('github')">
+            <UIButton
-      Sign in with Github
+                class="mx-auto !block w-[225px] max-sm:w-full"
+                size="sm"
+                @click="signInWithEmail"
+            >
+                <i class="fa-fw fa-regular fa-envelope mr-2"></i>
+                Sign in with email
             </UIButton>
-    <UIButton class="mx-auto w-[200px] bg-blue-300 text-center" @click="signIn('microsoft')">
+        </template>
-      Sign in with Microsoft
-    </UIButton>
-    <UIButton class="mx-auto w-[200px] bg-blue-300 text-center" @click="signInWithEmail">
-      Sign in with e-mail
-    </UIButton>
-  </div>
         <div id="auth"></div>
         <!-- <progress
     v-show="props.authenticating"
     class="dui-progress dui-progress-primary w-full"
   ></progress> -->
+    </div>
 </template>

src/components/Note/Autocomplete.vue

@@ -45,7 +45,7 @@ const handleKeypress = (event: { [key: string]: number }) => {
 defineExpose({ handleKeypress })
 </script>
 <template>
-  <UIMenu class="border-[1px] p-2 text-[0.875rem] text-black shadow-md" :compact="true">
+    <UIMenu class="border-[1px] p-2 text-[0.875rem] text-black shadow-md" compact>
         <UIMenuItem :active="!activeResult" @click="emit('createLink', props.autocompleteText)">
             <span class="flex-grow">{{ props.autocompleteText }}</span>
             <i class="fas fa-plus-circle ml-auto text-white" />

src/components/Note/NoteEditor.vue

@@ -15,8 +15,7 @@ import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote, addNote } from '@/composables/useNotes'
 import Autocomplete from '@/components/Note/Autocomplete.vue'
-import { Haptics, ImpactStyle } from '@capacitor/haptics'
+import { vibrate } from '@/composables/useHaptics'
-
 const props = defineProps<{ note: Note }>()
 
 const emit = defineEmits<{
@@ -68,7 +67,7 @@ const handleClick = async ({ data }: { data: any }) => {
     let note: BaseNote | Note | undefined = getNoteByTitle(noteTitle)
     if (!note) note = addNote(noteTitle, '')
     setActiveNote(note.id)
-  await Haptics.impact({ style: ImpactStyle.Light })
+    await vibrate()
 }
 
 const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null)

src/components/Note/NoteReferences.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
     <UIMenu class="mt-3 rounded-xl border-[1px] px-3 py-3" v-if="props.references.length > 0">
-    <UIMenuItem :title="true">
+        <UIMenuItem title>
             <span>References</span>
             <UIBadge variant="outline" class="ml-2">{{ props.references.length }}</UIBadge>
         </UIMenuItem>

src/components/Note/NoteToolbar.vue

@@ -2,6 +2,7 @@
 import { Capacitor } from '@capacitor/core'
 import { Dialog } from '@capacitor/dialog'
 import type { ConfirmOptions } from '@capacitor/dialog'
+import { vibrate } from '@/composables/useHaptics'
 
 const props = defineProps<{
     note: Note
@@ -37,7 +38,7 @@ const confirmModals: ModalOptions[] = [
 ]
 
 const emit = defineEmits<{
-  execute: [actionType: ActionKey, close?: () => void]
+    execute: [actionType: ActionKey, close?: () => Promise<void>]
 }>()
 
 const openModal = async (open: () => void, modal: ModalOptions) => {
@@ -57,7 +58,12 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
         <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
             <UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
                 <template #activator="{ open }">
-          <UIButton size="sm" @click="openModal(open, confirmModal)" :join="true">
+                    <UIButton
+                        size="sm"
+                        @click="openModal(open, confirmModal)"
+                        @mousedown="vibrate"
+                        join
+                    >
                         <i :class="confirmModal.icon" />
                     </UIButton>
                 </template>
@@ -68,7 +74,11 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
                 <template #default>{{ confirmModal.confirmOptions.message }}</template>
                 <template #actions="{ close }">
                     <UIButton size="sm" @click="close">Cancel</UIButton>
-          <UIButton size="sm" color="primary" @click="emit('execute', confirmModal.key, close)">
+                    <UIButton
+                        size="sm"
+                        color="primary"
+                        @click="emit('execute', confirmModal.key, close)"
+                    >
                         {{ confirmModal.confirmOptions.okButtonTitle }}
                     </UIButton>
                 </template>

src/components/Search/SearchBar.vue

@@ -42,7 +42,8 @@ const handleKeydown = (event: KeyboardEvent) => {
         if (index < 0) index = results.value.length - 1
         activeResult.value = results.value[index]
         const element = resultsRefs.value[index].$el
-    if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) element.scrollIntoView({ block: 'nearest' })
+        if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code))
+            element.scrollIntoView({ block: 'nearest' })
     } else if (code === 'Enter' && activeResult.value) {
         goToNote(activeResult.value)
     } else if (code === 'Escape' && queryElem.value) {
@@ -66,7 +67,7 @@ const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
             @keydown="handleKeydown"
         />
         <div class="z-1000 absolute left-0 right-0 top-[100%]" v-if="active">
-      <UIMenu :compact="true" class="mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
+            <UIMenu compact class="mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
                 <div class="max-h-[320px] w-full overflow-y-auto">
                     <template v-if="results.length > 0">
                         <SearchResult

src/components/Skeleton/SkeletonSidebarItem.vue

@@ -8,7 +8,11 @@ const props = withDefaults(
 </script>
 <template>
     <div class="flex w-full animate-pulse flex-col">
-    <div class="mt-1 h-[1.35rem] w-full rounded bg-secondary" v-for="i in props.n" :key="i"></div>
+        <div
+            class="mt-1 h-[1.35rem] w-full rounded bg-secondary"
+            v-for="i in props.n"
+            :key="i"
+        ></div>
     </div>
 </template>
 <style scoped>

src/components/TopBar.vue

@@ -23,9 +23,8 @@ const searchActive = ref<boolean>(false)
 
 // const authUI: any = inject('firebaseAuthUI')
 // const authPending = ref<boolean>(authUI.isPendingRedirect())
-// const authPending = ref(false)
 
-const handleSignIn = async (close: () => Promise<boolean>) => {
+const handleSignIn = async (close: () => Promise<void>) => {
     await close()
     // authPending.value = false
 }
@@ -61,7 +60,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
                     >
                         <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
                     </UIButton>
-          <UIModal v-if="(initialized && !user)">
+                    <UIModal v-if="initialized && !user">
                         <template #activator="{ open }">
                             <UIButton
                                 size="sm"
@@ -72,7 +71,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
                                 Sign in
                             </UIButton>
                         </template>
-            <template #title>{{ 'Sign in' }}</template>
+                        <template #title>Sign in</template>
                         <template #default="{ close }">
                             <Auth @signedIn="handleSignIn(close)" />
                         </template>
@@ -87,19 +86,23 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
         </div>
     </div>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 #logo {
-  @apply cursor-pointer transition-all duration-200 hover:text-primary;
+    @apply cursor-pointer transition-all duration-200 active:text-primary;
 }
 @media (hover: hover) and (pointer: fine) {
     #logo:hover {
         text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
+        @apply text-primary;
     }
 }
 #logo:active {
     text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
 }
 .topbar-button {
+    &:active {
+        @apply border-white bg-white text-primary;
+    }
     @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
 }
 

src/components/TopBar/Hamburger.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
 </script>
 <template>
     <label
-    class="dui-btn-ghost dui-btn-sm dui-btn-circle dui-btn relative inline-grid cursor-pointer select-none place-content-center"
+        class="dui-btn-ghost dui-btn dui-btn-sm dui-btn-circle relative inline-grid cursor-pointer select-none place-content-center"
     >
         <input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
         <svg

src/components/TopBar/Settings.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import { OnClickOutside } from '@vueuse/components'
+import { vibrate } from '@/composables/useHaptics'
 </script>
 <template>
     <OnClickOutside>
         <UIDropdown class="search-active-hide">
             <template #activator>
-        <UIButton :dropdown="true" size="sm" variant="outline" class="topbar-button text-white">
+                <UIButton
+                    dropdown
+                    size="sm"
+                    variant="outline"
+                    class="topbar-button text-white"
+                    @mousedown="vibrate"
+                >
                     <i class="fa-fw fa-solid fa-user-gear" />
                 </UIButton>
             </template>
@@ -17,3 +24,11 @@ import { OnClickOutside } from '@vueuse/components'
         </UIDropdown>
     </OnClickOutside>
 </template>
+<style scoped lang="scss">
+.topbar-button {
+    &:focus-within {
+        @apply border-white bg-white text-primary;
+    }
+    @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
+}
+</style>

src/components/TopBar/Settings/AccountSettings.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { sendEmailVerification } from 'firebase/auth'
 import { user } from '@/composables/useFirebase'
 import { encryptionKey, enableEncryption, disableEncryption } from '@/composables/useEncryption'
 import { notes } from '@/composables/useNotes'
@@ -9,12 +10,10 @@ import FileSaver from 'file-saver'
 const verificationEmailSent = ref(false)
 const sendVerificationMail = () => {
     if (!user.value) throw Error("User doesn't exist, can't send verification email")
-  user.value.sendEmailVerification()
+    sendEmailVerification(user.value)
     verificationEmailSent.value = true
 }
 
-console.log(user.value)
-
 const exportNotes = async () => {
     const zip = new JSZip()
     notes.value.forEach((note) => {
@@ -68,21 +67,22 @@ const toggleEncryption = async () => {
                 <UICard>
                     <template #title>Account</template>
                     <template #default>
-            <div class="w-full flex-row sm:flex" v-if="user?.email">
+                        <template v-if="user?.email">
+                            <div class="w-full flex-row sm:flex">
                                 <div class="font-bold sm:w-4/12">E-mail address</div>
-              <div>{{ user?.email }}</div>
+                                <div>{{ user.email }}</div>
                             </div>
-            <div class="w-full flex-row sm:flex" v-if="user?.email">
+                            <div class="w-full flex-row sm:flex">
                                 <div class="font-bold sm:w-4/12">Account status</div>
                                 <div class="col-auto">
-                <UIBadge :color="user?.emailVerified ? 'success' : 'warning'">
+                                    <UIBadge :color="user.emailVerified ? 'success' : 'warning'">
-                  {{ user?.emailVerified ? 'Verified' : 'Not yet verified' }}
+                                        {{ user.emailVerified ? 'Verified' : 'Not yet verified' }}
                                     </UIBadge>
                                     <UIButton
                                         size="sm"
                                         class="ml-2"
                                         @click="sendVerificationMail"
-                  v-if="!user?.emailVerified"
+                                        v-if="!user.emailVerified"
                                         :disabled="verificationEmailSent"
                                     >
                                         {{
@@ -93,10 +93,16 @@ const toggleEncryption = async () => {
                                     </UIButton>
                                 </div>
                             </div>
+                        </template>
                         <div class="w-full flex-row sm:flex">
                             <div class="font-bold sm:w-4/12">Account creation date</div>
                             <div>
-                {{ format(Date.parse(user?.metadata?.creationTime || ''), 'dd/MM/yyyy') }}
+                                {{
+                                    format(
+                                        Date.parse(user?.metadata?.creationTime || ''),
+                                        'dd/MM/yyyy'
+                                    )
+                                }}
                             </div>
                         </div>
                     </template>
@@ -107,15 +113,19 @@ const toggleEncryption = async () => {
                         <div class="items-top w-full flex-row sm:flex">
                             <div class="font-bold sm:w-4/12">Export notes</div>
                             <UIButton size="sm" @click="exportNotes">
-                <i class="fa-fw fa-solid fa-file-export"></i>
+                                <i class="fa-fw fa-solid fa-file-export mr-2"></i>
                                 Export notes
                             </UIButton>
                         </div>
                         <div class="items-top w-full flex-row sm:flex sm:flex-grow">
                             <div class="flex-shrink-0 font-bold sm:w-4/12">Delete account</div>
                             <div>
-                <UIButton size="sm" color="error" @click="showDeleteAccountDialog = true">
+                                <UIButton
-                  <i class="fa-fw fa-solid fa-trash"></i>
+                                    size="sm"
+                                    color="error"
+                                    @click="showDeleteAccountDialog = true"
+                                >
+                                    <i class="fa-fw fa-solid fa-trash mr-2"></i>
                                     Delete account
                                 </UIButton>
                                 <UIAlert
@@ -125,14 +135,23 @@ const toggleEncryption = async () => {
                                     v-if="showDeleteAccountDialog"
                                 >
                                     <div>
-                    Are you sure you want to delete your Contexted account? This action cannot be
+                                        Are you sure you want to delete your Contexted account? This
-                    undone!
+                                        action cannot be undone!
                                     </div>
                                     <div class="flex flex-wrap gap-2">
-                    <UIButton size="sm" variant="outline" color="primary" @click="deleteAccount">
+                                        <UIButton
+                                            size="sm"
+                                            variant="outline"
+                                            color="primary"
+                                            @click="deleteAccount"
+                                        >
                                             Delete account
                                         </UIButton>
-                    <UIButton size="sm" variant="outline" @click="showDeleteAccountDialog = false">
+                                        <UIButton
+                                            size="sm"
+                                            variant="outline"
+                                            @click="showDeleteAccountDialog = false"
+                                        >
                                             Cancel
                                         </UIButton>
                                     </div>
@@ -140,7 +159,9 @@ const toggleEncryption = async () => {
                             </div>
                         </div>
                         <div class="items-top w-full flex-row sm:flex">
-              <div class="flex-shrink-0 font-bold sm:w-4/12">End-to-end encryption</div>
+                            <div class="flex-shrink-0 font-bold sm:w-4/12">
+                                End-to-end encryption
+                            </div>
                             <div class="w-full">
                                 <template v-if="!encryptionEnabled">
                                     <UIButton
@@ -158,11 +179,16 @@ const toggleEncryption = async () => {
                                         @click="showEncryptionDialog = true"
                                         v-if="showEncryptionDialog === false"
                                     >
-                    <i class="fa-fw fa-solid fa-key"></i>
+                                        <i class="fa-fw fa-solid fa-key mr-2"></i>
                                         Disable end-to-end encryption
                                     </UIButton>
                                 </template>
-                <UIAlert color="info" density="compact" class="text-sm" v-if="showEncryptionDialog">
+                                <UIAlert
+                                    color="info"
+                                    density="compact"
+                                    class="text-sm"
+                                    v-if="showEncryptionDialog"
+                                >
                                     <div class="w-full space-y-2">
                                         <div>
                                             Enter your passphrase to
@@ -176,7 +202,11 @@ const toggleEncryption = async () => {
                                             v-model="passphrase"
                                             class="w-full !max-w-full"
                                         />
-                    <UIAlert density="compact" color="error" v-if="toggleEncryptionError">
+                                        <UIAlert
+                                            density="compact"
+                                            color="error"
+                                            v-if="toggleEncryptionError"
+                                        >
                                             <i class="fa-solid fa-triangle-exclamation"></i>
                                             {{ toggleEncryptionError }}
                                         </UIAlert>
@@ -188,9 +218,16 @@ const toggleEncryption = async () => {
                                                 color="primary"
                                                 @click="toggleEncryption"
                                             >
-                        {{ encryptionEnabled ? 'Disable' : 'Enable' }} encryption
+                                                {{
+                                                    encryptionEnabled ? 'Disable' : 'Enable'
+                                                }}
+                                                encryption
                                             </UIButton>
-                      <UIButton size="sm" variant="outline" @click="showEncryptionDialog = false">
+                                            <UIButton
+                                                size="sm"
+                                                variant="outline"
+                                                @click="showEncryptionDialog = false"
+                                            >
                                                 Cancel
                                             </UIButton>
                                         </div>

src/components/TopBar/Settings/SignOut.vue

@@ -3,7 +3,7 @@ import { preferredNotesSource } from '@/composables/useSettings'
 import { signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { clearEncryptionKeys } from '@/composables/useEncryption'
 
-const signOut = async (close: () => Promise<boolean>) => {
+const signOut = async (close: () => Promise<void>) => {
     await close()
     await firebaseSignOut()
     preferredNotesSource.value = null

src/components/ViewModes/ListView.vue

@@ -34,11 +34,14 @@ const deleteSelectedNotes = (closeModal: () => void) => {
         <div class="flex items-center gap-2">
             <div class="flex items-center">
                 <span class="whitespace-nowrap">
-          {{ notesWithReferences.length }} {{ notesWithReferences.length === 1 ? 'note' : 'notes' }}
+                    {{ notesWithReferences.length }}
+                    {{ notesWithReferences.length === 1 ? 'note' : 'notes' }}
                 </span>
                 <template v-if="countSelectedNotes > 0">
                     <span class="mx-1">|</span>
-          <div class="whitespace-nowrap font-semibold">{{ countSelectedNotes }} selected</div>
+                    <div class="whitespace-nowrap font-semibold">
+                        {{ countSelectedNotes }} selected
+                    </div>
                 </template>
             </div>
             <UIModal v-if="countSelectedNotes > 0">

src/components/ViewModes/Mindmap.vue

@@ -27,7 +27,9 @@ const renderMindmap = () => {
     const elements = {
         nodes: nodes.value,
         edges: [
-      ...links.value.map((link) => ({ data: { id: `${link.source}-${link.target}`, ...link } }))
+            ...links.value.map((link) => ({
+                data: { id: `${link.source}-${link.target}`, ...link }
+            }))
         ]
     }
     const cy = cytoscape({
@@ -195,11 +197,13 @@ interface Mindmap {
 }
 const selectedMindmap = ref<Mindmap>()
 const mindmaps = computed<Mindmap[]>(() => {
-  const mindmaps = Object.entries(notesRelations.value).reduce((mindmaps, [noteId, relations]) => {
+    const mindmaps = Object.entries(notesRelations.value).reduce(
+        (mindmaps, [noteId, relations]) => {
             const atomicMindmap = [noteId, ...relations.to, ...relations.from]
             const indices = mindmaps
                 .filter(
-        (mindmap) => [...mindmap].filter((noteId) => atomicMindmap.includes(noteId)).length > 0
+                    (mindmap) =>
+                        [...mindmap].filter((noteId) => atomicMindmap.includes(noteId)).length > 0
                 )
                 .map((mindmap) => mindmaps.indexOf(mindmap))
             if (indices.length > 0) {
@@ -218,13 +222,16 @@ const mindmaps = computed<Mindmap[]>(() => {
                 mindmaps.push(atomicMindmap)
             }
             return mindmaps
-  }, [] as string[][])
+        },
+        [] as string[][]
+    )
     return mindmaps
         .filter((mindmap) => mindmap.length > 1)
         .sort((a, b) => b.length - a.length)
         .sort((a, b) => {
             return (
-        Number(b.includes(rootNote.value?.id || '')) - Number(a.includes(rootNote.value?.id || ''))
+                Number(b.includes(rootNote.value?.id || '')) -
+                Number(a.includes(rootNote.value?.id || ''))
             )
         })
         .slice(0, 5)
@@ -273,6 +280,7 @@ const links = computed(() => {
 </script>
 <template>
     <div class="flex h-full flex-grow flex-col">
+        <div class="flex">
             <UITabs>
                 <UITab
                     v-for="mindmap in mindmaps"
@@ -284,6 +292,7 @@ const links = computed(() => {
                     {{ mindmap.notes.length }} notes
                 </UITab>
             </UITabs>
+        </div>
         <div id="mindmap" ref="mindmapElement" class="h-full"></div>
     </div>
 </template>

src/components/ViewModes/Note.vue

@@ -30,13 +30,14 @@ const updateNoteContent = (content: string) => {
 
 const references = computed<Note[]>(() => getNoteReferences(props.note))
 
-const handleAction = async (action: string, closeModal: () => Promise<Boolean>) => {
+const handleAction = async (action: 'delete' | 'setRoot', closeModal?: () => Promise<void>) => {
-  if (action === 'delete') {
+    switch (action) {
+        case 'delete':
             if (closeModal) await closeModal()
             setActiveNote(rootNote.value?.id)
             deleteNote(props.note.id)
-  }
+            break
-  if (action === 'setRoot') {
+        case 'setRoot':
             setRootNote(props.note.id)
             if (closeModal) closeModal()
     }
@@ -50,7 +51,11 @@ const handleAction = async (action: string, closeModal: () => Promise<Boolean>)
                     class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
                     v-if="props.note.isRoot"
                 ></i>
-        <input type="text" class="w-full bg-transparent pb-1 outline-none" v-model="noteTitle" />
+                <input
+                    type="text"
+                    class="w-full bg-transparent pb-1 outline-none"
+                    v-model="noteTitle"
+                />
             </template>
         </NoteToolbar>
         <NoteEditor

src/components/ui/UIButton.vue

@@ -51,7 +51,12 @@ const styleClass = computed(() => {
     >
         <slot></slot>
     </label>
-  <button type="button" class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
+    <button
+        type="button"
+        class="dui-btn inline-block h-auto max-w-full truncate px-3 py-2 duration-0"
+        :class="styleClass"
+        v-else
+    >
         <slot></slot>
     </button>
 </template>

src/components/ui/UIDropdown.vue

@@ -3,7 +3,7 @@
         <slot name="activator" tabindex="0"></slot>
         <ul
             tabindex="0"
-      class="dui-menu-compact dui-dropdown-content dui-menu rounded-box mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
+            class="dui-menu-compact dui-dropdown-content dui-menu mt-1 w-52 rounded-box bg-base-100 p-2 text-base-content shadow"
         >
             <slot name="items"></slot>
         </ul>

src/components/ui/UIInputCheckbox.vue

@@ -28,7 +28,7 @@ const styleClass = computed(() => {
         type="checkbox"
         class="dui-checkbox dui-checkbox-sm border-secondary"
         :class="styleClass"
-    :checked="props.modelValue"
+        :checked="props.modelValue || props.checked"
         @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
         :disabled="props.disabled"
     />

src/components/ui/UIMenuItem.vue

@@ -16,7 +16,9 @@ const styleClass = computed(() => {
 </script>
 <template>
     <li :class="styleClass">
-    <span class="flex items-center" v-if="props.title"><slot></slot></span>
+        <span class="flex items-center" v-if="props.title">
+            <slot></slot>
+        </span>
         <a
             class="flex w-full rounded-md"
             :class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
@@ -26,3 +28,8 @@ const styleClass = computed(() => {
         </a>
     </li>
 </template>
+<style scoped>
+.dui-active {
+    @apply bg-primary;
+}
+</style>

src/components/ui/UIModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
-import { Haptics, ImpactStyle } from '@capacitor/haptics'
+import { vibrate } from '@/composables/useHaptics'
 
 const props = withDefaults(
     defineProps<{
@@ -20,9 +20,8 @@ const show = ref<boolean>(false)
 watch(
     () => props.open,
     () => {
-    if (show.value) {
+        if (show.value) vibrate()
-      Haptics.impact({ style: ImpactStyle.Light })
+
-    }
         show.value = props.open
     },
     { immediate: true }
@@ -32,9 +31,9 @@ const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)
 
 const open = () => (show.value = true)
-const close = (): Promise<boolean> => {
+const close = (): Promise<void> => {
     return new Promise((resolve) => {
-    modal.value?.addEventListener('transitionend', () => resolve(true))
+        modal.value?.addEventListener('transitionend', () => resolve())
         show.value = false
     })
 }

src/components/ui/UITab.vue

@@ -6,12 +6,12 @@ interface Props {
 const props = defineProps<Props>()
 
 const styleClass = computed(() => {
-  const activeClass = props.active && 'dui-tab-active !border-primary text-primary'
+    const activeClass = props.active && 'dui-tab-active font-bold !border-primary text-primary'
     return [activeClass]
 })
 </script>
 <template>
-  <a class="dui-tab-bordered dui-tab-lifted dui-tab dui-tab-md" :class="styleClass">
+    <a class="dui-tab-bordered dui-tab hover:font-bold hover:text-primary" :class="styleClass">
         <slot></slot>
     </a>
 </template>

src/components/ui/UITabs.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="dui-tabs"><slot></slot></div>
+    <div class="dui-tabs dui-tabs-boxed dui-tabs-md"><slot></slot></div>
 </template>

src/composables/useEncryption.ts

@@ -97,7 +97,10 @@ const decryptNote = (note: BaseNote, key: EncryptionKey) => {
 
 export const decryptNotes = (notes: BaseNotes, encryptionKey: EncryptionKey) => {
     const decryptedNotes = Object.fromEntries(
-    Object.entries(notes).map(([noteId, note]) => [noteId, { ...decryptNote(note, encryptionKey) }])
+        Object.entries(notes).map(([noteId, note]) => [
+            noteId,
+            { ...decryptNote(note, encryptionKey) }
+        ])
     )
     return decryptedNotes
 }
@@ -112,7 +115,10 @@ const encryptNote = (note: BaseNote, key: EncryptionKey) => {
 
 export const encryptNotes = (notes: BaseNotes, encryptionKey: EncryptionKey) => {
     const encryptedNotes = Object.fromEntries(
-    Object.entries(notes).map(([noteId, note]) => [noteId, { ...encryptNote(note, encryptionKey) }])
+        Object.entries(notes).map(([noteId, note]) => [
+            noteId,
+            { ...encryptNote(note, encryptionKey) }
+        ])
     )
     return encryptedNotes
 }

src/composables/useFirebase.ts

@@ -1,13 +1,24 @@
 // import { initializeApp } from 'firebase/app'
-import firebase from 'firebase/compat/app'
+import { Capacitor } from '@capacitor/core'
-import type { User } from '@firebase/auth-types'
+// import firebase from 'firebase/compat/app'
+// import type { User } from '@firebase/auth-types'
+import { initializeApp } from 'firebase/app'
+
 import {
     initializeFirestore,
     persistentLocalCache,
     persistentMultipleTabManager
 } from 'firebase/firestore'
+import {
+    getAuth,
+    indexedDBLocalPersistence,
+    initializeAuth,
+    onAuthStateChanged,
+    signOut as firebaseSignOut
+} from 'firebase/auth'
+import { type FirebaseApp } from 'firebase/app'
+import { type User } from '@firebase/auth'
 import type { Firestore } from 'firebase/firestore'
-import { getAuth, getRedirectResult } from 'firebase/auth'
 
 // import { getAnalytics } from "firebase/analytics";
 // TODO: Add SDKs for Firebase products that you want to use
@@ -30,43 +41,26 @@ export const user = ref<User | null>()
 
 export const initialized = computed<boolean>(() => user.value !== undefined)
 
-export const signOut = () => firebase.auth().signOut()
+export const signOut = async () => firebaseSignOut(getAuth())
 
 export const db = ref<Firestore>()
 
-// Initialize Firebase
+const getFirebaseAuth = async (app: FirebaseApp) => {
-export const initializeFirebase = async () => {
+    if (Capacitor.isNativePlatform()) {
-  const app = firebase.initializeApp(firebaseConfig)
+        return initializeAuth(app, {
-  const auth = getAuth()
+            persistence: indexedDBLocalPersistence
-  try {
+        })
-    const authRedirectResult = await getRedirectResult(auth)
+    } else {
-    console.log(authRedirectResult)
+        return getAuth()
-    // user.value = result
+    }
-    // This gives you a Google Access Token. You can use it to access Google APIs.
-    // const credential = GoogleAuthProvider.credentialFromResult(result)
-    // const token = credential.accessToken
-
-    // The signed-in user info.
-    // const user = result.user
-    // IdP data available using getAdditionalUserInfo(result)
-    // ...
-  } catch (error: any) {
-    console.error(error)
-    // const errorCode = error.code
-    // // const errorMessage = error.message
-    // const email = error.customData.email
-
-    // Handle Errors here.
-    // const errorCode = error.code
-    // const errorMessage = error.message
-    // The email of the user's account used.
-    // const email = error.customData.email
-    // The AuthCredential type that was used.
-    // const credential = GoogleAuthProvider.credentialFromError(error)
-    // ...
 }
 
-  firebase.auth().onAuthStateChanged((firebaseUser) => {
+// Initialize Firebase
+export const initializeFirebase = async () => {
+    const app = initializeApp(firebaseConfig)
+    const auth = await getFirebaseAuth(app)
+    onAuthStateChanged(auth, (firebaseUser) => {
+        console.log('auth state changed', firebaseUser)
         user.value = firebaseUser
     })
     db.value = markRaw(

src/composables/useHaptics.ts

@@ -0,0 +1,3 @@
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
+
+export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })

src/composables/useNotes.ts

@@ -8,7 +8,7 @@ import { defaultNotes } from '@/utils/defaultNotes'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
 import { preferredNotesSource } from '@/composables/useSettings'
-import { Haptics, ImpactStyle } from '@capacitor/haptics'
+import { vibrate } from '@/composables/useHaptics'
 
 export const notesSources = computed(() => ({
     local: true,
@@ -104,7 +104,7 @@ export const setActiveNote = (noteId: string | undefined, haptic: boolean = true
     if (noteId) {
         activeNoteId.value = noteId
         activeViewMode.value = viewModes.find((mode) => mode.name === 'Note') || viewModes[0]
-    if (haptic) Haptics.impact({ style: ImpactStyle.Light })
+        if (haptic) vibrate()
     }
 }
 
@@ -151,7 +151,9 @@ export const findNotes = (query: string): Note[] => {
     }
     return notes.value.filter((note) => {
         const matchTitle = note.title.toLowerCase().includes(query.toLowerCase())
-    const matchContent = removeMdFromText(note.content).toLowerCase().includes(query.toLowerCase())
+        const matchContent = removeMdFromText(note.content)
+            .toLowerCase()
+            .includes(query.toLowerCase())
         return matchTitle || matchContent
     })
 }
@@ -205,7 +207,9 @@ export const notesRelations = computed(() => {
         .map((noteRelations, _, notesRelations): NoteRelations => {
             const from = [...notesRelations]
                 .map((noteRelation) =>
-          noteRelation.to.filter((toId) => toId === noteRelations.id).map(() => noteRelation.id)
+                    noteRelation.to
+                        .filter((toId) => toId === noteRelations.id)
+                        .map(() => noteRelation.id)
                 )
                 .reduce((arr, elem) => arr.concat(elem), [])
                 .filter((value, index, self) => self.indexOf(value) === index)
@@ -262,7 +266,9 @@ export const getNotes = async () => {
         }
     } else if (activeNotesSource.value === 'firebase') {
         if (encryptionKey.value === undefined || !user.value || !db.value) return
-    const firebaseNotes = (await getDoc(doc(db.value, 'pages', user.value.uid))).data() as BaseNotes
+        const firebaseNotes = (
+            await getDoc(doc(db.value, 'pages', user.value.uid))
+        ).data() as BaseNotes
         notes = encryptionKey.value
             ? decryptNotes(firebaseNotes, encryptionKey.value)
             : firebaseNotes || {}

src/main.ts

@@ -1,3 +1,4 @@
+import { Capacitor } from '@capacitor/core'
 import { createApp } from 'vue'
 import '@/style.scss'
 import '@fortawesome/fontawesome-free/css/all.min.css'
@@ -7,9 +8,10 @@ import { initializeFirebase } from '@/composables/useFirebase'
 import { StatusBar, Style } from '@capacitor/status-bar'
 import { Keyboard } from '@capacitor/keyboard'
 
+if (Capacitor.isNativePlatform()) {
     StatusBar.setStyle({ style: Style.Dark })
     Keyboard.setAccessoryBarVisible({ isVisible: true })
-
+}
 initializeFirebase()
 
 const isDark = usePreferredDark()

tailwind.config.ts

@@ -38,12 +38,12 @@ export default {
     themes: [
       {
         contexted: {
-          ...require('daisyui/src/theming/themes')['[data-theme=light]'],
+          ...require('daisyui/src/theming/themes')['light'],
           primary,
           secondary,
-          '--btn-text-case': 'uppercase' // set default text transform for buttons
+          '--btn-text-case': 'uppercase', // set default text transform for buttons
           // accent: '#37CDBE',
-          // neutral: '#F7F7F7',
+          neutral: primary,
           // 'base-100': '#FFFFFF',
           // info: '#3ABFF8',
           // success: '#36D399',