add version button to settings view

.github/workflows/docker-image.yml

@@ -44,6 +44,12 @@ jobs:
             type=ref,event=branch
             type=ref,event=pr
             type=sha
+
+      - name: Set build env
+        run: |
+          echo "VITE_COMMIT_HASH=$(echo $GITHUB_SHA | cut -c 1-7)" >> $GITHUB_ENV
+          echo "VITE_APP_VERSION=$(jq -r .version ./package.json)" >> $GITHUB_ENV
+
       - name: Build and push Docker image
         uses: docker/build-push-action@v5
         with:

.github/workflows/pages.yml

@@ -37,6 +37,10 @@ jobs:
           cache: "npm"
       - name: Install dependencies
         run: yarn install
+      - name: Set build env
+        run: |
+          echo "VITE_COMMIT_HASH=$(echo $GITHUB_SHA | cut -c 1-7)" >> $GITHUB_ENV
+          echo "VITE_APP_VERSION=$(jq -r .version ./package.json)" >> $GITHUB_ENV
       - name: Build
         run: yarn build
       - name: Setup Pages

dockerfile

@@ -2,6 +2,8 @@
 FROM node:18
 WORKDIR /app
 COPY . /app/
+ENV VITE_COMMIT_HASH=""
+ENV VITE_APP_VERSION="custom"
 RUN yarn install && yarn build
 
 FROM nginx:stable-alpine-slim

package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "scripts": {
     "start": "vite serve",
-    "dev": "vite serve",
+    "dev": "VITE_APP_VERSION=development vite serve",
     "build": "tsc --project tsconfig.json && vite build",
     "format": "prettier --ignore-path .prettierignore -w .",
     "e2e": "cypress open",

src/components/version-button.tsx

@@ -0,0 +1,28 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+import { CheckIcon, ClipboardIcon } from "./icons";
+import { useState } from "react";
+
+export default function VersionButton({ ...props }: Omit<ButtonProps, "children">) {
+  const [copied, setCopied] = useState(false);
+  const version = [import.meta.env.VITE_APP_VERSION, import.meta.env.VITE_COMMIT_HASH].filter(Boolean).join("-");
+
+  if (!version) return null;
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      rightIcon={copied ? <CheckIcon /> : <ClipboardIcon />}
+      onClick={() => {
+        if (navigator.clipboard) {
+          navigator.clipboard.writeText(version);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        }
+      }}
+      {...props}
+    >
+      Version: {version}
+    </Button>
+  );
+}

src/views/settings/index.tsx

@@ -9,6 +9,7 @@ import PrivacySettings from "./privacy-settings";
 import useAppSettings from "../../hooks/use-app-settings";
 import { FormProvider, useForm } from "react-hook-form";
 import VerticalPageLayout from "../../components/vertical-page-layout";
+import VersionButton from "../../components/version-button";
 
 export default function SettingsView() {
   const toast = useToast();
@@ -46,6 +47,7 @@ export default function SettingsView() {
         <Link isExternal href="https://github.com/hzrd149/nostrudel">
           <GithubIcon /> Github
         </Link>
+        <VersionButton />
         <Button
           ml="auto"
           isLoading={form.formState.isLoading || form.formState.isValidating || form.formState.isSubmitting}