feat(@ui): migrate date divider and details

src/components/common/CollapsibleSection.tsx

@@ -1,8 +1,8 @@
 import { ChevronDown } from "@styled-icons/boxicons-regular";
 
-import { useApplicationState } from "../../mobx/State";
+import { Details } from "@revoltchat/ui";
 
-import Details from "../ui/Details";
+import { useApplicationState } from "../../mobx/State";
 
 import { Children } from "../../types/Preact";
 

src/components/ui/DateDivider.tsx

@@ -1,53 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-import { dayjs } from "../../context/Locale";
-
-const Base = styled.div<{ unread?: boolean }>`
-    height: 0;
-    display: flex;
-    user-select: none;
-    align-items: center;
-    margin: 17px 12px 5px;
-    border-top: thin solid var(--tertiary-foreground);
-
-    time {
-        margin-top: -2px;
-        font-size: 0.6875rem;
-        line-height: 0.6875rem;
-        padding-inline-start: 5px;
-        padding-inline-end: 5px;
-        color: var(--tertiary-foreground);
-        background: var(--primary-background);
-    }
-
-    ${(props) =>
-        props.unread &&
-        css`
-            border-top: thin solid var(--accent);
-        `}
-`;
-
-const Unread = styled.div`
-    background: var(--accent);
-    color: var(--accent-contrast);
-    font-size: 7px;
-    padding: 2px 6px;
-    font-size: 10px;
-    border-radius: 60px;
-    font-weight: 600;
-    margin-top: -1px;
-`;
-
-interface Props {
-    date?: Date;
-    unread?: boolean;
-}
-
-export default function DateDivider({ unread, date }: Props) {
-    return (
-        <Base unread={unread}>
-            {unread && <Unread>NEW</Unread>}
-            {date && <time>{dayjs(date).format("LL")}</time>}
-        </Base>
-    );
-}

src/components/ui/Details.tsx

@@ -1,82 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
-
-export default styled.details<{ sticky?: boolean; large?: boolean }>`
-    summary {
-        ${(props) =>
-            props.sticky &&
-            css`
-                top: 48px;
-                z-index: 10;
-                position: sticky;
-                ${() =>
-                    isTouchscreenDevice &&
-                    css`
-                        top: 56px;
-                    `}
-            `}
-
-        ${(props) =>
-            props.large &&
-            css`
-                /*padding: 5px 0;*/
-                background: var(--primary-background);
-                color: var(--secondary-foreground);
-
-                .padding {
-                    /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
-                    display: flex;
-                    align-items: center;
-                    padding: 5px 0;
-                    margin: 0.8em 0px 0.4em;
-                    cursor: pointer;
-                }
-            `}
-
-        outline: none;
-        cursor: pointer;
-        list-style: none;
-        user-select: none;
-        align-items: center;
-        transition: 0.2s opacity;
-
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-
-        &::marker,
-        &::-webkit-details-marker {
-            display: none;
-        }
-
-        .title {
-            flex-grow: 1;
-            margin-top: 1px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        .padding {
-            display: flex;
-            align-items: center;
-
-            > svg {
-                flex-shrink: 0;
-                margin-inline-end: 4px;
-                transition: 0.2s ease transform;
-            }
-        }
-    }
-
-    &:not([open]) {
-        summary {
-            opacity: 0.7;
-        }
-
-        summary svg {
-            transform: rotateZ(-90deg);
-        }
-    }
-`;

src/pages/channels/messaging/MessageRenderer.tsx

@@ -11,6 +11,8 @@ import { decodeTime } from "ulid";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { MessageDivider } from "@revoltchat/ui";
+
 import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
 import { ChannelRenderer } from "../../../lib/renderer/Singleton";
 
@@ -21,12 +23,11 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../../components/common/messaging/Message";
 import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
-import DateDivider from "../../../components/ui/DateDivider";
 import Preloader from "../../../components/ui/Preloader";
-
 import { Children } from "../../../types/Preact";
 import ConversationStart from "./ConversationStart";
 import MessageEditor from "./MessageEditor";
+import dayjs from "dayjs";
 
 interface Props {
     last_id?: string;
@@ -125,7 +126,7 @@ export default observer(({ last_id, renderer, highlight }: Props) => {
         }
 
         if (unread || date) {
-            render.push(<DateDivider date={date} unread={unread} />);
+            render.push(<MessageDivider date={dayjs(date).format("LL")} unread={unread} />);
             head = true;
         }