feat: create graphical local proxy app

[fortuna]

Create a graphical example local proxy app using Fyne.

You can run it from macOS (needs some libs on Linux) with

go run github.com/Jigsaw-Code/outline-sdk/x/examples/fyne-proxy@latest

Screenshot:

/cc @amircybersec

[daniellacosse]

@fortuna how would you like for me to review this? as production code, or as a prototype?

[fortuna]

@daniellacosse
As a prototype, but I’m curious about what you think would be far from production other than internationalization.

[daniellacosse]

@daniellacosse As a prototype, but I’m curious about what you think would be far from production other than internationalization.

I think my main issue with productionization would be Fyne's lack of screen reader support fyne-io/fyne#1093

This won't be accessible to those with low or no vision - and the internet should be for all!

[daniellacosse]

Looks good as a prototype, but feel free to weigh my input as you see fit

[daniellacosse]

Annoying there's no HSL/HSV concept in image/color - i find those much more intuitive to work with

[daniellacosse]

generally I like to separate the state logic and the UI render logic (kind of a Model -> View thing), which you've basically done here, but I think my ideal would be something closer to the following... (apologizes if my go code here is incorrect)

type app struct {
  fyne.App
  Events: chan string
  UiState
}

func main() {
  /* <setup code> */
 
  // every time an "event" is pushed to the channel, we handle it and re-render
  // based on the new `app.UiState`
  for event := range app.Events {
    /* <handle event> */

    render(app.UiState);
  }
}

This way we can test both the business logic and the render logic independently, and more easily reuse any UI fragments we come up with (like your makeAppHeader) and reuse the same business logic across different interfaces (CLI/API/UI)

[fortuna]

I want to explore that too, but it doesn't look like Fyne is set up that way. You may appreciate Gio, which I want to try at some point: https://gioui.org/doc/architecture

[amircybersec]

This reminded me of Redux in front-end frameworks. I wonder if Gio has a better design for separating the UI/business logic.

[daniellacosse]

I find redux specifically kinda overcomplicates this concept, but yes it's the same principle

[jyyi1]

It looks great, thanks!

[jyyi1]

We need to align the app IDs, for example, in the connectivity app it's org.getoutline.sdk.example.connectivity. The difference is example vs examples. Also, do we really want to put the framework name to the app ID (i.e. fyne_probe vs probe vs probe_app)?

[fortuna]

Since we are not publishing these apps, it doesn't matter much.

I'm using fyne_proxy (renamed from probe) to differentiate from the other proxy apps we have, and to draw attention to the fact it's using fyne. I want to write a gio_proxy as well.

As for examples/example, I'm leaning towards examples because it's what we call the folder in the repository.

[jyyi1]

What is the Local_Proxy_Prototype.apk? Will it be generated by cmd/fyne? Why is it not "fyne-proxy.apk"?

[fortuna]

It uses the app name. But I removed the Prototype. updated

[fortuna]

I made some tweaks to support dark mode well and emphasize the start button:

[fortuna]

Since we are not publishing these apps, it doesn't matter much.

I'm using fyne_proxy (renamed from probe) to differentiate from the other proxy apps we have, and to draw attention to the fact it's using fyne. I want to write a gio_proxy as well.

As for examples/example, I'm leaning towards examples because it's what we call the folder in the repository.

[fortuna]

It uses the app name. But I removed the Prototype. updated

[fortuna]

I want to explore that too, but it doesn't look like Fyne is set up that way. You may appreciate Gio, which I want to try at some point: https://gioui.org/doc/architecture