Launch analytics events, changelog, better filter styles

2026-03-18 23:44:12 +01:00 · 2024-01-18 14:42:02 -08:00
parent b800f00b7e
commit d932c19513
22 changed files with 631 additions and 275 deletions
--- a/src-tauri/.sqlx/query-21cf14623d646b0d96ba92392edc4d48dff601d04acee62d2a0c12b8e655787b.json
+++ b/src-tauri/.sqlx/query-21cf14623d646b0d96ba92392edc4d48dff601d04acee62d2a0c12b8e655787b.json
@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            UPDATE settings SET (\n                theme,\n                appearance\n            ) = (?, ?) WHERE id = 'default';\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 2
-    },
-    "nullable": []
-  },
-  "hash": "21cf14623d646b0d96ba92392edc4d48dff601d04acee62d2a0c12b8e655787b"
-}
--- a/src-tauri/.sqlx/query-3b3fb6271340c6ec21a10b4f1b20502c86c425e0b53ac07692f8a4ed0be09335.json
+++ b/src-tauri/.sqlx/query-3b3fb6271340c6ec21a10b4f1b20502c86c425e0b53ac07692f8a4ed0be09335.json
@@ -1,6 +1,6 @@
 {
  "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                theme,\n                appearance\n            FROM settings\n            WHERE id = 'default'\n        ",
+  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                theme,\n                appearance,\n                update_channel\n            FROM settings\n            WHERE id = 'default'\n        ",
  "describe": {
    "columns": [
      {
@@ -32,6 +32,11 @@
        "name": "appearance",
        "ordinal": 5,
        "type_info": "Text"
+      },
+      {
+        "name": "update_channel",
+        "ordinal": 6,
+        "type_info": "Text"
      }
    ],
    "parameters": {
@@ -43,8 +48,9 @@
      false,
      false,
      false,
+      false,
      false
    ]
  },
-  "hash": "6864f2a9032a630cd7c8310be5cb0517ec13d12489540a70b15f23b1e8de7b91"
+  "hash": "3b3fb6271340c6ec21a10b4f1b20502c86c425e0b53ac07692f8a4ed0be09335"
 }
--- a/src-tauri/.sqlx/query-86a9d12d7b00217f3143671908c31c2c6a3c24774a505280dcba169eb5b6b0fb.json
+++ b/src-tauri/.sqlx/query-86a9d12d7b00217f3143671908c31c2c6a3c24774a505280dcba169eb5b6b0fb.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            UPDATE settings SET (\n                theme,\n                appearance,\n                update_channel\n            ) = (?, ?, ?) WHERE id = 'default';\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "86a9d12d7b00217f3143671908c31c2c6a3c24774a505280dcba169eb5b6b0fb"
+}
--- a/src-tauri/migrations/20240118181105_channel_setting.sql
+++ b/src-tauri/migrations/20240118181105_channel_setting.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN update_channel TEXT DEFAULT 'stable' NOT NULL;
--- a/src-tauri/src/analytics.rs
+++ b/src-tauri/src/analytics.rs
@@ -1,9 +1,12 @@
 use log::{debug, warn};
 use serde::{Deserialize, Serialize};
+use serde_json::json;
+use sqlx::{Pool, Sqlite};
 use sqlx::types::JsonValue;
-use tauri::{async_runtime, AppHandle, Manager};
+use tauri::{AppHandle, Manager, State};
+use tokio::sync::Mutex;

-use crate::is_dev;
+use crate::{is_dev, models};

 // serializable
 #[derive(Serialize, Deserialize)]
