From c11db59535e4b3663f379ca1533f42c3dc71a812 Mon Sep 17 00:00:00 2001
From: maelstrom <maelstrom@maelstrom.dev>
Date: Sun, 3 May 2026 23:43:44 +0200
Subject: [PATCH] compact modals

---
 app/_layout.tsx                    |  4 ++++
 app/index.tsx                      |  6 +++++-
 src/components/primitive/Modal.tsx | 34 ++++++++++++++++++------------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/_layout.tsx b/app/_layout.tsx
index eecbe4c..ef2bbfb 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -30,6 +30,10 @@ export default function RootLayout() {
     <AuthProvider>
       <ThemeProvider value={DarkTheme}>
         <Stack screenOptions={{ headerShown: false }}>
+          <Stack.Screen
+            name="index"
+            options={{ title: "Home" }}
+          />
           <Stack.Screen
             name="new"
             options={{ presentation: "transparentModal", title: "Modal" }}
diff --git a/app/index.tsx b/app/index.tsx
index 437925f..3691c86 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,10 +1,12 @@
 import { AuthContext } from "@/src/context/AuthContext";
 import { resolveProfile } from "@/src/lib/profile";
+import { useRouter } from "expo-router";
 import { useContext, useEffect, useState } from "react";
-import { Text, View } from "react-native";
+import { Button, Text, View } from "react-native";
 
 export default function Index() {
   const authCtx = useContext(AuthContext);
+  const router = useRouter()
   const [handle, setHandle] = useState<string | undefined>();
 
   useEffect(() => {
@@ -19,6 +21,8 @@ export default function Index() {
   return (
     <View>
       <Text>You are logged in as {handle}</Text>
+      <Button title={"go to blog"} onPress={() => router.navigate("/blog/testaccount.maelstrom.dev")} />
+      <Button title={"open composer"} onPress={() => router.navigate("/new")} />
     </View>
   );
 }
diff --git a/src/components/primitive/Modal.tsx b/src/components/primitive/Modal.tsx
index 9f9b17b..eafa132 100644
--- a/src/components/primitive/Modal.tsx
+++ b/src/components/primitive/Modal.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "expo-router";
 import {
   StyleSheet,
   TouchableWithoutFeedback,
+  useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
@@ -23,21 +24,28 @@ const styles = StyleSheet.create({
 
 export function Modal({ children, ...props }: ViewProps) {
   const router = useRouter();
+  const windowDimensions = useWindowDimensions();
 
-  return (
-    <TouchableWithoutFeedback
-      onPress={() => router.canDismiss() && router.dismiss()}
-    >
-      <View style={styles.container} {...props}>
-        <View style={styles.wrapper}>
-          {/* The touchable here is necessary to occlude the parent touchable's detection.
+  const smallScreen = windowDimensions.width < 700;
+
+  if (smallScreen) {
+    return <View>{children}</View>;
+  } else {
+    return (
+      <TouchableWithoutFeedback
+        onPress={() => router.canDismiss() && router.dismiss()}
+      >
+        <View style={styles.container} {...props}>
+          <View style={styles.wrapper}>
+            {/* The touchable here is necessary to occlude the parent touchable's detection.
               However, because we are pasting the children in, it doesn't fill correctly so we
               have to wrap them around a view to make it work correctly */}
-          <TouchableWithoutFeedback>
-            <View>{children}</View>
-          </TouchableWithoutFeedback>
+            <TouchableWithoutFeedback>
+              <View>{children}</View>
+            </TouchableWithoutFeedback>
+          </View>
         </View>
-      </View>
-    </TouchableWithoutFeedback>
-  );
+      </TouchableWithoutFeedback>
+    );
+  }
 }
-- 
2.51.2