Update landing skeleton, update buying success/cancel page, add install PWA button, add dashboard redirect and add note views count

keeniGithub · keeniGithub · commit 33187c450edb · 2026-03-23T17:01:16.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -35,4 +35,5 @@ yarn-error.log*
 next-env.d.ts
 
 public/*.js
-public/*.map
+public/*.map
+certificates
diff --git a/convex/document.ts b/convex/document.ts
@@ -475,6 +475,23 @@ export const removeCoverImage = mutation({
   }
 })
 
+export const incrementViews = mutation({
+  args: {
+    id: v.id("documents"),
+  },
+  handler: async (ctx, args) => {
+    const document = await ctx.db.get(args.id)
+
+    if (!document || !document.isPublished || document.isAcrhived) {
+      return
+    }
+
+    await ctx.db.patch(args.id, {
+      views: (document.views ?? 0) + 1,
+    })
+  }
+})
+
 export const getTestPage = query({
   handler: async (ctx) => {
     const document = await ctx.db.query("documents")
diff --git a/convex/schema.ts b/convex/schema.ts
@@ -17,6 +17,7 @@ export default defineSchema({
         isPublished: v.boolean(),
         lastEditor: v.optional(v.string()),
         verifed: v.optional(v.boolean()),
+        views: v.optional(v.number()),
     })
     .index("by_user", ["userId"])
     .index("by_user_parent", ["userId", "parentDocument"])
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev-https": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/src/app/(landing)/_components/heading.tsx b/src/app/(landing)/_components/heading.tsx
@@ -6,12 +6,13 @@ import { useConvexAuth } from "convex/react"
 import Link from "next/link"
 import Image from "next/image"
 import { images } from "@/config/routing/image.route"
+import InstallPWA from "./install"
 
 export function Heading() {
   const { isAuthenticated } = useConvexAuth()
 
   return (
-    <section className="grid md:grid-cols-2 gap-8 items-center py-12 px-4">
+    <section className="grid md:grid-cols-2 gap-8 items-center py-1 px-4">
       <div className="space-y-6 text-left">
         <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight">
           Новый уровень построения задач. Встречайте <span className="text-logo-yellow">N</span>
@@ -21,9 +22,12 @@ export function Heading() {
           Планируйте, синхронизируйте и работайте в команде в современной, комфортной среде — быстро и приятно
         </p>
 
+        <span className="space-x-2">
         <Link href={isAuthenticated ? pages.DASHBOARD() : pages.AUTH}>
           <Button className="mt-2">Перейти в Notter</Button>
         </Link>
+        <InstallPWA/>
+        </span>
       </div>
 
       <div className="flex justify-center">
diff --git a/src/app/(landing)/_components/install.tsx b/src/app/(landing)/_components/install.tsx
@@ -0,0 +1,53 @@
+import { Button } from "@/components/ui/button";
+import { Download } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+type BeforeInstallPromptEvent = Event & {
+  prompt: () => Promise<void>;
+  userChoice?: Promise<{ outcome: "accepted" | "dismissed"; platform?: string }>;
+};
+
+const InstallPWA = () => {
+  const [supportsPWA, setSupportsPWA] = useState(false);
+  const [promptInstall, setPromptInstall] = useState<BeforeInstallPromptEvent | null>(null);
+
+  useEffect(() => {
+    const handler = (e: any) => {
+      e.preventDefault();
+      setSupportsPWA(true);
+      setPromptInstall(e);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  }, []);
+
+  const onClick = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    if (!promptInstall) return;
+    try {
+      await promptInstall.prompt();
+      await promptInstall.userChoice?.then(() => null).catch(() => null);
+    } finally {
+      setPromptInstall(null);
+      setSupportsPWA(false);
+    }
+  };
+
+//   if (!supportsPWA) return null;
+
+  return (
+    <Button
+      className="link-button"
+      id="setup_button"
+      aria-label="Установить приложение"
+      title="Установить приложение"
+      onClick={onClick}
+      variant={"outline"}
+    >
+      Установить <Download/>
+    </Button>
+  );
+};
+
+export default InstallPWA;
diff --git a/src/app/(landing)/_components/premium-card.tsx b/src/app/(landing)/_components/premium-card.tsx
@@ -13,7 +13,7 @@ export default function PremiumCard({ title, price, className, icon, features, b
         )}
         <div>
           <h3 className="text-2xl font-semibold">{title}</h3>
-          <div className="text-sm text-muted-foreground">{price}₽ / мес</div>
+          <div className="text-sm text-muted-foreground">{price}₽ / навсегда</div>
         </div>
       </div>
 
diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx
@@ -7,38 +7,114 @@ import { Premium } from "./_components/premium";
 import { useConvexAuth } from "convex/react";
 import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useRouter } from "next/navigation";
 
 export default function Landing() {
   const { isLoading } = useConvexAuth()
+  const router = useRouter()
   const [isReady, setIsReady] = useState(false)
 
   useEffect(() => {
+    const redirectValue = localStorage.getItem("redirect")
+    if (redirectValue === "true") {
+      router.replace("/dashboard")
+    }
+    
     if (!isLoading) {
       setIsReady(true);
     }
-  }, [isLoading])
+  }, [isLoading, router])
 
   if (!isReady) {
     return (
       <div className="min-h-full flex flex-col">
-        <div className="flex flex-col items-center justify-center md:justify-start text-center gap-y-8 flex-1 px-6 pb-10 m-0 p-0">
+        <div className="flex flex-col items-center justify-center md:justify-start text-center gap-y-8 flex-1 pb-10 m-0 p-0 ">
           
-          <div className="flex flex-row gap-10">
-            <div className="flex justify-start flex-col gap-2">
-              <Skeleton className="h-40 sm:h-56 md:h-72 w-full max-w-[500px]" />
-              <Skeleton className="h-6 sm:h-7 md:h-8 w-48 sm:w-80 md:w-[600px]" />
+          <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 flex flex-col lg:flex-row items-center lg:items-start gap-6 lg:gap-10">
+            <div className="w-full max-w-2xl flex justify-start flex-col gap-2">
+              <Skeleton className="h-40 sm:h-56 md:h-72 w-full" />
+              <Skeleton className="h-6 sm:h-7 md:h-8 w-full max-w-[600px] mt-4" />
               <Skeleton className="h-8 sm:h-10 md:h-12 w-24 sm:w-28 md:w-36" />
             </div>
 
-            <Skeleton className="h-96 w-96" />
+            <Skeleton className="h-64 w-full max-w-[340px] sm:h-80 sm:max-w-[420px] lg:h-96 lg:w-96" />
+          </div>
+
+          <div className="w-full max-w-[1050px] mx-auto px-4 sm:px-6">
+            <div className="space-y-3">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="rounded-2xl border border-border/50 p-5 sm:p-6 py-6">
+                  <div className="flex flex-col items-center text-center md:flex-row md:items-center md:text-left gap-4 sm:gap-5">
+                    <Skeleton className="h-20 w-20 rounded-xl" />
+                    <div className="space-y-2 w-full md:flex-1 flex flex-col items-center md:items-start text-center md:text-left">
+                      <Skeleton className="h-7 w-full max-w-56" />
+                      <Skeleton className="h-4 w-full max-w-[640px]" />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
           </div>
+          
+          <div className="w-full max-w-6xl mx-auto p-6 flex justify-center items-center flex-col">
+            <div className="w-full">
+              <div className="flex flex-col items-center text-center">
+                <div className="flex items-end gap-2 sm:gap-3 mb-3">
+                  <Skeleton className="h-10 sm:h-12 w-36 sm:w-48" />
+                  <Skeleton className="h-10 sm:h-12 w-20 sm:w-28" />
+                </div>
+                <Skeleton className="h-4 w-full max-w-2xl mb-6" />
+
+                <div className="flex items-center gap-3 sm:gap-4 mb-8">
+                  <Skeleton className="h-9 w-24 sm:w-32 rounded-md" />
+                  <Skeleton className="h-6 w-4" />
+                  <Skeleton className="h-9 w-24 sm:w-32 rounded-md" />
+                </div>
+              </div>
 
-          <div className="w-full flex flex-col items-center justify-center gap-y-10">
-            <Skeleton className="h-[400px] md:h-[250px] w-full max-w-[1000px]" />
-            <Skeleton className="h-[400px] md:h-[250px] w-full max-w-[1000px]" />
-            <Skeleton className="h-[400px] md:h-[250px] w-full max-w-[1000px]" />
-            <Skeleton className="h-[400px] md:h-[250px] w-full max-w-[1000px]" />
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 text-left mb-8">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <div key={i} className="rounded-2xl border border-border/50 p-5 sm:p-6 min-h-[330px] flex flex-col">
+                    <div className="flex items-center gap-3 mb-5">
+                      <Skeleton className="h-8 w-8 rounded-lg" />
+                      <div className="space-y-2 flex-1">
+                        <Skeleton className="h-7 w-28" />
+                        <Skeleton className="h-4 w-20" />
+                      </div>
+                    </div>
+
+                    <div className="space-y-3 flex-1">
+                      <Skeleton className="h-3.5 w-full" />
+                      <Skeleton className="h-3.5 w-[92%]" />
+                      <Skeleton className="h-3.5 w-[84%]" />
+                      <Skeleton className="h-3.5 w-[74%]" />
+                    </div>
+
+                    <Skeleton className="h-9 w-full rounded-md mt-6" />
+                  </div>
+                ))}
+              </div>
+
+              <div className="rounded-xl border border-border/50 overflow-hidden">
+                <div className="grid grid-cols-4 gap-3 sm:gap-4 p-4 sm:p-5 border-b border-border/50">
+                  <Skeleton className="h-5 w-full max-w-44" />
+                  <Skeleton className="h-5 w-full max-w-16" />
+                  <Skeleton className="h-5 w-full max-w-16" />
+                  <Skeleton className="h-5 w-full max-w-20" />
+                </div>
+
+                {Array.from({ length: 6 }).map((_, r) => (
+                  <div key={r} className="grid grid-cols-4 gap-3 sm:gap-4 p-4 sm:p-5 border-b border-border/40 last:border-b-0">
+                    <Skeleton className="h-4 w-full max-w-52" />
+                    <Skeleton className="h-4 w-full max-w-12" />
+                    <Skeleton className="h-4 w-full max-w-16" />
+                    <Skeleton className="h-4 w-full max-w-16" />
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
+
         </div>
         <Footer/>
       </div>
diff --git a/src/app/(main)/_components/document-list.tsx b/src/app/(main)/_components/document-list.tsx
@@ -37,7 +37,7 @@ export function DocumentList({
     })
 
     const onRedirect = (documentId: string) => {
-        router.push(pages.DASHBOARD(documentId)) // redirect to docId
+        router.push(pages.DASHBOARD(documentId))
     }
 
     if (documents === undefined) {
diff --git a/src/app/(main)/_components/menu.tsx b/src/app/(main)/_components/menu.tsx
@@ -39,7 +39,7 @@ export function Menu({ documentId }: MenuProps) {
     userId: orgId,
   });
 
-  const [openModal, setOpenModal] = useState(false); // Стейт для открытия модального окна
+  const [openModal, setOpenModal] = useState(false);
   const [profile, setProfile] = useState<User | Org | null>(null)
 
   useEffect(() => {
diff --git a/src/app/(main)/_components/publish.tsx b/src/app/(main)/_components/publish.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQuery } from "convex/react"
 import { useState, useEffect } from "react"
 import { toast } from "react-hot-toast"
 import { Button } from "@/components/ui/button"
-import { Check, Copy, Globe } from "lucide-react"
+import { Check, Copy, Eye, Globe } from "lucide-react"
 import { Doc } from "../../../../convex/_generated/dataModel"
 import { api } from "../../../../convex/_generated/api"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -232,6 +232,10 @@ export function Publish({ initialData }: PublishProps) {
               </Button>
             </div>
 
+            <span className="flex flex-row text-primary/50 text-xs items-center gap-1">
+              <Eye className="w-4 h-4"/> Просмотров: {initialData.views ?? 0}
+            </span>
+
             <div className="flex flex-row items-center">
               <Checkbox
                 checked={isShortUrl}
diff --git a/src/app/(main)/_components/trash-box.tsx b/src/app/(main)/_components/trash-box.tsx
@@ -115,7 +115,7 @@ export function TrashBox(){
       </div>
       <div
         className="mt-2 px-1 pb-1 flex-1 overflow-y-auto"
-        style={{ maxHeight: "calc(100vh - 120px)" }} // Можно скорректировать под ваш layout
+        style={{ maxHeight: "calc(100vh - 120px)" }}
       >
         {filteredDocuments?.length === 0 && (
           <p className="pb-2 text-center text-xs text-muted-foreground">
diff --git a/src/app/(public)/_components/document.tsx b/src/app/(public)/_components/document.tsx
@@ -3,7 +3,7 @@
 import dynamic from "next/dynamic"
 import { useMemo, useEffect, useState } from "react"
 import { Skeleton } from "@/components/ui/skeleton"
-import { useQuery } from "convex/react"
+import { useQuery, useMutation } from "convex/react"
 import { Toolbar } from "@/components/toolbar"
 import { Cover } from "@/components/cover"
 import Error404 from "@/app/not-found"
@@ -52,6 +52,7 @@ export default function DocumentIdPage({ params }: DocumentIdPageProps) {
   const [user, setUser] = useState<User | null>(null)
   const { user: clerkUser } = useUser()
   const { organization } = useOrganization()
+  const incrementViews = useMutation(api.document.incrementViews)
   
   const document = useQuery(
     isShort
@@ -66,6 +67,13 @@ export default function DocumentIdPage({ params }: DocumentIdPageProps) {
         }
   )
 
+  useEffect(() => {
+    if (document?._id && document.isPublished && !document.isAcrhived) {
+      incrementViews({ id: document._id })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document?._id])
+
   useEffect(() => {
     const fetchProfile = async () => {
       if (document?.creatorName) {
diff --git a/src/app/buy/(main)/page.tsx b/src/app/buy/(main)/page.tsx
@@ -176,7 +176,7 @@ export default function BuyPremium() {
                             )}
                             <div className="text-2xl font-bold">{calculatePrice().price}₽</div>
                         </div>
-                        <div className="text-xs text-muted-foreground">Ежемесячно</div>
+                        <div className="text-xs text-muted-foreground">Единоразово</div>
                     </div>
 
                     <div className="mt-6">
@@ -197,7 +197,7 @@ function PlanCard({ id, title, price, icon, selected, onSelect }: { id: string;
                 {icon && <Image src={icon} alt={title} width={40} height={40} />}
                 <div>
                     <div className="text-lg font-semibold">{title}</div>
-                    <div className="text-sm text-muted-foreground">{price}₽ / мес</div>
+                    <div className="text-sm text-muted-foreground">{price}₽ / навсегда</div>
                 </div>
             </div>
             <ul className="mt-3 text-sm text-muted-foreground list-disc pl-5 space-y-1">
diff --git a/src/app/buy/cancel/page.tsx b/src/app/buy/cancel/page.tsx
diff --git a/src/app/buy/success/page.tsx b/src/app/buy/success/page.tsx
diff --git a/src/components/modal/settings-modal.tsx b/src/components/modal/settings-modal.tsx

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export function DocumentList({`
`37`	`37`	`})`
`38`	`38`
`39`	`39`	`const onRedirect = (documentId: string) => {`
`40`		`- router.push(pages.DASHBOARD(documentId)) // redirect to docId`
	`40`	`+ router.push(pages.DASHBOARD(documentId))`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`if (documents === undefined) {`