diff --git a/apps/mobile/Gemfile b/apps/mobile/Gemfile
index 6a4c5f17..51515233 100644
--- a/apps/mobile/Gemfile
+++ b/apps/mobile/Gemfile
@@ -14,3 +14,4 @@ gem 'bigdecimal'
gem 'logger'
gem 'benchmark'
gem 'mutex_m'
+gem 'nkf'
diff --git a/apps/mobile/README.md b/apps/mobile/README.md
index 32e69ac0..3e2c3f85 100644
--- a/apps/mobile/README.md
+++ b/apps/mobile/README.md
@@ -1,51 +1,97 @@
-# DevCard Mobile
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
-The mobile application for DevCard, built with bare **React Native** and **React Navigation**.
+# Getting Started
-This app provides:
-- Profile and context card management
-- Per-Platform OAuth Connections for silent API follows
-- Advanced analytics for tracking profile views
-- The Hybrid Follow Engine (API, WebView, Link)
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
-## Getting Started
+## Step 1: Start Metro
-> **Note**: Make sure you have completed the [React Native Environment Setup](https://reactnative.dev/docs/environment-setup) guide before proceeding.
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
-### Install Dependencies
+To start the Metro dev server, run the following command from the root of your React Native project:
-```bash
-pnpm install
+```sh
+# Using npm
+npm start
+
+# OR using Yarn
+yarn start
```
-### Start Metro Bundler
+## Step 2: Build and run your app
+
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
+
+### Android
-First, start Metro, the JavaScript bundler:
+```sh
+# Using npm
+npm run android
-```bash
-pnpm start
+# OR using Yarn
+yarn android
```
-### Run on Android
+### iOS
-In a new terminal:
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
-```bash
-pnpm android
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
```
-### Run on iOS
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
-For iOS, you must install CocoaPods dependencies first (Mac only):
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
-```bash
-cd ios && pod install && cd ..
-pnpm ios
+```sh
+# Using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
```
-## Architecture
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app β you can also build it directly from Android Studio or Xcode.
+
+## Step 3: Modify your app
+
+Now that you have successfully run the app, let's make changes!
+
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes βΒ this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+
+- **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd β + M (macOS).
+- **iOS**: Press R in iOS Simulator.
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
-- **Screens**: Located in `src/screens`
-- **Navigation**: Managed via `src/navigation/MainTabs.tsx`
-- **Context API**: Handles global authentication and token management
-- **Theme**: Tokens are strictly defined in `src/theme/tokens.ts`
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
diff --git a/apps/mobile/android/README.md b/apps/mobile/android/README.md
new file mode 100644
index 00000000..90af1301
--- /dev/null
+++ b/apps/mobile/android/README.md
@@ -0,0 +1,111 @@
+# DevCard Android
+
+Native Android project for the DevCard React Native app.
+
+Use this folder for Android-specific Gradle builds, native configuration, emulator installs, and troubleshooting. For normal development, run commands from `apps/mobile` unless a command below says otherwise.
+
+## Quick Start
+
+Start Metro from `apps/mobile`:
+
+```cmd
+npx react-native start --reset-cache
+```
+
+Open a second terminal and run the Android app:
+
+```cmd
+cd /d D:\DC\apps\mobile
+npx react-native run-android -- --active-arch-only
+```
+
+`--active-arch-only` builds only the connected emulator/device architecture, which is much faster during local development.
+
+## Requirements
+
+- Node.js `>= 22.11.0`
+- Android Studio with Android SDK and emulator support
+- Java version compatible with the Android Gradle Plugin used by this project
+- npm dependencies installed from `apps/mobile`
+- An Android emulator running, or a physical device connected with USB debugging enabled
+
+Install mobile dependencies from `apps/mobile`:
+
+```cmd
+npm install --legacy-peer-deps
+```
+
+## Useful Gradle Commands
+
+Run these from `apps/mobile/android`.
+
+Build a debug APK:
+
+```cmd
+gradlew.bat app:packageDebug -PreactNativeArchitectures=x86_64
+```
+
+Install the debug build on a connected emulator/device:
+
+```cmd
+gradlew.bat app:installDebug -PreactNativeArchitectures=x86_64
+```
+
+Get detailed output for a failing build:
+
+```cmd
+gradlew.bat app:packageDebug --stacktrace -PreactNativeArchitectures=x86_64
+```
+
+## Architecture Builds
+
+`gradle.properties` currently sets:
+
+```properties
+reactNativeArchitectures=x86_64
+```
+
+This keeps Windows emulator builds smaller and faster. Override it when targeting another device architecture:
+
+```cmd
+gradlew.bat app:packageDebug -PreactNativeArchitectures=arm64-v8a
+```
+
+Use all common Android ABIs only when needed:
+
+```cmd
+gradlew.bat app:packageDebug -PreactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+```
+
+## Troubleshooting
+
+### Metro Watches `D:\packages`
+
+If Metro reports `ENOENT` for `D:\packages`, check `apps/mobile/metro.config.js`. The monorepo root should resolve to `D:\DC`, not `D:\`.
+
+### Gradle Fails At `:app:packageDebug`
+
+Rerun the package task with `--stacktrace` so the real error appears:
+
+```cmd
+gradlew.bat app:packageDebug --stacktrace -PreactNativeArchitectures=x86_64
+```
+
+### Builds Are Slow
+
+Use one of these faster local options:
+
+- `npx react-native run-android -- --active-arch-only`
+- `gradlew.bat app:packageDebug -PreactNativeArchitectures=x86_64`
+
+Avoid building every ABI unless you are preparing a broader test or release build.
+
+### Windows Long Path Errors
+
+If Windows reports paths longer than 260 characters, enable long paths from an Administrator PowerShell:
+
+```powershell
+New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force
+```
+
+Restart the terminal after changing this setting.
diff --git a/apps/mobile/android/app/src/main/AndroidManifest.xml b/apps/mobile/android/app/src/main/AndroidManifest.xml
index e69de29b..fb78f397 100644
--- a/apps/mobile/android/app/src/main/AndroidManifest.xml
+++ b/apps/mobile/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
diff --git a/apps/mobile/android/gradle.properties b/apps/mobile/android/gradle.properties
index 183b46a8..45f5a026 100644
--- a/apps/mobile/android/gradle.properties
+++ b/apps/mobile/android/gradle.properties
@@ -25,14 +25,14 @@ android.useAndroidX=true
# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+reactNativeArchitectures=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=false
+newArchEnabled=true
# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
diff --git a/apps/mobile/android/gradle/wrapper/gradle-wrapper.jar b/apps/mobile/android/gradle/wrapper/gradle-wrapper.jar
index 8bdaf60c..61285a65 100644
Binary files a/apps/mobile/android/gradle/wrapper/gradle-wrapper.jar and b/apps/mobile/android/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/apps/mobile/android/gradle/wrapper/gradle-wrapper.properties b/apps/mobile/android/gradle/wrapper/gradle-wrapper.properties
index 2a84e188..37f78a6a 100644
--- a/apps/mobile/android/gradle/wrapper/gradle-wrapper.properties
+++ b/apps/mobile/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
diff --git a/apps/mobile/android/gradlew b/apps/mobile/android/gradlew
index ef07e016..adff685a 100755
--- a/apps/mobile/android/gradlew
+++ b/apps/mobile/android/gradlew
@@ -114,7 +114,6 @@ case "$( uname )" in #(
NONSTOP* ) nonstop=true ;;
esac
-CLASSPATH="\\\"\\\""
# Determine the Java command to use to start the JVM.
@@ -172,7 +171,6 @@ fi
# 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" )
@@ -212,7 +210,6 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
- -classpath "$CLASSPATH" \
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
"$@"
diff --git a/apps/mobile/android/gradlew.bat b/apps/mobile/android/gradlew.bat
index 11bf1829..39baf4d6 100644
--- a/apps/mobile/android/gradlew.bat
+++ b/apps/mobile/android/gradlew.bat
@@ -75,11 +75,10 @@ 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" %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
:end
@rem End local scope for the variables with windows NT shell
diff --git a/apps/mobile/android/settings.gradle b/apps/mobile/android/settings.gradle
index 7a1c5313..678535d4 100644
--- a/apps/mobile/android/settings.gradle
+++ b/apps/mobile/android/settings.gradle
@@ -1,6 +1,6 @@
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-rootProject.name = 'com.devcard.app'
+rootProject.name = 'DevCard'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
diff --git a/apps/mobile/ios/DevCard/LaunchScreen.storyboard b/apps/mobile/ios/DevCard/LaunchScreen.storyboard
index 0a51e512..0db2bff1 100644
--- a/apps/mobile/ios/DevCard/LaunchScreen.storyboard
+++ b/apps/mobile/ios/DevCard/LaunchScreen.storyboard
@@ -16,7 +16,7 @@
-
+
;
logout: () => Promise;
refreshUser: () => Promise;
+ enterDemoMode: () => Promise;
}
// ββ Context βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
@@ -122,6 +124,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}
}, [token]);
+ const enterDemoMode = useCallback(async () => {
+ await login(DEMO_TOKEN);
+ }, [login]);
+
return (
{children}
diff --git a/apps/mobile/src/context/ThemeContext.tsx b/apps/mobile/src/context/ThemeContext.tsx
index 767b1b66..a740c6e1 100644
--- a/apps/mobile/src/context/ThemeContext.tsx
+++ b/apps/mobile/src/context/ThemeContext.tsx
@@ -1,19 +1,50 @@
-import React, { createContext, useContext, ReactNode } from 'react';
-import { COLORS } from '../theme/tokens';
+import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { COLORS, LIGHT_COLORS } from '../theme/tokens';
+
+const THEME_KEY = 'devcard.theme.mode';
+type ThemeMode = 'dark' | 'light';
interface ThemeContextType {
colors: typeof COLORS;
isDark: boolean;
+ mode: ThemeMode;
+ setMode: (mode: ThemeMode) => Promise;
+ toggleTheme: () => Promise;
}
const ThemeContext = createContext({
colors: COLORS,
isDark: true,
+ mode: 'dark',
+ setMode: async () => {},
+ toggleTheme: async () => {},
});
export function ThemeProvider({ children }: { children: ReactNode }) {
+ const [mode, setModeState] = useState('dark');
+
+ useEffect(() => {
+ AsyncStorage.getItem(THEME_KEY)
+ .then(value => {
+ if (value === 'light' || value === 'dark') setModeState(value);
+ })
+ .catch(() => {});
+ }, []);
+
+ const setMode = async (nextMode: ThemeMode) => {
+ setModeState(nextMode);
+ await AsyncStorage.setItem(THEME_KEY, nextMode);
+ };
+
+ const toggleTheme = async () => {
+ await setMode(mode === 'dark' ? 'light' : 'dark');
+ };
+
+ const colors = mode === 'dark' ? COLORS : LIGHT_COLORS;
+
return (
-
+
{children}
);
diff --git a/apps/mobile/src/navigation/MainTabs.tsx b/apps/mobile/src/navigation/MainTabs.tsx
index 74cb88af..8742ebc2 100644
--- a/apps/mobile/src/navigation/MainTabs.tsx
+++ b/apps/mobile/src/navigation/MainTabs.tsx
@@ -3,10 +3,12 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text, StyleSheet } from 'react-native';
import { COLORS, FONT_SIZE } from '../theme/tokens';
+import { useTheme } from '../context/ThemeContext';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import CardsScreen from '../screens/CardsScreen';
+import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ScanScreen from '../screens/ScanScreen';
import DevCardViewScreen from '../screens/DevCardViewScreen';
@@ -28,7 +30,7 @@ export type MainTabsParamList = {
Contacts: undefined;
Scan: undefined;
Cards: undefined;
- Settings: undefined;
+ Profile: undefined;
};
// Standalone type for WebViewConnect route params β exported for reuse in
@@ -54,6 +56,7 @@ export type RootStackParamList = {
Teams: undefined;
TeamDetail: { slug: string; name: string };
Nfc: undefined;
+ Settings: undefined;
};
// βββ Tab Bar Icon βββ
@@ -64,7 +67,7 @@ function TabIcon({ name, focused }: { name: string; focused: boolean }) {
Contacts: 'π',
Scan: 'π·',
Cards: 'π³',
- Settings: 'βοΈ',
+ Profile: 'π€',
};
return (
@@ -88,13 +91,15 @@ function ScanButton() {
const Tab = createBottomTabNavigator();
function TabNavigator() {
+ const { colors } = useTheme();
+
return (
({
headerShown: false,
- tabBarStyle: styles.tabBar,
- tabBarActiveTintColor: COLORS.primary,
- tabBarInactiveTintColor: COLORS.textMuted,
+ tabBarStyle: [styles.tabBar, { backgroundColor: colors.bgSecondary, borderTopColor: colors.border }],
+ tabBarActiveTintColor: colors.primary,
+ tabBarInactiveTintColor: colors.textMuted,
tabBarLabelStyle: styles.tabLabel,
tabBarIcon: ({ focused }) => (
);
}
@@ -150,6 +155,7 @@ export default function MainTabs() {
([]);
const [allLinks, setAllLinks] = useState([]);
const [showCreate, setShowCreate] = useState(false);
const [newTitle, setNewTitle] = useState('');
+ const [newDeepLink, setNewDeepLink] = useState('');
const [selectedLinkIds, setSelectedLinkIds] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [loading, setLoading] = useState(true);
+ const [cardDeepLinks, setCardDeepLinks] = useState>({});
+
+ const loadCardDeepLinks = useCallback(async () => {
+ try {
+ const raw = await AsyncStorage.getItem(CARD_DEEP_LINKS_KEY);
+ setCardDeepLinks(raw ? JSON.parse(raw) : {});
+ } catch {
+ setCardDeepLinks({});
+ }
+ }, []);
+
+ const saveCardDeepLinks = useCallback(async (next: Record) => {
+ setCardDeepLinks(next);
+ await AsyncStorage.setItem(CARD_DEEP_LINKS_KEY, JSON.stringify(next));
+ }, []);
const fetchData = useCallback(async (showLoading = true) => {
if (showLoading) setLoading(true);
try {
const [cardsData, profileData] = await Promise.all([
- get('/api/cards', token).catch(() => []),
+ get('/api/cards', token).catch(() => []),
get('/api/profiles/me', token).catch(() => null),
]);
- setCards(cardsData || []);
+ const normalizedCards: Card[] = (cardsData || []).map(card => ({
+ id: card.id,
+ title: card.title,
+ isDefault: card.isDefault,
+ links: card.links ?? card.cardLinks?.map(cl => cl.link) ?? [],
+ }));
+ setCards(normalizedCards);
setAllLinks(profileData?.platformLinks || []);
} catch (error) {
console.error('Failed to fetch:', error);
@@ -63,7 +97,8 @@ export default function CardsScreen() {
useFocusEffect(
useCallback(() => {
fetchData();
- }, [fetchData])
+ loadCardDeepLinks();
+ }, [fetchData, loadCardDeepLinks])
);
const onRefresh = () => {
@@ -76,10 +111,33 @@ export default function CardsScreen() {
Alert.alert('Error', 'Please enter a title and select at least one link');
return;
}
+
+ const formattedDeepLink = newDeepLink.trim()
+ ? (newDeepLink.includes('://') ? newDeepLink.trim() : `https://${newDeepLink.trim()}`)
+ : '';
+
+ if (formattedDeepLink) {
+ const canOpen = await Linking.canOpenURL(formattedDeepLink).catch(() => false);
+ if (!canOpen) {
+ Alert.alert('Invalid link', 'Please enter a valid deep link or URL.');
+ return;
+ }
+ }
+
try {
- await post('/api/cards', { title: newTitle.trim(), linkIds: selectedLinkIds }, token);
+ const created = await post('/api/cards', {
+ title: newTitle.trim(),
+ linkIds: selectedLinkIds,
+ }, token);
+
+ if (formattedDeepLink && created?.id) {
+ const nextLinks = { ...cardDeepLinks, [created.id]: formattedDeepLink };
+ await saveCardDeepLinks(nextLinks);
+ }
+
setShowCreate(false);
setNewTitle('');
+ setNewDeepLink('');
setSelectedLinkIds([]);
fetchData();
} catch {
@@ -114,6 +172,33 @@ export default function CardsScreen() {
fetchData();
};
+ const onCardPress = (card: Card) => {
+ const deepLink = cardDeepLinks[card.id];
+ if (!deepLink) {
+ Alert.alert('No link', 'No deep link added for this card yet.');
+ return;
+ }
+
+ Alert.alert(
+ 'Open card link?',
+ `Do you want to open the link for "${card.title}"?`,
+ [
+ { text: 'Cancel', style: 'cancel' },
+ {
+ text: 'Open',
+ onPress: async () => {
+ const canOpen = await Linking.canOpenURL(deepLink).catch(() => false);
+ if (!canOpen) {
+ Alert.alert('Unable to open', 'This link cannot be opened on this device.');
+ return;
+ }
+ await Linking.openURL(deepLink);
+ },
+ },
+ ],
+ );
+ };
+
const toggleLink = (linkId: string) => {
setSelectedLinkIds(prev =>
prev.includes(linkId)
@@ -122,10 +207,17 @@ export default function CardsScreen() {
);
};
+ const getPlatformSummary = (card: Card) => {
+ const names = (card.links ?? [])
+ .slice(0, 4)
+ .map(link => PLATFORMS[link.platform]?.name || link.platform);
+ return names.join(' Β· ');
+ };
+
if (loading) {
return (
-
-
+
-
+
- Context Cards
+ My Cards
setShowCreate(true)}>
- + New Card
+ + New card
@@ -171,59 +263,67 @@ export default function CardsScreen() {
}
renderItem={({ item }) => (
-
- {/* Card Header: Logo & Chip */}
-
-
- DevCard
-
- πΆ
-
-
- {/* Card Center: Title */}
-
- {item.title}
- CONTMEMORY ACCESS
+ onCardPress(item)}
+ style={[styles.cardTile, item.isDefault ? themed.cardDefault : themed.cardNormal]}>
+
+ {item.isDefault ? (
+
+ ACTIVE
+
+ ) : setDefault(item.id)}>
+ Edit
+
- {/* Card Footer: User & Platforms */}
-
-
- {user?.displayName || 'Card Holder'}
- {Math.random().toString(36).substring(2, 6).toUpperCase()} {Math.random().toString(36).substring(2, 6).toUpperCase()}
-
-
- {item.links.slice(0, 3).map(link => (
- +{item.links.length - 3}
- )}
+
+
+
+ {item.title}
+
+
+ {getPlatformSummary(item)}
+
+ {(item.links ?? []).length} platforms
+ {cardDeepLinks[item.id] ? (
+
+
+ ) : (
+
+ No QR link
+
+ )}
+
- {/* Glass Overlay for Default */}
- {item.isDefault &&
-
- {/* Card Actions Below the Card */}
- {!item.isDefault ? (
- setDefault(item.id)} style={styles.actionBtn}>
- Set as Primary
-
- ) : (
-
- ACTIVE CARD
-
- )}
+ deleteCard(item.id)} style={styles.deleteBtn}>
Delete
)}
+ ListFooterComponent={
+
+ setShowCreate(true)}>
+ + Create a new context card
+ e.g. "Open Source" or "Job Search"
+
+
+ Tip: select active card before opening Share screen
+
+
+ }
ListEmptyComponent={
-
+
Create Card
Select platforms to include:
{allLinks.length === 0 ? (
@@ -255,10 +364,10 @@ export default function CardsScreen() {
allLinks.map(link => (
toggleLink(link.id)}>
+
{PLATFORMS[link.platform]?.name || link.platform} β {link.username}
{selectedLinkIds.includes(link.id) && β }
@@ -270,7 +379,7 @@ export default function CardsScreen() {
{ setShowCreate(false); setNewTitle(''); setSelectedLinkIds([]); }}>
+ onPress={() => { setShowCreate(false); setNewTitle(''); setNewDeepLink(''); setSelectedLinkIds([]); }}>
Cancel
@@ -288,7 +397,7 @@ const styles = StyleSheet.create({
},
title: { fontSize: FONT_SIZE.xl, fontWeight: '800', color: COLORS.textPrimary },
addButton: {
- backgroundColor: COLORS.primary, borderRadius: BORDER_RADIUS.sm,
+ backgroundColor: '#1E1E1E', borderRadius: BORDER_RADIUS.md,
paddingHorizontal: SPACING.md, paddingVertical: SPACING.xs,
},
addButtonText: { color: COLORS.white, fontWeight: '600', fontSize: FONT_SIZE.sm },
@@ -364,150 +473,231 @@ const styles = StyleSheet.create({
textAlign: 'center',
},
// Premium Card Styles
- cardContainer: {
- marginBottom: SPACING.xl,
- },
+ cardContainer: { marginBottom: SPACING.md },
defaultCardContainer: {},
- premiumCard: {
- width: '100%',
- aspectRatio: 1.58,
- borderRadius: 20,
- padding: SPACING.lg,
- justifyContent: 'space-between',
- overflow: 'hidden',
- position: 'relative',
- ...SHADOWS.card,
+ cardTile: {
+ borderRadius: BORDER_RADIUS.lg,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: SPACING.md,
+ borderWidth: 1,
},
cardNormal: {
- backgroundColor: '#1E293B',
+ backgroundColor: COLORS.bgCard,
borderWidth: 1,
- borderColor: 'rgba(255,255,255,0.1)',
+ borderColor: COLORS.border,
},
cardDefault: {
- backgroundColor: '#0F172A',
- borderWidth: 1.5,
+ backgroundColor: '#1D2B3A',
+ borderWidth: 1,
borderColor: COLORS.primary,
},
- cardHeader: {
+ cardTopRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
+ marginBottom: SPACING.sm,
},
- cardBrand: {
- flexDirection: 'row',
- alignItems: 'center',
- gap: 10,
- },
- chip: {
- width: 35,
- height: 25,
- borderRadius: 4,
- backgroundColor: '#D1D5DB',
- opacity: 0.8,
- },
- brandText: {
- color: 'rgba(255,255,255,0.6)',
- fontSize: 12,
- fontWeight: '700',
- letterSpacing: 1,
- textTransform: 'uppercase',
+ activePill: {
+ backgroundColor: COLORS.primary,
+ borderRadius: 999,
+ paddingHorizontal: SPACING.sm,
+ paddingVertical: 4,
},
- contactless: {
- fontSize: 20,
- opacity: 0.5,
- },
- cardCenter: {
- marginTop: SPACING.md,
- },
- premiumCardTitle: {
- fontSize: 28,
- fontWeight: '800',
+ activePillText: {
color: COLORS.white,
+ fontSize: FONT_SIZE.xs,
+ fontWeight: '700',
letterSpacing: 0.5,
},
- cardType: {
- fontSize: 8,
- color: 'rgba(255,255,255,0.4)',
- fontWeight: '700',
- letterSpacing: 2,
- marginTop: 4,
+ editText: {
+ color: COLORS.primaryLight,
+ fontSize: FONT_SIZE.md,
+ fontWeight: '500',
},
- cardFooter: {
+ cardContentRow: {
flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'flex-end',
+ alignItems: 'center',
+ gap: SPACING.md,
},
- userInfo: {
+ cardDetails: {
flex: 1,
},
- userName: {
- fontSize: 14,
- color: 'rgba(255,255,255,0.8)',
- fontWeight: '600',
- textTransform: 'uppercase',
- letterSpacing: 1,
- },
- cardId: {
- fontSize: 10,
- color: 'rgba(255,255,255,0.3)',
- fontFamily: 'monospace',
- marginTop: 2,
+ qrContainer: {
+ backgroundColor: COLORS.white,
+ borderRadius: BORDER_RADIUS.sm,
+ padding: SPACING.xs,
},
- platformIcons: {
- flexDirection: 'row',
+ qrPlaceholder: {
+ width: 80,
+ height: 80,
alignItems: 'center',
- gap: 6,
+ justifyContent: 'center',
+ borderRadius: BORDER_RADIUS.sm,
+ borderWidth: 1,
+ borderStyle: 'dashed',
+ borderColor: COLORS.border,
},
- platformDot: {
- width: 10,
- height: 10,
- borderRadius: 5,
+ qrPlaceholderText: {
+ color: COLORS.textMuted,
+ fontSize: FONT_SIZE.xs,
+ textAlign: 'center',
},
- morePlatforms: {
- fontSize: 10,
- color: 'rgba(255,255,255,0.5)',
- fontWeight: '700',
+ cardName: {
+ fontSize: 34,
+ fontWeight: '800',
+ color: COLORS.textPrimary,
+ marginBottom: 4,
+ },
+ cardNameActive: {
+ color: '#8BC4FF',
+ },
+ platformSummary: {
+ color: COLORS.textSecondary,
+ fontSize: FONT_SIZE.md,
+ marginBottom: SPACING.sm,
},
- glassOverlay: {
- ...StyleSheet.absoluteFillObject,
- backgroundColor: 'rgba(255,255,255,0.03)',
+ platformCount: {
+ alignSelf: 'flex-start',
+ color: COLORS.textMuted,
+ backgroundColor: 'rgba(255,255,255,0.06)',
+ borderRadius: 999,
+ paddingHorizontal: SPACING.sm,
+ paddingVertical: 3,
+ fontSize: FONT_SIZE.xs,
},
actionRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
- marginTop: SPACING.md,
+ marginTop: SPACING.xs,
paddingHorizontal: SPACING.xs,
},
- actionBtn: {
- paddingVertical: 6,
- paddingHorizontal: 12,
- borderRadius: 6,
- backgroundColor: 'rgba(99, 102, 241, 0.1)',
+ deleteBtn: {
+ paddingVertical: 4,
+ paddingHorizontal: 10,
},
- actionBtnText: {
- color: COLORS.primary,
+ deleteBtnText: {
+ color: 'rgba(239, 68, 68, 0.6)',
fontSize: 12,
fontWeight: '600',
},
- activeBadge: {
- flexDirection: 'row',
+ createTile: {
+ marginTop: SPACING.sm,
+ borderRadius: BORDER_RADIUS.lg,
+ borderWidth: 1,
+ borderStyle: 'dashed',
+ borderColor: COLORS.border,
+ backgroundColor: COLORS.bgSecondary,
+ paddingVertical: SPACING.xl,
alignItems: 'center',
- gap: 4,
},
- activeBadgeText: {
- color: COLORS.success,
- fontSize: 10,
- fontWeight: '800',
- letterSpacing: 1,
+ createTileTitle: {
+ color: COLORS.textSecondary,
+ fontSize: FONT_SIZE.lg,
+ fontWeight: '500',
},
- deleteBtn: {
- paddingVertical: 6,
- paddingHorizontal: 10,
+ createTileSub: {
+ color: COLORS.textMuted,
+ fontSize: FONT_SIZE.sm,
+ marginTop: SPACING.xs,
},
- deleteBtnText: {
- color: 'rgba(239, 68, 68, 0.6)',
- fontSize: 12,
- fontWeight: '600',
+ tipCard: {
+ marginTop: SPACING.md,
+ backgroundColor: 'rgba(245, 158, 11, 0.12)',
+ borderColor: 'rgba(245, 158, 11, 0.45)',
+ borderWidth: 1,
+ borderRadius: BORDER_RADIUS.md,
+ paddingVertical: SPACING.md,
+ paddingHorizontal: SPACING.md,
+ },
+ tipText: {
+ color: '#F4C27A',
+ fontSize: FONT_SIZE.sm,
+ textAlign: 'center',
},
});
+
+function createCardsThemedStyles(colors: typeof COLORS) {
+ return StyleSheet.create({
+ container: { flex: 1, backgroundColor: colors.bgPrimary },
+ title: { fontSize: FONT_SIZE.xl, fontWeight: '800', color: colors.textPrimary },
+ cardNormal: {
+ backgroundColor: colors.bgCard,
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ cardDefault: {
+ backgroundColor: colors.bgElevated,
+ borderWidth: 1,
+ borderColor: colors.primary,
+ },
+ cardName: {
+ fontSize: 34,
+ fontWeight: '800',
+ color: colors.textPrimary,
+ marginBottom: 4,
+ },
+ platformSummary: {
+ color: colors.textSecondary,
+ fontSize: FONT_SIZE.md,
+ marginBottom: SPACING.sm,
+ },
+ platformCount: {
+ alignSelf: 'flex-start',
+ color: colors.textMuted,
+ backgroundColor: colors.bgSecondary,
+ borderRadius: 999,
+ paddingHorizontal: SPACING.sm,
+ paddingVertical: 3,
+ fontSize: FONT_SIZE.xs,
+ },
+ createTile: {
+ marginTop: SPACING.sm,
+ borderRadius: BORDER_RADIUS.lg,
+ borderWidth: 1,
+ borderStyle: 'dashed',
+ borderColor: colors.border,
+ backgroundColor: colors.bgSecondary,
+ paddingVertical: SPACING.xl,
+ alignItems: 'center',
+ },
+ createTileTitle: {
+ color: colors.textSecondary,
+ fontSize: FONT_SIZE.lg,
+ fontWeight: '500',
+ },
+ createTileSub: {
+ color: colors.textMuted,
+ fontSize: FONT_SIZE.sm,
+ marginTop: SPACING.xs,
+ },
+ modalContent: {
+ backgroundColor: colors.bgSecondary,
+ borderTopLeftRadius: BORDER_RADIUS.xl,
+ borderTopRightRadius: BORDER_RADIUS.xl,
+ padding: SPACING.lg,
+ maxHeight: '80%',
+ },
+ input: {
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.md,
+ padding: SPACING.md,
+ color: colors.textPrimary,
+ fontSize: FONT_SIZE.md,
+ borderWidth: 1,
+ borderColor: colors.border,
+ marginBottom: SPACING.md,
+ },
+ linkOption: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.sm,
+ padding: SPACING.md,
+ marginBottom: SPACING.xs,
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ linkOptionText: { flex: 1, fontSize: FONT_SIZE.sm, color: colors.textPrimary, marginLeft: SPACING.sm },
+ });
+}
diff --git a/apps/mobile/src/screens/ContactsScreen.tsx b/apps/mobile/src/screens/ContactsScreen.tsx
index a657592a..f591ac6f 100644
--- a/apps/mobile/src/screens/ContactsScreen.tsx
+++ b/apps/mobile/src/screens/ContactsScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
import {
View,
Text,
@@ -7,6 +7,7 @@ import {
TouchableOpacity,
Alert,
StatusBar,
+ TextInput,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useFocusEffect } from '@react-navigation/native';
@@ -15,6 +16,7 @@ import { EmptyState } from '../components/EmptyState';
import { LoadingPlaceholder } from '../components/LoadingPlaceholder';
import { useContacts } from '../hooks/useContacts';
import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS } from '../theme/tokens';
+import { useTheme } from '../context/ThemeContext';
import type { SavedContact } from '../types';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import type { RootStackParamList } from '../navigation/MainTabs';
@@ -25,6 +27,10 @@ type Props = {
export default function ContactsScreen({ navigation }: Props) {
const { contacts, loading, removeContact, refetch } = useContacts();
+ const { colors, isDark } = useTheme();
+ const themed = React.useMemo(() => createContactsThemedStyles(colors), [colors]);
+ const [query, setQuery] = useState('');
+ const [activeFilter, setActiveFilter] = useState<'all' | 'week' | 'osd'>('all');
useFocusEffect(
useCallback(() => {
@@ -53,34 +59,84 @@ export default function ContactsScreen({ navigation }: Props) {
const formatDate = (dateString: string) => {
const d = new Date(dateString);
- return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+ const diffDays = Math.floor((Date.now() - d.getTime()) / (1000 * 60 * 60 * 24));
+ if (diffDays <= 0) return 'today';
+ if (diffDays === 1) return '1 day ago';
+ if (diffDays < 7) return `${diffDays} days ago`;
+ const weeks = Math.floor(diffDays / 7);
+ if (weeks === 1) return '1 week ago';
+ return `${weeks} weeks ago`;
+ };
+
+ const filteredContacts = useMemo(() => {
+ const q = query.trim().toLowerCase();
+ return contacts.filter((c) => {
+ const haystack = [c.displayName, c.username, c.role, c.company, c.metAt, c.bio]
+ .filter(Boolean)
+ .join(' ')
+ .toLowerCase();
+ const matchesQuery = q.length === 0 || haystack.includes(q);
+ if (!matchesQuery) return false;
+
+ if (activeFilter === 'all') return true;
+ if (activeFilter === 'week') {
+ const days = Math.floor((Date.now() - new Date(c.savedAt).getTime()) / (1000 * 60 * 60 * 24));
+ return days <= 7;
+ }
+ return [c.metAt, c.company, c.bio].filter(Boolean).join(' ').toLowerCase().includes('osd');
+ });
+ }, [contacts, query, activeFilter]);
+
+ const getTag = (contact: SavedContact) => {
+ const source = `${contact.bio || ''} ${contact.company || ''}`.toLowerCase();
+ if (source.includes('github')) return 'GitHub';
+ if (source.includes('linkedin')) return 'LinkedIn';
+ if (source.includes('devfolio')) return 'Devfolio';
+ if (source.includes('twitter') || source.includes('x.com')) return 'Twitter';
+ return contact.company || contact.role || 'Saved';
};
if (loading) {
return (
-
-
+
);
}
return (
-
-
+
- Saved Contacts
- {contacts.length}
+ Saved Cards
+ β
+
+
+
+
+
+
+ setActiveFilter('all')} />
+ setActiveFilter('week')} />
+ setActiveFilter('osd')} />
item.username}
contentContainerStyle={styles.list}
renderItem={({ item }) => (
handlePress(item)}
onLongPress={() => handleRemove(item)}
activeOpacity={0.7}>
@@ -91,26 +147,25 @@ export default function ContactsScreen({ navigation }: Props) {
style={styles.avatar}
/>
-
+
{item.displayName}
- {item.role || item.company ? (
-
- {[item.role, item.company].filter(Boolean).join(' Β· ')}
-
- ) : null}
- {item.metAt ? (
-
- Met at {item.metAt}
-
- ) : null}
-
-
- {formatDate(item.savedAt)}
+
+ {[item.metAt || item.company || item.role || 'Event', formatDate(item.savedAt)].join(' Β· ')}
+
+
+ {getTag(item)}
+
+ βΊ
)}
+ ListFooterComponent={
+
+ β Tap contact to view
+ Where met Β· note Β· re-share
+
+ }
ListEmptyComponent={
void;
+}) {
+ return (
+
+ {label}
+
+ );
+}
+
+const stylesChip = StyleSheet.create({
+ chip: {
+ borderRadius: BORDER_RADIUS.full,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: 7,
+ borderWidth: 1,
+ },
+ text: { fontSize: FONT_SIZE.sm, fontWeight: '500' },
});
+
+function createContactsThemedStyles(colors: typeof COLORS) {
+ return StyleSheet.create({
+ container: { flex: 1, backgroundColor: colors.bgPrimary },
+ title: { fontSize: FONT_SIZE.xl, fontWeight: '800', color: colors.textPrimary },
+ headerIcon: {
+ color: colors.textSecondary,
+ fontSize: FONT_SIZE.xl,
+ fontWeight: '700',
+ },
+ searchInput: {
+ backgroundColor: colors.bgCard,
+ borderWidth: 1,
+ borderColor: colors.border,
+ color: colors.textPrimary,
+ borderRadius: BORDER_RADIUS.md,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: SPACING.sm,
+ fontSize: FONT_SIZE.md,
+ },
+ contactItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.md,
+ padding: SPACING.md,
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ name: { fontSize: FONT_SIZE.md, fontWeight: '600', color: colors.textPrimary },
+ detail: { fontSize: FONT_SIZE.sm, color: colors.textSecondary, marginTop: 2 },
+ tagPill: {
+ alignSelf: 'flex-start',
+ marginTop: 6,
+ backgroundColor: colors.bgSecondary,
+ borderRadius: BORDER_RADIUS.full,
+ paddingHorizontal: SPACING.sm,
+ paddingVertical: 3,
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ tagText: { color: colors.primaryLight, fontSize: FONT_SIZE.xs },
+ chevron: { color: colors.textMuted, fontSize: FONT_SIZE.lg, marginLeft: SPACING.sm },
+ footerNote: {
+ marginTop: SPACING.sm,
+ borderRadius: BORDER_RADIUS.md,
+ borderStyle: 'dashed',
+ borderWidth: 1,
+ borderColor: colors.border,
+ backgroundColor: colors.bgSecondary,
+ paddingVertical: SPACING.lg,
+ alignItems: 'center',
+ },
+ footerTitle: { color: colors.textSecondary, fontSize: FONT_SIZE.md, fontWeight: '500' },
+ footerSub: { color: colors.textMuted, fontSize: FONT_SIZE.sm, marginTop: 4 },
+ });
+}
diff --git a/apps/mobile/src/screens/DevCardViewScreen.tsx b/apps/mobile/src/screens/DevCardViewScreen.tsx
index 7d6de992..3698c862 100644
--- a/apps/mobile/src/screens/DevCardViewScreen.tsx
+++ b/apps/mobile/src/screens/DevCardViewScreen.tsx
@@ -527,7 +527,11 @@ const styles = StyleSheet.create({
backgroundColor: 'rgba(99,102,241,0.12)',
},
cardGlass: {
- ...StyleSheet.absoluteFillObject,
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
backgroundColor: 'rgba(255,255,255,0.015)',
},
cardTop: {
diff --git a/apps/mobile/src/screens/HomeScreen.tsx b/apps/mobile/src/screens/HomeScreen.tsx
index b4d504b2..7b7c72e2 100644
--- a/apps/mobile/src/screens/HomeScreen.tsx
+++ b/apps/mobile/src/screens/HomeScreen.tsx
@@ -1,23 +1,21 @@
import React, { useState, useEffect, useCallback } from 'react';
import {
+ Alert,
+ Linking,
View,
Text,
StyleSheet,
ScrollView,
TouchableOpacity,
- Share,
StatusBar,
RefreshControl,
- TextInput,
} from 'react-native';
import { Skeleton } from '../components/Skeleton';
-import Avatar from '../components/Avatar';
import { SafeAreaView } from 'react-native-safe-area-context';
import QRCode from 'react-native-qrcode-svg';
import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS, SHADOWS } from '../theme/tokens';
import { useAuth } from '../context/AuthContext';
-import { PLATFORMS } from '@devcard/shared';
-import { APP_URL } from '../config';
+import { useTheme } from '../context/ThemeContext';
import { get } from '../services/api';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import type { RootStackParamList } from '../navigation/MainTabs';
@@ -26,41 +24,18 @@ type Props = {
navigation: NativeStackNavigationProp;
};
-interface PlatformLink {
- id: string;
- platform: string;
- username: string;
- url: string;
- displayOrder: number;
-}
-
export default function HomeScreen({ navigation }: Props) {
- const { user, token } = useAuth();
- const [links, setLinks] = useState([]);
- const [analytics, setAnalytics] = useState(null);
- const [showQR, setShowQR] = useState(false);
+ const { token } = useAuth();
+ const { colors, isDark } = useTheme();
+ const themed = React.useMemo(() => createThemedStyles(colors), [colors]);
const [refreshing, setRefreshing] = useState(false);
const [loading, setLoading] = useState(true);
- const [searchUsername, setSearchUsername] = useState('');
-
- const profileUrl = user?.defaultCardId
- ? `${APP_URL}/devcard/${user.defaultCardId}`
- : `${APP_URL}/u/${user?.username}`;
+ const repoUrl = 'https://github.com/Dev-Card/DevCard';
const fetchData = useCallback(async () => {
setLoading(true);
try {
- const [profileData, analyticsData] = await Promise.all([
- get('/api/profiles/me', token).catch(() => null),
- get('/api/analytics/overview', token).catch(() => null),
- ]);
-
- if (profileData) {
- setLinks(profileData.platformLinks || []);
- }
- if (analyticsData) {
- setAnalytics(analyticsData);
- }
+ await get('/api/profiles/me', token).catch(() => null);
} catch (error) {
console.error('Failed to fetch dashboard data:', error);
} finally {
@@ -78,22 +53,22 @@ export default function HomeScreen({ navigation }: Props) {
setRefreshing(false);
};
- const handleShare = async () => {
- try {
- await Share.share({
- message: `Check out my DevCard: ${profileUrl}`,
- url: profileUrl,
- });
- } catch (error) {
- console.error('Share failed:', error);
- }
+ const openRepo = (title: string) => {
+ Alert.alert(
+ 'Open card link?',
+ `Open ${title} in your browser?`,
+ [
+ { text: 'Cancel', style: 'cancel' },
+ { text: 'Open', onPress: () => Linking.openURL(repoUrl) },
+ ],
+ );
};
if (loading) {
return (
-
-
+
+
-
+
- Hello,
- {user?.displayName || 'Developer'} π
-
+ Dashboard
- {/* Profile Card Preview */}
-
-
-
- {user?.displayName}
- {user?.pronouns && (
- {user.pronouns}
- )}
- {user?.role && (
-
- {user.role}
- {user.company ? ` @ ${user.company}` : ''}
-
- )}
+ openRepo('Current Active Card')}>
+
+ CURRENT ACTIVE CARD
+ Open β
+
+
+
+ DevCard Repository
+ {repoUrl}
+
+
+
+
- {user?.bio && {user.bio} }
-
- {/* Platform Links Summary */}
-
- {links.length > 0 ? (
- <>
- {links.slice(0, 4).map(link => {
- const platform = PLATFORMS[link.platform];
- return (
-
-
- {platform?.name || link.platform}
-
-
- );
- })}
- {links.length > 4 && (
-
- +{links.length - 4}
-
- )}
-
- ) : (
- No platform links added yet. Add links in the Links tab to populate your preview.
- )}
+ openRepo('Main repo saved card')}>
+
+ SAVED CARD
+ Open β
-
-
- {/* QR Code Section */}
- setShowQR(!showQR)}
- activeOpacity={0.85}>
- {showQR ? (
-
- Scan to open your DevCard
+
+
+ main repo
+ {repoUrl}
- ) : (
-
- π±
- Tap to show QR code
+
+
- )}
+
- {/* Action Buttons */}
-
-
- π€
- Share
-
-
- (navigation as any).navigate('Views')}
- activeOpacity={0.85}>
- π
- Stats
-
-
- (navigation as any).navigate('DevCardView', { username: user?.username || '' })}
- activeOpacity={0.85}>
- ποΈ
- Preview
-
-
- (navigation as any).navigate('Links')}
- activeOpacity={0.85}>
- π
- Links
-
-
-
-
- (navigation as any).navigate('Events')}
- activeOpacity={0.85}>
- πͺ
- Events
-
-
- (navigation as any).navigate('Teams')}
- activeOpacity={0.85}>
- π₯
- Teams
+
+ (navigation as any).navigate('Cards')}>
+ Manage Cards
-
- (navigation as any).navigate('Nfc')}
- activeOpacity={0.85}>
- π³
- NFC
+ (navigation as any).navigate('Contacts')}>
+ Saved Cards
-
-
- {/* Search / Lookup */}
-
- π View a DevCard
-
- {
- const u = searchUsername.trim();
- if (u) (navigation as any).navigate('DevCardView', { username: u });
- }}
- />
- {
- const u = searchUsername.trim();
- if (u) (navigation as any).navigate('DevCardView', { username: u });
- }}
- >
- Go β
-
-
-
-
- {/* Stats */}
-
-
- {links.length}
- Links
-
-
- {analytics?.totalViews || 0}
- Views
-
-
- {analytics?.followsCount || 0}
- Follows
-
@@ -425,4 +258,165 @@ const styles = StyleSheet.create({
justifyContent: 'center', alignItems: 'center',
},
searchBtnText: { color: COLORS.white, fontWeight: '700', fontSize: FONT_SIZE.md },
+ cardTopRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ marginBottom: SPACING.md,
+ },
+ cardContentRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: SPACING.md,
+ },
+ cardCopy: {
+ flex: 1,
+ },
});
+
+function createThemedStyles(colors: typeof COLORS) {
+ return StyleSheet.create({
+ container: { flex: 1, backgroundColor: colors.bgPrimary },
+ loadingRoot: {
+ flex: 1,
+ padding: SPACING.lg,
+ backgroundColor: colors.bgPrimary,
+ },
+ pageTitle: {
+ color: colors.textPrimary,
+ fontSize: FONT_SIZE.xxl,
+ fontWeight: '800',
+ marginBottom: SPACING.lg,
+ },
+ homeCard: {
+ backgroundColor: colors.bgCard,
+ borderColor: colors.border,
+ borderWidth: 1,
+ borderRadius: BORDER_RADIUS.lg,
+ padding: SPACING.lg,
+ marginBottom: SPACING.md,
+ },
+ activeHomeCard: {
+ backgroundColor: colors.bgElevated,
+ borderColor: colors.primary,
+ },
+ cardEyebrow: {
+ color: colors.primaryLight,
+ fontSize: FONT_SIZE.xs,
+ fontWeight: '800',
+ letterSpacing: 0.8,
+ },
+ openHint: {
+ color: colors.textSecondary,
+ fontSize: FONT_SIZE.sm,
+ fontWeight: '600',
+ },
+ cardTitle: {
+ color: colors.textPrimary,
+ fontSize: FONT_SIZE.xl,
+ fontWeight: '800',
+ marginBottom: SPACING.xs,
+ },
+ cardSubtitle: {
+ color: colors.textSecondary,
+ fontSize: FONT_SIZE.sm,
+ lineHeight: 20,
+ },
+ qrBox: {
+ width: 88,
+ height: 88,
+ borderRadius: BORDER_RADIUS.md,
+ backgroundColor: colors.bgCard,
+ borderWidth: 1,
+ borderColor: colors.border,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ quickActions: {
+ flexDirection: 'row',
+ gap: SPACING.sm,
+ marginTop: SPACING.sm,
+ },
+ quickButton: {
+ flex: 1,
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.md,
+ borderWidth: 1,
+ borderColor: colors.border,
+ paddingVertical: SPACING.md,
+ alignItems: 'center',
+ },
+ quickButtonText: {
+ color: colors.textPrimary,
+ fontSize: FONT_SIZE.sm,
+ fontWeight: '700',
+ },
+ greeting: { fontSize: FONT_SIZE.md, color: colors.textSecondary },
+ displayName: { fontSize: FONT_SIZE.xxl, fontWeight: '800', color: colors.textPrimary },
+ qrSection: {
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.lg,
+ padding: SPACING.lg,
+ borderWidth: 1,
+ borderColor: colors.border,
+ alignItems: 'center',
+ marginBottom: SPACING.lg,
+ },
+ qrHint: { fontSize: FONT_SIZE.sm, color: colors.textMuted },
+ qrToggleText: { fontSize: FONT_SIZE.md, color: colors.textSecondary, fontWeight: '500' },
+ actionButton: {
+ flex: 1,
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.md,
+ padding: SPACING.sm,
+ paddingVertical: SPACING.md,
+ alignItems: 'center',
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ actionText: { fontSize: FONT_SIZE.sm, color: colors.textPrimary, fontWeight: '600' },
+ searchLabel: {
+ fontSize: FONT_SIZE.sm,
+ fontWeight: '700',
+ color: colors.textSecondary,
+ marginBottom: SPACING.sm,
+ letterSpacing: 0.3,
+ },
+ searchInput: {
+ flex: 1,
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.md,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: 12,
+ color: colors.textPrimary,
+ fontSize: FONT_SIZE.md,
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ searchBtn: {
+ backgroundColor: colors.primary,
+ borderRadius: BORDER_RADIUS.md,
+ paddingHorizontal: SPACING.lg,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ lookupCard: {
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.lg,
+ borderWidth: 1,
+ borderColor: colors.border,
+ padding: SPACING.lg,
+ },
+ stats: {
+ flexDirection: 'row',
+ backgroundColor: colors.bgCard,
+ borderRadius: BORDER_RADIUS.md,
+ padding: SPACING.lg,
+ borderWidth: 1,
+ borderColor: colors.border,
+ },
+ statNumber: { fontSize: FONT_SIZE.xl, fontWeight: '800', color: colors.primary },
+ statLabel: { fontSize: FONT_SIZE.xs, color: colors.textMuted, marginTop: 4 },
+ statDivider: { width: 1, backgroundColor: colors.border },
+ });
+}
diff --git a/apps/mobile/src/screens/LinksScreen.tsx b/apps/mobile/src/screens/LinksScreen.tsx
index fd420275..d0235940 100644
--- a/apps/mobile/src/screens/LinksScreen.tsx
+++ b/apps/mobile/src/screens/LinksScreen.tsx
@@ -14,7 +14,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS } from '../theme/tokens';
import { useAuth } from '../context/AuthContext';
import { PLATFORMS, getAllPlatforms } from '@devcard/shared';
-import { get, post, del } from '../services/api';
+import { get, post, put, del } from '../services/api';
import { EmptyState } from '../components/EmptyState';
import { LoadingPlaceholder } from '../components/LoadingPlaceholder';
import type { PlatformDef } from '@devcard/shared';
diff --git a/apps/mobile/src/screens/LoginScreen.tsx b/apps/mobile/src/screens/LoginScreen.tsx
index 65ca100e..15a668bf 100644
--- a/apps/mobile/src/screens/LoginScreen.tsx
+++ b/apps/mobile/src/screens/LoginScreen.tsx
@@ -8,10 +8,13 @@ import {
StatusBar,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
-import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS, SHADOWS } from '../theme/tokens';
+import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS } from '../theme/tokens';
import { API_BASE_URL } from '../config';
+import { useAuth } from '../context/AuthContext';
export default function LoginScreen() {
+ const { enterDemoMode } = useAuth();
+
const handleGitHubLogin = () => {
Linking.openURL(`${API_BASE_URL}/auth/github?state=mobile_github`);
};
@@ -25,15 +28,18 @@ export default function LoginScreen() {
+
- β‘
- Welcome to DevCard
-
- Sign in to create your developer card
-
+
+ β‘
+ DevCard
+
+ One Tap.{"\n"}Every Profile.
+ Stop sharing one profile at a time.
-
+
Continue with GitHub
+
+ π§ͺ
+ Continue in Demo Mode
+
+
Continue with Google
+
+ or
+
+
+
+ Sign up with email β
+
+
- By signing in, you agree to the DevCard Terms of Service and
- Privacy Policy.
+ By continuing you agree to our Terms & Privacy Policy.
@@ -67,34 +90,52 @@ const styles = StyleSheet.create({
},
content: {
flex: 1,
- justifyContent: 'center',
+ justifyContent: 'space-between',
paddingHorizontal: SPACING.lg,
+ paddingBottom: SPACING.xl,
+ },
+ topSpace: {
+ height: SPACING.md,
},
header: {
alignItems: 'center',
- marginBottom: SPACING.xxl,
+ marginTop: SPACING.xl,
+ marginBottom: SPACING.xl,
+ },
+ logoCard: {
+ width: 126,
+ height: 126,
+ borderRadius: BORDER_RADIUS.lg,
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ backgroundColor: COLORS.bgCard,
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginBottom: SPACING.lg,
},
logo: {
- fontSize: 48,
- marginBottom: SPACING.md,
+ fontSize: 36,
+ marginBottom: SPACING.xs,
+ },
+ logoText: {
+ color: COLORS.textMuted,
+ fontSize: FONT_SIZE.sm,
},
title: {
- fontSize: FONT_SIZE.xxl,
+ textAlign: 'center',
+ fontSize: 40,
fontWeight: '800',
color: COLORS.textPrimary,
+ lineHeight: 44,
},
subtitle: {
- fontSize: FONT_SIZE.md,
+ textAlign: 'center',
+ fontSize: FONT_SIZE.lg,
color: COLORS.textSecondary,
- marginTop: SPACING.sm,
+ marginTop: SPACING.md,
},
- card: {
- backgroundColor: COLORS.bgCardGlass,
- borderRadius: BORDER_RADIUS.lg,
- padding: SPACING.lg,
- borderWidth: 1,
- borderColor: COLORS.border,
- ...SHADOWS.card,
+ authBlock: {
+ gap: SPACING.md,
},
oauthButton: {
flexDirection: 'row',
@@ -102,13 +143,19 @@ const styles = StyleSheet.create({
justifyContent: 'center',
paddingVertical: SPACING.md,
borderRadius: BORDER_RADIUS.md,
- marginBottom: SPACING.md,
+ borderWidth: 1,
},
githubButton: {
- backgroundColor: COLORS.white,
+ backgroundColor: COLORS.bgCard,
+ borderColor: COLORS.borderLight,
},
googleButton: {
- backgroundColor: COLORS.white,
+ backgroundColor: COLORS.bgCard,
+ borderColor: COLORS.border,
+ },
+ demoButton: {
+ backgroundColor: COLORS.primaryDark,
+ borderColor: COLORS.primary,
},
oauthIcon: {
fontSize: 20,
@@ -117,13 +164,39 @@ const styles = StyleSheet.create({
oauthText: {
fontSize: FONT_SIZE.md,
fontWeight: '600',
- color: COLORS.textInverse,
+ color: COLORS.textPrimary,
+ },
+ demoText: {
+ fontSize: FONT_SIZE.md,
+ fontWeight: '700',
+ color: COLORS.white,
+ },
+ orRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: SPACING.xs,
+ },
+ orLine: {
+ flex: 1,
+ height: 1,
+ backgroundColor: COLORS.border,
+ },
+ orText: {
+ color: COLORS.textMuted,
+ marginHorizontal: SPACING.md,
+ fontSize: FONT_SIZE.sm,
+ },
+ emailLink: {
+ textAlign: 'center',
+ color: COLORS.primaryLight,
+ fontSize: FONT_SIZE.lg,
+ fontWeight: '600',
},
terms: {
fontSize: FONT_SIZE.xs,
color: COLORS.textMuted,
textAlign: 'center',
- marginTop: SPACING.sm,
+ marginTop: SPACING.md,
lineHeight: 18,
},
});
diff --git a/apps/mobile/src/screens/ProfileScreen.tsx b/apps/mobile/src/screens/ProfileScreen.tsx
new file mode 100644
index 00000000..dc48750b
--- /dev/null
+++ b/apps/mobile/src/screens/ProfileScreen.tsx
@@ -0,0 +1,245 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+ Alert,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ TextInput,
+ TouchableOpacity,
+ View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS } from '../theme/tokens';
+import { get, put } from '../services/api';
+import { useAuth } from '../context/AuthContext';
+import { useTheme } from '../context/ThemeContext';
+import { PLATFORMS } from '@devcard/shared';
+
+type PlatformLink = {
+ id: string;
+ platform: string;
+ username: string;
+ url: string;
+};
+
+export default function ProfileScreen() {
+ const navigation = useNavigation();
+ const { user, token, refreshUser } = useAuth();
+ const { colors, isDark } = useTheme();
+ const [displayName, setDisplayName] = useState(user?.displayName || '');
+ const [bio, setBio] = useState(user?.bio || '');
+ const [pronouns, setPronouns] = useState(user?.pronouns || '');
+ const [links, setLinks] = useState([]);
+ const [saving, setSaving] = useState(false);
+
+ useEffect(() => {
+ setDisplayName(user?.displayName || '');
+ setBio(user?.bio || '');
+ setPronouns(user?.pronouns || '');
+ }, [user]);
+
+ useEffect(() => {
+ const loadProfile = async () => {
+ const data = await get('/api/profiles/me', token).catch(() => null);
+ setLinks(data?.platformLinks || []);
+ };
+ loadProfile();
+ }, [token]);
+
+ const shownLinks = useMemo(() => links.slice(0, 2), [links]);
+ const hiddenCount = Math.max(links.length - shownLinks.length, 0);
+
+ const handleSave = async () => {
+ setSaving(true);
+ try {
+ await put('/api/profiles/me', {
+ displayName: displayName.trim() || undefined,
+ bio: bio.trim() || null,
+ pronouns: pronouns.trim() || null,
+ }, token);
+ await refreshUser();
+ Alert.alert('Saved', 'Profile updated successfully.');
+ } catch {
+ Alert.alert('Error', 'Unable to save profile right now.');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+
+
+
+ navigation.navigate('Settings')}>
+ β
+
+ Edit Profile
+
+ {saving ? 'Saving...' : 'Save'}
+
+
+
+
+ Photo
+ tap to upload
+
+
+
+ Connected Platforms
+ navigation.navigate('ConnectPlatforms')}>
+ + Add
+
+
+
+ {shownLinks.map(link => {
+ const platform = PLATFORMS[link.platform];
+ return (
+
+
+ {platform?.name || link.platform}
+ @{link.username}
+
+ β
+
+ );
+ })}
+
+ navigation.navigate('ConnectPlatforms')}>
+
+ {hiddenCount > 0
+ ? `+ Add Devfolio, Twitter, Discord... (${hiddenCount} more linked)`
+ : '+ Add Devfolio, Twitter, Discord...'}
+
+
+
+
+ );
+}
+
+function Field({
+ label,
+ value,
+ onChangeText,
+}: {
+ label: string;
+ value: string;
+ onChangeText: (text: string) => void;
+}) {
+ const { colors } = useTheme();
+
+ return (
+
+ {label}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: { flex: 1, backgroundColor: COLORS.bgPrimary },
+ content: { padding: SPACING.lg, paddingBottom: SPACING.xxl },
+ headerRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ marginBottom: SPACING.lg,
+ },
+ settingsButton: {
+ width: 38,
+ height: 38,
+ borderRadius: 19,
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: COLORS.bgSecondary,
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ },
+ settingsIcon: {
+ fontSize: 20,
+ lineHeight: 24,
+ },
+ headerTitle: { color: COLORS.textPrimary, fontSize: FONT_SIZE.xl, fontWeight: '800' },
+ saveButtonInline: { minWidth: 38, alignItems: 'flex-end' },
+ saveText: { color: COLORS.primaryLight, fontSize: FONT_SIZE.md, fontWeight: '600' },
+ avatarCircle: {
+ alignSelf: 'center',
+ width: 110,
+ height: 110,
+ borderRadius: 55,
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ backgroundColor: COLORS.bgCard,
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginBottom: SPACING.lg,
+ },
+ avatarIcon: { color: COLORS.textSecondary, fontSize: FONT_SIZE.md, fontWeight: '600' },
+ avatarHint: { color: COLORS.textMuted, fontSize: FONT_SIZE.xs, marginTop: 2 },
+ fieldWrap: { marginBottom: SPACING.md },
+ fieldLabel: { color: COLORS.textSecondary, fontSize: FONT_SIZE.sm, marginBottom: SPACING.xs },
+ fieldInput: {
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ borderRadius: BORDER_RADIUS.md,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: SPACING.md,
+ color: COLORS.textPrimary,
+ backgroundColor: COLORS.bgCard,
+ fontSize: FONT_SIZE.md,
+ },
+ platformHeader: {
+ marginTop: SPACING.sm,
+ marginBottom: SPACING.sm,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ sectionTitle: { color: COLORS.textPrimary, fontSize: FONT_SIZE.md, fontWeight: '700' },
+ addText: { color: COLORS.primaryLight, fontSize: FONT_SIZE.md, fontWeight: '600' },
+ platformCard: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderWidth: 1,
+ borderColor: '#5E8C3D',
+ backgroundColor: '#223322',
+ borderRadius: BORDER_RADIUS.md,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: SPACING.md,
+ marginBottom: SPACING.sm,
+ },
+ platformDot: { width: 20, height: 20, borderRadius: 6, marginRight: SPACING.sm },
+ platformBody: { flex: 1 },
+ platformName: { color: COLORS.textPrimary, fontSize: FONT_SIZE.lg, fontWeight: '500' },
+ platformHandle: { color: COLORS.textMuted, fontSize: FONT_SIZE.sm },
+ checkMark: { color: '#9EDB7B', fontSize: FONT_SIZE.xl, fontWeight: '700' },
+ addMoreCard: {
+ marginTop: SPACING.xs,
+ borderRadius: BORDER_RADIUS.md,
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ borderStyle: 'dashed',
+ paddingVertical: SPACING.md,
+ paddingHorizontal: SPACING.md,
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: COLORS.bgSecondary,
+ },
+ addMoreText: { color: COLORS.textMuted, fontSize: FONT_SIZE.md },
+});
diff --git a/apps/mobile/src/screens/ScanScreen.tsx b/apps/mobile/src/screens/ScanScreen.tsx
index 1f300351..7ab207f2 100644
--- a/apps/mobile/src/screens/ScanScreen.tsx
+++ b/apps/mobile/src/screens/ScanScreen.tsx
@@ -46,7 +46,7 @@ export default function ScanScreen({ navigation }: Props) {
const [loadingCards, setLoadingCards] = useState(false);
const sheetRef = useRef(null);
- const qrRef = useRef(null);
+ const qrRef = useRef(null);
const [hasPermission, setHasPermission] = useState(false);
// Extract username from DevCard URL
diff --git a/apps/mobile/src/screens/SettingsScreen.tsx b/apps/mobile/src/screens/SettingsScreen.tsx
index 933d08d9..532c5589 100644
--- a/apps/mobile/src/screens/SettingsScreen.tsx
+++ b/apps/mobile/src/screens/SettingsScreen.tsx
@@ -1,212 +1,259 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import {
- View,
- Text,
- StyleSheet,
- ScrollView,
- TouchableOpacity,
- TextInput,
Alert,
+ ScrollView,
StatusBar,
+ StyleSheet,
+ Switch,
+ Text,
+ TouchableOpacity,
+ View,
} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
import { useNavigation } from '@react-navigation/native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { SafeAreaView } from 'react-native-safe-area-context';
import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS } from '../theme/tokens';
-import Avatar from '../components/Avatar';
-import ColorPicker from '../components/ColorPicker';
import { useAuth } from '../context/AuthContext';
-import { put } from '../services/api';
+import { useTheme } from '../context/ThemeContext';
+
+const SETTINGS_KEY = 'devcard.settings';
+const ACCENT_COLORS = ['#2C2C2C', '#EF4444', '#65A30D', '#3B82F6'];
+
+type LocalSettings = {
+ discoverableViaBle: boolean;
+ inAppConnect: boolean;
+ accentColor: string;
+};
+
+const DEFAULT_SETTINGS: LocalSettings = {
+ discoverableViaBle: true,
+ inAppConnect: true,
+ accentColor: '#65A30D',
+};
export default function SettingsScreen() {
const navigation = useNavigation();
- const { user, token, refreshUser, logout } = useAuth();
- const [displayName, setDisplayName] = useState(user?.displayName || '');
- const [bio, setBio] = useState(user?.bio || '');
- const [pronouns, setPronouns] = useState(user?.pronouns || '');
- const [role, setRole] = useState(user?.role || '');
- const [company, setCompany] = useState(user?.company || '');
- const [accentColor, setAccentColor] = useState(user?.accentColor || '#6366F1');
- const [saving, setSaving] = useState(false);
-
- const handleAvatarTap = () => {
- // TODO: Integrate react-native-image-picker when building on device
- // import { launchImageLibrary } from 'react-native-image-picker';
- // const result = await launchImageLibrary({ mediaType: 'photo', quality: 0.8 });
- // Upload via multipart/form-data to PUT /api/profiles/me/avatar
- Alert.alert(
- 'Change Avatar',
- 'Avatar upload requires react-native-image-picker in a dev build. Coming soon!',
- );
- };
+ const { logout } = useAuth();
+ const { colors, isDark, mode, toggleTheme } = useTheme();
+ const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+
+ useEffect(() => {
+ AsyncStorage.getItem(SETTINGS_KEY)
+ .then(raw => setSettings(raw ? { ...DEFAULT_SETTINGS, ...JSON.parse(raw) } : DEFAULT_SETTINGS))
+ .catch(() => setSettings(DEFAULT_SETTINGS));
+ }, []);
- const handleSave = async () => {
- setSaving(true);
- try {
- const payload = {
- displayName: displayName.trim() || undefined,
- bio: bio.trim() || null,
- pronouns: pronouns.trim() || null,
- role: role.trim() || null,
- company: company.trim() || null,
- accentColor,
- };
-
- await put('/api/profiles/me', payload, token);
- await refreshUser();
- Alert.alert('Success', 'Profile updated!');
- } catch {
- Alert.alert('Error', 'Something went wrong');
- } finally {
- setSaving(false);
- }
+ const updateSettings = async (patch: Partial) => {
+ const next = { ...settings, ...patch };
+ setSettings(next);
+ await AsyncStorage.setItem(SETTINGS_KEY, JSON.stringify(next));
};
- const handleLogout = () => {
- Alert.alert('Logout', 'Are you sure?', [
+ const deleteAllData = () => {
+ Alert.alert('Delete all my data?', 'This clears local app data and signs you out.', [
{ text: 'Cancel', style: 'cancel' },
- { text: 'Logout', style: 'destructive', onPress: logout },
+ {
+ text: 'Delete',
+ style: 'destructive',
+ onPress: async () => {
+ await AsyncStorage.clear();
+ await logout();
+ },
+ },
]);
};
return (
-
-
- Profile Settings
-
- {/* Avatar */}
-
- Tap to change
- @{user?.username}
-
-
- {/* Accent Color */}
-
- Card Accent Color
-
+
+
+ navigation.goBack()}>
+ βΉ
+
+ Settings
+
- {/* Form */}
-
-
+
+ navigation.navigate('ConnectPlatforms')} />
+
-
-
- {saving ? 'Saving...' : 'Save Changes'}
-
-
+
+ Alert.alert('OAuth Tokens', 'Token management will be available here.')}
+ />
+ updateSettings({ discoverableViaBle: value })} />}
+ />
+ updateSettings({ inAppConnect: value })} />}
+ />
+
- {/* Integration Settings */}
-
- Integrations
- (navigation as any).navigate('ConnectPlatforms')}>
-
- π
- Connected Platforms
-
- β
+
+
+ {ACCENT_COLORS.map(color => (
+ updateSettings({ accentColor: color })}
+ style={[
+ styles.swatch,
+ { backgroundColor: color },
+ settings.accentColor === color && styles.swatchActive,
+ ]}
+ />
+ ))}
+
+ }
+ />
+
+
+
+
-
- Log Out
+
+ Sign Out
- {/* App Info */}
-
- DevCard v1.0.0
- Open Source β’ Apache 2.0
+
+ Self-hosting: devcard.dev/self-host
+ Docker Compose - Apache 2.0 - community-owned
+
);
}
-function FormField({
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+ return (
+
+ {title}
+ {children}
+
+ );
+}
+
+function SettingRow({
label,
- value,
- onChangeText,
- multiline = false,
- placeholder = '',
+ detail,
+ subtitle,
+ right,
+ onPress,
}: {
label: string;
- value: string;
- onChangeText: (text: string) => void;
- multiline?: boolean;
- placeholder?: string;
+ detail?: string;
+ subtitle?: string;
+ right?: React.ReactNode;
+ onPress?: () => void;
}) {
- return (
-
- {label}
-
+ const content = (
+ <>
+
+ {label}{detail ? ` ${detail}` : ''}
+ {!!subtitle && {subtitle} }
+
+ {right || (onPress && {content}
+ ) : (
+ {content}
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: COLORS.bgPrimary },
- scrollContent: { padding: SPACING.lg, paddingBottom: SPACING.xxl },
- title: { fontSize: FONT_SIZE.xl, fontWeight: '800', color: COLORS.textPrimary, marginBottom: SPACING.lg },
- avatarSection: { alignItems: 'center', marginBottom: SPACING.xl },
- avatar: { width: 80, height: 80, borderRadius: 40 },
- avatarHint: { fontSize: FONT_SIZE.xs, color: COLORS.primary, marginTop: SPACING.xs, fontWeight: '500' },
- avatarPlaceholder: {
- backgroundColor: COLORS.primary, alignItems: 'center', justifyContent: 'center',
+ content: { padding: SPACING.lg, paddingBottom: SPACING.xxl },
+ headerRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ marginBottom: SPACING.lg,
+ },
+ backButton: {
+ width: 38,
+ height: 38,
+ borderRadius: 19,
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderWidth: 1,
},
- avatarText: { fontSize: FONT_SIZE.xxl, fontWeight: '700', color: COLORS.white },
- usernameDisplay: { fontSize: FONT_SIZE.md, color: COLORS.textSecondary, marginTop: SPACING.sm },
- colorSection: { marginBottom: SPACING.lg },
- form: { gap: SPACING.md, marginBottom: SPACING.lg },
- field: {},
- fieldLabel: { fontSize: FONT_SIZE.sm, color: COLORS.textSecondary, marginBottom: SPACING.xs, fontWeight: '500' },
- fieldInput: {
- backgroundColor: COLORS.bgCard, borderRadius: BORDER_RADIUS.md,
- padding: SPACING.md, color: COLORS.textPrimary, fontSize: FONT_SIZE.md,
- borderWidth: 1, borderColor: COLORS.border,
+ backIcon: {
+ fontSize: 30,
+ lineHeight: 34,
+ marginTop: -2,
},
- fieldInputMultiline: { height: 80, textAlignVertical: 'top' },
- saveButton: {
- backgroundColor: COLORS.primary, borderRadius: BORDER_RADIUS.md,
- padding: SPACING.md, alignItems: 'center', marginBottom: SPACING.md,
+ headerSpacer: { width: 38, height: 38 },
+ title: { color: COLORS.textPrimary, fontSize: FONT_SIZE.xl, fontWeight: '800', textAlign: 'center' },
+ section: { marginBottom: SPACING.md },
+ sectionTitle: { color: COLORS.textMuted, fontSize: FONT_SIZE.xs, fontWeight: '700', marginBottom: SPACING.xs },
+ row: {
+ minHeight: 58,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ backgroundColor: COLORS.bgSecondary,
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ borderRadius: BORDER_RADIUS.sm,
+ paddingHorizontal: SPACING.md,
+ paddingVertical: SPACING.sm,
+ marginBottom: SPACING.xs,
},
- saveButtonDisabled: { opacity: 0.6 },
- saveButtonText: { color: COLORS.white, fontWeight: '700', fontSize: FONT_SIZE.md },
- logoutButton: {
- borderRadius: BORDER_RADIUS.md, padding: SPACING.md,
- alignItems: 'center', borderWidth: 1, borderColor: COLORS.error,
+ rowText: { flex: 1 },
+ rowLabel: { color: COLORS.textPrimary, fontSize: FONT_SIZE.sm },
+ rowDetail: { color: COLORS.textMuted, fontSize: FONT_SIZE.xs },
+ rowSubtitle: { color: COLORS.textMuted, fontSize: FONT_SIZE.xs, marginTop: 2 },
+ swatches: { flexDirection: 'row', gap: 5 },
+ swatch: { width: 20, height: 20, borderRadius: 10, borderWidth: 1, borderColor: COLORS.transparent },
+ swatchActive: { borderColor: COLORS.white },
+ deleteButton: {
+ minHeight: 52,
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: BORDER_RADIUS.sm,
+ borderWidth: 1,
+ borderColor: COLORS.error,
+ backgroundColor: 'rgba(239, 68, 68, 0.12)',
},
- logoutButtonText: { color: COLORS.error, fontWeight: '600', fontSize: FONT_SIZE.md },
- sectionContainer: { marginBottom: SPACING.xl },
- sectionSubtitle: { fontSize: FONT_SIZE.md, fontWeight: '700', color: COLORS.textSecondary, marginBottom: SPACING.sm },
- settingRow: {
- flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
- backgroundColor: COLORS.bgCard, padding: SPACING.md, borderRadius: BORDER_RADIUS.md,
- borderWidth: 1, borderColor: COLORS.border
+ deleteText: { color: COLORS.error, fontSize: FONT_SIZE.sm },
+ signOutButton: {
+ minHeight: 52,
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: BORDER_RADIUS.sm,
+ borderWidth: 1,
+ borderColor: COLORS.border,
+ backgroundColor: COLORS.bgSecondary,
},
- settingRowLeft: { flexDirection: 'row', alignItems: 'center' },
- settingRowIcon: { fontSize: 20, marginRight: SPACING.sm },
- settingRowText: { fontSize: FONT_SIZE.md, color: COLORS.textPrimary, fontWeight: '500' },
- settingRowArrow: { fontSize: 20, color: COLORS.textMuted },
- appInfo: { alignItems: 'center', marginTop: SPACING.xl, gap: 4 },
- appInfoText: { fontSize: FONT_SIZE.xs, color: COLORS.textMuted },
+ signOutText: { color: COLORS.textSecondary, fontSize: FONT_SIZE.sm },
+ footer: { alignItems: 'center', marginTop: SPACING.md },
+ footerText: { color: COLORS.textMuted, fontSize: FONT_SIZE.xs },
});
diff --git a/apps/mobile/src/screens/WebViewScreen.tsx b/apps/mobile/src/screens/WebViewScreen.tsx
index 844c248a..ba776e9f 100644
--- a/apps/mobile/src/screens/WebViewScreen.tsx
+++ b/apps/mobile/src/screens/WebViewScreen.tsx
@@ -554,7 +554,11 @@ const styles = StyleSheet.create({
webContainer: { flex: 1, position: 'relative' },
webview: { flex: 1 },
loading: {
- ...StyleSheet.absoluteFillObject,
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: COLORS.bgPrimary,
@@ -578,7 +582,11 @@ const styles = StyleSheet.create({
// Custom Fallback Overlay Styling
overlayContainer: {
- ...StyleSheet.absoluteFillObject,
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
backgroundColor: 'rgba(15, 15, 26, 0.95)',
justifyContent: 'center',
alignItems: 'center',
diff --git a/apps/mobile/src/services/api.ts b/apps/mobile/src/services/api.ts
index 70daf195..bffeea79 100644
--- a/apps/mobile/src/services/api.ts
+++ b/apps/mobile/src/services/api.ts
@@ -1,5 +1,234 @@
import { API_BASE_URL } from '../config';
+const DEMO_TOKEN = 'devcard-demo-token';
+
+type DemoLink = {
+ id: string;
+ platform: string;
+ username: string;
+ url: string;
+ displayOrder: number;
+};
+
+type DemoCard = {
+ id: string;
+ title: string;
+ profileId: string;
+ isDefault: boolean;
+ createdAt: string;
+ updatedAt: string;
+ cardLinks: Array<{
+ id: string;
+ cardId: string;
+ linkId: string;
+ displayOrder: number;
+ link: DemoLink;
+ }>;
+};
+
+const nowIso = () => new Date().toISOString();
+
+const demoState: {
+ profile: any;
+ links: DemoLink[];
+ cards: DemoCard[];
+} = {
+ profile: {
+ id: 'demo-user-1',
+ email: 'demo@devcard.app',
+ username: 'demo_dev',
+ displayName: 'Demo Developer',
+ bio: 'Building and testing DevCard in demo mode.',
+ pronouns: 'she/her',
+ role: 'Full Stack Engineer',
+ company: 'DevCard Labs',
+ avatarUrl: null,
+ accentColor: '#6366F1',
+ defaultCardId: 'card-1',
+ },
+ links: [
+ { id: 'link-1', platform: 'github', username: 'demo-dev', url: 'https://github.com/demo-dev', displayOrder: 0 },
+ { id: 'link-2', platform: 'linkedin', username: 'demo-dev', url: 'https://linkedin.com/in/demo-dev', displayOrder: 1 },
+ { id: 'link-3', platform: 'x', username: 'demo_dev', url: 'https://x.com/demo_dev', displayOrder: 2 },
+ ],
+ cards: [
+ {
+ id: 'card-1',
+ title: 'Main Card',
+ profileId: 'demo-user-1',
+ isDefault: true,
+ createdAt: nowIso(),
+ updatedAt: nowIso(),
+ cardLinks: [],
+ },
+ ],
+};
+
+const hydrateCards = () => {
+ demoState.cards = demoState.cards.map(card => ({
+ ...card,
+ cardLinks: demoState.links.map((link, index) => ({
+ id: `${card.id}-${link.id}`,
+ cardId: card.id,
+ linkId: link.id,
+ displayOrder: index,
+ link,
+ })),
+ }));
+};
+
+hydrateCards();
+
+function handleDemoRequest(path: string, method: RequestOptions['method'], body?: any): T {
+ if (path === '/api/profiles/me' && method === 'GET') {
+ return { ...demoState.profile, platformLinks: demoState.links } as T;
+ }
+
+ if (path === '/api/analytics/overview' && method === 'GET') {
+ return { views: 128, scans: 41, clicks: 79, thisWeek: 24 } as T;
+ }
+
+ if (path === '/api/analytics/views' && method === 'GET') {
+ return {
+ total: 128,
+ weekly: [12, 18, 22, 15, 28, 17, 16],
+ sources: [{ source: 'qr', count: 51 }, { source: 'profile', count: 77 }],
+ } as T;
+ }
+
+ if (path === '/api/cards' && method === 'GET') return demoState.cards as T;
+ if (path === '/api/cards' && method === 'POST') {
+ const id = `card-${Date.now()}`;
+ const card = {
+ id,
+ title: body?.title || 'New Card',
+ profileId: demoState.profile.id,
+ isDefault: false,
+ createdAt: nowIso(),
+ updatedAt: nowIso(),
+ cardLinks: demoState.links.map((link: DemoLink, index: number) => ({
+ id: `${id}-${link.id}`,
+ cardId: id,
+ linkId: link.id,
+ displayOrder: index,
+ link,
+ })),
+ };
+ demoState.cards.unshift(card);
+ return card as T;
+ }
+
+ if (path.startsWith('/api/cards/') && path.endsWith('/default') && method === 'PUT') {
+ const id = path.split('/')[3];
+ demoState.cards = demoState.cards.map(card => ({ ...card, isDefault: card.id === id }));
+ demoState.profile.defaultCardId = id;
+ return { ok: true } as T;
+ }
+
+ if (path.startsWith('/api/cards/') && method === 'DELETE') {
+ const id = path.split('/')[3];
+ demoState.cards = demoState.cards.filter(card => card.id !== id);
+ if (!demoState.cards.some(card => card.id === demoState.profile.defaultCardId)) {
+ demoState.profile.defaultCardId = demoState.cards[0]?.id ?? null;
+ demoState.cards = demoState.cards.map((card, index) => ({ ...card, isDefault: index === 0 }));
+ }
+ return { ok: true } as T;
+ }
+
+ if (path === '/api/profiles/me/links' && method === 'POST') {
+ const id = `link-${Date.now()}`;
+ const username = body?.username || 'demo-user';
+ const platform = body?.platform || 'github';
+ const link: DemoLink = {
+ id,
+ platform,
+ username,
+ url: `https://${platform}.com/${username}`,
+ displayOrder: demoState.links.length,
+ };
+ demoState.links.push(link);
+ hydrateCards();
+ return link as T;
+ }
+
+ if (path.startsWith('/api/profiles/me/links/') && method === 'DELETE') {
+ const id = path.split('/')[5];
+ demoState.links = demoState.links.filter(link => link.id !== id).map((link, index) => ({ ...link, displayOrder: index }));
+ hydrateCards();
+ return { ok: true } as T;
+ }
+
+ if (path === '/api/profiles/me/links/reorder' && method === 'PUT') {
+ const orderMap = new Map((body?.links || []).map((item: any) => [item.id, Number(item.displayOrder)]));
+ demoState.links = demoState.links
+ .map(link => ({ ...link, displayOrder: orderMap.get(link.id) ?? link.displayOrder }))
+ .sort((a, b) => a.displayOrder - b.displayOrder)
+ .map((link, index) => ({ ...link, displayOrder: index }));
+ hydrateCards();
+ return { ok: true } as T;
+ }
+
+ if (path === '/api/profiles/me' && method === 'PUT') {
+ demoState.profile = { ...demoState.profile, ...(body || {}) };
+ return demoState.profile as T;
+ }
+
+ if (path === '/api/connect/status' && method === 'GET') {
+ return { github: true, linkedin: true, x: false, discord: false } as T;
+ }
+
+ if (path.startsWith('/api/connect/') && method === 'DELETE') {
+ return { ok: true } as T;
+ }
+
+ if (path === '/api/nfc/payload' && method === 'GET') {
+ return { url: `https://devcard.app/u/${demoState.profile.username}`, username: demoState.profile.username } as T;
+ }
+
+ if (path.startsWith('/api/u/') && method === 'GET') {
+ const username = path.split('/')[3];
+ return {
+ profile: { ...demoState.profile, username },
+ links: demoState.links,
+ cards: demoState.cards,
+ } as T;
+ }
+
+ if (path.startsWith('/api/events/') && method === 'GET') {
+ if (path.endsWith('/attendees')) {
+ return [{ id: 'demo-user-1', username: 'demo_dev', displayName: 'Demo Developer' }] as T;
+ }
+ const slug = path.split('/')[3];
+ return {
+ id: slug,
+ slug,
+ title: 'Demo Builders Meetup',
+ description: 'Local event for testing flow and UX.',
+ location: 'Remote',
+ attendeeCount: 23,
+ isAttending: true,
+ } as T;
+ }
+
+ if (path.startsWith('/api/events/') && (method === 'POST' || method === 'DELETE')) return { ok: true } as T;
+ if (path.startsWith('/api/teams/') && method === 'GET') {
+ const slug = path.split('/')[3];
+ return {
+ id: slug,
+ slug,
+ name: 'Demo Team',
+ description: 'Demo collaboration team',
+ members: [{ id: 'demo-user-1', username: 'demo_dev', displayName: 'Demo Developer' }],
+ } as T;
+ }
+
+ if (path.startsWith('/api/follow/') && (method === 'POST' || method === 'DELETE')) {
+ return { ok: true, redirectUrl: null } as T;
+ }
+
+ return (null as unknown) as T;
+}
+
type RequestOptions = {
method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
body?: unknown;
@@ -11,6 +240,10 @@ export async function apiRequest(
path: string,
{ method = 'GET', body, token, onUnauthorized }: RequestOptions = {}
): Promise {
+ if (token === DEMO_TOKEN) {
+ return handleDemoRequest(path, method, body);
+ }
+
const headers: Record = {
'Content-Type': 'application/json',
...(token ? { Authorization: `Bearer ${token}` } : {}),
@@ -43,4 +276,5 @@ export const post = (path: string, body?: unknown, token?: string | null) =>
export const put = (path: string, body?: unknown, token?: string | null) => apiRequest(path, { method: 'PUT', body, token });
export const del = (path: string, body?: unknown, token?: string | null) => apiRequest(path, { method: 'DELETE', body, token });
+export { DEMO_TOKEN };
export default { apiRequest, get, post, put, del };
diff --git a/apps/mobile/src/theme/tokens.ts b/apps/mobile/src/theme/tokens.ts
index 55b6240f..a42a7fa2 100644
--- a/apps/mobile/src/theme/tokens.ts
+++ b/apps/mobile/src/theme/tokens.ts
@@ -56,6 +56,22 @@ export const COLORS = {
overlay: 'rgba(0, 0, 0, 0.5)',
};
+export const LIGHT_COLORS: typeof COLORS = {
+ ...COLORS,
+ bgPrimary: '#F8F7F2',
+ bgSecondary: '#EFEEE8',
+ bgCard: '#FFFFFF',
+ bgCardGlass: 'rgba(255, 255, 255, 0.85)',
+ bgElevated: '#E7E5DD',
+ textPrimary: '#27272A',
+ textSecondary: '#71717A',
+ textMuted: '#A1A1AA',
+ textInverse: '#FFFFFF',
+ border: '#D8D6CC',
+ borderLight: '#C8C5BA',
+ overlay: 'rgba(15, 23, 42, 0.35)',
+};
+
export const SPACING = {
xs: 4,
sm: 8,
diff --git a/apps/mobile/tsconfig.json b/apps/mobile/tsconfig.json
index 266ba9ca..dfb719c4 100644
--- a/apps/mobile/tsconfig.json
+++ b/apps/mobile/tsconfig.json
@@ -1,7 +1,12 @@
{
"extends": "@react-native/typescript-config",
"compilerOptions": {
- "types": ["jest"]
+ "types": ["jest"],
+ "baseUrl": ".",
+ "paths": {
+ "@devcard/shared": ["../../packages/shared/src/index.ts"],
+ "@devcard/shared/*": ["../../packages/shared/src/*"]
+ }
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["**/node_modules", "**/Pods"]