UX improvements / Styling fixes

* Added item sorting
* Fully implemented item searching
* Made it so creating a new password will auto select the new one

Author: cvs0

src/app/(main)/page.tsx

@@ -1,19 +1,19 @@
-import {VaultPage} from "@/components/vault/vault-page";
-import {auth, currentUser} from "@clerk/nextjs/server";
-import {getPasswords, instantiateVault} from "../actions";
+import { VaultPage } from "@/components/vault/vault-page";
+import { auth, currentUser } from "@clerk/nextjs/server";
+import { getPasswords, instantiateVault } from "../actions";
 
-export default async function Page(){
+export default async function Page() {
   const { userId, redirectToSignIn } = await auth();
 
   if (!userId) return redirectToSignIn();
 
-  const user = await getPasswords(userId)
+  const user = await getPasswords(userId);
 
   if (!user) {
-    const clerkUser = await currentUser()
-    if(!clerkUser) return redirectToSignIn()
-   await instantiateVault(clerkUser.id, clerkUser.username as string);
+    const clerkUser = await currentUser();
+    if (!clerkUser) return redirectToSignIn();
+    await instantiateVault(clerkUser.id, clerkUser.username as string);
   }
 
   return <VaultPage user={user} />;
-};
+}

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

@@ -24,12 +24,28 @@ const initialPasswordItemState = {
   password: "",
 };
 
