adds icon to jump to linked shapes via "Value Shape" col, adds shape search box, adds "recent" edited shapes list

Author: thisismattmiller

frontend/src/components/spreadsheet/SpreadsheetGrid.vue

@@ -135,15 +135,29 @@
                   :class="{ disabled: isCellDisabled(row, col) }"
                   :title="getCellError(row, col.key) ?? undefined"
                 >
-                  <span v-for="(line, idx) in getMultilineValues(row, col.key)" :key="idx" class="multiline-value">{{ line }}</span>
+                  <span
+                    v-for="(line, idx) in getMultilineValues(row, col.key)"
+                    :key="idx"
+                    class="multiline-value"
+                  >{{ line }}<span
+                      v-if="col.key === 'valueShape' && isValidShapeRef(line)"
+                      class="shape-nav-icon"
+                      title="Go to this shape"
+                      @click.stop.prevent="promptNavigateToShape(line, $event)"
+                    >&#9998;</span></span>
                 </span>
                 <span
                   v-else
                   class="cell-content"
                   :class="{ disabled: isCellDisabled(row, col) }"
                   :title="getCellError(row, col.key) ?? undefined"
                 >
-                  {{ formatCellValue(row, col, rowIndex) }}
+                  {{ formatCellValue(row, col, rowIndex) }}<span
+                    v-if="col.key === 'valueShape' && getCellValue(row, col.key, rowIndex) && isValidShapeRef(getCellValue(row, col.key, rowIndex)!)"
+                    class="shape-nav-icon"
+                    title="Go to this shape"
+                    @click.stop.prevent="promptNavigateToShape(getCellValue(row, col.key, rowIndex)!, $event)"
+                  >&#9998;</span>
                 </span>
               </template>
             </td>