@@ -19,6 +22,8 @@ pub enum AnalyticsResource {
 #[derive(Serialize, Deserialize)]
 pub enum AnalyticsAction {
    Launch,
+    LaunchFirst,
+    LaunchUpdate,
    Create,
    Update,
    Upsert,
@@ -28,6 +33,24 @@ pub enum AnalyticsAction {
    Duplicate,
 }

+impl AnalyticsAction {
+    pub fn from_str(s: &str) -> Option<AnalyticsAction> {
+        match s {
+            "launch" => Some(AnalyticsAction::Launch),
+            "launch_first" => Some(AnalyticsAction::LaunchFirst),
+            "launch_update" => Some(AnalyticsAction::LaunchUpdate),
+            "create" => Some(AnalyticsAction::Create),
+            "update" => Some(AnalyticsAction::Update),
+            "upsert" => Some(AnalyticsAction::Upsert),
+            "delete" => Some(AnalyticsAction::Delete),
+            "delete_many" => Some(AnalyticsAction::DeleteMany),
+            "send" => Some(AnalyticsAction::Send),
+            "duplicate" => Some(AnalyticsAction::Duplicate),
+            _ => None,
+        }
+    }
+}
+
 fn resource_name(resource: AnalyticsResource) -> &'static str {
    match resource {
        AnalyticsResource::App => "app",
@@ -42,6 +65,8 @@ fn resource_name(resource: AnalyticsResource) -> &'static str {
 fn action_name(action: AnalyticsAction) -> &'static str {
    match action {
        AnalyticsAction::Launch => "launch",
+        AnalyticsAction::LaunchFirst => "launch_first",
+        AnalyticsAction::LaunchUpdate => "launch_update",
        AnalyticsAction::Create => "create",
        AnalyticsAction::Update => "update",
        AnalyticsAction::Upsert => "upsert",
@@ -52,15 +77,70 @@ fn action_name(action: AnalyticsAction) -> &'static str {
    }
 }

-pub fn track_event_blocking(
-    app_handle: &AppHandle,
-    resource: AnalyticsResource,
-    action: AnalyticsAction,
-    attributes: Option<JsonValue>,
-) {
-    async_runtime::block_on(async move {
-        track_event(app_handle, resource, action, attributes).await;
-    });
+#[derive(Default, Debug)]
+pub struct LaunchEventInfo {
+    pub current_version: String,
+    pub previous_version: String,
+    pub launched_after_update: bool,
+    pub num_launches: i32,
+}
+
+pub async fn track_launch_event(app_handle: &AppHandle) -> LaunchEventInfo {
+    let namespace = "analytics";
+    let last_tracked_version_key = "last_tracked_version";
+    let db_instance: State<'_, Mutex<Pool<Sqlite>>> = app_handle.state();
+    let pool = &*db_instance.lock().await;
+
+    let mut info = LaunchEventInfo::default();
+
+    info.num_launches = models::get_key_value_int(namespace, "num_launches", 0, pool).await + 1;
+    info.previous_version =
+        models::get_key_value_string(namespace, last_tracked_version_key, "", pool).await;
+    info.current_version = app_handle.package_info().version.to_string();
+
+    if info.previous_version.is_empty() {
+        track_event(
+            app_handle,
+            AnalyticsResource::App,
+            AnalyticsAction::LaunchFirst,
+            None,
+        )
+        .await;
+    } else {
+        info.launched_after_update = info.current_version != info.previous_version;
+        if info.launched_after_update {
+            track_event(
+                app_handle,
+                AnalyticsResource::App,
+                AnalyticsAction::LaunchUpdate,
+                Some(json!({ "num_launches": info.num_launches })),
+            )
+            .await;
+        }
+    };
+
+    // Track a launch event in all cases
+    track_event(
+        app_handle,
+        AnalyticsResource::App,
+        AnalyticsAction::Launch,
+        Some(json!({ "num_launches": info.num_launches })),
+    )
+        .await;
+
+
+    // Update key values
+
+    models::set_key_value_string(
+        namespace,
+        last_tracked_version_key,
+        info.current_version.as_str(),
+        pool,
+    )
+    .await;
+    models::set_key_value_int(namespace, "num_launches", info.num_launches, pool).await;
+
+    info
 }

 pub async fn track_event(
@@ -79,7 +159,7 @@ pub async fn track_event(
    };
    let base_url = match is_dev() {
        true => "http://localhost:7194",
-        false => "https://t.yaak.app"
+        false => "https://t.yaak.app",
    };
    let params = vec![
        ("e", event.clone()),
@@ -96,13 +176,17 @@ pub async fn track_event(
        .get(format!("{base_url}/t/e"))
        .query(&params);

+    // Disable analytics actual sending in dev
+    if is_dev() {
+        debug!("track: {} {}", event, attributes_json);
+        return;
+    }
+
    if let Err(e) = req.send().await {
        warn!(
-                "Error sending analytics event: {} {} {:?}",
-                e, event, params
-            );
-    } else {
-        debug!("Send event: {}: {:?}", event, params);
+            "Error sending analytics event: {} {} {} {:?}",
+            e, event, attributes_json, params,
+        );
    }
 }

--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -9,24 +9,25 @@ extern crate objc;

 use std::collections::HashMap;
 use std::env::current_dir;
-use std::fs::{create_dir_all, File, read_to_string};
+use std::fs::{create_dir_all, read_to_string, File};
 use std::process::exit;

 use fern::colors::ColoredLevelConfig;
-use log::{debug, info, warn};
+use log::{debug, error, info, warn};
 use rand::random;
 use serde::Serialize;
 use serde_json::Value;
-use sqlx::{Pool, Sqlite, SqlitePool};
 use sqlx::migrate::Migrator;
 use sqlx::types::Json;
-use tauri::{AppHandle, RunEvent, State, Window, WindowUrl, Wry};
-use tauri::{Manager, WindowEvent};
+use sqlx::{Pool, Sqlite, SqlitePool};
 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;
+use tauri::{AppHandle, RunEvent, State, Window, WindowUrl, Wry};
+use tauri::{Manager, WindowEvent};
 use tauri_plugin_log::{fern, LogTarget};
 use tauri_plugin_window_state::{StateFlags, WindowExt};
 use tokio::sync::Mutex;
+use tokio::time::sleep;
 use window_shadows::set_shadow;

 use window_ext::TrafficLightWindowExt;
@@ -84,7 +85,15 @@ async fn send_ephemeral_request(
    let response = models::HttpResponse::new();
    let environment_id2 = environment_id.unwrap_or("n/a").to_string();
    request.id = "".to_string();
-    send_http_request(request, &response, &environment_id2, &app_handle, pool, None).await
+    send_http_request(
+        request,
+        &response,
+        &environment_id2,
+        &app_handle,
+        pool,
+        None,
+    )
+    .await
 }

 #[tauri::command]
@@ -243,8 +252,15 @@ async fn send_request(
    };

    tokio::spawn(async move {
-        if let Err(e) =
-            send_http_request(req, &response2, &environment_id2, &app_handle2, &pool2, download_path).await
+        if let Err(e) = send_http_request(
+            req,
+            &response2,
+            &environment_id2,
+            &app_handle2,
+            &pool2,
+            download_path,
+        )
+        .await
        {
            response_err(&response2, e, &app_handle2, &pool2)
                .await
@@ -274,11 +290,25 @@ async fn response_err(
 #[tauri::command]
 async fn track_event(
    window: Window<Wry>,
-    resource: AnalyticsResource,
-    action: AnalyticsAction,
+    resource: &str,
+    action: &str,
    attributes: Option<Value>,
 ) -> Result<(), String> {
-    analytics::track_event(&window.app_handle(), resource, action, attributes).await;
+    let action_type = AnalyticsAction::from_str(action);
+    match (action_type, action_type) {
+        (Some(t), Some(t)) => {
+            analytics::track_event(
+                &window.app_handle(),
+                resource,
+                action_type,
+                attributes,
+            )
+                .await;
+        },
+        _ => {
+            error!("Invalid action type: {}", action);
+        }
+    }
    Ok(())
 }

@@ -298,7 +328,7 @@ async fn get_key_value(
    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<Option<models::KeyValue>, ()> {
    let pool = &*db_instance.lock().await;
-    let result = models::get_key_value(namespace, key, pool).await;
+    let result = models::get_key_value_raw(namespace, key, pool).await;
    Ok(result)
 }

@@ -311,7 +341,7 @@ async fn set_key_value(
    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<models::KeyValue, String> {
    let pool = &*db_instance.lock().await;
-    let (key_value, created) = models::set_key_value(namespace, key, value, pool).await;
+    let (key_value, created) = models::set_key_value_raw(namespace, key, value, pool).await;

    if created {
        emit_and_return(&window, "created_model", key_value)
@@ -558,13 +588,9 @@ async fn list_environments(
 }

 #[tauri::command]
-async fn get_settings(
-    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
-) -> Result<models::Settings, String> {
+async fn get_settings(db_instance: State<'_, Mutex<Pool<Sqlite>>>) -> Result<models::Settings, ()> {
    let pool = &*db_instance.lock().await;
-    models::get_or_create_settings(pool)
-        .await
-        .map_err(|e| e.to_string())
+    Ok(models::get_or_create_settings(pool).await)
 }

 #[tauri::command]
@@ -848,15 +874,21 @@ fn main() {
                },
                RunEvent::Ready => {
                    let w = create_window(app_handle, None);
-                    w.restore_state(StateFlags::all())
-                        .expect("Failed to restore window state");
+                    if let Err(e) = w.restore_state(StateFlags::all()) {
+                        error!("Failed to restore window state {}", e);
+                    }

-                    analytics::track_event_blocking(
-                        app_handle,
-                        AnalyticsResource::App,
-                        AnalyticsAction::Launch,
-                        None,
-                    );
+                    let h = app_handle.clone();
+                    tauri::async_runtime::spawn(async move {
+                        let info = analytics::track_launch_event(&h).await;
+                        info!("Launched Yaak {:?}", info);
+
+                        // Wait for window render and give a chance for the user to notice
+                        if info.launched_after_update && info.num_launches > 1 {
+                            sleep(std::time::Duration::from_secs(5)).await;
+                            let _ = w.emit("show_changelog", true);
+                        }
+                    });
                }
                RunEvent::WindowEvent {
                    label: _label,
@@ -996,9 +1028,6 @@ fn emit_side_effect<S: Serialize + Clone>(app_handle: &AppHandle<Wry>, event: &s
 }

 async fn get_update_mode(pool: &Pool<Sqlite>) -> UpdateMode {
-    let mode = models::get_key_value_string("app", "update_mode", pool).await;
-    match mode {
-        Some(mode) => update_mode_from_str(&mode),
-        None => UpdateMode::Stable,
-    }
+    let settings = models::get_or_create_settings(pool).await;
+    update_mode_from_str(settings.update_channel.as_str())
 }
--- a/src-tauri/src/models.rs
+++ b/src-tauri/src/models.rs
@@ -3,9 +3,9 @@ use std::fs;

 use rand::distributions::{Alphanumeric, DistString};
 use serde::{Deserialize, Serialize};
-use sqlx::types::chrono::NaiveDateTime;
-use sqlx::types::{Json, JsonValue};
 use sqlx::{Pool, Sqlite};
+use sqlx::types::{Json, JsonValue};
+use sqlx::types::chrono::NaiveDateTime;
 use tauri::AppHandle;

 fn default_true() -> bool {
@@ -21,6 +21,7 @@ pub struct Settings {
    pub updated_at: NaiveDateTime,
    pub theme: String,
    pub appearance: String,
+    pub update_channel: String,
 }

 #[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
@@ -179,13 +180,75 @@ pub struct KeyValue {
    pub value: String,
 }

-pub async fn set_key_value(
+pub async fn set_key_value_string(
    namespace: &str,
    key: &str,
    value: &str,
    pool: &Pool<Sqlite>,
 ) -> (KeyValue, bool) {
-    let existing = get_key_value(namespace, key, pool).await;
+    let encoded = serde_json::to_string(value);
+    set_key_value_raw(namespace, key, &encoded.unwrap(), pool).await
+}
+
+pub async fn set_key_value_int(
+    namespace: &str,
+    key: &str,
+    value: i32,
+    pool: &Pool<Sqlite>,
+) -> (KeyValue, bool) {
+    let encoded = serde_json::to_string(&value);
+    set_key_value_raw(namespace, key, &encoded.unwrap(), pool).await
+}
+
+pub async fn get_key_value_string(
+    namespace: &str,
+    key: &str,
+    default: &str,
+    pool: &Pool<Sqlite>,
+) -> String {
+    match get_key_value_raw(namespace, key, pool).await {
+        None => default.to_string(),
+        Some(v) => {
+            let result = serde_json::from_str(&v.value);
+            match result {
+                Ok(v) => v,
+                Err(e) => {
+                    println!("Failed to parse string key value: {}", e);
+                    default.to_string()
+                }
+            }
+        },
+    }
+}
+
+pub async fn get_key_value_int(
+    namespace: &str,
+    key: &str,
+    default: i32,
+    pool: &Pool<Sqlite>,
+) -> i32 {
+    match get_key_value_raw(namespace, key, pool).await {
+        None => default.clone(),
+        Some(v) => {
+            let result = serde_json::from_str(&v.value);
+            match result {
+                Ok(v) => v,
+                Err(e) => {
+                    println!("Failed to parse int key value: {}", e);
+                    default.clone()
+                }
+            }
+        },
+    }
+}
+
+pub async fn set_key_value_raw(
+    namespace: &str,
+    key: &str,
+    value: &str,
+    pool: &Pool<Sqlite>,
+) -> (KeyValue, bool) {
+    let existing = get_key_value_raw(namespace, key, pool).await;
    sqlx::query!(
        r#"
            INSERT INTO key_values (namespace, key, value)
@@ -201,13 +264,13 @@ pub async fn set_key_value(
    .await
    .expect("Failed to insert key value");

-    let kv = get_key_value(namespace, key, pool)
+    let kv = get_key_value_raw(namespace, key, pool)
        .await
        .expect("Failed to get key value");
    (kv, existing.is_none())
 }

-pub async fn get_key_value(namespace: &str, key: &str, pool: &Pool<Sqlite>) -> Option<KeyValue> {
+pub async fn get_key_value_raw(namespace: &str, key: &str, pool: &Pool<Sqlite>) -> Option<KeyValue> {
    sqlx::query_as!(
        KeyValue,
        r#"
@@ -223,22 +286,6 @@ pub async fn get_key_value(namespace: &str, key: &str, pool: &Pool<Sqlite>) -> O
    .ok()
 }

-pub async fn get_key_value_string(
-    namespace: &str,
-    key: &str,
-    pool: &Pool<Sqlite>,
-) -> Option<String> {
-    let kv = get_key_value(namespace, key, pool).await?;
-    let result = serde_json::from_str(&kv.value);
-    match result {
-        Ok(v) => Some(v),
-        Err(e) => {
-            println!("Failed to parse key value: {}", e);
-            None
-        }
-    }
-}
-
 pub async fn find_workspaces(pool: &Pool<Sqlite>) -> Result<Vec<Workspace>, sqlx::Error> {
    sqlx::query_as!(
        Workspace,
@@ -346,7 +393,8 @@ async fn get_settings(pool: &Pool<Sqlite>) -> Result<Settings, sqlx::Error> {
                created_at,
                updated_at,
                theme,
-                appearance
+                appearance,
+                update_channel
            FROM settings
            WHERE id = 'default'
        "#,
@@ -355,10 +403,9 @@ async fn get_settings(pool: &Pool<Sqlite>) -> Result<Settings, sqlx::Error> {
    .await
 }

-pub async fn get_or_create_settings(pool: &Pool<Sqlite>) -> Result<Settings, sqlx::Error> {
-    let existing = get_settings(pool).await;
-    if let Ok(s) = existing {
-        Ok(s)
+pub async fn get_or_create_settings(pool: &Pool<Sqlite>) -> Settings {
+    if let Ok(settings) = get_settings(pool).await {
+        settings
    } else {
        sqlx::query!(
            r#"
@@ -367,8 +414,8 @@ pub async fn get_or_create_settings(pool: &Pool<Sqlite>) -> Result<Settings, sql
            "#,
        )
        .execute(pool)
-        .await?;
-        get_settings(pool).await
+        .await.expect("Failed to insert settings");
+        get_settings(pool).await.expect("Failed to get settings")
    }
 }

@@ -380,11 +427,13 @@ pub async fn update_settings(
        r#"
            UPDATE settings SET (
                theme,
-                appearance
-            ) = (?, ?) WHERE id = 'default';
+                appearance,
+                update_channel
+            ) = (?, ?, ?) WHERE id = 'default';
        "#,
        settings.theme,
        settings.appearance,
+        settings.update_channel
    )
    .execute(pool)
    .await?;
--- a/src-tauri/src/updates.rs
+++ b/src-tauri/src/updates.rs
@@ -30,13 +30,16 @@ impl YaakUpdater {
        app_handle: &AppHandle<Wry>,
        mode: UpdateMode,
    ) -> Result<(), updater::Error> {
-        if is_dev() {
-            info!("Skipping update check because we are in dev mode");
+        self.last_update_check = SystemTime::now();
+
+        let update_mode = get_update_mode_str(mode);
+        let enabled = !is_dev();
+        info!("Checking for updates mode={} enabled={}", update_mode, enabled);
+
+        if !enabled {
            return Ok(());
        }
-        self.last_update_check = SystemTime::now();
-        let update_mode = get_update_mode_str(mode);
-        info!("Checking for updates mode={}", update_mode);
+
        match app_handle
            .updater()
            .header("X-Update-Mode", update_mode)?
@@ -62,7 +65,7 @@ impl YaakUpdater {
                                    if dialog::blocking::ask(
                                        None::<&Window>,
                                        "Update Installed",
-                                        format!("Would you like to restart the app?",),
+                                        "Would you like to restart the app?",
                                    ) {
                                        h.restart();
                                    }
--- a/src-web/components/GraphQLEditor.tsx
+++ b/src-web/components/GraphQLEditor.tsx
@@ -82,40 +82,43 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
        placeholder="..."
        ref={editorViewRef}
        actions={
-          (error || isLoading) && (
-            <Button
-              size="xs"
-              color={error ? 'danger' : 'gray'}
-              isLoading={isLoading}
-              onClick={() => {
-                dialog.show({
-                  title: 'Introspection Failed',
-                  size: 'dynamic',
-                  id: 'introspection-failed',
-                  render: () => (
-                    <>
-                      <FormattedError>{error ?? 'unknown'}</FormattedError>
-                      <div className="w-full mt-3">
-                        <Button
-                          onClick={() => {
-                            dialog.hide('introspection-failed');
-                            refetch();
-                          }}
-                          className="ml-auto"
-                          color="secondary"
-                          size="sm"
-                        >
-                          Try Again
-                        </Button>
-                      </div>
-                    </>
-                  ),
-                });
-              }}
-            >
-              {error ? 'Introspection Failed' : 'Introspecting'}
-            </Button>
-          )
+          error || isLoading
+            ? [
+                <Button
+                  key="introspection"
+                  size="xs"
+                  color={error ? 'danger' : 'gray'}
+                  isLoading={isLoading}
+                  onClick={() => {
+                    dialog.show({
+                      title: 'Introspection Failed',
+                      size: 'dynamic',
+                      id: 'introspection-failed',
+                      render: () => (
+                        <>
+                          <FormattedError>{error ?? 'unknown'}</FormattedError>
+                          <div className="w-full mt-3">
+                            <Button
+                              onClick={() => {
+                                dialog.hide('introspection-failed');
+                                refetch();
+                              }}
+                              className="ml-auto"
+                              color="secondary"
+                              size="sm"
+                            >
+                              Try Again
+                            </Button>
+                          </div>
+                        </>
+                      ),
+                    });
+                  }}
+                >
+                  {error ? 'Introspection Failed' : 'Introspecting'}
+                </Button>,
+              ]
+            : []
        }
        {...extraEditorProps}
      />
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -94,8 +94,8 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
      style={style}
      className={classNames(
        className,
-        'bg-gray-50 max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
-        'dark:bg-gray-100 rounded-md border border-highlight',
+        'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
+        'bg-gray-50 dark:bg-gray-100 rounded-md border border-highlight',
        'shadow shadow-gray-100 dark:shadow-gray-0 relative',
      )}
    >
--- a/src-web/components/SettingsDialog.tsx
+++ b/src-web/components/SettingsDialog.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useSettings } from '../hooks/useSettings';
 import { useUpdateSettings } from '../hooks/useUpdateSettings';
@@ -6,8 +5,9 @@ import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { Checkbox } from './core/Checkbox';
 import { Heading } from './core/Heading';
 import { Input } from './core/Input';
+import { Select } from './core/Select';
 import { Separator } from './core/Separator';
-import { HStack, VStack } from './core/Stacks';
+import { VStack } from './core/Stacks';

 export const SettingsDialog = () => {
  const workspace = useActiveWorkspace();
@@ -20,24 +20,36 @@ export const SettingsDialog = () => {
  }

  return (
-    <VStack space={2}>
-      <HStack className="mt-1" alignItems="center" space={2}>
-        <div className="w-1/3">Appearance</div>
-        <select
-          value={settings.appearance}
-          style={selectBackgroundStyles}
-          onChange={(e) => updateSettings.mutateAsync({ ...settings, appearance: e.target.value })}
-          className={classNames(
-            'font-mono text-xs border w-full px-2 outline-none bg-transparent',
-            'border-highlight focus:border-focus',
-            'h-xs',
-          )}
-        >
-          <option value="system">Match System</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
-      </HStack>
+    <VStack space={2} className="mb-2">
+      <Select
+        name="appearance"
+        label="Appearance"
+        labelPosition="left"
+        labelClassName="w-1/3"
+        size="sm"
+        value={settings.appearance}
+        onChange={(appearance) => updateSettings.mutateAsync({ ...settings, appearance })}
+        options={{
+          system: 'System',
+          light: 'Light',
+          dark: 'Dark',
+        }}
+      />
+
+      <Select
+        name="updateChannel"
+        label="Update Channel"
+        labelPosition="left"
+        labelClassName="w-1/3"
+        size="sm"
+        value={settings.updateChannel}
+        onChange={(updateChannel) => updateSettings.mutateAsync({ ...settings, updateChannel })}
+        options={{
+          stable: 'Release',
+          beta: 'Early Bird (Beta)',
+        }}
+      />
+
      <Separator className="my-4" />

      <Heading size={2}>
@@ -48,7 +60,7 @@ export const SettingsDialog = () => {
      </Heading>
      <VStack className="mt-1 w-full" space={3}>
        <Input
-          size="xs"
+          size="sm"
          name="requestTimeout"
          label="Request Timeout (ms)"
          labelPosition="left"
@@ -75,14 +87,6 @@ export const SettingsDialog = () => {
          }
        />
      </VStack>
-      {/*<Checkbox checked={appearance === 'dark'} title="Dark Mode" onChange={toggleAppearance} />*/}
    </VStack>
  );
 };
-
-const selectBackgroundStyles = {
-  backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
-  backgroundPosition: 'right 0.5rem center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '1.5em 1.5em',
-};
--- a/src-web/components/SettingsDropdown.tsx
+++ b/src-web/components/SettingsDropdown.tsx
@@ -1,9 +1,9 @@
 import { invoke, shell } from '@tauri-apps/api';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useAppVersion } from '../hooks/useAppVersion';
 import { useExportData } from '../hooks/useExportData';
 import { useImportData } from '../hooks/useImportData';
-import { useUpdateMode } from '../hooks/useUpdateMode';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { Button } from './core/Button';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
@@ -18,18 +18,51 @@ export function SettingsDropdown() {
  const importData = useImportData();
  const exportData = useExportData();
  const appVersion = useAppVersion();
-  const [updateMode, setUpdateMode] = useUpdateMode();
  const dropdownRef = useRef<DropdownRef>(null);
  const dialog = useDialog();
+  const [showChangelog, setShowChangelog] = useState<boolean>(false);
+
+  useListenToTauriEvent('show_changelog', () => {
+    setShowChangelog(true);
+  });

  return (
    <Dropdown
      ref={dropdownRef}
+      onClose={() => setShowChangelog(false)}
      items={[
+        {
+          key: 'settings',
+          label: 'Settings',
+          hotKeyAction: 'settings.show',
+          leftSlot: <Icon icon="settings" />,
+          onSelect: () => {
+            dialog.show({
+              id: 'settings',
+              size: 'md',
+              title: 'Settings',
+              render: () => <SettingsDialog />,
+            });
+          },
+        },
+        {
+          key: 'hotkeys',
+          label: 'Keyboard shortcuts',
+          hotKeyAction: 'hotkeys.showHelp',
+          leftSlot: <Icon icon="keyboard" />,
+          onSelect: () => {
+            dialog.show({
+              id: 'hotkey-help',
+              title: 'Keyboard Shortcuts',
+              size: 'sm',
+              render: () => <KeyboardShortcutsDialog />,
+            });
+          },
+        },
        {
          key: 'import-data',
-          label: 'Import',
-          leftSlot: <Icon icon="download" />,
+          label: 'Import Data',
+          leftSlot: <Icon icon="folderInput" />,
          onSelect: () => {
            dialog.show({
              title: 'Import Data',
@@ -56,60 +89,41 @@ export function SettingsDropdown() {
        },
        {
          key: 'export-data',
-          label: 'Export',
-          leftSlot: <Icon icon="upload" />,
+          label: 'Export Data',
+          leftSlot: <Icon icon="folderOutput" />,
          onSelect: () => exportData.mutate(),
        },
-        {
-          key: 'hotkeys',
-          label: 'Keyboard shortcuts',
-          hotKeyAction: 'hotkeys.showHelp',
-          leftSlot: <Icon icon="keyboard" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'hotkey-help',
-              title: 'Keyboard Shortcuts',
-              size: 'sm',
-              render: () => <KeyboardShortcutsDialog />,
-            });
-          },
-        },
-        {
-          key: 'settings',
-          label: 'Settings',
-          hotKeyAction: 'settings.show',
-          leftSlot: <Icon icon="settings" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'settings',
-              size: 'md',
-              title: 'Settings',
-              render: () => <SettingsDialog />,
-            });
-          },
-        },
        { type: 'separator', label: `Yaak v${appVersion.data}` },
-        {
-          key: 'update-mode',
-          label: updateMode === 'stable' ? 'Enable Beta' : 'Disable Beta',
-          onSelect: () => setUpdateMode(updateMode === 'stable' ? 'beta' : 'stable'),
-          leftSlot: <Icon icon="flask" />,
-        },
        {
          key: 'update-check',
          label: 'Check for Updates',
-          onSelect: () => invoke('check_for_updates'),
          leftSlot: <Icon icon="update" />,
+          onSelect: () => invoke('check_for_updates'),
        },
        {
          key: 'feedback',
          label: 'Feedback',
-          onSelect: () => shell.open('https://yaak.canny.io'),
          leftSlot: <Icon icon="chat" />,
+          rightSlot: <Icon icon="externalLink" />,
+          onSelect: () => shell.open('https://yaak.canny.io'),
+        },
+        {
+          key: 'changelog',
+          label: 'Changelog',
+          variant: showChangelog ? 'notify' : 'default',
+          leftSlot: <Icon icon="cake" />,
+          rightSlot: <Icon icon="externalLink" />,
+          onSelect: () => shell.open(`https://yaak.app/changelog/${appVersion.data}`),
        },
      ]}
    >
-      <IconButton size="sm" title="Main Menu" icon="settings" className="pointer-events-auto" />
+      <IconButton
+        size="sm"
+        title="Main Menu"
+        icon="settings"
+        className="pointer-events-auto"
+        showBadge={showChangelog}
+      />
    </Dropdown>
  );
 }
--- a/src-web/components/SidebarActions.tsx
+++ b/src-web/components/SidebarActions.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react';
 import { useCreateFolder } from '../hooks/useCreateFolder';
 import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
+import { trackEvent } from '../lib/analytics';
 import { Dropdown } from './core/Dropdown';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
@@ -14,7 +15,10 @@ export const SidebarActions = memo(function SidebarActions() {
  return (
    <HStack>
      <IconButton
-        onClick={toggle}
+        onClick={() => {
+          trackEvent('Sidebar', 'Toggle');
+          toggle();
+        }}
        className="pointer-events-auto"
        size="sm"
        title="Show sidebar"
--- a/src-web/components/Workspace.tsx
+++ b/src-web/components/Workspace.tsx
@@ -1,4 +1,3 @@
-import { appWindow } from '@tauri-apps/api/window';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type {
@@ -8,7 +7,7 @@ import type {
  ReactNode,
 } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useFullscreen, useWindowSize } from 'react-use';
+import { useWindowSize } from 'react-use';
 import { useIsFullscreen } from '../hooks/useIsFullscreen';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -7,6 +7,7 @@ import type {
  MouseEvent,
  ReactElement,
  ReactNode,
+  SetStateAction,
 } from 'react';
 import React, {
  Children,
@@ -39,7 +40,7 @@ export type DropdownItemDefault = {
  label: ReactNode;
  hotKeyAction?: HotkeyAction;
  hotKeyLabelOnly?: boolean;
-  variant?: 'danger';
+  variant?: 'default' | 'danger' | 'notify';
  disabled?: boolean;
  hidden?: boolean;
  leftSlot?: ReactNode;
@@ -53,6 +54,8 @@ export interface DropdownProps {
  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
  items: DropdownItem[];
  openOnHotKeyAction?: HotkeyAction;
+  onOpen?: () => void;
+  onClose?: () => void;
 }

 export interface DropdownRef {
@@ -66,14 +69,23 @@ export interface DropdownRef {
 }

 export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown(
-  { children, items, openOnHotKeyAction }: DropdownProps,
+  { children, items, openOnHotKeyAction, onOpen, onClose }: DropdownProps,
  ref,
 ) {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isOpen, _setIsOpen] = useState<boolean>(false);
  const [defaultSelectedIndex, setDefaultSelectedIndex] = useState<number>();
  const buttonRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<Omit<DropdownRef, 'open'>>(null);

+  const setIsOpen = useCallback(
+    (o: SetStateAction<boolean>) => {
+      _setIsOpen(o);
+      if (o) onOpen?.();
+      else onClose?.();
+    },
+    [onClose, onOpen],
+  );
+
  useHotKey(openOnHotKeyAction ?? null, () => {
    setIsOpen(true);
  });
@@ -112,12 +124,12 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
        }),
    };
    return cloneElement(existingChild, props);
-  }, [children]);
+  }, [children, setIsOpen]);

  const handleClose = useCallback(() => {
    setIsOpen(false);
    buttonRef.current?.focus();
-  }, []);
+  }, [setIsOpen]);

  useEffect(() => {
    buttonRef.current?.setAttribute('aria-expanded', isOpen.toString());
@@ -307,11 +319,12 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro

    const docRect = document.documentElement.getBoundingClientRect();
    const width = triggerShape.right - triggerShape.left;
+    const heightAbove = triggerShape.top;
+    const heightBelow = docRect.height - triggerShape.bottom;
    const hSpaceRemaining = docRect.width - triggerShape.left;
-    const vSpaceRemaining = docRect.height - triggerShape.bottom;
    const top = triggerShape?.bottom + 5;
    const onRight = hSpaceRemaining < 200;
-    const upsideDown = vSpaceRemaining < 200;
+    const upsideDown = heightAbove > heightBelow && heightBelow < 200;
    const containerStyles = {
      top: !upsideDown ? top : undefined,
      bottom: upsideDown ? docRect.height - top : undefined,
@@ -462,6 +475,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
        'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm text-gray-700 whitespace-nowrap',
        'focus:bg-highlight focus:text-gray-900 rounded',
        item.variant === 'danger' && 'text-red-600',
+        item.variant === 'notify' && 'text-pink-600',
      )}
      innerClassName="!text-left"
      {...props}
--- a/src-web/components/core/Editor/Editor.tsx
+++ b/src-web/components/core/Editor/Editor.tsx
@@ -5,7 +5,18 @@ import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/vie
 import classNames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject, ReactNode } from 'react';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
 import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
 import { useActiveWorkspace } from '../../../hooks/useActiveWorkspace';
 import { IconButton } from '../IconButton';
@@ -145,6 +156,12 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [forceUpdateKey]);

+  const classList = className?.split(/\s+/) ?? [];
+  const bgClassList = classList
+    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
+    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
+    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
+
  // Initialize the editor when ref mounts
  const initEditorRef = useCallback((container: HTMLDivElement | null) => {
    if (container === null) {
@@ -184,7 +201,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(

      view = new EditorView({ state, parent: container });
      cm.current = { view, languageCompartment };
-      syncGutterBg({ parent: container, className });
+      syncGutterBg({ parent: container, bgClassList });
      if (autoFocus) {
        view.focus();
      }
@@ -198,6 +215,50 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  // Add bg classes to actions, so they appear over the text
+  const decoratedActions = useMemo(() => {
+    const results = [];
+    const actionClassName = classNames(
+      'transition-opacity opacity-0 group-hover:opacity-50 hover:!opacity-100 shadow',
+      bgClassList,
+    );
+
+    if (format) {
+      results.push(
+        <IconButton
+          showConfirm
+          key="format"
+          size="sm"
+          title="Reformat contents"
+          icon="magicWand"
+          className={classNames(actionClassName)}
+          onClick={() => {
+            if (cm.current === null) return;
+            const { doc } = cm.current.view.state;
+            const formatted = format(doc.toString());
+            // Update editor and blur because the cursor will reset anyway
+            cm.current.view.dispatch({
+              changes: { from: 0, to: doc.length, insert: formatted },
+            });
+            cm.current.view.contentDOM.blur();
+            // Fire change event
+            onChange?.(formatted);
+          }}
+        />,
+      );
+    }
+    results.push(
+      Children.map(actions, (existingChild) => {
+        if (!isValidElement(existingChild)) return null;
+        return cloneElement(existingChild, {
+          ...existingChild.props,
+          className: classNames(existingChild.props.className, actionClassName),
+        });
+      }),
+    );
+    return results;
+  }, [actions, bgClassList, format, onChange]);
+
  const cmContainer = (
    <div
      ref={initEditorRef}
@@ -219,7 +280,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
  return (
    <div className="group relative h-full w-full">
      {cmContainer}
-      {(format || actions) && (
+      {decoratedActions && (
        <HStack
          space={1}
          alignItems="center"
@@ -229,28 +290,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
            'pointer-events-none', // No pointer events so we don't block the editor
          )}
        >
-          {format && (
-            <IconButton
-              showConfirm
-              size="sm"
-              title="Reformat contents"
-              icon="magicWand"
-              className="transition-all opacity-0 group-hover:opacity-100"
-              onClick={() => {
-                if (cm.current === null) return;
-                const { doc } = cm.current.view.state;
-                const formatted = format(doc.toString());
-                // Update editor and blur because the cursor will reset anyway
-                cm.current.view.dispatch({
-                  changes: { from: 0, to: doc.length, insert: formatted },
-                });
-                cm.current.view.contentDOM.blur();
-                // Fire change event
-                onChange?.(formatted);
-              }}
-            />
-          )}
-          {actions}
+          {decoratedActions}
        </HStack>
      )}
    </div>
@@ -325,19 +365,14 @@ function isViewUpdateFromUserInput(viewUpdate: ViewUpdate) {

 const syncGutterBg = ({
  parent,
-  className = '',
+  bgClassList,
 }: {
  parent: HTMLDivElement;
-  className?: string;
+  bgClassList: string[];
 }) => {
  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
-  const classList = className?.split(/\s+/) ?? [];
-  const bgClasses = classList
-    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
-    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
-    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
  if (gutterEl) {
-    gutterEl?.classList.add(...bgClasses);
+    gutterEl?.classList.add(...bgClassList);
  }
 };

--- a/src-web/components/core/Icon.tsx
+++ b/src-web/components/core/Icon.tsx
@@ -6,6 +6,7 @@ import { memo } from 'react';
 const icons = {
  archive: lucide.ArchiveIcon,
  box: lucide.BoxIcon,
+  cake: lucide.CakeIcon,
  chat: lucide.MessageSquare,
  check: lucide.CheckIcon,
  chevronDown: lucide.ChevronDownIcon,
@@ -13,6 +14,8 @@ const icons = {
  code: lucide.CodeIcon,
  copy: lucide.CopyIcon,
  download: lucide.DownloadIcon,
+  folderInput: lucide.FolderInputIcon,
+  folderOutput: lucide.FolderOutputIcon,
  externalLink: lucide.ExternalLinkIcon,
  eye: lucide.EyeIcon,
  eyeClosed: lucide.EyeOffIcon,
--- a/src-web/components/core/IconButton.tsx
+++ b/src-web/components/core/IconButton.tsx
@@ -13,6 +13,7 @@ type Props = IconProps &
    iconClassName?: string;
    iconSize?: IconProps['size'];
    title: string;
+    showBadge?: boolean;
  };

 export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
@@ -26,6 +27,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
    tabIndex,
    size = 'md',
    iconSize,
+    showBadge,
    ...props
  }: Props,
  ref,
@@ -49,7 +51,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
      innerClassName="flex items-center justify-center"
      className={classNames(
        className,
-        'flex-shrink-0 text-gray-700 hover:text-gray-1000',
+        'relative flex-shrink-0 text-gray-700 hover:text-gray-1000',
        '!px-0',
        size === 'md' && 'w-9',
        size === 'sm' && 'w-8',
@@ -58,6 +60,11 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
      size={size}
      {...props}
    >
+      {showBadge && (
+        <div className="absolute top-0 right-0 w-1/2 h-1/2 flex items-center justify-center">
+          <div className="w-2.5 h-2.5 bg-pink-500 rounded-full" />
+        </div>
+      )}
      <Icon
        size={iconSize}
        icon={confirmed ? 'check' : icon}
--- a/src-web/components/core/Select.tsx
+++ b/src-web/components/core/Select.tsx
@@ -0,0 +1,74 @@
+import classNames from 'classnames';
+
+interface Props<T extends string> {
+  name: string;
+  label: string;
+  labelPosition?: 'top' | 'left';
+  labelClassName?: string;
+  hideLabel?: boolean;
+  value: string;
+  options: Record<T, string>;
+  onChange: (value: T) => void;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+
+export function Select<T extends string>({
+  labelPosition = 'top',
+  name,
+  labelClassName,
+  hideLabel,
+  label,
+  value,
+  options,
+  onChange,
+  size = 'md',
+}: Props<T>) {
+  const id = `input-${name}`;
+  return (
+    <div
+      className={classNames(
+        'w-full',
+        'pointer-events-auto', // Just in case we're placing in disabled parent
+        labelPosition === 'left' && 'flex items-center gap-2',
+        labelPosition === 'top' && 'flex-row gap-0.5',
+      )}
+    >
+      <label
+        htmlFor={id}
+        className={classNames(
+          labelClassName,
+          'text-sm text-gray-900 whitespace-nowrap',
+          hideLabel && 'sr-only',
+        )}
+      >
+        {label}
+      </label>
+      <select
+        value={value}
+        style={selectBackgroundStyles}
+        onChange={(e) => onChange(e.target.value as T)}
+        className={classNames(
+          'font-mono text-xs border w-full px-2 outline-none bg-transparent',
+          'border-highlight focus:border-focus',
+          size === 'xs' && 'h-xs',
+          size === 'sm' && 'h-sm',
+          size === 'md' && 'h-md',
+          size === 'lg' && 'h-lg',
+        )}
+      >
+        {Object.entries<string>(options).map(([value, label]) => (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+const selectBackgroundStyles = {
+  backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
+  backgroundPosition: 'right 0.5rem center',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '1.5em 1.5em',
+};
--- a/src-web/components/responseViewers/TextViewer.tsx
+++ b/src-web/components/responseViewers/TextViewer.tsx
@@ -1,4 +1,6 @@
-import { useCallback } from 'react';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useDebouncedSetState } from '../../hooks/useDebouncedSetState';
 import { useFilterResponse } from '../../hooks/useFilterResponse';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
@@ -9,7 +11,6 @@ import type { HttpResponse } from '../../lib/models';
 import { Editor } from '../core/Editor';
 import { IconButton } from '../core/IconButton';
 import { Input } from '../core/Input';
-import { HStack } from '../core/Stacks';

 interface Props {
  response: HttpResponse;
@@ -34,30 +35,44 @@ export function TextViewer({ response, pretty }: Props) {
  const isJson = contentType?.includes('json');
  const isXml = contentType?.includes('xml') || contentType?.includes('html');
  const canFilter = isJson || isXml;
-  const actions = canFilter && (
-    <HStack className="w-full" justifyContent="end" space={1}>
-      {isSearching && (
-        <Input
-          hideLabel
-          autoFocus
-          containerClassName="bg-gray-50"
-          size="sm"
-          placeholder={isJson ? 'JSONPath expression' : 'XPath expression'}
-          label="Filter expression"
-          name="filter"
-          defaultValue={filterText}
-          onKeyDown={(e) => e.key === 'Escape' && clearSearch()}
-          onChange={setDebouncedFilterText}
-        />
-      )}
+
+  const actions = useMemo<ReactNode[]>(() => {
+    const result: ReactNode[] = [];
+
+    if (!canFilter) return result;
+
+    if (isSearching) {
+      result.push(
+        <div key="input" className="w-full !opacity-100">
+          <Input
+            hideLabel
+            autoFocus
+            containerClassName="bg-gray-100 dark:bg-gray-50"
+            size="sm"
+            placeholder={isJson ? 'JSONPath expression' : 'XPath expression'}
+            label="Filter expression"
+            name="filter"
+            defaultValue={filterText}
+            onKeyDown={(e) => e.key === 'Escape' && clearSearch()}
+            onChange={setDebouncedFilterText}
+          />
+        </div>,
+      );
+    }
+
+    result.push(
      <IconButton
+        key="icon"
        size="sm"
        icon={isSearching ? 'x' : 'filter'}
        title={isSearching ? 'Close filter' : 'Filter response'}
        onClick={clearSearch}
-      />
-    </HStack>
-  );
+        className={classNames(isSearching && '!opacity-100')}
+      />,
+    );
+
+    return result;
+  }, [canFilter, clearSearch, filterText, isJson, isSearching, setDebouncedFilterText]);

  return (
    <Editor
--- a/src-web/lib/analytics.ts
+++ b/src-web/lib/analytics.ts
@@ -3,13 +3,24 @@ import { invoke } from '@tauri-apps/api';
 export function trackEvent(
  resource:
    | 'App'
+    | 'Sidebar'
    | 'Workspace'
    | 'Environment'
    | 'Folder'
    | 'HttpRequest'
    | 'HttpResponse'
    | 'KeyValue',
-  action: 'Launch' | 'Create' | 'Update' | 'Delete' | 'DeleteMany' | 'Send' | 'Duplicate',
+  action:
+    | 'Toggle'
+    | 'Show'
+    | 'Hide'
+    | 'Launch'
+    | 'Create'
+    | 'Update'
+    | 'Delete'
+    | 'DeleteMany'
+    | 'Send'
+    | 'Duplicate',
  attributes: Record<string, string | number> = {},
 ) {
  invoke('track_event', {
--- a/src-web/lib/models.ts
+++ b/src-web/lib/models.ts
@@ -21,6 +21,7 @@ export interface Settings extends BaseModel {
  readonly model: 'settings';
  theme: string;
  appearance: string;
+  updateChannel: string;
 }

 export interface Workspace extends BaseModel {
				`@@ -0,0 +1 @@`
				`ALTER TABLE settings ADD COLUMN update_channel TEXT DEFAULT 'stable' NOT NULL;`