update verifed badge, add custom user component, add user setting in setting modal

keeniGithub · keeniGithub · commit c3658688acee · 2026-03-22T19:08:53.000+03:00
diff --git a/public/badge/verifed.png b/public/badge/verifed.png
diff --git a/src/app/(main)/_components/navigation.tsx b/src/app/(main)/_components/navigation.tsx
@@ -178,7 +178,7 @@ export function Navigation() {
     return (
         <>
             <aside ref={sidebarRef} className={cn(
-                "group/sidebar h-full bg-[#fcfcfc] dark:bg-[#111111] overflow-y-auto relative flex w-60 flex-col z-[99999]",
+                "group/sidebar h-full bg-[#fcfcfc] dark:bg-[#111111] overflow-y-auto relative flex w-60 flex-col z-50",
                 isResetting && "transition-all ease-in-out duration-300",
                 isMobile && "w-0"
             )}>
@@ -236,9 +236,6 @@ export function Navigation() {
                     )}
                 </div>
 
-                <div className="absolute bottom-4 left-0 w-full flex justify-center items-center">
-                    <Link href={pages.PROFILE(isOrg, isOrg ? organization?.slug ?? "" : user?.username ?? "")} className="text-sm text-primary/50 hover:text-primary/80 transition-all duration-200">Перейти в профиль</Link>
-                </div>
                 <div onMouseDown={handleMouseDown} onClick={resetWidth} className="opacity-0 group-hover/sidebar:opacity-100 transition cursor-ew-resize absolute h-full w-1 bg-primary/10 right-0 top-0" />
             </aside>
 
diff --git a/src/app/(main)/_components/user-item.tsx b/src/app/(main)/_components/user-item.tsx
@@ -1,10 +1,54 @@
-import { OrganizationSwitcher } from "@clerk/clerk-react"
+"use client"
+
+import { OrganizationSwitcher, useOrganization, useUser } from "@clerk/clerk-react"
 import { pages } from "@/config/routing/pages.route"
+import Link from "next/link"
+import * as React from "react"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import { ChevronRight } from "lucide-react"
 
 export function UserItem(){
+    const { user } = useUser()
+    const { organization } = useOrganization()
+    const isOrg = organization?.id !== undefined
+
+    const image = (user as any)?.imageUrl || (user as any)?.profileImageUrl || (user as any)?.image || null
+
     return (
-        <div className="flex items-center m-2">
-            <OrganizationSwitcher afterSelectOrganizationUrl={pages.DASHBOARD()}/>
+        <div>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <button className="flex items-center w-full gap-2 p-2 hover:bg-accent">
+                        <Avatar className="h-6 w-6">
+                            {image ? (
+                                <AvatarImage src={image} alt={user?.username ?? user?.fullName ?? "user"} className="object-cover" />
+                            ) : (
+                                <AvatarFallback className="text-sm">{(user?.username || "?").charAt(0).toUpperCase()}</AvatarFallback>
+                            )}
+                        </Avatar>
+                        <div className="text-sm text-muted-foreground font-medium truncate max-w-[8rem]">{user?.username ?? user?.fullName ?? "Пользователь"}</div>
+                    </button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent className="w-52 p-3 flex flex-col items-start ml-2" align="start">
+                    <OrganizationSwitcher afterSelectOrganizationUrl={pages.DASHBOARD()} />
+
+                    <DropdownMenuSeparator/>
+                    
+                    <Link 
+                        href={pages.PROFILE(isOrg, isOrg ? organization?.slug ?? "" : user?.username ?? "")} 
+                        className="text-sm text-primary/65 flex flex-row hover:text-primary/80"
+                    >
+                        Перейти в профиль <ChevronRight className="w-5 h-5"/>
+                    </Link>
+                </DropdownMenuContent>
+            </DropdownMenu>
         </div>
     )
 }
diff --git a/src/app/(profile)/_components/verifed.tsx b/src/app/(profile)/_components/verifed.tsx
@@ -1,6 +1,6 @@
-import { Check } from 'lucide-react'
 import { useState } from 'react'
 import type { VerifedBadgeProps } from "@/config/types/profile.types";
+import Image from 'next/image';
 
 export default function VerifedBadge({ text, size, clicked = false, down = false }: VerifedBadgeProps) {
   const [isClicked, setIsClicked] = useState(false)
@@ -22,9 +22,13 @@ export default function VerifedBadge({ text, size, clicked = false, down = false
       className="relative select-none sm:block group"
       onMouseLeave={handleMouseLeave}
     >
-      <Check
+      <Image
         className={`w-${size} h-${size} text-yellow-400 transform transition-transform duration-200 hover:scale-110 cursor-pointer`}
         onClick={handleClick}
+        alt='verifed badge'
+        width={200}
+        height={200}
+        src={"/badge/verifed.png"}
       />
       <span
         className={`absolute ${down ? "top-5 ml-8" : "-top-8"} left-1/2 -translate-x-1/2 bg-black px-2 py-1 rounded text-xs transition-opacity duration-200 text-center whitespace-nowrap text-yellow-200 
diff --git a/src/app/(profile)/org/[orgname]/page.tsx b/src/app/(profile)/org/[orgname]/page.tsx
@@ -131,13 +131,13 @@ export default function OrgProfile({ params }: OrgProps) {
                       <span className="flex flex-row items-center gap-2">
                         {org?.name}
                         {org?.badges.verified && (
-                          <VerifedBadge text="Верефицированная команда" size={7} clicked={false} />
+                          <VerifedBadge text="Верефицированная команда" size={6} clicked={false} />
                         )}
                       </span>
                     </span>
                     <div className="hidden sm:block">
                       {org?.badges.verified && (
-                        <VerifedBadge text="Верефицированная команда" size={7} clicked={false} />
+                        <VerifedBadge text="Верефицированная команда" size={6} clicked={false} />
                       )}
                     </div>
                   </h1>
@@ -198,7 +198,7 @@ export default function OrgProfile({ params }: OrgProps) {
                   </>
                 )}
                 <div className="mt-8 mx-6">
-                  <h2 className="text-2xl font-bold mb-4">All Notes</h2>
+                  <h2 className="text-2xl font-bold mb-4">Заметки</h2>
                   {org._id ? (
                     <DocumentList user={org} profile={params.orgname} setProfile={setOrg} />
                   ) : (
@@ -243,7 +243,7 @@ export default function OrgProfile({ params }: OrgProps) {
 
           {!org?.privated && (
             <div className="mt-8 mx-6">
-              <h2 className="text-2xl font-bold mb-4">All Notes</h2>
+              <h2 className="text-2xl font-bold mb-4">Заметки</h2>
               {org._id ? (
                 <DocumentList user={org} profile={params.orgname} setProfile={setOrg} />
               ) : (
diff --git a/src/app/(profile)/user/[username]/page.tsx b/src/app/(profile)/user/[username]/page.tsx
@@ -199,7 +199,7 @@ export default function UserProfile({ params }: UsernameProps) {
                   </>
                 )}
                 <div className="mt-8 mx-6">
-                  <h2 className="text-2xl font-bold mb-4">All Notes</h2>
+                  <h2 className="text-2xl font-bold mb-4">Заметки</h2>
                   {profile._id ? (
                     <DocumentList user={profile} profile={params.username} setProfile={setProfile} />
                   ) : (
@@ -244,7 +244,7 @@ export default function UserProfile({ params }: UsernameProps) {
 
           {!profile?.privated && (
             <div className="mt-8 mx-6">
-              <h2 className="text-2xl font-bold mb-4">All Notes</h2>
+              <h2 className="text-2xl font-bold mb-4">Заметки</h2>
               {profile._id ? (
                 <DocumentList user={profile} profile={params.username} setProfile={setProfile} />
               ) : (
diff --git a/src/components/modal/settings-modal.tsx b/src/components/modal/settings-modal.tsx
@@ -3,21 +3,23 @@ import { ModeToggle } from "../mode-toggle"
 import { useSettings } from "../hooks/use-settings"
 import { Label } from "../ui/label"
 import { Separator } from "@radix-ui/react-dropdown-menu"
-import { SignOutButton, useOrganization } from "@clerk/nextjs"
+import { SignOutButton, useOrganization, useClerk, useUser } from "@clerk/nextjs"
 import { useRouter } from "next/navigation"
-import { useUser } from "@clerk/nextjs"
 import { useState, useEffect } from "react"
 import { Switch } from "@/components/ui/switch"
 import { getById as getUserById } from "../../app/api/users/user"
 import { getById as getOrgById } from "../../app/api/orgs/org"
 import { updateUser } from "../../app/api/users/user"
 import { updateOrg } from "../../app/api/orgs/org"
 import { pages } from "@/config/routing/pages.route"
+import { Button } from "../ui/button"
+import { useRef } from "react"
 
 export function SettingsModal() {
   const settings = useSettings()
   const router = useRouter()
   const { user } = useUser()
+  const clerk = useClerk()
   const { organization } = useOrganization()
   const [isPrivated, setIsPrivated] = useState<boolean>(false)
   const [watermark, setWatermark] = useState<boolean>(false)
@@ -66,6 +68,84 @@ export function SettingsModal() {
     }
   }
 
+  // backdrop modal (simplified)
+
+  const backdropId = "clerk-backdrop-overlay"
+  const intervalRef = useRef<number | null>(null)
+
+  const addBackdrop = () => {
+    if (typeof document === "undefined") return
+    if (document.getElementById(backdropId)) return
+
+    const el = document.createElement("div")
+    el.id = backdropId
+    Object.assign(el.style, {
+      position: "fixed",
+      inset: "0",
+      background: "rgba(0,0,0,0.45)",
+      zIndex: "9998",
+      pointerEvents: "auto",
+    })
+
+    document.body.appendChild(el)
+  }
+
+  const removeBackdrop = () => {
+    if (typeof document === "undefined") return
+    const el = document.getElementById(backdropId)
+    if (el) el.remove()
+  }
+
+  const watchForClerkModal = () => {
+    if (typeof document === "undefined") return
+
+    const selectors = [
+      '[data-clerk-portal]',
+      '[data-clerk-root]',
+      '.clerk-root',
+      '.clerk-modal',
+      '[id^="clerk"]',
+      '[id^="__clerk"]',
+    ]
+
+    const hasClerk = () => selectors.some(s => !!document.querySelector(s))
+
+    const start = Date.now()
+    if (intervalRef.current) return
+
+    intervalRef.current = window.setInterval(() => {
+      if (!hasClerk() || Date.now() - start > 60000) {
+        removeBackdrop()
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current)
+          intervalRef.current = null
+        }
+      }
+    }, 200)
+  }
+
+  useEffect(() => {
+    if (!settings.isOpen) {
+      removeBackdrop()
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }, [settings.isOpen])
+
+  useEffect(() => {
+    return () => {
+      removeBackdrop()
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }, [])
+
+  // backdrop modal end
+
   return (
     <Dialog open={settings.isOpen} onOpenChange={settings.onClose}>
       <DialogContent>
@@ -115,15 +195,35 @@ export function SettingsModal() {
         )}
 
         <Separator />
-        <div
-          onClick={() => {
-            router.push(pages.ROOT)
-            settings.onClose()
-          }}
-          className="m-auto hover:text-primary/80"
-        >
-          <SignOutButton>Выйти из аккаунта</SignOutButton>
-        </div>
+
+        <section className="flex flex-col md:flex-row justify-center items-center gap-3">
+          <div className="w-full flex justify-center md:w-auto">
+            <Button
+              onClick={() => {
+                addBackdrop()
+                watchForClerkModal()
+                clerk?.openUserProfile?.()
+                settings.onClose()
+              }}
+              variant={"outline"}
+            >
+              Настройки аккаунта
+            </Button>
+          </div>
+          <div
+            onClick={() => {
+              router.push(pages.ROOT)
+              settings.onClose()
+            }}
+            className="w-full flex justify-center md:w-auto hover:text-primary/80"
+          >
+            <SignOutButton>
+              <Button variant={"destructive"}>
+                Выйти из аккаунта
+              </Button>
+            </SignOutButton>
+          </div>
+        </section>
       </DialogContent>
     </Dialog>
   )
