Merge pull request #4 from ZenUml/feat/editor-built-time

Feat/editor built time

Author: MrCoder

build.gradle.kts

@@ -141,6 +141,9 @@ tasks.register("buildZenUMLWebView") {
     outputs.dir("src/main/resources/assets/zenuml")
 
     doLast {
+        // Generate build timestamp in ISO 8601 format (JavaScript-friendly)
+        val buildTimestamp = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX").format(Date())
+        
         // Set working directory to the ZenUML web view
         val zenUmlDir = File(projectDir, "src/webview/zenuml")
 
@@ -150,9 +153,10 @@ tasks.register("buildZenUMLWebView") {
             commandLine("npm", "install")
         }
 
-        // Run npm build
+        // Run npm build with timestamp environment variable
         exec {
             workingDir = zenUmlDir
+            environment("VITE_BUILD_TIMESTAMP", buildTimestamp)
             commandLine("npm", "run", "build")
         }
 
@@ -162,7 +166,7 @@ tasks.register("buildZenUMLWebView") {
             into("${projectDir}/src/main/resources/assets/zenuml")
         }
 
-        println("ZenUML web view built and copied to resources")
+        println("ZenUML web view built and copied to resources (built at: $buildTimestamp)")
     }
 }
 

src/webview/zenuml/src/components/BuildTimestamp.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="build-timestamp" :title="`Built at: ${buildTimestamp}`">
+    <span class="timestamp-text">{{ formatTimestamp(buildTimestamp) }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// Get build timestamp from environment variable
+const buildTimestamp = import.meta.env.VITE_BUILD_TIMESTAMP || 'Development'
+
+const formatTimestamp = (timestamp) => {
+  if (timestamp === 'Development') {
+    return '1970-01-01T00:00:00.000Z'
+  }
+
+  try {
+    const date = new Date(timestamp)
+    // Check if the date is valid
+    if (Number.isNaN(date.getTime())) {
+      console.warn('Invalid timestamp:', timestamp)
+      return 'Invalid'
+    }
+    
+    // Format as "MMM dd, HH:mm"
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }).replace(',', '')
+  } catch (e) {
+    console.error('Error parsing timestamp:', e, timestamp)
+    return 'Error'
+  }
+}
+</script>
+
+<style scoped>
+.build-timestamp {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 4px;
+  font-size: 9px;
+  color: var(--text-muted, #ccc);
+  white-space: nowrap;
+  user-select: none;
+  cursor: default;
+  opacity: 0.4;
+}
+
+.timestamp-icon {
+  font-size: 8px;
+  opacity: 0.8;
+}
+
+.timestamp-text {
+  font-family: monospace;
+  font-size: 8px;
+  font-weight: 300;
+}
+
+/* Dark theme support */
+:global(.dark-theme) .build-timestamp {
+  color: var(--text-muted, #666);
+  opacity: 0.4;
+}
+</style>

src/webview/zenuml/src/components/Editor.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="editor-container">
-    <div ref="editorElement" class="editor-content"></div>
+    <div ref="editorElement" class="editor-content">
+      <BuildTimestamp class="editor-timestamp" />
+    </div>
   </div>
 </template>
 
@@ -10,6 +12,7 @@ import {baseExtensionsFactory, zenumlExtensions} from "./extensions";
 import {EditorView} from '@codemirror/view'
 import {Compartment, EditorState} from '@codemirror/state'
 import {useHostCommunication} from '../composables/useHostCommunication'
+import BuildTimestamp from './BuildTimestamp.vue'
 
 const props = defineProps({
   initialContent: {
@@ -97,6 +100,25 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.editor-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.editor-timestamp {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 10;
+}
+
 /* Styles are in main.css */
 :deep(.cm-editor) {
   min-height: 200px;

src/webview/zenuml/src/styles/main.css

@@ -22,6 +22,9 @@ body {
   --editor-bg: white;
   --preview-bg: white;
   --resizer-hover: #0078d7;
+  --background-primary: white;
+  --background-secondary: #f5f5f5;
+  --text-muted: #666;
 }
 
 .dark-theme {
@@ -32,6 +35,9 @@ body {
   --editor-bg: #3c3f41;
   --preview-bg: #3c3f41;
   --resizer-hover: #0078d7;
+  --background-primary: #1e1e1e;
+  --background-secondary: #2d2d2d;
+  --text-muted: #aaa;
 }
 
 body {

src/webview/zenuml/vite.config.js

@@ -14,5 +14,9 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     emptyOutDir: true
+  },
+  define: {
+    // Make build timestamp available as a global constant
+    __BUILD_TIMESTAMP__: JSON.stringify(process.env.VITE_BUILD_TIMESTAMP || 'Development')
   }
 })