fix: minor bugs, automatically show comments on pin if there are any

src/common/components/pin/bottom-bar/buttons/show-comment.button.ts

@@ -32,10 +32,13 @@ const elStyles = {
 export class ShowCommentButton implements HtmlComponent<HTMLElement> {
   private readonly el: HTMLDivElement;
 
-  private visible = false;
+  private visible: boolean;
+  private readonly showText = 'show comments';
+  private readonly hideText = 'hide comments';
 
   constructor(private edit: PinEditManager, model: PinEditModel) {
     this.el = model.doc.document.createElement('div');
+    this.visible = model.comments.data.length > 0;
   }
 
   cleanup(): void {
@@ -48,7 +51,7 @@ export class ShowCommentButton implements HtmlComponent<HTMLElement> {
 
   render(): HTMLElement {
     applyStylesToElement(this.el, elStyles);
-    this.el.innerText = 'show comments';
+    this.el.innerText = this.visible ? this.hideText : this.showText;
     this.el.addEventListener('click', this.handleClick);
     return this.el;
   }
@@ -57,10 +60,10 @@ export class ShowCommentButton implements HtmlComponent<HTMLElement> {
     this.visible = !this.visible;
     if (this.visible) {
       this.edit.showText();
-      this.el.innerText = 'hide comments';
+      this.el.innerText = this.hideText;
     } else {
       this.edit.hideText();
-      this.el.innerText = 'show comments';
+      this.el.innerText = this.showText;
     }
   };
 }

src/common/components/pin/draw/tool/fill.draw.ts

@@ -66,8 +66,7 @@ export class FillDraw {
         stack.push({ x: point.x, y: point.y - 1 });
       }
     }
-
-    const imData = new ImageData(pixelData, width, height);
+    const imData = new ImageData(new Uint8ClampedArray(pixelData), width, height);
     ctx.putImageData(imData, 0, 0);
 
     return [from];

src/common/components/pin/pin.component.ts

@@ -158,6 +158,8 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
       this.model.ref.style.border = this.doc.settings.borderStyle;
       this.model.ref.style.borderRadius = this.doc.settings.borderRadius;
     }
+
+    if (this.model.comments.data.length > 0) this.edit.showText();
   }
 
   resize = (): void => {

src/default-popup/components/account/login.component.tsx

@@ -46,8 +46,8 @@ interface Props {
 }
 
 export const LoginComponent: FunctionComponent<Props> = ({ loginSuccess }) => {
-  const [email, setEmail] = useState<string>('foobar5@example.local');
-  const [password, setPassword] = useState<string>('asdQWE123!@#');
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
   const [responseError, setResponseError] = useState<ServerErrorDto | undefined>(undefined);
 
   useEffect(() => {

src/default-popup/components/main/main-menu-list.component.tsx

@@ -61,8 +61,7 @@ export const MainMenuListComponent: FunctionComponent<Props> = (props) => {
       /* IGNORE */
     });
   }, []);
-  const handleSavePageClick = async () => {
-    await BrowserApi.sendTabMessage({ type: BusMessageType.POPUP_PAGE_SNAPSHOT_ADD, data: PopupActiveTabStore.url });
+  const handleSavePageClick = () => {
     props.closeListCallback(MainViewEnum.SAVE_PROGRESS);
   };
 

src/default-popup/components/save-page-progress/save-page-progress.component.tsx

@@ -16,10 +16,12 @@
  */
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import { PageComputeMessage, ContentProgressMessage } from '@pinmenote/page-compute';
-import { TinyDispatcher } from '@pinmenote/tiny-dispatcher';
-import Typography from '@mui/material/Typography';
+import { BrowserApi } from '@pinmenote/browser-api';
 import { BusMessageType } from '../../../common/model/bus.model';
 import { MainViewEnum } from '../component-model';
+import { PopupActiveTabStore } from '../../store/popup-active-tab.store';
+import { TinyDispatcher } from '@pinmenote/tiny-dispatcher';
+import Typography from '@mui/material/Typography';
 
 interface Props {
   closeListCallback: (viewType: MainViewEnum) => void;
@@ -58,6 +60,11 @@ export const SavePageProgressComponent: FunctionComponent<Props> = (props) => {
         ref.current.insertBefore(p, ref.current.firstChild);
       }
     );
+    BrowserApi.sendTabMessage({ type: BusMessageType.POPUP_PAGE_SNAPSHOT_ADD, data: PopupActiveTabStore.url }).catch(
+      () => {
+        /* IGNORE */
+      }
+    );
     return () => {
       dispatcher.removeListener(PageComputeMessage.CONTENT_SAVE_PROGRESS, saveKey);
     };

src/default-popup/store/popup-active-tab.store.ts

@@ -75,19 +75,22 @@ export class PopupActiveTabStore {
     }
   };
 
-  private static runtimeScriptTimeoutId = -1;
   private static checkRuntimeScript = async () => {
+    const start = Date.now();
+    let isOk = false;
     TinyDispatcher.getInstance().addListener(
       BusMessageType.CONTENT_PONG,
       () => {
-        LogManager.log('checkRuntimeScript->PONG');
-        clearTimeout(this.runtimeScriptTimeoutId);
+        LogManager.log(`checkRuntimeScript->PONG in ${Date.now() - start}`);
+        isOk = true;
       },
       true
     );
     await BrowserApi.sendTabMessage({ type: BusMessageType.CONTENT_PING });
-    this.runtimeScriptTimeoutId = window.setTimeout(() => {
+    setTimeout(() => {
+      if (isOk) return;
       this.isError = true;
+      LogManager.log(`checkRuntimeScript->TIMEOUT in ${Date.now() - start}`);
       TinyDispatcher.getInstance().dispatch<void>(BusMessageType.POP_UPDATE_URL);
     }, 500);
   };