Add "Ironmount" prefix to page titles and display version in sidebar (#28)

* Initial plan

* Initial exploration - understanding the codebase

Co-authored-by: nicotsx <47644445+nicotsx@users.noreply.github.com>

* Add "Ironmount - " prefix to all route titles and version in sidebar

Co-authored-by: nicotsx <47644445+nicotsx@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: nicotsx <47644445+nicotsx@users.noreply.github.com>

app/client/components/app-sidebar.tsx

@@ -3,6 +3,7 @@ import { Link, NavLink } from "react-router";
 import {
 	Sidebar,
 	SidebarContent,
+	SidebarFooter,
 	SidebarGroup,
 	SidebarGroupContent,
 	SidebarHeader,
@@ -13,6 +14,7 @@ import {
 } from "~/client/components/ui/sidebar";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
 import { cn } from "~/client/lib/utils";
+import { APP_VERSION } from "~/client/lib/version";
 
 const items = [
 	{
@@ -85,6 +87,15 @@ export function AppSidebar() {
 					</SidebarGroupContent>
 				</SidebarGroup>
 			</SidebarContent>
+			<SidebarFooter className="p-4 border-r border-t border-border/50">
+				<div
+					className={cn("text-xs text-muted-foreground transition-all duration-200", {
+						"opacity-0 w-0 overflow-hidden": state === "collapsed",
+					})}
+				>
+					Version {APP_VERSION}
+				</div>
+			</SidebarFooter>
 		</Sidebar>
 	);
 }

app/client/lib/version.ts

@@ -0,0 +1 @@
+export const APP_VERSION = import.meta.env.VITE_APP_VERSION || "dev";

app/client/modules/auth/routes/download-recovery-key.tsx

@@ -16,7 +16,7 @@ export const clientMiddleware = [authMiddleware];
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Download Recovery Key" },
+		{ title: "Ironmount - Download Recovery Key" },
 		{
 			name: "description",
 			content: "Download your backup recovery key to ensure you can restore your data.",

app/client/modules/auth/routes/login.tsx

@@ -16,7 +16,7 @@ export const clientMiddleware = [authMiddleware];
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Login" },
+		{ title: "Ironmount - Login" },
 		{
 			name: "description",
 			content: "Sign in to your Ironmount account.",

app/client/modules/auth/routes/onboarding.tsx

@@ -24,7 +24,7 @@ export const clientMiddleware = [authMiddleware];
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Onboarding" },
+		{ title: "Ironmount - Onboarding" },
 		{
 			name: "description",
 			content: "Welcome to Ironmount. Create your admin account to get started.",

app/client/modules/backups/routes/backup-details.tsx

@@ -40,7 +40,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Backup Job Details" },
+		{ title: "Ironmount - Backup Job Details" },
 		{
 			name: "description",
 			content: "View and manage backup job configuration, schedule, and snapshots.",

app/client/modules/backups/routes/backups.tsx

@@ -15,7 +15,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Backup Jobs" },
+		{ title: "Ironmount - Backup Jobs" },
 		{
 			name: "description",
 			content: "Automate volume backups with scheduled jobs and retention policies.",

app/client/modules/backups/routes/create-backup.tsx

@@ -24,7 +24,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Create Backup Job" },
+		{ title: "Ironmount - Create Backup Job" },
 		{
 			name: "description",
 			content: "Create a new automated backup job for your volumes.",

app/client/modules/repositories/routes/create-repository.tsx

@@ -17,7 +17,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Create Repository" },
+		{ title: "Ironmount - Create Repository" },
 		{
 			name: "description",
 			content: "Create a new backup repository with encryption and compression.",

app/client/modules/repositories/routes/repositories.tsx

@@ -20,7 +20,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Repositories" },
+		{ title: "Ironmount - Repositories" },
 		{
 			name: "description",
 			content: "Manage your backup repositories with encryption and compression.",

app/client/modules/repositories/routes/repository-details.tsx

@@ -36,7 +36,7 @@ export const handle = {
 
 export function meta({ params }: Route.MetaArgs) {
 	return [
-		{ title: params.name },
+		{ title: `Ironmount - ${params.name}` },
 		{
 			name: "description",
 			content: "View repository configuration, status, and snapshots.",

app/client/modules/repositories/routes/snapshot-details.tsx

@@ -17,7 +17,7 @@ export const handle = {
 
 export function meta({ params }: Route.MetaArgs) {
 	return [
-		{ title: `Snapshot ${params.snapshotId}` },
+		{ title: `Ironmount - Snapshot ${params.snapshotId}` },
 		{
 			name: "description",
 			content: "Browse and restore files from a backup snapshot.",

app/client/modules/settings/routes/settings.tsx

@@ -30,7 +30,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Settings" },
+		{ title: "Ironmount - Settings" },
 		{
 			name: "description",
 			content: "Manage your account settings and preferences.",

app/client/modules/volumes/routes/create-volume.tsx

@@ -17,7 +17,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Create Volume" },
+		{ title: "Ironmount - Create Volume" },
 		{
 			name: "description",
 			content: "Create a new storage volume with automatic mounting and health checks.",

app/client/modules/volumes/routes/volume-details.tsx

@@ -37,7 +37,7 @@ export const handle = {
 
 export function meta({ params }: Route.MetaArgs) {
 	return [
-		{ title: params.name },
+		{ title: `Ironmount - ${params.name}` },
 		{
 			name: "description",
 			content: "View and manage volume details, configuration, and files.",

app/client/modules/volumes/routes/volumes.tsx

@@ -20,7 +20,7 @@ export const handle = {
 
 export function meta(_: Route.MetaArgs) {
 	return [
-		{ title: "Volumes" },
+		{ title: "Ironmount - Volumes" },
 		{
 			name: "description",
 			content: "Create, manage, monitor, and automate your Docker volumes with ease.",

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "@ironmount/client",

vite.config.ts

@@ -3,9 +3,21 @@ import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { reactRouterHonoServer } from "react-router-hono-server/dev";
+import { execSync } from "node:child_process";
+
+const getVersion = () => {
+	try {
+		return execSync("git describe --tags --always").toString().trim();
+	} catch {
+		return "dev";
+	}
+};
 
 export default defineConfig({
 	plugins: [reactRouterHonoServer({ runtime: "bun" }), reactRouter(), tailwindcss(), tsconfigPaths()],
+	define: {
+		"import.meta.env.VITE_APP_VERSION": JSON.stringify(getVersion()),
+	},
 	build: {
 		outDir: "dist",
 		sourcemap: true,