feat: started multi-subs

bun.lock

@@ -8,6 +8,8 @@
         "@telegram-apps/init-data-node": "^2.0.7",
         "@telegram-apps/sdk-react": "^3.3.0",
         "@telegram-apps/telegram-ui": "^2.1.8",
+        "embla-carousel": "^8.6.0",
+        "embla-carousel-react": "^8.6.0",
         "ioredis": "^5.6.1",
         "lucide-react": "^0.513.0",
         "next": "15.3.3",
@@ -492,6 +494,12 @@
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
+    "embla-carousel": ["embla-carousel@8.6.0", "", {}, "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="],
+
+    "embla-carousel-react": ["embla-carousel-react@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA=="],
+
+    "embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.6.0", "", { "peerDependencies": { "embla-carousel": "8.6.0" } }, "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A=="],
+
     "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
 
     "enhanced-resolve": ["enhanced-resolve@5.18.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="],

next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  reactStrictMode: true,
 };
 
 export default nextConfig;

package.json

@@ -14,6 +14,8 @@
     "@telegram-apps/init-data-node": "^2.0.7",
     "@telegram-apps/sdk-react": "^3.3.0",
     "@telegram-apps/telegram-ui": "^2.1.8",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "ioredis": "^5.6.1",
     "lucide-react": "^0.513.0",
     "next": "15.3.3",

prisma/migrations/20250610075025_make_tg_id_not_unique/migration.sql

@@ -0,0 +1,2 @@
+-- DropIndex
+DROP INDEX "User_tgId_key";

prisma/schema.prisma

