- fix all eslint errors /warnings

- change paths, that now require async routes in the code flow
- add LoadingPanoItem, that shows up, before an item is loaded

rollup.config.mjs

@@ -40,6 +40,7 @@ const importsGeneral = {
   '@girs/gnome-shell/dist/ui/modalDialog': { name: 'resource://EXT_ROOT/ui/modalDialog.js' },
   '@girs/gnome-shell/dist/ui/popupMenu': { name: 'resource://EXT_ROOT/ui/popupMenu.js' },
   '@girs/gnome-shell/dist/ui/panelMenu': { name: 'resource://EXT_ROOT/ui/panelMenu.js' },
+  '@girs/gnome-shell/dist/ui/animation': { name: 'resource://EXT_ROOT/ui/animation.js' },
   //compatibility imports
   '@girs/gnome-shell-45/dist/ui/messageTray': { name: 'resource://EXT_ROOT/ui/messageTray.js' },
 };

src/components/codePanoItem.ts

@@ -11,11 +11,9 @@ import { registerGObjectClass } from '@pano/utils/gjs';
 export class CodePanoItem extends PanoItem {
   private codeItemSettings: Gio.Settings;
   private label: St.Label;
-  private language: string;
 
-  constructor(ext: PanoExtension, clipboardManager: ClipboardManager, dbItem: DBItem, language: string) {
+  constructor(ext: PanoExtension, clipboardManager: ClipboardManager, dbItem: DBItem, markup: string) {
     super(ext, clipboardManager, dbItem);
-    this.language = language;
     this.codeItemSettings = this.settings.get_child('code-item');
 
     this.label = new St.Label({
@@ -26,30 +24,26 @@ export class CodePanoItem extends PanoItem {
     this.label.clutterText.ellipsize = Pango.EllipsizeMode.END;
     this.body.add_child(this.label);
     this.connect('activated', this.setClipboardContent.bind(this));
-    this.setStyle(ext);
+    this.setStyle(markup);
     this.codeItemSettings.connect('changed', () => {
-      this.setStyle.call(this, ext);
+      //TODO: do this is the scrollview, so that code items can be replaced by text items, if we disable the formatter
+
+      //TODO:debug if this get's fired when changing style of the highlighter, what happens here, if we change the selected highlighter
+      this.setStyle.call(this, 'TODO');
     });
   }
 
-  private setStyle(ext: PanoExtension) {
+  private setStyle(markup: string) {
     const headerBgColor = this.codeItemSettings.get_string('header-bg-color');
     const headerColor = this.codeItemSettings.get_string('header-color');
     const bodyBgColor = this.codeItemSettings.get_string('body-bg-color');
     const bodyFontFamily = this.codeItemSettings.get_string('body-font-family');
     const bodyFontSize = this.codeItemSettings.get_int('body-font-size');
-    const characterLength = this.codeItemSettings.get_int('char-length');
 
     this.header.set_style(`background-color: ${headerBgColor}; color: ${headerColor};`);
     this.body.set_style(`background-color: ${bodyBgColor}`);
     this.label.set_style(`font-size: ${bodyFontSize}px; font-family: ${bodyFontFamily};`);
 
-    const markup = ext.markdownDetector?.markupCode(this.language, this.dbItem.content.trim(), characterLength);
-
-    if (!markup) {
-      throw new Error("Couldn't generate markup");
-    }
-
     this.label.clutterText.set_markup(markup);
   }
 

src/components/indicator/settingsMenu.ts

@@ -51,12 +51,12 @@ export class SettingsMenu extends PanelMenuButton {
     this.ext = ext;
     this.onToggle = onToggle;
     this.settings = getCurrentExtensionSettings(this.ext);
-    const isInIncognito = this.settings.get_boolean('is-in-incognito');
+    const initialIsInIncognito = this.settings.get_boolean('is-in-incognito');
 
     this.icon = new St.Icon({
       gicon: Gio.icon_new_for_string(
         `${this.ext.path}/icons/hicolor/scalable/actions/${ICON_PACKS[this.settings.get_uint('icon-pack')]}-indicator${
-          isInIncognito ? '-incognito-symbolic' : '-symbolic'
+          initialIsInIncognito ? '-incognito-symbolic' : '-symbolic'
         }.svg`,
       ),
       styleClass: 'system-status-icon indicator-icon',

src/components/loadingPanoItem.ts

@@ -0,0 +1,58 @@
+import Clutter from '@girs/clutter-14';
+import * as Animation from '@girs/gnome-shell/dist/ui/animation';
+import GObject from '@girs/gobject-2.0';
+import Graphene from '@girs/graphene-1.0';
+import St from '@girs/st-14';
+import type { DBItem } from '@pano/utils/db';
+import { registerGObjectClass, SignalsDefinition } from '@pano/utils/gjs';
+
+export type LoadingPanoItemSignalType = 'activated';
+
+interface LoadingPanoItemSignals extends SignalsDefinition<LoadingPanoItemSignalType> {
+  activated: Record<string, never>;
+}
+
+@registerGObjectClass
+export class LoadingPanoItem extends St.BoxLayout {
+  static metaInfo: GObject.MetaInfo<Record<string, never>, Record<string, never>, LoadingPanoItemSignals> = {
+    GTypeName: 'LoadingPanoItem',
+    Signals: {
+      activated: {},
+    },
+  };
+
+  readonly dbItem: DBItem;
+
+  constructor(dbItem: DBItem) {
+    super({
+      name: 'loading-pano-item',
+      visible: true,
+      pivotPoint: Graphene.Point.alloc().init(0.5, 0.5),
+      reactive: true,
+      styleClass: 'loading-pano-item',
+      vertical: true,
+      trackHover: true,
+    });
+
+    this.dbItem = dbItem;
+
+    //TODO
+    //@ts-expect-error
+    const spinner: Clutter.Actor = new Animation.Spinner(32, { animate: true });
+
+    const spinnerContainer = new St.Bin({
+      yExpand: true,
+      xExpand: true,
+      child: spinner,
+    });
+
+    this.add_child(spinnerContainer);
+
+    //@ts-expect-error
+    spinner.play();
+
+    this.connect('activated', () => {
+      //do nothing
+    });
+  }
+}

src/components/panoScrollView.ts

@@ -6,6 +6,7 @@ import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInte
 import GObject from '@girs/gobject-2.0';
 import Shell from '@girs/shell-14';
 import St from '@girs/st-14';
+import { LoadingPanoItem } from '@pano/components/loadingPanoItem';
 import { PanoItem } from '@pano/components/panoItem';
 import { SearchBox } from '@pano/components/searchBox';
 import type PanoExtension from '@pano/extension';
@@ -36,6 +37,8 @@ interface PanoScrollViewSignals extends SignalsDefinition<PanoScrollViewSignalTy
 
 //TODO: the list member of St.BoxLayout are of type Clutter.Actor and we have to cast constantly from PanoItem to Clutter.Actor and reverse, fix that somehow
 
+type Child = PanoItem | LoadingPanoItem;
+
 @registerGObjectClass
 export class PanoScrollView extends St.ScrollView {
   static metaInfo: GObject.MetaInfo<Record<string, never>, Record<string, never>, PanoScrollViewSignals> = {
@@ -58,7 +61,7 @@ export class PanoScrollView extends St.ScrollView {
 
   private list: St.BoxLayout;
   private settings: Gio.Settings;
-  private currentFocus: PanoItem | null = null;
+  private currentFocus: Child | null = null;
   private currentFilter: string | null = null;
   private currentItemTypeFilter: ItemType | null = null;
   private showFavorites: boolean | null = null;
@@ -132,7 +135,7 @@ export class PanoScrollView extends St.ScrollView {
         return Clutter.EVENT_PROPAGATE;
       }
 
-      if (event.get_key_symbol() == Clutter.KEY_BackSpace) {
+      if (event.get_key_symbol() === Clutter.KEY_BackSpace) {
         this.emit('scroll-backspace-press');
         return Clutter.EVENT_STOP;
       }
@@ -146,21 +149,30 @@ export class PanoScrollView extends St.ScrollView {
       return Clutter.EVENT_STOP;
     });
 
-    db.query(new ClipboardQueryBuilder().build()).forEach((dbItem) => {
-      const panoItem = createPanoItemFromDb(ext, this.clipboardManager, dbItem);
-      if (panoItem) {
-        panoItem.connect('motion-event', () => {
-          if (this.isHovering(this.searchBox)) {
-            this.searchBox.focus();
-          }
-        });
-        this.connectOnRemove(panoItem);
-        this.connectOnFavorite(panoItem);
-        this.list.add_child(panoItem);
-      }
-    });
+    const items = db.query(new ClipboardQueryBuilder().build());
+
+    for (let index = 0; index < items.length; ++index) {
+      const dbItem = items[index]!;
+      const panoItem = new LoadingPanoItem(dbItem);
+
+      this.list.add_child(panoItem);
+
+      //TODO: this doesn't work atm, fix it!
+      void createPanoItemFromDb(ext, this.clipboardManager, dbItem).then((newItem) => {
+        if (newItem) {
+          panoItem.connect('motion-event', () => {
+            if (this.isHovering(this.searchBox)) {
+              this.searchBox.focus();
+            }
+          });
+          this.connectOnRemove(newItem);
+          this.connectOnFavorite(newItem);
+          this.list.set_child_at_index(newItem, index);
+        }
+      });
+    }
 
-    const firstItem = this.list.get_first_child() as PanoItem | null;
+    const firstItem = this.list.get_first_child() as Child | null;
     if (firstItem !== null) {
       firstItem.emit('activated');
     }
@@ -240,20 +252,20 @@ export class PanoScrollView extends St.ScrollView {
     });
   }
 
-  private removeItem(item: PanoItem) {
+  private removeItem(item: Child) {
     item.hide();
     this.list.remove_child(item);
   }
 
-  private getItem(panoItem: PanoItem): PanoItem | undefined {
+  private getItem(panoItem: Child): Child | undefined {
     return this.getItems().find((item) => item.dbItem.id === panoItem.dbItem.id);
   }
 
-  private getItems(): PanoItem[] {
-    return this.list.get_children() as PanoItem[];
+  private getItems(): Child[] {
+    return this.list.get_children() as Child[];
   }
 
-  private getVisibleItems(): PanoItem[] {
+  private getVisibleItems(): Child[] {
     return this.getItems().filter((item) => item.is_visible());
   }
 
@@ -413,7 +425,7 @@ export class PanoScrollView extends St.ScrollView {
     this.emit('scroll-focus-out');
   }
 
-  private scrollToItem(item: PanoItem) {
+  private scrollToItem(item: Child) {
     const box = item.get_allocation_box();
 
     let adjustment: St.Adjustment | undefined;

src/components/searchBox.ts

@@ -93,7 +93,7 @@ export class SearchBox extends St.BoxLayout {
       this.emitSearchTextChange();
     });
 
-    this.search.clutterText.connect('key-press-event', (_: St.Entry, event: Clutter.Event) => {
+    this.search.clutterText.connect('key-press-event', (_entry: St.Entry, event: Clutter.Event) => {
       if (
         event.get_key_symbol() === Clutter.KEY_Down ||
         (event.get_key_symbol() === Clutter.KEY_Right &&
@@ -190,7 +190,7 @@ export class SearchBox extends St.BoxLayout {
     }
 
     this.settings.connect('changed::icon-pack', () => {
-      if (null == this.currentIndex) {
+      if (this.currentIndex === null) {
         this.search.set_primary_icon(this.createSearchEntryIcon('edit-find-symbolic', 'search-entry-icon'));
       } else {
         this.search.set_primary_icon(

src/prefs/customization/codeItemStyle.ts

@@ -126,15 +126,15 @@ export class CodeItemStyleRow extends ItemExpanderRow {
 
   private onEnabledChanged(_enabled: boolean): void {
     this.scan();
-    //TODOD: recreate those items, which where classified as text previosuly (check if the were created with the correct highliter)
+    //TODOD: recreate those items, which where classified as text previously (check if the were created with the correct highlighter)
   }
 
   private refreshCallback(): void {
     this.scan();
   }
 
-  private onCodeHighlighterChanged(name: string): void {
-    this.markdownDetector?.detectHighlighter(name);
+  private async onCodeHighlighterChanged(name: string): Promise<void> {
+    await this.markdownDetector?.detectHighlighter(name);
     this.scan();
   }
 
@@ -146,18 +146,18 @@ export class CodeItemStyleRow extends ItemExpanderRow {
       }
     };
 
-    const value = this.settings.get_uint(PangoMarkdown.codeHighlighterKey);
-    const stringValue = this.codeHighlighterOptions[value];
+    const initialCodeHighlighter = this.settings.get_uint(PangoMarkdown.codeHighlighterKey);
+    const initialCodeHighlighterValue = this.codeHighlighterOptions[initialCodeHighlighter];
 
     if (!this.markdownDetector) {
-      this.markdownDetector = new PangoMarkdown(stringValue);
+      this.markdownDetector = new PangoMarkdown(initialCodeHighlighterValue);
     }
 
     let enablingPossible = true;
 
     const currentHighlighter = this.markdownDetector.currentHighlighter;
 
-    if (this.markdownDetector.detectedHighlighter.length == 0 || currentHighlighter === null) {
+    if (this.markdownDetector.detectedHighlighter.length === 0 || currentHighlighter === null) {
       enablingPossible = false;
     }
 
@@ -169,7 +169,7 @@ export class CodeItemStyleRow extends ItemExpanderRow {
       // make all rows in-sensitive, except the enable row, if enabling is possible
       this.enableProperties[0].sensitive = true;
       this.enableProperties[1].sensitive = enablingPossible;
-      this.enableProperties[2].sensitive = enablingPossible && defaultValueForEnabled != isEnabled;
+      this.enableProperties[2].sensitive = enablingPossible && defaultValueForEnabled !== isEnabled;
       this.enableProperties[3]?.set_sensitive(true);
 
       for (const row of this.rows) {
@@ -208,7 +208,7 @@ export class CodeItemStyleRow extends ItemExpanderRow {
     // make all rows sensitive, so that things can be changed
     this.enableProperties[0].sensitive = true;
     this.enableProperties[1].sensitive = true;
-    this.enableProperties[2].sensitive = defaultValueForEnabled != isEnabled;
+    this.enableProperties[2].sensitive = defaultValueForEnabled !== isEnabled;
     this.enableProperties[3]?.set_sensitive(true);
 
     for (const row of this.rows) {
@@ -233,12 +233,12 @@ export class CodeItemStyleRow extends ItemExpanderRow {
       return record[key];
     };
 
-    const setValueFor = <T>(key: string, value: T | undefined): void => {
+    const setValueFor = <T>(key: string, val: T | undefined): void => {
       const record: Record<string, T> = JSON.parse(currentHighlighter!.options);
-      if (value === undefined) {
+      if (val === undefined) {
         delete record[key];
       } else {
-        record[key] = value;
+        record[key] = val;
       }
 
       const stringified = JSON.stringify(record);
@@ -284,9 +284,9 @@ export class CodeItemStyleRow extends ItemExpanderRow {
         return index >= 0 ? index : 0;
       };
 
-      const value = getValueFor<string>(key);
+      const initialValue = getValueFor<string>(key);
 
-      dropDown.set_selected(getIndexFor(value));
+      dropDown.set_selected(getIndexFor(initialValue));
 
       dropDown.connect('notify::selected', () => {
         setValueFor<string>(key, options[dropDown.get_selected()]!);
@@ -301,7 +301,7 @@ export class CodeItemStyleRow extends ItemExpanderRow {
         halign: Gtk4.Align.CENTER,
       });
 
-      if (defaultValue === value) {
+      if (defaultValue === initialCodeHighlighterValue) {
         clearButton.sensitive = false;
       }
 

src/prefs/customization/itemExpanderRow.ts

@@ -18,9 +18,9 @@ export class ItemExpanderRow extends Adw.ExpanderRow {
 
     this.extensionSettings = getCurrentExtensionSettings(ext);
 
-    const iconPack = this.extensionSettings.get_uint('icon-pack');
+    const initialIconPack = this.extensionSettings.get_uint('icon-pack');
 
-    const image = Gtk4.Image.new_from_icon_name(`${ICON_PACKS[iconPack]}-${iconName}`);
+    const image = Gtk4.Image.new_from_icon_name(`${ICON_PACKS[initialIconPack]}-${iconName}`);
 
     this.extensionSettings.connect('changed::icon-pack', () => {
       const iconPack = this.extensionSettings.get_uint('icon-pack');