Interim

alineacms · Oct 10, 2023 · 722e9fd · 722e9fd
1 parent 2e702c7
commit 722e9fd
Show file tree

Hide file tree

Showing 44 changed files with 447 additions and 213 deletions.
diff --git a/apps/dev/cms.ts b/apps/dev/cms.ts
@@ -3,10 +3,7 @@ import {IcRoundTranslate} from 'alinea/ui/icons/IcRoundTranslate'
 import {IcRoundUploadFile} from 'alinea/ui/icons/IcRoundUploadFile'
 
 export namespace schema {
-  export const Page = alinea.type('Page', {
-    title: alinea.text('Title', {width: 0.5, multiline: true}),
-    path: alinea.path('Path', {width: 0.5})
-  })
+  export const Page = alinea.document('Page', {})
 
   export const Folder = alinea.type('Folder', {
     title: alinea.text('Title', {width: 0.5, multiline: true}),
@@ -17,8 +14,7 @@ export namespace schema {
     }
   })
 
-  export const Fields = alinea.type('Fields', {
-    ...Page,
+  export const Fields = alinea.document('Fields', {
     ...alinea.tabs(
       alinea.tab('Basic fields', {
         title: alinea.text('Text field'),

diff --git a/apps/web/src/schema/BlogOverview.tsx b/apps/web/src/schema/BlogOverview.tsx
@@ -3,7 +3,7 @@ import alinea from 'alinea'
 export const BlogOverview = alinea.type('Blog overview', {
   title: alinea.text('Title', {width: 0.5}),
   path: alinea.path('Path', {width: 0.5}),
-  [alinea.type.meta]: {
+  [alinea.meta]: {
     isContainer: true,
     contains: ['BlogPost']
   }

diff --git a/apps/web/src/schema/BlogPost.tsx b/apps/web/src/schema/BlogPost.tsx
@@ -1,9 +1,7 @@
 import alinea from 'alinea'
 import {TextField} from './blocks/TextBlock'
 
-export const BlogPost = alinea.type('Blog post', {
-  title: alinea.text('Title', {width: 0.5}),
-  path: alinea.path('Path', {width: 0.5}),
+export const BlogPost = alinea.document('Blog post', {
   publishDate: alinea.date('Publish date'),
   author: alinea.object('Author', {
     fields: alinea.type('Author fields', {

diff --git a/apps/web/src/schema/Doc.tsx b/apps/web/src/schema/Doc.tsx
@@ -1,8 +1,6 @@
 import alinea from 'alinea'
 import {TextField} from './blocks/TextBlock'
 
-export const Doc = alinea.type('Doc', {
-  title: alinea.text('Title', {width: 0.5}),
-  path: alinea.path('Path', {width: 0.5}),
+export const Doc = alinea.document('Doc', {
   body: TextField
 })
diff --git a/apps/web/src/schema/Docs.tsx b/apps/web/src/schema/Docs.tsx
@@ -3,7 +3,7 @@ import alinea from 'alinea'
 export const Docs = alinea.type('Docs', {
   title: alinea.text('Title', {width: 0.5, multiline: true}),
   path: alinea.path('Path', {width: 0.5}),
-  [alinea.type.meta]: {
+  [alinea.meta]: {
     isContainer: true,
     contains: ['Doc', 'Docs']
   }

diff --git a/apps/web/src/schema/Home.tsx b/apps/web/src/schema/Home.tsx
@@ -1,14 +1,11 @@
 import alinea from 'alinea'
+import {IcRoundInsertDriveFile} from 'alinea/ui/icons/IcRoundInsertDriveFile'
+import {IcRoundLink} from 'alinea/ui/icons/IcRoundLink'
 
 export const Home = alinea.document(
   'Home',
   alinea.tabs(
     alinea.tab('Homepage', {
-      title: alinea.text('Title', {
-        width: 0.5,
-        multiline: true
-      }),
-      path: alinea.path('Path', {width: 0.5}),
       headline: alinea.text('Headline', {multiline: true}),
       byline: alinea.text('Byline', {multiline: true}),
       action: alinea.link.entry('Action', {
@@ -22,7 +19,10 @@ export const Home = alinea.document(
           text: alinea.richText('Text')
           // code: CodeVariants
         })
-      })
+      }),
+      [alinea.meta]: {
+        icon: IcRoundInsertDriveFile
+      }
     }),
     alinea.tab('Top navigation', {
       links: alinea.link.multiple('Links', {
@@ -32,7 +32,10 @@ export const Home = alinea.document(
             help: 'Active when this url is active'
           })
         })
-      })
+      }),
+      [alinea.meta]: {
+        icon: IcRoundLink
+      }
     }),
     alinea.tab('Footer navigation', {
       footer: alinea.list('Navigation', {
@@ -46,7 +49,10 @@ export const Home = alinea.document(
             })
           })
         })
-      })
+      }),
+      [alinea.meta]: {
+        icon: IcRoundLink
+      }
     })
   )
 )
diff --git a/apps/web/src/schema/Page.tsx b/apps/web/src/schema/Page.tsx
@@ -2,7 +2,5 @@ import alinea from 'alinea'
 import {TextField} from './blocks/TextBlock'
 
 export const Page = alinea.document('Page', {
-  title: alinea.text('Title', {width: 0.5}),
-  path: alinea.path('Path', {width: 0.5}),
   body: TextField
 })
diff --git a/package.json b/package.json
@@ -163,6 +163,11 @@
       "browser": "./dist/input/list/ListField.browser.js",
       "default": "./dist/input/list/ListField.js"
     },
+    "./input/metadata/MetadataField": {
+      "worker": "./dist/input/metadata/MetadataField.js",
+      "browser": "./dist/input/metadata/MetadataField.browser.js",
+      "default": "./dist/input/metadata/MetadataField.js"
+    },
     "./input/number/NumberField": {
       "worker": "./dist/input/number/NumberField.js",
       "browser": "./dist/input/number/NumberField.browser.js",

diff --git a/src/core/Document.ts b/src/core/Document.ts
@@ -1,17 +1,38 @@
-import {metadata} from 'alinea/input'
+import {metadata} from 'alinea/input/metadata'
+import {PathField, path} from 'alinea/input/path'
 import {tab, tabs} from 'alinea/input/tabs'
+import {TextField, text} from 'alinea/input/text'
+import {IcRoundInsertDriveFile} from 'alinea/ui/icons/IcRoundInsertDriveFile'
+import {IcRoundShare} from 'alinea/ui/icons/IcRoundShare'
 import {Label} from './Label.js'
+import {Meta} from './Meta.js'
 import {Type, TypeDefinition, type} from './Type.js'
 
+type Document<Definition> = {
+  title: TextField
+  path: PathField
+  meta: ReturnType<typeof metadata>
+} & Definition
+
 export function document<Definition extends TypeDefinition>(
   label: Label,
   definition: Definition
-): Type<Definition> {
+): Type<Document<Definition>> {
   return type(label, {
     ...tabs(
-      tab('Document', definition),
+      tab('Document', {
+        title: text('Title', {width: 0.5}),
+        path: path('Path', {width: 0.5}),
+        ...definition,
+        [Meta]: {
+          icon: IcRoundInsertDriveFile
+        }
+      }),
       tab('Metadata', {
-        metadata: metadata()
+        metadata: metadata(),
+        [Meta]: {
+          icon: IcRoundShare
+        }
       })
     )
   } as any) as any

diff --git a/src/dashboard/App.tsx b/src/dashboard/App.tsx
@@ -1,7 +1,7 @@
 import {Config, Connection, Root, renderLabel} from 'alinea/core'
 import {Icon, Loader, px} from 'alinea/ui'
 import {FavIcon} from 'alinea/ui/branding/FavIcon'
-import {IcOutlineDescription} from 'alinea/ui/icons/IcOutlineDescription'
+import {IcRoundDescription} from 'alinea/ui/icons/IcRoundDescription'
 import {MdiSourceBranch} from 'alinea/ui/icons/MdiSourceBranch'
 import {atom, useAtom, useAtomValue} from 'jotai'
 import {useEffect} from 'react'
@@ -121,7 +121,7 @@ function AppAuthenticated() {
                       href={link}
                       aria-label={renderLabel(label)}
                     >
-                      <Icon icon={icon ?? IcOutlineDescription} />
+                      <Icon icon={icon ?? IcRoundDescription} />
                     </Sidebar.Nav.Item>
                   )
                 })}

diff --git a/src/dashboard/pages/ContentView.tsx b/src/dashboard/pages/ContentView.tsx
@@ -12,7 +12,6 @@ import {RootOverview} from '../view/RootOverview.js'
 import {SearchBox} from '../view/SearchBox.js'
 import {Sidebar} from '../view/Sidebar.js'
 import {NewEntry} from '../view/entry/NewEntry.js'
-import {RootHeader} from '../view/entry/RootHeader.js'
 import css from './ContentView.module.scss'
 
 const styles = fromModule(css)
@@ -33,7 +32,7 @@ export function ContentView({editor}: ContentViewProps) {
     <>
       <Sidebar.Tree>
         <SearchBox />
-        <RootHeader active={!editor} />
+        {/*<RootHeader active={!editor} />*/}
         <EntryTree
           i18nId={editor?.activeVersion.i18nId}
           selected={editor?.activeVersion.parents}

diff --git a/src/dashboard/view/Create.module.scss b/src/dashboard/view/Create.module.scss
@@ -40,11 +40,11 @@
   }
 
   &:hover {
-    color: var(--alinea-accent-foreground);
-    background: var(--alinea-accent);
+    color: var(--alinea-button-foreground);
+    background: var(--alinea-button-background);
   }
 
   &:hover &-add {
-    color: var(--alinea-accent-foreground);
+    color: var(--alinea-button-foreground);
   }
 }
diff --git a/src/dashboard/view/EntryEdit.module.scss b/src/dashboard/view/EntryEdit.module.scss
@@ -4,14 +4,14 @@
   display: flex;
   flex-direction: column;
 
-  &-draft {
-    max-width: 1024px;
-    padding: 12px;
+  &-tabs {
+    margin: auto;
+    padding: 0 calc(var(--alinea-main-padding-x) - 8px);
+    padding-bottom: 2px;
+    max-width: var(--alinea-main-width);
+
     @include ml {
-      padding: 35px 45px;
+      margin-top: -16px;
     }
-    width: 100%;
-    margin: 0 auto;
-    flex-grow: 1;
   }
 }
diff --git a/src/dashboard/view/EntryEdit.tsx b/src/dashboard/view/EntryEdit.tsx
@@ -1,8 +1,10 @@
-import {EntryPhase} from 'alinea/core'
+import {EntryPhase, Section, Type} from 'alinea/core'
 import {Modal} from 'alinea/dashboard/view/Modal'
 import {InputForm} from 'alinea/editor'
+import {TabsHeader, TabsSection} from 'alinea/input/tabs/Tabs.browser'
 import {Button, HStack, Stack, VStack, fromModule} from 'alinea/ui'
 import {Main} from 'alinea/ui/Main'
+import {Tabs} from 'alinea/ui/Tabs'
 import {IcRoundTranslate} from 'alinea/ui/icons/IcRoundTranslate'
 import {useAtomValue, useSetAtom} from 'jotai'
 import {useEffect, useRef} from 'react'
@@ -89,6 +91,13 @@ export function EntryEdit({editor}: EntryEditProps) {
       document.removeEventListener('keydown', listener)
     }
   }, [editor, hasChanges, saveDraft, enableDrafts])
+  const sections = Type.sections(editor.type)
+  const hasRootTabs =
+    sections.length === 1 && sections[0][Section.Data] instanceof TabsSection
+  const tabs: TabsSection | false =
+    hasRootTabs && (sections[0][Section.Data] as TabsSection)
+  const visibleTypes =
+    tabs && tabs.types.filter(type => !Type.meta(type).isHidden)
   /*useEffect(() => {
     if (isBlocking && !isNavigationChange) confirm?.()
   }, [isBlocking, isNavigationChange, confirm])*/
@@ -139,54 +148,68 @@ export function EntryEdit({editor}: EntryEditProps) {
           </VStack>
         </Modal>
       )}
-      <Main
-        scrollRef={ref}
-        className={styles.root()}
-        // head={<EntryHeader editor={editor} />}
-      >
+      <Main scrollRef={ref} className={styles.root()}>
         <FieldToolbar.Provider>
           <EntryHeader editor={editor} />
           {showHistory && <EntryHistory editor={editor} />}
-          <EntryTitle
-            editor={editor}
-            backLink={
-              editor.activeVersion.parent
-                ? nav.entry({
-                    entryId: editor.activeVersion.parent,
-                    workspace: editor.activeVersion.workspace
-                  })
-                : nav.entry({entryId: undefined})
-            }
-          />
-          <Main.Container>
-            {untranslated && (
-              <div>
-                <EntryNotice
-                  icon={IcRoundTranslate}
-                  title="Untranslated"
-                  variant="untranslated"
-                >
-                  This page has not yet been translated to this language,
-                  <br />
-                  {editor.parentNeedsTranslation
-                    ? 'please translate the parent page first.'
-                    : 'please enter the details below and save to start translating.'}
-                </EntryNotice>
-              </div>
-            )}
+          <Tabs.Root>
+            <EntryTitle
+              editor={editor}
+              backLink={
+                editor.activeVersion.parent
+                  ? nav.entry({
+                      entryId: editor.activeVersion.parent,
+                      workspace: editor.activeVersion.workspace
+                    })
+                  : nav.entry({entryId: undefined})
+              }
+            >
+              {hasRootTabs && (
+                <div className={styles.root.tabs()}>
+                  <TabsHeader backdrop={false} section={sections[0]} />
+                </div>
+              )}
+            </EntryTitle>
+            <Main.Container>
+              {untranslated && (
+                <div>
+                  <EntryNotice
+                    icon={IcRoundTranslate}
+                    title="Untranslated"
+                    variant="untranslated"
+                  >
+                    This page has not yet been translated to this language,
+                    <br />
+                    {editor.parentNeedsTranslation
+                      ? 'please translate the parent page first.'
+                      : 'please enter the details below and save to start translating.'}
+                  </EntryNotice>
+                </div>
+              )}
 
-            {mode === EditMode.Diff ? (
-              <ShowChanges editor={editor} />
-            ) : (
-              <div>
-                <SuspenseBoundary name="input form">
-                  <VStack gap={18}>
-                    <InputForm type={editor.type} state={state} />
-                  </VStack>
-                </SuspenseBoundary>
-              </div>
-            )}
-          </Main.Container>
+              <SuspenseBoundary name="input form">
+                {mode === EditMode.Diff ? (
+                  <ShowChanges editor={editor} />
+                ) : hasRootTabs && visibleTypes ? (
+                  <Tabs.Panels>
+                    {visibleTypes.map((type, i) => {
+                      return (
+                        <Tabs.Panel key={i} tabIndex={i}>
+                          <InputForm type={type} state={state} />
+                        </Tabs.Panel>
+                      )
+                    })}
+                  </Tabs.Panels>
+                ) : (
+                  <div>
+                    <VStack gap={18}>
+                      <InputForm type={editor.type} state={state} />
+                    </VStack>
+                  </div>
+                )}
+              </SuspenseBoundary>
+            </Main.Container>
+          </Tabs.Root>
           <FieldToolbar.Root />
         </FieldToolbar.Provider>
       </Main>

diff --git a/src/dashboard/view/EntryTree.module.scss b/src/dashboard/view/EntryTree.module.scss
@@ -56,7 +56,8 @@
       margin-right: 4px;
       height: 20px;
       flex-shrink: 0;
-      color: hsla(var(--alinea-negative), 0.5);
+      color: hsla(var(--alinea-negative), 0.4);
+      font-size: 12px;
     }
 
     &.is-selected &-icon {