diff --git a/next_app/src/components/drawer/components/interact.tsx b/next_app/src/components/drawer/components/interact.tsx index 0f82000..44e7d50 100644 --- a/next_app/src/components/drawer/components/interact.tsx +++ b/next_app/src/components/drawer/components/interact.tsx @@ -4,7 +4,8 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useEffect, useState } from "react"; import { runLua, Tag } from "@/lib/ao-vars"; -import { Delete, Loader, MinusCircle } from "lucide-react"; +import { ChevronsLeftRight, Copy, Delete, Loader, Minus, MinusCircle, Tag as TagIcon } from "lucide-react"; +import { Combobox } from "@/components/ui/combo-box"; import { toast } from "sonner"; import Link from "next/link"; @@ -46,47 +47,57 @@ function Interact() { return

INTERACT

- {globalState.activeProject ?
- setTarget(e.target.value)} /> - setAction(e.target.value)} /> - setData(e.target.value)} /> - Tags: + {globalState.activeProject ?
+ {/* setTarget(e.target.value)} className="bg-foreground/5 rounded" /> */} + { if (e) { setTarget(e) } else { setTarget(project.process) } }} options={Object.keys(manager.projects).filter(pid => { return manager.projects[pid].process }).map(pid => ({ label: `${pid}: ${manager.projects[pid].process}`, value: manager.projects[pid].process }))} /> + setAction(e.target.value)} className="bg-foreground/5 rounded" /> + setData(e.target.value)} className="bg-foreground/5 rounded" /> +
+ Tags +
+ + + +
{ - inputTags.map((tag, i) =>
- { - const tags = [...inputTags]; - tags[i].name = e.target.value; - setInputTags(tags); - }} /> - { - const tags = [...inputTags]; - tags[i].value = e.target.value; - setInputTags(tags); - }} /> - + }}> + TAG {i + 1} + { + const tags = [...inputTags]; + tags[i].name = e.target.value; + setInputTags(tags); + }} /> + { + const tags = [...inputTags]; + tags[i].value = e.target.value; + setInputTags(tags); + }} />
) } -
- - - -
- Eequivalent Lua code: - 
{eqLua}
+
+
+ Lua Code + 
{eqLua}
+
- Result: {id && id != "..." && View on ao.link} 
{id || "..."}
 - 
{output || "..."}
+ + Results view on ao.link + 
{output || "..."}
:
No active project
}
} diff --git a/next_app/src/components/drawer/index.tsx b/next_app/src/components/drawer/index.tsx index 4cab3f5..7ac91c1 100644 --- a/next_app/src/components/drawer/index.tsx +++ b/next_app/src/components/drawer/index.tsx @@ -4,7 +4,7 @@ import drawerItems from "./components" export default function SidebarDrawer() { const globalState = useGlobalState() - return
+ return
{ drawerItems.map((item, i) => { return item.value == globalState.activeSidebarItem ? : null diff --git a/next_app/src/components/menubar/components/new-project.tsx b/next_app/src/components/menubar/components/new-project.tsx index 79f9aef..aa44d80 100644 --- a/next_app/src/components/menubar/components/new-project.tsx +++ b/next_app/src/components/menubar/components/new-project.tsx @@ -34,7 +34,7 @@ export default function NewProject() { const [usingManualModuleId, setUsingManualModuleId] = useState(""); const [fileDragOver, setFileDragOver] = useState(false); const [uploadedFiles, setUploadedFiles] = useState<{ [foo: string]: PFile | string }>({}); - const [processes, setProcesses] = useState([{ label: "+ Create New", value: "NEW_PROCESS" }]); + const [processes, setProcesses] = useState([{ label: "+ Create New Process", value: "NEW_PROCESS" }]); async function fetchProcesses() { if (!window.arweaveWallet) return; @@ -71,7 +71,7 @@ export default function NewProject() { } }); - setProcesses([{ label: "+ Create New", value: "NEW_PROCESS" }, ...ids]); + setProcesses([{ label: "+ Create New Process", value: "NEW_PROCESS" }, ...ids]); } async function createProject() { @@ -238,22 +238,23 @@ export default function NewProject() { setProcessUsed(e)} onOpen={fetchProcesses} onSearchChange={(e) => setUsingManualProcessId(e)} /> - {processUsed == "NEW_PROCESS" && setNewProcessName(e.target.value)} />} +
+ All Options + + {processUsed == "NEW_PROCESS" && setNewProcessName(e.target.value)} />} - 0} options={Object.keys(AOTemplates).map((key) => ({ label: key, value: key })).filter((e) => e.value != "")} - onChange={(e) => setSelectedTemplate(e)} onOpen={() => { }} /> - {/* advanced settings dropdown */} - {/*
- Advanced Settings */} - {/*
*/} + 0} options={Object.keys(AOTemplates).map((key) => ({ label: key, value: key })).filter((e) => e.value != "")} + onChange={(e) => setSelectedTemplate(e)} onOpen={() => { }} /> - ({ label: `${key} (${AOModules[key]})`, value: AOModules[key] }))} onChange={(e) => setNewProcessModule(e)} onSearchChange={(e)=>setUsingManualModuleId(e)} /> - - - {/*
*/} - {/*
*/} + ({ label: `${key} (${AOModules[key]})`, value: AOModules[key] }))} onChange={(e) => setNewProcessModule(e)} onSearchChange={(e) => setUsingManualModuleId(e)} /> + + + +
+ + setDefaultFiletype(e as "NORMAL" | "NOTEBOOK")}> diff --git a/next_app/src/components/sidebar/index.tsx b/next_app/src/components/sidebar/index.tsx index be9f4b1..a800be3 100644 --- a/next_app/src/components/sidebar/index.tsx +++ b/next_app/src/components/sidebar/index.tsx @@ -20,22 +20,24 @@ export default function Sidebar({ drawerRef }: { drawerRef: MutableRefObject + return
{ sidebarItems.map((Item, i) => - diff --git a/next_app/src/components/ui/combo-box.tsx b/next_app/src/components/ui/combo-box.tsx index 47e004b..8b3a0f5 100644 --- a/next_app/src/components/ui/combo-box.tsx +++ b/next_app/src/components/ui/combo-box.tsx @@ -8,7 +8,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover import { useTimeout } from "usehooks-ts"; import { GraphQLClient, gql } from "graphql-request"; -export function Combobox({ className = "", placeholder, options, onChange, onOpen = () => { }, disabled = false, onSearchChange = (e) => { } }: { className?: string; placeholder: string, options: { label: string; value: string }[]; onChange: (val: string) => void; onOpen?: () => void; disabled?: boolean; onSearchChange?: (e: string) => void }) { +export function Combobox({ triggerClassName = "", className = "", placeholder, options, onChange, onOpen = () => { }, disabled = false, onSearchChange = (e) => { } }: { triggerClassName?: string, className?: string; placeholder: string, options: { label: string; value: string }[]; onChange: (val: string) => void; onOpen?: () => void; disabled?: boolean; onSearchChange?: (e: string) => void }) { const [open, setOpen] = useState(false); const [value, setValue] = useState(""); @@ -20,7 +20,7 @@ export function Combobox({ className = "", placeholder, options, onChange, onOpe onOpen(); }} > - +
{/*
diff --git a/next_app/src/styles/globals.css b/next_app/src/styles/globals.css index a2d8e3d..8b90e08 100644 --- a/next_app/src/styles/globals.css +++ b/next_app/src/styles/globals.css @@ -28,7 +28,7 @@ --destructive: 0 70.2% 90%; --destructive-foreground: 0 100% 30%; - --border: 0 0% 50%; + --border: 0 0% 84%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; @@ -62,7 +62,7 @@ --destructive: 0 70% 15.6%; --destructive-foreground: 0 60% 60%; - --border: 0 0% 30%; + --border: 0 0% 16%; --input: 0 0% 16%; --ring: 240 4.9% 83.9%; } @@ -116,4 +116,17 @@ pre { #monacoDiffEditor div { font-family: "DM Mono" !important; font-size: unset !important; -} */ \ No newline at end of file +} */ + +button { + transition: all 0.1s; +} + +button:hover { + scale: 1.005; +} + +button:active { + opacity: 0.6; + scale: 0.98; +} \ No newline at end of file