link directly to transform tab

src/components/note/note-tools-menu.tsx

@@ -15,10 +15,18 @@ export default function NoteToolsMenu({
   return (
     <>
       <CustomMenuIconButton icon={<Tool01 />} {...props}>
-        <MenuItem as={RouterLink} icon={<Recording02 />} to={`/tools/transform/${getSharableEventAddress(event)}`}>
+        <MenuItem
+          as={RouterLink}
+          icon={<Recording02 />}
+          to={`/tools/transform/${getSharableEventAddress(event)}?tab=tts`}
+        >
           Text to speech
         </MenuItem>
-        <MenuItem as={RouterLink} icon={<Translate01 />} to={`/tools/transform/${getSharableEventAddress(event)}`}>
+        <MenuItem
+          as={RouterLink}
+          icon={<Translate01 />}
+          to={`/tools/transform/${getSharableEventAddress(event)}?tab=translation`}
+        >
           Translate
         </MenuItem>
       </CustomMenuIconButton>

src/views/thread/components/thread-post.tsx

@@ -40,6 +40,7 @@ import { getSharableEventAddress } from "../../../helpers/nip19";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 import useAppSettings from "../../../hooks/use-app-settings";
 import useThreadColorLevelProps from "../../../hooks/use-thread-color-level-props";
+import NoteToolsMenu from "../../../components/note/note-tools-menu";
 
 export type ThreadItemProps = {
   post: ThreadItem;
@@ -118,7 +119,6 @@ export const ThreadPost = memo(({ post, initShowReplies, focusId, level = -1 }:
     <Flex gap="2" alignItems="center">
       <ButtonGroup variant="ghost" size="sm">
         <IconButton aria-label="Reply" title="Reply" onClick={replyForm.onToggle} icon={<ReplyIcon />} />
-
         <RepostButton event={post.event} />
         <QuoteRepostButton event={post.event} />
         <NoteZapButton event={post.event} />
@@ -129,6 +129,7 @@ export const ThreadPost = memo(({ post, initShowReplies, focusId, level = -1 }:
         <NoteProxyLink event={post.event} />
         <NoteDetailsButton event={post.event} onClick={detailsModal.onOpen} />
         <BookmarkButton event={post.event} aria-label="Bookmark" />
+        <NoteToolsMenu event={post.event} aria-label="Note Tools" />
         <NoteMenu event={post.event} aria-label="More Options" detailsClick={detailsModal.onOpen} />
       </ButtonGroup>
     </Flex>

src/views/tools/transform-note/index.tsx

@@ -10,12 +10,21 @@ import { UserDnsIdentityIcon } from "../../../components/user-dns-identity-icon"
 import UserLink from "../../../components/user-link";
 import NoteMenu from "../../../components/note/note-menu";
 import NoteTextToSpeechPage from "./text-to-speech";
+import useRouteSearchValue from "../../../hooks/use-route-search-value";
+
+const tabs = ["original", "translation", "tts"];
 
 function TransformNotePage({ note }: { note: NostrEvent }) {
+  const tab = useRouteSearchValue("tab", "original");
   const tabProps = { px: "2", pt: "2", pb: "10", display: "flex", flexDirection: "column", gap: "2" } as const;
 
   return (
-    <Tabs colorScheme="primary" isLazy>
+    <Tabs
+      colorScheme="primary"
+      isLazy
+      index={tab ? tabs.indexOf(tab.value) : 0}
+      onChange={(v) => tab.setValue(tabs[v])}
+    >
       <TabList>
         <Tab>Original</Tab>
         <Tab>Translation</Tab>