From 91be34123a0ee000667e34aa9b57a8d6511f4b2a Mon Sep 17 00:00:00 2001
From: ZacharyZcR <payasonorahc@protonmail.com>
Date: Sat, 29 Aug 2026 00:22:57 +0800
Subject: [PATCH] fix: add back navigation to snippets

---
 app/components/Screen.tsx      |  7 ++++++-
 app/tabs/settings/Snippets.tsx | 13 +++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/components/Screen.tsx b/app/components/Screen.tsx
index c116875..b6f85b5 100644
--- a/app/components/Screen.tsx
+++ b/app/components/Screen.tsx
@@ -9,12 +9,14 @@ import { Text } from "@/app/components/ui";
 export function Screen({
   title,
   subtitle,
+  headerLeft,
   headerRight,
   children,
   scrollableHeader,
 }: {
   title?: string;
   subtitle?: string;
+  headerLeft?: React.ReactNode;
   headerRight?: React.ReactNode;
   children: React.ReactNode;
   /** When true, the header is part of the scroll content (caller handles it). */
@@ -25,7 +27,10 @@ export function Screen({
   return (
     <View className="flex-1 bg-background" style={{ paddingTop: insets.top }}>
       {title && !scrollableHeader ? (
-        <View className="flex-row items-end justify-between border-b border-border px-4 pb-3 pt-3">
+        <View className="flex-row items-center justify-between border-b border-border px-4 pb-3 pt-3">
+          {headerLeft ? (
+            <View className="mr-3 shrink-0">{headerLeft}</View>
+          ) : null}
           <View className="min-w-0 flex-1">
             <Text weight="bold" className="text-xl text-foreground">
               {title}
diff --git a/app/tabs/settings/Snippets.tsx b/app/tabs/settings/Snippets.tsx
index c483d90..618d0de 100644
--- a/app/tabs/settings/Snippets.tsx
+++ b/app/tabs/settings/Snippets.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import { View, ScrollView, Pressable, RefreshControl } from "react-native";
 import * as Clipboard from "expo-clipboard";
 import {
+  ArrowLeft,
   ChevronRight,
   Copy,
   FolderOpen,
@@ -10,6 +11,7 @@ import {
   Trash2,
   Check,
 } from "lucide-react-native";
+import { useRouter } from "expo-router";
 import {
   getSnippets,
   getSnippetFolders,
@@ -34,6 +36,7 @@ type SnippetFormData = {
 
 export default function Snippets() {
   const color = useThemeColor();
+  const router = useRouter();
 
   const [snippets, setSnippets] = useState<Snippet[]>([]);
   const [folders, setFolders] = useState<SnippetFolder[]>([]);
@@ -321,6 +324,16 @@ export default function Snippets() {
   return (
     <Screen
       title="Snippets"
+      headerLeft={
+        <Pressable
+          onPress={() => router.back()}
+          accessibilityRole="button"
+          accessibilityLabel="Back"
+          hitSlop={8}
+        >
+          <ArrowLeft size={20} color={color("foreground")} />
+        </Pressable>
+      }
       headerRight={
         <View className="flex-row gap-2">
           <Button