Merge branch 'development'

Author: alexjpwalker

VERSION

@@ -1 +1 @@
-3.5.8
+3.5.9

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typedb-studio",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "scripts": {
     "ng": "ng",
     "generate-grammar": "lezer-generator --typeScript src/framework/codemirror-lang-typeql/typeql.grammar -o src/framework/codemirror-lang-typeql/generated/typeql.grammar.generated",
@@ -64,6 +64,7 @@
     "@sanity/types": "3.14.4",
     "@types/chroma-js": "3.1.1",
     "@types/jasmine": "~5.1.0",
+    "@types/prismjs": "1.26.5",
     "graphology-types": "0.24.8",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 [package]
 name = "typedb-studio"
-version = "3.5.8"
+version = "3.5.9"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"

src-tauri/Cargo.lock

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "typedb-studio",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "identifier": "com.typedb.studio",
   "build": {
     "beforeDevCommand": "pnpm start",
@@ -31,7 +31,7 @@
     ],
     "windows": {
       "wix": {
-        "version": "3.5.8"
+        "version": "3.5.9"
       }
     },
     "macOS": {

src-tauri/Cargo.toml

@@ -1,14 +1,22 @@
-<div class="cs-root text-code">
-  @if (snippet.language && snippet.language !== 'typedb-console') {
-    <div class="cs-line-numbers">
-      <ol>
-        @for (lineNumber of lineNumbers; track lineNumber) {
-          <li>{{ lineNumber }}</li>
-        }
-      </ol>
+<div class="cs-root text-code" #rootElement (mouseenter)="showOverlay.set(true)" (mouseleave)="showOverlay.set(false)">
+  <!-- Copy overlay - outside the scrollable area -->
+  <div class="copy-overlay" [class.visible]="showOverlay()" matTooltip="Copy" matTooltipPosition="below" (click)="copyCode()">
+    <i class="fas" [class.fa-copy]="!copied()" [class.fa-check]="copied()"></i>
+  </div>
+
+  <!-- Scrollable container for both line numbers and code -->
+  <div class="cs-scrollable-content">
+    @if (snippet.language && snippet.language !== 'typedb-console') {
+      <div class="cs-line-numbers">
+        <ol>
+          @for (lineNumber of lineNumbers; track lineNumber) {
+            <li>{{ lineNumber }}</li>
+          }
+        </ol>
+      </div>
+    }
+    <div class="cs-code-area">
+      <pre><code [class]="snippet.language ? 'language-' + snippet.language : undefined" [innerHTML]="snippet.code"></code></pre>
     </div>
-  }
-  <div class="cs-code-area">
-    <pre><code [class]="snippet.language ? 'language-' + snippet.language : undefined" [innerHTML]="snippet.code"></code></pre>
   </div>
-</div>
+</div>

src-tauri/tauri.conf.json

@@ -4,33 +4,35 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-
+@use "colors";
+@use "shapes";
 @use "typography";
 
 :host {
     display: block;
     height: 100%;
-    overflow: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-    }
+    /* Remove overflow: auto */
 }
 
 .cs-root {
     min-height: 100%;
     width: 100%;
+    position: relative;
+    height: 100%;
+}
+
+.cs-scrollable-content {
     display: flex;
     gap: 4px;
+    padding: 4px;
+    height: 100%;
+    overflow: auto; /* Move overflow here */
 }
 
 .cs-line-numbers {
     flex-shrink: 0;
     padding: 0 7px;
     color: #66637f;
-    overflow: hidden;
 }
 
 .cs-code-area {
@@ -42,7 +44,50 @@
     }
 }
 
+.copy-overlay {
+    position: absolute;
+    top: 12px;
+    right: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    border: shapes.$border;
+    color: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+    cursor: pointer;
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: all 100ms;
+}
+
+.copy-overlay i {
+    font-size: 14px;
+    transition: all 100ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    line-height: 1; /* Remove any line-height that might offset the icon */
+}
+
+/* Keep your existing hover and visible states */
+.copy-overlay.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.copy-overlay:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: colors.$secondary-mid-deep-grey;
+    color: rgba(255, 255, 255, 1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
 ol {
     list-style: none;
-    height: 0;
 }

src/framework/code-snippet/code-snippet.component.html

@@ -4,10 +4,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, ViewChild } from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnChanges, signal, ViewChild } from "@angular/core";
 
 import Prism from "prismjs";
 import { initCustomScrollbars } from "typedb-web-common/lib";
+import { MatTooltipModule } from "@angular/material/tooltip";
 
 const DEFAULT_MIN_LINES = { desktop: 33, mobile: 13 };
 
@@ -17,12 +18,16 @@ const DEFAULT_MIN_LINES = { desktop: 33, mobile: 13 };
     styleUrls: ["code-snippet.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [],
+    imports: [MatTooltipModule],
 })
-export class CodeSnippetComponent implements AfterViewInit, AfterViewChecked {
+export class CodeSnippetComponent implements AfterViewInit, OnChanges {
     @Input({ required: true }) snippet!: { language?: string, code: string };
     @ViewChild("scrollbarX") scrollbarX!: ElementRef<HTMLElement>;
     @ViewChild("scrollbarY") scrollbarY!: ElementRef<HTMLElement>;
+    @ViewChild("rootElement") rootElement!: ElementRef<HTMLElement>;
+
+    showOverlay = signal(false);
+    copied = signal(false);
 
     get lineNumbers() {
         return [...Array(Math.max(
@@ -34,10 +39,30 @@ export class CodeSnippetComponent implements AfterViewInit, AfterViewChecked {
     constructor(private ngZone: NgZone, private elementRef: ElementRef) { }
 
     ngAfterViewInit() {
-        this.ngZone.runOutsideAngular(() => initCustomScrollbars(this.elementRef.nativeElement));
+        this.maybeInitScrollbarsAndHighlighting();
+    }
+
+    ngOnChanges() {
+        this.maybeInitScrollbarsAndHighlighting();
+    }
+
+    maybeInitScrollbarsAndHighlighting() {
+        if (this.snippet && this.rootElement) {
+            Prism.highlightAllUnder(this.elementRef.nativeElement);
+        }
     }
 
-    ngAfterViewChecked() {
-        Prism.highlightAll();
+    async copyCode() {
+        try {
+            await navigator.clipboard.writeText(this.snippet.code);
+            this.copied.set(true);
+            
+            // Reset copied state after 2 seconds
+            setTimeout(() => {
+                this.copied.set(false);
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy code:', err);
+        }
     }
 }

src/framework/code-snippet/code-snippet.component.scss

@@ -14,10 +14,6 @@
     right: 0;
 }
 
-.mdc-dialog__content {
-    overflow: visible;
-}
-
 h1 {
     @include typography.font-style(22px, typography.$semi-bold, normal, 0);
 }