+interface PasswordEntry {
+  id: string;
+  name: string;
+  username: string;
+  website: string;
+  password: string;
+  usernameIV: string;
+  websiteIV: string;
+  passwordIV: string;
+  updatedAt: string;
+  lastAccess: string;
+  created: string;
+}
+
 export const CreatePasswordDialog = ({
   open,
   onClose,
+  setSelectedEntry,
 }: {
   open: boolean;
   onClose: () => void;
+  setSelectedEntry: (entry: PasswordEntry) => void;
 }) => {
   const [passwordItem, setPasswordItem] = useState(initialPasswordItemState);
   const [loading, setLoading] = useState(false);
@@ -88,7 +104,7 @@ export const CreatePasswordDialog = ({
         clerkuser.id
       );
 
-      await createPasswordItem(
+      const item = await createPasswordItem(
         encryptedUsername.encryptedData,
         encryptedWebsite.encryptedData,
         encryptedPassword.encryptedData,
@@ -97,8 +113,23 @@ export const CreatePasswordDialog = ({
         encryptedPassword.iv
       );
 
+      const passwordEntry: PasswordEntry = {
+        id: item.id,
+        name: passwordItem.name,
+        username: passwordItem.username,
+        website: passwordItem.website,
+        password: passwordItem.password,
+        usernameIV: item.usernameIV,
+        websiteIV: item.websiteIV,
+        passwordIV: item.passwordIV,
+        updatedAt: item.updatedAt.toISOString(),
+        lastAccess: item.updatedAt.toISOString(),
+        created: item.createdAt.toISOString()
+      };
+
       toast.success("Password created");
       setPasswordItem(initialPasswordItemState);
+      setSelectedEntry(passwordEntry);
       onClose();
     } catch (error) {
       toast.error("Failed to create password");

src/components/vault/vault-page.tsx

@@ -12,7 +12,15 @@ import { cn } from "@/lib/utils";
 import { decrypt, generateAndStoreKey, retrieveKey } from "@/utils/encryption";
 import { useUser } from "@clerk/nextjs";
 import type { Prisma } from "@prisma/client";
-import { Plus, SquareArrowOutUpRight, Trash, User } from "lucide-react";
+import {
+  Plus,
+  SquareArrowOutUpRight,
+  Trash,
+  User,
+  ArrowDownAZ,
+  ArrowDownWideNarrow,
+  Clock,
+} from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -27,6 +35,7 @@ import {
 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;
@@ -65,9 +74,11 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
-  const [filteredEntries, setFilteredEntries] = useState<PasswordEntry[]>([]);
   const [passwords, setPasswords] = useState<PasswordEntry[]>([]);
   const [passwordItems, setPasswordItems] = useState(user?.passwordItems);
+  const [sortBy, setSortBy] = useState<"name" | "created" | "updated">(
+    "created"
+  );
 
   useEffect(() => {
     const ensureEncryptionKey = async () => {
@@ -139,16 +150,59 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
     decryptPasswords();
   }, [user?.passwordItems, clerkUser, passwordItems]);
 
+  useEffect(() => {
+    const sortPasswords = () => {
+      const sorted = [...passwords].sort((a, b) => {
+        switch (sortBy) {
+          case "name":
+            return a.name.localeCompare(b.name);
+          case "updated":
+            return (
+              new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+            );
+          default: // 'created'
+            return (
+              new Date(b.created).getTime() - new Date(a.created).getTime()
+            );
+        }
+      });
+      setPasswords(sorted);
+    };
+    sortPasswords();
+  }, [sortBy]);
+
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
-    // Filter entries based on search query
-    // ... (filter entries logic)
   };
 
   const handleEditEntry = () => {
     setIsEditDialogOpen(true);
   };
 
+  const filteredAndSortedPasswords = passwords
+    .filter((password) => {
+      if (!searchQuery) return true;
+
+      const search = searchQuery.toLowerCase();
+      return (
+        password.name.toLowerCase().includes(search) ||
+        password.username.toLowerCase().includes(search) ||
+        password.website.toLowerCase().includes(search)
+      );
+    })
+    .sort((a, b) => {
+      switch (sortBy) {
+        case "name":
+          return a.name.localeCompare(b.name);
+        case "updated":
+          return (
+            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+          );
+        default: // 'created'
+          return new Date(b.created).getTime() - new Date(a.created).getTime();
+      }
+    });
+
   return (
     <div className="flex h-screen overflow-hidden bg-white dark:bg-gray-900">
       <div className="hidden lg:block lg:w-64 border-r border-gray-100 dark:border-gray-800">
@@ -182,6 +236,63 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                   onChange={handleSearchChange}
                   className="w-48 focus:ring-0 ring-0 focus-visible:ring-0 dark:bg-gray-800 dark:text-white"
                 />
+                <div className="w-1/3 overflow-y-auto">
+                  <div className="flex items-center gap-2 p-4">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className={cn(
+                            "h-8 w-8 p-0",
+                            sortBy === "name" &&
+                              "bg-rose-50 dark:bg-rose-900 text-rose-900 dark:text-rose-50"
+                          )}
+                          onClick={() => setSortBy("name")}
+                        >
+                          <ArrowDownAZ className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Sort alphabetically</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className={cn(
+                            "h-8 w-8 p-0",
+                            sortBy === "created" &&
+                              "bg-rose-50 dark:bg-rose-900 text-rose-900 dark:text-rose-50"
+                          )}
+                          onClick={() => setSortBy("created")}
+                        >
+                          <ArrowDownWideNarrow className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Sort by created</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className={cn(
+                            "h-8 w-8 p-0",
+                            sortBy === "updated" &&
+                              "bg-rose-50 dark:bg-rose-900 text-rose-900 dark:text-rose-50"
+                          )}
+                          onClick={() => setSortBy("updated")}
+                        >
+                          <Clock className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Sort by updated</TooltipContent>
+                    </Tooltip>
+                  </div>
+                </div>
                 <Button
                   size="icon"
                   className="bg-rose-50 hover:hover:bg-rose-100 dark:bg-rose-900 dark:hover:bg-rose-800"
@@ -205,7 +316,7 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                 <ScrollArea className="h-full">
                   <div className="space-y-2 p-4">
                     {activeTab === "passwords" &&
-                      passwords.map((password) => (
+                      filteredAndSortedPasswords.map((password) => (
                         <ContextMenu key={password.id}>
                           <ContextMenuTrigger>
                             <Button
@@ -363,6 +474,7 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
           const updatedItems = await getPasswords(user?.id as string);
           setPasswordItems(updatedItems?.passwordItems);
         }}
+        setSelectedEntry={setSelectedEntry}
       />
     </div>
   );