refactor: add version tab

package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
     "@react-aria/i18n": "^3.11.1",
-    "@tanstack/react-query": "^5.51.1",
-    "@tanstack/react-router": "1.44.5",
+    "@tanstack/react-query": "^5.51.9",
+    "@tanstack/react-router": "1.45.6",
     "@tw-material/file-browser": "^1.0.20",
     "@tw-material/framer-transitions": "^1.1.4",
     "@tw-material/react": "^1.1.21",
@@ -18,7 +18,7 @@
     "epubjs": "^0.3.93",
     "feaxios": "^0.0.18",
     "filesize": "^10.1.4",
-    "framer-motion": "^11.3.2",
+    "framer-motion": "^11.3.8",
     "immer": "^10.1.1",
     "libphonenumber-js": "^1.11.4",
     "lodash.debounce": "^4.0.8",
@@ -40,27 +40,27 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@iconify/json": "^2.2.227",
+    "@iconify/json": "^2.2.229",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@tanstack/react-query-devtools": "^5.51.1",
-    "@tanstack/router-vite-plugin": "^1.44.3",
+    "@tanstack/react-query-devtools": "^5.51.9",
+    "@tanstack/router-vite-plugin": "^1.45.3",
     "@types/lodash.debounce": "^4.0.9",
     "@types/md5": "^2.3.5",
-    "@types/node": "20.14.10",
+    "@types/node": "20.14.11",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-virtuoso": "^4.7.12",
-    "tailwindcss": "^3.4.4",
-    "terser": "^5.31.2",
+    "react-virtuoso": "^4.7.13",
+    "tailwindcss": "^3.4.6",
+    "terser": "^5.31.3",
     "typescript": "^5.5.3",
     "unplugin-icons": "^0.19.0",
-    "vite": "^5.3.3",
+    "vite": "^5.3.4",
     "vite-bundle-analyzer": "^0.10.3",
     "vite-tsconfig-paths": "^4.3.2"
   },

src/components/previews/CodePreview.tsx

@@ -16,9 +16,6 @@ const CodePreview = ({ name, assetUrl }: CodePreviewProps) => {
     <>
       {validating ? null : (
         <Editor
-          options={{
-            readOnly: true,
-          }}
           loading={<Spinner />}
           defaultLanguage={getLanguageByFileName(name)}
           theme="vs-dark"

src/components/settings/InfoTab.tsx

@@ -0,0 +1,31 @@
+import { Link } from "@tanstack/react-router";
+import { memo } from "react";
+
+export const InfoTab = memo(() => {
+  return (
+    <div className="flex flex-col gap-3">
+      <span className="inline-flex items-center gap-2">
+        <p className="text-lg font-medium">UI Version:</p>
+        <a
+          href={`https://github.com/divyam234/teldrive-ui/commits/${import.meta.env.UI_VERSION}`}
+          rel="noopener noreferrer"
+          target="_blank"
+          className="text-md font-normal"
+        >
+          {import.meta.env.UI_VERSION}
+        </a>
+      </span>
+      <span className="inline-flex items-center gap-2">
+        <p className="text-lg font-medium">Server Version:</p>
+        <a
+          href={`https://github.com/divyam234/teldrive/commits/${import.meta.env.VITE_SERVER_VERSION}`}
+          rel="noopener noreferrer"
+          target="_blank"
+          className="text-md font-normal"
+        >
+          {import.meta.env.VITE_SERVER_VERSION}
+        </a>
+      </span>
+    </div>
+  );
+});

src/components/settings/Settings.tsx

@@ -4,6 +4,7 @@ import { Button } from "@tw-material/react";
 import CodiconAccount from "~icons/codicon/account";
 import CodiconSettings from "~icons/codicon/settings";
 import FluentDarkTheme20Filled from "~icons/fluent/dark-theme-20-filled";
+import IcOutlineInfo from "~icons/ic/outline-info";
 import clsx from "clsx";
 
 import { ForwardLink } from "@/components/ForwardLink";
@@ -21,6 +22,10 @@ const Tabs = [
     id: "account",
     icon: CodiconAccount,
   },
+  {
+    id: "info",
+    icon: IcOutlineInfo,
+  },
 ];
 
 const fileRoute = getRouteApi("/_authenticated/settings/$tabId");

src/components/settings/SettingsTabView.tsx

@@ -4,6 +4,7 @@ import { getRouteApi } from "@tanstack/react-router";
 import { AccountTab } from "./AccountTab";
 import { ApperanceTab } from "./ApperanceTab";
 import { GeneralTab } from "./GeneralTab";
+import { InfoTab } from "./InfoTab";
 
 const fileRoute = getRouteApi("/_authenticated/settings/$tabId");
 
@@ -13,10 +14,11 @@ export const SettingsTabView = memo(() => {
   switch (params.tabId) {
     case "appearance":
       return <ApperanceTab />;
-
     case "account":
       return <AccountTab />;
-    default:
+    case "general":
       return <GeneralTab />;
+    default:
+      return <InfoTab />;
   }
 });

vite.config.mts

@@ -3,8 +3,11 @@ import react from "@vitejs/plugin-react";
 import Icons from "unplugin-icons/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import cp from "node:child_process";
 
-export default defineConfig(({ mode }) => {
+const commitHash = cp.execSync("git rev-parse --short HEAD").toString().replace("\n", "");
+
+export default defineConfig(({ mode: _ }) => {
   return {
     plugins: [
       TanStackRouterVite({
@@ -42,5 +45,8 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    define: {
+      "import.meta.env.UI_VERSION": JSON.stringify(commitHash),
+    },
   };
 });