From cbc385c1ca9168bba7590ccff9ec7a9d6b829895 Mon Sep 17 00:00:00 2001
From: RitaDias <rita@sanity.io>
Date: Fri, 5 Jul 2024 10:19:26 +0200
Subject: [PATCH] feat(COREL): update types to bundle + add create bundle
 functionality (#7047)

* refactor(sanity): update types to bundle

* feat(sanity): add ability to create releases from dialog + update types

* feat(sanity): update list on global and document to use store

* feat(sanity): update types, add icon and hue picker to bundles, update uis

* feat(sanity): add date picker to bundleform

* refactor(sanity): update publishAt fields in menus

* refactor(sanity): update type in dummyGetter

* chore(sanity): remove BUNDLES const

* chore(sanity): update LATEST type to Partial

* chore(sanity): update validation for bundle date creation

* chore(sanity): clean up code

* refactor(sanity): add archived filter

* refactor(sanity): make single bundle menu + clean up

* chore(sanity): add missing properties

* feat(sanity): add loading & remove unused code

* feat(sanity): add loading to document version, update filter

* chore(sanity): rename VersionBadge to BundleBadge

* chore(sanity): clean up methods and style

* chore(sanity): remove unused import

* refactor(sanity): use Bundle provider instead of store

* chore(sanity): update bundleRow to use the new name for badge

* chore(sanity): clean up code

* refactor(sanity): re-add oncancel and oncreate props in dialog

* refactor(sanity): add scroll to bundle menu

* refactor(sanity): move from archived to archivedAt

* refactor(sanity): only show the list of bundles if it has more than published / drafts

* chore(sanity): remove warnings comments
---
 .eslintrc.cjs                                 |   2 +-
 .../_singletons/context/VersionContext.tsx    |  30 ++-
 .../components/BundlesTable/BundleRow.tsx     |   4 +-
 .../__workshop__/BundlesStoreStory.tsx        |   4 +-
 .../bundles/__workshop__/ReleaseForm.tsx      | 133 ----------
 .../sanity/src/core/store/bundles/types.ts    |   4 +-
 .../sanity/src/core/studio/StudioProvider.tsx |  15 +-
 .../{VersionBadge.tsx => BundleBadge.tsx}     |  20 +-
 .../core/versions/components/BundleMenu.tsx   | 132 ++++++++++
 .../versions/components/GlobalBundleMenu.tsx  | 112 ++------
 .../versions/components/dialog/BundleForm.tsx | 193 ++++++++------
 .../dialog/BundleIconEditorPicker.tsx         | 119 +++++++++
 .../components/dialog/CreateBundleDialog.tsx  |  88 ++++---
 .../components/panes/BundleActions.tsx        |  83 +++---
 .../components/panes/DocumentVersionMenu.tsx  | 248 ++----------------
 packages/sanity/src/core/versions/types.ts    |  27 --
 .../sanity/src/core/versions/util/const.ts    |  35 +--
 .../src/core/versions/util/dummyGetters.ts    |  18 +-
 .../header/DocumentHeaderTitle.tsx            |  11 +-
 .../statusBar/DocumentStatusBarActions.tsx    |   9 +-
 20 files changed, 558 insertions(+), 729 deletions(-)
 delete mode 100644 packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
 rename packages/sanity/src/core/versions/components/{VersionBadge.tsx => BundleBadge.tsx} (50%)
 create mode 100644 packages/sanity/src/core/versions/components/BundleMenu.tsx
 create mode 100644 packages/sanity/src/core/versions/components/dialog/BundleIconEditorPicker.tsx
 delete mode 100644 packages/sanity/src/core/versions/types.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 89685003ac60..1b2be812bbda 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -164,7 +164,7 @@ const config = {
 
     // Ignore i18n in releases files. TODO: Remove this before moving releases to GA.
     {
-      files: ['**/*/core/releases/**/*'],
+      files: ['**/*/core/releases/**/*', '**/*/core/versions/**/*'],
       rules: {
         'i18next/no-literal-string': 'off',
         '@sanity/i18n/no-attribute-string-literals': 'off',
diff --git a/packages/sanity/src/_singletons/context/VersionContext.tsx b/packages/sanity/src/_singletons/context/VersionContext.tsx
index 0c5347a12860..19e98b7376c3 100644
--- a/packages/sanity/src/_singletons/context/VersionContext.tsx
+++ b/packages/sanity/src/_singletons/context/VersionContext.tsx
@@ -4,14 +4,15 @@
 // eslint-disable-next-line import/consistent-type-specifier-style
 import {createContext, type ReactElement} from 'react'
 
-import type {Version} from '../../../core/versions/types'
-import {BUNDLES, LATEST} from '../../../core/versions/util/const'
+import {useBundlesStore} from '../../../core/store/bundles'
+import type {BundleDocument} from '../../../core/store/bundles/types'
+import {LATEST} from '../../../core/versions/util/const'
 import {useRouter} from '../../../router'
 
 export interface VersionContextValue {
-  currentVersion: Version
+  currentVersion: Partial<BundleDocument>
   isDraft: boolean
-  setCurrentVersion: (version: Version) => void
+  setCurrentVersion: (bundle: Partial<BundleDocument>) => void
 }
 
 export const VersionContext = createContext<VersionContextValue>({
@@ -27,7 +28,9 @@ interface VersionProviderProps {
 
 export function VersionProvider({children}: VersionProviderProps): JSX.Element {
   const router = useRouter()
-  const setCurrentVersion = (version: Version) => {
+  const {data: bundles} = useBundlesStore()
+
+  const setCurrentVersion = (version: Partial<BundleDocument>) => {
     const {name} = version
     if (name === 'drafts') {
       router.navigateStickyParam('perspective', '')
@@ -35,14 +38,15 @@ export function VersionProvider({children}: VersionProviderProps): JSX.Element {
       router.navigateStickyParam('perspective', `bundle.${name}`)
     }
   }
-  const selectedVersion = router.stickyParams?.perspective
-    ? BUNDLES.find((bundle) => {
-        return (
-          `bundle.${bundle.name}`.toLocaleLowerCase() ===
-          router.stickyParams.perspective?.toLocaleLowerCase()
-        )
-      })
-    : LATEST
+  const selectedVersion =
+    router.stickyParams?.perspective && bundles
+      ? bundles.find((bundle) => {
+          return (
+            `bundle.${bundle.name}`.toLocaleLowerCase() ===
+            router.stickyParams.perspective?.toLocaleLowerCase()
+          )
+        })
+      : LATEST
 
   const currentVersion = selectedVersion || LATEST
 
diff --git a/packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx b/packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx
index 0d07558de412..149e13c720f5 100644
--- a/packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx
+++ b/packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx
@@ -3,7 +3,7 @@ import {RelativeTime} from 'sanity'
 import {useRouter} from 'sanity/router'
 
 import {type BundleDocument} from '../../../store/bundles/types'
-import {VersionBadge} from '../../../versions/components/VersionBadge'
+import {BundleBadge} from '../../../versions/components/BundleBadge'
 import {BundleMenuButton} from '../BundleMenuButton/BundleMenuButton'
 
 type Props = {
@@ -26,7 +26,7 @@ export function BundleRow({bundle}: Props) {
         >
           <Flex align="center" gap={2}>
             <Box flex="none">
-              <VersionBadge tone={bundle.tone} icon={bundle.icon} />
+              <BundleBadge tone={bundle.tone} icon={bundle.icon} />
             </Box>
             <Stack flex={1} space={2}>
               <Flex align="center" gap={2}>
diff --git a/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx b/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
index 8e482dda7d4c..240173ec6e7b 100644
--- a/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
+++ b/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
@@ -4,10 +4,10 @@ import {type ComponentType, type FormEvent, useCallback, useState} from 'react'
 import {Button} from '../../../../ui-components'
 import {LoadingBlock} from '../../../components/loadingBlock/LoadingBlock'
 import {AddonDatasetProvider} from '../../../studio/addonDataset/AddonDatasetProvider'
+import {BundleForm} from '../../../versions/components/dialog/BundleForm'
 import {BundlesProvider, useBundles} from '../BundlesProvider'
 import {type BundleDocument} from '../types'
 import {useBundleOperations} from '../useBundleOperations'
-import {ReleaseForm} from './ReleaseForm'
 
 const WithAddonDatasetProvider = <P extends object>(Component: ComponentType<P>): React.FC<P> => {
   const WrappedComponent: React.FC<P> = (props) => (
@@ -66,7 +66,7 @@ const BundlesStoreStory = () => {
           <form onSubmit={handleCreateBundle}>
             <Stack space={4}>
               <Text weight="medium">Create a new release</Text>
-              <ReleaseForm onChange={setValue} value={value} />
+              <BundleForm onChange={setValue} value={value} />
               <Flex justify="flex-end">
                 <Button
                   text="Create"
diff --git a/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx b/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
deleted file mode 100644
index 34f601d5880a..000000000000
--- a/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import {COLOR_HUES} from '@sanity/color'
-import {CalendarIcon} from '@sanity/icons'
-import {
-  Box,
-  type ButtonTone,
-  Card,
-  Flex,
-  Select,
-  Stack,
-  Text,
-  TextArea,
-  TextInput,
-} from '@sanity/ui'
-import speakingurl from 'speakingurl'
-
-import {Button} from '../../../../ui-components/button'
-import {type BundleDocument} from '../types'
-
-function toSlug(value: string): string {
-  return speakingurl(value, {truncate: 200, symbols: true})
-}
-
-/**
- * Copy from Prototype, not a final or complete working implementation.
- */
-export function ReleaseForm(props: {
-  onChange: (params: Partial<BundleDocument>) => void
-  value: Partial<BundleDocument>
-}) {
-  const {onChange, value} = props
-
-  const handleReleaseTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const v = event.target.value
-
-    onChange({...value, title: v, name: toSlug(v)})
-  }
-
-  const handleReleaseDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const v = event.target.value
-
-    onChange({...value, description: v || undefined})
-  }
-
-  const handleReleaseToneChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    onChange({...value, tone: (event.target.value || undefined) as ButtonTone | undefined})
-  }
-
-  const handleReleasePublishAtChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const v = event.target.value
-
-    onChange({...value, publishAt: v})
-  }
-
-  return (
-    <Stack space={5}>
-      <Stack space={3}>
-        <Text size={1} weight="medium">
-          Title
-        </Text>
-        <TextInput fontSize={3} onChange={handleReleaseTitleChange} value={value.title} />
-      </Stack>
-
-      <Stack space={3}>
-        <Text size={1} weight="medium">
-          Description
-        </Text>
-        <TextArea onChange={handleReleaseDescriptionChange} value={value.description} />
-      </Stack>
-
-      <Stack hidden space={3}>
-        <Text size={1} weight="medium">
-          Schedule for publishing at
-        </Text>
-        <TextInput
-          onChange={handleReleasePublishAtChange}
-          suffix={
-            <Box padding={1} style={{border: '1px solid transparent'}}>
-              <Button icon={CalendarIcon} mode="bleed" />
-            </Box>
-          }
-          value={value.publishAt || ''}
-        />
-      </Stack>
-
-      <Stack space={3}>
-        <Text size={1} weight="medium">
-          Color
-        </Text>
-        <Flex>
-          <Card
-            borderTop
-            borderLeft
-            borderBottom
-            flex="none"
-            radius={2}
-            padding={2}
-            style={{
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-            }}
-          >
-            <div
-              style={{
-                borderRadius: 1,
-                width: 17,
-                height: 17,
-                backgroundColor: `var(--card-avatar-${value.tone || 'gray'}-bg-color)`,
-              }}
-            >
-              &nbsp;
-            </div>
-          </Card>
-          <Stack flex={1}>
-            <Select
-              onChange={handleReleaseToneChange}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-              }}
-              value={value.tone || ''}
-            >
-              {COLOR_HUES.map((hue) => (
-                <option key={hue} value={hue === 'gray' ? '' : hue}>
-                  {hue}
-                </option>
-              ))}
-            </Select>
-          </Stack>
-        </Flex>
-      </Stack>
-    </Stack>
-  )
-}
diff --git a/packages/sanity/src/core/store/bundles/types.ts b/packages/sanity/src/core/store/bundles/types.ts
index 3389aa3c2a11..aecebe112061 100644
--- a/packages/sanity/src/core/store/bundles/types.ts
+++ b/packages/sanity/src/core/store/bundles/types.ts
@@ -1,13 +1,13 @@
+import {type ColorHueKey} from '@sanity/color'
 import {type IconSymbol} from '@sanity/icons'
 import {type SanityDocument} from '@sanity/types'
-import {type ButtonTone} from '@sanity/ui'
 
 export interface BundleDocument extends SanityDocument {
   _type: 'bundle'
   title: string
   name: string
   description?: string
-  tone?: ButtonTone
+  hue?: ColorHueKey
   icon?: IconSymbol
   authorId: string
   publishedAt?: string
diff --git a/packages/sanity/src/core/studio/StudioProvider.tsx b/packages/sanity/src/core/studio/StudioProvider.tsx
index c2f3e6c15cf4..291f3676422e 100644
--- a/packages/sanity/src/core/studio/StudioProvider.tsx
+++ b/packages/sanity/src/core/studio/StudioProvider.tsx
@@ -6,6 +6,7 @@ import javascript from 'refractor/lang/javascript.js'
 import json from 'refractor/lang/json.js'
 import jsx from 'refractor/lang/jsx.js'
 import typescript from 'refractor/lang/typescript.js'
+import {AddonDatasetProvider} from 'sanity'
 
 import {VersionProvider} from '../../_singletons/core/form/VersionContext'
 import {LoadingBlock} from '../components/loadingBlock'
@@ -71,12 +72,14 @@ export function StudioProvider({
       <WorkspaceLoader LoadingComponent={LoadingBlock} ConfigErrorsComponent={ConfigErrorsScreen}>
         <StudioTelemetryProvider config={config}>
           <LocaleProvider>
-            <VersionProvider>
-              <PackageVersionStatusProvider>
-                <MaybeEnableErrorReporting errorReporter={errorReporter} />
-                <ResourceCacheProvider>{children}</ResourceCacheProvider>
-              </PackageVersionStatusProvider>
-            </VersionProvider>
+            <AddonDatasetProvider>
+              <VersionProvider>
+                <PackageVersionStatusProvider>
+                  <MaybeEnableErrorReporting errorReporter={errorReporter} />
+                  <ResourceCacheProvider>{children}</ResourceCacheProvider>
+                </PackageVersionStatusProvider>
+              </VersionProvider>
+            </AddonDatasetProvider>
           </LocaleProvider>
         </StudioTelemetryProvider>
       </WorkspaceLoader>
diff --git a/packages/sanity/src/core/versions/components/VersionBadge.tsx b/packages/sanity/src/core/versions/components/BundleBadge.tsx
similarity index 50%
rename from packages/sanity/src/core/versions/components/VersionBadge.tsx
rename to packages/sanity/src/core/versions/components/BundleBadge.tsx
index cceed5542c48..3e0e4fb60000 100644
--- a/packages/sanity/src/core/versions/components/VersionBadge.tsx
+++ b/packages/sanity/src/core/versions/components/BundleBadge.tsx
@@ -1,13 +1,16 @@
+import {hues} from '@sanity/color'
 import {ChevronDownIcon, Icon} from '@sanity/icons'
-import {Box, Flex, Text} from '@sanity/ui'
+// eslint-disable-next-line camelcase
+import {Box, Flex, rgba, Text, useTheme_v2} from '@sanity/ui'
 import {type CSSProperties} from 'react'
 
-import {type SanityVersionIcon} from '../types'
+import {type BundleDocument} from '../../store/bundles/types'
 
-export function VersionBadge(
-  props: Partial<SanityVersionIcon> & {openButton?: boolean; padding?: number; title?: string},
+export function BundleBadge(
+  props: Partial<BundleDocument> & {openButton?: boolean; padding?: number; title?: string},
 ): JSX.Element {
-  const {tone, icon, openButton, padding = 3, title} = props
+  const {hue = 'gray', icon, openButton, padding = 3, title} = props
+  const {color} = useTheme_v2()
 
   return (
     <Flex
@@ -15,9 +18,10 @@ export function VersionBadge(
       padding={padding}
       style={
         {
-          '--card-fg-color': `var(--card-badge-${tone}-fg-color)`,
-          '--card-icon-color': `var(--card-badge-${tone}-icon-color)`,
-          'backgroundColor': `var(--card-badge-${tone}-bg-color)`,
+          '--card-bg-color': rgba(hues[hue][color._dark ? 700 : 300].hex, 0.2),
+          '--card-fg-color': hues[hue][color._dark ? 400 : 600].hex,
+          '--card-icon-color': hues[hue][color._dark ? 400 : 600].hex,
+          'backgroundColor': 'var(--card-bg-color)',
           'borderRadius': '9999px',
         } as CSSProperties
       }
diff --git a/packages/sanity/src/core/versions/components/BundleMenu.tsx b/packages/sanity/src/core/versions/components/BundleMenu.tsx
new file mode 100644
index 000000000000..e83cf6285722
--- /dev/null
+++ b/packages/sanity/src/core/versions/components/BundleMenu.tsx
@@ -0,0 +1,132 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Box, Flex, Menu, MenuButton, MenuDivider, MenuItem, Spinner, Text} from '@sanity/ui'
+import {type ReactElement, useCallback, useContext} from 'react'
+import {RelativeTime} from 'sanity'
+import {styled} from 'styled-components'
+
+import {
+  VersionContext,
+  type VersionContextValue,
+} from '../../../_singletons/core/form/VersionContext'
+import {type BundleDocument} from '../../store/bundles/types'
+import {LATEST} from '../util/const'
+import {isDraftOrPublished} from '../util/dummyGetters'
+import {BundleBadge} from './BundleBadge'
+
+const StyledMenu = styled(Menu)`
+  min-width: 200px;
+`
+
+const StyledBox = styled(Box)`
+  overflow: auto;
+  max-height: 200px;
+`
+
+interface BundleListProps {
+  button: ReactElement
+  bundles: BundleDocument[] | null
+  loading: boolean
+  actions?: ReactElement
+}
+
+export function BundleMenu(props: BundleListProps): JSX.Element {
+  const {bundles, loading, actions, button} = props
+  const hasBundles = bundles && bundles.filter((b) => !isDraftOrPublished(b.name)).length > 0
+
+  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
+  const {currentVersion, setCurrentVersion, isDraft} =
+    useContext<VersionContextValue>(VersionContext)
+
+  // FIXME REPLACE WHEN WE HAVE REAL DATA
+  const handleBundleChange = useCallback(
+    (bundle: Partial<BundleDocument>) => () => {
+      setCurrentVersion(bundle)
+    },
+    [setCurrentVersion],
+  )
+
+  return (
+    <>
+      <MenuButton
+        button={button}
+        id="global-version-menu"
+        menu={
+          <StyledMenu>
+            {loading ? (
+              <Flex padding={4} justify="center">
+                <Spinner muted />
+              </Flex>
+            ) : (
+              <>
+                <MenuItem
+                  iconRight={isDraft ? <CheckmarkIcon /> : undefined}
+                  onClick={handleBundleChange(LATEST)}
+                  pressed={false}
+                  text={LATEST.title}
+                />
+                {hasBundles && (
+                  <>
+                    <MenuDivider />
+                    <StyledBox>
+                      {bundles
+                        .filter((b) => !isDraftOrPublished(b.name) && !b.archivedAt)
+                        .map((b) => (
+                          <MenuItem
+                            key={b.name}
+                            onClick={handleBundleChange(b)}
+                            padding={1}
+                            pressed={false}
+                          >
+                            <Flex>
+                              <BundleBadge hue={b.hue} icon={b.icon} padding={2} />
+
+                              <Box flex={1} padding={2} style={{minWidth: 100}}>
+                                <Text size={1} weight="medium">
+                                  {b.title}
+                                </Text>
+                              </Box>
+
+                              <Box padding={2}>
+                                <Text muted size={1}>
+                                  {b.publishAt ? (
+                                    <RelativeTime time={b.publishAt as Date} useTemporalPhrase />
+                                  ) : (
+                                    /* localize text */
+                                    'No target date'
+                                  )}
+                                </Text>
+                              </Box>
+
+                              <Box padding={2}>
+                                <Text size={1}>
+                                  <CheckmarkIcon
+                                    style={{opacity: currentVersion.name === b.name ? 1 : 0}}
+                                  />
+                                </Text>
+                              </Box>
+                            </Flex>
+                          </MenuItem>
+                        ))}
+                    </StyledBox>
+                  </>
+                )}
+
+                {actions && (
+                  <>
+                    <MenuDivider />
+                    {actions}
+                  </>
+                )}
+              </>
+            )}
+          </StyledMenu>
+        }
+        popover={{
+          placement: 'bottom-start',
+          portal: true,
+          zOffset: 3000,
+        }}
+      />
+    </>
+  )
+}
diff --git a/packages/sanity/src/core/versions/components/GlobalBundleMenu.tsx b/packages/sanity/src/core/versions/components/GlobalBundleMenu.tsx
index 7d86ae7e93b2..7b53d2f3a872 100644
--- a/packages/sanity/src/core/versions/components/GlobalBundleMenu.tsx
+++ b/packages/sanity/src/core/versions/components/GlobalBundleMenu.tsx
@@ -1,70 +1,41 @@
-import {AddIcon, CheckmarkIcon} from '@sanity/icons'
-import {Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, Text} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+import {Button, MenuItem} from '@sanity/ui'
 import {useCallback, useContext, useState} from 'react'
-import {useRouter} from 'sanity/router'
 
 import {
   VersionContext,
   type VersionContextValue,
 } from '../../../_singletons/core/form/VersionContext'
-import {type Bundle, type Version} from '../types'
-import {BUNDLES, LATEST} from '../util/const'
-import {isDraftOrPublished} from '../util/dummyGetters'
+import {useBundles} from '../../store/bundles/BundlesProvider'
+import {LATEST} from '../util/const'
+import {BundleBadge} from './BundleBadge'
+import {BundleMenu} from './BundleMenu'
 import {CreateBundleDialog} from './dialog/CreateBundleDialog'
-import {VersionBadge} from './VersionBadge'
 
 export function GlobalBundleMenu(): JSX.Element {
-  const router = useRouter()
+  const {data: bundles, loading} = useBundles()
 
-  // eslint-disable-next-line no-warning-comments
-  // FIXME REPLACE WHEN WE HAVE REAL DATA
-  const bundles = BUNDLES
-
-  // eslint-disable-next-line no-warning-comments
-  // FIXME REPLACE WHEN WE HAVE REAL DATA
-  const {currentVersion, setCurrentVersion, isDraft} =
-    useContext<VersionContextValue>(VersionContext)
   const [createBundleDialogOpen, setCreateBundleDialogOpen] = useState(false)
 
-  const handleBundleChange = useCallback(
-    (bundle: Version) => () => {
-      const {name} = bundle
-
-      if (isDraftOrPublished(name)) {
-        router.navigateStickyParam('perspective', '')
-      } else {
-        router.navigateStickyParam('perspective', `bundle.${name}`)
-      }
-
-      setCurrentVersion(bundle)
-    },
-    [router, setCurrentVersion],
-  )
+  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
+  const {currentVersion, isDraft} = useContext<VersionContextValue>(VersionContext)
 
   /* create new bundle */
-
   const handleCreateBundleClick = useCallback(() => {
     setCreateBundleDialogOpen(true)
   }, [])
 
-  const handleCancel = useCallback(() => {
-    setCreateBundleDialogOpen(false)
-  }, [])
-
-  const handleSubmit = useCallback((value: Bundle) => {
-    // eslint-disable-next-line no-console
-    console.log('create new bundle', value.name)
-
+  const handleClose = useCallback(() => {
     setCreateBundleDialogOpen(false)
   }, [])
 
   return (
     <>
-      <MenuButton
+      <BundleMenu
         button={
           <Button mode="bleed" padding={0} radius="full">
-            <VersionBadge
-              tone={currentVersion?.tone}
+            <BundleBadge
+              hue={currentVersion?.hue}
               icon={isDraft ? undefined : currentVersion?.icon}
               openButton
               padding={2}
@@ -72,61 +43,16 @@ export function GlobalBundleMenu(): JSX.Element {
             />
           </Button>
         }
-        id="global-version-menu"
-        menu={
-          <Menu>
-            <MenuItem
-              iconRight={isDraft ? <CheckmarkIcon /> : undefined}
-              onClick={handleBundleChange(LATEST)}
-              pressed={false}
-              text={LATEST.title}
-            />
-            {bundles.length > 0 && (
-              <>
-                <MenuDivider />
-              </>
-            )}
-            {bundles
-              .filter((b) => !isDraftOrPublished(b.name))
-              .map((b) => (
-                <MenuItem key={b.name} onClick={handleBundleChange(b)} padding={1} pressed={false}>
-                  <Flex>
-                    <VersionBadge tone={b.tone} icon={b.icon} padding={2} />
-
-                    <Box flex={1} padding={2} style={{minWidth: 100}}>
-                      <Text size={1} weight="medium">
-                        {b.title}
-                      </Text>
-                    </Box>
-
-                    <Box padding={2}>
-                      <Text muted size={1}>
-                        {b.publishAt ? `a date will be here ${b.publishAt}` : 'No target date'}
-                      </Text>
-                    </Box>
-
-                    <Box padding={2}>
-                      <Text size={1}>
-                        <CheckmarkIcon style={{opacity: currentVersion.name === b.name ? 1 : 0}} />
-                      </Text>
-                    </Box>
-                  </Flex>
-                </MenuItem>
-              ))}
-            <MenuDivider />
-            {/* eslint-disable-next-line @sanity/i18n/no-attribute-string-literals */}
-            <MenuItem icon={AddIcon} onClick={handleCreateBundleClick} text="Create release" />
-          </Menu>
+        bundles={bundles}
+        loading={loading}
+        actions={
+          // localize text
+          <MenuItem icon={AddIcon} onClick={handleCreateBundleClick} text="Create release" />
         }
-        popover={{
-          placement: 'bottom-start',
-          portal: true,
-          zOffset: 3000,
-        }}
       />
 
       {createBundleDialogOpen && (
-        <CreateBundleDialog onCancel={handleCancel} onCreate={handleSubmit} />
+        <CreateBundleDialog onCancel={handleClose} onCreate={handleClose} />
       )}
     </>
   )
diff --git a/packages/sanity/src/core/versions/components/dialog/BundleForm.tsx b/packages/sanity/src/core/versions/components/dialog/BundleForm.tsx
index b716961e6ef1..7f2f284c48e0 100644
--- a/packages/sanity/src/core/versions/components/dialog/BundleForm.tsx
+++ b/packages/sanity/src/core/versions/components/dialog/BundleForm.tsx
@@ -1,43 +1,58 @@
-/* eslint-disable no-warning-comments */
 /* eslint-disable i18next/no-literal-string */
 import {CalendarIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  type ButtonTone,
-  Card,
-  Flex,
-  Select,
-  Stack,
-  Text,
-  TextArea,
-  TextInput,
-} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {Box, Button, Card, Flex, Popover, Stack, Text, TextArea, TextInput} from '@sanity/ui'
+import {useCallback, useMemo, useState} from 'react'
+import {useDateTimeFormat, useTranslation} from 'sanity'
 import speakingurl from 'speakingurl'
 
-import {type Bundle} from '../../types'
-import {RANDOM_TONES} from '../../util/const'
+import {type CalendarLabels} from '../../../form/inputs/DateInputs/base/calendar/types'
+import {DatePicker} from '../../../form/inputs/DateInputs/base/DatePicker'
+import {getCalendarLabels} from '../../../form/inputs/DateInputs/utils'
+import {type BundleDocument} from '../../../store/bundles/types'
 import {isDraftOrPublished} from '../../util/dummyGetters'
+import {BundleIconEditorPicker} from './BundleIconEditorPicker'
 
 export function BundleForm(props: {
-  onChange: (params: Bundle) => void
-  value: Bundle
+  onChange: (params: Partial<BundleDocument>) => void
+  value: Partial<BundleDocument>
 }): JSX.Element {
   const {onChange, value} = props
+  const {title, description, icon, hue, publishAt} = value
+
+  const dateFormatter = useDateTimeFormat()
+
   const [showTitleValidation, setShowTitleValidation] = useState(false)
+  const [showDateValidation, setShowDateValidation] = useState(false)
+  const [showDatePicker, setShowDatePicker] = useState(false)
+
+  const publishAtDisplayValue = useMemo(() => {
+    if (!publishAt) return ''
+    return dateFormatter.format(new Date(publishAt as Date))
+  }, [dateFormatter, publishAt])
+
+  const [displayDate, setDisplayDate] = useState(publishAtDisplayValue)
+  const {t: coreT} = useTranslation()
+  const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(coreT), [coreT])
+
+  const iconValue: Partial<BundleDocument> = useMemo(
+    () => ({
+      icon: icon ?? 'cube',
+      hue: hue ?? 'gray',
+    }),
+    [icon, hue],
+  )
 
   const handleBundleTitleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      const title = event.target.value
+      const pickedTitle = event.target.value
 
-      if (isDraftOrPublished(title)) {
+      if (isDraftOrPublished(pickedTitle)) {
         setShowTitleValidation(true)
       } else {
         setShowTitleValidation(false)
       }
 
-      onChange({...value, title: title, name: speakingurl(title)})
+      onChange({...value, title: pickedTitle, name: speakingurl(pickedTitle)})
     },
     [onChange, value],
   )
@@ -51,29 +66,54 @@ export function BundleForm(props: {
     [onChange, value],
   )
 
-  const handleBundleToneChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      onChange({...value, tone: (event.target.value || undefined) as ButtonTone | undefined})
+  const handleOpenDatePicker = useCallback(() => {
+    setShowDatePicker(!showDatePicker)
+  }, [showDatePicker])
+
+  const handleBundlePublishAtChange = useCallback(
+    (nextDate: Date | undefined) => {
+      onChange({...value, publishAt: nextDate})
+      setDisplayDate(dateFormatter.format(new Date(nextDate as Date)))
+
+      setShowDatePicker(false)
     },
-    [onChange, value],
+    [dateFormatter, onChange, value],
   )
 
-  const handleBundlePublishAtChange = useCallback(
+  const handlePublishAtInputChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      const v = event.target.value
+      // there's likely a better way of doing this
+      // needs to check that the date is not invalid & not empty
+      // in which case it can update the input value but not the actual bundle value
+      if (new Date(event.target.value).toString() === 'Invalid Date' && event.target.value !== '') {
+        setShowDateValidation(true)
+        setDisplayDate(event.target.value)
+      } else {
+        setShowDateValidation(false)
+        setDisplayDate(event.target.value)
+        onChange({...value, publishAt: event.target.value})
+      }
+    },
+    [onChange, value],
+  )
 
-      onChange({...value, publishAt: v})
+  const handleIconValueChange = useCallback(
+    (pickedIcon: Partial<BundleDocument>) => {
+      onChange({...value, icon: pickedIcon.icon, hue: pickedIcon.hue})
     },
     [onChange, value],
   )
 
   return (
     <Stack space={5}>
+      <Flex>
+        <BundleIconEditorPicker onChange={handleIconValueChange} value={iconValue} />
+      </Flex>
       <Stack space={3}>
         {showTitleValidation && (
           <Card tone="critical" padding={3} radius={2}>
             <Text align="center" muted size={1}>
-              {/* localize text */}
+              {/* localize & validate copy & UI */}
               Title cannot be "drafts" or "published"
             </Text>
           </Card>
@@ -82,7 +122,7 @@ export function BundleForm(props: {
           {/* localize text */}
           Title
         </Text>
-        <TextInput onChange={handleBundleTitleChange} value={value.title} />
+        <TextInput onChange={handleBundleTitleChange} value={title} />
       </Stack>
 
       <Stack space={3}>
@@ -90,7 +130,7 @@ export function BundleForm(props: {
           {/* localize text */}
           Description
         </Text>
-        <TextArea onChange={handleBundleDescriptionChange} value={value.description} />
+        <TextArea onChange={handleBundleDescriptionChange} value={description} />
       </Stack>
 
       <Stack space={3}>
@@ -98,66 +138,47 @@ export function BundleForm(props: {
           {/* localize text */}
           Schedule for publishing at
         </Text>
-        {/** TODO UPDATE WITH REAL INPUT */}
+        {showDateValidation && (
+          <Card tone="critical" padding={3} radius={2}>
+            <Text align="center" muted size={1}>
+              {/* localize & validate copy & UI */}
+              Should be an empty or valid date
+            </Text>
+          </Card>
+        )}
+
         <TextInput
-          onChange={handleBundlePublishAtChange}
           suffix={
-            <Box padding={1} style={{border: '1px solid transparent'}}>
-              <Button icon={CalendarIcon} mode="bleed" padding={2} />
-            </Box>
+            <Popover
+              constrainSize
+              content={
+                <Box overflow="auto">
+                  <DatePicker
+                    onChange={handleBundlePublishAtChange}
+                    calendarLabels={calendarLabels}
+                    value={publishAt as Date}
+                    selectTime
+                  />
+                </Box>
+              }
+              open={showDatePicker}
+              placement="bottom-end"
+              radius={2}
+            >
+              <Box padding={1} style={{border: '1px solid transparent'}}>
+                <Button
+                  icon={CalendarIcon}
+                  mode="bleed"
+                  padding={2}
+                  onClick={handleOpenDatePicker}
+                />
+              </Box>
+            </Popover>
           }
-          value={value.publishAt || ''}
+          value={displayDate}
+          onChange={handlePublishAtInputChange}
         />
       </Stack>
-
-      <Stack space={3}>
-        <Text size={1} weight="medium">
-          {/* localize text */}
-          Color
-        </Text>
-        <Flex>
-          <Card
-            borderTop
-            borderLeft
-            borderBottom
-            flex="none"
-            radius={2}
-            padding={2}
-            style={{
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-            }}
-          >
-            <div
-              style={{
-                borderRadius: 1,
-                width: 17,
-                height: 17,
-                backgroundColor: `var(--card-badge-${value.tone || 'default'}-icon-color)`,
-              }}
-            >
-              &nbsp;
-            </div>
-          </Card>
-          <Stack flex={1}>
-            <Select
-              onChange={handleBundleToneChange}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                textTransform: 'capitalize',
-              }}
-              value={value.tone || ''}
-            >
-              {RANDOM_TONES.map((tone) => (
-                <option key={tone} value={tone}>
-                  {tone}
-                </option>
-              ))}
-            </Select>
-          </Stack>
-        </Flex>
-      </Stack>
     </Stack>
   )
 }
diff --git a/packages/sanity/src/core/versions/components/dialog/BundleIconEditorPicker.tsx b/packages/sanity/src/core/versions/components/dialog/BundleIconEditorPicker.tsx
new file mode 100644
index 000000000000..5055f566399f
--- /dev/null
+++ b/packages/sanity/src/core/versions/components/dialog/BundleIconEditorPicker.tsx
@@ -0,0 +1,119 @@
+import {COLOR_HUES, type ColorHueKey} from '@sanity/color'
+import {icons, type IconSymbol, SearchIcon} from '@sanity/icons'
+import {Avatar, Box, Button, Flex, Popover, Stack, TextInput, useClickOutside} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {type BundleDocument} from '../../../store/bundles/types'
+import {BundleBadge} from '../BundleBadge'
+
+const StyledStack = styled(Stack)`
+  border-top: 1px solid var(--card-border-color);
+`
+const IconPickerFlex = styled(Flex)`
+  max-height: 269px;
+  max-width: 269px;
+`
+
+export function BundleIconEditorPicker(props: {
+  onChange: (value: Partial<BundleDocument>) => void
+  value: Partial<BundleDocument>
+}): JSX.Element {
+  const {onChange, value} = props
+
+  const [open, setOpen] = useState(false)
+
+  const [iconSearchQuery, setIconSearchQuery] = useState('')
+
+  const handleIconSearchQueryChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setIconSearchQuery(event.target.value)
+  }, [])
+
+  const [button, setButton] = useState<HTMLButtonElement | null>(null)
+  const [popover, setPopover] = useState<HTMLDivElement | null>(null)
+
+  const handleClickOutside = useCallback(() => {
+    setOpen(false)
+  }, [])
+
+  const handleOnPickerOpen = useCallback(() => {
+    setOpen((o) => !o)
+  }, [])
+
+  const handleHueChange = (hue: ColorHueKey) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    onChange({...value, hue})
+  }
+
+  const handleIconChange = (icon: IconSymbol) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    onChange({...value, icon})
+  }
+
+  useClickOutside(handleClickOutside, [button, popover])
+
+  return (
+    <Popover
+      content={
+        <>
+          <Flex gap={1} padding={1}>
+            {COLOR_HUES.map((hue) => (
+              <Button
+                key={hue}
+                mode="bleed"
+                onClick={handleHueChange(hue)}
+                padding={1}
+                selected={value.hue === hue}
+              >
+                <Avatar color={hue} size={0} />
+              </Button>
+            ))}
+          </Flex>
+          <StyledStack>
+            <Box padding={1}>
+              <TextInput
+                fontSize={1}
+                icon={SearchIcon}
+                onChange={handleIconSearchQueryChange}
+                padding={2}
+                placeholder="Search icons"
+                space={2}
+                value={iconSearchQuery}
+              />
+            </Box>
+            <IconPickerFlex gap={1} overflow="auto" padding={1} wrap="wrap">
+              {Object.entries(icons)
+                .filter(([key]) => !iconSearchQuery || key.includes(iconSearchQuery.toLowerCase()))
+                .map(([key, icon]) => (
+                  <Button
+                    icon={icon}
+                    key={key}
+                    mode="bleed"
+                    onClick={handleIconChange(key as IconSymbol)}
+                    padding={2}
+                  />
+                ))}
+            </IconPickerFlex>
+          </StyledStack>
+        </>
+      }
+      open={open}
+      placement="bottom-start"
+      portal
+      ref={setPopover}
+    >
+      <div>
+        <Button
+          mode="bleed"
+          onClick={handleOnPickerOpen}
+          padding={0}
+          ref={setButton}
+          selected={open}
+          radius="full"
+        >
+          <BundleBadge hue={value.hue} icon={value.icon} />
+        </Button>
+      </div>
+    </Popover>
+  )
+}
diff --git a/packages/sanity/src/core/versions/components/dialog/CreateBundleDialog.tsx b/packages/sanity/src/core/versions/components/dialog/CreateBundleDialog.tsx
index 7de419ee3fae..0430fa818ac9 100644
--- a/packages/sanity/src/core/versions/components/dialog/CreateBundleDialog.tsx
+++ b/packages/sanity/src/core/versions/components/dialog/CreateBundleDialog.tsx
@@ -1,52 +1,59 @@
 import {ArrowRightIcon} from '@sanity/icons'
 import {Box, Button, Dialog, Flex} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-import {useCurrentUser} from 'sanity'
+import {type FormEvent, useCallback, useContext, useState} from 'react'
 
+import {
+  VersionContext,
+  type VersionContextValue,
+} from '../../../../_singletons/core/form/VersionContext'
+import {type BundleDocument} from '../../../store/bundles/types'
 import {useBundleOperations} from '../../../store/bundles/useBundleOperations'
-import {type Bundle} from '../../types'
-import {getRandomToneIcon, isDraftOrPublished} from '../../util/dummyGetters'
+import {isDraftOrPublished} from '../../util/dummyGetters'
 import {BundleForm} from './BundleForm'
 
-export function CreateBundleDialog(props: {
+interface CreateBundleDialogProps {
   onCancel: () => void
-  onCreate: (value: Bundle) => void
-}): JSX.Element {
+  onCreate: () => void
+}
+
+export function CreateBundleDialog(props: CreateBundleDialogProps): JSX.Element {
   const {onCancel, onCreate} = props
   const {createBundle} = useBundleOperations()
-  const currentUser = useCurrentUser()
-  const [isCreating, setIsCreating] = useState(false)
 
-  const [value, setValue] = useState<Bundle>({
+  const [value, setValue] = useState<Partial<BundleDocument>>({
     name: '',
     title: '',
-    tone: undefined,
+    hue: 'gray',
+    icon: 'cube',
     publishAt: undefined,
   })
+  const [isCreating, setIsCreating] = useState(false)
+
+  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
+  const {setCurrentVersion} = useContext<VersionContextValue>(VersionContext)
 
   const handleOnSubmit = useCallback(
-    async (bundle: Bundle) => {
-      setIsCreating(true)
+    async (event: FormEvent<HTMLFormElement>) => {
       try {
-        await createBundle({
-          _type: 'bundle',
-          name: value.title,
-          authorId: currentUser?.id,
-          title: value.title,
-          description: value.description,
-          ...getRandomToneIcon(),
-        })
-
-        onCreate(bundle)
-      } catch (e) {
-        console.error(e)
+        event.preventDefault()
+        setIsCreating(true)
+        await createBundle(value)
+        setValue(value)
+      } catch (err) {
+        console.error(err)
       } finally {
         setIsCreating(false)
+        setCurrentVersion(value)
+        onCreate()
       }
     },
-    [createBundle, currentUser?.id, onCreate, value.description, value.title],
+    [createBundle, value, setCurrentVersion, onCreate],
   )
 
+  const handleOnChange = useCallback((changedValue: Partial<BundleDocument>) => {
+    setValue(changedValue)
+  }, [])
+
   return (
     <Dialog
       animate
@@ -56,20 +63,21 @@ export function CreateBundleDialog(props: {
       zOffset={5000}
       width={1}
     >
-      <Box padding={6}>
-        <BundleForm onChange={setValue} value={value} />
-      </Box>
-      <Flex justify="flex-end" padding={3}>
-        <Button
-          loading={isCreating}
-          disabled={!value.title || isDraftOrPublished(value.title) || isCreating}
-          iconRight={ArrowRightIcon}
-          onClick={() => handleOnSubmit(value)}
-          // localize Text
-          // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
-          text="Create release"
-        />
-      </Flex>
+      <form onSubmit={handleOnSubmit}>
+        <Box padding={6}>
+          <BundleForm onChange={handleOnChange} value={value} />
+        </Box>
+        <Flex justify="flex-end" padding={3}>
+          <Button
+            disabled={!value.title || isDraftOrPublished(value.title) || isCreating}
+            iconRight={ArrowRightIcon}
+            type="submit"
+            // localize Text
+            text="Create release"
+            loading={isCreating}
+          />
+        </Flex>
+      </form>
     </Dialog>
   )
 }
diff --git a/packages/sanity/src/core/versions/components/panes/BundleActions.tsx b/packages/sanity/src/core/versions/components/panes/BundleActions.tsx
index c5cc4ba64121..bc0ca41da1c7 100644
--- a/packages/sanity/src/core/versions/components/panes/BundleActions.tsx
+++ b/packages/sanity/src/core/versions/components/panes/BundleActions.tsx
@@ -1,32 +1,45 @@
-import {AddIcon} from '@sanity/icons'
+import {AddIcon, CheckmarkIcon} from '@sanity/icons'
 import {useToast} from '@sanity/ui'
 import {useCallback, useEffect, useState} from 'react'
-import {DEFAULT_STUDIO_CLIENT_OPTIONS, useClient, useDocumentOperation} from 'sanity'
+import {filter, firstValueFrom} from 'rxjs'
+import {
+  DEFAULT_STUDIO_CLIENT_OPTIONS,
+  useClient,
+  useDocumentOperation,
+  useDocumentStore,
+} from 'sanity'
 
 import {Button} from '../../../../ui-components'
-import {type Version} from '../../types'
+import {useBundles} from '../../../store/bundles/BundlesProvider'
+import {type BundleDocument} from '../../../store/bundles/types'
 import {getAllVersionsOfDocument, versionDocumentExists} from '../../util/dummyGetters'
 
 interface BundleActionsProps {
-  currentVersion: Version
+  currentVersion: BundleDocument
   documentId: string
   documentType: string
-  isReady: boolean
 }
 
 export function BundleActions(props: BundleActionsProps): JSX.Element {
-  const {currentVersion, documentId, documentType, isReady} = props
+  const {currentVersion, documentId, documentType} = props
   const {name, title} = currentVersion
+  const {data: bundles, loading} = useBundles()
+  const documentStore = useDocumentStore()
 
-  const [documentVersions, setDocumentVersions] = useState<Version[]>([])
+  const [documentVersions, setDocumentVersions] = useState<BundleDocument[]>([])
+  const [creatingVersion, setCreatingVersion] = useState(false)
+  const [isInVersion, setIsInVersion] = useState(false)
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
   const toast = useToast()
   const {newVersion} = useDocumentOperation(documentId, documentType)
 
   const fetchVersions = useCallback(async () => {
-    const response = await getAllVersionsOfDocument(client, documentId)
-    setDocumentVersions(response)
-  }, [client, documentId])
+    if (!loading) {
+      const response = await getAllVersionsOfDocument(bundles, client, documentId)
+      setDocumentVersions(response)
+      setIsInVersion(versionDocumentExists(documentVersions, name))
+    }
+  }, [loading, bundles, client, documentId, documentVersions, name])
 
   // DUMMY FETCH -- NEEDS TO BE REPLACED -- USING GROQ from utils
   useEffect(() => {
@@ -35,9 +48,9 @@ export function BundleActions(props: BundleActionsProps): JSX.Element {
     }
 
     fetchVersionsInner()
-  }, [fetchVersions])
+  }, [bundles, documentId, fetchVersions])
 
-  const handleAddVersion = useCallback(() => {
+  const handleAddVersion = useCallback(async () => {
     // only add to version if there isn't already a version in that bundle of this doc
     if (versionDocumentExists(documentVersions, name)) {
       toast.push({
@@ -49,38 +62,42 @@ export function BundleActions(props: BundleActionsProps): JSX.Element {
 
     const bundleId = `${name}.${documentId}`
 
+    setCreatingVersion(true)
+
+    // set up the listener before executing
+    const createVersionSuccess = firstValueFrom(
+      documentStore.pair
+        .operationEvents(bundleId, documentType)
+        .pipe(filter((e) => e.op === 'newVersion' && e.type === 'success')),
+    )
+
     newVersion.execute(bundleId)
-  }, [documentId, documentVersions, name, newVersion, title, toast])
 
-  /* follow up
-  const handleReady = useCallback(() => {
-    // eslint-disable-next-line no-console
-    console.log('handle ready', name)
-  }, [name]) 
-  
-  isReady ? (
-    {<Button
-      data-testid={`action-ready-to-${name}`}
-      // localize text
-      // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
-      text="Ready"
-      icon={CheckmarkIcon}
-      onClick={handleReady}
-    />
-  )*/
+    // only change if the version was created successfully
+    await createVersionSuccess
+    setIsInVersion(true)
+  }, [
+    documentId,
+    documentStore.pair,
+    documentType,
+    documentVersions,
+    name,
+    newVersion,
+    title,
+    toast,
+  ])
 
-  // eslint-disable-next-line no-warning-comments
   /** TODO what should happen when you add a version if we don't have the ready button */
 
   return (
     <Button
       data-testid={`action-add-to-${name}`}
       // localize text
-      // eslint-disable-next-line @sanity/i18n/no-attribute-template-literals
-      text={`Add to ${title}`}
-      icon={AddIcon}
+      text={isInVersion ? `Already in release ${title}` : `Add to ${title}`}
+      icon={isInVersion ? CheckmarkIcon : AddIcon}
       tone="primary"
       onClick={handleAddVersion}
+      disabled={isInVersion || creatingVersion}
     />
   )
 }
diff --git a/packages/sanity/src/core/versions/components/panes/DocumentVersionMenu.tsx b/packages/sanity/src/core/versions/components/panes/DocumentVersionMenu.tsx
index 52b3c9098551..2870c58be087 100644
--- a/packages/sanity/src/core/versions/components/panes/DocumentVersionMenu.tsx
+++ b/packages/sanity/src/core/versions/components/panes/DocumentVersionMenu.tsx
@@ -1,64 +1,39 @@
 /* eslint-disable no-warning-comments */
-/* eslint-disable i18next/no-literal-string */
-
-import {CheckmarkIcon, ChevronDownIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Label,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Stack,
-  Text,
-} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Box, Button} from '@sanity/ui'
 import {useCallback, useContext, useEffect, useState} from 'react'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS, useClient} from 'sanity'
-import {useRouter} from 'sanity/router'
 
 import {
   VersionContext,
   type VersionContextValue,
 } from '../../../../_singletons/core/form/VersionContext'
-import {type Version} from '../../types'
-import {BUNDLES, LATEST} from '../../util/const'
-import {getAllVersionsOfDocument, isDraftOrPublished} from '../../util/dummyGetters'
-import {VersionBadge} from '../VersionBadge'
+import {useBundles} from '../../../store/bundles/BundlesProvider'
+import {type BundleDocument} from '../../../store/bundles/types'
+import {getAllVersionsOfDocument} from '../../util/dummyGetters'
+import {BundleBadge} from '../BundleBadge'
+import {BundleMenu} from '../BundleMenu'
 
 // TODO A LOT OF DOCUMENTED CODE IS RELATED TO SEARCH AND CREATING BUNDLE FROM HERE
 // STILL NEED TO DECIDE IF WE KEEP IT OR NOT
-export function DocumentVersionMenu(props: {
-  documentId: string
-  documentType: string
-}): JSX.Element {
-  const {documentId, documentType} = props
-  //const {newVersion} = useDocumentOperation(documentId, documentType)
+export function DocumentVersionMenu(props: {documentId: string}): JSX.Element {
+  const {documentId} = props
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
-  const router = useRouter()
-  const {currentVersion, isDraft} = useContext<VersionContextValue>(VersionContext)
-  const {name} = currentVersion
-  // const toast = useToast()
 
-  const [documentVersions, setDocumentVersions] = useState<Version[]>([])
+  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
+  const {currentVersion, isDraft} = useContext<VersionContextValue>(VersionContext)
 
-  /*// search
-  const [addVersionTitle, setAddVersionTitle] = useState('')
-  const addVersionName = speakingurl(addVersionTitle)
+  const {title, hue, icon} = currentVersion
 
-  // use to prevent adding a version when you're already in that version
-  const addVersionExists = BUNDLES.some((r) => r.name.toLocaleLowerCase() === addVersionName)
+  const {data: bundles} = useBundles()
 
-  // list of available bundles
-  const bundleOptionsList = BUNDLES.filter((r) =>
-    r.title.toLowerCase().includes(addVersionTitle.toLowerCase()),
-  )*/
+  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
+  const [documentVersions, setDocumentVersions] = useState<BundleDocument[]>([])
 
   const fetchVersions = useCallback(async () => {
-    const response = await getAllVersionsOfDocument(client, documentId)
+    const response = await getAllVersionsOfDocument(bundles, client, documentId)
     setDocumentVersions(response)
-  }, [client, documentId])
+  }, [bundles, client, documentId])
 
   // DUMMY FETCH -- NEEDS TO BE REPLACED -- USING GROQ from utils
   useEffect(() => {
@@ -69,198 +44,21 @@ export function DocumentVersionMenu(props: {
     fetchVersionsInner()
   }, [fetchVersions])
 
-  /* used for the search of bundles when writing a new version name */
-  /*const handleAddVersionChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setAddVersionTitle(event.target.value)
-  }, [])
-
-  const handleAddVersion = useCallback(
-    (versionName: string) => () => {
-      const nameSlugged = speakingurl(versionName)
-
-      // only add to version if there isn't already a version in that bundle of this doc
-      if (versionDocumentExists(documentVersions, versionName)) {
-        toast.push({
-          status: 'error',
-          title: `There's already a version of this document in the bundle ${title}`,
-        })
-        return
-      }
-      const bundleId = `${nameSlugged}.${documentId}`
-
-      newVersion.execute(bundleId)
-    },
-    [documentVersions, documentId, newVersion, toast, title],
-  )*/
-
-  const handleChangeToVersion = useCallback(
-    (version: Version) => () => {
-      const {name: versionName} = version
-
-      if (isDraftOrPublished(versionName)) {
-        router.navigateStickyParam('perspective', '')
-      } else {
-        router.navigateStickyParam('perspective', `bundle.${versionName}`)
-      }
-    },
-    [router],
-  )
-
-  const onMenuOpen = useCallback(async () => {
-    //setAddVersionTitle('')
-    fetchVersions()
-  }, [fetchVersions])
-
   /* TODO Version Badge should only show when the current opened document is in a version */
 
   return (
     <>
       {currentVersion && !isDraft && (
-        <VersionBadge
-          tone={currentVersion.tone}
-          title={currentVersion.title}
-          icon={currentVersion.icon}
-          padding={2}
-        />
+        <BundleBadge hue={hue} title={title} icon={icon} padding={2} />
       )}
 
-      {/** TODO IS THIS STILL NEEDED? VS THE PICKER IN STUDIO NAVBAR? */}
-
+      {/**
+       * TODO IS THIS STILL NEEDED? VS THE PICKER IN STUDIO NAVBAR? */}
       <Box flex="none">
-        <MenuButton
+        <BundleMenu
           button={<Button icon={ChevronDownIcon} mode="bleed" padding={2} space={2} />}
-          id="version-menu"
-          onOpen={onMenuOpen}
-          menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1}>
-                {/* localize text */}
-                <MenuItem
-                  iconRight={isDraft ? CheckmarkIcon : <CheckmarkIcon style={{opacity: 0}} />}
-                  onClick={handleChangeToVersion(LATEST)}
-                  pressed={isDraft}
-                  text={LATEST.title}
-                />
-              </Stack>
-
-              <MenuDivider />
-
-              {BUNDLES.length > 0 && (
-                <>
-                  <Stack padding={1} space={1}>
-                    <Box padding={3} paddingBottom={2}>
-                      {/*                      
-                      localize text
-                      */}
-                      <Label muted size={1}>
-                        {/* localize text */}
-                        Versions
-                      </Label>
-                    </Box>
-
-                    {documentVersions
-                      .filter((b) => !isDraftOrPublished(b.name))
-                      .map((b) => (
-                        <MenuItem
-                          key={b.name}
-                          href=""
-                          onClick={handleChangeToVersion(b)}
-                          padding={1}
-                          pressed={name === b.name}
-                        >
-                          <Flex>
-                            {<VersionBadge tone={b.tone} icon={b.icon} padding={2} />}
-
-                            <Box flex={1} padding={2} style={{minWidth: 100}}>
-                              <Text size={1} weight="medium">
-                                {b.title}
-                              </Text>
-                            </Box>
-
-                            {
-                              <Box padding={2}>
-                                <Text muted size={1}>
-                                  {/* localize text */}
-                                  {b.publishAt
-                                    ? `a date will be here ${b.publishAt}`
-                                    : 'No target date'}
-                                </Text>
-                              </Box>
-                            }
-
-                            <Box padding={2}>
-                              <Text size={1}>
-                                {<CheckmarkIcon style={{opacity: b.name === name ? 1 : 0}} />}
-                              </Text>
-                            </Box>
-                          </Flex>
-                        </MenuItem>
-                      ))}
-                  </Stack>
-
-                  <MenuDivider />
-                </>
-              )}
-
-              {/*<Stack padding={1} space={1}>
-                <Box>
-                  <TextInput
-                    border={false}
-                    fontSize={1}
-                    onChange={handleAddVersionChange}
-                    placeholder="Create version"
-                    value={addVersionTitle}
-                  />
-                </Box>
-
-                {addVersionTitle && (
-                  <>
-                    {bundleOptionsList.map((r) => (
-                      <MenuItem
-                        disabled={r.name === addVersionName}
-                        key={r.name}
-                        onClick={handleAddVersion(r.name)}
-                        padding={1}
-                      >
-                        <Flex>
-                          <VersionBadge tone={r.tone} icon={r.icon} padding={2} />
-
-                          <Box flex={1} padding={2} style={{minWidth: 100}}>
-                            <Text size={1} weight="medium">
-                              {r.name === 'draft' ? LATEST.title : r.title}
-                            </Text>
-                          </Box>
-
-                          <Box padding={2}>
-                            <Text muted size={1}>
-                              {r.publishAt
-                                ? `a date will be here ${r.publishAt}`
-                                : 'No target date'}
-                            </Text>
-                          </Box>
-                        </Flex>
-                      </MenuItem>
-                    ))}
-
-                    // localize text
-                    <MenuItem
-                      disabled={addVersionExists}
-                      icon={AddIcon}
-                      onClick={handleAddVersion(addVersionName)}
-                      text={<>Create version: "{addVersionTitle}"</>}
-                    />
-                  </></Menu>
-                )}
-              </Stack>*/}
-            </Menu>
-          }
-          popover={{
-            constrainSize: true,
-            fallbackPlacements: [],
-            placement: 'bottom-start',
-            portal: true,
-            tone: 'default',
-          }}
+          bundles={documentVersions}
+          loading={!documentVersions}
         />
       </Box>
     </>
diff --git a/packages/sanity/src/core/versions/types.ts b/packages/sanity/src/core/versions/types.ts
deleted file mode 100644
index 68f9624006da..000000000000
--- a/packages/sanity/src/core/versions/types.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {type IconSymbol} from '@sanity/icons'
-import {type ButtonTone} from '@sanity/ui'
-
-/**
- * @beta
- * @hidden
- */
-export interface Version {
-  name: string
-  title: string
-  icon: IconSymbol | undefined
-  tone: ButtonTone | undefined
-  publishAt: Date | number | undefined
-}
-
-export interface Bundle {
-  name: string
-  title: string
-  description?: string
-  tone?: ButtonTone | undefined
-  publishAt?: string
-}
-
-export interface SanityVersionIcon {
-  tone: ButtonTone
-  icon: IconSymbol
-}
diff --git a/packages/sanity/src/core/versions/util/const.ts b/packages/sanity/src/core/versions/util/const.ts
index 314efe83bef1..3096119b84d9 100644
--- a/packages/sanity/src/core/versions/util/const.ts
+++ b/packages/sanity/src/core/versions/util/const.ts
@@ -1,38 +1,11 @@
 /*  TEMPORARY  DUMMY DATA */
 
-import {type IconSymbol} from '@sanity/icons'
-import {type ButtonTone} from '@sanity/ui'
+import {type BundleDocument} from '../../store/bundles/types'
 
-import {type Version} from '../types'
-
-export const RANDOM_TONES: ButtonTone[] = ['default', 'caution', 'critical', 'positive', 'primary']
-export const RANDOM_SYMBOLS: IconSymbol[] = [
-  'archive',
-  'edit',
-  'eye-open',
-  'heart',
-  'info-filled',
-  'circle',
-  'search',
-  'sun',
-  'star',
-  'trash',
-  'user',
-]
-
-export const LATEST: Version = {
+export const LATEST: Partial<BundleDocument> = {
   name: 'drafts',
   title: 'Latest',
   icon: undefined,
-  tone: 'default',
-  publishAt: 0,
+  tone: 'gray',
+  publishAt: '',
 }
-
-// dummy data
-export const BUNDLES: Version[] = [
-  LATEST,
-  {name: 'previewDrafts', title: 'Preview drafts', icon: 'edit', tone: 'caution', publishAt: 0},
-  {name: 'published', title: 'Published', icon: 'eye-open', tone: 'primary', publishAt: 0},
-  {name: 'summerDrop', title: 'Summer Drop', icon: 'sun', tone: 'critical', publishAt: 0},
-  {name: 'autumnDrop', title: 'Autumn Drop', icon: 'star', tone: 'positive', publishAt: 0},
-]
diff --git a/packages/sanity/src/core/versions/util/dummyGetters.ts b/packages/sanity/src/core/versions/util/dummyGetters.ts
index 6cf18d094163..6c6d9fdcf1b2 100644
--- a/packages/sanity/src/core/versions/util/dummyGetters.ts
+++ b/packages/sanity/src/core/versions/util/dummyGetters.ts
@@ -1,16 +1,10 @@
 import {type SanityClient, type SanityDocument} from 'sanity'
 import speakingurl from 'speakingurl'
 
-import {type Version} from '../types'
-import {BUNDLES, RANDOM_SYMBOLS, RANDOM_TONES} from './const'
+import {type BundleDocument} from '../../store/bundles/types'
 
 /* MOSTLY TEMPORARY FUNCTIONS / DUMMY DATA */
 
-export const getRandomToneIcon = () => ({
-  tone: RANDOM_TONES[Math.floor(Math.random() * RANDOM_TONES.length)],
-  icon: RANDOM_SYMBOLS[Math.floor(Math.random() * RANDOM_SYMBOLS.length)],
-})
-
 /**
  * Returns all versions of a document
  *
@@ -19,9 +13,10 @@ export const getRandomToneIcon = () => ({
  * @returns array of SanityDocuments versions from a specific doc
  */
 export async function getAllVersionsOfDocument(
+  bundles: BundleDocument[] | null,
   client: SanityClient,
   documentId: string,
-): Promise<Version[]> {
+): Promise<BundleDocument[]> {
   // remove all versions, get just id (anything anything after first .)
   const id = documentId.replace(/^[^.]*\./, '')
 
@@ -30,12 +25,13 @@ export async function getAllVersionsOfDocument(
   return await client.fetch(query, {}, {tag: 'document.list-versions'}).then((documents) => {
     return documents.map((doc: SanityDocument) => {
       const sluggedName = getVersionName(doc._id)
-      const bundle = BUNDLES.find((b) => b.name === sluggedName)
+      const bundle = bundles?.find((b) => b.name === sluggedName)
       return {
         name: speakingurl(sluggedName),
         title: bundle?.title || sluggedName,
-        tone: bundle?.tone || 'default',
+        hue: bundle?.hue || 'gray',
         icon: bundle?.icon || 'cube',
+        publishAt: bundle?.publishAt,
       }
     })
   })
@@ -47,7 +43,7 @@ export function getVersionName(documentId: string): string {
   return version
 }
 
-export function versionDocumentExists(documentVersions: Version[], name: string): boolean {
+export function versionDocumentExists(documentVersions: BundleDocument[], name: string): boolean {
   return documentVersions.some((version) => version.name === name)
 }
 
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
index 27f69a7e693d..d5b6ddba2360 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
@@ -8,14 +8,7 @@ import {structureLocaleNamespace} from '../../../../i18n'
 import {useDocumentPane} from '../../useDocumentPane'
 
 export function DocumentHeaderTitle(): ReactElement {
-  const {
-    documentId,
-    documentType,
-    connectionState,
-    schemaType,
-    title,
-    value: documentValue,
-  } = useDocumentPane()
+  const {documentId, connectionState, schemaType, title, value: documentValue} = useDocumentPane()
   const subscribed = Boolean(documentValue) && connectionState !== 'connecting'
 
   const {error, value} = useValuePreview({
@@ -66,7 +59,7 @@ export function DocumentHeaderTitle(): ReactElement {
       </Flex>
 
       <Flex flex="none" gap={1}>
-        <DocumentVersionMenu documentId={documentId} documentType={documentType} />
+        <DocumentVersionMenu documentId={documentId} />
       </Flex>
     </Flex>
   )
diff --git a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx
index 5f2031ad4b78..8892800c1924 100644
--- a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -64,14 +64,10 @@ const DocumentStatusBarActionsInner = memo(function DocumentStatusBarActionsInne
   }, [firstActionState])
 
   /* Version / Bundling handling */
-  const {currentVersion, isDraft} = useContext<VersionContextValue>(VersionContext)
 
   // eslint-disable-next-line no-warning-comments
-  /* TODO - replace with real data
-   - needs to check for publish data
-   - if it's published
-   */
-  const isReady = false
+  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
+  const {currentVersion, isDraft} = useContext<VersionContextValue>(VersionContext)
 
   return (
     <Flex align="center" gap={1}>
@@ -99,7 +95,6 @@ const DocumentStatusBarActionsInner = memo(function DocumentStatusBarActionsInne
                   currentVersion={currentVersion}
                   documentId={documentId}
                   documentType={documentType}
-                  isReady={isReady}
                 />
               )}
             </Stack>