fix(ui): add border, remove console.log & console errors (#23)

src/app/(gistLayout)/layout-ui.tsx

@@ -47,41 +47,37 @@ export default function GistLayout({ avatar, children, username, onMyGistsClick,
             <ProfileDropdown username={username} onLogoutClick={onLogoutClick} />
           </div>
 
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger>
-                <Modal
-                  title="New Gist"
-                  trigger={
-                    <Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
-                      <LucidePencil className="w-4 h-4" />
-                    </Button>
-                  }
-                  content={
-                    <div className="flex flex-col gap-3">
-                      <Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Gist name" value={gistName} onChange={(e) => setGistName(e.target.value)} />
-                      <Codearea
-                        className="border-0 bg-background p-0 font-normal"
-                        placeholder="Write content..."
-                        value={gistContent}
-                        language={language}
-                        onChange={(e) => setGistContent(e.target.value)}
-                      />
-                    </div>
-                  }
-                  footer={
-                    <MenuButton variant="default" size="sm" onClick={handleCreateGistClick}>
-                      Create
-                    </MenuButton>
-                  }
-                ></Modal>
-              </TooltipTrigger>
-              <TooltipContent className="flex flex-row gap-2 justify-center items-center">
-                <span>Create a new Gist</span>
-                <Shortcut letter="C" />
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Modal
+            title="New Gist"
+            trigger={
+              <div>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
+                        <LucidePencil className="w-4 h-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent className="flex flex-row gap-2 justify-center items-center">
+                      <span>Create a new Gist</span>
+                      <Shortcut letter="C" />
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            }
+            content={
+              <div className="flex flex-col gap-3">
+                <Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Gist name" value={gistName} onChange={(e) => setGistName(e.target.value)} />
+                <Codearea className="border-0 bg-background p-0 font-normal" placeholder="Write content..." value={gistContent} language={language} onChange={(e) => setGistContent(e.target.value)} />
+              </div>
+            }
+            footer={
+              <MenuButton variant="default" size="sm" onClick={handleCreateGistClick}>
+                Create
+              </MenuButton>
+            }
+          ></Modal>
         </div>
         <div className="flex flex-col gap-2">
           <MenuButton icon={<FileCodeIcon />} variant="menu" size="menu" letter="M" onClick={onMyGistsClick} href="/mygist" className="w-full">

src/app/(gistLayout)/layout.tsx

@@ -29,23 +29,19 @@ export default function GistLayoutFeature({ children }: { children: ReactNode })
   })
 
   const onMyGistsClick = () => {
-    console.log('My Gists clicked')
   }
 
   const onCreateTeamClick = useCallback(
     (name: string) => {
       createTeam(name)
-      console.log('Creating team with name:', name)
     },
     [toast, createTeam]
   )
 
   const onLogoutClick = () => {
-    console.log('/logout')
   }
 
   const onCreateGistClick = (name: string, content: string) => {
-    console.log(`Creating gist with name: ${name} \nand content: ${content}`)
     createGist({
       content,
       name,

src/app/(gistLayout)/mygist/[gistId]/page.tsx

@@ -32,20 +32,16 @@ export default function MyGistIdFeaturePage({
 
   const { mutate: updateContent } = usePatchGistContent({
     onSuccess: () => {
-      console.log("Gist content updated");
     },
   });
 
   const onDownloadClick = () => {
-    console.log("Downloading gist");
     toast({
       title: "Gist Downloaded",
       description: "Your gist has been downloaded successfully",
     });
   };
   const onSaveClick = (name: string, code: string) => {
-    console.log("Saving gist with name:", name, "and code:", code);
-
     updateContent({ id: gistId, content: code });
 
     updateName({ id: gistId, name });

src/app/(gistLayout)/mygist/page-ui.tsx

@@ -14,7 +14,7 @@ export default function MyGistsPage({}: MyGistPageProps) {
         <span>My Gists</span>
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <MenuButton icon={<TornadoIcon className="w-4 h-4" />} variant={'menu'}>
                 <span>Sort by</span>
               </MenuButton>

src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx

@@ -34,23 +34,18 @@ export default function MyTeamGistIdFeaturePage({
 
   const { mutate: updateContent } = usePatchGistContent({
     onSuccess: () => {
-      console.log("Gist content updated");
     },
   });
 
   const onDownloadClick = () => {
-    console.log("Downloading gist");
     toast({
       title: "Gist Downloaded",
       description: "Your gist has been downloaded successfully",
     });
   };
 
   const onSaveClick = (name: string, code: string) => {
-    console.log("Saving gist with name:", name, "and code:", code);
-
     updateContent({ id: gistId, content: code });
-
     updateName({ id: gistId, name });
   };
 

src/app/layout.tsx

@@ -20,7 +20,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  console.log(getBackendURL());
   return (
     <html lang="en" suppressHydrationWarning={true}>
       <body className={cn(fontSans.className)}>

src/app/login/login-feature.tsx

@@ -40,7 +40,6 @@ export default function LoginFeature() {
 
   const onSubmit = useCallback(
     (data: FormData) => {
-      console.log(data)
       sendEmail(data.email)
       localStorage.setItem('email', data.email)
       setStep('otpInput')
@@ -57,13 +56,10 @@ export default function LoginFeature() {
   }, [step, isValid, handleSubmit, onSubmit])
 
   const handleGitHubClick = useCallback(() => {
-    console.log('GitHub')
     window.location.href = getBackendURL() + '/auth/github'
   }, [])
 
   const handleGoogleClick = useCallback(() => {
-    console.log('CGoogle')
-
     window.location.href = getBackendURL() + '/auth/google'
   }, [])
 
@@ -72,7 +68,6 @@ export default function LoginFeature() {
   }, [])
 
   const handleContinueClick = useCallback(() => {
-    console.log('OTP:', otpValue)
     const email = localStorage.getItem('email')
     if (!email) {
       console.error('Email not found in local storage.')
@@ -83,7 +78,6 @@ export default function LoginFeature() {
   }, [otpValue, verifyEmail])
 
   const handleTryAgainClick = useCallback(() => {
-    console.log('A new OTP has been sent.')
     toast({
       title: 'A new one time password has been sent.',
       description: 'Please check your email.',
@@ -97,7 +91,6 @@ export default function LoginFeature() {
 
   const handleEscapeKeyPress = useCallback(
     (e: KeyboardEvent) => {
-      console.log('Delete key pressed')
       e.preventDefault()
       router.push('/')
     },
@@ -108,7 +101,6 @@ export default function LoginFeature() {
 
   useEffect(() => {
     if (verified) {
-      console.log('Verified:', verified)
       toast({
         title: 'You have been verified.',
       })

src/app/page.tsx

@@ -30,7 +30,7 @@ export const metadata: Metadata = {
 
 export default function HomePage() {
   return (
-    <div className="w-full h-screen flex flex-row p-2">
+    <div className="w-full h-dvh sm:h-screen flex flex-row p-2">
       <script defer src="https://cloud.umami.is/script.js" data-website-id="0e9bcd71-c239-4666-9b8e-a7c9e99ae235"></script>
       <GistDetailsWrapper />
     </div>

src/components/feature/gist-details-wrapper.tsx

@@ -41,7 +41,6 @@ export default function GistDetailsWrapper() {
   }, [])
 
   const handleShare = useCallback(() => {
-    console.log('Share')
   }, [])
 
   const handleLogin = useCallback(() => {

src/components/theme/theme-switch.tsx

@@ -19,7 +19,6 @@ export default function ThemeSwitch() {
         className="h-6 w-6"
         onClick={() => {
           setTheme('light')
-          console.log('light')
         }}
       />
     )
@@ -31,7 +30,6 @@ export default function ThemeSwitch() {
         className="h-6 w-6 text-gray-900"
         onClick={() => {
           setTheme('dark')
-          console.log('dark')
         }}
       />
     )

src/components/ui/gist-details.tsx

@@ -55,16 +55,16 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o
             Code
           </Badge>
           <div className="flex flex-row h-full">
-            <div className="h-full bg-background w-16 border border-input border-r-0 px-3 py-2 text-sm flex justify-center items-start">1</div>
-            <Codearea placeholder="Enter your code here" value={gistCode} onChange={(e) => setGistCode(e.target.value)} className="rounded-none h-full border-l-0" language={language} />
+            {/* <div className="h-full bg-background w-16 border border-input border-r-0 px-3 py-2 text-sm flex justify-center items-start">1</div> */}
+            <Codearea placeholder="Enter your code here" value={gistCode} onChange={(e) => setGistCode(e.target.value)} className="rounded-none h-full" language={language} />
           </div>
         </div>
       </div>
       <div className="h-[1px] bg-border"></div>
       <div className="py-4 px-6 flex flex-row justify-between items-center">
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <MenuButton icon={<Trash2Icon className="w-4 h-4" />} variant={'menu'}>
                 <span>Delete</span>
               </MenuButton>
@@ -78,7 +78,7 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o
         <div className="flex flex-row gap-4">
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <MenuButton icon={<DownloadIcon className="w-4 h-4" />} variant={'menu'}>
                   <span>Share</span>
                 </MenuButton>
@@ -95,7 +95,7 @@ export default function GistDetails({ gist, folder, redirect, onDownloadClick, o
           </TooltipProvider>
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <MenuButton variant={'menu'} onClick={() => onSaveClick(gistName, gistCode)}>
                   <span>Save</span>
                 </MenuButton>

src/components/ui/gist-landing.tsx

@@ -5,7 +5,7 @@ import MenuButton from '@/components/ui/menu-button'
 import Shortcut from '@/components/ui/shortcut'
 import { Gist } from '@/types'
 import { ChevronRightIcon, DownloadIcon, FolderOpen, LogIn, ShareIcon } from 'lucide-react'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { Codearea } from '../shadcn/codearea'
 import { getLanguage } from '@/lib/language'
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '../shadcn/dialog'
@@ -56,7 +56,7 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
         <div className="flex flex-row gap-0 sm:gap-4 justify-center items-center">
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <MenuButton onClick={onLogin} icon={<LogIn className="w-4 h-4" />} variant={'header'}>
                   <span>Login</span>
                 </MenuButton>
@@ -71,7 +71,7 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
           </TooltipProvider>
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <MenuButton className="hidden sm:flex" onClick={() => onDownload(gist.name, gist.code)} icon={<DownloadIcon className="w-4 h-4" />} variant={'header'}>
                   <span>Download</span>
                 </MenuButton>
@@ -100,15 +100,15 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
           </Badge>
           <div className="flex flex-row h-full relative">
             {/* <div className="h-full bg-background w-16 border border-input border-r-0 px-3 py-2 text-sm flex justify-center items-start">1</div> */}
-            <Codearea placeholder="Try it, and write your code here" value={gist.code} onChange={handleGistCodeChange} className="rounded-none h-full border-l-0" language={language} />
+            <Codearea placeholder="Try it, and write your code here" value={gist.code} onChange={handleGistCodeChange} className="rounded-none h-full" language={language} />
 
             {showLandingInformations && (
-              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center items-center">
+              <div className="w-full sm:w-auto px-4 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center items-center">
                 <div className="flex flex-row gap-2 items-center justify-center w-full">
                   <h3>GISTS</h3>
                   <div className="w-[6px] h-[28px] bg-primary animate-blink"></div>
                 </div>
-                <p className="font-mono text-slate-400 my-4">All your data is saved locally in your browser, so just start typing.</p>
+                <p className="font-mono text-sm sm:text-base text-slate-400 my-4">All your data is saved locally in your browser, so just start typing.</p>
                 <div className="flex-col gap-4 w-3/4 hidden sm:flex">
                   <div className="flex flex-row justify-between font-mono text-slate-400">
                     <div className="flex flex-row gap-2 cursor-pointer" onClick={handleOpenFileClick}>
@@ -135,7 +135,7 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
       <div className="py-4 px-6 flex flex-row justify-between sm:justify-end items-center gap-4">
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <MenuButton className="sm:hidden" onClick={() => onDownload(gist.name, gist.code)} icon={<DownloadIcon className="w-4 h-4" />} variant={'header'}>
                 <span>Download</span>
               </MenuButton>
@@ -149,24 +149,26 @@ export default function GistLanding({ gist, onDownload, onLogin, onShare, onShar
           </Tooltip>
         </TooltipProvider>
         <Dialog open={isShareDialogOpen} onOpenChange={setIsShareDialogOpen}>
-          <DialogTrigger>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <MenuButton onClick={onShareDialog} icon={<ShareIcon className="w-4 h-4" />} variant={'menu'}>
+          <DialogTrigger asChild>
+            <div>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <MenuButton onClick={onShareDialog} icon={<ShareIcon className="w-4 h-4" />} variant={'menu'}>
+                      <span>Share</span>
+                    </MenuButton>
+                  </TooltipTrigger>
+                  <TooltipContent className="flex flex-row gap-2 justify-center items-center">
                     <span>Share</span>
-                  </MenuButton>
-                </TooltipTrigger>
-                <TooltipContent className="flex flex-row gap-2 justify-center items-center">
-                  <span>Share your gist</span>
-                  <Shortcut letter="Ctrl" />
-                  <span>+</span>
-                  <Shortcut letter="Shft" />
-                  <span>+</span>
-                  <Shortcut letter="S" />
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+                    <Shortcut letter="Ctrl" />
+                    <span>+</span>
+                    <Shortcut letter="Shft" />
+                    <span>+</span>
+                    <Shortcut letter="S" />
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
           </DialogTrigger>
           <DialogContent className="p-10 text-center flex flex-col justify-center items-center gap-6" aria-describedby={undefined}>
             <DialogTitle>Share you code with friends !</DialogTitle>