added the search feature and change to the UI

prefs.js

@@ -178,6 +178,21 @@ export default class BurnMyWindowsPreferences extends ExtensionPreferences {
       });
     });
 
+    this._searchEntry = this._builder.get_object('search_entry');
+    this._searchEntry.connect('search-changed', () => {
+      const query = this._searchEntry.get_text().toLowerCase();
+
+      this._effectRows.forEach(er => {
+        if (query === '') {
+          er.show();  // Show all effects if query is empty
+        } else {
+          // Show or hide each effect based on query match
+          const showEffect = er.searchtext.toLowerCase().includes(query);
+          showEffect ? er.show() : er.hide();
+        }
+      });
+    });
+
     // Then add a preferences group for the effect expander rows.
     const group = this._builder.get_object('effects-group');
 
@@ -239,6 +254,9 @@ export default class BurnMyWindowsPreferences extends ExtensionPreferences {
           row.set_title(effect.getLabel());
         }
 
+        // this is the fix for the merge issue when an effect doesn't have a discription
+        row.searchtext = effect.getLabel() + effect?.description ?? '';
+
         // Un-expand any previously expanded effect row. This way we ensure that there
         // is only one expanded row at any time.
         if (hasPrefs) {

resources/ui/adw/prefs.ui

@@ -214,39 +214,91 @@ SPDX-License-Identifier: GPL-3.0-or-later
     </child>
   </object>
 
+
   <object class="AdwPreferencesPage" id="general-prefs">
+    <property name="margin-top">20</property>
+    <property name="margin-bottom">20</property>
+    <property name="margin-start">20</property>
+    <property name="margin-end">20</property>
+
     <child>
-      <object class="AdwPreferencesGroup" id="effects-group">
-        <property name="margin-top">20</property>
-        <property name="margin-bottom">20</property>
-        <property name="margin-start">20</property>
-        <property name="margin-end">20</property>
-        <property name="title" translatable="yes">Effect Selection</property>
-        <property name="description" translatable="yes">If multiple are selected, one is chosen randomly.</property>
-
-        <child type="header-suffix">
-          <object class="GtkBox">
-            <property name="valign">center</property>
-            <style>
-              <class name="linked" />
-            </style>
+      <object class="AdwPreferencesGroup" id="">
+
+        <child>
+          <object class="GtkGrid" id="selection-controls">
+            <property name="row-spacing">5</property>
+            <property name="column-spacing">5</property>
 
             <child>
-              <object class="GtkButton" id="choose-all-effects-button">
-                <property name="label" translatable="yes">All</property>
+              <object class="AdwPreferencesGroup" id="header-text">
+                <property name="title" translatable="yes">Effect Selection</property>
+                <property name="description" translatable="yes">If multiple are selected, one is chosen randomly.</property>
+                <layout>
+                  <property name="column">0</property>
+                  <property name="row">0</property>
+                  <property name="column-span">8</property>
+                </layout>
               </object>
             </child>
 
-            <child>
-              <object class="GtkButton" id="choose-no-effects-button">
-                <property name="label" translatable="yes">None</property>
-              </object>
-            </child>
+          <!-- Search Entry -->
+          <child>
+            <object class="GtkSearchEntry" id="search_entry">
+              <property name="placeholder-text">Search...</property>
+              <layout>
+                <property name="column">0</property>
+                <property name="row">1</property>
+                <property name="column-span">6</property>
+              </layout>
+            </object>
+          </child>
+
+
+          <child>
+            <object class="GtkBox">
+              <property name="orientation">horizontal</property>
+              <property name="hexpand">true</property>
+              <property name="homogeneous">true</property>
+              <layout>
+                <property name="column">6</property>
+                <property name="row">1</property>
+                <property name="column-span">2</property>
+              </layout>
+
+              <style>
+                <class name="linked" />
+              </style>
+
+              <child>
+                <object class="GtkButton" id="choose-all-effects-button">
+                  <property name="label" translatable="yes">Enable All</property>
+                </object>
+              </child>
+
+              <child>
+                <object class="GtkButton" id="choose-no-effects-button">
+                  <property name="label" translatable="yes">Disable All</property>
+                </object>
+              </child>
+
+            </object>
+          </child>
 
           </object>
         </child>
+
       </object>
     </child>
+
+    <child>
+      <object class="AdwPreferencesGroup" id="effects-group">
+        <property name="margin-top">10</property>
+        <property name="margin-bottom">0</property>
+        <property name="margin-start">0</property>
+        <property name="margin-end">0</property>
+      </object>
+    </child>
+
   </object>
 
 </interface>

src/effects/Apparition.js

@@ -27,6 +27,7 @@ const _ = await utils.importGettext();
 // This effect hides the actor by violently sucking it into the void of magic.          //
 //////////////////////////////////////////////////////////////////////////////////////////
 
+
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
@@ -80,6 +81,12 @@ export default class Effect {
     return _('Apparition');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Apparition effect makes the actor disappear by drawing it into a vortex-like void, accompanied by shaking, twirling, and suction animations to create a dramatic vanishing effect.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/BrokenGlass.js

@@ -138,6 +138,12 @@ export default class Effect {
     return _('Broken Glass');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Broken Glass effect shatters the window into independent shards, simulating a glass-breaking effect with pieces scaling, rotating, and moving as if blown away from a central epicenter. The shards can appear to break away from the cursor\'s position if enabled.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Doom.js

@@ -87,6 +87,12 @@ export default class Effect {
     return _('Doom');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Doom effect melts the window, creating a vertical, pixelated distortion inspired by the classic screen transitions of the original Doom game. The effect stretches and scales the window, giving it a liquefied appearance as it dissolves downward.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/EnergizeA.js

@@ -74,6 +74,12 @@ export default class Effect {
     return _('Energize A');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Energize A effect resembles the classic transporter effect from Star Trek: The Original Series, with a glowing color and scale transformation that creates an appearance of the window being transported or energized.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/EnergizeB.js

@@ -75,6 +75,12 @@ export default class Effect {
     return _('Energize B');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Energize B effect mimics the transporter effect from Star Trek: The Next Generation, with a smooth color glow and scale adjustment, creating an appearance of the window being energized or transported in a futuristic style.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Fire.js

@@ -96,6 +96,12 @@ export default class Effect {
     return _('Fire');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Fire effect adds a dynamic fire-like animation to the window, using a vertical noise shader to simulate flames with customizable color gradients and movement speed. This effect pays homage to the classic Compiz fire effect, with a modern implementation through shader techniques.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Focus.js

@@ -76,6 +76,12 @@ export default class Effect {
     return _('Focus');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Focus effect applies a blur to the window, simulating a depth-of-field look where the window gradually blurs to draw visual focus elsewhere. The effect has a customizable blur amount, creating an aesthetic softening of the window edges.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Glide.js

@@ -78,6 +78,12 @@ export default class Effect {
     return _('Glide');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Glide effect gently fades the window to transparency while adding a subtle 3D look through scale, squish, tilt, and shift transformations, creating a smooth, immersive transition.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Glitch.js

@@ -80,6 +80,12 @@ export default class Effect {
     return _('Glitch');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Glitch effect introduces visual distortions that mimic digital glitches, adding randomized color shifts, scaling, and jitter to create a dynamic, corrupted look for the window.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Hexagon.js

@@ -83,6 +83,12 @@ export default class Effect {
     return _('Hexagon');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Hexagon effect overlays a glowing hexagonal grid on the window, gradually shrinking each hexagon cell until the window is completely dissolved. The effect includes customizable line color, glow color, scale, and line width, adding a futuristic grid-based dissolution.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Incinerate.js

@@ -126,6 +126,12 @@ export default class Effect {
     return _('Incinerate');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Incinerate effect simulates a burning transition where flames consume the window, starting from a random edge or the mouse pointer position. This fiery effect includes customizable color, scale, and turbulence, creating a dramatic dissolve into ashes.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Matrix.js

@@ -109,6 +109,12 @@ export default class Effect {
     return _('Matrix');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Matrix effect overlays a cascading grid of random letters, mimicking the iconic \'Matrix\' code with customizable trail and tip colors, randomness, and letter size. The letters flow downward at variable speeds, creating a dynamic, glitchy animation reminiscent of digital rain.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/PaintBrush.js

@@ -101,6 +101,12 @@ export default class Effect {
     return _('Paint Brush');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Paint Brush effect overlays the window with thick brush strokes, giving it an artistic, hand-painted appearance. The brush size is customizable, adding a tactile, textured look reminiscent of painted canvas.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/PixelWheel.js

@@ -74,6 +74,12 @@ export default class Effect {
     return _('Pixel Wheel');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Pixel Wheel effect pixelates the window and gradually obscures it in a wheel-like pattern with customizable pixel size and spoke count, creating a unique radial fade-out transition.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/PixelWipe.js

@@ -100,6 +100,12 @@ export default class Effect {
     return _('Pixel Wipe');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Pixel Wipe effect pixelates the window and gradually hides pixels in a radial pattern starting from the mouse pointer position, offering a unique transition with a customizable pixel size.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Pixelate.js

@@ -74,6 +74,12 @@ export default class Effect {
     return _('Pixelate');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Pixelate effect transforms the window into a pixelated mosaic, gradually obscuring it by increasing pixel size and randomly hiding pixels until the window fully disappears. This effect offers a playful, retro-inspired transition.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/Portal.js

@@ -82,6 +82,12 @@ export default class Effect {
     return _('Portal');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Portal effect creates a swirling, colorful portal animation that teleports the window as if through an alternate dimension. With customizable color, rotation speed, and whirling details, it adds a whimsical, otherworldly transition reminiscent of sci-fi portals.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/SnapOfDisintegration.js

@@ -110,6 +110,11 @@ export default class Effect {
     return _('Snap of Disintegration');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The Snap of Disintegration effect dissolves the window into a cloud of dust particles, simulating a gradual disintegration. Using a layered dust texture, this effect creates the appearance of the window breaking apart into floating particles with customizable color and scale.';
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It

src/effects/TRexAttack.js

@@ -109,6 +109,12 @@ export default class Effect {
     return _('T-Rex Attack');
   }
 
+  // this can be used for searching, and helping people find the effect they are looking
+  // for
+  static description =
+    'The T-Rex Attack effect simulates a window being violently torn apart by claw scratches. With customizable claw size, color, and warp intensity, this effect creates a dramatic and ferocious attack animation, as if a T-Rex has ripped through the screen.';
+
+
   // -------------------------------------------------------------------- API for prefs.js
 
   // This is called by the preferences dialog whenever a new effect profile is loaded. It