chore: add bolt config file and fix deps

Author: younes200

.bolt/config.json

@@ -0,0 +1,3 @@
+{
+  "template": "bolt-expo"
+}

.bolt/prompt

@@ -0,0 +1,8 @@
+By default, this template supports JSX syntax with Tailwind CSS classes with Nativewind,
+React hooks, and lucide-react-native for icons.
+
+Use use components in /components/ui, example :
+`
+import { Text } from '@/components/ui';
+`
+Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.

.vscode/settings.json

@@ -19,7 +19,6 @@
   "[javascript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "css.customData": [".vscode/css_custom_data.json"],
   "files.associations": {
     "*.css": "tailwindcss"
   }

app.config.ts

@@ -32,7 +32,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   },
   web: {
     bundler: "metro",
-    output: "single",
+    output: "server",
     favicon: "./assets/images/favicon.png",
   },
   plugins: [
@@ -43,6 +43,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       },
     ],
     ["expo-sqlite"],
+    ["expo-font"],
   ],
   experiments: {
     typedRoutes: true,

app/_layout.tsx

@@ -1,17 +1,17 @@
 import "./global.css";
-import {BottomSheetModalProvider} from "@gorhom/bottom-sheet";
-import {type Theme, ThemeProvider} from "@react-navigation/native";
-import {SplashScreen, Stack} from "expo-router";
-import {StatusBar} from "expo-status-bar";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { type Theme, ThemeProvider } from "@react-navigation/native";
+import { SplashScreen, Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
 import * as React from "react";
-import {GestureHandlerRootView} from "react-native-gesture-handler";
-import {PortalHost} from "@/components/primitives/portal";
-import {DatabaseProvider} from "@/db/provider";
-import {setAndroidNavigationBar} from "@/lib/android-navigation-bar";
-import {NAV_THEME} from "@/lib/constants";
-import {useColorScheme} from "@/lib/useColorScheme";
-import {getItem, setItem} from "@/lib/storage";
-import {Platform} from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { PortalHost } from "@/components/primitives/portal";
+import { DatabaseProvider } from "@/db/provider";
+import { setAndroidNavigationBar } from "@/lib/android-navigation-bar";
+import { NAV_THEME } from "@/lib/constants";
+import { useColorScheme } from "@/lib/useColorScheme";
+import { getItem, setItem } from "@/lib/storage";
+import { Platform } from "react-native";
 
 const NAV_FONT_FAMILY = "Inter-Black";
 const LIGHT_THEME: Theme = {
@@ -72,7 +72,7 @@ export const unstable_settings = {
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
-  const {colorScheme, setColorScheme} = useColorScheme();
+  const { colorScheme, setColorScheme } = useColorScheme();
   const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
 
   React.useEffect(() => {
@@ -108,10 +108,10 @@ export default function RootLayout() {
       <DatabaseProvider>
         <ThemeProvider value={colorScheme === "dark" ? DARK_THEME : LIGHT_THEME}>
           <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
-          <GestureHandlerRootView style={{flex: 1}}>
+          <GestureHandlerRootView style={{ flex: 1 }}>
             <BottomSheetModalProvider>
               <Stack>
-                <Stack.Screen name="(tabs)" options={{headerShown: false}} />
+                <Stack.Screen name="(tabs)" options={{ title: "Habits", headerShown: false }} />
                 <Stack.Screen options={{
                   headerShadowVisible: false,
                 }} name="habits/archive" />
@@ -125,8 +125,6 @@ export default function RootLayout() {
 
       </DatabaseProvider>
       <PortalHost />
-
-
     </>
 
   );

bun.lockb

@@ -6,11 +6,11 @@ import type { SQLJsDatabase } from "drizzle-orm/sql-js";
 import migrations from "./migrations/migrations";
 
 const expoDb = openDatabaseSync("database.db", { enableChangeListener: true });
-export const db = drizzle(expoDb);
+const db = drizzle(expoDb);
 
-export const initialize = (): Promise<SQLJsDatabase | ExpoSQLiteDatabase> => {
+export const initialize = (): Promise<ExpoSQLiteDatabase> => {
   return Promise.resolve(db);
 };
 export const useMigrationHelper = () => {
-  return useMigrations(db as ExpoSQLiteDatabase, migrations);
+  return useMigrations(db, migrations);
 };

db/drizzle.ts

@@ -3,6 +3,7 @@ import initSqlJs from "sql.js";
 import { useDatabase } from "./provider";
 import { useEffect, useReducer } from "react";
 
+
 export const initialize = async (): Promise<SQLJsDatabase> => {
   const sqlPromise = initSqlJs({
     locateFile: (file) => `https://sql.js.org/dist/${file}`,

db/drizzle.web.ts

@@ -1,6 +1,5 @@
 import type { LucideIcon } from "lucide-react-native";
 import { cssInterop } from "nativewind";
-import type { IconProps } from "phosphor-react-native/src/lib";
 
 export function iconWithClassName(icon: LucideIcon) {
   cssInterop(icon, {