Give the zone-file editor something to look at

A textarea holding a master file is a text box: it says nothing about what the
resolver will answer for the zone, and a typo in a record is invisible until a
client sees the wrong answer. `/api/zones` already knows — it is compiled from
the same files — so Local zones now shows the records the daemon has actually
compiled out of the selected file, with the SOA serial and the number of
delegations, above the editor that writes it. It is the same list the Zones
page shows, which is the point: the two pages are two views of one thing, not
two ways of guessing.

The Zones page gains the way back: a zone that comes from a master file rather
than the managed directory has an "Edit the file" button that goes to Local
zones, so a read-only row is a link rather than a dead end.

web/src/pages/Zones.tsx

@@ -11,7 +11,8 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
-import { AlertTriangle, List, Pencil, Plus, Search, Trash2, Waypoints } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { AlertTriangle, FileCode2, List, Pencil, Plus, Search, Trash2, Waypoints } from 'lucide-react'
 
 import {
   addZoneDelegation,
@@ -121,6 +122,7 @@ const NEW_ZONE = '__new__'
 export default function Zones() {
   const { toast } = useToast()
   const { canWrite } = useWhoami()
+  const navigate = useNavigate()
   const { data, error, loading, refetch } = useApi(getZones, [])
 
   const [origin, setOrigin] = useState('')
@@ -486,6 +488,16 @@ export default function Zones() {
                 </div>
               </div>
               <div className="flex items-end justify-end gap-2">
+                {zone !== null && !zone.managed ? (
+                  <Button
+                    variant="ghost"
+                    icon={FileCode2}
+                    onClick={() => navigate('/local-zones')}
+                    title="This zone comes from a master file, not the managed directory. Local zones edits that file."
+                  >
+                    Edit the file
+                  </Button>
+                ) : null}
                 {zone !== null && zone.managed ? (
                   <Button
                     variant="ghost"