feat: drawer ux enhances

frontend/src/components/ui/DrawerSection.tsx

@@ -18,10 +18,10 @@ export function DrawerSection({
   return (
     <div
       id={id}
-      className={`join-item group flex flex-col transition-colors ${isOpen ? "bg-base-300/30" : ""}`}
+      className={`overflow-visible join-item group flex flex-col transition-colors ${isOpen ? "bg-base-300/30" : ""}`}
     >
       <div
-        className={`overflow-hidden transition-all duration-1000 ease-in-out bg-neutral/10 ${
+        className={`transition-all duration-1000 ease-in-out bg-neutral/10 ${
           isOpen
             ? "max-h-125 opacity-100 py-3 border-b border-base-content/5"
             : "max-h-0 opacity-0 pointer-events-none"

frontend/src/components/ui/LetterItem.tsx

@@ -25,7 +25,7 @@ export function LetterItem({
     <button
       type="button"
       onClick={handleNavigate}
-      className="p-[16px_28px_16px_76px] border-b border-base-content/3 flex items-center gap-4 hover:bg-base-content/5 transition-colors group w-full text-left"
+      className="p-[16px_28px_16px_16px] border-b border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all duration-600 group text-left z-10 cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-6 hover:pb-6 hover:pt-4 hover:z-0 hover:blr border-x-2"
     >
       <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60">
         {preview}

frontend/src/hooks/useLetters.tsx

@@ -75,6 +75,12 @@ export function useLetters() {
   }, [masterKey]);
 
   const drawerItems = useMemo(() => {
+    setLetters(
+      letters.sort(
+        (a, b) =>
+          new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime(),
+      ),
+    );
     return {
       drafts: letters.filter((l) => l.status === "DRAFT"),
       kept: letters.filter((l) => l.type === "KEPT" && l.status === "SEALED"),

frontend/src/pages/Drawer.tsx

@@ -7,6 +7,7 @@ import { LetterItem } from "../components/ui/LetterItem";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
+import { formatRelativeDate } from "../utils/dateFormat.ts";
 
 export default function Drawer() {
   const { user, logout, unlock } = useAuth();
@@ -89,7 +90,7 @@ export default function Drawer() {
         </div>
       </header>
 
-      <div className="join join-vertical w-full max-w-120 bg-base-200 border border-base-content/10 shadow-2xl z-10 rounded-sm overflow-hidden animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200 fill-mode-backwards min-h-64 flex flex-col">
+      <div className="join join-vertical w-full max-w-120 bg-base-200 border border-base-content/10 shadow-2xl z-10 rounded-sm animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200 fill-mode-backwards min-h-64 flex flex-col">
         {loading ? (
           <div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
             <span className="loading loading-ring loading-lg text-primary opacity-20"></span>
@@ -112,7 +113,7 @@ export default function Drawer() {
                   status={draft.status}
                   key={draft.public_id}
                   preview={draft.metadata?.recipient || "Untitled Draft"}
-                  timestamp={draft.updated_at}
+                  timestamp={formatRelativeDate(draft.updated_at)}
                 />
               ))}
             </DrawerSection>
@@ -130,7 +131,7 @@ export default function Drawer() {
                   status={letter.status}
                   key={letter.public_id}
                   preview={letter.metadata?.recipient || "Someone dear..."}
-                  timestamp={letter.updated_at}
+                  timestamp={formatRelativeDate(letter.updated_at)}
                 />
               ))}
             </DrawerSection>
@@ -147,7 +148,7 @@ export default function Drawer() {
                   status={letter.status}
                   id={letter.public_id}
                   preview={letter.metadata?.recipient || "Someone dear..."}
-                  timestamp={letter.updated_at}
+                  timestamp={formatRelativeDate(letter.updated_at)}
                 />
               ))}
               {sent.length === 0 && (
@@ -169,7 +170,7 @@ export default function Drawer() {
                   status={letter.status}
                   id={letter.public_id}
                   preview={letter.metadata?.recipient || "Future Self"}
-                  timestamp={letter.updated_at}
+                  timestamp={formatRelativeDate(letter.updated_at)}
                 />
               ))}
             </DrawerSection>
@@ -199,7 +200,7 @@ export default function Drawer() {
       </button>
 
       <footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
-        Kept. Unsent.
+        For your unsaid.
       </footer>
     </div>
   );