Display Docker image version in sidebar (#304)

Co-authored-by: Claude <noreply@anthropic.com>

Author: KMKoushik

.github/workflows/publish.yml

@@ -65,6 +65,8 @@ jobs:
           docker build \
             -f "$DOCKER_FILE" \
             --progress=plain \
+            --build-arg APP_VERSION="$APP_VERSION" \
+            --build-arg GIT_SHA="$GIT_SHA" \
             -t "usesend/$APP-$BUILD_PLATFORM:latest" \
             -t "usesend/$APP-$BUILD_PLATFORM:$GIT_SHA" \
             -t "usesend/$APP-$BUILD_PLATFORM:$APP_VERSION" \

apps/web/src/components/AppSideBar.tsx

@@ -51,6 +51,7 @@ import {
   DropdownMenuTrigger,
 } from "@usesend/ui/src/dropdown-menu";
 import { FeedbackDialog } from "./FeedbackDialog";
+import { env } from "~/env";
 
 // General items
 const generalItems = [
@@ -257,6 +258,7 @@ export function AppSidebar() {
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarGroupContent>
+        {isSelfHosted() && <VersionInfo />}
         <NavUser
           user={{
             name:
@@ -371,3 +373,33 @@ export function NavUser({
     </SidebarMenu>
   );
 }
+
+function VersionInfo() {
+  const appVersion = env.NEXT_PUBLIC_APP_VERSION;
+  const gitSha = env.NEXT_PUBLIC_GIT_SHA;
+
+  // If no version info available, don't render anything
+  if (!appVersion && !gitSha) {
+    return null;
+  }
+
+  const displayVersion =
+    appVersion && appVersion !== "unknown"
+      ? appVersion
+      : gitSha && gitSha !== "unknown"
+        ? gitSha.substring(0, 7)
+        : null;
+
+  if (!displayVersion) {
+    return null;
+  }
+
+  return (
+    <div className="px-2 py-2 text-xs text-muted-foreground">
+      <div className="flex items-center justify-between">
+        <span>Version</span>
+        <span className="font-mono">{displayVersion}</span>
+      </div>
+    </div>
+  );
+}

apps/web/src/env.js

@@ -83,6 +83,8 @@ export const env = createEnv({
       .string()
       .default("false")
       .transform((str) => str === "true"),
+    NEXT_PUBLIC_APP_VERSION: z.string().optional(),
+    NEXT_PUBLIC_GIT_SHA: z.string().optional(),
   },
 
   /**
@@ -108,6 +110,8 @@ export const env = createEnv({
     API_RATE_LIMIT: process.env.API_RATE_LIMIT,
     AUTH_EMAIL_RATE_LIMIT: process.env.AUTH_EMAIL_RATE_LIMIT,
     NEXT_PUBLIC_IS_CLOUD: process.env.NEXT_PUBLIC_IS_CLOUD,
+    NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION,
+    NEXT_PUBLIC_GIT_SHA: process.env.NEXT_PUBLIC_GIT_SHA,
     ADMIN_EMAIL: process.env.ADMIN_EMAIL,
     FOUNDER_EMAIL: process.env.FOUNDER_EMAIL,
     DISCORD_WEBHOOK_URL: process.env.DISCORD_WEBHOOK_URL,

docker/Dockerfile

@@ -46,7 +46,13 @@ RUN pnpm turbo run build --filter=web...
 FROM base AS runner
 WORKDIR /app
 
+# Build arguments for version information
+ARG APP_VERSION=unknown
+ARG GIT_SHA=unknown
 
+# Set version as environment variables
+ENV NEXT_PUBLIC_APP_VERSION=$APP_VERSION
+ENV NEXT_PUBLIC_GIT_SHA=$GIT_SHA
 
 COPY --from=installer /app/apps/web/next.config.js .
 COPY --from=installer /app/apps/web/package.json .

docker/build.sh

@@ -17,6 +17,8 @@ echo "Git SHA: $GIT_SHA"
 
 docker build -f "$SCRIPT_DIR/Dockerfile" \
     --progress=plain \
+    --build-arg APP_VERSION="$APP_VERSION" \
+    --build-arg GIT_SHA="$GIT_SHA" \
     -t "unsend/unsend:latest" \
     -t "unsend/unsend:$GIT_SHA" \
     -t "unsend/unsend:$APP_VERSION" \