Support gnome 40 and 41

.dir-locals.el

@@ -5,4 +5,6 @@
   (org-indent-mode . t))
  (js-mode
   (mode . gnome-shell))
+ (js2-mode
+  (js2-basic-offset . 4))
  )

KeybindingsComboRow.ui

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0" />
+  <template class="ComboRow" parent="GtkListBoxRow">
+    <property name="selectable">False</property>
+    <property name="activatable">True</property>
+    <property name="focusable">True</property>
+    <property name="focus-on-click">True</property>
+
+    <property name="child">
+      <object class="GtkStack" id="stack">
+        <child>
+          <object class="GtkStackPage">
+            <property name="child">
+              <object class="GtkBox" id="shortcutPage">
+                <property name="hexpand">True</property>
+                <property name="spacing">12</property>
+                <child>
+                  <object class="GtkShortcutLabel" id="shortcutLabel">
+                    <property name="disabled_text" translatable="yes">Disabled</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkMenuButton" id="conflictButton">
+                    <property name="tooltip_text" translatable="yes">Conflicts</property>
+                    <property name="icon_name">dialog-error-symbolic</property>
+                    <property name="popover">conflictPopover</property>
+                    <property name="visible">False</property>
+                    <style>
+                      <class name="flat" />
+                      <class name="circular" />
+                    </style>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkButton" id="deleteButton">
+                    <property name="hexpand">True</property>
+                    <property name="halign">end</property>
+                    <property name="tooltip_text" translatable="yes">Remove shortcut</property>
+                    <property name="icon_name">edit-clear-symbolic</property>
+                    <style>
+                      <class name="flat" />
+                      <class name="circular" />
+                    </style>
+                    <signal name="clicked" handler="_onDeleteButtonClicked" />
+                  </object>
+                </child>
+
+              </object>
+            </property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkStackPage">
+            <property name="child">
+              <object class="GtkLabel" id="placeholderPage">
+                <property name="hexpand">True</property>
+                <property name="xalign">0.0</property>
+                <property name="use_markup">True</property>
+                <property name="label" translatable="yes">&lt;i&gt;Add shortcut…&lt;/i&gt;</property>
+              </object>
+            </property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkStackPage">
+            <property name="child">
+              <object class="GtkLabel" id="editPage">
+                <property name="use_markup">True</property>
+                <property name="label" translatable="yes">Enter keyboard shortcut, &lt;b&gt;Backspace&lt;/b&gt; to delete or &lt;b&gt;Esc&lt;/b&gt; to cancel</property>
+              </object>
+            </property>
+          </object>
+        </child>
+      </object>
+    </property>
+  </template>
+
+  <object class="GtkPopover" id="conflictPopover">
+    <child>
+      <object class="GtkBox" id="about">
+        <property name="focusable">False</property>
+        <property name="orientation">vertical</property>
+        <property name="margin-start">12</property>
+        <property name="margin-end">12</property>
+        <property name="margin-top">12</property>
+        <property name="margin-bottom">12</property>
+        <property name="spacing">8</property>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="label" translatable="yes">Conflicts:</property>
+            <style>
+              <class name="heading" />
+            </style>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkListBox" id="conflictList">
+            <property name="selection-mode">none</property>
+            <signal name="row-activated"
+                    handler="_onConflictRowActivated" />
+
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

KeybindingsPane.ui

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="KeybindingsPane" parent="GtkBox">
+    <property name="focusable">False</property>
+    <property name="orientation">vertical</property>
+    <child>
+      <object class="GtkSearchEntry" id="search">
+        <property name="activates-default">False</property>
+        <property name="halign">center</property>
+        <property name="margin-top">12</property>
+        <signal name="search-changed"
+                handler="_onSearchChanged" />
+      </object>
+    </child>
+    <child>
+      <object class="GtkScrolledWindow">
+        <property name="hscrollbar_policy">never</property>
+        <child>
+          <object class="GtkViewport">
+            <property name="focusable">False</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkListBox" id="listbox">
+                <property name="hexpand">True</property>
+                <property name="margin_start">36</property>
+                <property name="margin_end">36</property>
+                <property name="margin_top">12</property>
+                <property name="margin_bottom">36</property>
+                <property name="width_request">480</property>
+                <style>
+                  <class name="keybindings" />
+                  <class name="frame" />
+                </style>
+                <signal name="row-activated"
+                        handler="_onRowActivated" />
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

KeybindingsRow.ui

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0" />
+  <template class="KeybindingsRow" parent="GtkListBoxRow">
+    <style>
+      <class name="keybinding" />
+    </style>
+    <property name="selectable">False</property>
+    <property name="activatable">True</property>
+    <property name="focusable">True</property>
+
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+
+        <child>
+          <object class="GtkBox" id="header">
+            <property name="spacing">12</property>
+            <style>
+              <class name="header" />
+            </style>
+
+            <child>
+              <object class="GtkLabel" id="descLabel">
+                <style>
+                  <class name="description" />
+                </style>
+                <property name="ellipsize">end</property>
+                <property name="halign">start</property>
+                <property name="lines">1</property>
+                <property name="wrap">True</property>
+                <property name="wrap-mode">word-char</property>
+                <property name="xalign">0</property>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkImage" id="conflictIcon">
+                <property name="visible">False</property>
+                <property name="icon-name">dialog-error-symbolic</property>
+                <property name="halign">start</property>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="accelLabel">
+                <property name="hexpand">True</property>
+                <property name="halign">end</property>
+                <property name="xalign">1.0</property>
+                <property name="use-markup">True</property>
+                <style>
+                  <class name="dim-label" />
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkRevealer" id="revealer">
+            <child>
+              <object class="GtkGrid">
+                <property name="hexpand">True</property>
+
+                <child>
+                  <object class="GtkListBox" id="comboList">
+                    <property name="activate-on-single-click">True</property>
+                    <property name="hexpand">True</property>
+                    <property name="selection-mode">none</property>
+                    <style>
+                      <class name="combos" />
+                    </style>
+                    <signal name="row-activated"
+                            handler="_onRowActivated" />
+                    <layout>
+                      <property name="row">0</property>
+                      <property name="column">0</property>
+                      <property name="column-span">2</property>
+                    </layout>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkButton" id="resetButton">
+                    <property name="label" translatable="yes">Reset</property>
+                    <property name="action-name">keybinding.reset</property>
+                    <property name="halign">start</property>
+                    <property name="margin-start">12px</property>
+                    <property name="margin-top">8px</property>
+                    <property name="margin-bottom">8px</property>
+                    <layout>
+                      <property name="row">1</property>
+                      <property name="column">0</property>
+                    </layout>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkButton" id="addButton">
+                    <property name="label" translatable="yes">Add shortcut…</property>
+                    <property name="action-name">keybinding.add</property>
+                    <property name="hexpand">True</property>
+                    <property name="halign">end</property>
+                    <property name="margin-top">8px</property>
+                    <property name="margin-end">12px</property>
+                    <property name="margin-bottom">8px</property>
+
+                    <layout>
+                      <property name="row">1</property>
+                      <property name="column">1</property>
+                    </layout>
+                    <style>
+                      <class name="suggested-action" />
+                    </style>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>