feat: added unsaved changes message, since there's no autosave

Co-authored-by: Copilot <copilot@github.com>

Author: larrydarko1

src/renderer/components/CanvasTabs.vue

@@ -223,6 +223,9 @@ function ctxDelete() {
 
         <!-- Zoom controls -->
         <div class="canvas-tabs-spacer"></div>
+        <span v-if="ss.isDirty.value" class="unsaved-message" title="You have unsaved changes (⌘S to save)"
+            >Unsaved changes</span
+        >
         <div class="zoom-controls">
             <button
                 class="zoom-btn"
@@ -433,7 +436,7 @@ function ctxDelete() {
     align-items: center;
     gap: 2px;
     flex-shrink: 0;
-    margin-right: 2px;
+    margin-right: 8px;
 }
 
 .zoom-btn {
@@ -528,4 +531,37 @@ function ctxDelete() {
         }
     }
 }
+
+.unsaved-message {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 0 9px;
+    height: 22px;
+    border-radius: 11px;
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.35);
+    color: #b45309;
+    flex-shrink: 0;
+    margin-right: 8px;
+    cursor: default;
+    -webkit-app-region: no-drag;
+
+    [data-theme='dark'] & {
+        background: rgba(245, 158, 11, 0.12);
+        border-color: rgba(245, 158, 11, 0.3);
+        color: #fbbf24;
+    }
+
+    &::before {
+        content: '';
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #f59e0b;
+        flex-shrink: 0;
+    }
+}
 </style>

src/renderer/components/Toolbar.vue

@@ -647,7 +647,6 @@ function applyTheme() {
         </template>
 
         <div class="toolbar-spacer"></div>
-
         <div class="toolbar-group">
             <button class="tb theme-toggle" :title="isDark ? 'Light mode' : 'Dark mode'" @click="toggleTheme">
                 <!-- Sun icon (shown in dark mode) -->

src/renderer/composables/spreadsheet/state.ts

@@ -70,6 +70,7 @@ export function createState() {
     const formulaRefs = ref<FormulaRef[]>([]);
     const canUndo = ref(false);
     const canRedo = ref(false);
+    const isDirty = ref(false);
     const chartSelectionMode = ref<string | null>(null);
     const chartSelectionActive = computed(() => chartSelectionMode.value !== null);
     const currentFilePath = ref<string | null>(null);
@@ -94,6 +95,7 @@ export function createState() {
         formulaRefs,
         canUndo,
         canRedo,
+        isDirty,
         chartSelectionMode,
         chartSelectionActive,
         currentFilePath,

src/renderer/composables/spreadsheet/useFileOps.ts

@@ -146,6 +146,7 @@ export function createFileOps(state: SpreadsheetCoreState, deps: FileOpsDeps) {
             state.activeTextBoxId.value = null;
             state.activeChartId.value = null;
             state.isEditing.value = false;
+            state.isDirty.value = false;
             deps.recalculate();
             return true;
         } catch (error) {
@@ -175,6 +176,7 @@ export function createFileOps(state: SpreadsheetCoreState, deps: FileOpsDeps) {
 
         if (result.success) {
             state.currentFilePath.value = targetPath;
+            state.isDirty.value = false;
             return true;
         } else {
             alert(`Failed to save file: ${result.error}`);
@@ -227,6 +229,7 @@ export function createFileOps(state: SpreadsheetCoreState, deps: FileOpsDeps) {
         state.activeChartId.value = null;
         state.isEditing.value = false;
         state.currentFilePath.value = null;
+        state.isDirty.value = false;
         state.counters.maxZ = 0;
         state.counters.tableCount = 0;
         state.counters.canvasCount = 1;

src/renderer/composables/spreadsheet/useUndoRedo.ts

@@ -37,6 +37,7 @@ export function createUndoRedo(state: SpreadsheetCoreState, deps: UndoRedoDeps)
         redoStack.length = 0;
         state.canUndo.value = undoStack.length > 0;
         state.canRedo.value = false;
+        state.isDirty.value = true;
         queueMicrotask(() => {
             undoNesting = 0;
         });

src/renderer/composables/useSpreadsheet.ts

@@ -137,6 +137,7 @@ export function useSpreadsheet() {
         formulaRefs: state.formulaRefs,
         canUndo: state.canUndo,
         canRedo: state.canRedo,
+        isDirty: state.isDirty,
         chartSelectionMode: state.chartSelectionMode,
         chartSelectionActive: state.chartSelectionActive,