From 2647606a15748134956b078bc2ed3ef564b1cc5e Mon Sep 17 00:00:00 2001 From: Matt Jankowski Date: Tue, 8 Oct 2024 09:21:36 -0400 Subject: [PATCH 1/6] [Glitch] Bring icon vertical middle to applications list style Port fa4a82326d4e33c63a76c6725c36e85fe3ae9310 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/admin.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 9bc3c7758ea741..fadc678de3c25f 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1050,6 +1050,12 @@ a.name-tag, color: var(--user-role-accent); } +.applications-list { + .icon { + vertical-align: middle; + } +} + .announcements-list, .filters-list { border: 1px solid var(--background-border-color); From 480dcecc11dd0d08897cef6c906cfb8283789f2f Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 9 Oct 2024 19:24:22 +0200 Subject: [PATCH 2/6] [Glitch] Fix list edition modal styling Port 45a520603b10792e24a2190215c0305c739108d0 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/components.scss | 83 ++++++++----------- 1 file changed, 36 insertions(+), 47 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 261aaae4950fb6..39ee2da2429904 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -8498,7 +8498,6 @@ noscript { justify-content: flex-start; gap: 15px; align-items: center; - border: 1px solid var(--background-border-color); border-top: 0; label { @@ -8525,18 +8524,50 @@ noscript { background: rgba($base-overlay-background, 0.5); } +.list-adder, .list-editor { - background: $ui-base-color; + backdrop-filter: var(--background-filter); + background: var(--modal-background-color); + border: 1px solid var(--modal-border-color); flex-direction: column; border-radius: 8px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); width: 380px; overflow: hidden; @media screen and (width <= 420px) { width: 90%; } +} + +.list-adder { + &__lists { + height: 50vh; + border-radius: 0 0 8px 8px; + overflow-y: auto; + } + + .list { + padding: 10px; + border-bottom: 1px solid var(--background-border-color); + } + + .list__wrapper { + display: flex; + } + + .list__display-name { + flex: 1 1 auto; + overflow: hidden; + text-decoration: none; + font-size: 16px; + padding: 10px; + display: flex; + align-items: center; + gap: 4px; + } +} +.list-editor { h4 { padding: 15px 0; background: lighten($ui-base-color, 13%); @@ -8548,12 +8579,10 @@ noscript { .drawer__pager { height: 50vh; - border-radius: 4px; + border: 0; } .drawer__inner { - border-radius: 0 0 8px 8px; - &.backdrop { width: calc(100% - 60px); box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); @@ -8562,6 +8591,7 @@ noscript { } &__accounts { + background: unset; overflow-y: auto; } @@ -8580,47 +8610,6 @@ noscript { } } -.list-adder { - background: $ui-base-color; - flex-direction: column; - border-radius: 8px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - width: 380px; - overflow: hidden; - - @media screen and (width <= 420px) { - width: 90%; - } - - &__account { - background: lighten($ui-base-color, 13%); - } - - &__lists { - background: lighten($ui-base-color, 13%); - height: 50vh; - border-radius: 0 0 8px 8px; - overflow-y: auto; - } - - .list { - padding: 10px; - border-bottom: 1px solid var(--background-border-color); - } - - .list__wrapper { - display: flex; - } - - .list__display-name { - flex: 1 1 auto; - overflow: hidden; - text-decoration: none; - font-size: 16px; - padding: 10px; - } -} - .focal-point { position: relative; cursor: move; From bfb610922d7d84ee4f34c5377c8f7152364f237c Mon Sep 17 00:00:00 2001 From: Michael Stanclift Date: Wed, 9 Oct 2024 14:33:28 -0500 Subject: [PATCH 3/6] [Glitch] Restore list column border Port de4f7859b4cf5fc5254173368cf35f0d711331b6 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/components.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 39ee2da2429904..7c2f19bde17284 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -8498,6 +8498,7 @@ noscript { justify-content: flex-start; gap: 15px; align-items: center; + border: 1px solid var(--background-border-color); border-top: 0; label { From 592945e498a40682492c9266fd009476b6b4adad Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 10 Oct 2024 13:04:38 +0200 Subject: [PATCH 4/6] =?UTF-8?q?[Glitch]=20Fix=20=E2=80=9CMention=E2=80=9D?= =?UTF-8?q?=20appearing=20for=20otherwise=20filtered=20posts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port f75eb1a8b0386d2ca5c1c05ee3b10364b3e11211 to glitch-soc Signed-off-by: Claire --- .../components/notification_with_status.tsx | 9 +++- .../flavours/glitch/selectors/filters.ts | 50 +++++++++++++++++++ .../flavours/glitch/selectors/index.js | 15 +----- 3 files changed, 60 insertions(+), 14 deletions(-) create mode 100644 app/javascript/flavours/glitch/selectors/filters.ts diff --git a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx index 941b1254f7cd02..4f45189e59cefa 100644 --- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx +++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx @@ -16,6 +16,7 @@ import { import type { IconProp } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon'; import Status from 'flavours/glitch/containers/status_container'; +import { getStatusHidden } from 'flavours/glitch/selectors/filters'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; import { DisplayedName } from './displayed_name'; @@ -51,6 +52,12 @@ export const NotificationWithStatus: React.FC<{ (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct', ); + const isFiltered = useAppSelector( + (state) => + statusId && + getStatusHidden(state, { id: statusId, contextType: 'notifications' }), + ); + const handlers = useMemo( () => ({ open: () => { @@ -77,7 +84,7 @@ export const NotificationWithStatus: React.FC<{ [dispatch, statusId], ); - if (!statusId) return null; + if (!statusId || isFiltered) return null; return ( diff --git a/app/javascript/flavours/glitch/selectors/filters.ts b/app/javascript/flavours/glitch/selectors/filters.ts new file mode 100644 index 00000000000000..5d7bfcbdc7a075 --- /dev/null +++ b/app/javascript/flavours/glitch/selectors/filters.ts @@ -0,0 +1,50 @@ +import { createSelector } from '@reduxjs/toolkit'; + +import type { RootState } from 'flavours/glitch/store'; +import { toServerSideType } from 'flavours/glitch/utils/filters'; + +// TODO: move to `app/javascript/flavours/glitch/models` and use more globally +type Filter = Immutable.Map; + +// TODO: move to `app/javascript/flavours/glitch/models` and use more globally +type FilterResult = Immutable.Map; + +export const getFilters = createSelector( + [ + (state: RootState) => state.filters as Immutable.Map, + (_, { contextType }: { contextType: string }) => contextType, + ], + (filters, contextType) => { + if (!contextType) { + return null; + } + + const now = new Date(); + const serverSideType = toServerSideType(contextType); + + return filters.filter((filter) => { + const context = filter.get('context') as Immutable.List; + const expiration = filter.get('expires_at') as Date | null; + return ( + context.includes(serverSideType) && + (expiration === null || expiration > now) + ); + }); + }, +); + +export const getStatusHidden = ( + state: RootState, + { id, contextType }: { id: string; contextType: string }, +) => { + const filters = getFilters(state, { contextType }); + if (filters === null) return false; + + const filtered = state.statuses.getIn([id, 'filtered']) as + | Immutable.List + | undefined; + return filtered?.some( + (result) => + filters.getIn([result.get('filter'), 'filter_action']) === 'hide', + ); +}; diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 1b2d63ae36d1b5..7c9a68cba41429 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -1,22 +1,11 @@ import { createSelector } from '@reduxjs/toolkit'; import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; -import { toServerSideType } from 'flavours/glitch/utils/filters'; - import { me } from '../initial_state'; -export { makeGetAccount } from "./accounts"; - -const getFilters = createSelector([state => state.get('filters'), (_, { contextType }) => contextType], (filters, contextType) => { - if (!contextType) { - return null; - } +import { getFilters } from './filters'; - const now = new Date(); - const serverSideType = toServerSideType(contextType); - - return filters.filter(filter => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || filter.get('expires_at') > now)); -}); +export { makeGetAccount } from "./accounts"; export const makeGetStatus = () => { return createSelector( From 9f165436d2334910a537f9009c1bae1495c032dc Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 10 Oct 2024 15:42:08 +0200 Subject: [PATCH 5/6] =?UTF-8?q?[Glitch]=20Fix=20=E2=80=9CMark=20every=20no?= =?UTF-8?q?tification=20as=20read=E2=80=9D=20not=20updating=20the=20read?= =?UTF-8?q?=20marker=20if=20scrolled=20down?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port e018e6321feb97609b18ac61d3349beb6de170b5 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/reducers/notification_groups.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/reducers/notification_groups.ts b/app/javascript/flavours/glitch/reducers/notification_groups.ts index 3eece4b1d09a0d..d1dacc7964e134 100644 --- a/app/javascript/flavours/glitch/reducers/notification_groups.ts +++ b/app/javascript/flavours/glitch/reducers/notification_groups.ts @@ -559,7 +559,10 @@ export const notificationGroupsReducer = createReducer( compareId(state.lastReadId, mostRecentGroup.page_max_id) < 0 ) state.lastReadId = mostRecentGroup.page_max_id; - commitLastReadId(state); + + // We don't call `commitLastReadId`, because that is conditional + // and we want to unconditionally update the state instead. + state.readMarkerId = state.lastReadId; }) .addCase(fetchMarkers.fulfilled, (state, action) => { if ( From 782a7858939e388f0f83d3941d4081d909a2eb51 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 10 Oct 2024 16:53:12 +0200 Subject: [PATCH 6/6] [Glitch] Fix mute duration not being shown in list of muted accounts in web UI Port a295832960f3a782b928145279af335f956fff1f to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/api_types/accounts.ts | 11 ++++++++++- app/javascript/flavours/glitch/models/account.ts | 3 +++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/api_types/accounts.ts b/app/javascript/flavours/glitch/api_types/accounts.ts index 5bf3e64288c76e..fdbd7523fc15cd 100644 --- a/app/javascript/flavours/glitch/api_types/accounts.ts +++ b/app/javascript/flavours/glitch/api_types/accounts.ts @@ -13,7 +13,7 @@ export interface ApiAccountRoleJSON { } // See app/serializers/rest/account_serializer.rb -export interface ApiAccountJSON { +export interface BaseApiAccountJSON { acct: string; avatar: string; avatar_static: string; @@ -45,3 +45,12 @@ export interface ApiAccountJSON { memorial?: boolean; hide_collections: boolean; } + +// See app/serializers/rest/muted_account_serializer.rb +export interface ApiMutedAccountJSON extends BaseApiAccountJSON { + mute_expires_at?: string | null; +} + +// For now, we have the same type representing both `Account` and `MutedAccount` +// objects, but we should refactor this in the future. +export type ApiAccountJSON = ApiMutedAccountJSON; diff --git a/app/javascript/flavours/glitch/models/account.ts b/app/javascript/flavours/glitch/models/account.ts index 0b698ead3d1930..799265831ea4c5 100644 --- a/app/javascript/flavours/glitch/models/account.ts +++ b/app/javascript/flavours/glitch/models/account.ts @@ -95,6 +95,9 @@ export const accountDefaultValues: AccountShape = { limited: false, moved: null, hide_collections: false, + // This comes from `ApiMutedAccountJSON`, but we should eventually + // store that in a different object. + mute_expires_at: null, }; const AccountFactory = ImmutableRecord(accountDefaultValues);