Implemented epics read/write

web/src/InterfaceList.tsx

@@ -12,9 +12,10 @@ interface Props {
   onLoad: (xml: string) => void;
   onSelect?: (id: string) => void;
   onEdit?: (iface?: Interface) => void;
+  onEditId?: (id: string) => void;
 }
 
-export default function InterfaceList({ onLoad, onSelect, onEdit }: Props) {
+export default function InterfaceList({ onLoad, onSelect, onEdit, onEditId }: Props) {
   const [collapsed, setCollapsed] = useState(false);
   const [interfaces, setInterfaces] = useState<ServerInterface[]>([]);
   const [loading, setLoading] = useState(true);
@@ -60,6 +61,10 @@ export default function InterfaceList({ onLoad, onSelect, onEdit }: Props) {
     if (res.ok) refresh();
   }
 
+  function handleFullscreen(id: string) {
+    window.open(`?fs=${encodeURIComponent(id)}`, '_blank');
+  }
+
   return (
     <aside class={`panel${collapsed ? ' collapsed' : ''}`}>
       <div class="panel-header">
@@ -100,7 +105,8 @@ export default function InterfaceList({ onLoad, onSelect, onEdit }: Props) {
                       {iface.name || iface.id}
                     </span>
                     <div class="iface-item-actions">
-                      <button class="icon-btn" title="Edit" onClick={() => onEdit?.()}>✎</button>
+                      <button class="icon-btn" title="Edit" onClick={() => onEditId?.(iface.id)}>✎</button>
+                      <button class="icon-btn" title="Open fullscreen in new tab" onClick={() => handleFullscreen(iface.id)}>⛶</button>
                       <button class="icon-btn" title="Clone" onClick={() => handleClone(iface.id)}>⎘</button>
                       <button class="icon-btn iface-delete" title="Delete" onClick={() => handleDelete(iface.id, iface.name)}>✕</button>
                     </div>