commented ai chat box and added snippetcard to show snippets on /dashboard (#963)

* commented ai chat box and added snippetcard to show snippets

* fixed text size

* added skeleton while loading packages

Author: MustafaMulla29

src/pages/dashboard.tsx

@@ -12,13 +12,19 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 import { SnippetList } from "@/components/SnippetList"
 import { Helmet } from "react-helmet-async"
+import { SnippetCard } from "@/components/SnippetCard"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 
 export const DashboardPage = () => {
   const axios = useAxios()
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
   const [showAllTrending, setShowAllTrending] = useState(false)
   const [showAllLatest, setShowAllLatest] = useState(false)
+  const [snippetToDelete, setSnippetToDelete] = useState<Snippet | null>(null)
+  const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
+    useConfirmDeletePackageDialog()
 
   const {
     data: mySnippets,
@@ -49,6 +55,13 @@ export const DashboardPage = () => {
     },
   )
 
+  const baseUrl = useSnippetsBaseApiUrl()
+
+  const handleDeleteClick = (e: React.MouseEvent, snippet: Snippet) => {
+    e.preventDefault() // Prevent navigation
+    setSnippetToDelete(snippet)
+    openDeleteDialog()
+  }
   return (
     <div>
       <Helmet>
@@ -86,30 +99,47 @@ export const DashboardPage = () => {
                 </div>
               </div>
             </div>
-            <CreateNewSnippetWithAiHero />
+            {/* <CreateNewSnippetWithAiHero /> */}
             <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
               Your Recent Snippets
             </h2>
-            {isLoading && <div>Loading...</div>}
-            {mySnippets && (
-              <ul className="space-y-1">
+            {isLoading && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {[...Array(6)].map((_, i) => (
+                  <div key={i} className="border p-4 rounded-md animate-pulse">
+                    <div className="flex items-start gap-4">
+                      <div className="h-16 w-16 flex-shrink-0 rounded-md bg-slate-200"></div>
+                      <div className="flex-1">
+                        <div className="h-5 bg-slate-200 rounded w-3/4 mb-2"></div>
+                        <div className="h-4 bg-slate-200 rounded w-1/2 mb-2"></div>
+                        <div className="flex gap-2">
+                          <div className="h-3 bg-slate-200 rounded w-16"></div>
+                          <div className="h-3 bg-slate-200 rounded w-16"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+            {mySnippets && mySnippets.length > 0 ? (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                 {mySnippets.slice(0, 10).map((snippet) => (
-                  <li
+                  <SnippetCard
                     key={snippet.snippet_id}
-                    className="flex items-center justify-between"
-                  >
-                    <Link
-                      href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-                      className="text-blue-600 hover:underline text-sm"
-                    >
-                      {snippet.unscoped_name}
-                    </Link>
-                    <span className="text-xs text-gray-500">
-                      {new Date(snippet.created_at).toLocaleDateString()}
-                    </span>
-                  </li>
+                    snippet={snippet}
+                    baseUrl={baseUrl}
+                    isCurrentUserSnippet={snippet.owner_name === currentUser}
+                    onDeleteClick={handleDeleteClick}
+                  />
                 ))}
-              </ul>
+              </div>
+            ) : (
+              !isLoading && (
+                <span className="font-medium text-sm text-gray-500">
+                  No snippets found
+                </span>
+              )
             )}
             {mySnippets && mySnippets.length > 10 && (
               <Link
@@ -136,6 +166,12 @@ export const DashboardPage = () => {
               />
             </div>
           </div>
+          {snippetToDelete && (
+            <DeleteDialog
+              packageId={snippetToDelete.snippet_id}
+              packageName={snippetToDelete.unscoped_name}
+            />
+          )}
         </div>
       </div>
       <Footer />