- remove the loadingPanoItem and deal with the async highlighting in …

…another way:

 make an not highlighted version of the code item, and after the highlighting returns, set the correct markdown
 - type metaData of all items explicitly with new TS wrapper methods to JSOn.parse and JSON.stringify

rollup.config.mjs

@@ -40,7 +40,6 @@ 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

@@ -12,7 +12,7 @@ export class CodePanoItem extends PanoItem {
   private codeItemSettings: Gio.Settings;
   private label: St.Label;
 
-  constructor(ext: PanoExtension, clipboardManager: ClipboardManager, dbItem: DBItem, markup: string) {
+  constructor(ext: PanoExtension, clipboardManager: ClipboardManager, dbItem: DBItem, markdown: string) {
     super(ext, clipboardManager, dbItem);
     this.codeItemSettings = this.settings.get_child('code-item');
 
@@ -24,16 +24,16 @@ 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(markup);
+    this.setMarkDown(markdown);
     this.codeItemSettings.connect('changed', () => {
       //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');
+      this.setMarkDown.call(this, 'TODO');
     });
   }
 
-  private setStyle(markup: string) {
+  public setMarkDown(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');

src/components/filePanoItem.ts

@@ -5,8 +5,9 @@ import Pango from '@girs/pango-1.0';
 import St from '@girs/st-14';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType, FileOperation } from '@pano/utils/clipboardManager';
-import { DBItem } from '@pano/utils/db';
+import { DBItem, type FileContentList } from '@pano/utils/db';
 import { registerGObjectClass } from '@pano/utils/gjs';
+import { safeParse } from '@pano/utils/shell';
 
 @registerGObjectClass
 export class FilePanoItem extends PanoItem {
@@ -17,7 +18,7 @@ export class FilePanoItem extends PanoItem {
   constructor(ext: ExtensionBase, clipboardManager: ClipboardManager, dbItem: DBItem) {
     super(ext, clipboardManager, dbItem);
 
-    this.fileList = JSON.parse(this.dbItem.content);
+    this.fileList = safeParse<FileContentList>(this.dbItem.content, []);
     this.operation = this.dbItem.metaData || 'copy';
 
     this.body.add_style_class_name('pano-item-body-file');

src/components/imagePanoItem.ts

@@ -4,9 +4,9 @@ import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInte
 import St from '@girs/st-14';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType } from '@pano/utils/clipboardManager';
-import { DBItem } from '@pano/utils/db';
+import { DBItem, type ImageMetaData } from '@pano/utils/db';
 import { registerGObjectClass } from '@pano/utils/gjs';
-import { getImagesPath } from '@pano/utils/shell';
+import { getImagesPath, safeParse } from '@pano/utils/shell';
 import prettyBytes from 'pretty-bytes';
 
 const NO_IMAGE_FOUND_FILE_NAME = 'no-image-found.svg';
@@ -30,9 +30,11 @@ export class ImagePanoItem extends PanoItem {
 
     this.imageItemSettings = this.settings.get_child('image-item');
 
-    const { width, height, size }: { width: number; height: number; size: number } = JSON.parse(
-      dbItem.metaData || '{}',
-    );
+    const { width, height, size } = safeParse<ImageMetaData>(dbItem.metaData || '{}', {
+      width: undefined,
+      height: undefined,
+      size: undefined,
+    });
 
     this.metaContainer = new St.BoxLayout({
       styleClass: 'pano-item-body-meta-container',
@@ -81,7 +83,7 @@ export class ImagePanoItem extends PanoItem {
       styleClass: 'pano-item-body-image-meta-title',
     });
     this.sizeValue = new St.Label({
-      text: prettyBytes(size),
+      text: prettyBytes(size ?? 0),
       xAlign: Clutter.ActorAlign.END,
       xExpand: false,
       styleClass: 'pano-item-body-image-meta-value',

src/components/linkPanoItem.ts

@@ -5,9 +5,9 @@ import type { ExtensionBase } from '@girs/gnome-shell/dist/extensions/sharedInte
 import St from '@girs/st-14';
 import { PanoItem } from '@pano/components/panoItem';
 import { ClipboardContent, ClipboardManager, ContentType } from '@pano/utils/clipboardManager';
-import { DBItem } from '@pano/utils/db';
+import { DBItem, type LinkMetaData } from '@pano/utils/db';
 import { registerGObjectClass } from '@pano/utils/gjs';
-import { getCachePath, gettext, openLinkInBrowser } from '@pano/utils/shell';
+import { getCachePath, gettext, openLinkInBrowser, safeParse } from '@pano/utils/shell';
 
 const DEFAULT_LINK_PREVIEW_IMAGE_NAME = 'link-preview.svg';
 
@@ -24,7 +24,10 @@ export class LinkPanoItem extends PanoItem {
     const _ = gettext(ext);
     this.linkItemSettings = this.settings.get_child('link-item');
 
-    const { title, description, image } = JSON.parse(dbItem.metaData || '{"title": "", "description": ""}');
+    const { title, description, image } = safeParse<LinkMetaData>(
+      dbItem.metaData || '{"title": "", "description": ""}',
+      { title: '', description: '', image: undefined },
+    );
     let titleText: string = title;
     let descriptionText: string = description;
 

src/components/panoItem.ts

@@ -12,7 +12,7 @@ import { ClipboardManager } from '@pano/utils/clipboardManager';
 import { DBItem } from '@pano/utils/db';
 import { registerGObjectClass, SignalRepresentationType, SignalsDefinition } from '@pano/utils/gjs';
 import { getPanoItemTypes } from '@pano/utils/panoItemType';
-import { getCurrentExtensionSettings } from '@pano/utils/shell';
+import { getCurrentExtensionSettings, stringify } from '@pano/utils/shell';
 import { getVirtualKeyboard, WINDOW_POSITIONS } from '@pano/utils/ui';
 
 export type PanoItemSignalType = 'on-remove' | 'on-favorite' | 'activated';
@@ -122,13 +122,13 @@ export class PanoItem extends St.BoxLayout {
     this.header = new PanoItemHeader(ext, getPanoItemTypes(ext)[dbItem.itemType], dbItem.copyDate);
     this.header.setFavorite(this.dbItem.isFavorite);
     this.header.connect('on-remove', () => {
-      this.emit('on-remove', JSON.stringify(this.dbItem));
+      this.emit('on-remove', stringify<DBItem>(this.dbItem));
       return Clutter.EVENT_PROPAGATE;
     });
 
     this.header.connect('on-favorite', () => {
       this.dbItem = { ...this.dbItem, isFavorite: !this.dbItem.isFavorite };
-      this.emit('on-favorite', JSON.stringify(this.dbItem));
+      this.emit('on-favorite', stringify<DBItem>(this.dbItem));
       return Clutter.EVENT_PROPAGATE;
     });
 
@@ -199,15 +199,15 @@ export class PanoItem extends St.BoxLayout {
       return Clutter.EVENT_STOP;
     }
     if (event.get_key_symbol() === Clutter.KEY_Delete || event.get_key_symbol() === Clutter.KEY_KP_Delete) {
-      this.emit('on-remove', JSON.stringify(this.dbItem));
+      this.emit('on-remove', stringify<DBItem>(this.dbItem));
       return Clutter.EVENT_STOP;
     }
     if (
       (event.get_key_symbol() === Clutter.KEY_S || event.get_key_symbol() === Clutter.KEY_s) &&
       event.get_state() === Clutter.ModifierType.CONTROL_MASK
     ) {
       this.dbItem = { ...this.dbItem, isFavorite: !this.dbItem.isFavorite };
-      this.emit('on-favorite', JSON.stringify(this.dbItem));
+      this.emit('on-favorite', stringify<DBItem>(this.dbItem));
       return Clutter.EVENT_STOP;
     }
     return Clutter.EVENT_PROPAGATE;

src/components/panoScrollView.ts

@@ -6,7 +6,6 @@ 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';
@@ -37,8 +36,6 @@ 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> = {
@@ -61,7 +58,7 @@ export class PanoScrollView extends St.ScrollView {
 
   private list: St.BoxLayout;
   private settings: Gio.Settings;
-  private currentFocus: Child | null = null;
+  private currentFocus: PanoItem | null = null;
   private currentFilter: string | null = null;
   private currentItemTypeFilter: ItemType | null = null;
   private showFavorites: boolean | null = null;
@@ -149,30 +146,21 @@ export class PanoScrollView extends St.ScrollView {
       return Clutter.EVENT_STOP;
     });
 
-    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);
-        }
-      });
-    }
+    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 firstItem = this.list.get_first_child() as Child | null;
+    const firstItem = this.list.get_first_child() as PanoItem | null;
     if (firstItem !== null) {
       firstItem.emit('activated');
     }
@@ -252,20 +240,20 @@ export class PanoScrollView extends St.ScrollView {
     });
   }
 
-  private removeItem(item: Child) {
+  private removeItem(item: PanoItem) {
     item.hide();
     this.list.remove_child(item);
   }
 
-  private getItem(panoItem: Child): Child | undefined {
+  private getItem(panoItem: PanoItem): PanoItem | undefined {
     return this.getItems().find((item) => item.dbItem.id === panoItem.dbItem.id);
   }
 
-  private getItems(): Child[] {
-    return this.list.get_children() as Child[];
+  private getItems(): PanoItem[] {
+    return this.list.get_children() as PanoItem[];
   }
 
-  private getVisibleItems(): Child[] {
+  private getVisibleItems(): PanoItem[] {
     return this.getItems().filter((item) => item.is_visible());
   }
 
@@ -425,7 +413,7 @@ export class PanoScrollView extends St.ScrollView {
     this.emit('scroll-focus-out');
   }
 
-  private scrollToItem(item: Child) {
+  private scrollToItem(item: PanoItem) {
     const box = item.get_allocation_box();
 
     let adjustment: St.Adjustment | undefined;

src/prefs/customization/codeItemStyle.ts

@@ -13,7 +13,7 @@ import {
 import { registerGObjectClass } from '@pano/utils/gjs';
 import { PangoMarkdown } from '@pano/utils/pango';
 import { getPanoItemTypes } from '@pano/utils/panoItemType';
-import { getCurrentExtensionSettings, gettext, logger } from '@pano/utils/shell';
+import { getCurrentExtensionSettings, gettext, logger, safeParse, stringify } from '@pano/utils/shell';
 
 @registerGObjectClass
 export class CodeItemStyleRow extends ItemExpanderRow {
@@ -203,7 +203,7 @@ export class CodeItemStyleRow extends ItemExpanderRow {
     }
 
     //TODO: disable all items, that are not in  this.markdownDetector.detectedHighlighter
-    logger('TEST')(JSON.stringify(this.codeHighlighterDropDown.model.get_item(0)));
+    logger('TEST')(this.codeHighlighterDropDown.model.get_item(0)?.get_property(''));
 
     // make all rows sensitive, so that things can be changed
     this.enableProperties[0].sensitive = true;
@@ -229,19 +229,19 @@ export class CodeItemStyleRow extends ItemExpanderRow {
         currentHighlighter!.options = this.settings.get_string(schemaKey);
       }
 
-      const record: Record<string, T> = JSON.parse(currentHighlighter!.options);
+      const record = safeParse<Record<string, T | undefined>>(currentHighlighter!.options, { [key]: undefined });
       return record[key];
     };
 
     const setValueFor = <T>(key: string, val: T | undefined): void => {
-      const record: Record<string, T> = JSON.parse(currentHighlighter!.options);
+      const record = safeParse<Record<string, T>>(currentHighlighter!.options, {});
       if (val === undefined) {
         delete record[key];
       } else {
         record[key] = val;
       }
 
-      const stringified = JSON.stringify(record);
+      const stringified = stringify<Record<string, T>>(record);
 
       currentHighlighter!.options = stringified;
       this.settings.set_string(schemaKey, stringified);

src/styles/stylesheet.css

@@ -27,7 +27,7 @@
   color: #f6d32d;
 }
 
-.pano-item .loading-pano-item{
+.pano-item {
   border-radius: 11px;
   margin: 6px;
   border: 4px solid transparent;