Add tabs sidebar

data/re.sonny.Tangram.gschema.xml

@@ -32,9 +32,15 @@
     </key>
 
     <key name="tabs-bar" type="b">
-      <default>true</default>
-      <summary>Show a tab bar</summary>
-      <description>Whether a tab bar should be shown</description>
+      <default>false</default>
+      <summary>Show the Tabs Bar</summary>
+      <description>Whether the tabs bar should be shown</description>
+    </key>
+
+    <key name="tabs-sidebar" type="b">
+      <default>false</default>
+      <summary>Show the Tabs sidebar</summary>
+      <description>Whether the tabs sidebar should be shown</description>
     </key>
 
     <key name="instances" type="as">

po/POTFILES

@@ -35,3 +35,5 @@ src/ViewTabs.blp
 src/ViewNew.blp
 src/ViewTabs.js
 src/ViewNew.js
+
+troll/src/async.js

src/Actions.js

@@ -76,6 +76,7 @@ export default function Actions({
   });
   application.add_action(quit);
 
-  const show_tabs_bar = settings.create_action("tabs-bar");
-  application.add_action(show_tabs_bar);
+  application.add_action(settings.create_action("tabs-bar"));
+
+  application.add_action(settings.create_action("tabs-sidebar"));
 }

src/ViewTabs.blp

@@ -92,12 +92,29 @@ Adw.ToolbarView view_tabs {
         visible: false;
       }
 
-      Adw.TabView tab_view {
-        hexpand: true;
-        vexpand: true;
-        shortcuts: all_shortcuts;
+      Box {
+        Box sidebar {
+          visible: false;
+          Gtk.ScrolledWindow {
+            width-request: 200;
+            hscrollbar-policy: never;
+
+            Gtk.ListBox list_box {
+              selection-mode: browse;
+            }
+          }
+
+          Gtk.Separator {}
+        }
+
+        Adw.TabView tab_view {
+          hexpand: true;
+          vexpand: true;
+          shortcuts: all_shortcuts;
+        }
       }
     };
+
   }
 
   [bottom]
@@ -160,9 +177,16 @@ Adw.ToolbarView view_tabs {
 }
 
 menu menu_app {
-  item {
-    label: _("Show Tabs Bar");
-    action: "app.tabs-bar";
+  section {
+    item {
+      label: _("Show Tabs Bar");
+      action: "app.tabs-bar";
+    }
+
+    item {
+      label: _("Show Tabs Sidebar");
+      action: "app.tabs-sidebar";
+    }
   }
 
   section {

src/ViewTabs.js

@@ -88,6 +88,8 @@ export function ViewTabs({
     null,
   );
 
+  setupTabs({ builder, settings });
+
   function setupHeaderbar(is_handheld) {
     view_tabs.reveal_bottom_bars = is_handheld;
     view_tabs.reveal_top_bars = !is_handheld;
@@ -150,3 +152,62 @@ export function ViewTabs({
 
   return { tabs };
 }
+
+function setupTabs({ builder, settings }) {
+  const list_box = builder.get_object("list_box");
+  const tab_view = builder.get_object("tab_view");
+  const sidebar = builder.get_object("sidebar");
+
+  settings.bind(
+    "tabs-sidebar",
+    sidebar,
+    "visible",
+    Gio.SettingsBindFlags.DEFAULT,
+  );
+
+  tab_view.connect("notify::n-pages", (self) => {
+    sidebar.visible =
+      settings.get_boolean("tabs-sidebar") && tab_view["n-pages"] > 1;
+  });
+
+  // Create a binding between the Gtk.ListBox and the Adw.TabView
+
+  list_box.bind_model(
+    tab_view.pages,
+    // This function will be called for every new Adw.TabPage
+    (tab_page) => {
+      return buildTabRow(tab_page);
+    },
+  );
+
+  list_box.connect("row-selected", (self, row) => {
+    tab_view.set_selected_page(row.tab_page);
+  });
+
+  tab_view.connect("notify::selected-page", (self, page) => {
+    list_box.select_row(tab_view.selected_page.list_box_row);
+  });
+}
+
+function buildTabRow(tab_page) {
+  const list_box_row = new Gtk.ListBoxRow({
+    selectable: true,
+    height_request: 40,
+  });
+  list_box_row.tab_page = tab_page;
+  const label = new Gtk.Label({
+    halign: Gtk.Align.START,
+  });
+  list_box_row.set_child(label);
+
+  tab_page.list_box_row = list_box_row;
+
+  tab_page.bind_property(
+    "title",
+    label,
+    "label",
+    GObject.BindingFlags.SYNC_CREATE,
+  );
+
+  return list_box_row;
+}