ui(sidebar): wrap edit form in collapsible, drop Header X button

Mirror the Metadata collapsible: an 'Edit' wrapper around filename,
title, notes, rating, color, and flag so the editable form is hidden
with one click. Default expanded.

Drop the clear-selection X from the panel Header — Esc still clears
selection and grid clicks do too. The X felt out of place once the
panel restructured around two equal collapsible groups (Edit /
Metadata) below a plain title bar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/sidebar/PhotoInfoPanel.tsx

@@ -143,7 +143,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
   const queryClient = useQueryClient()
 
   const [expandedSections, setExpandedSections] = useState<Set<string>>(
-    new Set(['metadata', 'basic', 'camera', 'location', 'tags'])
+    new Set(['edit', 'metadata', 'basic', 'camera', 'location', 'tags'])
   )
   const toggleSection = (section: string) => {
     const next = new Set(expandedSections)
@@ -390,8 +390,24 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
         isPlaceholderData && 'opacity-70'
       )}
     >
-      {/* Edit fields */}
-      <div className="space-y-2.5 border-b border-border p-3">
+      {/* Edit fields — collapsible group so the user can hide the
+       *  editable form (filename, title, notes, rating, color, flag)
+       *  the same way they can hide the readonly metadata block below. */}
+      <Collapsible
+        open={expandedSections.has('edit')}
+        onOpenChange={() => toggleSection('edit')}
+        className="border-b border-border"
+      >
+        <CollapsibleTrigger className="flex w-full items-center justify-between border-b border-border bg-surface-2/40 px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:bg-surface-2 hover:text-text">
+          <span>Edit</span>
+          {expandedSections.has('edit') ? (
+            <ChevronDown className="h-3 w-3" />
+          ) : (
+            <ChevronRight className="h-3 w-3" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+      <div className="space-y-2.5 p-3">
         <div>
           <label className="mb-1 block text-xs text-text-muted">Filename</label>
           <Input
@@ -544,6 +560,8 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
           </div>
         </div>
       </div>
+        </CollapsibleContent>
+      </Collapsible>
 
       {/* Read-only metadata — collapsed/expanded as one block so the user
        *  can hide everything below the editable form with a single click.