feat: render asset path (#13873)

render asset path

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -345,7 +345,6 @@
       </Portal>
     {/if}
 
-    {#if asset.exifInfo?.fileSizeInByte}
     <div class="flex gap-4 py-4">
       <div><Icon path={mdiImageOutline} size="24" /></div>
 
@@ -362,26 +361,29 @@
             />
           {/if}
         </p>
+        {#if showAssetPath}
+          <p class="text-xs opacity-50 break-all pb-2" transition:slide={{ duration: 250 }}>
+            {asset.originalPath}
+          </p>
+        {/if}
+        {#if (asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth) || asset.exifInfo?.fileSizeInByte}
           <div class="flex gap-2 text-sm">
-            {#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
+            {#if asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth}
               {#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
                 <p>
                   {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
                 </p>
-              {/if}
                 {@const { width, height } = getDimensions(asset.exifInfo)}
                 <p>{width} x {height}</p>
               {/if}
+            {/if}
+            {#if asset.exifInfo?.fileSizeInByte}
               <p>{getByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
+            {/if}
           </div>
-          {#if showAssetPath}
-            <p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>
-              {asset.originalPath}
-            </p>
         {/if}
       </div>
     </div>
-    {/if}
 
     {#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.fNumber}
       <div class="flex gap-4 py-4">