From 4ff257be57d9a14aea8e30d996dc431eeeb501c7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Aug 2025 21:35:19 +0300 Subject: [PATCH 1/8] only put heavy components if truly needed --- src/components/attachment/attachment.style.js | 27 ------------------- .../chat_message/chat_message.style.js | 4 +-- src/components/list/list_item.style.js | 5 ++-- src/components/mobile_drawer.style.js | 7 ++--- .../notification/notification.style.js | 8 +++--- src/components/panel.style.js | 13 ++++----- src/components/popover.style.js | 7 ++--- src/components/status/post.style.js | 6 ++--- src/components/top_bar.style.js | 5 ++-- src/components/user_card/user_card.style.js | 5 ++-- src/services/theme_data/theme2_to_theme3.js | 3 --- .../theme_data/theme_data_3.service.js | 1 - 12 files changed, 33 insertions(+), 58 deletions(-) delete mode 100644 src/components/attachment/attachment.style.js diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js deleted file mode 100644 index a9455e367..000000000 --- a/src/components/attachment/attachment.style.js +++ /dev/null @@ -1,27 +0,0 @@ -export default { - name: 'Attachment', - selector: '.Attachment', - notEditable: true, - validInnerComponents: [ - 'Border', - 'Button', - 'Input' - ], - defaultRules: [ - { - directives: { - roundness: 3 - } - }, - { - component: 'Button', - parent: { - component: 'Attachment' - }, - directives: { - background: '#FFFFFF', - opacity: 0.5 - } - } - ] -} diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js index 9b57ad371..f4fc17409 100644 --- a/src/components/chat_message/chat_message.style.js +++ b/src/components/chat_message/chat_message.style.js @@ -8,9 +8,9 @@ export default { 'Text', 'Icon', 'Border', - 'Button', + // Optimization: don't put heavy components unless needed + // 'Button', 'RichContent', - 'Attachment', 'PollGraph' ], defaultRules: [ diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js index 49b2b035f..0094621c5 100644 --- a/src/components/list/list_item.style.js +++ b/src/components/list/list_item.style.js @@ -10,8 +10,9 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'ButtonUnstyled', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', 'RichContent', 'Input', 'Avatar' diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js index 398bc186e..a17befb63 100644 --- a/src/components/mobile_drawer.style.js +++ b/src/components/mobile_drawer.style.js @@ -6,9 +6,10 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'ButtonUnstyled', - 'Input', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', + // 'Input', 'PanelHeader', 'MenuItem', 'Notification', diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js index c6d317d1c..34048bdff 100644 --- a/src/components/notification/notification.style.js +++ b/src/components/notification/notification.style.js @@ -6,12 +6,12 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'ButtonUnstyled', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', 'RichContent', - 'Input', + // 'Input', 'Avatar', - 'Attachment', 'PollGraph' ], defaultRules: [] diff --git a/src/components/panel.style.js b/src/components/panel.style.js index a017a52bc..bf28356a0 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -6,9 +6,10 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'ButtonUnstyled', - 'Input', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', + // 'Input', 'PanelHeader', 'MenuItem', 'Post', @@ -16,7 +17,6 @@ export default { 'Alert', 'UserCard', 'Chat', - 'Attachment', 'Tab', 'ListItem' ], @@ -25,8 +25,9 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'Input', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'Input', 'PanelHeader', 'Alert' ], diff --git a/src/components/popover.style.js b/src/components/popover.style.js index 0197271b9..02ab6d0d3 100644 --- a/src/components/popover.style.js +++ b/src/components/popover.style.js @@ -10,9 +10,10 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'ButtonUnstyled', - 'Input', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', + // 'Input', 'MenuItem', 'Post', 'UserCard' diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js index d0038424e..491f12164 100644 --- a/src/components/status/post.style.js +++ b/src/components/status/post.style.js @@ -9,12 +9,12 @@ export default { 'Link', 'Icon', 'Border', - 'Button', - 'ButtonUnstyled', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', 'RichContent', 'Input', 'Avatar', - 'Attachment', 'PollGraph' ], validInnerComponentsLite: [ diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js index 945ae7781..5aaace639 100644 --- a/src/components/top_bar.style.js +++ b/src/components/top_bar.style.js @@ -5,8 +5,9 @@ export default { 'Link', 'Text', 'Icon', - 'Button', - 'ButtonUnstyled', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', 'Input', 'Badge' ], diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js index 3d5bb2989..2d26385f2 100644 --- a/src/components/user_card/user_card.style.js +++ b/src/components/user_card/user_card.style.js @@ -6,8 +6,9 @@ export default { 'Text', 'Link', 'Icon', - 'Button', - 'ButtonUnstyled', + // Optimization: don't put heavy components unless needed + // 'Button', + // 'ButtonUnstyled', 'Input', 'RichContent', 'Alert' diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 9de1aca3c..0c3383283 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -244,9 +244,6 @@ export const convertTheme2To3 = (data) => { case 'tooltip': rule.component = 'Popover' break - case 'attachment': - rule.component = 'Attachment' - break case 'ChatMessage': rule.component = 'Button' break diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index b85d917de..78aad4488 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -33,7 +33,6 @@ const components = { Icon: null, Border: null, PanelHeader: null, - Attachment: null, Panel: null, Chat: null, ChatMessage: null, From 9ec2ff409dfcd875974342fe853670bdc3160882 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Aug 2025 21:35:59 +0300 Subject: [PATCH 2/8] panel-header avatar is now hard-coded in user-card --- src/components/panel_header.style.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js index 226ff9e16..06a4fa724 100644 --- a/src/components/panel_header.style.js +++ b/src/components/panel_header.style.js @@ -8,8 +8,7 @@ export default { 'Button', 'ButtonUnstyled', 'Badge', - 'Alert', - 'Avatar' + 'Alert' ], defaultRules: [ { From 6341747ec94802c60048903f1df20963ae3d9090 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Aug 2025 22:29:11 +0300 Subject: [PATCH 3/8] more weight reduction --- .../chat_message/chat_message.style.js | 1 - src/components/list/list_item.style.js | 3 +-- .../notification/notification.style.js | 1 - .../rich_content/rich_content.style.js | 20 ------------------- src/components/status/post.style.js | 4 +--- src/components/user_card/user_card.style.js | 3 +-- 6 files changed, 3 insertions(+), 29 deletions(-) delete mode 100644 src/components/rich_content/rich_content.style.js diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js index f4fc17409..73068a7a5 100644 --- a/src/components/chat_message/chat_message.style.js +++ b/src/components/chat_message/chat_message.style.js @@ -10,7 +10,6 @@ export default { 'Border', // Optimization: don't put heavy components unless needed // 'Button', - 'RichContent', 'PollGraph' ], defaultRules: [ diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js index 0094621c5..cf3ee9b85 100644 --- a/src/components/list/list_item.style.js +++ b/src/components/list/list_item.style.js @@ -13,8 +13,7 @@ export default { // Optimization: don't put heavy components unless needed // 'Button', // 'ButtonUnstyled', - 'RichContent', - 'Input', + // 'Input', 'Avatar' ], defaultRules: [ diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js index 34048bdff..b3933c80b 100644 --- a/src/components/notification/notification.style.js +++ b/src/components/notification/notification.style.js @@ -9,7 +9,6 @@ export default { // Optimization: don't put heavy components unless needed // 'Button', // 'ButtonUnstyled', - 'RichContent', // 'Input', 'Avatar', 'PollGraph' diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js deleted file mode 100644 index eaba9c4b1..000000000 --- a/src/components/rich_content/rich_content.style.js +++ /dev/null @@ -1,20 +0,0 @@ -export default { - name: 'RichContent', - selector: '.RichContent', - notEditable: true, - transparent: true, - validInnerComponents: [ - 'Text', - 'FunText', - 'Link' - ], - defaultRules: [ - { - directives: { - '--font': 'generic | inherit', - '--monoFont': 'generic | monospace', - textNoCssColor: 'yes' - } - } - ] -} diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js index 491f12164..a63cbed38 100644 --- a/src/components/status/post.style.js +++ b/src/components/status/post.style.js @@ -12,8 +12,7 @@ export default { // Optimization: don't put heavy components unless needed // 'Button', // 'ButtonUnstyled', - 'RichContent', - 'Input', + // 'Input', 'Avatar', 'PollGraph' ], @@ -23,7 +22,6 @@ export default { 'Icon', 'Border', 'ButtonUnstyled', - 'RichContent', 'Avatar' ], defaultRules: [ diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js index 2d26385f2..ad1312880 100644 --- a/src/components/user_card/user_card.style.js +++ b/src/components/user_card/user_card.style.js @@ -9,8 +9,7 @@ export default { // Optimization: don't put heavy components unless needed // 'Button', // 'ButtonUnstyled', - 'Input', - 'RichContent', + // 'Input', 'Alert' ], defaultRules: [ From 9440d3526663f0723c39faad8c455be4e9c4b94a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Aug 2025 22:49:09 +0300 Subject: [PATCH 4/8] even more weight loss --- src/components/list/list_item.style.js | 48 --------------------- src/components/menu_item.style.js | 6 +-- src/components/mobile_drawer.style.js | 4 +- src/components/panel.style.js | 18 +------- src/components/popover.style.js | 4 +- src/components/user_card/user_card.style.js | 42 ------------------ src/services/style_setter/style_setter.js | 2 +- 7 files changed, 6 insertions(+), 118 deletions(-) delete mode 100644 src/components/list/list_item.style.js delete mode 100644 src/components/user_card/user_card.style.js diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js deleted file mode 100644 index cf3ee9b85..000000000 --- a/src/components/list/list_item.style.js +++ /dev/null @@ -1,48 +0,0 @@ -export default { - name: 'ListItem', - selector: '.list-item', - states: { - active: '.-active', - hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)' - }, - validInnerComponents: [ - 'Text', - 'Link', - 'Icon', - 'Border', - // Optimization: don't put heavy components unless needed - // 'Button', - // 'ButtonUnstyled', - // 'Input', - 'Avatar' - ], - defaultRules: [ - { - directives: { - background: '--bg', - opacity: 0 - } - }, - { - state: ['active'], - directives: { - background: '--inheritedBackground, 10', - opacity: 1 - } - }, - { - state: ['hover'], - directives: { - background: '--inheritedBackground, 10', - opacity: 1 - } - }, - { - state: ['hover', 'active'], - directives: { - background: '--inheritedBackground, 20', - opacity: 1 - } - } - ] -} diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js index 883355efa..859932062 100644 --- a/src/components/menu_item.style.js +++ b/src/components/menu_item.style.js @@ -4,11 +4,7 @@ export default { validInnerComponents: [ 'Text', 'Icon', - 'Input', - 'Border', - 'ButtonUnstyled', - 'Badge', - 'Avatar' + 'Border' ], states: { hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)', diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js index a17befb63..da3923fc9 100644 --- a/src/components/mobile_drawer.style.js +++ b/src/components/mobile_drawer.style.js @@ -10,11 +10,9 @@ export default { // 'Button', // 'ButtonUnstyled', // 'Input', - 'PanelHeader', 'MenuItem', 'Notification', - 'Alert', - 'UserCard' + 'Alert' ], defaultRules: [ { diff --git a/src/components/panel.style.js b/src/components/panel.style.js index bf28356a0..88dcf4382 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -6,30 +6,16 @@ export default { 'Link', 'Icon', 'Border', - // Optimization: don't put heavy components unless needed - // 'Button', - // 'ButtonUnstyled', - // 'Input', 'PanelHeader', - 'MenuItem', 'Post', - 'Notification', - 'Alert', - 'UserCard', - 'Chat', - 'Tab', - 'ListItem' + 'Notification' ], validInnerComponentsLite: [ 'Text', 'Link', 'Icon', 'Border', - // Optimization: don't put heavy components unless needed - // 'Button', - // 'Input', - 'PanelHeader', - 'Alert' + 'PanelHeader' ], defaultRules: [ { diff --git a/src/components/popover.style.js b/src/components/popover.style.js index 02ab6d0d3..9c87a3c95 100644 --- a/src/components/popover.style.js +++ b/src/components/popover.style.js @@ -14,9 +14,7 @@ export default { // 'Button', // 'ButtonUnstyled', // 'Input', - 'MenuItem', - 'Post', - 'UserCard' + 'MenuItem' ], defaultRules: [ { diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js deleted file mode 100644 index ad1312880..000000000 --- a/src/components/user_card/user_card.style.js +++ /dev/null @@ -1,42 +0,0 @@ -export default { - name: 'UserCard', - selector: '.user-card', - notEditable: true, - validInnerComponents: [ - 'Text', - 'Link', - 'Icon', - // Optimization: don't put heavy components unless needed - // 'Button', - // 'ButtonUnstyled', - // 'Input', - 'Alert' - ], - defaultRules: [ - { - directives: { - background: '--bg', - opacity: 0, - roundness: 3, - shadow: [{ - x: 1, - y: 1, - blur: 4, - spread: 0, - color: '#000000', - alpha: 0.6 - }], - '--profileTint': 'color | $alpha(--background 0.5)' - } - }, - { - parent: { - component: 'UserCard' - }, - component: 'RichContent', - directives: { - opacity: 0 - } - } - ] -} diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 2a001007d..2c10238ed 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -86,7 +86,7 @@ export const generateTheme = (inputRuleset, callbacks, debug) => { const themes3 = init({ inputRuleset, - debug + debug: true }) getCssRules(themes3.eager, debug).forEach(rule => { From 67f606a3b04c868bd06ea1d6ce598b79d52c5359 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Aug 2025 23:03:24 +0300 Subject: [PATCH 5/8] user-card fixes --- src/components/user_card/user_card.scss | 12 +++++-- src/components/user_card/user_card.style.js | 37 +++++++++++++++++++++ src/components/user_card/user_card.vue | 18 +++++----- 3 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 src/components/user_card/user_card.style.js diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 58eb66d5c..4fdc73777 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -111,15 +111,20 @@ } } - .banner-overlay, - .banner-image { + .header-overlay { position: absolute; inset: 0; right: -1.2em; left: -1.2em; top: -1.4em; - padding: 0; mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat; + } + + .banner-overlay, + .banner-image { + position: absolute; + inset: 0; + padding: 0; border-top-left-radius: calc(var(--roundness) - 1px); border-top-right-radius: calc(var(--roundness) - 1px); } @@ -136,6 +141,7 @@ .banner-overlay { background-color: var(--profileTint); + opacity: 0.5; pointer-events: none; // let user copy bg url z-index: -1; } diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js new file mode 100644 index 000000000..2c84b2759 --- /dev/null +++ b/src/components/user_card/user_card.style.js @@ -0,0 +1,37 @@ +export default { + name: 'UserCard', + selector: '.user-card', + notEditable: true, + validInnerComponents: [ + 'Text', + 'Link', + 'Icon', + ], + defaultRules: [ + { + directives: { + background: '--bg', + opacity: 0, + roundness: 3, + shadow: [{ + x: 1, + y: 1, + blur: 4, + spread: 0, + color: '#000000', + alpha: 0.6 + }], + '--profileTint': 'color | $alpha(--background 1)' + } + }, + { + parent: { + component: 'UserCard' + }, + component: 'RichContent', + directives: { + opacity: 0 + } + } + ] +} diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 52dab5069..d6edc021f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -3,16 +3,18 @@