ui: ChatFragment 使用分面板的樣式

client/ui/chat/ChatFragment.tsx

@@ -0,0 +1,84 @@
+import { Tab } from "mdui"
+import useEventListener from "../useEventListener.ts"
+import Message from "./Message.jsx"
+import MessageContainer from "./MessageContainer.jsx"
+
+import * as React from 'react'
+
+export default function ChatFragment({ ...props } = {}) {
+    const messageList = React.useState([])
+
+    const [tabItemSelected, setTabItemSelected] = React.useState('Chat')
+    const tabRef: React.MutableRefObject<Tab | null> = React.useRef(null)
+    useEventListener(tabRef, 'change', (event) => {
+        setTabItemSelected((event.target as HTMLElement as Tab).value as string)
+    })
+
+    return (
+        <div style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflowY: 'auto',
+        }} {...props}>
+            <mdui-tabs ref={tabRef} value="Chat" style={{
+                position: 'sticky',
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+            }}>
+                <mdui-tab value="Chat">Title</mdui-tab>
+                <mdui-tab value="Settings">設定</mdui-tab>
+
+                <mdui-tab-panel slot="panel" value="Chat" style={{
+                    display: tabItemSelected == "Chat" ? "flex" : "none",
+                    flexDirection: "column",
+                    height: "100%",
+                }}>
+                    <div style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        marginTop: "15px"
+                    }}>
+                        <mdui-button variant="text">加載更多</mdui-button>
+                    </div>
+                    <MessageContainer>
+                    </MessageContainer>
+                    {
+                        // 输入框
+                    }
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        paddingBottom: '0.1rem',
+                        paddingTop: '0.1rem',
+                        height: '4rem',
+                        position: 'sticky',
+                        bottom: '2px',
+                        marginLeft: '5px',
+                        marginRight: '4px',
+                        backgroundColor: 'rgb(var(--mdui-color-background))',
+                    }}>
+                        <mdui-text-field variant="outlined" placeholder="喵呜~" autosize max-rows={1} style={{
+                            marginRight: '10px',
+                        }}></mdui-text-field>
+                        <mdui-button-icon slot="end-icon" icon="more_vert" style={{
+                            marginRight: '6px',
+                        }}></mdui-button-icon>
+                        <mdui-button-icon icon="send" style={{
+                            marginRight: '7px',
+                        }}></mdui-button-icon>
+                    </div>
+                </mdui-tab-panel>
+                <mdui-tab-panel slot="panel" value="Settings" style={{
+                    display: tabItemSelected == "Settings" ? "flex" : "none",
+                    flexDirection: "column",
+                    height: "100%",
+                }}>
+                    Work in progress...
+                </mdui-tab-panel>
+            </mdui-tabs>
+        </div>
+    )
+}