refactor(ui/dev): unify bottom bar and stabilize local start workflow

Consolidate platform-specific bottom bar behavior into a shared structure and add resilient local startup orchestration so Expo and Vercel can run together with reliable DB migration retries and clean shutdown on Ctrl+C.

Made-with: Cursor

Author: staindart

README.md

@@ -4,7 +4,7 @@
 
 <u>**In progress, contribute!**</u>
 
-This program is built upon [React Native](https://reactnative.dev/) by Meta and [Expo](https://expo.dev) multiplatform technologies, Windows build and executable creation achieved with [Electron Builder](https://www.electron.build/) and [Electron Forge](https://www.electronforge.io/), working in Telegram with help of [Telegram Mini Apps React SDK](http://telegram-mini-apps.com/), [Bot API](https://core.telegram.org/bots) and [Grammy](https://grammy.dev/). AI is backed by [OpenAI API](https://openai.com/ru-RU/api/), blockchain info is processed from [Swap.Coffee API](https://docs.swap.coffee/eng/user-guides/welcome). DB for the best user's experience we host on [Neon](https://neon.tech/).
+This program is built upon [React Native](https://reactnative.dev/) by Meta and [Expo](https://expo.dev) multiplatform technologies, Windows build and executable creation achieved with [Electron Builder](https://www.electron.build/) and [Electron Forge](https://www.electronforge.io/), working in Telegram with help of [Telegram Mini Apps React SDK](http://telegram-mini-apps.com/), [Bot API](https://core.telegram.org/bots) and [Grammy](https://grammy.dev/). AI is backed by [OpenAI API](https://openai.com/ru-RU/api/), blockchain info is processed from [Swap.Coffee API](https://docs.swap.coffee/eng/user-guides/welcome). DB for the best user's experience we host on [Neon](https://neon.tech/). Keys are managed by [Google Cloud Key Management](https://cloud.google.com/security/products/security-key-management).
 
 Check out our [Pitch Deck](./PitchDeck/PitchDeck.md).
 

app/_layout.tsx

@@ -6,16 +6,14 @@ import { AuthProvider } from "../auth/AuthContext";
 import { TelegramProvider, useTelegram } from "../ui/components/Telegram";
 import { GlobalLogoBarWithFallback } from "../ui/components/GlobalLogoBarWithFallback";
 import { GlobalBottomBar } from "../ui/components/GlobalBottomBar";
-import { GlobalBottomBarWeb } from "../ui/components/GlobalBottomBarWeb";
 import { useColors } from "../ui/theme";
 import { useEffect, useRef } from "react";
 
 /**
  * Three-block column layout (same as Flutter):
  * 1. Logo bar (optional in TMA when not fullscreen)
  * 2. Main area (flex, scrollable per screen) – Stack updates on route change
- * 3. [Web only] Raw HTML textarea test (compare with GlobalBottomBar in TMA)
- * 4. AI & Search bar (fixed at bottom)
+ * 3. AI & Search bar (fixed at bottom, platform-specific internals)
  */
 export default function RootLayout() {
   useOtaUpdateChecks();
@@ -109,14 +107,10 @@ function RootContent() {
       <View style={styles.main}>
         <Stack screenOptions={{ headerShown: false }} />
       </View>
-      {Platform.OS === "web" ? (
-        // Avoid mounting textarea/DOM mirror before theme — kills dark flash from RN-web inputs.
-        !useTelegramTheme || themeBgReady ? (
-          <GlobalBottomBarWeb />
-        ) : null
-      ) : (
-        <GlobalBottomBar />
-      )}
+      {
+        // Avoid mounting web internals before theme — kills dark flash from RN-web inputs.
+        Platform.OS !== "web" || !useTelegramTheme || themeBgReady ? <GlobalBottomBar /> : null
+      }
     </View>
   );
 }

backlogs/short_term_backlog.md

@@ -1,3 +1,5 @@
+Login screen
+Dealing with pool count
 Change picture in Windows installer
 Wallet: Telegram, Connected, Unhosted<br>
 Username loaded without intermediate state<br>

package.json

@@ -25,9 +25,11 @@
     "forge": "./windows/forge/forge.config.js"
   },
   "scripts": {
-    "prestart": "npm run db:migrate",
+    "prestart": "node scripts/migrate-db-retry.mjs",
+    "prestart:full": "node scripts/migrate-db-retry.mjs",
     "build": "expo export -p web",
-    "start": "npx concurrently -n expo,bot,vercel \"expo start\" \"npx tsx scripts/run-bot-local.ts\" \"npm run dev:vercel\"",
+    "start": "node scripts/start-expo-managed.mjs",
+    "start:full": "npx concurrently -n expo,bot,vercel \"expo start\" \"npx tsx scripts/run-bot-local.ts\" \"npm run dev:vercel\"",
     "start:expo": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
     "android": "expo start --android",

scripts/migrate-db-retry.mjs

@@ -0,0 +1,50 @@
+import { spawn } from "node:child_process";
+
+const MAX_ATTEMPTS = 3;
+const RETRY_DELAY_MS = 3000;
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function runMigrate() {
+  return new Promise((resolve) => {
+    const child = spawn("npm", ["run", "db:migrate"], {
+      stdio: "inherit",
+      shell: true,
+      env: process.env,
+    });
+
+    child.on("close", (code) => {
+      resolve(code ?? 1);
+    });
+  });
+}
+
+async function main() {
+  for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt += 1) {
+    // Keep logs explicit so startup failures are easy to debug in terminals/CI.
+    console.log(`[db:migrate:retry] attempt ${attempt}/${MAX_ATTEMPTS}`);
+    const code = await runMigrate();
+
+    if (code === 0) {
+      console.log("[db:migrate:retry] migrations succeeded");
+      process.exit(0);
+    }
+
+    if (attempt < MAX_ATTEMPTS) {
+      console.warn(
+        `[db:migrate:retry] attempt ${attempt} failed (exit ${code}), retrying in ${RETRY_DELAY_MS}ms...`,
+      );
+      await sleep(RETRY_DELAY_MS);
+      continue;
+    }
+
+    console.error(
+      `[db:migrate:retry] failed after ${MAX_ATTEMPTS} attempts, aborting startup`,
+    );
+    process.exit(code);
+  }
+}
+
+void main();

scripts/start-expo-managed.mjs

@@ -0,0 +1,94 @@
+import { spawn, spawnSync } from "node:child_process";
+import path from "node:path";
+
+const EXPO_PORT = "8081";
+
+function killProcessTree(pid) {
+  return new Promise((resolve) => {
+    if (!pid) {
+      resolve();
+      return;
+    }
+
+    if (process.platform === "win32") {
+      const killer = spawn("cmd", ["/c", "taskkill", "/PID", String(pid), "/T", "/F"], {
+        stdio: "ignore",
+      });
+      killer.on("close", () => resolve());
+      return;
+    }
+
+    try {
+      process.kill(pid, "SIGTERM");
+    } catch {
+      // Ignore: process may already be gone.
+    }
+    resolve();
+  });
+}
+
+function killProcessTreeSync(pid) {
+  if (!pid) return;
+
+  if (process.platform === "win32") {
+    spawnSync("cmd", ["/c", "taskkill", "/PID", String(pid), "/T", "/F"], {
+      stdio: "ignore",
+    });
+    return;
+  }
+
+  try {
+    process.kill(pid, "SIGTERM");
+  } catch {
+    // Ignore: process may already be gone.
+  }
+}
+
+async function main() {
+  const expoCliPath = path.resolve(process.cwd(), "node_modules", "expo", "bin", "cli");
+  const vercelCliPath = path.resolve(process.cwd(), "node_modules", "vercel", "dist", "index.js");
+  const expo = spawn(process.execPath, [expoCliPath, "start", "--port", EXPO_PORT], {
+    stdio: "inherit",
+    env: process.env,
+  });
+  const vercel = spawn(process.execPath, [vercelCliPath, "dev", "--yes"], {
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      SKIP_DB_MIGRATE: "1",
+      TS_NODE_PROJECT: "api/tsconfig.json",
+    },
+  });
+  const children = [expo, vercel];
+
+  let shuttingDown = false;
+  const shutdown = async (exitCode = 0) => {
+    if (shuttingDown) return;
+    shuttingDown = true;
+    await Promise.all(children.map((child) => killProcessTree(child.pid)));
+    process.exit(exitCode);
+  };
+
+  process.on("exit", () => {
+    for (const child of children) {
+      killProcessTreeSync(child.pid);
+    }
+  });
+  process.on("SIGINT", () => {
+    void shutdown(130);
+  });
+  process.on("SIGTERM", () => {
+    void shutdown(143);
+  });
+
+  expo.on("exit", (code) => {
+    if (shuttingDown) return;
+    void shutdown(code ?? 0);
+  });
+  vercel.on("exit", (code) => {
+    if (shuttingDown) return;
+    void shutdown(code ?? 0);
+  });
+}
+
+void main();