@@ -283,7 +297,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['shape-label-change', 'description-change', 'resource-uri-change'],
+  emits: ['shape-label-change', 'description-change', 'resource-uri-change', 'navigate-to-shape'],
   setup(props, { emit }) {
     const containerRef = ref<HTMLDivElement | null>(null);
     const gridWrapper = ref<HTMLDivElement | null>(null);
@@ -1294,6 +1308,18 @@ export default defineComponent({
       // Handle other redo types...
     }
 
+    function isValidShapeRef(shapeId: string): boolean {
+      return props.shapes.some(s => s.shapeId === shapeId);
+    }
+
+    function promptNavigateToShape(shapeId: string, event: Event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (confirm(`Do you want to edit the shape "${shapeId}"?`)) {
+        emit('navigate-to-shape', shapeId);
+      }
+    }
+
     function startEditDescription() {
       const newDescription = prompt('Enter shape description:', props.description || '');
       if (newDescription !== null && newDescription !== props.description) {
@@ -1433,6 +1459,8 @@ export default defineComponent({
       startEditDescription,
       showErrorTooltip,
       hideErrorTooltip,
+      isValidShapeRef,
+      promptNavigateToShape,
       // Send to workspace
       showSendToWorkspace,
       otherWorkspaces,
@@ -1717,6 +1745,25 @@ tr.row-selected td {
   border-bottom: 1px dotted #ddd;
 }
 
+.shape-nav-icon {
+  display: inline-block;
+  margin-left: 4px;
+  font-size: 0.7rem;
+  color: #999;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  vertical-align: middle;
+}
+
+.cell:hover .shape-nav-icon {
+  opacity: 1;
+}
+
+.shape-nav-icon:hover {
+  color: #2196f3;
+}
+
 .cell-content.disabled {
   color: #999;
   background: #f9f9f9;

frontend/src/views/WorkspaceView.vue

@@ -41,6 +41,34 @@
           </button>
         </div>
         <div v-if="!sidebarCollapsed" class="sidebar-content">
+          <div class="shape-search">
+            <input
+              type="text"
+              v-model="shapeSearchQuery"
+              placeholder="Filter shapes..."
+              class="shape-search-input"
+            />
+            <span
+              v-if="shapeSearchQuery"
+              class="shape-search-clear"
+              @click="shapeSearchQuery = ''"
+            >&times;</span>
+          </div>
+
+          <!-- Recent edited shapes -->
+          <div v-if="recentEditedShapes.length > 0 && !shapeSearchQuery" class="recent-shapes">
+            <div class="recent-shapes-header">Recent</div>
+            <div
+              v-for="shapeId in recentEditedShapes"
+              :key="'recent-' + shapeId"
+              class="recent-shape-item"
+              :class="{ active: currentShapeId === shapeId }"
+              @click="selectShape(shapeId)"
+            >
+              {{ shapeId }}
+            </div>
+          </div>
+
           <div class="sidebar-buttons">
             <button
               class="btn btn-primary btn-grow"
@@ -167,6 +195,7 @@
           @shape-label-change="updateShapeLabel"
           @description-change="updateDescription"
           @resource-uri-change="updateResourceURI"
+          @navigate-to-shape="navigateToShape"
         />
       </main>
     </div>
@@ -427,18 +456,47 @@ export default defineComponent({
     const startingPointFileInput = ref<HTMLInputElement | null>(null);
     const importingStartingPoints = ref(false);
 
+    // Shape search
+    const shapeSearchQuery = ref('');
+
+    // Recent edited shapes (session only, max 5)
+    const recentEditedShapeIds = ref<string[]>([]);
+    const recentEditedShapes = computed(() => {
+      // Only show shapes that still exist
+      return recentEditedShapeIds.value.filter(id => shapes.value.some(s => s.shapeId === id));
+    });
+
+    function trackRecentShape(shapeId: string) {
+      const list = recentEditedShapeIds.value;
+      const idx = list.indexOf(shapeId);
+      if (idx !== -1) {
+        list.splice(idx, 1);
+      }
+      list.unshift(shapeId);
+      if (list.length > 5) {
+        list.pop();
+      }
+    }
+
+    function shapeMatchesSearch(shape: Shape): boolean {
+      if (!shapeSearchQuery.value) return true;
+      const query = shapeSearchQuery.value.toLowerCase();
+      return shape.shapeId.toLowerCase().includes(query) ||
+        (shape.shapeLabel || '').toLowerCase().includes(query);
+    }
+
     // Shapes at root level (no folder)
     const rootShapes = computed(() => {
       return [...shapes.value]
-        .filter(s => s.folderId === null)
+        .filter(s => s.folderId === null && shapeMatchesSearch(s))
         .sort((a, b) => a.shapeId.localeCompare(b.shapeId));
     });
 
     // Shapes grouped by folder
     const shapesByFolder = computed(() => {
       const map = new Map<number, Shape[]>();
       for (const shape of shapes.value) {
-        if (shape.folderId !== null) {
+        if (shape.folderId !== null && shapeMatchesSearch(shape)) {
           if (!map.has(shape.folderId)) {
             map.set(shape.folderId, []);
           }
@@ -452,9 +510,11 @@ export default defineComponent({
       return map;
     });
 
-    // Sorted folders
+    // Sorted folders - hide empty folders when searching
     const sortedFolders = computed(() => {
-      return [...folders.value].sort((a, b) => a.name.localeCompare(b.name));
+      const sorted = [...folders.value].sort((a, b) => a.name.localeCompare(b.name));
+      if (!shapeSearchQuery.value) return sorted;
+      return sorted.filter(f => (shapesByFolder.value.get(f.id)?.length || 0) > 0);
     });
 
     const sortedShapes = computed(() => {
@@ -534,9 +594,17 @@ export default defineComponent({
 
     function selectShape(shapeId: string) {
       currentShapeId.value = shapeId;
+      trackRecentShape(shapeId);
       router.replace({ name: 'shape', params: { id: props.id, shapeId } });
     }
 
+    function navigateToShape(shapeId: string) {
+      const shape = shapes.value.find(s => s.shapeId === shapeId);
+      if (shape) {
+        selectShape(shapeId);
+      }
+    }
+
     async function createShape() {
       if (!newShapeId.value.trim()) return;
       try {
@@ -700,6 +768,10 @@ export default defineComponent({
     }
 
     function isFolderCollapsed(folderId: number): boolean {
+      // Auto-expand folders with matches when searching
+      if (shapeSearchQuery.value && (shapesByFolder.value.get(folderId)?.length || 0) > 0) {
+        return false;
+      }
       return !expandedFolders.value.has(folderId);
     }
 
@@ -823,6 +895,7 @@ export default defineComponent({
       showNamespaceManager,
       goHome,
       selectShape,
+      navigateToShape,
       createShape,
       editShape,
       doEditShape,
@@ -847,6 +920,10 @@ export default defineComponent({
       isFolderCollapsed,
       createFolder,
       deleteFolder,
+      // Shape search
+      shapeSearchQuery,
+      // Recent edited shapes
+      recentEditedShapes,
       // Drag and drop
       draggedShapeId,
       dragOverFolderId,
@@ -1171,6 +1248,77 @@ export default defineComponent({
   flex: 1;
 }
 
+/* Shape search */
+.shape-search {
+  position: relative;
+  margin-bottom: 0.75rem;
+}
+
+.shape-search-input {
+  width: 100%;
+  padding: 0.4rem 1.75rem 0.4rem 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  box-sizing: border-box;
+}
+
+.shape-search-input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.shape-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: #999;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.shape-search-clear:hover {
+  color: #333;
+}
+
+/* Recent edited shapes */
+.recent-shapes {
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.recent-shapes-header {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.25rem;
+}
+
+.recent-shape-item {
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.recent-shape-item:hover {
+  background: #f0f0f0;
+}
+
+.recent-shape-item.active {
+  background: #e3f2fd;
+  font-weight: 500;
+}
+
 /* Root drop zone */
 .root-drop-zone {
   min-height: 20px;