@rebasepro/studio 0.6.1 → 0.8.0

package/src/components/RebaseStudio.tsx

@@ -14,6 +14,7 @@ const SchemaVisualizer = lazy(() => import("./SchemaVisualizer/SchemaVisualizer"
 const BranchesView = lazy(() => import("./Branches/BranchesView").then(m => ({ default: m.BranchesView })));
 const ApiExplorer = lazy(() => import("./ApiExplorer/ApiExplorer").then(m => ({ default: m.ApiExplorer })));
 const LogsExplorer = lazy(() => import("./LogsExplorer/LogsExplorer").then(m => ({ default: m.LogsExplorer })));
+const ApiKeysView = lazy(() => import("./ApiKeys/ApiKeysView").then(m => ({ default: m.ApiKeysView })));
 
 import { StudioHomePage } from "./StudioHomePage";
 
@@ -34,7 +35,7 @@ export function RebaseStudio({ tools, homePage }: RebaseStudioConfig) {
 
     const devViews: AppView[] = useMemo(() => {
         const views: AppView[] = [];
-        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "api", "logs"];
+        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "api", "logs", "api-keys"];
         const suspense = (el: React.ReactNode) => <Suspense fallback={<CircularProgressCenter/>}>{el}</Suspense>;
 
         if (activeTools.includes("sql")) {
@@ -108,6 +109,14 @@ group: "Database",
 icon: "Activity",
 description: "Real-time system and query logs",
 view: suspense(<LogsExplorer/>) });
+        }
+        if (activeTools.includes("api-keys")) {
+            views.push({ slug: "api-keys",
+name: "API Keys",
+group: "Access Control",
+icon: "KeyRound",
+description: "Create and manage scoped API keys",
+view: suspense(<ApiKeysView/>) });
         }
         // Note: "schema" tool is auto-injected by RebaseShell when collectionEditor is enabled.
         // It is NOT registered here anymore.

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -58,7 +58,7 @@ export const SchemaBrowser = ({
                 ) : Object.entries(schemas).map(([schemaName, tables]) => (
                     <div key={schemaName} className="mb-2">
                         <div
-                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors"
+                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors"
                             onClick={() => setExpandedSchemas(prev => ({ ...prev,
 [schemaName]: !prev[schemaName] }))}
                         >
@@ -71,7 +71,7 @@ export const SchemaBrowser = ({
                                 {tables.map(table => (
                                     <div key={table.tableName}>
                                         <div
-                                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors group relative"
+                                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group relative"
                                             onClick={() => setExpandedTables(prev => ({ ...prev,
 [`${schemaName}.${table.tableName}`]: !prev[`${schemaName}.${table.tableName}`] }))}
                                         >
@@ -137,7 +137,7 @@ export const SchemaBrowser = ({
                                         {expandedTables[`${schemaName}.${table.tableName}`] && (
                                             <div className={cls("ml-5 mt-1 space-y-0.5 border-l", defaultBorderMixin)}>
                                                 {table.columns.map(col => (
-                                                    <div key={col.name} className="flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-950 rounded-r relative min-h-[28px]">
+                                                    <div key={col.name} className="flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-900 rounded-r relative min-h-[28px]">
                                                         <svg className="w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 4.5v15m6-15v15m-10.5-1.5h15c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125h-15c-.621 0-1.125.504-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125Z"/></svg>
                                                         <Typography variant="caption" className="text-text-primary dark:text-text-primary-dark text-[11px] truncate flex-grow mr-2">{col.name}</Typography>
                                                         <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark text-[9px] truncate mr-1 uppercase shrink-0" title={col.dataType}>{col.dataType}</Typography>

package/src/components/StorageView/StorageView.tsx

@@ -31,6 +31,8 @@ import {
     PlusIcon,
     RefreshCwIcon,
     ResizablePanels,
+    Select,
+    SelectItem,
     TextField,
     Tooltip,
     Trash2Icon,
@@ -39,8 +41,8 @@ import {
     VideoIcon,
     XIcon
 } from "@rebasepro/ui";
-import { useStorageSource, useSnackbarController, ErrorView, useApiConfig } from "@rebasepro/core";
-import type { StorageListResult } from "@rebasepro/types";
+import { useStorageSource, useStorageSources, useSnackbarController, ErrorView, useApiConfig } from "@rebasepro/core";
+import { DEFAULT_STORAGE_SOURCE_KEY, type StorageListResult } from "@rebasepro/types";
 import { useSearchParams } from "react-router-dom";
 import { useDropzone } from "react-dropzone";
 
@@ -469,9 +471,22 @@ function FilePreviewPanel({
 // ──────────────────────────────────────────────
 
 export const StorageView = () => {
-    const storageSource = useStorageSource();
+    const defaultStorageSource = useStorageSource();
+    const storageSources = useStorageSources();
     const snackbarController = useSnackbarController();
 
+    // Available backends to browse. Always includes the default; named
+    // sources come from `<Rebase storageSources={...}>`.
+    const sourceKeys = useMemo(() => {
+        const keys = Object.keys(storageSources.sources);
+        if (!keys.includes(DEFAULT_STORAGE_SOURCE_KEY)) keys.unshift(DEFAULT_STORAGE_SOURCE_KEY);
+        return keys;
+    }, [storageSources.sources]);
+
+    const [selectedSourceKey, setSelectedSourceKey] = useState<string>(DEFAULT_STORAGE_SOURCE_KEY);
+
+    const storageSource = storageSources.sources[selectedSourceKey] ?? defaultStorageSource;
+
     // Navigation
     const [searchParams, setSearchParams] = useSearchParams();
     const currentPath = searchParams.get("path") || "";
@@ -559,8 +574,10 @@ export const StorageView = () => {
     }, []);
 
     useEffect(() => {
+        // `selectedSourceKey` is a dep so switching backend re-lists; the
+        // ref-sync effect above runs first, so `storageSourceRef` is current.
         fetchContents(currentPath);
-    }, [currentPath, fetchContents]);
+    }, [currentPath, fetchContents, selectedSourceKey]);
 
     // Navigate to path
     const handleNavigate = useCallback((path: string) => {
@@ -1266,6 +1283,28 @@ message: e instanceof Error ? e.message : String(e) });
 
                                 <div className="flex shrink-0 items-center justify-end gap-1.5 pr-1">
 
+                                    {/* Backend picker — only shown when more than one storage source is available */}
+                                    {sourceKeys.length > 1 && (
+                                        <Select
+                                            size="small"
+                                            position="item-aligned"
+                                            value={selectedSourceKey}
+                                            onValueChange={(value) => {
+                                                if (value) setSelectedSourceKey(value);
+                                            }}
+                                            renderValue={(key) => {
+                                                const label = storageSources.registry[key]?.label;
+                                                return label ?? (key === DEFAULT_STORAGE_SOURCE_KEY ? "Default" : key);
+                                            }}>
+                                            {sourceKeys.map((key) => (
+                                                <SelectItem key={key} value={key}>
+                                                    {storageSources.registry[key]?.label
+                                                        ?? (key === DEFAULT_STORAGE_SOURCE_KEY ? "Default" : key)}
+                                                </SelectItem>
+                                            ))}
+                                        </Select>
+                                    )}
+
                                     <Tooltip title="Grid view">
                                         <IconButton
                                             size="small"

package/src/components/StudioHomePage.tsx

@@ -1,7 +1,6 @@
 import type { HomePageSection, PluginGenericProps } from "@rebasepro/types";
-import React, { useEffect } from "react";
-import { Card, cls, Container, Typography } from "@rebasepro/ui";
-import { ArrowRightIcon, iconSize } from "@rebasepro/ui";
+import React, { useEffect, useMemo, useState } from "react";
+import { Card, cls, Container, ExpandablePanel, Typography } from "@rebasepro/ui";
 import { IconForView, useRebaseContext, useRestoreScroll, useSlot } from "@rebasepro/core";
 import { useNavigate } from "react-router-dom";
 import { useStudioBreadcrumbs, SchemaDriftBanner } from "@rebasepro/core";
@@ -19,16 +18,12 @@ interface StudioTool {
 
 interface StudioSection {
     label: string;
-    dotColor: string;
-    iconColor: string;
     tools: StudioTool[];
 }
 
 const SECTIONS: StudioSection[] = [
     {
         label: "Database",
-        dotColor: "bg-emerald-400",
-        iconColor: "text-emerald-400",
         tools: [
             { path: "/schema",
 name: "Collections",
@@ -58,8 +53,6 @@ icon: "Activity" }
     },
     {
         label: "Compute",
-        dotColor: "bg-blue-400",
-        iconColor: "text-blue-400",
         tools: [
             { path: "/js",
 name: "JS Console",
@@ -73,8 +66,6 @@ icon: "Clock" }
     },
     {
         label: "API",
-        dotColor: "bg-violet-400",
-        iconColor: "text-violet-400",
         tools: [
             { path: "/api",
 name: "API Explorer",
@@ -84,8 +75,6 @@ icon: "BookOpen" }
     },
     {
         label: "Storage",
-        dotColor: "bg-amber-400",
-        iconColor: "text-amber-400",
         tools: [
             { path: "/storage",
 name: "Storage",
@@ -95,8 +84,6 @@ icon: "HardDrive" }
     },
     {
         label: "Access Control",
-        dotColor: "bg-rose-400",
-        iconColor: "text-rose-400",
         tools: [
             { path: "/users",
 name: "Users",
@@ -105,13 +92,49 @@ icon: "group" },
             { path: "/roles",
 name: "Roles",
 description: "Create and configure fine-grained access permissions",
-icon: "ShieldEllipsis" }
+icon: "ShieldEllipsis" },
+            { path: "/api-keys",
+name: "API Keys",
+description: "Create and manage scoped keys for machine-to-machine access",
+icon: "KeyRound" }
         ]
     }
 ];
 
 /* ═══════════════════════════════════════════════════════════════ */
 
+const COLLAPSED_STORAGE_KEY = "rebase-studio-home-collapsed";
+
+function useStudioCollapsedGroups(groupNames: string[]) {
+    const [collapsed, setCollapsed] = useState<Set<string>>(() => {
+        try {
+            const stored = localStorage.getItem(COLLAPSED_STORAGE_KEY);
+            return stored ? new Set(JSON.parse(stored)) : new Set<string>();
+        } catch {
+            return new Set<string>();
+        }
+    });
+
+    const isGroupCollapsed = (name: string) => collapsed.has(name);
+
+    const toggleGroupCollapsed = (name: string) => {
+        setCollapsed(prev => {
+            const next = new Set(prev);
+            if (next.has(name)) {
+                next.delete(name);
+            } else {
+                next.add(name);
+            }
+            try {
+                localStorage.setItem(COLLAPSED_STORAGE_KEY, JSON.stringify([...next]));
+            } catch { /* noop */ }
+            return next;
+        });
+    };
+
+    return { isGroupCollapsed, toggleGroupCollapsed };
+}
+
 export function StudioHomePage({
     additionalActions,
     additionalChildrenStart,
@@ -139,8 +162,20 @@ export function StudioHomePage({
 
     const pluginActions = useSlot("home.actions", sectionProps);
 
+    const filteredSections = useMemo(
+        () => SECTIONS.filter(s => !hiddenGroups?.includes(s.label)),
+        [hiddenGroups]
+    );
+
+    const groupNames = useMemo(
+        () => filteredSections.map(s => s.label),
+        [filteredSections]
+    );
+
+    const { isGroupCollapsed, toggleGroupCollapsed } = useStudioCollapsedGroups(groupNames);
+
     return (
-        <div ref={containerRef} className="py-2 overflow-auto h-full w-full">
+        <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-50 dark:bg-surface-800">
             <Container maxWidth="6xl">
                 <div className="mb-4 flex flex-col gap-2">
                     <SchemaDriftBanner />
@@ -156,77 +191,95 @@ export function StudioHomePage({
                 {additionalChildrenStart}
 
                 {/* ── Tool sections ── */}
-                <div className="flex flex-col gap-8 pt-2">
-                    {SECTIONS.map((section) => (
-                        <section key={section.label} aria-label={section.label}>
-                            {/* Section header */}
-                            <Typography
-                                variant="caption"
-                                component="h2"
-                                color="secondary"
-                                className="py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
-                            >
-                                {section.label}
-                            </Typography>
-
-                            {/* Card grid */}
-                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-2">
-                                {section.tools.map((tool) => (
-                                    <Card
-                                        key={tool.path}
-                                        onClick={() => {
-                                            navigate(tool.path);
-                                            context.analyticsController?.onAnalyticsEvent?.(
-                                                "home_navigate_to_view",
-                                                { path: tool.path }
-                                            );
-                                        }}
+                {filteredSections.map((section) => {
+                    const sectionCollapsed = isGroupCollapsed(section.label);
+
+                    return (
+                        <div key={section.label} className="my-10">
+                            <ExpandablePanel
+                                invisible
+                                expanded={!sectionCollapsed}
+                                onExpandedChange={(open) => {
+                                    if (open !== !sectionCollapsed) {
+                                        toggleGroupCollapsed(section.label);
+                                    }
+                                }}
+                                className="mt-6"
+                                titleClassName={cls(
+                                    "min-h-0 p-0 border-none",
+                                    "rounded flex items-center justify-between w-full",
+                                    "hover:bg-transparent",
+                                    "cursor-pointer select-none",
+                                    sectionCollapsed && "bg-surface-100 dark:bg-surface-900/50"
+                                )}
+                                innerClassName="mt-4 pt-0"
+                                title={
+                                    <Typography
+                                        variant="caption"
+                                        component="h2"
+                                        color="secondary"
                                         className={cls(
-                                            "h-full px-4 py-2.5 cursor-pointer transition-all duration-200 ease-in-out",
-                                            "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5"
+                                            "px-4 py-1 rounded",
+                                            "font-medium text-[10px] uppercase tracking-[0.08em] text-primary/50 dark:text-primary/70"
                                         )}
                                     >
-                                        <div className="flex flex-col items-start h-full">
-                                            <div className="grow w-full">
-                                                {/* Icon */}
-                                                <div className={cls("h-6 flex items-center", section.iconColor)}>
-                                                    <IconForView
-                                                        collectionOrView={{ slug: tool.path,
-name: tool.name,
-icon: tool.icon }}
-                                                        size="small"
-                                                    />
-                                                </div>
+                                        {section.label}
+                                    </Typography>
+                                }
+                            >
+                                <div className="mt-4 pt-0">
+                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                        {section.tools.map((tool) => (
+                                            <Card
+                                                key={tool.path}
+                                                onClick={() => {
+                                                    navigate(tool.path);
+                                                    context.analyticsController?.onAnalyticsEvent?.(
+                                                        "home_navigate_to_view",
+                                                        { path: tool.path }
+                                                    );
+                                                }}
+                                                className={cls(
+                                                    "group h-full p-4 cursor-pointer transition-colors duration-150 ease-in-out",
+                                                    "hover:bg-primary/5 dark:hover:bg-primary/5"
+                                                )}
+                                            >
+                                                <div className="flex flex-col h-full">
+                                                    {/* Header: icon + title */}
+                                                    <div className="flex items-center w-full justify-between mb-1">
+                                                        <div className="flex items-center gap-3">
+                                                            <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 transition-colors duration-150 group-hover:text-primary dark:group-hover:text-primary">
+                                                                <IconForView
+                                                                    collectionOrView={{ slug: tool.path, name: tool.name, icon: tool.icon }}
+                                                                    size="small"
+                                                                />
+                                                            </div>
+                                                            <Typography variant="subtitle1" component="h2">
+                                                                {tool.name}
+                                                            </Typography>
+                                                        </div>
+                                                    </div>
 
-                                                {/* Title */}
-                                                <Typography
-                                                    gutterBottom
-                                                    variant="subtitle1"
-                                                    className="mt-1 font-semibold"
-                                                    component="h2"
-                                                >
-                                                    {tool.name}
-                                                </Typography>
-
-                                                {/* Description */}
-                                                <Typography variant="caption" color="secondary" component="div">
-                                                    {tool.description}
-                                                </Typography>
-                                            </div>
-
-                                            {/* Arrow */}
-                                            <div style={{ alignSelf: "flex-end" }}>
-                                                <div className="p-2">
-                                                    <ArrowRightIcon className="text-primary" size={iconSize.small}/>
+                                                    {/* Description indented to align with title */}
+                                                    <div className="pl-8">
+                                                        {tool.description && (
+                                                            <Typography variant="caption" color="secondary" component="div">
+                                                                {tool.description}
+                                                            </Typography>
+                                                        )}
+                                                    </div>
+
+                                                    {/* Spacer */}
+                                                    <div className="grow"/>
                                                 </div>
-                                            </div>
-                                        </div>
-                                    </Card>
-                                ))}
-                            </div>
-                        </section>
-                    ))}
-                </div>
+                                            </Card>
+                                        ))}
+                                    </div>
+                                </div>
+                            </ExpandablePanel>
+                        </div>
+                    );
+                })}
 
                 {/* ── SDK Quick Start ── */}
                 <div className="mt-10 mb-6">
@@ -235,7 +288,10 @@ icon: tool.icon }}
                             variant="caption"
                             component="h2"
                             color="secondary"
-                            className="py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                            className={cls(
+                                "px-4 py-1 rounded",
+                                "font-medium text-[10px] uppercase tracking-[0.08em] text-primary/50 dark:text-primary/70"
+                            )}
                         >
                             Quick Start
                         </Typography>
@@ -281,7 +337,10 @@ icon: tool.icon }}
                             variant="caption"
                             component="h2"
                             color="secondary"
-                            className="p-4 py-2 rounded font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                            className={cls(
+                                "px-4 py-1 rounded",
+                                "font-medium text-[10px] uppercase tracking-[0.08em] text-primary/50 dark:text-primary/70"
+                            )}
                         >
                             {s.title}
                         </Typography>

package/src/utils/pgColumnToProperty.ts

@@ -1,4 +1,4 @@
-import type { EntityCollection, Property, StringProperty, NumberProperty, ArrayProperty, TableColumnInfo, TableMetadata, SecurityOperation, SecurityRule } from "@rebasepro/types";
+import type { EntityCollection, PostgresProperties, Property, StringProperty, NumberProperty, ArrayProperty, TableColumnInfo, TableMetadata, SecurityOperation, SecurityRule } from "@rebasepro/types";
 
 /**
  * Maps a PostgreSQL column data type to a Rebase property type.
@@ -301,7 +301,7 @@ export function buildCollectionFromTableMetadata(
         name: prettifiedName,
         slug: tableName,
         table: tableName,
-        properties,
+        properties: properties as PostgresProperties,
         propertiesOrder,
         ...(relations.length > 0 ? { relations } : {}),
         ...(securityRules.length > 0 ? { securityRules } : {})