texts/header-footer-adaptation.md

@@ -0,0 +1,111 @@
+# Header/Footer adaptation by page and device
+
+Yes - you can (and should) make header and footer behavior depend on both **route** and **runtime** (web, native, Telegram Mini App).
+
+This note describes a minimal, scalable pattern for this repository.
+
+---
+
+## 1) Goal
+
+Keep one global app shell, but allow each page group to define:
+
+- whether header is shown
+- whether footer is shown
+- which variant is used (full, compact, hidden)
+- device-specific behavior (web vs native vs TMA)
+
+---
+
+## 2) Current baseline in this repo
+
+`app/_layout.tsx` currently always renders:
+
+- `GlobalLogoBarWithFallback` at top
+- page `<Stack />` in the middle
+- `GlobalBottomBarWeb` (web) or `GlobalBottomBar` (native/TMA) at bottom
+
+This is simple, but it means welcome/auth pages inherit the same bars as app pages.
+
+---
+
+## 3) Recommended structure (minimal and clear)
+
+Use route-group layouts as shell boundaries:
+
+- `app/(auth)/_layout.tsx` -> auth shell (welcome/login flow)
+- `app/(app)/_layout.tsx` -> app shell (home/ai/settings/etc.)
+
+Then:
+
+1. Keep `app/_layout.tsx` for providers only (`TelegramProvider`, `AuthProvider`, theme setup).
+2. Move top/bottom bars out of root and into the group layout(s) that need them.
+3. In each group layout, select variants by device/platform.
+
+This keeps file structure small while preventing UI condition spaghetti in one file.
+
+---
+
+## 4) Adaptation matrix
+
+| Route group | Web | Native app | Telegram Mini App |
+|---|---|---|---|
+| `(auth)` | Header optional (brand only), footer hidden | Header optional, footer hidden | Header optional, footer hidden |
+| `(app)` | Full header + web footer/search | Full header + native footer/search | TMA-aware header + native footer/search |
+
+Notes:
+
+- Welcome screen is usually cleaner with no footer controls.
+- App pages should keep navigation/actions visible and consistent.
+- In TMA, preserve Telegram theme sync and avoid pre-theme flashes.
+
+---
+
+## 5) How to implement (practical)
+
+### A. Auth layout (`app/(auth)/_layout.tsx`)
+
+- Render a `Stack` with `headerShown: false`.
+- If needed, render a minimal top brand component only.
+- Do not mount bottom bar.
+
+### B. App layout (`app/(app)/_layout.tsx`)
+
+- Keep auth guard redirect to `/welcome`.
+- Render top bar + content + bottom bar.
+- Branch footer by `Platform.OS` (web/native), same as current root logic.
+
+### C. Optional per-page override
+
+If a specific page needs no bars (for example, fullscreen flow), add route metadata in code:
+
+- simple approach: maintain a tiny set of route names in group layout (`hiddenHeaderRoutes`, `hiddenFooterRoutes`)
+- cleaner later: create a `ScreenChromeContext` with `{ header: "full" | "compact" | "none", footer: ... }`
+
+Do not over-engineer before multiple special pages actually exist.
+
+---
+
+## 6) Theme and color consistency rules
+
+1. All screens use `useColors()` (`background`, `primary`, `secondary`).
+2. Header/footer must read from the same theme source.
+3. Avoid hard-coded light/dark literals in page components.
+4. For TMA, keep `themeBgReady` guard behavior to prevent flash/mismatch.
+
+---
+
+## 7) Suggested near-term rollout
+
+1. Keep current providers in `app/_layout.tsx`.
+2. Move header/footer rendering from root to `app/(app)/_layout.tsx`.
+3. Keep `app/(auth)/_layout.tsx` minimal (no footer).
+4. Leave welcome blank now, but already under `(auth)` so future auth UI is isolated.
+5. Add one shared `PageContainer` helper later if repeated spacing/styling appears.
+
+---
+
+## 8) One-line decision
+
+Use **group-based shell adaptation**: auth routes get a minimal chrome, app routes get full chrome, and device-specific variants are selected inside each group layout using the same `useColors()` theme contract.
+