fix crop

Author: arcbtc

.github/workflows/deploy-pages.yml

@@ -31,7 +31,7 @@ jobs:
       - run: npm run build
         env:
           BASE_PATH: ''
-      - run: cp build/index.html build/404.html
+      - run: cp build/200.html build/404.html
       - run: touch build/.nojekyll
       - uses: actions/upload-pages-artifact@v3
         with:

electron/main.cjs

@@ -245,6 +245,10 @@ function registerNotificationHandlers() {
   });
 }
 
+function registerAppInfoHandlers() {
+  ipcMain.handle('app-info:version', () => app.getVersion());
+}
+
 async function uploadToNostrBuild(payload) {
   const authorization = typeof payload?.authorization === 'string' ? payload.authorization : '';
   const mediaType = ['avatar', 'banner', 'media'].includes(payload?.mediaType) ? payload.mediaType : 'media';
@@ -313,6 +317,7 @@ if (!gotSingleInstanceLock) {
   });
 
   app.whenReady().then(() => {
+    registerAppInfoHandlers();
     registerSecureSessionHandlers();
     registerUploadHandlers();
     registerNotificationHandlers();

electron/preload.cjs

@@ -15,3 +15,7 @@ contextBridge.exposeInMainWorld('nostrDesktopNotifications', {
   isAvailable: () => ipcRenderer.invoke('notification:available'),
   show: (payload) => ipcRenderer.invoke('notification:show', payload)
 });
+
+contextBridge.exposeInMainWorld('nostrDesktopApp', {
+  version: () => ipcRenderer.invoke('app-info:version')
+});

src/app.d.ts

@@ -23,6 +23,9 @@ declare global {
       isAvailable(): Promise<boolean>;
       show(payload: { title: string; body: string; route: string }): Promise<boolean>;
     };
+    nostrDesktopApp?: {
+      version(): Promise<string>;
+    };
     nostr?: {
       getPublicKey(): Promise<string>;
       signEvent(event: Record<string, unknown>): Promise<Record<string, unknown>>;

src/lib/components/ImageCropDialog.svelte

@@ -206,28 +206,35 @@
           cropImageNaturalHeight = cropImageElement.naturalHeight;
           resetCrop();
         }}
+        on:error={() => {
+          cropImageNaturalWidth = 0;
+          cropImageNaturalHeight = 0;
+          error = 'Could not read this image. Try saving it as a JPEG or PNG first.';
+        }}
       />
-      <div
-        class="crop-box"
-        style={cropBoxStyle}
-        role="presentation"
-        on:pointerdown={startCropDrag}
-        on:pointermove={dragCrop}
-        on:pointerup={stopCropDrag}
-        on:pointercancel={stopCropDrag}
-      >
-        {#each cropResizeHandles as handle}
-          <button
-            type="button"
-            class={`crop-handle ${handle}`}
-            aria-label={`Resize crop ${handle}`}
-            on:pointerdown={(event) => startCropResize(event, handle)}
-            on:pointermove={resizeCrop}
-            on:pointerup={stopCropResize}
-            on:pointercancel={stopCropResize}
-          ></button>
-        {/each}
-      </div>
+      {#if cropImageNaturalWidth && cropImageNaturalHeight}
+        <div
+          class="crop-box"
+          style={cropBoxStyle}
+          role="presentation"
+          on:pointerdown={startCropDrag}
+          on:pointermove={dragCrop}
+          on:pointerup={stopCropDrag}
+          on:pointercancel={stopCropDrag}
+        >
+          {#each cropResizeHandles as handle}
+            <button
+              type="button"
+              class={`crop-handle ${handle}`}
+              aria-label={`Resize crop ${handle}`}
+              on:pointerdown={(event) => startCropResize(event, handle)}
+              on:pointermove={resizeCrop}
+              on:pointerup={stopCropResize}
+              on:pointercancel={stopCropResize}
+            ></button>
+          {/each}
+        </div>
+      {/if}
     </div>
     <div class="crop-controls">
       <span>Drag the edges or corners to crop.</span>

src/lib/components/RightRail.svelte

@@ -27,11 +27,13 @@
   let installed = false;
   let installBusy = false;
   let installDialogOpen = false;
+  let desktopAppVersion = '';
 
   $: showInstallButton = !installed;
 
   onMount(() => {
     installed = isStandalone();
+    void loadDesktopAppVersion();
     const beforeInstallPrompt = (event: Event) => {
       event.preventDefault();
       installPrompt = event as BeforeInstallPromptEvent;
@@ -72,6 +74,10 @@
   function isStandalone() {
     return window.matchMedia('(display-mode: standalone)').matches || window.matchMedia('(display-mode: window-controls-overlay)').matches;
   }
+
+  async function loadDesktopAppVersion() {
+    desktopAppVersion = (await window.nostrDesktopApp?.version().catch(() => '')) ?? '';
+  }
 </script>
 
 <aside class="rail" class:collapsed>
@@ -112,6 +118,10 @@
       </section>
 
     {/if}
+
+    {#if desktopAppVersion}
+      <div class="desktop-version">v{desktopAppVersion}</div>
+    {/if}
   {/if}
 </aside>
 

src/styles.css

@@ -1394,6 +1394,14 @@ label span, label strong { color: var(--text); }
 }
 .rail .panel { box-shadow: none; }
 .rail .panel > button { width: 100%; justify-content: flex-start; margin-top: 8px; }
+.desktop-version {
+  justify-self: end;
+  margin-top: -4px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+}
 .desktop-install-dialog .dialog-head {
   align-items: start;
 }
@@ -1647,6 +1655,7 @@ label span, label strong { color: var(--text); }
 .crop-frame {
   position: relative;
   width: 100%;
+  aspect-ratio: 1 / 1;
   max-height: min(62svh, 640px);
   overflow: hidden;
   border: 1px solid var(--line);