@@ -9,6 +9,6 @@ datasource db {
 
 model User {
   id    String  @id @default(uuid())
-  tgId  String? @unique
+  tgId  String?
   email String? @unique
 }

src/app/_dto/db.ts

@@ -0,0 +1,5 @@
+export interface User {
+  id: string;
+  tgId: string | null;
+  email: string | null;
+}

src/app/actions.ts

@@ -4,6 +4,7 @@ import { authFetch } from "@/lib/login";
 import { getValidUrl } from "@/lib/url";
 import { prisma } from "@/utils/prisma";
 import { redis } from "@/utils/redis";
+import { User } from "@prisma/client";
 import { parse, validate } from "@telegram-apps/init-data-node";
 import { ClientSettings, InboundResponse } from "./_dto/inbounds";
 
@@ -39,18 +40,19 @@ export async function getUrl(initData: string = "") {
       throw new Error("User not found");
     }
     const cachedUser = await redis.get(`user:${initDataParsed.user.id}`);
-    const user = cachedUser
+    const users: User[] = cachedUser
       ? JSON.parse(cachedUser)
-      : await prisma.user.findFirst({
+      : await prisma.user.findMany({
           where: {
             tgId: initDataParsed.user.id.toString(),
           },
         });
-    if (!user) {
+    if (!users.length) {
       throw new Error("User not found");
     }
-    await redis.set(`user:${initDataParsed.user.id}`, JSON.stringify(user), "EX", 60);
+    await redis.set(`user:${initDataParsed.user.id}`, JSON.stringify(users), "EX", 60);
-    return await getUrlApi(user.email || "");
+    const usersUrl = await Promise.all(users.map(async (user) => await getUrlApi(user.email || "")));
+    return usersUrl;
   } catch (e) {
     throw e;
   }

src/app/page.tsx

@@ -1,22 +1,30 @@
 "use client";
 import { Block } from "@/components/Block";
+import { Carousel } from "@/components/Carousel/Carousel";
 import { Loader } from "@/components/Loader";
 import { Page } from "@/components/Page";
 import { cn } from "@/utils/cn";
 import { useRawInitData } from "@telegram-apps/sdk-react";
-import { ClipboardList } from "lucide-react";
+import { ChevronLeft, ChevronRight, ClipboardList } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { useEffect, useState } from "react";
 import { getUrl } from "./actions";
 
+interface ProxySubData {
+  url: string;
+  expiryTime: number;
+}
+
+type ProxySubArray = ProxySubData[];
+
 export default function Home() {
-  const [url, setUrl] = useState("");
+  const [proxyData, setProxyData] = useState<ProxySubArray>([]);
-  const [expiryTime, setExpiryTime] = useState(0);
+  const [chosen, setChosen] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
   const initData = useRawInitData();
-  const onCopyClick = async () => {
+  const onCopyClick = async (url: string) => {
-    if (!url.length) return;
+    if (!proxyData.length) return;
     await navigator.clipboard.writeText(url);
     setIsCopied(true);
     setTimeout(() => {
@@ -28,8 +36,7 @@ export default function Home() {
     const fetchData = async () => {
       try {
         const data = await getUrl(initData);
-        setUrl(data.url);
+        setProxyData(data);
-        setExpiryTime(data.expiryTime);
         setIsLoading(false);
       } catch (e) {
         console.error(e);
@@ -57,12 +64,17 @@ export default function Home() {
         <span className="text-xl font-semibold text-[var(--tg-theme-text-color)]">Nwaifu Proxy</span>
       </header>
       <main className="absolute bottom-0 left-0 flex w-full flex-col items-center gap-3 px-2.5 py-3.5 text-[var(--tg-theme-text-color)]">
-        {url && (
+        {proxyData.length && (
           <>
             <Block name="Ссылка">
+              <div className="flex w-full flex-row items-center justify-between">
+                <ChevronLeft onClick={() => setChosen(chosen - 1 < 0 ? proxyData.length - 1 : chosen - 1)} />
+                <Carousel loop>
+                  {proxyData.map((item, index) => (
                     <div
-                className="relative flex size-52 flex-col items-center justify-center rounded-md bg-white"
+                      className="relative flex size-52 flex-[0_0_100%] flex-col items-center justify-center rounded-md bg-white"
-                onClick={onCopyClick}
+                      onClick={() => onCopyClick(item.url)}
+                      key={index}
                     >
                       <div
                         className={cn(
@@ -75,22 +87,30 @@ export default function Home() {
                           <ClipboardList className="text-[var(--tg-theme-button-text-color)]" />
                         </span>
                       </div>
-                <QRCodeSVG value={url} className="size-48" />
+                      <QRCodeSVG value={item.url} className="size-48" />
+                    </div>
+                  ))}
+                </Carousel>
+                <ChevronRight onClick={() => setChosen(chosen + 1 > proxyData.length - 1 ? 0 : chosen + 1)} />
               </div>
               <span className="text-center text-sm font-semibold">Нажмите на QR, чтобы скопировать!</span>
             </Block>
             <Block name="Подписка">
               <div className="flex flex-col items-center gap-0.5">
                 <span>Статус:</span>
-                <span>{expiryTime > Date.now() || expiryTime === 0 ? "Активна" : "Не Активна"}</span>
+                <span>
+                  {proxyData[chosen].expiryTime > Date.now() || proxyData[chosen].expiryTime === 0
+                    ? "Активна"
+                    : "Не Активна"}
+                </span>
               </div>
               <div className="flex flex-col items-center gap-0.5">
                 <span>Активна до:</span>
                 <span>
-                  {expiryTime === 0
+                  {proxyData[chosen].expiryTime === 0
                     ? "Всегда"
-                    : expiryTime > Date.now()
+                    : proxyData[chosen].expiryTime > Date.now()
-                      ? new Date(expiryTime).toLocaleString("ru-RU")
+                      ? new Date(proxyData[chosen].expiryTime).toLocaleString("ru-RU")
                       : "Не Активна"}
                 </span>
               </div>

src/components/Carousel/Carousel.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { EmblaOptionsType } from "embla-carousel";
+import useEmblaCarousel from "embla-carousel-react";
+import { PropsWithChildren, useEffect, useState } from "react";
+
+type Props = PropsWithChildren & EmblaOptionsType;
+
+const Carousel: React.FC<Props> = ({ children, ...options }: Props) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const [, setSelectedIndex] = useState(0);
+  useEffect(() => {
+    const selectHandler = () => {
+      const index = emblaApi?.selectedScrollSnap();
+      setSelectedIndex(index || 0);
+    };
+    emblaApi?.on("select", selectHandler);
+    return () => {
+      emblaApi?.off("select", selectHandler);
+    };
+  }, [emblaApi]);
+
+  return (
+    <>
+      <div className="overflow-hidden" ref={emblaRef}>
+        <div className="flex">{children}</div>
+      </div>
+    </>
+  );
+};
+
+export { Carousel };

src/components/Carousel/Dots.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "@/utils/cn";
+
+type Props = {
+  itemsLength: number;
+  selectedIndex: number;
+};
+
+const Dots: React.FC<Props> = ({ itemsLength, selectedIndex }) => {
+  const arr = new Array(itemsLength).fill(0);
+  return (
+    <div className="my-2 flex -translate-y-5 justify-center gap-1">
+      {arr.map((_, i) => {
+        const selected = i === selectedIndex;
+        return (
+          <span
+            className={cn(
+              "h-2 w-2 rounded-full bg-[--tg-theme-button-bg-color] transition-all duration-300",
+              !selected && "opacity-50"
+            )}
+            key={i}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+Dots.displayName = "Dots";
+export { Dots };