/write: simplify and streamline workflow

assets/_globalCss.css

@@ -65,7 +65,7 @@
         --destructive: 348 78% 50%;
         --destructive-foreground: 348 98% 70%;
         --border: 0 0% 90%;
-        --input: 0 0% 90%;
+        --input: 0 0% 50%;
         --ring: 0 0% 0%;
 
         /* color definitions (legacy support) */

components/UI/shadcn/Switch.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+    <SwitchPrimitives.Root
+        className={cn(
+            'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+            className,
+        )}
+        {...props}
+        ref={ref}
+    >
+        <SwitchPrimitives.Thumb
+            className={cn(
+                'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+            )}
+        />
+    </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package.json

@@ -12,6 +12,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@remixicon/react": "^4.1.1",
     "i18next": "^23.8.2",
     "i18next-browser-languagedetector": "^7.2.0",

pages/etherpad/[[...roomId]].js

@@ -3,16 +3,11 @@ import { useTranslation } from 'react-i18next';
 import getConfig from 'next/config';
 import _ from 'lodash';
 import { useRouter } from 'next/router';
-import { RiDeleteBinLine } from '@remixicon/react';
+import { RiCloseLine, RiDeleteBinLine, RiMenuAddLine } from '@remixicon/react';
+import { styled } from 'styled-components';
 
-import CreateAnonymousPad from './actions/CreateAnonymousPad';
-import AddExistingPad from './actions/AddExistingPad';
-import CreateAuthoredPad from './actions/CreateAuthoredPad';
-import CreatePasswordPad from './actions/CreatePasswordPad';
-import ErrorMessage from '@/components/UI/ErrorMessage';
 import Icon from '@/components/UI/Icon';
 import DefaultLayout from '@/components/layouts/default';
-import { ServiceSubmenu } from '@/components/UI/ServiceSubmenu';
 import TextButton from '@/components/UI/TextButton';
 import { ServiceTable } from '@/components/UI/ServiceTable';
 import LoadingSpinnerInline from '@/components/UI/LoadingSpinnerInline';
@@ -25,6 +20,16 @@ import logger from '@/lib/Logging';
 import { isMyPadsApiEnabled, path as etherpadPath } from '@/lib/Etherpad';
 import { useMatrix } from '@/lib/Matrix';
 import { useAuth } from '@/lib/Auth';
+import CreateNewPad from './actions/CreateNewPad';
+
+const Header = styled.header`
+    display: grid;
+    grid-template-columns: 1fr auto;
+`;
+
+const ToggleButton = styled(TextButton)`
+    height: calc(var(--margin) * var(--line-height));
+`;
 
 const EtherpadListEntry = memo(({ isPasswordProtected, name, href, etherpadId, ref, selected }) => {
     const etherpad = useAuth().getAuthenticationProvider('etherpad');
@@ -70,6 +75,7 @@ export default function Etherpad() {
     const [serverPads, setServerPads] = useState(null);
     const [isDeletingPad, setIsDeletingPad] = useState(false);
     const [isInviteUsersOpen, setIsInviteUsersOpen] = useState(false);
+    const [displayCreatePad, setDisplayCreatePad] = useState(false);
 
     /**
      * A roomId is set when the route is /etherpad/<roomId>, otherwise it's undefined
@@ -163,11 +169,13 @@ export default function Etherpad() {
      */
 
     const createPadAndOpen = async (name, visibility, password) => {
-        const padObject = await etherpad.createPad(name, visibility, password);
+        // truncate the name to a maximum of 40 characters to avoid errors
+        const padObject = await etherpad.createPad(name.substring(0, 40), visibility, password);
         if (!padObject || !padObject.success) throw new Error('The following error occurred', { cause: padObject });
 
         const link = getConfig().publicRuntimeConfig.authProviders.etherpad.baseUrl + '/' + padObject.key;
         const roomId = await createWriteRoom(link, name);
+        setDisplayCreatePad(false);
 
         return router.push(`${etherpadPath}/${roomId}`);
     };
@@ -248,29 +256,6 @@ export default function Etherpad() {
         setIsDeletingPad(false);
     };
 
-    const submenuItems = _.filter([
-        {
-            value: 'existingPad',
-            actionComponentToRender: <AddExistingPad createWriteRoom={createWriteRoom} />,
-            label: t('Add existing pad'),
-        },
-        {
-            value: 'anonymousPad',
-            actionComponentToRender: <CreateAnonymousPad createWriteRoom={createWriteRoom} />,
-            label: t('Create new anonymous pad'),
-        },
-        isMyPadsApiEnabled && {
-            value: 'authoredPad',
-            actionComponentToRender: <CreateAuthoredPad createPadAndOpen={createPadAndOpen} />,
-            label: t('Create new authored pad'),
-        },
-        isMyPadsApiEnabled && {
-            value: 'passwordPad',
-            actionComponentToRender: <CreatePasswordPad createPadAndOpen={createPadAndOpen} />,
-            label: t('Create password protected pad'),
-        },
-    ]);
-
     const listEntries = useMemo(() => {
         return matrix.spaces.get(matrix.serviceSpaces.etherpad)?.children?.map((writeRoomId) => {
             const name = _.get(matrix.rooms.get(writeRoomId), 'name');
@@ -325,16 +310,13 @@ export default function Etherpad() {
                     </>
                 ) : (
                     <>
-                        <ServiceSubmenu
-                            title={<h2>{etherpadPath}</h2>}
-                            subheadline={t('What would you like to do?')}
-                            items={submenuItems}
-                        />
-                        {getConfig().publicRuntimeConfig.authProviders.etherpad.myPads?.api && !serverPads && (
-                            <ErrorMessage>
-                                {t("Can't connect to the provided {{path}} server. Please try again later.", { path: etherpadPath })}
-                            </ErrorMessage>
-                        )}
+                        <Header>
+                            <h2>{etherpadPath}</h2>
+                            <ToggleButton onClick={() => setDisplayCreatePad((prevState) => !prevState)}>
+                                <Icon>{displayCreatePad ? <RiCloseLine /> : <RiMenuAddLine />}</Icon>
+                            </ToggleButton>
+                        </Header>
+                        {displayCreatePad && <CreateNewPad createPadAndOpen={createPadAndOpen} isMyPadsApiEnabled={isMyPadsApiEnabled} />}
                         <ServiceTable>
                             <ServiceTable.Body>{listEntries}</ServiceTable.Body>
                         </ServiceTable>