mono repo

apps/mobile/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

apps/mobile/.prettierignore

@@ -0,0 +1,2 @@
+android/
+docs/

apps/mobile/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	"recommendations": [
+		"expo.vscode-expo-tools",
+		"gruntfuggly.todo-tree",
+		"eamodio.gitlens"
+	]
+}

apps/mobile/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+	"editor.codeActionsOnSave": {
+		"source.organizeImports": "never",
+		"source.fixAll": "explicit",
+		"source.sortMembers": "explicit"
+	},
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnSave": true
+}

apps/mobile/README.md

@@ -0,0 +1,60 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with
+[`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   pnpm install
+   ```
+
+2. Start the app
+
+   ```bash
+   pnpm exec expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app
+  development with Expo
+
+You can start developing by editing the files inside the **app** directory. This
+project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+pnpm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and
+create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following
+resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into
+  advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a
+  step-by-step tutorial where you'll create a project that runs on Android, iOS,
+  and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform
+  and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask
+  questions.

apps/mobile/android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

apps/mobile/android/app/build.gradle

@@ -0,0 +1,182 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
+ */
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'dev.fressh.app'
+    defaultConfig {
+        applicationId 'dev.fressh.app'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
+            shrinkResources enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs enablePngCrunchInRelease.toBoolean()
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging enableLegacyPackaging.toBoolean()
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

apps/mobile/android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

apps/mobile/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

apps/mobile/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,31 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <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="fressh"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

apps/mobile/android/app/src/main/java/dev/fressh/app/MainActivity.kt

@@ -0,0 +1,65 @@
+package dev.fressh.app
+import expo.modules.splashscreen.SplashScreenManager
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

apps/mobile/android/app/src/main/java/dev/fressh/app/MainApplication.kt

@@ -0,0 +1,56 @@
+package dev.fressh.app
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.common.ReleaseLevel
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
+import com.facebook.react.defaults.DefaultReactNativeHost
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+      this,
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              // Packages that cannot be autolinked yet can be added manually here, for example:
+              // add(MyReactNativePackage())
+            }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    DefaultNewArchitectureEntryPoint.releaseLevel = try {
+      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
+    } catch (e: IllegalArgumentException) {
+      ReleaseLevel.STABLE
+    }
+    loadReactNative(this)
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

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

@@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>

apps/mobile/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     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
+
+          http://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.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

apps/mobile/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/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

apps/mobile/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/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

apps/mobile/android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1 @@
+<resources/>

apps/mobile/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,6 @@
+<resources>
+  <color name="splashscreen_background">#ffffff</color>
+  <color name="iconBackground">#ffffff</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+</resources>

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

@@ -0,0 +1,5 @@
+<resources>
+  <string name="app_name">fressh</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+</resources>

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

@@ -0,0 +1,14 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#ffffff</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
+  </style>
+</resources>

apps/mobile/android/build.gradle

@@ -0,0 +1,24 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath('com.android.tools.build:gradle')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

apps/mobile/android/gradle.properties

@@ -0,0 +1,68 @@
+# 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.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# 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
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+# Specifies whether the app is configured to use edge-to-edge via the app config or plugin
+# WARNING: This property has been deprecated and will be removed in Expo SDK 55. Use `edgeToEdgeEnabled` or `react.edgeToEdgeEnabled` to determine whether the project is using edge-to-edge.
+expo.edgeToEdgeEnabled=true
+
+
+android.packagingOptions.pickFirsts=META-INF/versions/9/OSGI-INF/MANIFEST.MF

apps/mobile/android/gradle/wrapper/gradle-wrapper.properties

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

apps/mobile/android/gradlew

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

apps/mobile/android/gradlew.bat

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

apps/mobile/android/settings.gradle

@@ -0,0 +1,39 @@
+pluginManagement {
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'fressh'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)

apps/mobile/app.json

@@ -0,0 +1,50 @@
+{
+	"expo": {
+		"name": "fressh",
+		"slug": "fressh",
+		"version": "1.0.0",
+		"orientation": "portrait",
+		"icon": "./assets/images/icon.png",
+		"scheme": "fressh",
+		"userInterfaceStyle": "automatic",
+		"newArchEnabled": true,
+		"ios": {
+			"supportsTablet": true,
+			"config": {
+				"usesNonExemptEncryption": false
+			}
+		},
+		"android": {
+			"package": "dev.fressh.app",
+			"adaptiveIcon": {
+				"foregroundImage": "./assets/images/adaptive-icon.png",
+				"backgroundColor": "#ffffff"
+			},
+			"edgeToEdgeEnabled": true,
+			"predictiveBackGestureEnabled": false
+		},
+		"web": {
+			"output": "static",
+			"favicon": "./assets/images/favicon.png"
+		},
+		"plugins": [
+			"expo-router",
+			[
+				"expo-splash-screen",
+				{
+					"image": "./assets/images/splash-icon.png",
+					"imageWidth": 200,
+					"resizeMode": "contain",
+					"backgroundColor": "#ffffff"
+				}
+			],
+			"expo-secure-store",
+			"expo-font",
+			"expo-web-browser"
+		],
+		"experiments": {
+			"typedRoutes": true,
+			"reactCompiler": true
+		}
+	}
+}

apps/mobile/docs/ssh_client.md

@@ -0,0 +1,3 @@
+https://github.com/dylankenneally/react-native-ssh-sftp 
+https://xtermjs.org/
+https://docs.expo.dev/versions/latest/sdk/webview/

apps/mobile/eslint.config.js

@@ -0,0 +1,27 @@
+// https://docs.expo.dev/guides/using-eslint/
+import { createRequire } from 'node:module';
+import { config as epicConfig } from '@epic-web/config/eslint';
+import { defineConfig } from 'eslint/config';
+
+const require = createRequire(import.meta.url);
+
+const expoConfig = require('eslint-config-expo/flat');
+
+// // Both epic and expo define a 'import' plugin (though not the same package)
+// // We need to pick one or they will conflict.
+const stripImportPlugin = (config) => {
+	if (!config?.plugins?.['import']) return config;
+	const { import: _removed, ...rest } = config.plugins;
+	return {
+		...config,
+		plugins: rest,
+	};
+};
+
+export default defineConfig([
+	...expoConfig,
+	...epicConfig.map(stripImportPlugin),
+	{
+		ignores: ['dist'],
+	},
+]);

apps/mobile/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@fressh/mobile",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "prebuild": "expo prebuild",
+    "prebuild:clean": "expo prebuild --clean",
+    "expo:dep:check": "expo install --fix",
+    "expo:doctor": "pnpm dlx expo-doctor",
+    "fmt": "cross-env SORT_IMPORTS=true prettier --write .",
+    "fmt:check": "cross-env SORT_IMPORTS=true prettier --check .",
+    "typecheck": "tsc",
+    "eslint:check": "expo lint --max-warnings 0 .",
+    "lint:fix": "expo lint --fix --max-warnings 0 .",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@dylankenneally/react-native-ssh-sftp": "^1.5.20",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-picker/picker": "2.11.2",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.4",
+    "@react-navigation/native": "^7.1.8",
+    "@tanstack/react-form": "^1.19.5",
+    "@tanstack/react-query": "^5.87.1",
+    "expo": "54.0.0-preview.16",
+    "expo-constants": "~18.0.7",
+    "expo-font": "~14.0.7",
+    "expo-haptics": "~15.0.6",
+    "expo-image": "~3.0.7",
+    "expo-linking": "~8.0.7",
+    "expo-router": "6.0.0-preview.16",
+    "expo-secure-store": "~15.0.6",
+    "expo-splash-screen": "~31.0.8",
+    "expo-status-bar": "~3.0.7",
+    "expo-symbols": "~1.0.6",
+    "expo-web-browser": "~15.0.6",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-native": "0.81.1",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "~5.6.1",
+    "react-native-screens": "~4.16.0",
+    "react-native-uuid": "^2.0.3",
+    "react-native-web": "~0.21.1",
+    "react-native-worklets": "~0.5.1",
+    "zod": "^4.1.5"
+  },
+  "devDependencies": {
+    "@epic-web/config": "^1.21.3",
+    "@types/react": "~19.1.12",
+    "eslint": "^9.35.0",
+    "eslint-config-expo": "~10.0.0",
+    "jiti": "^2.5.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.6.2",
+    "tsx": "^4.20.5",
+    "typescript": "~5.9.2"
+  }
+}

apps/mobile/prettier.config.mjs

@@ -0,0 +1,14 @@
+import epicConfig from '@epic-web/config/prettier';
+// Sometimes this plugin can remove imports that are being edited.
+// As a workaround we will only use this in the cli. (pnpm run fmt)
+// const sortImports = process.env.SORT_IMPORTS === "true";
+
+/** @type {import("prettier").Options} */
+export default {
+	...epicConfig,
+	semi: true,
+	plugins: [
+		// ...(sortImports ? ["prettier-plugin-organize-imports"] : []),
+		...(epicConfig.plugins || []),
+	],
+};

apps/mobile/src/app/_layout.tsx

@@ -0,0 +1,11 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { Stack } from 'expo-router';
+import { queryClient } from '../lib/utils';
+
+export default function RootLayout() {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<Stack screenOptions={{ headerShown: false }} />
+		</QueryClientProvider>
+	);
+}

apps/mobile/src/app/index.tsx

@@ -0,0 +1,462 @@
+import SSHClient, { PtyType } from '@dylankenneally/react-native-ssh-sftp';
+import { Picker } from '@react-native-picker/picker';
+import { useStore } from '@tanstack/react-form';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useAppForm, withFieldGroup } from '../components/form-components';
+import {
+	type ConnectionDetails,
+	connectionDetailsSchema,
+	secretsManager,
+} from '../lib/secrets-manager';
+import { sshConnectionManager } from '../lib/ssh-connection-manager';
+
+const defaultValues: ConnectionDetails = {
+	host: 'test.rebex.net',
+	port: 22,
+	username: 'demo',
+	security: {
+		type: 'password',
+		password: 'password',
+	},
+};
+
+export default function Index() {
+	const router = useRouter();
+	const storedConnectionsQuery = useQuery(
+		secretsManager.connections.query.list,
+	);
+
+	const preferredStoredConnection =
+		storedConnectionsQuery.data?.firstConnection;
+	const connectionForm = useAppForm({
+		// https://tanstack.com/form/latest/docs/framework/react/guides/async-initial-values
+		defaultValues: preferredStoredConnection
+			? preferredStoredConnection.details
+			: defaultValues,
+		validators: {
+			onChange: connectionDetailsSchema,
+			onSubmitAsync: async ({ value }) => {
+				try {
+					console.log('Connecting to SSH server...');
+					const sshClientConnection = await (async () => {
+						if (value.security.type === 'password') {
+							return await SSHClient.connectWithPassword(
+								value.host,
+								value.port,
+								value.username,
+								value.security.password,
+							);
+						}
+						const privateKey = await secretsManager.keys.utils.getPrivateKey(
+							value.security.keyId,
+						);
+						return await SSHClient.connectWithKey(
+							value.host,
+							value.port,
+							value.username,
+							privateKey.privateKey,
+						);
+					})();
+
+					await secretsManager.connections.utils.upsertConnection({
+						id: 'default',
+						details: value,
+						priority: 0,
+					});
+					await sshClientConnection.startShell(PtyType.XTERM);
+					const sshConn = sshConnectionManager.addSession({
+						client: sshClientConnection,
+					});
+					console.log('Connected to SSH server', sshConn.sessionId);
+					router.push({
+						pathname: '/shell',
+						params: {
+							sessionId: sshConn.sessionId,
+						},
+					});
+				} catch (error) {
+					console.error('Error connecting to SSH server', error);
+					throw error;
+				}
+			},
+		},
+	});
+
+	const securityType = useStore(
+		connectionForm.store,
+		(state) => state.values.security.type,
+	);
+
+	const isSubmitting = useStore(
+		connectionForm.store,
+		(state) => state.isSubmitting,
+	);
+
+	return (
+		<View style={styles.container}>
+			<ScrollView
+				contentContainerStyle={styles.scrollContent}
+				keyboardShouldPersistTaps="handled"
+			>
+				<View style={styles.header}>
+					<Text style={styles.appName}>fressh</Text>
+					<Text style={styles.appTagline}>A fast, friendly SSH client</Text>
+				</View>
+				<View style={styles.card}>
+					<Text style={styles.title}>Connect to SSH Server</Text>
+					<Text style={styles.subtitle}>Enter your server credentials</Text>
+
+					<connectionForm.AppForm>
+						<connectionForm.AppField name="host">
+							{(field) => (
+								<field.TextField
+									label="Host"
+									placeholder="example.com or 192.168.0.10"
+									autoCapitalize="none"
+									autoCorrect={false}
+								/>
+							)}
+						</connectionForm.AppField>
+						<connectionForm.AppField name="port">
+							{(field) => <field.NumberField label="Port" placeholder="22" />}
+						</connectionForm.AppField>
+						<connectionForm.AppField name="username">
+							{(field) => (
+								<field.TextField
+									label="Username"
+									placeholder="root"
+									autoCapitalize="none"
+									autoCorrect={false}
+								/>
+							)}
+						</connectionForm.AppField>
+						<connectionForm.AppField name="security.type">
+							{(field) => (
+								<field.PickerField label="Security Type">
+									<Picker.Item label="Password" value="password" />
+									<Picker.Item label="Key" value="key" />
+								</field.PickerField>
+							)}
+						</connectionForm.AppField>
+						{securityType === 'password' ? (
+							<connectionForm.AppField name="security.password">
+								{(field) => (
+									<field.TextField
+										label="Password"
+										placeholder="••••••••"
+										secureTextEntry
+									/>
+								)}
+							</connectionForm.AppField>
+						) : (
+							<KeyPairSection
+								form={connectionForm}
+								fields={{
+									keyId: 'security.keyId',
+									type: 'security.type',
+								}}
+							/>
+						)}
+
+						<View style={styles.actions}>
+							<connectionForm.SubmitButton
+								title="Connect"
+								onPress={() => {
+									if (isSubmitting) return;
+									void connectionForm.handleSubmit();
+								}}
+							/>
+						</View>
+					</connectionForm.AppForm>
+				</View>
+				<PreviousConnectionsSection
+					onSelect={(connection) => {
+						connectionForm.setFieldValue('host', connection.host);
+						connectionForm.setFieldValue('port', connection.port);
+						connectionForm.setFieldValue('username', connection.username);
+						connectionForm.setFieldValue(
+							'security.type',
+							connection.security.type,
+						);
+						if (connection.security.type === 'password') {
+							connectionForm.setFieldValue(
+								'security.password',
+								connection.security.password,
+							);
+						} else {
+							connectionForm.setFieldValue(
+								'security.keyId',
+								connection.security.keyId,
+							);
+						}
+					}}
+				/>
+			</ScrollView>
+		</View>
+	);
+}
+
+// Yes, HOCs are weird. Its what the docs recommend.
+// https://tanstack.com/form/v1/docs/framework/react/guides/form-composition#withform-faq
+const KeyPairSection = withFieldGroup({
+	defaultValues: {
+		type: 'key',
+		keyId: '',
+	},
+	props: {},
+	render: function Render({ group }) {
+		const listPrivateKeysQuery = useQuery(secretsManager.keys.query.list);
+
+		return (
+			<group.AppField name="keyId">
+				{(field) =>
+					listPrivateKeysQuery.isLoading ? (
+						<Text style={styles.mutedText}>Loading keys...</Text>
+					) : listPrivateKeysQuery.isError ? (
+						<Text style={styles.errorText}>
+							Error: {listPrivateKeysQuery.error.message}
+						</Text>
+					) : (
+						<>
+							<field.PickerField label="Key">
+								{listPrivateKeysQuery.data?.keys.map((key) => (
+									<Picker.Item key={key.id} label={key.id} value={key.id} />
+								))}
+							</field.PickerField>
+							<Pressable
+								style={styles.secondaryButton}
+								onPress={async () => {
+									const newKeyPair =
+										await secretsManager.keys.utils.generateKeyPair({
+											type: 'rsa',
+											keySize: 4096,
+										});
+									await secretsManager.keys.utils.savePrivateKey({
+										keyId: 'default',
+										privateKey: newKeyPair.privateKey,
+										priority: 0,
+									});
+									field.handleChange('default');
+									console.log('New key pair generated and saved');
+								}}
+							>
+								<Text style={styles.secondaryButtonText}>
+									Generate New Key Pair
+								</Text>
+							</Pressable>
+						</>
+					)
+				}
+			</group.AppField>
+		);
+	},
+});
+
+function PreviousConnectionsSection(props: {
+	onSelect: (connection: ConnectionDetails) => void;
+}) {
+	const listConnectionsQuery = useQuery(secretsManager.connections.query.list);
+
+	return (
+		<View style={styles.listSection}>
+			<Text style={styles.listTitle}>Previous Connections</Text>
+			{listConnectionsQuery.isLoading ? (
+				<Text style={styles.mutedText}>Loading connections...</Text>
+			) : listConnectionsQuery.isError ? (
+				<Text style={styles.errorText}>Error loading connections</Text>
+			) : listConnectionsQuery.data?.manifest.connections.length ? (
+				<View style={styles.listContainer}>
+					{listConnectionsQuery.data?.manifest.connections.map((conn) => (
+						<ConnectionRow
+							key={conn.id}
+							id={conn.id}
+							onSelect={props.onSelect}
+						/>
+					))}
+				</View>
+			) : (
+				<Text style={styles.mutedText}>No saved connections yet</Text>
+			)}
+		</View>
+	);
+}
+
+function ConnectionRow(props: {
+	id: string;
+	onSelect: (connection: ConnectionDetails) => void;
+}) {
+	const detailsQuery = useQuery(secretsManager.connections.query.get(props.id));
+	const details = detailsQuery.data?.details;
+
+	return (
+		<Pressable
+			style={styles.row}
+			onPress={() => {
+				if (details) props.onSelect(details);
+			}}
+			disabled={!details}
+		>
+			<View style={styles.rowTextContainer}>
+				<Text style={styles.rowTitle}>
+					{details ? `${details.username}@${details.host}` : 'Loading...'}
+				</Text>
+				<Text style={styles.rowSubtitle}>
+					{details ? `Port ${details.port} • ${details.security.type}` : ''}
+				</Text>
+			</View>
+			<Text style={styles.rowChevron}>›</Text>
+		</Pressable>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		padding: 24,
+		backgroundColor: '#0B1324',
+		justifyContent: 'center',
+	},
+	scrollContent: {
+		paddingBottom: 32,
+	},
+	header: {
+		marginBottom: 16,
+		alignItems: 'center',
+	},
+	appName: {
+		fontSize: 28,
+		fontWeight: '800',
+		color: '#E5E7EB',
+		letterSpacing: 1,
+	},
+	appTagline: {
+		marginTop: 4,
+		fontSize: 13,
+		color: '#9AA0A6',
+	},
+	card: {
+		backgroundColor: '#111B34',
+		borderRadius: 16,
+		padding: 20,
+		shadowColor: '#000',
+		shadowOpacity: 0.2,
+		shadowRadius: 12,
+		elevation: 6,
+	},
+	title: {
+		fontSize: 22,
+		fontWeight: '700',
+		color: '#E5E7EB',
+		marginBottom: 4,
+	},
+	subtitle: {
+		fontSize: 14,
+		color: '#9AA0A6',
+		marginBottom: 16,
+	},
+	inputGroup: {
+		marginBottom: 12,
+	},
+	label: {
+		marginBottom: 6,
+		fontSize: 14,
+		color: '#C6CBD3',
+		fontWeight: '600',
+	},
+	input: {
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		backgroundColor: '#0E172B',
+		color: '#E5E7EB',
+		borderRadius: 10,
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		fontSize: 16,
+	},
+	errorText: {
+		marginTop: 6,
+		color: '#FCA5A5',
+		fontSize: 12,
+	},
+	actions: {
+		marginTop: 8,
+	},
+	mutedText: {
+		color: '#9AA0A6',
+		fontSize: 14,
+	},
+	submitButton: {
+		backgroundColor: '#2563EB',
+		borderRadius: 10,
+		paddingVertical: 14,
+		alignItems: 'center',
+	},
+	submitButtonText: {
+		color: '#FFFFFF',
+		fontWeight: '700',
+		fontSize: 16,
+	},
+	buttonDisabled: {
+		backgroundColor: '#3B82F6',
+		opacity: 0.6,
+	},
+	secondaryButton: {
+		backgroundColor: 'transparent',
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		borderRadius: 10,
+		paddingVertical: 12,
+		alignItems: 'center',
+		marginTop: 8,
+	},
+	secondaryButtonText: {
+		color: '#C6CBD3',
+		fontWeight: '600',
+		fontSize: 14,
+	},
+	listSection: {
+		marginTop: 20,
+	},
+	listTitle: {
+		fontSize: 16,
+		fontWeight: '700',
+		color: '#E5E7EB',
+		marginBottom: 8,
+	},
+	listContainer: {
+		// Intentionally empty for RN compatibility
+	},
+	row: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+		backgroundColor: '#0E172B',
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		borderRadius: 12,
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		marginBottom: 8,
+	},
+	rowTextContainer: {
+		flex: 1,
+		marginRight: 12,
+	},
+	rowTitle: {
+		color: '#E5E7EB',
+		fontSize: 15,
+		fontWeight: '600',
+	},
+	rowSubtitle: {
+		color: '#9AA0A6',
+		marginTop: 2,
+		fontSize: 12,
+	},
+	rowChevron: {
+		color: '#9AA0A6',
+		fontSize: 22,
+		paddingHorizontal: 4,
+	},
+});

apps/mobile/src/app/shell.tsx

@@ -0,0 +1,177 @@
+/**
+ * This is the page that is shown after an ssh connection
+ */
+import { useLocalSearchParams } from 'expo-router';
+import { useEffect, useRef, useState } from 'react';
+import {
+	Platform,
+	Pressable,
+	ScrollView,
+	StyleSheet,
+	Text,
+	TextInput,
+	View,
+} from 'react-native';
+import { sshConnectionManager } from '../lib/ssh-connection-manager';
+
+export default function Shell() {
+	// https://docs.expo.dev/router/reference/url-parameters/
+	const { sessionId } = useLocalSearchParams<{ sessionId: string }>();
+	const sshConn = sshConnectionManager.getSession({ sessionId }); // this throws if the session is not found
+
+	const [shellData, setShellData] = useState('');
+
+	useEffect(() => {
+		sshConn.client.on('Shell', (data) => {
+			console.log('Received data (on Shell):', data);
+			setShellData((prev) => prev + data);
+		});
+		//  return () => {
+		// 	sshConn.client.off('Shell')
+		//  }
+	}, [setShellData, sshConn.client]);
+
+	useEffect(() => {
+		return () => {
+			setTimeout(() => {
+				try {
+					sshConnectionManager.removeAndDisconnectSession({ sessionId });
+					console.log('Disconnected from SSH server');
+				} catch (error) {
+					console.error('Error disconnecting from SSH server', error);
+				}
+			}, 3_000);
+		};
+	}, [sessionId]);
+
+	const scrollViewRef = useRef<ScrollView | null>(null);
+
+	useEffect(() => {
+		// Auto-scroll to bottom when new data arrives
+		scrollViewRef.current?.scrollToEnd({ animated: true });
+	}, [shellData]);
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>SSH Shell</Text>
+			<View style={styles.terminal}>
+				<ScrollView
+					ref={scrollViewRef}
+					contentContainerStyle={styles.terminalContent}
+					keyboardShouldPersistTaps="handled"
+				>
+					<Text selectable style={styles.terminalText}>
+						{shellData || 'Connected. Output will appear here...'}
+					</Text>
+				</ScrollView>
+			</View>
+			<CommandInput
+				executeCommand={async (command) => {
+					console.log('Executing command:', command);
+					await sshConn.client.writeToShell(command + '\n');
+				}}
+			/>
+		</View>
+	);
+}
+
+function CommandInput(props: {
+	executeCommand: (command: string) => Promise<void>;
+}) {
+	const [command, setCommand] = useState('');
+
+	async function handleExecute() {
+		if (!command.trim()) return;
+		await props.executeCommand(command);
+		setCommand('');
+	}
+
+	return (
+		<View style={styles.commandBar}>
+			<TextInput
+				style={styles.commandInput}
+				value={command}
+				onChangeText={setCommand}
+				placeholder="Type a command and press Enter or Execute"
+				placeholderTextColor="#9AA0A6"
+				autoCapitalize="none"
+				autoCorrect={false}
+				returnKeyType="send"
+				onSubmitEditing={handleExecute}
+			/>
+			<Pressable style={styles.executeButton} onPress={handleExecute}>
+				<Text style={styles.executeButtonText}>Execute</Text>
+			</Pressable>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: '#0B1324',
+		padding: 16,
+	},
+	title: {
+		color: '#E5E7EB',
+		fontSize: 18,
+		fontWeight: '700',
+		marginBottom: 12,
+	},
+	terminal: {
+		flex: 1,
+		backgroundColor: '#0E172B',
+		borderRadius: 12,
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		overflow: 'hidden',
+		marginBottom: 12,
+	},
+	terminalContent: {
+		padding: 12,
+	},
+	terminalText: {
+		color: '#D1D5DB',
+		fontSize: 14,
+		lineHeight: 18,
+		fontFamily: Platform.select({
+			ios: 'Menlo',
+			android: 'monospace',
+			default: 'monospace',
+		}),
+	},
+	commandBar: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	commandInput: {
+		flex: 1,
+		backgroundColor: '#0E172B',
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		borderRadius: 10,
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		color: '#E5E7EB',
+		fontSize: 16,
+		fontFamily: Platform.select({
+			ios: 'Menlo',
+			android: 'monospace',
+			default: 'monospace',
+		}),
+	},
+	executeButton: {
+		backgroundColor: '#2563EB',
+		borderRadius: 10,
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	executeButtonText: {
+		color: '#FFFFFF',
+		fontWeight: '700',
+		fontSize: 14,
+	},
+});

apps/mobile/src/components/form-components.tsx

@@ -0,0 +1,214 @@
+import { Picker } from '@react-native-picker/picker';
+import {
+	createFormHook,
+	createFormHookContexts,
+	useStore,
+} from '@tanstack/react-form';
+import {
+	Pressable,
+	StyleSheet,
+	Switch,
+	Text,
+	TextInput,
+	View,
+} from 'react-native';
+
+function FieldInfo() {
+	const field = useFieldContext();
+	const meta = field.state.meta;
+	const errorMessage = meta?.errors?.[0]; // TODO: typesafe errors
+
+	return (
+		<View style={styles.fieldInfo}>
+			{errorMessage ? (
+				<Text style={styles.errorText}>{String(errorMessage)}</Text>
+			) : null}
+		</View>
+	);
+}
+
+// https://tanstack.com/form/latest/docs/framework/react/quick-start
+export function TextField(
+	props: React.ComponentProps<typeof TextInput> & {
+		label?: string;
+	},
+) {
+	const { label, style, ...rest } = props;
+	const field = useFieldContext<string>();
+
+	return (
+		<View style={styles.inputGroup}>
+			{label ? <Text style={styles.label}>{label}</Text> : null}
+			<TextInput
+				style={[styles.input, style]}
+				placeholderTextColor="#9AA0A6"
+				value={field.state.value}
+				onChangeText={field.handleChange}
+				onBlur={field.handleBlur}
+				{...rest}
+			/>
+			<FieldInfo />
+		</View>
+	);
+}
+
+export function NumberField(
+	props: React.ComponentProps<typeof TextInput> & {
+		label?: string;
+	},
+) {
+	const { label, style, keyboardType, onChangeText, ...rest } = props;
+	const field = useFieldContext<number>();
+	return (
+		<View style={styles.inputGroup}>
+			{label ? <Text style={styles.label}>{label}</Text> : null}
+			<TextInput
+				keyboardType={keyboardType ?? 'numeric'}
+				style={[styles.input, style]}
+				placeholderTextColor="#9AA0A6"
+				value={field.state.value.toString()}
+				onChangeText={(text) => field.handleChange(Number(text))}
+				onBlur={field.handleBlur}
+				{...rest}
+			/>
+			<FieldInfo />
+		</View>
+	);
+}
+
+export function SwitchField(
+	props: React.ComponentProps<typeof Switch> & {
+		label?: string;
+	},
+) {
+	const { label, style, ...rest } = props;
+	const field = useFieldContext<boolean>();
+
+	return (
+		<View style={styles.inputGroup}>
+			{label ? <Text style={styles.label}>{label}</Text> : null}
+			<Switch
+				style={[styles.input, style]}
+				value={field.state.value}
+				onChange={(event) => field.handleChange(event.nativeEvent.value)}
+				onBlur={field.handleBlur}
+				{...rest}
+			/>
+		</View>
+	);
+}
+
+export function PickerField<T>(
+	props: React.ComponentProps<typeof Picker<T>> & {
+		label?: string;
+	},
+) {
+	const { label, style, ...rest } = props;
+	const field = useFieldContext<T>();
+	return (
+		<View style={styles.inputGroup}>
+			{label ? <Text style={styles.label}>{label}</Text> : null}
+			<Picker<T>
+				selectedValue={field.state.value}
+				onValueChange={(itemValue) => field.handleChange(itemValue)}
+				{...rest}
+			>
+				{props.children}
+			</Picker>
+			<FieldInfo />
+		</View>
+	);
+}
+
+export function SubmitButton(props: {
+	onPress?: () => void;
+	title?: string;
+	disabled?: boolean;
+}) {
+	const { onPress, title = 'Connect', disabled } = props;
+	const formContext = useFormContext();
+	const isSubmitting = useStore(
+		formContext.store,
+		(state) => state.isSubmitting,
+	);
+	return (
+		<Pressable
+			style={[
+				styles.submitButton,
+				disabled ? styles.buttonDisabled : undefined,
+			]}
+			onPress={onPress}
+			disabled={disabled || isSubmitting}
+		>
+			<Text style={styles.submitButtonText}>
+				{isSubmitting ? 'Connecting...' : title}
+			</Text>
+		</Pressable>
+	);
+}
+
+const { fieldContext, formContext, useFieldContext, useFormContext } =
+	createFormHookContexts();
+
+export { useFieldContext, useFormContext };
+// https://tanstack.com/form/latest/docs/framework/react/quick-start
+export const { useAppForm, withForm, withFieldGroup } = createFormHook({
+	fieldComponents: {
+		TextField,
+		NumberField,
+		PickerField,
+		SwitchField,
+	},
+	formComponents: {
+		SubmitButton,
+	},
+	fieldContext,
+	formContext,
+});
+
+const styles = StyleSheet.create({
+	inputGroup: {
+		marginBottom: 12,
+	},
+	label: {
+		marginBottom: 6,
+		fontSize: 14,
+		color: '#C6CBD3',
+		fontWeight: '600',
+	},
+	input: {
+		borderWidth: 1,
+		borderColor: '#2A3655',
+		backgroundColor: '#0E172B',
+		color: '#E5E7EB',
+		borderRadius: 10,
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		fontSize: 16,
+	},
+	errorText: {
+		marginTop: 6,
+		color: '#FCA5A5',
+		fontSize: 12,
+	},
+	submitButton: {
+		backgroundColor: '#2563EB',
+		borderRadius: 10,
+		paddingVertical: 14,
+		alignItems: 'center',
+	},
+	submitButtonText: {
+		color: '#FFFFFF',
+		fontWeight: '700',
+		fontSize: 16,
+	},
+	buttonDisabled: {
+		backgroundColor: '#3B82F6',
+		opacity: 0.6,
+	},
+	fieldInfo: {
+		marginTop: 6,
+		color: '#FCA5A5',
+		fontSize: 12,
+	},
+});

apps/mobile/src/lib/secrets-manager.ts

@@ -0,0 +1,268 @@
+import SSHClient from '@dylankenneally/react-native-ssh-sftp';
+import { queryOptions } from '@tanstack/react-query';
+import * as SecureStore from 'expo-secure-store';
+import * as z from 'zod';
+import { queryClient } from './utils';
+
+const keys = {
+	storagePrefix: 'privateKey_',
+	manifestKey: 'privateKeysManifest',
+} as const;
+
+const keyManifestSchema = z.object({
+	manifestVersion: z.number().default(1),
+	keys: z.array(
+		z.object({
+			id: z.string(),
+			priority: z.number(),
+			createdAt: z.date(),
+		}),
+	),
+});
+
+async function getKeyManifest() {
+	const rawManifest = await SecureStore.getItemAsync(keys.manifestKey);
+	const manifest = rawManifest
+		? JSON.parse(rawManifest)
+		: {
+				manifestVersion: 1,
+				keys: [],
+			};
+	return keyManifestSchema.parse(manifest);
+}
+
+async function savePrivateKey(params: {
+	keyId: string;
+	privateKey: string;
+	priority: number;
+}) {
+	const manifest = await getKeyManifest();
+
+	const existingKey = manifest.keys.find((key) => key.id === params.keyId);
+
+	if (existingKey) throw new Error('Key already exists');
+
+	const newKey = {
+		id: params.keyId,
+		priority: params.priority,
+		createdAt: new Date(),
+	};
+
+	manifest.keys.push(newKey);
+	await SecureStore.setItemAsync(
+		`${keys.storagePrefix}${params.keyId}`,
+		params.privateKey,
+	);
+	await SecureStore.setItemAsync(keys.manifestKey, JSON.stringify(manifest));
+	await queryClient.invalidateQueries({ queryKey: [keyQueryKey] });
+}
+
+async function getPrivateKey(keyId: string) {
+	const manifest = await getKeyManifest();
+	const key = manifest.keys.find((key) => key.id === keyId);
+	if (!key) throw new Error('Key not found');
+	const privateKey = await SecureStore.getItemAsync(
+		`${keys.storagePrefix}${keyId}`,
+	);
+	if (!privateKey) throw new Error('Key not found');
+	return {
+		...key,
+		privateKey,
+	};
+}
+
+async function deletePrivateKey(keyId: string) {
+	const manifest = await getKeyManifest();
+	const key = manifest.keys.find((key) => key.id === keyId);
+	if (!key) throw new Error('Key not found');
+	manifest.keys = manifest.keys.filter((key) => key.id !== keyId);
+	await SecureStore.setItemAsync(keys.manifestKey, JSON.stringify(manifest));
+	await SecureStore.deleteItemAsync(`${keys.storagePrefix}${keyId}`);
+	await queryClient.invalidateQueries({ queryKey: [keyQueryKey] });
+}
+
+const connections = {
+	storagePrefix: 'connection_',
+	manifestKey: 'connectionsManifest',
+} as const;
+
+const connectionsManifestSchema = z.object({
+	manifestVersion: z.number().default(1),
+	connections: z.array(
+		z.object({
+			id: z.string(),
+			priority: z.number(),
+			createdAt: z.date(),
+			modifiedAt: z.date(),
+		}),
+	),
+});
+
+export const connectionDetailsSchema = z.object({
+	host: z.string().min(1),
+	port: z.number().min(1),
+	username: z.string().min(1),
+	security: z.discriminatedUnion('type', [
+		z.object({
+			type: z.literal('password'),
+			password: z.string().min(1),
+		}),
+		z.object({
+			type: z.literal('key'),
+			keyId: z.string().min(1),
+		}),
+	]),
+});
+
+export type ConnectionDetails = z.infer<typeof connectionDetailsSchema>;
+
+async function getConnectionManifest() {
+	const rawManifest = await SecureStore.getItemAsync(connections.manifestKey);
+	const manifest = rawManifest
+		? JSON.parse(rawManifest)
+		: {
+				manifestVersion: 1,
+				connections: [],
+			};
+	return connectionsManifestSchema.parse(manifest);
+}
+
+async function upsertConnection(params: {
+	id: string;
+	details: ConnectionDetails;
+	priority: number;
+}) {
+	const manifest = await getConnectionManifest();
+	const existingConnection = manifest.connections.find(
+		(connection) => connection.id === params.id,
+	);
+
+	const newConnection = existingConnection
+		? {
+				...existingConnection,
+				priority: params.priority,
+				modifiedAt: new Date(),
+			}
+		: {
+				id: params.id,
+				priority: params.priority,
+				createdAt: new Date(),
+				modifiedAt: new Date(),
+			};
+
+	await SecureStore.setItemAsync(
+		connections.manifestKey,
+		JSON.stringify(manifest),
+	);
+	await SecureStore.setItemAsync(
+		`${connections.storagePrefix}${params.id}`,
+		JSON.stringify(params.details),
+	);
+	await queryClient.invalidateQueries({ queryKey: [connectionQueryKey] });
+	return existingConnection ?? newConnection;
+}
+
+async function deleteConnection(id: string) {
+	const manifest = await getConnectionManifest();
+	const connection = manifest.connections.find(
+		(connection) => connection.id === id,
+	);
+	if (!connection) throw new Error('Connection not found');
+	manifest.connections = manifest.connections.filter(
+		(connection) => connection.id !== id,
+	);
+	await SecureStore.setItemAsync(
+		connections.manifestKey,
+		JSON.stringify(manifest),
+	);
+	await SecureStore.deleteItemAsync(`${connections.storagePrefix}${id}`);
+	await queryClient.invalidateQueries({ queryKey: [connectionQueryKey] });
+}
+
+async function getConnection(id: string) {
+	const manifest = await getConnectionManifest();
+	const connection = manifest.connections.find(
+		(connection) => connection.id === id,
+	);
+	if (!connection) throw new Error('Connection not found');
+	const detailsString = await SecureStore.getItemAsync(
+		`${connections.storagePrefix}${id}`,
+	);
+	if (!detailsString) throw new Error('Connection details not found');
+	const detailsJson = JSON.parse(detailsString);
+	const details = connectionDetailsSchema.parse(detailsJson);
+	return { ...connection, details };
+}
+
+const connectionQueryKey = 'connections';
+
+const listConnectionsQueryOptions = queryOptions({
+	queryKey: [connectionQueryKey],
+	queryFn: async () => {
+		const manifest = await getConnectionManifest();
+		const firstConnectionMeta = manifest.connections[0];
+		const firstConnection = firstConnectionMeta
+			? await getConnection(firstConnectionMeta.id)
+			: null;
+
+		return {
+			manifest,
+			firstConnection,
+		};
+	},
+});
+
+const getConnectionQueryOptions = (id: string) =>
+	queryOptions({
+		queryKey: [connectionQueryKey, id],
+		queryFn: () => getConnection(id),
+	});
+
+const keyQueryKey = 'keys';
+
+const listKeysQueryOptions = queryOptions({
+	queryKey: [keyQueryKey],
+	queryFn: getKeyManifest,
+});
+
+// https://github.com/dylankenneally/react-native-ssh-sftp/blob/ea55436d8d40378a8f9dabb95b463739ffb219fa/android/src/main/java/me/keeex/rnssh/RNSshClientModule.java#L101-L119
+export type SshPrivateKeyType = 'dsa' | 'rsa' | 'ecdsa' | 'ed25519' | 'ed448';
+async function generateKeyPair(params: {
+	type: SshPrivateKeyType;
+	passphrase?: string;
+	keySize?: number;
+	comment?: string;
+}) {
+	const keyPair = await SSHClient.generateKeyPair(
+		params.type,
+		params.passphrase,
+		params.keySize,
+		params.comment,
+	);
+	return keyPair;
+}
+
+export const secretsManager = {
+	keys: {
+		utils: {
+			getKeyManifest,
+			savePrivateKey,
+			getPrivateKey,
+			deletePrivateKey,
+			generateKeyPair,
+		},
+		query: {
+			list: listKeysQueryOptions,
+		},
+	},
+	connections: {
+		utils: {
+			upsertConnection,
+			deleteConnection,
+		},
+		query: {
+			list: listConnectionsQueryOptions,
+			get: getConnectionQueryOptions,
+		},
+	},
+};

apps/mobile/src/lib/ssh-connection-manager.ts

@@ -0,0 +1,41 @@
+import type SSHClient from '@dylankenneally/react-native-ssh-sftp';
+import uuid from 'react-native-uuid';
+
+export type SSHConn = {
+	client: SSHClient;
+	sessionId: string;
+	createdAt: Date;
+};
+
+const sshConnections = new Map<string, SSHConn>();
+
+function addSession(params: { client: SSHClient }) {
+	const sessionId = uuid.v4();
+	const createdAt = new Date();
+	const sshConn: SSHConn = {
+		client: params.client,
+		sessionId,
+		createdAt,
+	};
+	sshConnections.set(sessionId, sshConn);
+	return sshConn;
+}
+
+function getSession(params: { sessionId: string }) {
+	const sshConn = sshConnections.get(params.sessionId);
+	if (!sshConn) throw new Error('Session not found');
+	return sshConn;
+}
+
+function removeAndDisconnectSession(params: { sessionId: string }) {
+	const sshConn = getSession(params);
+	// sshConn.client.closeShell()
+	sshConn.client.disconnect();
+	sshConnections.delete(params.sessionId);
+}
+
+export const sshConnectionManager = {
+	addSession,
+	getSession,
+	removeAndDisconnectSession,
+};

apps/mobile/src/lib/utils.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();

apps/mobile/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"extends": "expo/tsconfig.base",
+	"compilerOptions": {
+		"strict": true,
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": [
+		"**/*.ts",
+		"**/*.tsx",
+		".expo/types/**/*.ts",
+		"expo-env.d.ts",
+		"eslint.config.js"
+	]
+}

apps/mobile/turbo.json

@@ -0,0 +1,7 @@
+{
+	"extends": ["//"],
+	"tasks": {
+		"lint": {},
+		"lint:check": {}
+	}
+}