@kyro-cms/admin 0.9.4 → 0.9.6

package/src/pages/graphql.astro

@@ -1,8 +1,7 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
-
-import { adminPath, apiPath } from "../lib/paths";
+import { apiPath } from "../lib/paths";
 
 const url = Astro.request.url;
 const params = new URL(url).searchParams;
@@ -10,122 +9,11 @@ const initialQuery = params.get("query") || "";
 ---
 
 <AdminLayout title="GraphQL Playground">
-  <div class="flex-1 overflow-hidden">
-    <!-- Header -->
-    <div class="mb-6 surface-tile">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h1
-            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-          >
-            GraphQL Playground
-          </h1>
-          <p
-            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
-          >
-            Interactive GraphQL query editor and explorer
-          </p>
-        </div>
-        <div class="flex items-center gap-4">
-          <a
-            href={`${adminPath}/graphql-explorer`}
-            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-          >
-            <svg
-              class="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-              ></path>
-            </svg>
-            Explorer
-          </a>
-          <div
-            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]"
-          >
-            <div class="w-2 h-2 rounded-full bg-green-500"></div>
-            <span class="text-sm font-medium text-[var(--kyro-text-primary)]"
-              >API Active</span
-            >
-          </div>
-          <a
-            href={`${apiPath}/graphql`}
-            target="_blank"
-            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-          >
-            <svg
-              class="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              ></path>
-            </svg>
-            Open Endpoint
-          </a>
-        </div>
-      </div>
-
-      <!-- Quick Examples -->
-      <div class="flex flex-wrap gap-2">
-        <button
-          onclick="copyToClipboard('{ __schema { types { name } } }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Introspection
-        </button>
-        <button
-          onclick="copyToClipboard('{ collections { slug name } }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Collections
-        </button>
-        <button
-          onclick="copyToClipboard('{ ping }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Ping
-        </button>
-        <button
-          onclick="copyToClipboard('{ posts(page: 1, limit: 10) { docs { id title slug } totalDocs } }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Posts Query
-        </button>
-      </div>
-    </div>
-
-    <!-- GraphQL Playground Container -->
-    <div class="h-[calc(100vh-280px)] overflow-hidden surface-tile">
-      <GraphQLPlayground
-        client:load
-        endpoint={`${apiPath}/graphql`}
-        initialQuery={initialQuery}
-      />
-    </div>
+  <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
+    <GraphQLPlayground
+      client:load
+      endpoint={`${apiPath}/graphql`}
+      initialQuery={initialQuery}
+    />
   </div>
-
-  <script is:inline>
-    function copyToClipboard(text) {
-      navigator.clipboard.writeText(text);
-    }
-  </script>
-
-  <style is:global>
-    /* Ensure proper styling for textarea editors */
-    .graphiql-container textarea {
-      font-family: var(--font-mono) !important;
-    }
-  </style>
 </AdminLayout>

package/src/pages/index.astro

