Merge branch 'main' into backend_ai_table_schema_reponses

Author: Artuomka

.gitignore

@@ -9,6 +9,7 @@
 
 # dependencies
 /node_modules
+.yarn/
 
 # profiling files
 chrome-profiler-events*.json

frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html

@@ -64,8 +64,10 @@ <h1 mat-dialog-title>
 		[cdkCopyToClipboard]="credentialsText"
 		(cdkCopyToClipboardCopied)="handleCredentialsCopied()">
 		@if (copied) {
-			<mat-icon class="hosted-dialog__copy-check">check</mat-icon>
-			Credentials copied
+			<ng-container>
+				<mat-icon class="hosted-dialog__copy-check">check</mat-icon>
+				Credentials copied
+			</ng-container>
 		} @else {
 			Copy connection string
 		}

frontend/src/app/components/connections-list/own-connections/own-connections.component.css

@@ -267,6 +267,7 @@
 .connection {
 	display: flex;
 	flex-direction: column;
+	gap: 10px;
 	border: 1px solid rgba(0, 0, 0, 0.12);
 	border-radius: 4px;
 	color: inherit;
@@ -283,7 +284,7 @@
 	}
 }
 
-.connection:hover {
+.connection:has(.connectionLogoPreview:hover) {
 	border: 1px solid var(--color-primaryPalette-500);
 	box-shadow:
 		0px 4px 5px 0px rgba(0, 0, 0, 0.2),
@@ -292,7 +293,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.connection:hover {
+	.connection:has(.connectionLogoPreview:hover) {
 		border: 1px solid #636363;
 	}
 }
@@ -333,18 +334,65 @@
 	width: 100%;
 }
 
-/* ── Schema button inside card ── */
+/* ── Schema button row at the bottom of the card ── */
 
 .connectionSchemaButton {
-	margin-left: auto;
-	flex-shrink: 0;
-	color: rgba(255, 255, 255, 0.7);
+	position: relative;
+	align-self: stretch;
+	justify-content: center;
+	color: var(--mdc-text-button-label-text-color) !important;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: 1;
+	height: 34px;
+	transition: color 150ms ease, background-color 150ms ease;
+}
+
+.connectionSchemaButton mat-icon {
+	font-size: 16px !important;
+	width: 16px !important;
+	height: 16px !important;
+	margin-right: 6px;
+	transition: color 150ms ease;
+}
+
+.connectionSchemaButton__ai {
+	color: var(--color-accentedPalette-500) !important;
+}
+
+.connectionSchemaButton__arrow {
+	position: absolute;
+	right: 12px;
+	top: 50%;
+	margin: 0 !important;
+	transform: translate(-4px, -50%);
+	opacity: 0;
+	transition: opacity 150ms ease, transform 150ms ease;
 }
 
 .connectionSchemaButton:hover {
-	color: #fff;
+	color: var(--color-accentedPalette-500) !important;
 }
 
+@media (prefers-color-scheme: dark) {
+	.connectionSchemaButton:hover {
+		color: var(--color-accentedPalette-100) !important;
+		background: var(--color-accentedPalette-900);
+	}
+
+	.connectionSchemaButton:hover .connectionSchemaButton__ai {
+		color: var(--color-accentedPalette-100) !important;
+	}
+}
+
+.connectionSchemaButton:hover .connectionSchemaButton__arrow {
+	opacity: 1;
+	transform: translate(0, -50%);
+}
+
+
+
+
 /* ── Show more / less ── */
 
 .showAllButton {

frontend/src/app/components/connections-list/own-connections/own-connections.component.html

@@ -30,16 +30,17 @@ <h1 class="mat-display-1">Create your first connection</h1>
                             <h2 class="connectionInfo__connectionTitle">{{ $any(connectionItem).displayTitle }}</h2>
                             <span class="mat-body-2">{{ supportedDatabasesTitles[connectionItem.connection.type] }}</span>
                         </div>
-                        @if (connectionItem.accessLevel === 'edit') {
-                            <a mat-icon-button
-                                class="connectionSchemaButton"
-                                routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
-                                matTooltip="Edit schema"
-                                (click)="$event.stopPropagation()">
-                                <mat-icon>schema</mat-icon>
-                            </a>
-                        }
                     </div>
+                    @if (connectionItem.accessLevel === 'edit') {
+                        <a mat-button color="accent"
+                            class="connectionSchemaButton"
+                            routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
+                            (click)="$event.stopPropagation()">
+                            <mat-icon class="connectionSchemaButton__ai">auto_awesome</mat-icon>
+                            <span>Edit schema</span>
+                            <mat-icon iconPositionEnd class="connectionSchemaButton__arrow">arrow_forward</mat-icon>
+                        </a>
+                    }
                 </a>
             </li>
         }

frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html

@@ -47,8 +47,10 @@ <h1 mat-dialog-title>New password for <strong>{{ result()!.databaseName }}</stro
 			[cdkCopyToClipboard]="credentialsText"
 			(cdkCopyToClipboardCopied)="handleCredentialsCopied()">
 			@if (copied()) {
-				<mat-icon class="reset-dialog__copy-check">check</mat-icon>
-				Credentials copied
+				<ng-container>
+					<mat-icon class="reset-dialog__copy-check">check</mat-icon>
+					Credentials copied
+				</ng-container>
 			} @else {
 				Copy connection string
 			}