Path based routing for index

app/components/navigation/ListNavigationBar.tsx

@@ -0,0 +1,40 @@
+import { randomTask } from "@/api/fetcher";
+import { getHeaderTitle } from "@react-navigation/elements";
+import type { NativeStackHeaderProps } from "@react-navigation/native-stack";
+import { router, useGlobalSearchParams } from "expo-router";
+import { Appbar } from "react-native-paper";
+
+export default function ListNavigationBar({
+  options,
+  route,
+}: NativeStackHeaderProps) {
+  const { listId, listName } = useGlobalSearchParams<{
+    listId: string;
+    listName?: string;
+  }>();
+  const title = getHeaderTitle(options, listName || route.name);
+  const back = router.canGoBack();
+
+  return (
+    <Appbar.Header elevated>
+      {back || (route.path !== "/") ? (
+        <Appbar.BackAction
+          onPress={() => (back ? router.back() : router.replace("/"))}
+        />
+      ) : null}
+      <Appbar.Content title={title} />
+      <Appbar.Action
+        icon="dice-multiple-outline"
+        onPress={() =>
+          randomTask(listId || null).then((data) =>
+            router.push({
+              pathname: "/tasks/[taskId]",
+              params: { taskId: data.id, taskName: data.name },
+            })
+          )
+        }
+      />
+      {/*<Appbar.Action icon="magnify" onPress={() => {}} />*/}
+    </Appbar.Header>
+  );
+}