feat(GIST-90): add multiple copy buttons

* style(button): add transition-all

* feat(buttons): add multiple copy buttons

* fix(lint): correct some warns

* feat(GIST-90): fixed curl command and refactor raw url generation

---------

Co-authored-by: tristan-mihai.radulescu <tristan-mihai.radulescu@etu.umontpellier.fr>

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

@@ -186,9 +186,9 @@ function CreateGistModal({
       title="New Gist"
       trigger={
         <div>
-          <TooltipShortcut tooltip="Create a new Gist" shortcuts={["C"]}>
+          <TooltipShortcut tooltip="Create new Gist" shortcuts={["C"]}>
             <TooltipShortcutTrigger>
-              <Button className="w-8 h-8 flex-shrink-0" size={"icon"} variant={"icon"}>
+              <Button className="w-8 h-8 flex-shrink-0 transition-all" size={"icon"} variant={"icon"}>
                 <LucidePencil className="w-4 h-4" />
               </Button>
             </TooltipShortcutTrigger>

src/app/(gistLayout)/layout.tsx

@@ -9,7 +9,7 @@ import { useCreateOrg } from "@/lib/queries/orgs.queries"
 import { useLogout } from "@/lib/queries/auth.queries"
 
 export default function GistLayoutFeature({ children }: { children: ReactNode }) {
-  const { data, error } = useMe()
+  const { data } = useMe()
   const { toast } = useToast()
   const { mutate: createGist } = useCreateGist({
     onSuccess: () => {

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

@@ -7,9 +7,19 @@ interface MyGistIdPageProps {
   onSave: (name: string, code: string) => void
   onDelete: (id: string) => void
   onShare: () => void
+  onCopy: (code: string) => void
+  onCopyCurl: () => void
 }
 
-export default function MyGistIdPage({ gist, onDownload, onSave, onDelete, onShare }: MyGistIdPageProps) {
+export default function MyGistIdPage({
+  gist,
+  onDownload,
+  onSave,
+  onDelete,
+  onShare,
+  onCopy,
+  onCopyCurl,
+}: MyGistIdPageProps) {
   return (
     <GistDetails
       orgName={"My Gists"}
@@ -19,6 +29,8 @@ export default function MyGistIdPage({ gist, onDownload, onSave, onDelete, onSha
       onSave={onSave}
       onDelete={onDelete}
       onShare={onShare}
+      onCopy={onCopy}
+      onCopyCurl={onCopyCurl}
     />
   )
 }

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

@@ -3,7 +3,7 @@ import React from "react"
 import MyGistIdPage from "./page-ui"
 import { useGist, usePatchGistContent, usePatchGistName } from "@/lib/queries/gists.queries"
 import { useToast } from "@/components/shadcn/use-toast"
-import { useKeyPress } from "@/lib/hook/use-key-press"
+import { getRawGistURL } from "@/lib/utils"
 
 interface MyGistIdFeaturePageProps {
   params: {
@@ -52,8 +52,42 @@ export default function MyGistIdFeaturePage({ params }: MyGistIdFeaturePageProps
     console.log("Share")
   }
 
+  const onCopy = (code: string) => {
+    navigator.clipboard
+      .writeText(code)
+      .then(() => {
+        console.log("Copy")
+        toast({
+          title: "Gist Copied",
+          description: "Your gist has been copied successfully",
+        })
+      })
+      .catch((error) => {
+        console.error("Failed to copy text: ", error)
+      })
+  }
+
+  const onCopyCurl = () => {
+    const curlCommand = `curl ${getRawGistURL(gistId)} -o- | /bin/bash`
+    toast({
+      title: "Gist Copied",
+      description: "Your curl command has been copied successfully",
+    })
+    navigator.clipboard.writeText(curlCommand)
+  }
+
   if (!data) {
     return null
   }
-  return <MyGistIdPage gist={data} onDownload={onDownload} onSave={onSave} onDelete={onDelete} onShare={onShare} />
+  return (
+    <MyGistIdPage
+      gist={data}
+      onDownload={onDownload}
+      onSave={onSave}
+      onDelete={onDelete}
+      onShare={onShare}
+      onCopy={onCopy}
+      onCopyCurl={onCopyCurl}
+    />
+  )
 }

src/app/(gistLayout)/org/[orgId]/gist/[gistId]/page-ui.tsx

@@ -8,6 +8,8 @@ interface MyOrgGistIdPageProps {
   onSave: () => void
   onDelete: (id: string) => void
   onShare: () => void
+  onCopy: (code: string) => void
+  onCopyCurl: () => void
 }
 
 export default function MyOrgGistIdPage({
@@ -16,6 +18,8 @@ export default function MyOrgGistIdPage({
   onDownload,
   onSave,
   onDelete,
+  onCopy,
+  onCopyCurl,
   onShare,
 }: MyOrgGistIdPageProps) {
   return (
@@ -26,6 +30,8 @@ export default function MyOrgGistIdPage({
       onSave={onSave}
       onDelete={onDelete}
       onShare={onShare}
+      onCopy={onCopy}
+      onCopyCurl={onCopyCurl}
     />
   )
 }

src/app/(gistLayout)/org/[orgId]/gist/[gistId]/page.tsx

@@ -3,6 +3,7 @@ import { useToast } from "@/components/shadcn/use-toast"
 import GistDetails from "@/components/ui/gist-details"
 import { useGist, usePatchGistContent, usePatchGistName } from "@/lib/queries/gists.queries"
 import { useOrg } from "@/lib/queries/orgs.queries"
+import { getRawGistURL } from "@/lib/utils"
 import React from "react"
 
 interface MyOrgGistIdFeaturePageProps {
@@ -48,10 +49,42 @@ export default function MyOrgGistIdFeaturePage({ params }: MyOrgGistIdFeaturePag
 
   const onShare = () => {
     console.log("Share")
+    toast({
+      title: "Gist Shared",
+      description: "Your gist has been shared successfully",
+    })
   }
 
   const onDelete = (id: string) => {
     console.log(`Deleting gist with ID: ${id}`)
+    toast({
+      title: "Gist Deleted",
+      description: "Your gist has been deleted successfully",
+    })
+  }
+
+  const onCopy = (code: string) => {
+    navigator.clipboard
+      .writeText(code)
+      .then(() => {
+        console.log("Copy")
+        toast({
+          title: "Gist Copied",
+          description: "Your gist has been copied successfully",
+        })
+      })
+      .catch((error) => {
+        console.error("Failed to copy text: ", error)
+      })
+  }
+
+  const onCopyCurl = () => {
+    const curlCommand = `curl ${getRawGistURL(gistId)} -o- | /bin/bash`
+    toast({
+      title: "Gist Copied",
+      description: "Your curl command has been copied successfully",
+    })
+    navigator.clipboard.writeText(curlCommand)
   }
 
   if (!gistData) {
@@ -66,6 +99,8 @@ export default function MyOrgGistIdFeaturePage({ params }: MyOrgGistIdFeaturePag
       onSave={onSave}
       onShare={onShare}
       onDelete={onDelete}
+      onCopy={onCopy}
+      onCopyCurl={onCopyCurl}
     />
   )
 }

src/app/login/page-ui.tsx

@@ -5,7 +5,6 @@ import { Input } from "@/components/shadcn/input"
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/shadcn/input-otp"
 import { UseFormRegisterReturn } from "react-hook-form"
 import { Icon } from "@iconify/react"
-import { useKeyPress } from "@/lib/hook/use-key-press"
 
 interface LoginProps {
   step: "initial" | "emailInput" | "otpInput"

src/components/api/api-provider.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import getQueryClient from "@/lib/queries/queries"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { useState } from "react"
+import { QueryClientProvider } from "@tanstack/react-query"
 
 export default function QueryProvider({ children }: { children: React.ReactNode }) {
   return <QueryClientProvider client={getQueryClient()}>{children}</QueryClientProvider>

src/components/logic/gists-landing-logic.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useCallback, useRef } from "react"
+import { useState, useEffect, useCallback } from "react"
 import { Gist } from "@/types"
 import GistLanding from "@/components/ui/gist-landing"
 import { toast } from "../shadcn/use-toast"
@@ -26,7 +26,6 @@ export default function GistsLandingLogic() {
     name: "Welcome to Gists.app",
     code: "",
   })
-  const fileInputRef = useRef<HTMLInputElement | null>(null)
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false)
 
   useEffect(() => {

src/components/shadcn/button.tsx

@@ -9,16 +9,17 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-light-background hover:text-foreground",
-        disabled: "hover:bg-light-background hover:text-foreground opacity-50 cursor-not-allowed",
-        link: "text-primary text-base underline-offset-4 hover:underline",
-        icon: "text-foreground bg-icon hover:bg-icon/80",
-        menu: "text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-        header: "hover:bg-primary hover:text-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 tranition-all",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 tranition-all",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground tranition-all",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 tranition-all",
+        ghost: "hover:bg-light-background hover:text-foreground tranition-all",
+        disabled: "hover:bg-light-background hover:text-foreground opacity-50 cursor-not-allowed tranition-all",
+        link: "text-primary text-base underline-offset-4 hover:underline tranition-all",
+        icon: "text-foreground bg-icon hover:bg-icon/80 tranition-all",
+        "icon-ghost": "hover:bg-icon hover:text-foreground tranition-all",
+        menu: "text-primary-foreground hover:bg-primary hover:text-primary-foreground tranition-all",
+        header: "hover:bg-primary hover:text-foreground tranition-all",
       },
       size: {
         default: "h-10 px-6 py-3",