Despite still being in development, the `tauri-specta` project already
proves to be quite useful. It allows us to generate TypeScript bindings
for our commands and events, creating a type-safe contract between the
frontend and the backend.
For example, this ensures that the TypeScript code calls a command
actually with the required parameters and thus avoids runtime failures.
Similarly, the frontend can listen on type-safe events without having to
use any magic strings.
The removed hook dependencies are invalid because the side-effect
specified in `useEffect` does in fact not depend on them. However, as a
result of these dependencies, the `useEffect` closure appears to run in
an end-less loop, constantly sending the `update_state` command to the
backend which in turn re-sends all state to the frontend, causing a
massive CPU and memory spike.
Resolves: #9519
- removes `NavLink` in favor of using the `href` prop on `SidebarItem`.
This fixes vertical spacing between sidebar items (it was inconsistent)
and DOM structure issues caused by setting `NavLink` as a direct child
of `<SidebarItemGroup>`.
- adds `cursor-pointer` to all `<Button>`s
- adds `cursor-pointer` to the `<SidebarCollapse>`
### Before
<img width="1238" alt="Screenshot 2025-06-10 at 7 57 37 PM"
src="https://github.com/user-attachments/assets/2e5e66f2-d4c1-48b7-b81d-1803de2442fc"
/>
### After
<img width="1238" alt="Screenshot 2025-06-10 at 7 57 55 PM"
src="https://github.com/user-attachments/assets/aa676fc1-124a-4e33-859d-da8f3eaad211"
/>
With the introduction of the "connect on start" configuration option, we
introduced a bug where the GUI client said "Signed in as ..." even
though we did not have a `connlib` session. The tray-menu handles this
state correctly and clicking sign out and sign in restores Firezone to a
functional state.
This disparity happened because we assumed that having a token means we
must have a session.
To fix this, we introduce a new `SessionViewModel` that combines the
state of the auth session and the `connlib` state. Only if we have both
do we infer that we are "signed in". This also requires us to introduce
an intermediary state where we are "loading". This is represented as a
spinner in the UI.
Last but not least, this also removes the automated hiding of the client
window. In a prior design, the only job of this window was to show the
"Sign in" button so it wasn't useful beyond clicking that. Now that we
show more things in this window, automatically hiding it might confuse
the user.
Here is what this new design looks like:
[Login
flow](https://github.com/user-attachments/assets/276e390b-4837-48e2-aaf1-eea007472816)
As a result of other improvements around "zero-click sign-in", the user
often doesn't even have to switch to the browser window because sign-in
happens in the background. Unfortunately, the tab still remains open but
that is outside of our control (at least on Linux).
When building the gui client with `TSLINK_BUILD=true`, the library
outputs using 4 spaces for indent. These are however currently checked
into git with 2 spaces per indent, which causes the Tauri workflow to
fail because it checks for a pristine git directory after the build.
Unfortunately #9383 doesn't fix this issue because it has nothing to do
with prettier in CI.
Fixes
https://github.com/firezone/firezone/actions/runs/15457631114/job/43512703266
With an increased amount of complexity in the frontend of the GUI
client, it pays off to initialise the Sentry React SDK to catch any
errors that might occur. In particular, any failing commands that we
issue to the backend will be caught that way as those rejected
`Promise`s will surface as uncaught exceptions.
Similar to the backend, Sentry in the frontend is only initialised for
known environments, i.e. our production and staging deployments of
Firezone. For on-premise installations, Sentry is disabled.
Related: #6138
The frontend of the GUI client is written in TypeScript and communicates
with the backend via event listeners. Currently, we only have
type-safety within either of those parts of the codebase but not across
it. The payloads of these events are JSON-encoded. Any change to this
interface therefore needs to be applied on either end.
To avoid this, we add `tslink` to the GUI client which generates
TypeScript interfaces from Rust structs. We still check those into Git
into order to make local builds easy (otherwise every dev would have to
set `TSLINK_BUILD=true` on their machine). Our Tauri CI build already
has a check to ensure the Git workspace isn't modified after building so
any changes to these generated files will fail CI.
This adds a bit more type-safety to the codebase and makes refactorings
on the GUI client easier.
