feat: Add compose button position

locales/en/translation.json

@@ -104,6 +104,8 @@
 	"settings": {
 		"settings": {
 			"title": "Settings",
+			"require_reload": "Required to reload after changing",
+			"reload": "Whole Reload",
 			"appearance": {
 				"title": "Appearance",
 				"font_size": "Font size",
@@ -125,6 +127,11 @@
 			},
 			"compose": {
 				"title": "Compose",
+				"btnPosition": {
+					"title": "Compose button on bottom-bar position",
+					"left": "Left",
+					"right": "Right"
+				},
 				"afterPost": {
 					"title": "After posting, compose box will be...",
 					"close": "Close",

locales/ja/translation.json

@@ -104,6 +104,8 @@
 	"settings": {
 		"settings": {
 			"title": "設定",
+			"require_reload": "変更後は再読み込みが必要です",
+			"reload": "全体を再読み込み",
 			"appearance": {
 				"title": "外観",
 				"font_size": "フォントサイズ",
@@ -125,6 +127,11 @@
 			},
 			"compose": {
 				"title": "投稿",
+				"btnPosition": {
+					"title": "ボトムバーの投稿ボタンの位置",
+					"left": "左",
+					"right": "右"
+				},
 				"afterPost": {
 					"title": "投稿後投稿ボックスの挙動",
 					"close": "しまう",

renderer/components/Navigator.tsx

@@ -14,7 +14,8 @@ import { type Dispatch, type ReactElement, type SetStateAction, useContext, useE
 import { BsDice1, BsDice2, BsDice3, BsDice4, BsDice5, BsDice6, BsGear, BsPencilSquare, BsPlus, BsSearch } from 'react-icons/bs'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Avatar, Badge, Button, Dropdown, FlexboxGrid, Popover, Sidebar, Sidenav, Stack, Text, Whisper, useToaster } from 'rsuite'
-import { addTimeline, listTimelines, removeServer, updateAccountColor } from 'utils/storage'
+import { addTimeline, listTimelines, readSettings, removeServer, updateAccountColor } from 'utils/storage'
+import { type Settings, defaultSetting } from '@/entities/settings'
 
 type NavigatorProps = {
 	servers: Array<ServerSet>
@@ -43,6 +44,7 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
 	const { servers, openAuthorize, openAnnouncements, openThirdparty, openSettings } = props
 	const [awake, setAwake] = useState(0)
 	const [walkthrough, setWalkthrough] = useState(false)
+	const [config, setConfig] = useState<Settings['compose']>(defaultSetting.compose)
 	const toaster = useToaster()
 	const { timelineRefresh } = useContext(TheDeskContext)
 
@@ -80,6 +82,8 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
 		})
 	}, [props.servers])
 	useEffect(() => {
+		const fn = async () => setConfig((await readSettings()).compose || defaultSetting.compose)
+		fn()
 		setInterval(() => {
 			setAwake((current) => current + 1)
 		}, 600000)
@@ -120,6 +124,9 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
 		<div style={{ display: 'flex', justifyContent: 'space-between', backgroundColor: 'var(--rs-sidenav-default-bg)', height: '56px' }}>
 			<div style={{ display: 'flex', alignItems: 'center' }}>
 				<div style={{ display: 'flex', alignItems: 'center' }}>
+					{config.btnPosition === 'left' && <Button appearance="primary" color="green" size="lg" onClick={props.toggleCompose} startIcon={<Icon as={BsPencilSquare} />} style={{ marginLeft: '15px' }}>
+						<FormattedMessage id="compose.post" />
+					</Button>}
 					<Button appearance="link" size="lg" onClick={props.toggleSearch} style={{ marginRight: '15px' }}>
 						<Icon as={BsSearch} style={{ fontSize: '1.4em' }} />
 					</Button>
@@ -174,7 +181,7 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
 								>
 									<Badge content={!!props.unreads.find((u) => u.server_id === server.server.id && u.count > 0)}>
 										<Avatar size="sm" src={server.account?.avatar || FailoverImg(server.server.favicon)} className="server-icon colorChangeBtn" alt={server.server.domain} key={server.server.id} />
-										
+
 									</Badge>
 								</Button>
 							</Whisper>
@@ -219,9 +226,9 @@ const Navigator: React.FC<NavigatorProps> = (props): ReactElement => {
 						<Icon as={BsGear} style={{ fontSize: '1.4em' }} />
 					</Button>
 				</div>
-				<Button appearance="primary" color="green" size="lg" onClick={props.toggleCompose} startIcon={<Icon as={BsPencilSquare} />}>
+				{(!config.btnPosition || config.btnPosition === 'right') && <Button appearance="primary" color="green" size="lg" onClick={props.toggleCompose} startIcon={<Icon as={BsPencilSquare} />}>
 					<FormattedMessage id="compose.post" />
-				</Button>
+				</Button>}
 			</div>
 		</div>
 	)

renderer/components/settings/Settings.tsx

@@ -42,6 +42,7 @@ const themes = [
 ]
 const time = ['relative', 'absolute', '12h']
 const afterPost = ['close', 'stay']
+const btnPosition = ['left', 'right']
 const vis = ['public', 'unlisted', 'private', 'direct']
 
 export default function Settings(props: Props) {
@@ -103,6 +104,7 @@ export default function Settings(props: Props) {
 			},
 			compose: {
 				afterPost: compose.afterPost,
+				btnPosition: compose.btnPosition,
 				secondaryToot: compose.secondaryToot
 			}
 		}
@@ -184,6 +186,13 @@ export default function Settings(props: Props) {
 				</Form>
 				<Form layout="horizontal" formValue={compose} onChange={setCompose}>
 					<Panel header={<FormattedMessage id="settings.settings.compose.title" />}>
+						<p style={{ fontSize: '0.8rem' }}><FormattedMessage id="settings.settings.require_reload" /></p>
+						<Form.Group controlId="btnPosition" style={{ marginBottom: 0 }}>
+							<Form.ControlLabel>
+								<FormattedMessage id="settings.settings.compose.btnPosition.title" />
+							</Form.ControlLabel>
+							<Form.Control name="btnPosition" {...focusAttr} accepter={InputPicker} cleanable={false} data={btnPosition.map((t) => { return { label: formatMessage({ id: `settings.settings.compose.btnPosition.${t}` }), value: t } })} />
+						</Form.Group>
 						<Form.Group controlId="afterPost">
 							<Form.ControlLabel>
 								<FormattedMessage id="settings.settings.compose.afterPost.title" />
@@ -217,6 +226,7 @@ export default function Settings(props: Props) {
 						</Button>
 					</ButtonToolbar>
 				</Form.Group>
+				<Button appearance="link" onClick={() => location.reload()}><FormattedMessage id="settings.settings.reload" /></Button>
 			</Modal.Body>
 		</Modal>
 	)

renderer/entities/settings.ts

@@ -12,6 +12,7 @@ export type Settings = {
 		max_length: number
 	},
 	compose: {
+		btnPosition: 'left' | 'right',
 		afterPost: 'close' | 'stay',
 		secondaryToot: 'no' | "public" | "unlisted" | "private" | "direct"
 	}
@@ -31,6 +32,7 @@ export const defaultSetting: Settings = {
 		max_length: 0
 	},
 	compose: {
+		btnPosition: 'right',
 		afterPost: 'close',
 		secondaryToot: 'no'
 	}