Confirmation Dialog for deletion + UX fixes / Improvements

* Confirmation Dialog on all deletion actions
* Added X button in scrollarea items
* Added version span on the bottom of the sidebar
* Fixed Cards and Pins tab not having a "No {name} available" message
* Password creation dialog now automatically adds 'https://' to the start of urls which was signified by the https placeholder.
* Bumped version to 0.1.1b
* Cleaned up imports

Author: cvs0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lockscript-vault",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/vault/dialogs/confirm-dialog.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
+
+export const ConfirmationDialog = ({
+  open,
+  onClose,
+  title,
+  message,
+  onConfirm,
+  loading = false,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  loading?: boolean;
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <div className="mt-2 text-sm text-muted-foreground">{message}</div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm}>
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Confirm"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/vault/dialogs/create-password-dialog.tsx

@@ -74,7 +74,14 @@ export const CreatePasswordDialog = ({
   const handleSave = async () => {
     setLoading(true);
 
-    const validationResult = passwordSchema.safeParse(passwordItem);
+    const updatedPasswordItem = {
+      ...passwordItem,
+      website: passwordItem.website.startsWith("https://")
+        ? passwordItem.website
+        : `https://${passwordItem.website}`,
+    };
+
+    const validationResult = passwordSchema.safeParse(updatedPasswordItem);
 
     if (!validationResult.success) {
       const errorMessage =
@@ -92,15 +99,15 @@ export const CreatePasswordDialog = ({
 
     try {
       const encryptedUsername = await encrypt(
-        passwordItem.username,
+        updatedPasswordItem.username,
         clerkuser.id
       );
       const encryptedWebsite = await encrypt(
-        passwordItem.website,
+        updatedPasswordItem.website,
         clerkuser.id
       );
       const encryptedPassword = await encrypt(
-        passwordItem.password,
+        updatedPasswordItem.password,
         clerkuser.id
       );
 
@@ -115,16 +122,16 @@ export const CreatePasswordDialog = ({
 
       const passwordEntry: PasswordEntry = {
         id: item.id,
-        name: passwordItem.name,
-        username: passwordItem.username,
-        website: passwordItem.website,
-        password: passwordItem.password,
+        name: updatedPasswordItem.name,
+        username: updatedPasswordItem.username,
+        website: updatedPasswordItem.website,
+        password: updatedPasswordItem.password,
         usernameIV: item.usernameIV,
         websiteIV: item.websiteIV,
         passwordIV: item.passwordIV,
         updatedAt: item.updatedAt.toISOString(),
         lastAccess: item.updatedAt.toISOString(),
-        created: item.createdAt.toISOString()
+        created: item.createdAt.toISOString(),
       };
 
       toast.success("Password created");

src/components/vault/password-details.tsx

@@ -22,6 +22,7 @@ import {
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ConfirmationDialog } from "./dialogs/confirm-dialog";
 
 interface PasswordEntry {
   id: string;
@@ -45,7 +46,16 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
   onEdit,
   onDelete,
 }) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDelete = () => {
+    setIsLoading(true);
+    onDelete();
+    setIsDialogOpen(false);
+    setIsLoading(false);
+  };
 
   return (
     <div className="space-y-6 mx-auto">
@@ -68,7 +78,7 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
               <Settings className="mr-2 h-4 w-4" />
               Edit
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={onDelete}>
+            <DropdownMenuItem onClick={() => setIsDialogOpen(true)}>
               <Trash className="mr-2 h-4 w-4" />
               Delete
             </DropdownMenuItem>
@@ -155,6 +165,15 @@ export const PasswordDetails: React.FC<PasswordDetailsProps> = ({
           ))}
         </div>
       </div>
+
+      <ConfirmationDialog
+        open={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        title="Confirm Deletion"
+        message="Are you sure you want to delete this password entry? This action cannot be undone."
+        onConfirm={handleDelete}
+        loading={isLoading}
+      />
     </div>
   );
 };

src/components/vault/sidebar.tsx

@@ -70,6 +70,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
         <Settings className="h-5 w-5" />
         Settings
       </Button>
+      <span className="text-xs text-gray-500 block text-left mt-4">
+        LockScript Vault v0.1.1b
+      </span>
     </div>
   </div>
 );

src/components/vault/vault-page.tsx

@@ -13,13 +13,14 @@ import { decrypt, generateAndStoreKey, retrieveKey } from "@/utils/encryption";
 import { useUser } from "@clerk/nextjs";
 import type { Prisma } from "@prisma/client";
 import {
+  ArrowDownAZ,
+  ArrowDownWideNarrow,
+  Clock,
   Plus,
   SquareArrowOutUpRight,
   Trash,
   User,
-  ArrowDownAZ,
-  ArrowDownWideNarrow,
-  Clock,
+  X,
 } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -32,10 +33,11 @@ import {
   ContextMenuLabel,
   ContextMenuTrigger,
 } from "../ui/context-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ConfirmationDialog } from "./dialogs/confirm-dialog";
 import { EmptyState } from "./empty-state";
 import { PasswordDetails } from "./password-details";
 import { Sidebar } from "./sidebar";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 interface PasswordEntry {
   id: string;
@@ -79,6 +81,11 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
   const [sortBy, setSortBy] = useState<"name" | "created" | "updated">(
     "created"
   );
+  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] =
+    useState(false);
+  const [passwordToDelete, setPasswordToDelete] =
+    useState<PasswordEntry | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   useEffect(() => {
     const ensureEncryptionKey = async () => {
@@ -319,10 +326,9 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                       filteredAndSortedPasswords.map((password) => (
                         <ContextMenu key={password.id}>
                           <ContextMenuTrigger>
-                            <Button
-                              variant="ghost"
+                            <div
                               className={cn(
-                                "w-full justify-start rounded-xl p-4 text-left transition-all hover:bg-rose-50/50 dark:hover:bg-rose-900/50",
+                                "flex w-full justify-between rounded-xl p-2 text-left transition-all hover:bg-rose-50/50 dark:hover:bg-rose-900/50 hover:cursor-pointer",
                                 selectedEntry?.id === password.id &&
                                   "bg-rose-50 dark:bg-rose-900"
                               )}
@@ -347,7 +353,20 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                                   </div>
                                 </div>
                               </div>
-                            </Button>
+
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="text-muted-foreground hover:text-foreground"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setPasswordToDelete(password);
+                                  setIsConfirmationDialogOpen(true);
+                                }}
+                              >
+                                <X className="h-4 w-4" />
+                              </Button>
+                            </div>
                           </ContextMenuTrigger>
                           <ContextMenuContent className="rounded-xl">
                             <ContextMenuLabel>
@@ -413,7 +432,16 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                           </ContextMenuContent>
                         </ContextMenu>
                       ))}
-
+                    {activeTab === "notes" && (
+                      <div className="flex h-full items-center justify-center text-gray-500 dark:text-gray-400">
+                        No {activeTab} available
+                      </div>
+                    )}
+                    {activeTab === "pins" && (
+                      <div className="flex h-full items-center justify-center text-gray-500 dark:text-gray-400">
+                        No {activeTab} available
+                      </div>
+                    )}
                     {activeTab === "cards" && (
                       <div className="flex h-full items-center justify-center text-gray-500 dark:text-gray-400">
                         No {activeTab} available
@@ -452,6 +480,7 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
           )}
         </div>
       </div>
+
       {isEditDialogOpen && (
         <EditPasswordDialog
           isOpen={isEditDialogOpen}
@@ -466,6 +495,7 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
           entry={selectedEntry}
         />
       )}
+      
       <CreatePasswordDialog
         open={isCreateDialogOpen}
         onClose={async () => {
@@ -476,6 +506,34 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
         }}
         setSelectedEntry={setSelectedEntry}
       />
+
+      <ConfirmationDialog
+        open={isConfirmationDialogOpen}
+        onClose={() => setIsConfirmationDialogOpen(false)}
+        title="Delete Password"
+        message="Are you sure you want to delete this password? This action cannot be undone."
+        onConfirm={async () => {
+          if (passwordToDelete) {
+            setIsDeleting(true);
+            try {
+              await deletePasswordItem(passwordToDelete.id);
+              const updatedItems = await getPasswords(user?.id as string);
+              setPasswordItems(updatedItems?.passwordItems);
+              if (selectedEntry?.id === passwordToDelete.id) {
+                setSelectedEntry(null);
+              }
+              toast.success("Password deleted successfully");
+            } catch {
+              toast.error("Failed to delete password");
+            } finally {
+              setIsDeleting(false);
+              setIsConfirmationDialogOpen(false);
+              setPasswordToDelete(null);
+            }
+          }
+        }}
+        loading={isDeleting}
+      />
     </div>
   );
 };