fix: update masonry grid sizing logic and notebook list padding

keep-notes/components/favorites-section.tsx

@@ -3,28 +3,52 @@
 import { useState } from 'react'
 import { Note } from '@/lib/types'
 import { NoteCard } from './note-card'
-import { ChevronDown, ChevronUp } from 'lucide-react'
+import { ChevronDown, ChevronUp, Pin } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
 
 interface FavoritesSectionProps {
   pinnedNotes: Note[]
   onEdit?: (note: Note, readOnly?: boolean) => void
+  isLoading?: boolean
 }
 
-export function FavoritesSection({ pinnedNotes, onEdit }: FavoritesSectionProps) {
+export function FavoritesSection({ pinnedNotes, onEdit, isLoading }: FavoritesSectionProps) {
   const [isCollapsed, setIsCollapsed] = useState(false)
+  const { t } = useLanguage()
+
+  if (isLoading) {
+    return (
+      <section data-testid="favorites-section" className="mb-8">
+        <div className="flex items-center gap-2 mb-4 px-2 py-2">
+          <Pin className="w-5 h-5 text-muted-foreground animate-pulse" />
+          <div className="h-6 w-32 bg-muted rounded animate-pulse" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-40 bg-muted rounded-2xl animate-pulse" />
+          ))}
+        </div>
+      </section>
+    )
+  }
 
-  // Don't show section if no pinned notes
   if (pinnedNotes.length === 0) {
     return null
   }
 
   return (
     <section data-testid="favorites-section" className="mb-8">
-      {/* Collapsible Header */}
       <button
         onClick={() => setIsCollapsed(!isCollapsed)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsCollapsed(!isCollapsed)
+          }
+        }}
         className="w-full flex items-center justify-between gap-2 mb-4 px-2 py-2 hover:bg-accent rounded-lg transition-colors min-h-[44px]"
         aria-expanded={!isCollapsed}
+        aria-label={t('favorites.toggleSection') || 'Toggle pinned notes section'}
       >
         <div className="flex items-center gap-2">
           <span className="text-2xl">📌</span>