Support Telegram API 7.0 settings button

package.json

@@ -28,7 +28,7 @@
     "@emotion/css": "^11.11.2",
     "@mdi/font": "^5.9.55",
     "@supabase/supabase-js": "^2.38.0",
-    "@twa-dev/sdk": "^6.9.0",
+    "@twa-dev/sdk": "^7.0.0",
     "autosize": "^6.0.1",
     "colord": "^2.9.3",
     "framer-motion": "^10.16.4",

src/lib/telegram/use-settings-button.ts

@@ -0,0 +1,18 @@
+import WebApp from "@twa-dev/sdk";
+import { useMount } from "../react/use-mount.ts";
+
+export const useSettingsButton = (fn: () => void) => {
+  useMount(() => {
+    if (!WebApp.isVersionAtLeast("7.0")) {
+      return;
+    }
+
+    WebApp.SettingsButton.show();
+    WebApp.SettingsButton.onClick(fn);
+
+    return () => {
+      WebApp.SettingsButton.hide();
+      WebApp.SettingsButton.offClick(fn);
+    };
+  });
+};

src/screens/app.tsx

@@ -25,10 +25,15 @@ import { ShareDeckScreen } from "./share-deck/share-deck-screen.tsx";
 import { ShareDeckStoreProvider } from "./share-deck/store/share-deck-store-context.tsx";
 import { FolderFormStoreProvider } from "./folder-form/store/folder-form-store-context.tsx";
 import { FolderScreen } from "./folder-review/folder-screen.tsx";
+import { useSettingsButton } from "../lib/telegram/use-settings-button.ts";
 
 export const App = observer(() => {
   useRestoreFullScreenExpand();
 
+  useSettingsButton(() => {
+    screenStore.go({ type: "userSettings" });
+  });
+
   if (deckListStore.isFullScreenLoaderVisible) {
     return <FullScreenLoader />;
   }