feat: turn task items success into dropdown, improve style
160 unmodified linesExpand all16116216316416516616716816940 unmodified lines21021121221321321421521621721824 unmodified lines160 unmodified linesExpand all
const Tasks = (props: TasksProps) => ( <Stack border="1px solid var(--colors-border-subtle)" borderBottomWidth="3px" gap="1.5" p="2" rounded="sm" justifyContent={props.currentTasks.length === 0 ? "center" : undefined}40 unmodified lines
const Upload = (props: FileUpload.RootProps) => { return ( <FileUpload.Root maxFiles={100} {...props}> <FileUpload.Dropzone> <FileUpload.Dropzone borderBottomWidth="3px"> <FileUpload.Label>drop your files here</FileUpload.Label> <HStack alignItems="center"> <FileUpload.Trigger asChild={(triggerProps) => (24 unmodified lines1 unmodified line23456789101 unmodified line
.lucide { stroke-width: 3px;}
.input,.button--variant_outline { border-bottom-width: 2px;}1123456789102 unmodified lines13141516171819202122236 unmodified lines30313233343536373816 unmodified lines555657585051525354555657585960616263646559676869707172737475766061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311419 unmodified lines13413513613713813914014114219 unmodified linesimport { CircleAlertIcon, DownloadIcon, SendIcon } from "lucide-solid";import { CircleAlertIcon, DownloadIcon, EllipsisVerticalIcon, SendIcon,} from "lucide-solid";import { Stack } from "styled-system/jsx";import { IconButton } from "~/components/ui/icon-button";import { Spinner } from "~/components/ui/spinner";import { Popover } from "~/components/ui/popover";2 unmodified linesimport { Account } from "~/lib/accounts";
import { TaskState } from "~/lib/task";import PostDialog from "./PostDialog";import { Button } from "./ui/button";import { Menu } from "./ui/menu";import { createSignal } from "solid-js";
const downloadFile = (blob: Blob, fileName: string) => { const url = URL.createObjectURL(blob); const a = document.createElement("a");6 unmodified lines URL.revokeObjectURL(url);};
const Task = (process: TaskState, selectedAccount: Account | undefined) => { const [dialogOpen, setDialogOpen] = createSignal(false); const statusError = (error: string) => ( <Popover.Root> <Popover.Trigger asChild={(triggerProps) => (16 unmodified lines ); const statusSuccess = (result: Blob) => { return ( <> <IconButton color={{ _hover: "colorPalette.emphasized" }} onClick={() => downloadFile( result, process.file.name .split(".") .slice(0, -1) .join(".") .concat(".mp4"), ) } variant="ghost" > <DownloadIcon /> </IconButton> <PostDialog trigger={(props) => ( <IconButton {...props} disabled={selectedAccount === undefined} color={{ _hover: "colorPalette.emphasized" }} variant="ghost" > <SendIcon /> </IconButton> )} openSignal={[dialogOpen, setDialogOpen]} account={selectedAccount} result={result} /> <Menu.Root positioning={{ placement: "bottom-start", strategy: "fixed" }} > <Menu.Trigger asChild={(triggerProps) => ( <IconButton {...triggerProps()} variant="ghost"> <EllipsisVerticalIcon /> </IconButton> )} /> <Menu.Positioner> <Menu.Content> <Menu.ItemGroup> <Button color={{ _hover: "colorPalette.emphasized" }} onClick={() => downloadFile( result, process.file.name .split(".") .slice(0, -1) .join(".") .concat(".mp4"), ) } variant="ghost" display="flex" justifyContent="space-between" alignItems="center" > download <DownloadIcon /> </Button> <Button onClick={() => setDialogOpen(!dialogOpen())} disabled={selectedAccount === undefined} color={{ _hover: "colorPalette.emphasized" }} variant="ghost" display="flex" justifyContent="space-between" alignItems="center" > post to bsky <SendIcon /> </Button> </Menu.ItemGroup> </Menu.Content> </Menu.Positioner> </Menu.Root> </> ); }; const statusProcessing = () => (19 unmodified lines return ( <Stack direction="row" border="1px solid var(--colors-border-muted)" borderBottomWidth="2px" gap="2" align="center" rounded="sm" >19 unmodified lines97 unmodified lines989910010110210310410510610210310410510610710810911011111277 unmodified lines97 unmodified lines const usedMime = mediaRecorder?.mimeType || mimeType || fallbackMimeType; const fileExtension = usedMime.split("/")[1]?.split(";")[0] || "webm"; const blob = new Blob(audioChunks, { type: usedMime }); const file = new File( [blob], `rec-${new Date().toISOString().replace(/:/g, "-")}.${fileExtension}`, { type: usedMime }, ); const fileDate = new Date() .toLocaleTimeString() .replace(/:/g, "-") .replace(/\s+/g, "_"); const file = new File([blob], `rec-${fileDate}.${fileExtension}`, { type: usedMime, });
addTask(props.selectedAccount(), file); audioChunks = []; };77 unmodified lines1123459 unmodified lines1516171819192021222324252526272829303129303132107 unmodified linesExpand allimport { Component, createSignal } from "solid-js";import { Component, createSignal, Signal } from "solid-js";
import { SendIcon, XIcon } from "lucide-solid";import { Stack } from "styled-system/jsx";import { IconButton } from "~/components/ui/icon-button";9 unmodified linesimport { Textarea } from "~/components/ui/textarea";import { Account } from "~/lib/accounts";
const PostDialog = (props: { trigger: Component; result: Blob; account: Account | undefined; openSignal: Signal<boolean>;}) => { const [postContent, setPostContent] = createSignal<string>(""); const [posting, setPosting] = createSignal(false); const [open, setOpen] = createSignal(false); const [open, setOpen] = props.openSignal;
return ( <Dialog.Root open={open()} onOpenChange={(e) => setOpen(e.open)}> <Dialog.Trigger asChild={(triggerProps) => <props.trigger {...triggerProps()} />} /> <Dialog.Backdrop /> <Dialog.Positioner> <Dialog.Content> <Stack>107 unmodified linesExpand all222 unmodified linesExpand all22322422522622722722822923023123223323323423523623723823914 unmodified lines25425525625725625825926026126226326226426526626726826927027127282 unmodified lines35535635735835936036136236318 unmodified lines38238338438537938038138238338438638738838939038539139239339415 unmodified lines222 unmodified linesExpand all } };
const Accounts = () => { const item = (account: Account) => ( const item = (account: Account, isLatest: boolean) => ( <Stack direction="row" w="full" px="2" pb="2" borderBottom="1px solid var(--colors-border-muted)" borderBottom={ !isLatest ? "1px solid var(--colors-border-muted)" : undefined } align="center" > {account.handle ? `@${account.handle}` : account.did} <div class={css({ flexGrow: 1 })} />14 unmodified lines no accounts added </Text> } > {item} {(acc, idx) => item(acc, idx() === accounts.length - 1)} </For> ); return ( <Stack> <FormLabel>accounts</FormLabel> <Stack border="1px solid var(--colors-border-default)" rounded="xs"> <Stack border="1px solid var(--colors-border-default)" borderBottomWidth="3px" rounded="xs" > <Stack borderBottom="1px solid var(--colors-border-default)" p="2" direction="row"82 unmodified lines <FormLabel>processing</FormLabel> <Stack gap="0" border="1px solid var(--colors-border-default)" borderBottomWidth="3px" rounded="xs" > <Box borderBottom="1px solid var(--colors-border-subtle)"> <SettingCheckbox18 unmodified lines label="background color" signal={[backgroundColor, setBackgroundColor]} /> </Stack> <Box borderBottom="1px solid var(--colors-border-muted)"> <SettingSelect label="frame rate" signal={[frameRate, setFrameRate]} collection={frameRateCollection} /> <SettingSelect label="frame rate" signal={[frameRate, setFrameRate]} collection={frameRateCollection} /> </Box> </Stack> </Stack> </Stack> </Drawer.Body>15 unmodified lines334 unmodified linesExpand all3353363373383393403413393403413423433433443453463473486 unmodified lines334 unmodified linesExpand all } else { drawBackground();
if (pfpImg) { const pfpSize = Math.min(renderCanvas.width, renderCanvas.height) * 0.5; const pfpX = (renderCanvas.width - pfpSize) / 2; const pfpY = (renderCanvas.height - pfpSize) / 2; const centerX = renderCanvas.width / 2; const centerY = renderCanvas.height / 2; const baseRadius = Math.min(renderCanvas.width, renderCanvas.height) * 0.15;
drawPfp(ctx, pfpImg, pfpX, pfpY, pfpSize); drawPfp(ctx, pfpImg, centerX, centerY, baseRadius); }
await videoSource.add(0, duration); }6 unmodified lines1export * as Menu from './styled/menu'1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798import { type Assign, Menu } from '@ark-ui/solid'import type { ComponentProps } from 'solid-js'import { type MenuVariantProps, menu } from 'styled-system/recipes'import type { HTMLStyledProps } from 'styled-system/types'import { createStyleContext } from './utils/create-style-context'
const { withRootProvider, withContext } = createStyleContext(menu)
export type RootProviderProps = ComponentProps<typeof RootProvider>export const RootProvider = withRootProvider<Assign<Menu.RootProviderProps, MenuVariantProps>>( Menu.RootProvider,)
export type RootProps = ComponentProps<typeof Root>export const Root = withRootProvider<Assign<Menu.RootProps, MenuVariantProps>>(Menu.Root)
export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Menu.ArrowBaseProps>>( Menu.Arrow, 'arrow',)
export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Menu.ArrowTipBaseProps>>( Menu.ArrowTip, 'arrowTip',)
export const CheckboxItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.CheckboxItemBaseProps>>( Menu.CheckboxItem, 'item',)
export const Content = withContext<Assign<HTMLStyledProps<'div'>, Menu.ContentBaseProps>>( Menu.Content, 'content',)
export const ContextTrigger = withContext< Assign<HTMLStyledProps<'button'>, Menu.ContextTriggerBaseProps>>(Menu.ContextTrigger, 'contextTrigger')
export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Menu.IndicatorBaseProps>>( Menu.Indicator, 'indicator',)
export const ItemGroupLabel = withContext< Assign<HTMLStyledProps<'div'>, Menu.ItemGroupLabelBaseProps>>(Menu.ItemGroupLabel, 'itemGroupLabel')
export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemGroupBaseProps>>( Menu.ItemGroup, 'itemGroup',)
export const ItemIndicator = withContext< Assign<HTMLStyledProps<'div'>, Menu.ItemIndicatorBaseProps>>(Menu.ItemIndicator, 'itemIndicator')
export const Item = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemBaseProps>>( Menu.Item, 'item',)
export const ItemText = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemTextBaseProps>>( Menu.ItemText, 'itemText',)
export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Menu.PositionerBaseProps>>( Menu.Positioner, 'positioner',)
export const RadioItemGroup = withContext< Assign<HTMLStyledProps<'div'>, Menu.RadioItemGroupBaseProps>>(Menu.RadioItemGroup, 'itemGroup')
export const RadioItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.RadioItemBaseProps>>( Menu.RadioItem, 'item',)
export const Separator = withContext<Assign<HTMLStyledProps<'hr'>, Menu.SeparatorBaseProps>>( Menu.Separator, 'separator',)
export const TriggerItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.TriggerItemBaseProps>>( Menu.TriggerItem, 'triggerItem',)
export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Menu.TriggerBaseProps>>( Menu.Trigger, 'trigger',)
export { MenuContext as Context } from '@ark-ui/solid'