diff --git a/typescript/packages/jumble/src/components/ActionBar.tsx b/typescript/packages/jumble/src/components/ActionBar.tsx new file mode 100644 index 000000000..7a6e11d5e --- /dev/null +++ b/typescript/packages/jumble/src/components/ActionBar.tsx @@ -0,0 +1,65 @@ +import { animated } from "@react-spring/web"; +import { useActionManager } from "../contexts/ActionManagerContext"; +import { NavLink } from "react-router-dom"; + +export function ActionBar() { + const { availableActions } = useActionManager(); + + return ( +
+ {availableActions.map((action) => { + // For NavLink actions + if (action.id.startsWith("link:") && action.to) { + return ( +
+ {action.icon} +
+ {action.label} +
+
+ ); + } + + // For regular button actions + return ( +
+ {action.icon} +
+ {action.label} +
+
+ ); + })} +
+ ); +} diff --git a/typescript/packages/jumble/src/components/CharmRunner.tsx b/typescript/packages/jumble/src/components/CharmRunner.tsx index f0dcb57a3..e4dba34e9 100644 --- a/typescript/packages/jumble/src/components/CharmRunner.tsx +++ b/typescript/packages/jumble/src/components/CharmRunner.tsx @@ -153,7 +153,7 @@ export function CharmRenderer({ charm, className = "" }: CharmRendererProps) { ) : null} -
+
); } diff --git a/typescript/packages/jumble/src/components/Publish.tsx b/typescript/packages/jumble/src/components/Publish.tsx new file mode 100644 index 000000000..4cc2c90dd --- /dev/null +++ b/typescript/packages/jumble/src/components/Publish.tsx @@ -0,0 +1,114 @@ +// hooks/useCharmPublisher.tsx +import { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import { useCharmManager } from "@/contexts/CharmManagerContext.tsx"; +import { TYPE } from "@commontools/builder"; +import { saveSpell } from "@/services/spellbook.ts"; +import { ShareDialog } from "@/components/spellbook/ShareDialog.tsx"; + +function useCharmPublisher() { + const { charmManager } = useCharmManager(); + const [isShareDialogOpen, setIsShareDialogOpen] = useState(false); + const [isPublishing, setIsPublishing] = useState(false); + const navigate = useNavigate(); + const [currentCharmId, setCurrentCharmId] = useState
(); + const [currentCharmName, setCurrentCharmName] = useState
(null); + + useEffect(() => { + const handlePublishCharm = (event: CustomEvent) => { + const { charmId, charmName } = event.detail || {}; + if (charmId) { + setCurrentCharmId(charmId); + setCurrentCharmName(charmName || null); + setIsShareDialogOpen(true); + } + }; + + window.addEventListener("publish-charm", handlePublishCharm as EventListener); + + return () => { + window.removeEventListener("publish-charm", handlePublishCharm as EventListener); + }; + }, []); + + const handleShare = async (data: { title: string; description: string; tags: string[] }) => { + if (!currentCharmId) return; + + setIsPublishing(true); + try { + const charm = await charmManager.get(currentCharmId); + if (!charm) throw new Error("Charm not found"); + const spell = charm.getSourceCell()?.get(); + const spellId = spell?.[TYPE]; + if (!spellId) throw new Error("Spell not found"); + + const success = await saveSpell(spellId, spell, data.title, data.description, data.tags); + + if (success) { + const fullUrl = `${window.location.protocol}//${window.location.host}/spellbook/${spellId}`; + try { + await navigator.clipboard.writeText(fullUrl); + } catch (err) { + console.error("Failed to copy to clipboard:", err); + } + navigate(`/spellbook/${spellId}`); + } else { + throw new Error("Failed to publish"); + } + } catch (error) { + console.error("Failed to publish:", error); + } finally { + setIsPublishing(false); + setIsShareDialogOpen(false); + } + }; + + return { + isShareDialogOpen, + setIsShareDialogOpen, + isPublishing, + handleShare, + defaultTitle: currentCharmName || "", + }; +} + +export function CharmPublisher() { + const { isShareDialogOpen, setIsShareDialogOpen, isPublishing, handleShare, defaultTitle } = + useCharmPublisher(); + + return ( +
setIsShareDialogOpen(false)} + onSubmit={handleShare} + defaultTitle={defaultTitle} + isPublishing={isPublishing} + /> + ); +} + +// Usage example for a button that triggers the publish flow: +// +// import { LuShare2 } from "react-icons/lu"; +// +// function PublishButton({ charmId, charmName }: { charmId?: string, charmName?: string }) { +// if (!charmId) return null; +// +// const handleClick = () => { +// window.dispatchEvent(new CustomEvent('publish-charm', { +// detail: { charmId, charmName } +// })); +// }; +// +// return ( +//
+//
+//
+// Publish +//
+//
+// ); +// } diff --git a/typescript/packages/jumble/src/components/ShellHeader.tsx b/typescript/packages/jumble/src/components/ShellHeader.tsx index df2e52616..1d3970e42 100644 --- a/typescript/packages/jumble/src/components/ShellHeader.tsx +++ b/typescript/packages/jumble/src/components/ShellHeader.tsx @@ -1,86 +1,19 @@ -import { useState, useEffect } from "react"; import { NavLink } from "react-router-dom"; -import { LuPencil, LuShare2 } from "react-icons/lu"; import ShapeLogo from "@/assets/ShapeLogo.svg"; import { NavPath } from "@/components/NavPath.tsx"; -import { ShareDialog } from "@/components/spellbook/ShareDialog.tsx"; import { useCharmManager } from "@/contexts/CharmManagerContext.tsx"; -import { NAME, TYPE } from "@commontools/builder"; -import { useNavigate } from "react-router-dom"; -import { saveSpell } from "@/services/spellbook.ts"; import { User } from "@/components/User.tsx"; import { useSyncedStatus } from "@/hooks/use-synced-status"; type ShellHeaderProps = { replicaName?: string; charmId?: string; - isDetailActive: boolean; - togglePath: string; }; -export function ShellHeader({ - replicaName, - charmId, - isDetailActive, - togglePath, -}: ShellHeaderProps) { +export function ShellHeader({ replicaName, charmId }: ShellHeaderProps) { const { charmManager } = useCharmManager(); - const [isShareDialogOpen, setIsShareDialogOpen] = useState(false); - const [charmName, setCharmName] = useState
(null); - const [isPublishing, setIsPublishing] = useState(false); const { isSyncing, lastSyncTime } = useSyncedStatus(charmManager); - const navigate = useNavigate(); - useEffect(() => { - let mounted = true; - let cancel: (() => void) | undefined; - async function getCharm() { - if (charmId) { - const charm = await charmManager.get(charmId); - cancel = charm?.key(NAME).sink((value) => { - if (mounted) setCharmName(value ?? null); - }); - } - } - getCharm(); - - return () => { - mounted = false; - cancel?.(); - }; - }, [charmId, charmManager]); - - const handleShare = async (data: { title: string; description: string; tags: string[] }) => { - if (!charmId) return; - - setIsPublishing(true); - try { - const charm = await charmManager.get(charmId); - if (!charm) throw new Error("Charm not found"); - const spell = charm.getSourceCell()?.get(); - const spellId = spell?.[TYPE]; - if (!spellId) throw new Error("Spell not found"); - - const success = await saveSpell(spellId, spell, data.title, data.description, data.tags); - - if (success) { - const fullUrl = `${window.location.protocol}//${window.location.host}/spellbook/${spellId}`; - try { - await navigator.clipboard.writeText(fullUrl); - } catch (err) { - console.error("Failed to copy to clipboard:", err); - } - navigate(`/spellbook/${spellId}`); - } else { - throw new Error("Failed to publish"); - } - } catch (error) { - console.error("Failed to publish:", error); - } finally { - setIsPublishing(false); - setIsShareDialogOpen(false); - } - }; return (
@@ -110,32 +43,7 @@ export function ShellHeader({
- {charmId && ( - <> -
-
-
- Edit -
-
-
setIsShareDialogOpen(true)} - className="w-10 h-10 flex items-center justify-center rounded-lg transition-colors relative group bg-transparent text-black hover:bg-gray-200 z-10 cursor-pointer" - > -
-
- Publish -
-
- - )} +
- -
setIsShareDialogOpen(false)} - onSubmit={handleShare} - defaultTitle={charmName || ""} - isPublishing={isPublishing} - />
); } diff --git a/typescript/packages/jumble/src/components/User.tsx b/typescript/packages/jumble/src/components/User.tsx index 408c48c18..ecfc62c6d 100644 --- a/typescript/packages/jumble/src/components/User.tsx +++ b/typescript/packages/jumble/src/components/User.tsx @@ -11,7 +11,7 @@ export function User() { if (!user) { return; } - let did = user.verifier().did(); + const did = user.verifier().did(); if (!ignore) { setDid(did); } @@ -25,10 +25,10 @@ export function User() { let h = "0"; let s = "50%"; - let l = "50%"; + const l = "50%"; if (did) { - let index = did.length - 4; + const index = did.length - 4; // DID string is `did:key:z{REST}`. Taking the last 3 characters, // we use the first two added for hue. h = `${did.charCodeAt(index) + did.charCodeAt(index + 1)}`; diff --git a/typescript/packages/jumble/src/contexts/ActionManagerContext.tsx b/typescript/packages/jumble/src/contexts/ActionManagerContext.tsx new file mode 100644 index 000000000..d03919fcd --- /dev/null +++ b/typescript/packages/jumble/src/contexts/ActionManagerContext.tsx @@ -0,0 +1,110 @@ +import React, { createContext, useContext, useCallback, useState, useEffect, useMemo } from "react"; + +export type KeyCombo = { + key: string; + ctrl?: boolean; + alt?: boolean; + shift?: boolean; + meta?: boolean; +}; + +export type Action = { + id: string; + label: string; + icon: React.ReactNode; + onClick: () => void; + predicate?: () => boolean; + priority?: number; + to?: string; // For NavLink actions + keyCombo?: KeyCombo; // Keyboard shortcut +}; + +type ActionManagerContextType = { + registerAction: (action: Action) => () => void; // Returns unregister function + availableActions: Action[]; +}; + +const ActionManagerContext = createContext
(null); + +export function ActionManagerProvider({ children }: { children: React.ReactNode }) { + const [actions, setActions] = useState
([]); + + // Combined register function that returns an unregister function + const registerAction = useCallback((action: Action) => { + setActions((prev) => { + // Don't add if it already exists with the same ID + if (prev.some((a) => a.id === action.id)) { + return prev; + } + return [...prev, action]; + }); + + // Handle keyboard shortcut registration + const handleKeyDown = (event: KeyboardEvent) => { + const combo = action.keyCombo; + if (!combo) return; + + if ( + event.key.toLowerCase() === combo.key.toLowerCase() && + !!event.ctrlKey === !!combo.ctrl && + !!event.altKey === !!combo.alt && + !!event.shiftKey === !!combo.shift && + !!event.metaKey === !!combo.meta + ) { + if (!action.predicate || action.predicate()) { + event.preventDefault(); + action.onClick(); + } + } + }; + + // Register keyboard listener if keyCombo exists + if (action.keyCombo) { + window.addEventListener("keydown", handleKeyDown); + } + + // Return a function to unregister this action and clean up event listeners + return () => { + setActions((prev) => prev.filter((a) => a.id !== action.id)); + if (action.keyCombo) { + window.removeEventListener("keydown", handleKeyDown); + } + }; + }, []); + + // Calculate available actions + const availableActions = useMemo(() => { + return actions + .filter((action) => !action.predicate || action.predicate()) + .sort((a, b) => (b.priority || 0) - (a.priority || 0)); + }, [actions]); + + const value = useMemo( + () => ({ + registerAction, + availableActions, + }), + [registerAction, availableActions], + ); + + return
{children}
; +} + +export function useActionManager() { + const context = useContext(ActionManagerContext); + if (!context) { + throw new Error("useActionManager must be used within an ActionManagerProvider"); + } + return context; +} + +// Simple hook for a component to register an action +export function useAction(action: Action) { + const { registerAction } = useActionManager(); + + // Register on mount, unregister on unmount + useEffect(() => { + const unregister = registerAction(action); + return unregister; + }, [action, registerAction]); // Only re-register if ID changes +} diff --git a/typescript/packages/jumble/src/main.tsx b/typescript/packages/jumble/src/main.tsx index b5d14b1f4..df717d36d 100644 --- a/typescript/packages/jumble/src/main.tsx +++ b/typescript/packages/jumble/src/main.tsx @@ -20,6 +20,7 @@ import GenerateJSONView from "@/views/utility/GenerateJSONView.tsx"; import SpellbookIndexView from "@/views/spellbook/SpellbookIndexView.tsx"; import SpellbookDetailView from "@/views/spellbook/SpellbookDetailView.tsx"; import SpellbookLaunchView from "./views/spellbook/SpellbookLaunchView.tsx"; +import { ActionManagerProvider } from "./contexts/ActionManagerContext.tsx"; setupIframe(); @@ -27,52 +28,54 @@ createRoot(document.getElementById("root")!).render(
-
-
-
-
- {/* Redirect root to common-knowledge */} -
} /> +
+
+
+
+
+ {/* Redirect root to common-knowledge */} +
} /> -
-
-
- } - > -
} /> -
} /> -
} /> -
+
+
+
+ } + > +
} /> +
} /> +
} /> +
- {/* Spellbook routes */} -
} /> -
} /> -
-
-
- } - /> + {/* Spellbook routes */} +
} /> +
} /> +
+
+
+ } + /> - {/* internal tools / experimental routes */} -
} /> + {/* internal tools / experimental routes */} +
} /> - {/* Photoflow routes preserved */} -
} /> -
} /> -
} - /> -
-
-
-
+ {/* Photoflow routes preserved */} +
} /> +
} /> +
} + /> +
+
+
+
+
, diff --git a/typescript/packages/jumble/src/views/CharmDetailView.tsx b/typescript/packages/jumble/src/views/CharmDetailView.tsx index 81fa580ac..db7812c2d 100644 --- a/typescript/packages/jumble/src/views/CharmDetailView.tsx +++ b/typescript/packages/jumble/src/views/CharmDetailView.tsx @@ -1,5 +1,13 @@ import { saveNewRecipeVersion, IFrameRecipe, Charm, getIframeRecipe } from "@commontools/charm"; -import React, { useEffect, useState, useCallback, useRef } from "react"; +import React, { + useEffect, + useState, + useCallback, + useRef, + memo, + createContext, + useContext, +} from "react"; import { useParams, useLocation, useNavigate } from "react-router-dom"; import { useCharmManager } from "@/contexts/CharmManagerContext.tsx"; import { LoadingSpinner } from "@/components/Loader.tsx"; @@ -10,17 +18,13 @@ import { CharmRenderer } from "@/components/CharmRunner.tsx"; import { iterateCharm } from "@/utils/charm-operations.ts"; import { charmId } from "@/utils/charms.ts"; import { DitheredCube } from "@/components/DitherCube.tsx"; -import { VariantTray } from "@/components/VariantTray.tsx"; import { generateCharmSuggestions, type CharmSuggestion, } from "@/utils/prompt-library/charm-suggestions.ts"; import { Cell } from "@commontools/runner"; -type Tab = "iterate" | "code" | "data"; -interface IterationTabProps { - charm: Cell
; -} +type Tab = "iterate" | "code" | "data"; const variantModels = [ "anthropic:claude-3-5-sonnet-latest", @@ -29,99 +33,178 @@ const variantModels = [ "google:gemini-2.0-pro", ] as const; -const IterationTab: React.FC
= ({ charm }) => { - const { replicaName } = useParams(); - const navigate = useNavigate(); - const { charmManager } = useCharmManager(); +// Memoized CharmRenderer to prevent unnecessary re-renders +const MemoizedCharmRenderer = memo(CharmRenderer); + +// =================== Context for Shared State =================== +interface IterationContextType { + iterationInput: string; + setIterationInput: (input: string) => void; + selectedModel: string; + setSelectedModel: (model: string) => void; + showVariants: boolean; + setShowVariants: (show: boolean) => void; + loading: boolean; + variants: Cell
[]; + selectedVariant: Cell
| null; + setSelectedVariant: (variant: Cell
| null) => void; + expectedVariantCount: number; + handleIterate: () => void; + handleCancelVariants: () => void; +} - const [iterationInput, setIterationInput] = useState(""); - const [selectedModel, setSelectedModel] = useState("anthropic:claude-3-7-sonnet-latest"); - const [showVariants, setShowVariants] = useState(false); - const [loading, setLoading] = useState(false); - const [variants, setVariants] = useState
[]>([]); - const [selectedVariant, setSelectedVariant] = useState
| null>(null); - const [suggestions, setSuggestions] = useState
([]); - const [loadingSuggestions, setLoadingSuggestions] = useState(false); - const [expectedVariantCount, setExpectedVariantCount] = useState(0); - const [pendingSuggestion, setPendingSuggestion] = useState
(null); +const IterationContext = createContext
(null); - const handleIterate = useCallback(async () => { - const handleVariants = async () => { - setLoading(true); - setVariants([]); - setSelectedVariant(charm); +const useIterationContext = () => { + const context = useContext(IterationContext); + if (!context) { + throw new Error("useIterationContext must be used within an IterationProvider"); + } + return context; +}; - try { - const variantPromises = variantModels.map((model) => - iterateCharm(charmManager, charmId(charm)!, replicaName!, iterationInput, false, model), - ); +// =================== Custom Hooks =================== + +// Hook for managing bottom sheet functionality +function useBottomSheet(initialHeight = 420) { + const [sheetHeight, setSheetHeight] = useState
(initialHeight); + const [isResizing, setIsResizing] = useState(false); + const resizeStartY = useRef
(null); + const startHeight = useRef
(null); + + const handleResizeStart = useCallback( + (e: React.MouseEvent) => { + e.preventDefault(); + resizeStartY.current = e.clientY; + startHeight.current = sheetHeight; + setIsResizing(true); + + // Add a layer over the entire document to capture events + const overlay = document.createElement("div"); + overlay.id = "resize-overlay"; + overlay.style.position = "fixed"; + overlay.style.top = "0"; + overlay.style.left = "0"; + overlay.style.width = "100%"; + overlay.style.height = "100%"; + overlay.style.zIndex = "9999"; + overlay.style.cursor = "ns-resize"; + document.body.appendChild(overlay); + + const handleResizeMove = (e: MouseEvent) => { + if (resizeStartY.current !== null && startHeight.current !== null) { + const diff = resizeStartY.current - e.clientY; + const newHeight = Math.max( + 150, + Math.min(window.innerHeight * 0.8, startHeight.current + diff), + ); + setSheetHeight(newHeight); + } + }; - // Instead of waiting for all promises, handle them as they complete - let first = true; - variantPromises.forEach(async (promise) => { - try { - const path = await promise; - if (path) { - const id = path.split("/").pop()!; - const newCharm = await charmManager.get(id); - if (newCharm) { - setVariants((prev) => [...prev, newCharm]); - // Set the first completed variant as selected if none selected - if (first) { - setSelectedVariant(newCharm); - first = false; - } - } - } - } catch (error) { - console.error("Variant generation error:", error); - } - }); - } catch (error) { - console.error("Variants error:", error); - } finally { - setLoading(false); - } - }; + const handleResizeEnd = () => { + resizeStartY.current = null; + startHeight.current = null; + setIsResizing(false); - if (showVariants) { - setExpectedVariantCount(variantModels.length); - setVariants([]); - handleVariants(); - } else { - if (!iterationInput) return; - setLoading(true); - try { - const newPath = await iterateCharm( - charmManager, - charmId(charm)!, - replicaName!, - iterationInput, - false, - selectedModel, - ); - if (newPath) { - navigate(`${newPath}/detail#iterate`); + // Remove overlay + const overlay = document.getElementById("resize-overlay"); + if (overlay) { + document.body.removeChild(overlay); } - } catch (error) { - console.error("Iteration error:", error); - } finally { - setLoading(false); + + document.removeEventListener("mousemove", handleResizeMove); + document.removeEventListener("mouseup", handleResizeEnd); + }; + + document.addEventListener("mousemove", handleResizeMove); + document.addEventListener("mouseup", handleResizeEnd); + }, + [sheetHeight], + ); + + const handleTouchResizeStart = useCallback( + (e: React.TouchEvent) => { + e.preventDefault(); + if (e.touches.length === 1) { + resizeStartY.current = e.touches[0].clientY; + startHeight.current = sheetHeight; + setIsResizing(true); } - } - }, [showVariants, iterationInput, selectedModel, charmManager, charm, replicaName, navigate]); + const handleTouchMove = (e: TouchEvent) => { + if ( + resizeStartY.current !== null && + startHeight.current !== null && + e.touches.length === 1 + ) { + const diff = resizeStartY.current - e.touches[0].clientY; + const newHeight = Math.max( + 150, + Math.min(window.innerHeight * 0.8, startHeight.current + diff), + ); + setSheetHeight(newHeight); + } + }; + + const handleTouchEnd = () => { + resizeStartY.current = null; + startHeight.current = null; + setIsResizing(false); + document.removeEventListener("touchmove", handleTouchMove); + document.removeEventListener("touchend", handleTouchEnd); + }; + + document.addEventListener("touchmove", handleTouchMove, { passive: false }); + document.addEventListener("touchend", handleTouchEnd); + }, + [sheetHeight], + ); + + return { + sheetHeight, + isResizing, + handleResizeStart, + handleTouchResizeStart, + }; +} + +// Hook for tab management +function useTabNavigation() { + const location = useLocation(); + const navigate = useNavigate(); + + const [activeTab, setActiveTab] = useState
((location.hash.slice(1) as Tab) || "iterate"); + + useEffect(() => { + setActiveTab((location.hash.slice(1) as Tab) || "iterate"); + }, [location.hash]); + + const handleTabChange = useCallback( + (tab: Tab) => { + navigate(`${location.pathname}#${tab}`); + setActiveTab(tab); + }, + [location.pathname, navigate], + ); + + return { activeTab, handleTabChange }; +} + +// Hook for managing suggestions +function useSuggestions(charm: Cell
| null) { + const [suggestions, setSuggestions] = useState
([]); + const [loadingSuggestions, setLoadingSuggestions] = useState(false); const suggestionsLoadedRef = useRef(false); useEffect(() => { - console.log("Loading suggestions for charm:", charmId(charm)); - if (suggestionsLoadedRef.current) return; + if (suggestionsLoadedRef.current || !charm) return; const loadSuggestions = async () => { setLoadingSuggestions(true); const iframeRecipe = getIframeRecipe(charm); if (!iframeRecipe) { - console.error("No iframe recipe found in charm, what should we do?"); + console.error("No iframe recipe found in charm"); return; } try { @@ -142,243 +225,344 @@ const IterationTab: React.FC
= ({ charm }) => { loadSuggestions(); }, [charm]); + return { + suggestions, + loadingSuggestions, + }; +} + +// Hook for code editing +function useCodeEditor(charm: Cell
| null, iframeRecipe: IFrameRecipe | null) { + const { charmManager } = useCharmManager(); + const [workingSrc, setWorkingSrc] = useState
(undefined); + useEffect(() => { - if (pendingSuggestion) { - handleIterate(); - setPendingSuggestion(null); + if (charm && iframeRecipe) { + setWorkingSrc(iframeRecipe.src); } - }, [pendingSuggestion, handleIterate]); + }, [iframeRecipe, charm]); - const handleSuggestion = (suggestion: CharmSuggestion) => { - setIterationInput(suggestion.prompt); - setShowVariants(true); - setPendingSuggestion(suggestion); - }; + const hasUnsavedChanges = workingSrc !== iframeRecipe?.src; - const handleCancelVariants = () => { - setVariants([]); - setSelectedVariant(null); - setExpectedVariantCount(0); + const saveChanges = useCallback(() => { + if (workingSrc && iframeRecipe && charm) { + saveNewRecipeVersion(charmManager, charm, workingSrc, iframeRecipe.spec); + } + }, [workingSrc, iframeRecipe, charm, charmManager]); + + return { + workingSrc, + setWorkingSrc, + hasUnsavedChanges, + saveChanges, }; +} + +// =================== Components =================== + +// Improved Variants Component with proper previews +const Variants = () => { + const { + variants, + expectedVariantCount, + selectedVariant, + setSelectedVariant, + handleCancelVariants, + } = useIterationContext(); + + const { charmId: paramCharmId } = useParams(); + const { currentFocus: charm } = useCharm(paramCharmId); + + if (variants.length === 0 && expectedVariantCount === 0) return null; return ( -
- {/* Left Sidebar */} -
-
-
Iterate
-
-
setIterationInput(e.target.value)} - onKeyDown={(e) => { - if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { - e.preventDefault(); - handleIterate(); - } - }} - className="w-full h-32 p-2 border-2 border-black resize-none" - /> - <div className="flex items-center gap-2"> - <input - type="checkbox" - id="variants" - checked={showVariants} - onChange={(e) => setShowVariants(e.target.checked)} - className="border-2 border-black" - /> - <label htmlFor="variants" className="text-sm font-medium"> - Variants - </label> - </div> - <div className="flex flex-col gap-2"> - <label className="text-sm font-bold">Model</label> - <select - value={selectedModel} - onChange={(e) => setSelectedModel(e.target.value)} - className="w-full p-2 border-2 border-black bg-white text-xs" + <div className="variants-container border-t-2 border-black pt-4 mb-4"> + <div className="flex justify-between items-center mb-2"> + <h3 className="text-sm font-bold"> + Variants ({variants.length} of {expectedVariantCount}) + </h3> + <button onClick={handleCancelVariants} className="text-xs text-gray-600 hover:text-black"> + Clear + </button> + </div> + <div className="variants-scroll flex gap-4 overflow-x-auto pb-4"> + {charm && ( + <div + onClick={() => setSelectedVariant(charm)} + className={`variant-item min-w-36 h-24 border-2 cursor-pointer flex-shrink-0 ${ + selectedVariant === charm ? "border-blue-500" : "border-black" + }`} + > + <div className="h-full flex flex-col overflow-hidden"> + <div className="bg-gray-100 text-xs font-bold p-1 border-b border-gray-300"> + Original + </div> + <div + className="flex-grow overflow-hidden relative" + style={{ width: "100%", height: "100%" }} > - <option value="anthropic:claude-3-7-sonnet-latest"> - Anthropic Claude 3.7 Sonnet ✨ - </option> - <option value="anthropic:claude-3-5-sonnet-latest"> - Anthropic Claude 3.5 Sonnet ✨ - </option> - <option value="groq:llama-3.3-70b-versatile">Groq Llama 3.3 70B 🔥</option> - <option value="openai:o3-mini-low-latest">OpenAI o3-mini-low</option> - <option value="openai:o3-mini-medium-latest">OpenAI o3-mini-medium</option> - <option value="openai:o3-mini-high-latest">OpenAI o3-mini-high</option> - <option value="google:gemini-2.0-pro">Google Gemini 2.0 Pro</option> - <option value="google:gemini-2.0-flash">Google Gemini 2.0 Flash</option> - <option value="google:gemini-2.0-flash-thinking"> - Google Gemini 2.0 Flash Thinking - </option> - <option value="perplexity:sonar-pro">Perplexity Sonar Pro 🌐</option> - </select> + <div + className="absolute inset-0 pointer-events-none" + style={{ + transform: "scale(0.3)", + transformOrigin: "top left", + width: "333%", + height: "333%", + }} + > + <CharmRenderer className="w-full h-full" charm={charm} /> + </div> + </div> </div> - <button - onClick={handleIterate} - disabled={loading} - className="px-4 py-2 border-2 text-sm border-white bg-black text-white flex items-center gap-2" - > - {loading && ( - <DitheredCube - animationSpeed={2} - width={24} - height={24} - animate={true} - cameraZoom={12} - /> - )} - {loading ? ( - "Iterating..." - ) : ( - <span className="text-xs flex justify-between w-full"> - Iterate <span className="text-gray-400 font-bold italic">(⌘ + enter)</span> - </span> - )} - </button> </div> - </div> + )} - {/* New suggestions box */} - <div className="bg-white border-2 border-black p-4 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.5)]"> - <h2 className="text-sm font-bold mb-4">Suggestions</h2> - {loadingSuggestions ? ( - <div className="flex items-center justify-center p-4"> - <DitheredCube - animationSpeed={2} - width={24} - height={24} - animate={true} - cameraZoom={12} - /> - </div> - ) : ( - <div className="flex flex-col gap-2"> - {suggestions.map((suggestion, index) => ( - <button - key={index} - onClick={() => handleSuggestion(suggestion)} - className="p-2 text-left text-sm border-2 border-black hover:-translate-y-[2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] shadow-[1px_1px_0px_0px_rgba(0,0,0,0.3)] transition-all duration-100 ease-in-out cursor-pointer" + {variants.map((variant, idx) => ( + <div + key={idx} + onClick={() => setSelectedVariant(variant)} + className={`variant-item min-w-36 h-24 border-2 cursor-pointer flex-shrink-0 ${ + selectedVariant === variant ? "border-blue-500" : "border-black" + }`} + > + <div className="h-full flex flex-col overflow-hidden"> + <div className="bg-gray-100 text-xs font-bold p-1 border-b border-gray-300"> + {variantModels[idx]?.split(":")[0] || "Model"} + </div> + <div + className="flex-grow overflow-hidden relative" + style={{ width: "100%", height: "100%" }} + > + <div + className="absolute inset-0 pointer-events-none" + style={{ + transform: "scale(0.3)", + transformOrigin: "top left", + width: "333%", + height: "333%", + }} > - <span className="font-medium text-xs uppercase text-gray-500"> - {suggestion.type} - </span> - <p className="text-xs">{suggestion.prompt}</p> - </button> - ))} + <CharmRenderer className="w-full h-full" charm={variant} /> + </div> + </div> </div> - )} - </div> - </div> - {/* Main Content Area */} - <div className="flex-1 h-full overflow-y-auto p-4 relative"> - {loading && ( + </div> + ))} + + {/* Loading placeholders */} + {Array.from({ length: expectedVariantCount - variants.length }).map((_, idx) => ( <div - className="absolute inset-0 backdrop-blur-sm bg-white/60 flex flex-col items-center justify-center z-10 transition-opacity duration-300 ease-in-out" - style={{ - opacity: loading ? 1 : 0, - }} + key={`loading-${idx}`} + className="variant-item min-w-36 h-24 border-2 border-dashed border-gray-300 flex items-center justify-center flex-shrink-0" > - <div className="text-lg font-bold">thinking</div> - <LoadingSpinner - blendMode="exclusion" - height={1024} - width={1024} - visible={true} - cameraZoom={128} + <DitheredCube + animationSpeed={2} + width={24} + height={24} + animate={true} + cameraZoom={12} /> </div> - )} - - <CharmRenderer className="w-full h-full" charm={selectedVariant || charm} /> - - {(variants.length > 0 || expectedVariantCount > 0) && ( - <VariantTray - variants={variants} - selectedVariant={selectedVariant} - onSelectVariant={setSelectedVariant} - variantModels={variantModels} - totalExpectedVariants={expectedVariantCount} - onCancel={handleCancelVariants} - originalCharm={charm} - /> - )} + ))} </div> </div> ); }; -interface CodeTabProps { - charm: Cell<Charm>; - iframeRecipe: IFrameRecipe | null; -} - -const CodeTab: React.FC<CodeTabProps> = ({ charm, iframeRecipe }) => { - const [workingSrc, setWorkingSrc] = useState<string | undefined>(undefined); - const { charmManager } = useCharmManager(); +// Suggestions Component +const Suggestions = () => { + const { charmId: paramCharmId } = useParams(); + const { currentFocus: charm } = useCharm(paramCharmId); + const { suggestions, loadingSuggestions } = useSuggestions(charm); + const { setIterationInput, setShowVariants, handleIterate } = useIterationContext(); - const saveChanges = () => { - if (workingSrc && iframeRecipe && charm) { - saveNewRecipeVersion(charmManager, charm, workingSrc, iframeRecipe.spec); - } + const handleSuggestion = (suggestion: CharmSuggestion) => { + setIterationInput(suggestion.prompt); + setShowVariants(true); + // Use a micro-delay to ensure state updates before iteration + setTimeout(() => handleIterate(), 0); }; - const hasUnsavedChanges = workingSrc !== iframeRecipe?.src; + return ( + <div className="suggestions-container mb-4"> + <h3 className="text-sm font-bold mb-2">Suggestions</h3> + {loadingSuggestions ? ( + <div className="flex items-center justify-center p-4"> + <DitheredCube animationSpeed={2} width={24} height={24} animate={true} cameraZoom={12} /> + </div> + ) : ( + <div className="flex overflow-x-auto pb-2 gap-3"> + {suggestions.map((suggestion, index) => ( + <button + key={index} + onClick={() => handleSuggestion(suggestion)} + className="p-2 text-left text-sm border border-gray-300 hover:border-black hover:bg-gray-50 shadow-sm transition-all duration-100 ease-in-out cursor-pointer flex-shrink-0 min-w-40 max-w-56" + > + <span className="font-medium text-xs uppercase text-gray-500 block"> + {suggestion.type} + </span> + <p className="text-xs line-clamp-2">{suggestion.prompt}</p> + </button> + ))} + </div> + )} + </div> + ); +}; - // Set workingSrc once the iframeRecipe is available - useEffect(() => { - if (charm && iframeRecipe) { - setWorkingSrc(iframeRecipe.src); - } - }, [iframeRecipe, charm]); +// Iterate Tab Component +const IterateTab = () => { + const { + iterationInput, + setIterationInput, + selectedModel, + setSelectedModel, + showVariants, + setShowVariants, + loading, + handleIterate, + } = useIterationContext(); return ( - <div className="editor-tab"> - <CodeMirror - value={workingSrc} - theme="dark" - extensions={[javascript()]} - onChange={(value) => setWorkingSrc(value)} - basicSetup={{ - lineNumbers: false, - foldGutter: false, - indentOnInput: true, - }} - /> - <div className="mt-4"> - <button - onClick={saveChanges} - disabled={!hasUnsavedChanges} - className="px-4 py-2 bg-green-500 text-white rounded disabled:opacity-50" - > - {hasUnsavedChanges ? "Save Changes" : "Saved"} - </button> + <div className="flex flex-col p-4"> + <div className="flex flex-col gap-3"> + <textarea + placeholder="Tweak your charm" + value={iterationInput} + onChange={(e) => setIterationInput(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + handleIterate(); + } + }} + className="w-full h-24 p-2 border-2 border-black resize-none" + /> + + <div className="flex items-center justify-between gap-2"> + <div className="flex items-center"> + <input + type="checkbox" + id="variants" + checked={showVariants} + onChange={(e) => setShowVariants(e.target.checked)} + className="border-2 border-black mr-2" + /> + <label htmlFor="variants" className="text-sm font-medium"> + Variants + </label> + </div> + + <select + value={selectedModel} + onChange={(e) => setSelectedModel(e.target.value)} + className="p-1 border-2 border-black bg-white text-xs" + > + <option value="anthropic:claude-3-7-sonnet-latest">Claude 3.7 ✨</option> + <option value="anthropic:claude-3-5-sonnet-latest">Claude 3.5 ✨</option> + <option value="groq:llama-3.3-70b-versatile">Llama 3.3 🔥</option> + <option value="openai:o3-mini-low-latest">o3-mini-low</option> + <option value="openai:o3-mini-medium-latest">o3-mini-medium</option> + <option value="openai:o3-mini-high-latest">o3-mini-high</option> + <option value="google:gemini-2.0-pro">Gemini 2.0</option> + <option value="perplexity:sonar-pro">Sonar Pro 🌐</option> + </select> + + <button + onClick={handleIterate} + disabled={loading || !iterationInput} + className="px-4 py-2 border-2 text-sm border-white bg-black text-white flex items-center gap-2 disabled:opacity-50" + > + {loading ? ( + <> + <DitheredCube + animationSpeed={2} + width={16} + height={16} + animate={true} + cameraZoom={12} + /> + <span>Iterating...</span> + </> + ) : ( + <span className="text-xs"> + Iterate{" "} + <span className="hidden md:inline text-gray-400 font-bold italic">(⌘ + enter)</span> + </span> + )} + </button> + </div> + </div> + + {/* Content Container with single scrollbar */} + <div className="flex-grow overflow-auto mt-3 -mx-4 px-4"> + <Variants /> + <Suggestions /> </div> </div> ); }; -interface DataTabProps { - charm: Charm; -} +// Code Tab Component +const CodeTab = () => { + const { charmId: paramCharmId } = useParams(); + const { currentFocus: charm, iframeRecipe } = useCharm(paramCharmId); + const { workingSrc, setWorkingSrc, hasUnsavedChanges, saveChanges } = useCodeEditor( + charm, + iframeRecipe, + ); + + return ( + <div className="h-full flex flex-col overflow-hidden"> + <div className="p-4 flex-grow flex flex-col overflow-hidden"> + <div className="flex-grow overflow-hidden border border-black h-full"> + <CodeMirror + value={workingSrc} + theme="dark" + extensions={[javascript()]} + onChange={setWorkingSrc} + basicSetup={{ + lineNumbers: false, + foldGutter: false, + indentOnInput: true, + }} + style={{ height: "100%", overflow: "auto" }} + /> + </div> + <div className="mt-4 flex justify-end"> + <button + onClick={saveChanges} + disabled={!hasUnsavedChanges} + className="px-4 py-2 bg-black text-white border-2 border-black disabled:opacity-50" + > + {hasUnsavedChanges ? "Save Changes" : "Saved"} + </button> + </div> + </div> + </div> + ); +}; + +// Data Tab Component +const DataTab = () => { + const { charmId: paramCharmId } = useParams(); + const { currentFocus: charm } = useCharm(paramCharmId); + + if (!charm) return null; -const DataTab: React.FC<DataTabProps> = ({ charm }) => { return ( - <div className="view-tab"> - {charm.sourceCell && ( + <div className="h-full overflow-auto p-4"> + {charm.getSourceCell && ( <div className="mb-4"> <h3 className="text-md font-semibold mb-1">Argument</h3> - <pre className="bg-gray-50 p-2 rounded text-sm overflow-auto"> - {JSON.stringify(charm.sourceCell.get().argument, null, 2)} + <pre className="bg-gray-50 p-2 rounded text-sm overflow-auto max-h-36 border border-gray-200"> + {JSON.stringify(charm.getSourceCell()?.get()?.argument, null, 2)} </pre> </div> )} <h2 className="text-lg font-semibold mb-2">Result</h2> <div className="mb-4"> - <pre className="bg-gray-50 p-2 rounded text-sm overflow-auto"> + <pre className="bg-gray-50 p-2 rounded text-sm overflow-auto max-h-64 border border-gray-200"> {JSON.stringify(charm.get(), null, 2)} </pre> </div> @@ -386,69 +570,221 @@ const DataTab: React.FC<DataTabProps> = ({ charm }) => { ); }; -// FIXME(jake): Eventually, we might move these tab views into their own components and use URL routes for deep linking. - -function CharmEditView() { - const { charmId } = useParams(); - const location = useLocation(); - const navigate = useNavigate(); +// Bottom Sheet Component +const BottomSheet = ({ + children, +}: { + children: (activeTab: Tab, isResizing: boolean) => React.ReactNode; +}) => { + const { sheetHeight, isResizing, handleResizeStart, handleTouchResizeStart } = useBottomSheet(); + const { activeTab, handleTabChange } = useTabNavigation(); - // Set initial tab from hash (default to "code") - const activeTab = location.hash.slice(1) as Tab; - - const { currentFocus: charm, iframeRecipe } = useCharm(charmId); - - if (!charm) { - return ( - <div className="max-w-xl mx-auto"> - <LoadingSpinner visible={true} /> + return ( + <div + className="bottom-sheet border-t-2 border-black bg-white shadow-lg flex flex-col overflow-y-auto" + style={{ height: `${sheetHeight}px` }} + > + {/* Resize Handle */} + <div + className="resize-handle h-6 w-full cursor-ns-resize flex items-center justify-center border-b border-gray-200" + onMouseDown={handleResizeStart} + onTouchStart={handleTouchResizeStart} + > + <div className="w-16 h-1 bg-gray-300 rounded-full"></div> </div> - ); - } - return ( - <div className="detail-view h-full p-4"> {/* Tab Navigation */} - <div className="tabs mb-4 flex gap-2"> + <div className="tabs flex gap-0 border-b border-gray-200"> <button - onClick={() => navigate(`${location.pathname}#iterate`)} - className={`px-4 py-2 rounded ${ - activeTab === "iterate" ? "bg-gray-200 font-bold" : "bg-gray-100" + onClick={() => handleTabChange("iterate")} + className={`px-4 py-2 flex-1 text-center ${ + activeTab === "iterate" ? "bg-gray-100 font-bold border-b-2 border-black" : "" }`} > Iteration </button> <button - onClick={() => navigate(`${location.pathname}#code`)} - className={`px-4 py-2 rounded ${ - activeTab === "code" ? "bg-gray-200 font-bold" : "bg-gray-100" + onClick={() => handleTabChange("code")} + className={`px-4 py-2 flex-1 text-center ${ + activeTab === "code" ? "bg-gray-100 font-bold border-b-2 border-black" : "" }`} > Edit Code </button> <button - onClick={() => navigate(`${location.pathname}#data`)} - className={`px-4 py-2 rounded ${ - activeTab === "data" ? "bg-gray-200 font-bold" : "bg-gray-100" + onClick={() => handleTabChange("data")} + className={`px-4 py-2 flex-1 text-center ${ + activeTab === "data" ? "bg-gray-100 font-bold border-b-2 border-black" : "" }`} > View Data </button> </div> - {(() => { - switch (activeTab) { - case "code": - return <CodeTab charm={charm} iframeRecipe={iframeRecipe} />; - case "data": - return <DataTab charm={charm} />; - case "iterate": - default: - return <IterationTab charm={charm} />; - } - })()} + {/* Tab Content */} + <div className="tab-content flex-grow overflow-hidden">{children(activeTab, isResizing)}</div> </div> ); +}; + +// Main CharmDetailView Component +function CharmDetailView() { + const { charmId: paramCharmId, replicaName } = useParams(); + const { currentFocus: charm } = useCharm(paramCharmId); + const { charmManager } = useCharmManager(); + const navigate = useNavigate(); + + // Iteration state + const [iterationInput, setIterationInput] = useState(""); + const [selectedModel, setSelectedModel] = useState("anthropic:claude-3-7-sonnet-latest"); + const [showVariants, setShowVariants] = useState(true); + const [loading, setLoading] = useState(false); + const [variants, setVariants] = useState<Cell<Charm>[]>([]); + const [selectedVariant, setSelectedVariant] = useState<Cell<Charm> | null>(null); + const [expectedVariantCount, setExpectedVariantCount] = useState(0); + + // Handle iteration + const handleIterate = useCallback(async () => { + if (!iterationInput || !charm) return; + setLoading(true); + + const handleVariants = async () => { + setVariants([]); + setSelectedVariant(charm); + + try { + const variantPromises = variantModels.map((model) => + iterateCharm(charmManager, charmId(charm)!, replicaName!, iterationInput, false, model), + ); + + // Instead of waiting for all promises, handle them as they complete + let first = true; + variantPromises.forEach(async (promise) => { + try { + const path = await promise; + if (path) { + const id = path.split("/").pop()!; + const newCharm = await charmManager.get(id); + if (newCharm) { + setVariants((prev) => [...prev, newCharm]); + // Set the first completed variant as selected if none selected + if (first) { + setSelectedVariant(newCharm); + first = false; + } + } + } + } catch (error) { + console.error("Variant generation error:", error); + } + }); + } catch (error) { + console.error("Variants error:", error); + } finally { + setLoading(false); + } + }; + + if (showVariants) { + setExpectedVariantCount(variantModels.length); + setVariants([]); + handleVariants(); + } else { + try { + const newPath = await iterateCharm( + charmManager, + charmId(charm)!, + replicaName!, + iterationInput, + false, + selectedModel, + ); + if (newPath) { + navigate(`${newPath}/detail#iterate`); + } + } catch (error) { + console.error("Iteration error:", error); + } finally { + setLoading(false); + } + } + }, [showVariants, iterationInput, selectedModel, charmManager, charm, replicaName, navigate]); + + const handleCancelVariants = useCallback(() => { + setVariants([]); + setSelectedVariant(null); + setExpectedVariantCount(0); + }, []); + + // Iteration context value + const iterationContextValue = { + iterationInput, + setIterationInput, + selectedModel, + setSelectedModel, + showVariants, + setShowVariants, + loading, + variants, + selectedVariant, + setSelectedVariant, + expectedVariantCount, + handleIterate, + handleCancelVariants, + }; + + if (!charm) { + return ( + <div className="max-w-xl mx-auto"> + <LoadingSpinner visible={true} /> + </div> + ); + } + + return ( + <IterationContext.Provider value={iterationContextValue}> + <div className="detail-view h-full flex flex-col"> + {/* Main Content Area */} + <div className="flex-grow overflow-hidden relative"> + {loading && ( + <div + className="absolute inset-0 backdrop-blur-sm bg-white/60 flex flex-col items-center justify-center z-10 transition-opacity duration-300 ease-in-out" + style={{ opacity: loading ? 1 : 0 }} + > + <div className="text-lg font-bold">thinking</div> + <LoadingSpinner + blendMode="exclusion" + height={1024} + width={1024} + visible={true} + cameraZoom={128} + /> + </div> + )} + + <MemoizedCharmRenderer + key="main" + className="w-full h-full" + charm={selectedVariant || charm} + /> + </div> + + {/* Bottom Sheet */} + <BottomSheet> + {(activeTab, isResizing) => ( + <> + {/* Apply pointer-events-none when resizing */} + <div className={isResizing ? "pointer-events-none" : ""}> + {activeTab === "iterate" && <IterateTab />} + {activeTab === "code" && <CodeTab />} + {activeTab === "data" && <DataTab />} + </div> + </> + )} + </BottomSheet> + </div> + </IterationContext.Provider> + ); } -export default CharmEditView; +export default CharmDetailView; diff --git a/typescript/packages/jumble/src/views/Shell.tsx b/typescript/packages/jumble/src/views/Shell.tsx index 9b2d241fd..9ed09a04e 100644 --- a/typescript/packages/jumble/src/views/Shell.tsx +++ b/typescript/packages/jumble/src/views/Shell.tsx @@ -1,33 +1,108 @@ import "@commontools/ui"; - -import { useCallback, useEffect, useState } from "react"; import { Outlet, useParams, useLocation } from "react-router-dom"; -import { animated } from "@react-spring/web"; -import { MdOutlineStar } from "react-icons/md"; +import { MdEdit, MdOutlineStar, MdShare } from "react-icons/md"; +import { LuPencil } from "react-icons/lu"; import ShellHeader from "@/components/ShellHeader.tsx"; import { CommandCenter } from "@/components/CommandCenter.tsx"; import { useAuthentication } from "@/contexts/AuthenticationContext.tsx"; import { AuthenticationView } from "@/views/AuthenticationView.tsx"; +import { ActionBar } from "@/components/ActionBar"; +import { useAction } from "@/contexts/ActionManagerContext"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { CharmPublisher } from "@/components/Publish"; import { useCharmManager } from "@/contexts/CharmManagerContext"; -import { useSyncedStatus } from "@/hooks/use-synced-status"; +import { NAME } from "@commontools/builder"; -export default function Shell() { +function useActions() { const { charmId, replicaName } = useParams(); const location = useLocation(); - // TOOLBAR START - // NOTE(jake): We will want to move this into a Toolbar component at some point const isDetailActive = location.pathname.endsWith("/detail"); const togglePath = isDetailActive ? `/${replicaName}/${charmId}` : `/${replicaName}/${charmId}/detail`; - // TOOLBAR END - const onLaunchCommand = useCallback(() => { - window.dispatchEvent(new CustomEvent("open-command-center")); - }, []); + // Command palette action (always available) + useAction( + useMemo( + () => ({ + id: "command-palette", + label: "Commands", + icon: <MdOutlineStar fill="black" size={28} />, + onClick: () => { + window.dispatchEvent(new CustomEvent("open-command-center")); + }, + priority: 100, + }), + [], + ), + ); + + const hasCharmId = useCallback(() => Boolean(charmId), [charmId]); + const { charmManager } = useCharmManager(); + const [charmName, setCharmName] = useState<string | null>(null); + useEffect(() => { + let mounted = true; + let cancel: (() => void) | undefined; + + async function getCharm() { + if (charmId) { + const charm = await charmManager.get(charmId); + cancel = charm?.key(NAME).sink((value) => { + if (mounted) setCharmName(value ?? null); + }); + } + } + getCharm(); + + return () => { + mounted = false; + cancel?.(); + }; + }, [charmId, charmManager]); + + useAction( + useMemo( + () => ({ + id: "publish", + label: "Publish", + icon: <MdShare fill="black" size={28} />, + onClick: () => { + window.dispatchEvent( + new CustomEvent("publish-charm", { + detail: { charmId, charmName }, + }), + ); + }, + predicate: hasCharmId, + priority: 100, + }), + [hasCharmId, charmId, charmName], + ), + ); + + // Edit action (conditional) + useAction( + useMemo( + () => ({ + id: "link:edit-charm", + label: "Edit", + icon: <MdEdit size={28} />, + to: togglePath, + onClick: () => {}, + predicate: hasCharmId, + priority: 50, + }), + [hasCharmId, togglePath], + ), + ); +} + +export default function Shell() { + const { charmId, replicaName } = useParams(); + useActions(); const { user } = useAuthentication(); if (!user) { @@ -35,31 +110,15 @@ export default function Shell() { } return ( - <div className="shell h-full bg-gray-50 border-2 border-black"> - <ShellHeader - replicaName={replicaName} - charmId={charmId} - isDetailActive={isDetailActive} - togglePath={togglePath} - /> + <div className="flex flex-col shell h-full bg-gray-50 border-2 border-black"> + <ShellHeader replicaName={replicaName} charmId={charmId} /> <div className="relative h-full"> <Outlet /> </div> - <animated.button - className=" - flex items-center justify-center fixed bottom-2 right-2 w-12 h-12 z-50 - border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.5)] - hover:translate-y-[-2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,0.7)] - transition-[border,box-shadow,transform] duration-100 ease-in-out - bg-white cursor-pointer - " - onClick={onLaunchCommand} - > - <MdOutlineStar fill="black" size={24} /> - </animated.button> - + <ActionBar /> + <CharmPublisher /> <CommandCenter /> </div> );