feat: quick start in studio at first run

Author: lvca

studio/src/main/resources/static/css/studio.css

@@ -3846,6 +3846,53 @@ div.dt-search {
   }
 }
 
+/* Quick Start Panel */
+.quick-start-card {
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  border: 1px solid var(--border-ddd, #dee2e6);
+}
+
+.quick-start-card:hover {
+  border-color: #00aeee;
+  box-shadow: 0 2px 8px rgba(0, 174, 238, 0.15);
+}
+
+.quick-start-divider {
+  text-align: center;
+  margin-bottom: 24px;
+  position: relative;
+}
+
+.quick-start-divider::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--border-ddd, #dee2e6);
+}
+
+.quick-start-divider span {
+  background: var(--bg-page, #fff);
+  padding: 0 16px;
+  position: relative;
+  color: var(--text-secondary, #aaa);
+  font-size: 0.85rem;
+}
+
+#quickStartOverlay {
+  display: none;
+  position: absolute;
+  inset: 0;
+  background: var(--bg-page, rgba(255, 255, 255, 0.97));
+  z-index: 10;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
 /* Ultra-compact: even smaller at very short heights */
 @media (max-height: 580px) {
   #tabs .nav-item a.vertical-tab {

studio/src/main/resources/static/index.html

@@ -272,7 +272,22 @@
           </div>
 
           <div class="col-11">
-            <div class="tab-content">
+            <div id="quickStartPanel" style="display:none; height: 100%; overflow-y: auto; position: relative;">
+              <div style="max-width: 880px; margin: 0 auto; padding: 48px 24px;">
+                <div style="text-align: center; margin-bottom: 36px;">
+                  <i class="fa fa-rocket" style="font-size: 2.5rem; color: #00aeee; margin-bottom: 12px; display: block;"></i>
+                  <h3 style="font-weight: 600; margin-bottom: 8px;">Get Started with ArcadeDB</h3>
+                  <p style="color: var(--text-secondary, #888); margin-bottom: 20px;">No databases found. Create an empty one or import a sample dataset with one click.</p>
+                  <button class="btn db-action-btn" onclick="createDatabase()" style="padding: 8px 24px; font-size: 0.95rem;">
+                    <i class="fa fa-plus"></i> Create Empty Database
+                  </button>
+                </div>
+                <div class="quick-start-divider"><span>or import a sample dataset</span></div>
+                <div id="quickStartDatasets" class="row g-3"></div>
+              </div>
+              <div id="quickStartOverlay"></div>
+            </div>
+            <div class="tab-content" id="mainTabContent">
               ${include:query.html} ${include:database.html} ${include:timeseries.html} ${include:server.html} ${include:profiler.html} ${include:security.html} ${include:cluster.html} ${include:ai.html} ${include:api.html} ${include:resources.html} ${include:settings.html}
             </div>
           </div>

studio/src/main/resources/static/js/studio-database.js

@@ -401,6 +401,11 @@ function updateDatabases(callback, preferSelected) {
       $("#studioPanel").show();
       console.log("UI updated - login page hidden, studio panel shown");
 
+      if (databases.length === 0)
+        showQuickStart();
+      else
+        hideQuickStart();
+
       // These operations should not block login completion
       try {
         displaySchema();
@@ -504,6 +509,79 @@ function createDatabase() {
   });
 }
 
+// ===== Quick Start Panel (shown when no databases exist) =====
+
+var sampleDatasets = [
+  { name: "OpenBeer", desc: "Beers, breweries, categories and styles", icon: "fa-beer-mug-empty" },
+  { name: "GratefulDeadConcerts", desc: "Grateful Dead concerts and songs", icon: "fa-music" },
+  { name: "MovieRatings", desc: "Movies with viewer ratings", icon: "fa-film" },
+  { name: "Tolkien-Arda", desc: "Tolkien's Middle-earth universe", icon: "fa-hat-wizard" },
+  { name: "Whisky", desc: "Whisky distilleries and brands", icon: "fa-whiskey-glass" },
+  { name: "demodb", desc: "General-purpose demo database", icon: "fa-database" }
+];
+
+function showQuickStart() {
+  var html = "";
+  for (var i = 0; i < sampleDatasets.length; i++) {
+    var ds = sampleDatasets[i];
+    html += '<div class="col-md-4">' +
+      '<div class="card quick-start-card" onclick="importSampleDatabase(\'' + ds.name + '\')">' +
+        '<div class="card-body text-center" style="padding: 20px 16px;">' +
+          '<i class="fa ' + ds.icon + '" style="font-size: 2rem; color: #00aeee; margin-bottom: 10px; display: block;"></i>' +
+          '<div style="font-weight: 600; font-size: 0.95rem; margin-bottom: 4px;">' + ds.name + '</div>' +
+          '<div class="text-muted" style="font-size: 0.8rem;">' + ds.desc + '</div>' +
+        '</div>' +
+      '</div>' +
+    '</div>';
+  }
+  $("#quickStartDatasets").html(html);
+  $("#quickStartOverlay").hide();
+  $("#quickStartPanel").show();
+  $("#mainTabContent").hide();
+}
+
+function hideQuickStart() {
+  $("#quickStartOverlay").hide();
+  $("#quickStartPanel").hide();
+  $("#mainTabContent").show();
+}
+
+function importSampleDatabase(name) {
+  var url = "https://github.com/ArcadeData/arcadedb-datasets/raw/main/orientdb/" + name + ".gz";
+
+  $("#quickStartOverlay").html(
+    '<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;"></div>' +
+    '<h5 style="margin-top: 16px; font-weight: 600;">Importing ' + escapeHtml(name) + '...</h5>' +
+    '<p style="color: var(--text-secondary, #888);">Creating database and downloading dataset. This may take a moment.</p>'
+  ).css("display", "flex");
+
+  jQuery.ajax({
+    type: "POST",
+    url: "api/v1/server",
+    data: JSON.stringify({ command: "create database " + name }),
+    contentType: "application/json",
+    beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", globalCredentials); }
+  }).done(function() {
+    jQuery.ajax({
+      type: "POST",
+      url: "api/v1/command/" + encodeURIComponent(name),
+      data: JSON.stringify({ language: "sql", command: "IMPORT DATABASE " + url }),
+      contentType: "application/json",
+      timeout: 300000,
+      beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", globalCredentials); }
+    }).done(function() {
+      globalNotify("Success", name + " imported successfully!", "success");
+      updateDatabases(null, name);
+    }).fail(function(jqXHR) {
+      globalNotifyError(jqXHR.responseText);
+      $("#quickStartOverlay").hide();
+    });
+  }).fail(function(jqXHR) {
+    globalNotifyError(jqXHR.responseText);
+    $("#quickStartOverlay").hide();
+  });
+}
+
 function dropDatabase() {
   let database = escapeHtml(getCurrentDatabase());
   if (database == "") {