feat: polish references peek UX and release build config

Author: vipmax

anycode-backend/Cargo.lock

@@ -1,12 +1,13 @@
 [package]
 name = "anycode"
-version = "0.0.8"
+version = "0.0.13"
 edition = "2024"
 
 [profile.release]
 # opt-level = 3
 # strip = true
-# lto = true
+lto = true
+codegen-units = 1
 panic = 'abort'
 
 [dependencies]

anycode-backend/Cargo.toml

@@ -30,6 +30,7 @@ export enum Action {
     DUPLICATE = 'DUPLICATE',
     COMMENT = 'COMMENT',
     GO_TO_DEFINITION = 'GO_TO_DEFINITION',
+    REFERENCES = 'OPEN_REFERENCES_PEEK',
     HOVER = 'HOVER',
 }
 

anycode-base/src/actions.ts

@@ -901,6 +901,13 @@ export class AnycodeEditor {
             return;
         }
 
+        if (action === Action.REFERENCES) {
+            event.preventDefault();
+            const { line, column } = this.code.getPosition(this.offset);
+            this.openReferencesPeek(line, column).catch(console.error);
+            return;
+        }
+
         if (action === Action.HOVER) {
             event.preventDefault();
             if (!this.hoverProvider) return;
@@ -984,6 +991,7 @@ export class AnycodeEditor {
             case "Tab": return Action.TAB;
             case "Escape": return Action.ESC;
             case "F10": return Action.HOVER;
+            case "F11": return Action.REFERENCES;
             case "F12": return Action.GO_TO_DEFINITION;
         }
 

anycode-base/src/editor.ts

@@ -172,12 +172,6 @@ const App: React.FC = () => {
                 return;
             }
 
-            if (e.shiftKey && e.key === 'F12') {
-                e.preventDefault();
-                editors.openReferencesPeekForActiveCursor();
-                return;
-            }
-
             if (e.metaKey && e.key === 'f') {
                 e.preventDefault();
             }
@@ -206,7 +200,6 @@ const App: React.FC = () => {
         editors.activeEditorPaneId,
         editors.activeFileId,
         editors.handleReferencesPeekKeyDown,
-        editors.openReferencesPeekForActiveCursor,
         editors.redoCursor,
         editors.saveFile,
         editors.undoCursor,

anycode/App.tsx

@@ -11,6 +11,7 @@ type EditorPanelProps = {
         setActiveEditorPaneId: (paneId: string) => void;
         getReferencesPeekForPane: (paneId: string) => ReferencesPeekState | null;
         closeReferencesPeek: (paneId?: string) => void;
+        focusEditorInPane: (paneId: string) => void;
         setSelectedReferenceInPeek: (paneId: string, nextIndex: number) => void;
         openReferenceFromPeek: (paneId: string, itemIndex?: number) => void;
     };
@@ -39,7 +40,10 @@ export const EditorPanel = ({ panelKey, editors }: EditorPanelProps) => {
             {referencesPeek ? (
                 <ReferencesPeek
                     state={referencesPeek}
-                    onClose={() => editors.closeReferencesPeek(panelKey)}
+                    onClose={() => {
+                        editors.closeReferencesPeek(panelKey);
+                        editors.focusEditorInPane(panelKey);
+                    }}
                     onSelectItem={(index) => editors.setSelectedReferenceInPeek(panelKey, index)}
                     onOpenItem={(index) => editors.openReferenceFromPeek(panelKey, index)}
                 />

anycode/features/editor/EditorPanel.tsx

@@ -106,6 +106,8 @@
 .references-peek-preview-editor .anyeditor .buttons,
 .references-peek-preview-editor .anyeditor .gutter {
     opacity: 0.72;
+    position: relative;
+    left: auto;
 }
 
 .references-peek-preview-editor .anyeditor.readonly .buttons {
@@ -144,35 +146,81 @@
     color: #aaa;
 }
 
+.references-peek-group-path {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .references-peek-item {
     width: 100%;
-    text-align: left;
-    border: 1px solid transparent;
-    border-radius: 9px;
     background: transparent;
     color: #fff;
-    padding: 7px 9px;
+    padding: 0;
     margin-top: 4px;
-    display: flex;
-    align-items: center;
+    position: relative;
     outline: none;
 }
 
-.references-peek-item:hover {
+.references-peek-item-select {
+    width: 100%;
+    min-width: 0;
+    text-align: left;
+    border: none;
     background: transparent;
+    color: inherit;
+    padding: 7px 72px 7px 9px;
+    border-radius: 9px;
+    margin: 0;
+    outline: none;
 }
 
-.references-peek-item:focus,
-.references-peek-item:focus-visible,
-.references-peek-item:active {
+.references-peek-item-select:focus,
+.references-peek-item-select:focus-visible,
+.references-peek-item-select:active {
     outline: none;
     box-shadow: none;
-    border-color: transparent;
 }
 
 .references-peek-item.is-selected {
+    background: transparent;
+}
+
+.references-peek-item-select.is-selected {
     background: rgba(130, 130, 130, 0.33);
-    border-color: transparent;
+}
+
+.references-peek-item-open {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%) translateX(2px);
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 7px;
+    padding: 4px 8px;
+    font-size: 11px;
+    color: #ddd;
+    background: rgba(255, 255, 255, 0.06);
+    flex-shrink: 0;
+    min-width: 52px;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
+}
+
+.references-peek-item:hover .references-peek-item-open,
+.references-peek-item:focus-within .references-peek-item-open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(-50%) translateX(0);
+}
+
+.references-peek-item-open:hover {
+    background: rgba(255, 255, 255, 0.11);
+    color: #fff;
 }
 
 .references-peek-item-location {