feat: add vpn to the network service

[PixisVI]

This PR adds a vpn service to the network one.

It works similarly to bluetooth devices.

I'm still kinda new to typescript and ags so any feedback would be appreciated :)

Vpn

signals

• connection-added: (uuid: string)
• connection-removed: (uuid: string)

properties

• connections: VpnConnection[]
• activated-connections: VpnConnection[]

methods

• getConnection: (uuid: string) => VpnConnection

VpnConnection

properties

• uuid: string
• id: string
• state: string
• vpn-state: string
• icon-name: string

methods

• setConnection: (connect: boolean) => void

Example Widget

const { vpn } = await Service.import("network");

const VpnConnectionItem = (vpnConnection) => Widget.Box({
    tooltip_text: vpnConnection.bind("vpn_state").as(vpnState => `State: ${vpnState}`),
    children: [
        Widget.Icon({
            icon: vpnConnection.bind("icon_name"),
        }),
        Widget.Label({
            label: vpnConnection.bind("id"),
        }),
        Widget.Box({ hexpand: true }),
        Widget.Spinner({
            active: vpnConnection.bind("state").as(s => s === "connecting" || s === "disconnecting"),
            visible: vpnConnection.bind("state").as(s => s === "connecting" || s === "disconnecting"),
        }),
        Widget.Switch({
            active: vpnConnection.bind("state").as(s => s !== "disconnected"),
            visible: vpnConnection.bind("state").as(s => !(s === "connecting" || s === "disconnecting")),
            on_activate: ({ active }) => vpnConnection.setConnection(active),
        }),
    ]
});

export const VpnConnections = () => Widget.Box({
    class_name: "vpn-connections",
    hexpand: true,
    vertical: true,
    children: vpn.bind("connections").as(connections => connections.map(VpnConnectionItem)),
})