ci: updated docker building and publishing workflow using ga

Signed-off-by: Varun Raj <mailme@varunraj.in>

Author: varun-raj

.github/workflows/docker-release.yml

@@ -0,0 +1,37 @@
+name: Docker Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract version from tag
+        id: extract_version
+        run: |
+          VERSION=${GITHUB_REF#refs/tags/}
+          VERSION=${VERSION#v}
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      - name: Build and push Docker image
+        run: |
+          docker buildx build --build-arg VERSION=${{ env.VERSION }} \
+          --platform linux/amd64,linux/arm64 \
+          --push -t varunraj/immich-power-tools:${{ env.VERSION }} \
+          -t varunraj/immich-power-tools:latest .

package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-power-tools",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/albums/potential-albums/PotentialAlbumsAssets.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import Lightbox from "yet-another-react-lightbox";
 import Captions from "yet-another-react-lightbox/plugins/captions";
+import { CalendarArrowDown, CalendarArrowUp, Hourglass } from "lucide-react";
 
 export default function PotentialAlbumsAssets() {
   const { startDate, selectedIds, assets, updateContext } = usePotentialAlbumContext();
@@ -64,6 +65,22 @@ export default function PotentialAlbumsAssets() {
     if (startDate) fetchAssets();
   }, [startDate]);
 
+  if (loading) return (
+    <div className="flex flex-col gap-2 h-full justify-center items-center w-full">
+      <Hourglass />
+      <p className="text-lg">Loading...</p>
+    </div>
+  )
+
+  if (!startDate) return (
+    <div className="flex flex-col gap-2 h-full justify-center items-center w-full">
+      <CalendarArrowUp />
+      <p className="text-lg">Please select a date</p>
+      <p className="text-sm">
+        When you select a date from the left, you will see all the orphan assets captured on that date
+      </p>
+    </div>
+  )
   return (
     <>
       <Lightbox