@@ -13,7 +13,7 @@ const authItems = authCollections.map((slug) => ({
 ---
 
 <AdminLayout title="Dashboard">
-  <div class="flex-1 overflow-y-auto  space-y-8">
+  <div class="flex-1 overflow-y-auto space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6 flex items-center justify-between gap-8">
       <div class="relative flex-1 max-w-2xl">
@@ -281,36 +281,7 @@ const authItems = authCollections.map((slug) => ({
               </p>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <a
-              href={`${adminPath}/api-explorer`}
-              class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
-            >
-              <div class="flex items-center gap-3 mb-2">
-                <div
-                  class="w-8 h-8 rounded-lg bg-green-500/10 flex items-center justify-center text-green-500 group-hover:scale-110 transition-transform"
-                >
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                  </svg>
-                </div>
-                <h4 class="font-medium text-[var(--kyro-text-primary)]">
-                  Explorer
-                </h4>
-              </div>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Test endpoints interactively
-              </p>
-            </a>
+          <div class="grid grid-cols-1 gap-4">
             <a
               href={`${adminPath}/rest-playground`}
               class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
@@ -394,7 +365,7 @@ const authItems = authCollections.map((slug) => ({
               </p>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 gap-4">
             <a
               href={`${adminPath}/graphql`}
               class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
@@ -422,42 +393,12 @@ const authItems = authCollections.map((slug) => ({
                       d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                   </svg>
                 </div>
-                <h4 class="font-medium text-[var(--kyro-text-primary)]">
-                  Playground
-                </h4>
-              </div>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Write & test queries
-              </p>
-            </a>
-            <a
-              href={`${adminPath}/graphql-explorer`}
-              class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
-            >
-              <div class="flex items-center gap-3 mb-2">
-                <div
-                  class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-500 group-hover:scale-110 transition-transform"
-                >
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                    ></path>
-                  </svg>
-                </div>
                 <h4 class="font-medium text-[var(--kyro-text-primary)]">
                   Explorer
                 </h4>
               </div>
               <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Schema documentation
+                Write & test queries
               </p>
             </a>
           </div>

package/src/pages/rest-playground.astro

@@ -1,8 +1,7 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { RestPlayground } from "../components/RestPlayground";
-
-import { adminPath, apiPath } from "../lib/paths";
+import { apiPath } from "../lib/paths";
 
 const collectionsResponse = await fetch(
   `${Astro.url.origin}${apiPath}/collections`,
@@ -12,32 +11,7 @@ const collections = collectionsData.collections || [];
 ---
 
 <AdminLayout title="REST Playground">
-  <div class="flex-1 overflow-hidden">
-    <!-- Header -->
-    <div class="mb-6 surface-tile">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h1
-            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-          >
-            REST Playground
-          </h1>
-          <p
-            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
-          >
-            Saved collections, history, and environment variables
-          </p>
-        </div>
-        <div class="flex items-center gap-4">
-        </div>
-      </div>
-    </div>
-
-    <!-- Playground Container -->
-    <div class="h-[calc(100vh-200px)] surface-tile overflow-hidden">
-      <div class="surface-tile h-full overflow-hidden">
-        <RestPlayground client:load collections={collections} />
-      </div>
-    </div>
+  <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
+    <RestPlayground client:load collections={collections} />
   </div>
 </AdminLayout>

package/src/styles/main.css

@@ -417,7 +417,7 @@
 
   .kyro-btn-danger:hover:not(:disabled) {
     background: var(--kyro-gray-900);
-    color: white;
+    color: var(--kyro-sidebar-text-active);
   }
 
   .kyro-btn-ghost {
@@ -431,14 +431,13 @@
   }
 
   .kyro-btn-success {
-    background: #10b981;
+    background: var(--kyro-success);
     color: white;
-    border-color: #10b981;
+    border-color: var(--kyro-success);
   }
 
   .kyro-btn-success:hover:not(:disabled) {
-    background: #059669;
-    border-color: #059669;
+    filter: brightness(0.85);
   }
 
   .kyro-btn-success:disabled {
@@ -448,14 +447,13 @@
   }
 
   .kyro-btn-warning {
-    background: #f59e0b;
+    background: var(--kyro-warning);
     color: white;
-    border-color: #f59e0b;
+    border-color: var(--kyro-warning);
   }
 
   .kyro-btn-warning:hover:not(:disabled) {
-    background: #d97706;
-    border-color: #d97706;
+    filter: brightness(0.85);
   }
 
   /* Cards & Tiles */
@@ -1464,6 +1462,8 @@
     color: white;
   }
 
+  .kyro-toast-accent { display: none; }
+
   /* Spinner — Monochrome */
   .kyro-spinner {
     animation: spin 0.8s linear infinite;
@@ -2053,4 +2053,27 @@
 /* Ensure NodeViews render correctly within ProseMirror */
 .tiptap-editor-wrapper .ProseMirror .node--component {
   display: block;
+}
+
+/* Floating action button */
+#kyro-fab {
+  animation: fab-enter 0.3s ease-out;
+}
+
+#kyro-fab.fab-hidden {
+  opacity: 0;
+  transform: scale(0.8);
+  pointer-events: none;
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+@keyframes fab-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.5) translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }