feat: added alert on first login

packages/repl/src/components/settings/AccountsTab.tsx

@@ -13,6 +13,7 @@ import {
   LucideRefreshCw,
   LucideSearch,
   LucideTrash,
+  LucideTriangleAlert,
   LucideUser,
   LucideX,
 } from 'lucide-solid'
@@ -22,6 +23,7 @@ import { nanoid } from 'nanoid'
 import { createEffect, createMemo, createSignal, For, on, onCleanup, Show } from 'solid-js'
 import { toast } from 'solid-sonner'
 import { copyToClipboard } from '../../lib/clipboard.tsx'
+import { Alert, AlertDescription, AlertTitle } from '../../lib/components/ui/alert.tsx'
 import { Badge } from '../../lib/components/ui/badge.tsx'
 import { Button } from '../../lib/components/ui/button.tsx'
 import { Dialog, DialogContent } from '../../lib/components/ui/dialog.tsx'
@@ -308,7 +310,23 @@ export function AccountsTab() {
       <Show
         when={accounts()?.length !== 0}
         fallback={(
-          <div class="flex h-full flex-col items-center justify-center gap-4 text-muted-foreground">
+          <div class="flex h-full flex-col items-center justify-center gap-4 px-2 text-muted-foreground">
+            <Alert variant="destructive" class="max-w-md">
+              <LucideTriangleAlert class="size-4" />
+              <AlertTitle class="font-bold">Warning</AlertTitle>
+              <AlertDescription>
+                This is an
+                {' '}
+                <b>unofficial</b>
+                {' '}
+                Telegram application.
+                <br />
+                You might trigger anti-spam measures and get banned.
+                <br />
+                Proceed at your own risk.
+              </AlertDescription>
+            </Alert>
+
             No accounts yet
             <div class="flex flex-row gap-2">
               <Button

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

@@ -81,7 +81,7 @@ function QrLoginStep(props: StepProps<'qr'>) {
           />
         ) : <Spinner indeterminate class="size-10" />}
       </div>
-      <ol class="text-muted-foreground mt-4 list-inside list-decimal text-sm">
+      <ol class="mt-4 list-inside list-decimal text-sm text-muted-foreground">
         <li>Open Telegram on your phone</li>
         <li>
           Go to
@@ -147,7 +147,7 @@ function PhoneNumberStep(props: StepProps<'phone'>) {
       <h2 class="mt-4 text-xl font-bold">
         Log in with phone number
       </h2>
-      <div class="text-muted-foreground mt-2 text-center text-sm">
+      <div class="mt-2 text-center text-sm text-muted-foreground">
         Please confirm your country code
         <br />
         and enter your phone number
@@ -177,7 +177,7 @@ function PhoneNumberStep(props: StepProps<'phone'>) {
         <TextFieldErrorMessage>{error()}</TextFieldErrorMessage>
       </TextFieldRoot>
       <div class="flex-1" />
-      <div class="text-muted-foreground text-center text-sm">
+      <div class="text-center text-sm text-muted-foreground">
         or,
         {' '}
         <a
@@ -309,7 +309,7 @@ function OtpStep(props: StepProps<'otp'>) {
         Wrong number?
       </div>
 
-      <div class="text-muted-foreground mt-4 text-center text-sm">
+      <div class="mt-4 text-center text-sm text-muted-foreground">
         {description()}
       </div>
       <div class="mt-4 flex flex-col items-center text-center">
@@ -363,7 +363,7 @@ function OtpStep(props: StepProps<'otp'>) {
             </OTPFieldGroup>
           </OTPField>
           {error() && (
-            <div class="text-error-foreground mt-1 text-sm">{error()}</div>
+            <div class="mt-1 text-sm text-error-foreground">{error()}</div>
           )}
         </Show>
 
@@ -438,7 +438,7 @@ function PasswordStep(props: StepProps<'password'>) {
       <h2 class="text-xl font-bold">
         2FA password
       </h2>
-      <div class="text-muted-foreground mt-4 text-center text-sm">
+      <div class="mt-4 text-center text-sm text-muted-foreground">
         Your account is protected with an additional password.
       </div>
       <div class="mt-4">
@@ -483,9 +483,9 @@ function DoneStep(props: StepProps<'done'>) {
     <div class="flex flex-col items-center justify-center">
       <AccountAvatar
         account={props.ctx.account}
-        class="animate-scale-up fill-mode-forwards mb-4 size-24 shadow-sm"
+        class="mb-4 size-24 animate-scale-up shadow-sm fill-mode-forwards"
       />
-      <div class="animate-fade-out-down fill-mode-forwards text-center font-medium">
+      <div class="animate-fade-out-down text-center font-medium fill-mode-forwards">
         Welcome,
         {' '}
         {props.ctx.account.name}

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

@@ -0,0 +1,64 @@
+import type { AlertRootProps } from '@kobalte/core/alert'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
+import type { VariantProps } from 'class-variance-authority'
+import type { ComponentProps, ValidComponent } from 'solid-js'
+import { Alert as AlertPrimitive } from '@kobalte/core/alert'
+import { cva } from 'class-variance-authority'
+import { splitProps } from 'solid-js'
+import { cn } from '../../utils.ts'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type alertProps<T extends ValidComponent = 'div'> = AlertRootProps<T> &
+  VariantProps<typeof alertVariants> & {
+    class?: string
+  }
+
+export function Alert<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, alertProps<T>>) {
+  const [local, rest] = splitProps(props as alertProps, ['class', 'variant'])
+
+  return (
+    <AlertPrimitive
+      class={cn(
+        alertVariants({
+          variant: props.variant,
+        }),
+        local.class,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function AlertTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div
+      class={cn('font-medium leading-5 tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function AlertDescription(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div class={cn('text-sm [&_p]:leading-relaxed', local.class)} {...rest} />
+  )
+}