feat: support custom api id/hash in imported sessions

packages/repl/src/components/settings/import/AuthKeyImportDialog.tsx

@@ -1,9 +1,11 @@
 import { workerInvoke } from 'mtcute-repl-worker/client'
-import { createEffect, createSignal, on } from 'solid-js'
+import { createEffect, createSignal, on, Show } from 'solid-js'
+import { unwrap } from 'solid-js/store'
 import { Button } from '../../../lib/components/ui/button.tsx'
 import { Checkbox, CheckboxControl, CheckboxLabel } from '../../../lib/components/ui/checkbox.tsx'
 import { Dialog, DialogContent, DialogDescription, DialogHeader } from '../../../lib/components/ui/dialog.tsx'
 import { TextField, TextFieldErrorMessage, TextFieldFrame, TextFieldLabel, TextFieldRoot } from '../../../lib/components/ui/text-field.tsx'
+import { CustomApiForm, useCustomApiFormState } from '../login/CustomApiDialog.tsx'
 
 export function AuthKeyImportDialog(props: {
   open: boolean
@@ -15,6 +17,9 @@ export function AuthKeyImportDialog(props: {
   const [error, setError] = createSignal<string | undefined>()
   const [loading, setLoading] = createSignal(false)
 
+  const [useCustomApi, setUseCustomApi] = createSignal(false)
+  const [customApi, setCustomApi] = useCustomApiFormState()
+
   let abortController: AbortController | undefined
   const handleSubmit = async () => {
     if (!['1', '2', '4', '5'].includes(dcId())) {
@@ -32,6 +37,7 @@ export function AuthKeyImportDialog(props: {
         dcId: Number(dcId()),
         testMode: testMode(),
         abortSignal: abortController.signal,
+        apiOptions: useCustomApi() ? unwrap(customApi) : undefined,
       })
 
       props.onClose()
@@ -66,7 +72,7 @@ export function AuthKeyImportDialog(props: {
         </DialogHeader>
         <DialogDescription>
           <TextFieldRoot>
-            <TextFieldLabel class="text-foreground">
+            <TextFieldLabel>
               Datacenter ID
             </TextFieldLabel>
             <TextFieldFrame>
@@ -79,7 +85,7 @@ export function AuthKeyImportDialog(props: {
           </TextFieldRoot>
 
           <TextFieldRoot class="mt-2" validationState={error() ? 'invalid' : 'valid'}>
-            <TextFieldLabel class="flex flex-row items-center justify-between text-foreground">
+            <TextFieldLabel class="flex flex-row items-center justify-between">
               Hex-encoded auth key
               <a
                 href="#"
@@ -97,7 +103,7 @@ export function AuthKeyImportDialog(props: {
             </TextFieldLabel>
             <TextFieldFrame class="h-auto">
               <TextField
-                class="size-full h-40 resize-none font-mono"
+                class="size-full h-20 resize-none font-mono"
                 as="textarea"
                 ref={setAuthKeyInputRef}
                 onInput={() => setError(undefined)}
@@ -114,11 +120,30 @@ export function AuthKeyImportDialog(props: {
             onChange={setTestMode}
           >
             <CheckboxControl />
-            <CheckboxLabel class="text-foreground">
+            <CheckboxLabel>
               Use test servers
             </CheckboxLabel>
           </Checkbox>
 
+          <Checkbox
+            class="mt-2 flex flex-row items-center gap-2"
+            checked={useCustomApi()}
+            onChange={setUseCustomApi}
+          >
+            <CheckboxControl />
+            <CheckboxLabel>
+              Use custom connection options
+            </CheckboxLabel>
+          </Checkbox>
+
+          <Show when={useCustomApi()}>
+            <CustomApiForm
+              class="mt-2"
+              state={customApi}
+              setState={setCustomApi}
+            />
+          </Show>
+
           <Button
             class="mt-6 w-full"
             size="sm"

packages/repl/src/components/settings/import/StringSessionImportDialog.tsx

@@ -1,9 +1,12 @@
 import { type StringSessionLibName, workerInvoke } from 'mtcute-repl-worker/client'
-import { createEffect, createSignal, on } from 'solid-js'
+import { createEffect, createSignal, on, Show } from 'solid-js'
+import { unwrap } from 'solid-js/store'
 import { Button } from '../../../lib/components/ui/button.tsx'
+import { Checkbox, CheckboxControl, CheckboxLabel } from '../../../lib/components/ui/checkbox.tsx'
 import { Dialog, DialogContent, DialogDescription, DialogHeader } from '../../../lib/components/ui/dialog.tsx'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../lib/components/ui/select.tsx'
 import { TextField, TextFieldErrorMessage, TextFieldFrame, TextFieldLabel, TextFieldRoot } from '../../../lib/components/ui/text-field.tsx'
+import { CustomApiForm, useCustomApiFormState } from '../login/CustomApiDialog.tsx'
 
 export const StringSessionDefs: {
   name: StringSessionLibName
@@ -26,6 +29,9 @@ export function StringSessionImportDialog(props: {
   const [error, setError] = createSignal<string | undefined>()
   const [loading, setLoading] = createSignal(false)
 
+  const [useCustomApi, setUseCustomApi] = createSignal(false)
+  const [customApi, setCustomApi] = useCustomApiFormState()
+
   let abortController: AbortController | undefined
   const handleSubmit = async () => {
     abortController?.abort()
@@ -37,6 +43,7 @@ export function StringSessionImportDialog(props: {
         libraryName: props.chosenLibName,
         session: inputRef()!.value,
         abortSignal: abortController.signal,
+        apiOptions: useCustomApi() ? unwrap(customApi) : undefined,
       })
       props.onClose()
     } catch (e) {
@@ -108,7 +115,7 @@ export function StringSessionImportDialog(props: {
             </TextFieldLabel>
             <TextFieldFrame class="h-auto">
               <TextField
-                class="size-full h-40 resize-none font-mono"
+                class="size-full h-20 resize-none font-mono"
                 as="textarea"
                 ref={setInputRef}
                 onInput={() => setError(undefined)}
@@ -119,6 +126,25 @@ export function StringSessionImportDialog(props: {
             </TextFieldErrorMessage>
           </TextFieldRoot>
 
+          <Checkbox
+            class="mt-4 flex flex-row items-center gap-2"
+            checked={useCustomApi()}
+            onChange={setUseCustomApi}
+          >
+            <CheckboxControl />
+            <CheckboxLabel>
+              Use custom connection options
+            </CheckboxLabel>
+          </Checkbox>
+
+          <Show when={useCustomApi()}>
+            <CustomApiForm
+              class="mt-2"
+              state={customApi}
+              setState={setCustomApi}
+            />
+          </Show>
+
           <Button
             class="mt-6 w-full"
             size="sm"

packages/repl/src/components/settings/import/tdata/TdataImportDialog.tsx

@@ -2,10 +2,13 @@ import type { Tdata } from '@mtcute/convert'
 import { hex } from '@fuman/utils'
 import { workerInvoke } from 'mtcute-repl-worker/client'
 import { createEffect, createSignal, on, Show } from 'solid-js'
+import { unwrap } from 'solid-js/store'
 import { Button } from '../../../../lib/components/ui/button.tsx'
+import { Checkbox, CheckboxControl, CheckboxLabel } from '../../../../lib/components/ui/checkbox.tsx'
 import { Dialog, DialogContent, DialogDescription, DialogHeader } from '../../../../lib/components/ui/dialog.tsx'
 import { Spinner } from '../../../../lib/components/ui/spinner.tsx'
 import { $accounts } from '../../../../store/accounts.ts'
+import { CustomApiForm, useCustomApiFormState } from '../../login/CustomApiDialog.tsx'
 import { TdataDataTable } from './TdataTable.tsx'
 
 interface TdataAccount {
@@ -25,6 +28,9 @@ export function TdataImportDialog(props: {
   const [error, setError] = createSignal<string | undefined>('')
   const [loading, setLoading] = createSignal(false)
 
+  const [useCustomApi, setUseCustomApi] = createSignal(false)
+  const [customApi, setCustomApi] = useCustomApiFormState()
+
   const accountExists = (id: number) => $accounts.get()?.some(it => it.telegramId === id)
 
   let abortController: AbortController | undefined
@@ -43,6 +49,7 @@ export function TdataImportDialog(props: {
           dcId: account.dcId,
           testMode: false,
           abortSignal: abortController.signal,
+          apiOptions: unwrap(customApi),
         })
       } catch (e) {
         if (e instanceof Error) {
@@ -212,12 +219,31 @@ export function TdataImportDialog(props: {
               }}
             />
             {error() && (
-              <div class="text-error-foreground mt-2 text-sm">
+              <div class="mt-2 text-sm text-error-foreground">
                 {error()}
               </div>
             )}
           </Show>
 
+          <Checkbox
+            class="mt-2 flex flex-row items-center gap-2"
+            checked={useCustomApi()}
+            onChange={setUseCustomApi}
+          >
+            <CheckboxControl />
+            <CheckboxLabel>
+              Use custom connection options
+            </CheckboxLabel>
+          </Checkbox>
+
+          <Show when={useCustomApi()}>
+            <CustomApiForm
+              class="mt-2"
+              state={customApi}
+              setState={setCustomApi}
+            />
+          </Show>
+
           <Button
             class="mt-4 w-full"
             size="sm"

packages/repl/src/components/settings/login/CustomApiDialog.tsx

@@ -6,6 +6,7 @@ import { Button } from '../../../lib/components/ui/button.tsx'
 import { Checkbox, CheckboxControl, CheckboxLabel } from '../../../lib/components/ui/checkbox.tsx'
 import { Dialog, DialogContent, DialogHeader } from '../../../lib/components/ui/dialog.tsx'
 import { TextField, TextFieldFrame, TextFieldLabel, TextFieldRoot } from '../../../lib/components/ui/text-field.tsx'
+import { cn } from '../../../lib/utils.ts'
 
 export function useCustomApiFormState() {
   // eslint-disable-next-line solid/reactivity
@@ -30,8 +31,9 @@ export function CustomApiForm(props: {
   const [showAdvanced, setShowAdvanced] = createSignal(false)
 
   return (
-    <div class="flex flex-col gap-2">
+    <div class={cn('flex flex-col gap-2', props.class)}>
-      <TextFieldRoot>
+      <div class="flex flex-row gap-2">
+        <TextFieldRoot class="flex-1">
           <TextFieldLabel>API ID</TextFieldLabel>
           <TextFieldFrame>
             <TextField
@@ -41,7 +43,7 @@ export function CustomApiForm(props: {
             />
           </TextFieldFrame>
         </TextFieldRoot>
-      <TextFieldRoot>
+        <TextFieldRoot class="flex-[2]">
           <TextFieldLabel>API Hash</TextFieldLabel>
           <TextFieldFrame>
             <TextField
@@ -51,6 +53,7 @@ export function CustomApiForm(props: {
             />
           </TextFieldFrame>
         </TextFieldRoot>
+      </div>
 
       <Checkbox
         checked={showAdvanced()}

packages/repl/src/lib/components/ui/checkbox.tsx

@@ -1,11 +1,23 @@
 import type { CheckboxControlProps } from '@kobalte/core/checkbox'
 import type { PolymorphicProps } from '@kobalte/core/polymorphic'
-import type { ValidComponent, VoidProps } from 'solid-js'
+import type { ComponentProps, ValidComponent, VoidProps } from 'solid-js'
 import { Checkbox as CheckboxPrimitive } from '@kobalte/core/checkbox'
 import { splitProps } from 'solid-js'
 import { cn } from '../../utils.ts'
 
-export const CheckboxLabel = CheckboxPrimitive.Label
+export function CheckboxLabel(props: ComponentProps<typeof CheckboxPrimitive.Label>) {
+  const [local, others] = splitProps(props, ['class'])
+  return (
+    <CheckboxPrimitive.Label
+      class={cn(
+        'text-foreground',
+        local.class,
+      )}
+      {...others}
+    />
+  )
+}
+
 export const Checkbox = CheckboxPrimitive
 export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage
 export const CheckboxDescription = CheckboxPrimitive.Description

packages/repl/src/lib/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ export function DialogContent<T extends ValidComponent = 'div'>(props: Polymorph
       />
       <DialogPrimitive.Content
         class={cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg data-[closed]:duration-200 data-[expanded]:duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] max-h-screen overflow-auto gap-4 border bg-background p-6 shadow-lg data-[closed]:duration-200 data-[expanded]:duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
           local.class,
         )}
         {...rest}

packages/repl/src/lib/components/ui/text-field.tsx

@@ -25,7 +25,7 @@ export function TextFieldRoot<T extends ValidComponent = 'div'>(props: Polymorph
 }
 
 export const textfieldLabel = cva(
-  'text-sm font-medium data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70',
+  'text-sm font-medium text-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70',
   {
     variants: {
       label: {

packages/worker/src/utils/telegram.ts

@@ -58,9 +58,10 @@ export async function deleteAccount(accountId: string) {
 export async function importAccount(
   session: InputStringSessionData,
   abortSignal: AbortSignal,
+  apiOptions?: CustomApiFields,
 ): Promise<TelegramAccount> {
   const accountId = nanoid()
-  const client = createInternalClient(accountId, session.primaryDcs?.main.testMode)
+  const client = createInternalClient(accountId, session.primaryDcs?.main.testMode, apiOptions)
 
   let is404 = false
 

packages/worker/src/worker/telegram.ts

@@ -235,8 +235,9 @@ export class ReplWorkerTelegram {
     dcId: number
     testMode: boolean
     abortSignal: AbortSignal
+    apiOptions?: CustomApiFields
   }) {
-    const { hexAuthKey, dcId, testMode, abortSignal } = params
+    const { hexAuthKey, dcId, testMode, abortSignal, apiOptions } = params
 
     const authKey = hex.decode(hexAuthKey)
     if (authKey.length !== 256) {
@@ -247,7 +248,7 @@ export class ReplWorkerTelegram {
       authKey,
       testMode,
       primaryDcs: (testMode ? DC_MAPPING_TEST : DC_MAPPING_PROD)[dcId],
-    }, abortSignal)
+    }, abortSignal, apiOptions)
 
     if ($accounts.get().some(it => it.telegramId === account.telegramId)) {
       await deleteAccount(account.id)
@@ -267,6 +268,7 @@ export class ReplWorkerTelegram {
     libraryName: StringSessionLibName
     session: string
     abortSignal: AbortSignal
+    apiOptions?: CustomApiFields
   }) {
     let session: StringSessionData
     switch (params.libraryName) {
@@ -300,7 +302,7 @@ export class ReplWorkerTelegram {
       throw new Error(`Account already exists (user ID: ${session.self.userId})`)
     }
 
-    const account = await importAccount(session, params.abortSignal)
+    const account = await importAccount(session, params.abortSignal, params.apiOptions)
 
     // check if account already exists once again
     if ($accounts.get().some(it => it.telegramId === account.telegramId)) {