refine territory details on post form

components/form.js

@@ -29,6 +29,7 @@ import { AWS_S3_URL_REGEXP } from '../lib/constants'
 import { whenRange } from '../lib/time'
 import { useFeeButton } from './fee-button'
 import Thumb from '../svgs/thumb-up-fill.svg'
+import Info from './info'
 
 export function SubmitButton ({
   children, variant, value, onClick, disabled, nonDisabledText, ...props
@@ -825,7 +826,7 @@ export function Form ({
   )
 }
 
-export function Select ({ label, items, groupClassName, onChange, noForm, overrideValue, hint, ...props }) {
+export function Select ({ label, items, info, groupClassName, onChange, noForm, overrideValue, hint, ...props }) {
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
   const invalid = meta.touched && meta.error
@@ -838,31 +839,34 @@ export function Select ({ label, items, groupClassName, onChange, noForm, overri
 
   return (
     <FormGroup label={label} className={groupClassName}>
-      <BootstrapForm.Select
-        {...field} {...props}
-        onChange={(e) => {
-          if (field?.onChange) {
-            field.onChange(e)
-          }
+      <span className='d-flex align-items-center'>
+        <BootstrapForm.Select
+          {...field} {...props}
+          onChange={(e) => {
+            if (field?.onChange) {
+              field.onChange(e)
+            }
 
-          if (onChange) {
-            onChange(formik, e)
-          }
-        }}
-        isInvalid={invalid}
-      >
-        {items.map(item => {
-          if (item && typeof item === 'object') {
-            return (
-              <optgroup key={item.label} label={item.label}>
-                {item.items.map(item => <option key={item}>{item}</option>)}
-              </optgroup>
-            )
-          } else {
-            return <option key={item}>{item}</option>
-          }
-        })}
-      </BootstrapForm.Select>
+            if (onChange) {
+              onChange(formik, e)
+            }
+          }}
+          isInvalid={invalid}
+        >
+          {items.map(item => {
+            if (item && typeof item === 'object') {
+              return (
+                <optgroup key={item.label} label={item.label}>
+                  {item.items.map(item => <option key={item}>{item}</option>)}
+                </optgroup>
+              )
+            } else {
+              return <option key={item}>{item}</option>
+            }
+          })}
+        </BootstrapForm.Select>
+        {info && <Info>{info}</Info>}
+      </span>
       <BootstrapForm.Control.Feedback type='invalid'>
         {meta.touched && meta.error}
       </BootstrapForm.Control.Feedback>

components/post.js

@@ -9,12 +9,12 @@ import { DiscussionForm } from './discussion-form'
 import { LinkForm } from './link-form'
 import { PollForm } from './poll-form'
 import { BountyForm } from './bounty-form'
-import SubSelect, { SubInfo } from './sub-select'
+import SubSelect from './sub-select'
 import { useCallback, useState } from 'react'
 import FeeButton, { FeeButtonProvider, postCommentBaseLineItems, postCommentUseRemoteLineItems } from './fee-button'
 import Delete from './delete'
 import CancelButton from './cancel-button'
-import { TerritoryDetails } from './territory-header'
+import { TerritoryInfo } from './territory-header'
 
 export function PostForm ({ type, sub, children }) {
   const me = useMe()
@@ -99,15 +99,20 @@ export function PostForm ({ type, sub, children }) {
     }, [])
 
     return (
-      <div className='position-relative d-flex flex-column align-items-center'>
+      <div className='position-relative d-flex flex-column align-items-start'>
         {errorMessage &&
           <Alert className='position-absolute' style={{ top: '-6rem' }} variant='danger' onClose={() => setErrorMessage(undefined)} dismissible>
             {errorMessage}
           </Alert>}
-        <SubSelect prependSubs={['pick territory']} className='w-auto d-flex' noForm sub={sub?.name} hint={sub?.moderated && 'this territory is moderated'} />
-        <div className='mb-3 w-100'>
-          {sub && <TerritoryDetails sub={sub} />}
-        </div>
+        <SubSelect
+          prependSubs={['pick territory']}
+          className='w-auto d-flex'
+          noForm
+          large
+          sub={sub?.name}
+          info={sub && <TerritoryInfo sub={sub} />}
+          hint={sub?.moderated && 'this territory is moderated'}
+        />
         <div>
           {postButtons}
         </div>
@@ -169,12 +174,9 @@ export default function Post ({ sub }) {
             prependSubs={sub?.name ? undefined : ['pick territory']}
             filterSubs={s => s.postTypes?.includes(type.toUpperCase())}
             className='w-auto d-flex'
-            label={
-              <span className='d-flex align-items-center'>
-                territory
-                <SubInfo />
-              </span>
-              }
+            large
+            label='territory'
+            info={sub && <TerritoryInfo sub={sub} />}
             hint={sub?.moderated && 'this territory is moderated'}
           />}
       </PostForm>

components/sub-select.js

@@ -1,6 +1,5 @@
 import { useRouter } from 'next/router'
 import { Select } from './form'
-import Info from './info'
 import { SSR } from '../lib/constants'
 import { SUBS } from '../fragments/subs'
 import { useQuery } from '@apollo/client'
@@ -43,23 +42,7 @@ export function useSubs ({ prependSubs = [], sub, filterSubs = () => true, appen
   return subs
 }
 
-export const SubInfo = () => (
-  <Info>
-    <div>
-      <div className='fw-bold'>The territory your post will go in ...</div>
-      <ul>
-        <li>If it's bitcoin related, put it in the bitcoin territory.</li>
-        <li>If it's nostr related, put it in the nostr territory.</li>
-        <li>If it's tech related, put it in the tech territory.</li>
-        <li>If it's stacker news related, put it in the meta territory.</li>
-        <li>If it's a job, put it in the jobs territory.</li>
-        <li>etc...</li>
-      </ul>
-    </div>
-  </Info>
-)
-
-export default function SubSelect ({ prependSubs, sub, onChange, appendSubs, filterSubs, className, ...props }) {
+export default function SubSelect ({ prependSubs, sub, onChange, large, appendSubs, filterSubs, className, ...props }) {
   const router = useRouter()
   const subs = useSubs({ prependSubs, sub, filterSubs, appendSubs })
   const valueProps = props.noForm
@@ -118,7 +101,7 @@ export default function SubSelect ({ prependSubs, sub, onChange, appendSubs, fil
       size='sm'
       {...valueProps}
       {...props}
-      className={`${className} ${styles.subSelect}`}
+      className={`${className} ${styles.subSelect} ${large ? '' : styles.subSelectSmall}`}
       items={subs}
     />
   )

components/sub-select.module.css

@@ -1,6 +1,9 @@
 .subSelect {
-  max-width: 90px !important;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis !important;
+}
+
+.subSelectSmall {
+  max-width: 90px !important;
 }

components/territory-header.js

@@ -22,6 +22,14 @@ export function TerritoryDetails ({ sub }) {
         </small>
       }
     >
+      <TerritoryInfo sub={sub} />
+    </AccordianCard>
+  )
+}
+
+export function TerritoryInfo ({ sub }) {
+  return (
+    <>
       <div className='py-2'>
         <Text>{sub.desc}</Text>
       </div>
@@ -38,7 +46,7 @@ export function TerritoryDetails ({ sub }) {
         </div>
         <TerritoryBillingLine sub={sub} />
       </CardFooter>
-    </AccordianCard>
+    </>
   )
 }