Start work on fluent categories.

Fix Locale loading when syncing invalid lang.

src/components/common/messaging/MessageBase.tsx

@@ -218,7 +218,7 @@ export const MessageDetail = observer(
                         <time className="copyTime">
                             <i className="copyBracket">[</i>
                             {dayjs(decodeTime(message._id)).format(
-                                dict.dayjs.timeFormat,
+                                dict.dayjs?.timeFormat,
                             )}
                             <i className="copyBracket">]</i>
                         </time>
@@ -236,7 +236,7 @@ export const MessageDetail = observer(
                     <time>
                         <i className="copyBracket">[</i>
                         {dayjs(decodeTime(message._id)).format(
-                            dict.dayjs.timeFormat,
+                            dict.dayjs?.timeFormat,
                         )}
                         <i className="copyBracket">]</i>
                     </time>

src/components/ui/fluent/CategoryButton.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+import { Children } from "../../../types/Preact";
+
+const CategoryBase = styled.div`
+    height: 54px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+
+    background: var(--secondary-header);
+
+    gap: 12px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+`;
+
+interface Props {
+    icon?: Children;
+    children?: Children;
+}
+
+export default function CategoryButton({ icon, children }: Props) {
+    return <CategoryBase>{icon}</CategoryBase>;
+}