feat: add user setting for which default post type to use (#5365)

Author: omBratteng

packages/shared/src/components/fields/form/common.tsx

@@ -1,6 +1,6 @@
 export enum WriteFormTab {
-  Share = 'Share a link',
   NewPost = 'New post',
+  Share = 'Share a link',
   Poll = 'Poll',
 }
 

packages/shared/src/components/post/freeform/write/WriteFreeFormSkeleton.tsx

@@ -14,15 +14,13 @@ export function WriteFreeFormSkeleton({
   return (
     <WritePageContainer>
       <WritePostHeader isEdit={isEdit} />
-      <WritePageMain className="px-6 py-5">
-        <ElementPlaceholder className="h-24 w-40 rounded-16" />
-        <ElementPlaceholder className="mt-6 h-12 rounded-12" />
-        <ElementPlaceholder className="mt-4 h-60 rounded-12" />
-        <span className="mt-8 flex flex-row items-center">
-          <ElementPlaceholder className="hidden h-6 w-12 rounded-6 tablet:flex" />
-          <ElementPlaceholder className="mr-20 h-6 flex-1 rounded-6 tablet:ml-4" />
-          <ElementPlaceholder className="h-6 w-16 rounded-8 tablet:h-10 tablet:w-36 tablet:rounded-12" />
-        </span>
+      <WritePageMain className="gap-4 px-6 py-5">
+        <ElementPlaceholder className="w h-12 rounded-12 laptop:max-w-70" />
+        <ElementPlaceholder className="h-24 w-[11.5rem] rounded-16" />
+        <ElementPlaceholder className="h-12 rounded-12" />
+        <ElementPlaceholder className="h-[25.5rem] rounded-12" />
+
+        <ElementPlaceholder className="ml-auto h-6 w-16 rounded-8 tablet:h-10 tablet:w-32 tablet:rounded-12" />
       </WritePageMain>
     </WritePageContainer>
   );

packages/shared/src/components/post/freeform/write/WritePostHeader.tsx

@@ -14,7 +14,7 @@ export function WritePostHeader({
   const { squad } = useWritePostContext();
 
   return (
-    <header className="flex h-14 flex-row items-center border-b border-border-subtlest-tertiary px-6 py-4">
+    <header className="flex h-16 flex-row items-center border-b border-border-subtlest-tertiary px-6 py-4">
       <h1 className="font-bold typo-title3">{isEdit ? 'Edit' : 'New'} post</h1>
 
       {squad && squad.type === SourceType.Squad && (

packages/shared/src/components/profile/ProfileSettingsMenu.tsx

@@ -31,6 +31,7 @@ import {
   JobIcon,
   TerminalIcon,
   TourIcon,
+  FeatherIcon,
 } from '../icons';
 import { NavDrawer } from '../drawers/NavDrawer';
 import {
@@ -112,6 +113,11 @@ const useAccountPageItems = () => {
               icon: NewTabIcon,
               href: `${settingsUrl}/appearance`,
             },
+            composition: {
+              title: 'Composition',
+              icon: FeatherIcon,
+              href: `${settingsUrl}/composition`,
+            },
             notifications: {
               title: 'Notifications',
               icon: BellIcon,

packages/shared/src/components/tabs/TabContainer.tsx

@@ -50,6 +50,7 @@ export interface TabContainerProps<T extends string = string> {
   style?: CSSProperties;
   tabListProps?: Pick<TabListProps, 'className' | 'autoScrollActive'>;
   tabTag?: AllowedTabTags;
+  extraHeaderContent?: ReactNode;
 }
 
 export function TabContainer<T extends string = string>({
@@ -65,6 +66,7 @@ export function TabContainer<T extends string = string>({
   style,
   tabListProps = {},
   tabTag,
+  extraHeaderContent,
 }: TabContainerProps<T>): ReactElement {
   const router = useRouter();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -168,6 +170,7 @@ export function TabContainer<T extends string = string>({
           autoScrollActive={tabListProps?.autoScrollActive}
           tag={tabTag}
         />
+        {extraHeaderContent}
       </header>
       {render}
     </div>

packages/shared/src/contexts/SettingsContext.tsx

@@ -17,6 +17,7 @@ import {
   CampaignCtaPlacement,
   UPDATE_USER_SETTINGS_MUTATION,
 } from '../graphql/settings';
+import { WriteFormTab } from '../components/fields/form/common';
 import AuthContext from './AuthContext';
 import { capitalize } from '../lib/strings';
 import { storageWrapper } from '../lib/storageWrapper';
@@ -136,6 +137,7 @@ const defaultSettings: RemoteSettings = {
     sidebarResourcesExpanded: true,
     sidebarBookmarksExpanded: true,
     clickbaitShieldEnabled: true,
+    defaultWriteTab: WriteFormTab.NewPost,
   },
 };
 

packages/shared/src/graphql/settings.ts

@@ -1,5 +1,6 @@
 import { gql } from 'graphql-request';
 import type { SortCommentsBy } from './comments';
+import type { WriteFormTab } from '../components/fields/form/common';
 
 export type Spaciness = 'eco' | 'roomy' | 'cozy';
 export type RemoteTheme = 'darcula' | 'bright' | 'auto';
@@ -19,6 +20,7 @@ export type SettingsFlags = {
   timezoneMismatchIgnore?: string;
   prompt?: Record<string, boolean>;
   lastPrompt?: string;
+  defaultWriteTab?: WriteFormTab;
 };
 
 export enum SidebarSettingsFlags {

packages/webapp/pages/settings/appearance.tsx

@@ -10,6 +10,7 @@ import {
   TypographyColor,
   TypographyType,
 } from '@dailydotdev/shared/src/components/typography/Typography';
+import type { RadioItemProps } from '@dailydotdev/shared/src/components/fields/Radio';
 import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
 import { ToggleRadio } from '@dailydotdev/shared/src/components/fields/ToggleRadio';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
@@ -19,13 +20,14 @@ import {
   TargetType,
 } from '@dailydotdev/shared/src/lib/log';
 import classNames from 'classnames';
+import { FlexCol } from '@dailydotdev/shared/src/components/utilities';
 import { AccountPageContainer } from '../../components/layouts/SettingsLayout/AccountPageContainer';
 import { getSettingsLayout } from '../../components/layouts/SettingsLayout';
 import { defaultSeo } from '../../next-seo';
 import { getTemplatedTitle } from '../../components/layouts/utils';
 import { SettingsSwitch } from '../../components/layouts/SettingsLayout/common';
 
-const densities = [
+const densities: RadioItemProps[] = [
   { label: 'Eco', value: 'eco' },
   { label: 'Roomy', value: 'roomy' },
   { label: 'Cozy', value: 'cozy' },
@@ -64,11 +66,11 @@ const AccountManageSubscriptionPage = (): ReactElement => {
 
   return (
     <AccountPageContainer title="Appearance">
-      <div className="flex flex-col gap-6">
+      <FlexCol className="gap-6">
         <ThemeSection />
 
         {isLaptop && (
-          <section className="flex flex-col gap-2">
+          <FlexCol className="gap-2">
             <Typography bold type={TypographyType.Subhead}>
               Layout
             </Typography>
@@ -86,10 +88,10 @@ const AccountManageSubscriptionPage = (): ReactElement => {
               offLabel="Cards"
               onLabel="List"
             />
-          </section>
+          </FlexCol>
         )}
 
-        <section className="flex flex-col gap-2">
+        <FlexCol className="gap-2">
           <Typography bold type={TypographyType.Subhead}>
             Density
           </Typography>
@@ -119,9 +121,9 @@ const AccountManageSubscriptionPage = (): ReactElement => {
             }}
             reverse
           />
-        </section>
+        </FlexCol>
 
-        <section className="flex flex-col gap-5">
+        <FlexCol className="gap-5">
           <Typography bold type={TypographyType.Subhead}>
             Preferences
           </Typography>
@@ -149,9 +151,9 @@ const AccountManageSubscriptionPage = (): ReactElement => {
           >
             Show companion widget on external sites
           </SettingsSwitch>
-        </section>
+        </FlexCol>
 
-        <section className="flex flex-col gap-5">
+        <FlexCol className="gap-5">
           <Typography bold type={TypographyType.Subhead}>
             Accessibility
           </Typography>
@@ -163,8 +165,8 @@ const AccountManageSubscriptionPage = (): ReactElement => {
           >
             Auto-hide notifications after a few seconds
           </SettingsSwitch>
-        </section>
-      </div>
+        </FlexCol>
+      </FlexCol>
     </AccountPageContainer>
   );
 };

packages/webapp/pages/settings/composition.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { NextSeoProps } from 'next-seo';
+
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
+import {
+  Typography,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import type { RadioItemProps } from '@dailydotdev/shared/src/components/fields/Radio';
+import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
+
+import { WriteFormTab } from '@dailydotdev/shared/src/components/fields/form/common';
+import { FlexCol } from '@dailydotdev/shared/src/components/utilities';
+import { AccountPageContainer } from '../../components/layouts/SettingsLayout/AccountPageContainer';
+import { getSettingsLayout } from '../../components/layouts/SettingsLayout';
+import { defaultSeo } from '../../next-seo';
+import { getTemplatedTitle } from '../../components/layouts/utils';
+
+const defaultWriteTabs: RadioItemProps[] = Object.keys(WriteFormTab).map(
+  (key) => ({
+    label: WriteFormTab[key],
+    value: key,
+  }),
+);
+
+const AccountManageSubscriptionPage = (): ReactElement => {
+  const { updateFlag, flags } = useSettingsContext();
+
+  return (
+    <AccountPageContainer title="Composition">
+      <div id="compose" aria-hidden />
+      <FlexCol className="gap-2">
+        <Typography bold type={TypographyType.Subhead}>
+          Default post type
+        </Typography>
+
+        <Radio
+          name="default-write-tab"
+          options={defaultWriteTabs}
+          value={flags.defaultWriteTab}
+          onChange={(value) => {
+            updateFlag('defaultWriteTab', value);
+          }}
+          className={{
+            content: 'w-full justify-between !pr-0',
+            container: '!gap-0',
+            label: 'font-normal text-text-secondary typo-callout',
+          }}
+          reverse
+        />
+      </FlexCol>
+    </AccountPageContainer>
+  );
+};
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Appearance'),
+};
+
+AccountManageSubscriptionPage.getLayout = getSettingsLayout;
+AccountManageSubscriptionPage.layoutProps = { seo };
+
+export default AccountManageSubscriptionPage;

packages/webapp/pages/squads/create.tsx

@@ -36,11 +36,19 @@ import { useQueryClient } from '@tanstack/react-query';
 import CreatePoll from '@dailydotdev/shared/src/components/post/poll/CreatePoll';
 import { Pill, PillSize } from '@dailydotdev/shared/src/components/Pill';
 import { useMultipleSourcePost } from '@dailydotdev/shared/src/features/squads/hooks/useMultipleSourcePost';
-import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { settingsUrl, webappUrl } from '@dailydotdev/shared/src/lib/constants';
 import type { WriteForm } from '@dailydotdev/shared/src/contexts';
-import { getLayout as getMainLayout } from '../../components/layouts/MainLayout';
-import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
+
+import {
+  Button,
+  ButtonSize,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { SettingsIcon } from '@dailydotdev/shared/src/components/icons';
+import { LinkWithTooltip } from '@dailydotdev/shared/src/components/tooltips/LinkWithTooltip';
 import { getTemplatedTitle } from '../../components/layouts/utils';
+import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+import { getLayout as getMainLayout } from '../../components/layouts/MainLayout';
 
 const seo: NextSeoProps = {
   title: getTemplatedTitle('Create post'),
@@ -59,6 +67,10 @@ function CreatePost(): ReactElement {
   );
   const { push, isReady: isRouteReady, query } = useRouter();
   const { squads, user, isAuthReady, isFetched } = useAuthContext();
+  const {
+    flags: { defaultWriteTab },
+    loadedSettings,
+  } = useSettingsContext();
   const [selectedSourceIds, setSelectedSourceIds] = useState<string[]>([]);
   const activeSquads = useMemo(() => {
     const collator = new Intl.Collator('en');
@@ -191,6 +203,8 @@ function CreatePost(): ReactElement {
       setDisplay(WriteFormTab.Share);
     } else if (isInitialPoll) {
       setDisplay(WriteFormTab.Poll);
+    } else if (defaultWriteTab in WriteFormTab) {
+      setDisplay(WriteFormTab[defaultWriteTab]);
     }
 
     const preselectedSquad =
@@ -220,6 +234,7 @@ function CreatePost(): ReactElement {
     activeSquads,
     selectedSourceIds.length,
     query,
+    defaultWriteTab,
   ]);
 
   useEffect(() => {
@@ -228,7 +243,7 @@ function CreatePost(): ReactElement {
     }
   }, [display, hasCheckedPollTab, completeAction]);
 
-  if (!isFetched || !isAuthReady || !isRouteReady) {
+  if (!isFetched || !isAuthReady || !isRouteReady || !loadedSettings) {
     return <WriteFreeFormSkeleton />;
   }
 
@@ -255,6 +270,28 @@ function CreatePost(): ReactElement {
           shouldMountInactive
           className={{ header: 'px-1' }}
           showHeader={isTablet}
+          extraHeaderContent={
+            !isMobile && (
+              <LinkWithTooltip
+                tooltip={{
+                  content: (
+                    <div className="max-w-48">
+                      You can change the default post type settings
+                    </div>
+                  ),
+                  placement: 'left',
+                }}
+                href={`${settingsUrl}/composition`}
+                passHref
+              >
+                <Button
+                  icon={<SettingsIcon />}
+                  size={ButtonSize.Small}
+                  className="ml-auto mr-3 self-center text-text-quaternary"
+                />
+              </LinkWithTooltip>
+            )
+          }
         >
           <Tab
             label={WriteFormTab.NewPost}