@visns-studio/visns-components 6.16.6 → 6.17.1

package/src/components/styles/Sms.module.scss

@@ -2386,3 +2386,170 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
         grid-template-columns: 1fr;
     }
 }
+
+// ---------------------------------------------------------------------------
+// SmsClientConversations — one client's messages, as a card on their page
+// ---------------------------------------------------------------------------
+// A card rather than a page: it mounts inside a client's tab strip, beside
+// other cards, and has to be a self-contained box with its own height. The
+// panes inside it are the inbox's, with the rail narrowed — every row is the
+// same person, so it carries a line and a number rather than a name and an
+// avatar.
+
+.clientCard {
+    @include sms-tokens;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    box-sizing: border-box;
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+}
+
+.clientCardHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem 1rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.clientCardHeading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    min-width: 0;
+}
+
+.clientCardTitle {
+    display: flex;
+    gap: 0.45rem;
+    align-items: center;
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.3;
+
+    svg {
+        flex-shrink: 0;
+        color: var(--s-primary);
+    }
+}
+
+.clientCardMeta {
+    margin: 0;
+    color: var(--s-muted);
+    font-size: 0.78rem;
+}
+
+.clientCardActions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    align-items: center;
+    margin-left: auto;
+
+    // "Open in Messages" is a real anchor so it can be middle-clicked and
+    // copied; the ghost-button rules are written for `button`, so the box has
+    // to be restated for an `a`.
+    .ghostButton {
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+    }
+}
+
+.clientCardBody {
+    box-sizing: border-box;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+}
+
+// Nothing to show, and nothing wrong: most clients have never been texted, so
+// this is the state the card is usually in and it has to look deliberate.
+.clientEmpty {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 1rem;
+    text-align: center;
+
+    p {
+        margin: 0;
+        color: var(--s-muted);
+        font-size: 0.85rem;
+    }
+}
+
+.clientPanes {
+    // The height is the `height` prop, set inline. The page-sized default and
+    // the 420px floor both belong to the full inbox, and a card that ignored a
+    // 320px request would be the prop not working.
+    height: auto;
+    min-height: 0;
+    grid-template-columns: 236px minmax(0, 1fr);
+}
+
+.clientRail {
+    // The rail is short by nature — one conversation, occasionally three — so
+    // it does not need the inbox's paging furniture, only its scroll.
+    flex: 1;
+}
+
+// No avatar track: every row is the same person, and a column of identical
+// initials is a column of nothing.
+.clientRow {
+    grid-template-columns: 3px minmax(0, 1fr);
+    padding-right: 0.6rem;
+}
+
+.clientRowNumber {
+    display: block;
+    overflow: hidden;
+    margin-top: 0.05rem;
+    color: var(--s-muted);
+    font-size: 0.74rem;
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Narrow: the rail stops being a column and becomes a strip above the
+// conversation. Same rows, scrolled sideways — a client tab is often half a
+// screen wide, and 236px of that is most of it.
+@media (max-width: 780px) {
+    .clientPanes {
+        grid-template-rows: auto minmax(0, 1fr);
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .clientPanes .listPane {
+        border-right: none;
+        border-bottom: 1px solid var(--s-line);
+    }
+
+    .clientRail {
+        display: flex;
+        gap: 0.4rem;
+        padding: 0.4rem;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        > li {
+            flex: 0 0 auto;
+            width: 220px;
+        }
+    }
+
+    .clientRow {
+        height: 100%;
+        padding: 0.45rem 0.6rem 0.45rem 0;
+        border-bottom: none;
+        border-radius: var(--s-br);
+    }
+}

package/src/components/styles/global.css

@@ -247,7 +247,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .variable-inserter-search-input
     ):not(.react-datepicker__month-select):not(
         .react-datepicker__year-select
-    ):not(.visns-native-date-filter__input) {
+    ):not(.visns-native-date-filter__input):not([type='date']):not(
+        [type='datetime-local']
+    ):not([type='time']) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
@@ -266,6 +268,36 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     }
 }
 
+/* Native date / time inputs are excluded from the padded rule above: 1rem of
+   padding inside a date control made it ~48px and, in Firefox, sat the value
+   low. They get a flat 34px control instead, matching the grid filters. */
+input[type='date'],
+input[type='datetime-local'],
+input[type='time'] {
+    box-sizing: border-box;
+    height: 34px;
+    min-height: 34px;
+    padding: 0 10px;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 31, 31, 31), 0.15);
+    border-radius: var(--br, 4px);
+    background: #fff;
+    color: var(--paragraph-color, #1f1f1f);
+    font-family: inherit;
+    font-size: 0.85rem;
+    line-height: 32px;
+    font-variant-numeric: tabular-nums;
+}
+
+@-moz-document url-prefix() {
+    input[type='date'],
+    input[type='datetime-local'],
+    input[type='time'] {
+        height: 34px;
+        padding: 0 8px;
+        line-height: 32px;
+    }
+}
+
 .popup-content {
     border-radius: var(--br);
     padding: 0 !important;

package/src/index.js

@@ -143,12 +143,14 @@ import {
 // Messaging — the SMS inbox. SmsInboxBadge mounts through Navigation's
 // `renderers` slot; SmsInbox is the page behind it, SmsThreadPanel is the
 // conversation on its own for embedding elsewhere.
+import SmsClientConversations from './components/sms/SmsClientConversations';
 import SmsComposeModal from './components/sms/SmsComposeModal';
 import SmsInbox from './components/sms/SmsInbox';
 import SmsInboxBadge from './components/sms/SmsInboxBadge';
 import SmsLineSettings from './components/sms/SmsLineSettings';
 import SmsThreadPanel from './components/sms/SmsThreadPanel';
 import useSmsLive from './components/sms/useSmsLive';
+import useSmsThreads from './components/sms/useSmsThreads';
 import {
     DEFAULT_ENDPOINTS as DEFAULT_SMS_ENDPOINTS,
     makeSmsEndpoints,
@@ -158,6 +160,8 @@ import {
     MAX_SEGMENTS as SMS_MAX_SEGMENTS,
     SMS_LIMITS,
     STATUS_LABELS as SMS_STATUS_LABELS,
+    clientRecipient,
+    conversationCountLabel,
     describeTransport,
     fillTemplate,
     groupMessagesByDay,
@@ -166,6 +170,8 @@ import {
     looksLikeNumber,
     nextPlaceholder,
     normaliseNumberForDisplay,
+    orderThreadsByRecency,
+    pickInitialThread,
     relativeTime,
     segmentCount,
     splitPersonName,
@@ -277,6 +283,8 @@ export {
     VaultEntryForm,
     VaultManager,
     VaultQuickSearch,
+    clientRecipient,
+    conversationCountLabel,
     DEFAULT_SMS_ENDPOINTS,
     describeTransport,
     fillTemplate,
@@ -287,6 +295,8 @@ export {
     makeSmsEndpoints,
     nextPlaceholder,
     normaliseNumberForDisplay,
+    orderThreadsByRecency,
+    pickInitialThread,
     relativeTime,
     resolveSmsEndpoints,
     segmentCount,
@@ -294,6 +304,7 @@ export {
     SMS_LIMITS,
     SMS_MAX_SEGMENTS,
     SMS_STATUS_LABELS,
+    SmsClientConversations,
     SmsComposeModal,
     SmsInbox,
     SmsInboxBadge,
@@ -302,6 +313,7 @@ export {
     threadDisplayName,
     toE164,
     useSmsLive,
+    useSmsThreads,
     CameraPlacement,
     CellWithTooltip,
     clampOtp,