mirror/YuruToot
1
0
Fork 0
mirror of https://github.com/funamitech/mastodon synced 2024-11-27 14:29:03 +09:00
Code

Merge branch 'main' of https://github.com/glitch-soc/mastodon

Browse Source
This commit is contained in:
Noa Himesaka 2024-07-27 15:28:10 +09:00
commit 7b8d855ec2
482 changed files with 12691 additions and 2677 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.nvmrc
View File

@ -1 +1 @@
20.15
20.16

4
.rubocop_todo.yml
View File

@ -1,6 +1,6 @@
# This configuration was generated by
# `rubocop --auto-gen-config --auto-gen-only-exclude --no-offense-counts --no-auto-gen-timestamp`
# using RuboCop version 1.64.1.
# using RuboCop version 1.65.0.
# The point is for the user to remove these configuration records
# one by one as the offenses are removed from the code base.
# Note that changes in the inspected code, or installation of new
@ -14,7 +14,7 @@ Lint/NonLocalExitFromIterator:
Metrics/AbcSize:
Max: 90
# Configuration parameters: CountBlocks, Max.
# Configuration parameters: CountBlocks, CountModifierForms, Max.
Metrics/BlockNesting:
Exclude:
- 'lib/tasks/mastodon.rake'

2
.ruby-version
View File

@ -1 +1 @@
3.3.3
3.3.4

5
CONTRIBUTING.md
View File

@ -50,6 +50,11 @@ You can contribute in the following ways:
If your contributions are accepted into Mastodon, you can request to be paid through [our OpenCollective](https://opencollective.com/mastodon).
Please review the org-level [contribution guidelines] for high-level acceptance
criteria guidance.
[contribution guidelines]: https://github.com/mastodon/.github/blob/main/CONTRIBUTING.md
## API Changes and Additions
Please note that any changes or additions made to the API should have an accompanying pull request on [our documentation repository](https://github.com/mastodon/documentation).

6
Dockerfile
View File

@ -12,7 +12,7 @@ ARG BUILDPLATFORM=${BUILDPLATFORM}
# Ruby image to use for base image, change with [--build-arg RUBY_VERSION="3.3.x"]
# renovate: datasource=docker depName=docker.io/ruby
ARG RUBY_VERSION="3.3.3"
ARG RUBY_VERSION="3.3.4"
# # Node version to use in base image, change with [--build-arg NODE_MAJOR_VERSION="20"]
# renovate: datasource=node-version depName=node
ARG NODE_MAJOR_VERSION="20"
@ -67,7 +67,9 @@ ENV \
# Optimize jemalloc 5.x performance
MALLOC_CONF="narenas:2,background_thread:true,thp:never,dirty_decay_ms:1000,muzzy_decay_ms:0" \
# Enable libvips, should not be changed
MASTODON_USE_LIBVIPS=true
MASTODON_USE_LIBVIPS=true \
# Sidekiq will touch tmp/sidekiq_process_has_started_and_will_begin_processing_jobs to indicate it is ready. This can be used for a readiness check in Kubernetes
MASTODON_SIDEKIQ_READY_FILENAME=sidekiq_process_has_started_and_will_begin_processing_jobs
# Set default shell used for running commands
SHELL ["/bin/bash", "-o", "pipefail", "-o", "errexit", "-c"]

4
Gemfile
View File

@ -88,7 +88,7 @@ gem 'sidekiq-unique-jobs', '~> 7.1'
gem 'simple_form', '~> 5.2'
gem 'simple-navigation', '~> 4.4'
gem 'stoplight', '~> 4.1'
gem 'strong_migrations', '1.8.0'
gem 'strong_migrations'
gem 'tty-prompt', '~> 0.23', require: false
gem 'twitter-text', '~> 3.1.0'
gem 'tzinfo-data', '~> 1.2023'
@ -100,7 +100,7 @@ gem 'json-ld'
gem 'json-ld-preloaded', '~> 3.2'
gem 'rdf-normalize', '~> 0.5'
gem 'opentelemetry-api', '~> 1.2.5'
gem 'opentelemetry-api', '~> 1.3.0'
group :opentelemetry do
gem 'opentelemetry-exporter-otlp', '~> 0.28.0', require: false

83
Gemfile.lock
View File

@ -159,7 +159,7 @@ GEM
case_transform (0.2)
activesupport
cbor (0.5.9.8)
charlock_holmes (0.7.8)
charlock_holmes (0.7.9)
chewy (7.6.0)
activesupport (>= 5.2)
elasticsearch (>= 7.14.0, < 8)
@ -180,7 +180,7 @@ GEM
css_parser (1.17.1)
addressable
csv (3.3.0)
database_cleaner-active_record (2.1.0)
database_cleaner-active_record (2.2.0)
activerecord (>= 5.a)
database_cleaner-core (~> 2.0.0)
database_cleaner-core (2.0.1)
@ -222,16 +222,16 @@ GEM
elasticsearch-transport (7.17.10)
faraday (>= 1, < 3)
multi_json
email_spec (2.2.2)
email_spec (2.3.0)
htmlentities (~> 4.3.3)
launchy (~> 2.1)
launchy (>= 2.1, < 4.0)
mail (~> 2.7)
erubi (1.13.0)
et-orbi (1.2.11)
tzinfo
excon (0.110.0)
fabrication (2.31.0)
faker (3.4.1)
faker (3.4.2)
i18n (>= 1.8.11, < 2)
faraday (1.10.3)
faraday-em_http (~> 1.0)
@ -289,7 +289,7 @@ GEM
ruby-progressbar (~> 1.4)
globalid (1.2.1)
activesupport (>= 6.1)
google-protobuf (3.25.3)
google-protobuf (3.25.4)
googleapis-common-protos-types (1.14.0)
google-protobuf (~> 3.18)
haml (6.3.0)
@ -367,7 +367,7 @@ GEM
json-ld-preloaded (3.3.0)
json-ld (~> 3.3)
rdf (~> 3.3)
json-schema (4.3.0)
json-schema (4.3.1)
addressable (>= 2.8)
jsonapi-renderer (0.2.2)
jwt (2.7.1)
@ -440,7 +440,7 @@ GEM
uri
net-http-persistent (4.0.2)
connection_pool (~> 2.2)
net-imap (0.4.12)
net-imap (0.4.14)
date
net-protocol
net-ldap (0.19.0)
@ -492,10 +492,10 @@ GEM
openssl (3.2.0)
openssl-signature_algorithm (1.3.0)
openssl (> 2.0)
opentelemetry-api (1.2.5)
opentelemetry-api (1.3.0)
opentelemetry-common (0.20.1)
opentelemetry-api (~> 1.0)
opentelemetry-exporter-otlp (0.28.0)
opentelemetry-exporter-otlp (0.28.1)
google-protobuf (>= 3.18)
googleapis-common-protos-types (~> 1.3)
opentelemetry-api (~> 1.1)
@ -512,14 +512,14 @@ GEM
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-rack (~> 0.21)
opentelemetry-instrumentation-action_view (0.7.0)
opentelemetry-instrumentation-action_view (0.7.1)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-active_support (~> 0.1)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-active_job (0.7.2)
opentelemetry-instrumentation-active_job (0.7.3)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-active_model_serializers (0.20.1)
opentelemetry-instrumentation-active_model_serializers (0.20.2)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-active_record (0.7.2)
@ -531,32 +531,32 @@ GEM
opentelemetry-instrumentation-base (0.22.3)
opentelemetry-api (~> 1.0)
opentelemetry-registry (~> 0.1)
opentelemetry-instrumentation-concurrent_ruby (0.21.3)
opentelemetry-instrumentation-concurrent_ruby (0.21.4)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-excon (0.22.3)
opentelemetry-instrumentation-excon (0.22.4)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-faraday (0.24.5)
opentelemetry-instrumentation-faraday (0.24.6)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-http (0.23.3)
opentelemetry-instrumentation-http (0.23.4)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-http_client (0.22.6)
opentelemetry-instrumentation-http_client (0.22.7)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-net_http (0.22.6)
opentelemetry-instrumentation-net_http (0.22.7)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-pg (0.27.3)
opentelemetry-instrumentation-pg (0.27.4)
opentelemetry-api (~> 1.0)
opentelemetry-helpers-sql-obfuscation
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-rack (0.24.5)
opentelemetry-instrumentation-rack (0.24.6)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-rails (0.31.0)
opentelemetry-instrumentation-rails (0.31.1)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-action_mailer (~> 0.1.0)
opentelemetry-instrumentation-action_pack (~> 0.9.0)
@ -565,33 +565,33 @@ GEM
opentelemetry-instrumentation-active_record (~> 0.7.0)
opentelemetry-instrumentation-active_support (~> 0.6.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-redis (0.25.6)
opentelemetry-instrumentation-redis (0.25.7)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-sidekiq (0.25.6)
opentelemetry-instrumentation-sidekiq (0.25.7)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-registry (0.3.1)
opentelemetry-api (~> 1.1)
opentelemetry-sdk (1.4.1)
opentelemetry-sdk (1.5.0)
opentelemetry-api (~> 1.1)
opentelemetry-common (~> 0.20)
opentelemetry-registry (~> 0.2)
opentelemetry-semantic_conventions
opentelemetry-semantic_conventions (1.10.0)
opentelemetry-semantic_conventions (1.10.1)
opentelemetry-api (~> 1.0)
orm_adapter (0.5.0)
ox (2.14.18)
parallel (1.25.1)
parser (3.3.3.0)
parser (3.3.4.0)
ast (~> 2.4.1)
racc
parslet (2.0.0)
pastel (0.8.0)
tty-color (~> 0.5)
pg (1.5.6)
pghero (3.5.0)
activerecord (>= 6)
pghero (3.6.0)
activerecord (>= 6.1)
premailer (1.23.0)
addressable
css_parser (>= 1.12.0)
@ -607,7 +607,7 @@ GEM
railties (>= 7.0.0)
psych (5.1.2)
stringio
public_suffix (6.0.0)
public_suffix (6.0.1)
puma (6.4.2)
nio4r (~> 2.0)
pundit (2.3.2)
@ -696,7 +696,7 @@ GEM
responders (3.1.1)
actionpack (>= 5.2)
railties (>= 5.2)
rexml (3.3.1)
rexml (3.3.2)
strscan
rotp (6.3.0)
rouge (4.2.1)
@ -733,13 +733,13 @@ GEM
rspec-mocks (~> 3.0)
sidekiq (>= 5, < 8)
rspec-support (3.13.1)
rubocop (1.64.1)
rubocop (1.65.0)
json (~> 2.3)
language_server-protocol (>= 3.17.0)
parallel (~> 1.10)
parser (>= 3.3.0.2)
rainbow (>= 2.2.2, < 4.0)
regexp_parser (>= 1.8, < 3.0)
regexp_parser (>= 2.4, < 3.0)
rexml (>= 3.2.5, < 4.0)
rubocop-ast (>= 1.31.1, < 2.0)
ruby-progressbar (~> 1.7)
@ -756,7 +756,7 @@ GEM
rack (>= 1.1)
rubocop (>= 1.33.0, < 2.0)
rubocop-ast (>= 1.31.1, < 2.0)
rubocop-rspec (3.0.2)
rubocop-rspec (3.0.3)
rubocop (~> 1.61)
rubocop-rspec_rails (2.30.0)
rubocop (~> 1.61)
@ -766,8 +766,9 @@ GEM
ruby-saml (1.16.0)
nokogiri (>= 1.13.10)
rexml
ruby-vips (2.2.1)
ruby-vips (2.2.2)
ffi (~> 1.12)
logger
ruby2_keywords (0.0.5)
rubyzip (2.3.2)
rufus-scheduler (3.9.1)
@ -780,7 +781,7 @@ GEM
scenic (1.8.0)
activerecord (>= 4.0.0)
railties (>= 4.0.0)
selenium-webdriver (4.22.0)
selenium-webdriver (4.23.0)
base64 (~> 0.2)
logger (~> 1.4)
rexml (~> 3.2, >= 3.2.5)
@ -820,8 +821,8 @@ GEM
stoplight (4.1.0)
redlock (~> 1.0)
stringio (3.1.1)
strong_migrations (1.8.0)
activerecord (>= 5.2)
strong_migrations (2.0.0)
activerecord (>= 6.1)
strscan (3.1.0)
swd (1.3.0)
activesupport (>= 3)
@ -893,7 +894,7 @@ GEM
railties (>= 5.2)
semantic_range (>= 2.3.0)
webrick (1.8.1)
websocket (1.2.10)
websocket (1.2.11)
websocket-driver (0.7.6)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
@ -982,7 +983,7 @@ DEPENDENCIES
omniauth-rails_csrf_protection (~> 1.0)
omniauth-saml (~> 2.0)
omniauth_openid_connect (~> 0.6.1)
opentelemetry-api (~> 1.2.5)
opentelemetry-api (~> 1.3.0)
opentelemetry-exporter-otlp (~> 0.28.0)
opentelemetry-instrumentation-active_job (~> 0.7.1)
opentelemetry-instrumentation-active_model_serializers (~> 0.20.1)
@ -1045,7 +1046,7 @@ DEPENDENCIES
simplecov-lcov (~> 0.8)
stackprof
stoplight (~> 4.1)
strong_migrations (= 1.8.0)
strong_migrations
test-prof
thor (~> 1.2)
tty-prompt (~> 0.23)

1
app/controllers/admin/instances_controller.rb
View File

@ -13,6 +13,7 @@ module Admin
def show
authorize :instance, :show?
@time_period = (6.days.ago.to_date...Time.now.utc.to_date)
@action_logs = Admin::ActionLogFilter.new(target_domain: @instance.domain).results.limit(5)
end
def destroy

7
app/controllers/api/v1/admin/domain_allows_controller.rb
View File

@ -47,18 +47,13 @@ class Api::V1::Admin::DomainAllowsController < Api::BaseController
private
def set_domain_allows
@domain_allows = filtered_domain_allows.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
@domain_allows = DomainAllow.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
end
def set_domain_allow
@domain_allow = DomainAllow.find(params[:id])
end
def filtered_domain_allows
# TODO: no filtering yet
DomainAllow.all
end
def next_path
api_v1_admin_domain_allows_url(pagination_params(max_id: pagination_max_id)) if records_continue?
end

7
app/controllers/api/v1/admin/domain_blocks_controller.rb
View File

@ -59,18 +59,13 @@ class Api::V1::Admin::DomainBlocksController < Api::BaseController
end
def set_domain_blocks
@domain_blocks = filtered_domain_blocks.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
@domain_blocks = DomainBlock.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
end
def set_domain_block
@domain_block = DomainBlock.find(params[:id])
end
def filtered_domain_blocks
# TODO: no filtering yet
DomainBlock.all
end
def domain_block_params
params.permit(:severity, :reject_media, :reject_reports, :private_comment, :public_comment, :obfuscate)
end

8
app/controllers/api/v1/notifications/requests_controller.rb
View File

@ -28,14 +28,14 @@ class Api::V1::Notifications::RequestsController < Api::BaseController
end
def dismiss
@request.update!(dismissed: true)
@request.destroy!
render_empty
end
private
def load_requests
requests = NotificationRequest.where(account: current_account).where(dismissed: truthy_param?(:dismissed) || false).includes(:last_status, from_account: [:account_stat, :user]).to_a_paginated_by_id(
requests = NotificationRequest.where(account: current_account).includes(:last_status, from_account: [:account_stat, :user]).to_a_paginated_by_id(
limit_param(DEFAULT_ACCOUNTS_LIMIT),
params_slice(:max_id, :since_id, :min_id)
)
@ -68,8 +68,4 @@ class Api::V1::Notifications::RequestsController < Api::BaseController
def pagination_since_id
@requests.first.id
end
def pagination_params(core_params)
params.slice(:dismissed).permit(:dismissed).merge(core_params)
end
end

4
app/controllers/api/v1/polls/votes_controller.rb
View File

@ -8,7 +8,7 @@ class Api::V1::Polls::VotesController < Api::BaseController
before_action :set_poll
def create
VoteService.new.call(current_account, @poll, vote_params[:choices])
VoteService.new.call(current_account, @poll, vote_params)
render json: @poll, serializer: REST::PollSerializer
end
@ -22,6 +22,6 @@ class Api::V1::Polls::VotesController < Api::BaseController
end
def vote_params
params.permit(choices: [])
params.require(:choices)
end
end

2
app/controllers/api/v1/reports_controller.rb
View File

@ -10,7 +10,7 @@ class Api::V1::ReportsController < Api::BaseController
@report = ReportService.new.call(
current_account,
reported_account,
report_params
report_params.merge(application: doorkeeper_token.application)
)
render json: @report, serializer: REST::ReportSerializer

53
app/controllers/api/v2_alpha/notifications_controller.rb
View File

@ -12,10 +12,27 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
with_read_replica do
@notifications = load_notifications
@group_metadata = load_group_metadata
@grouped_notifications = load_grouped_notifications
@relationships = StatusRelationshipsPresenter.new(target_statuses_from_notifications, current_user&.account_id)
@sample_accounts = @grouped_notifications.flat_map(&:sample_accounts)
# Preload associations to avoid N+1s
ActiveRecord::Associations::Preloader.new(records: @sample_accounts, associations: [:account_stat, { user: :role }]).call
end
render json: @notifications.map { |notification| NotificationGroup.from_notification(notification, max_id: @group_metadata.dig(notification.group_key, :max_id)) }, each_serializer: REST::NotificationGroupSerializer, relationships: @relationships, group_metadata: @group_metadata
MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#index rendering') do |span|
statuses = @grouped_notifications.filter_map { |group| group.target_status&.id }
span.add_attributes(
'app.notification_grouping.count' => @grouped_notifications.size,
'app.notification_grouping.sample_account.count' => @sample_accounts.size,
'app.notification_grouping.sample_account.unique_count' => @sample_accounts.pluck(:id).uniq.size,
'app.notification_grouping.status.count' => statuses.size,
'app.notification_grouping.status.unique_count' => statuses.uniq.size
)
render json: @grouped_notifications, each_serializer: REST::NotificationGroupSerializer, relationships: @relationships, group_metadata: @group_metadata
end
end
def show
@ -36,25 +53,35 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
private
def load_notifications
notifications = browserable_account_notifications.includes(from_account: [:account_stat, :user]).to_a_grouped_paginated_by_id(
limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
params_slice(:max_id, :since_id, :min_id)
)
MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_notifications') do
notifications = browserable_account_notifications.includes(from_account: [:account_stat, :user]).to_a_grouped_paginated_by_id(
limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
params_slice(:max_id, :since_id, :min_id)
)
Notification.preload_cache_collection_target_statuses(notifications) do |target_statuses|
preload_collection(target_statuses, Status)
Notification.preload_cache_collection_target_statuses(notifications) do |target_statuses|
preload_collection(target_statuses, Status)
end
end
end
def load_group_metadata
return {} if @notifications.empty?
browserable_account_notifications
.where(group_key: @notifications.filter_map(&:group_key))
.where(id: (@notifications.last.id)..(@notifications.first.id))
.group(:group_key)
.pluck(:group_key, 'min(notifications.id) as min_id', 'max(notifications.id) as max_id', 'max(notifications.created_at) as latest_notification_at')
.to_h { |group_key, min_id, max_id, latest_notification_at| [group_key, { min_id: min_id, max_id: max_id, latest_notification_at: latest_notification_at }] }
MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_group_metadata') do
browserable_account_notifications
.where(group_key: @notifications.filter_map(&:group_key))
.where(id: (@notifications.last.id)..(@notifications.first.id))
.group(:group_key)
.pluck(:group_key, 'min(notifications.id) as min_id', 'max(notifications.id) as max_id', 'max(notifications.created_at) as latest_notification_at')
.to_h { |group_key, min_id, max_id, latest_notification_at| [group_key, { min_id: min_id, max_id: max_id, latest_notification_at: latest_notification_at }] }
end
end
def load_grouped_notifications
MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_grouped_notifications') do
@notifications.map { |notification| NotificationGroup.from_notification(notification, max_id: @group_metadata.dig(notification.group_key, :max_id)) }
end
end
def browserable_account_notifications

5
app/controllers/application_controller.rb
View File

@ -23,7 +23,6 @@ class ApplicationController < ActionController::Base
helper_method :current_theme
helper_method :single_user_mode?
helper_method :use_seamless_external_login?
helper_method :omniauth_only?
helper_method :sso_account_settings
helper_method :limited_federation_mode?
helper_method :body_class_string
@ -140,10 +139,6 @@ class ApplicationController < ActionController::Base
Devise.pam_authentication || Devise.ldap_authentication
end
def omniauth_only?
ENV['OMNIAUTH_ONLY'] == 'true'
end
def sso_account_settings
ENV.fetch('SSO_ACCOUNT_SETTINGS', nil)
end

12
app/helpers/theme_helper.rb
View File

@ -5,8 +5,10 @@ module ThemeHelper
flavour, theme = flavour_and_skin
if theme == 'system'
stylesheet_pack_tag("skins/#{flavour}/mastodon-light", media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') +
stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
''.html_safe.tap do |tags|
tags << stylesheet_pack_tag("skins/#{flavour}/mastodon-light", media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
tags << stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
end
else
stylesheet_pack_tag "skins/#{flavour}/#{theme}", media: 'all', crossorigin: 'anonymous'
end
@ -16,8 +18,10 @@ module ThemeHelper
_, theme = flavour_and_skin
if theme == 'system'
tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:dark], media: '(prefers-color-scheme: dark)') +
tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
''.html_safe.tap do |tags|
tags << tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:dark], media: '(prefers-color-scheme: dark)')
tags << tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
end
else
tag.meta name: 'theme-color', content: theme_color_for(theme)
end

4
app/javascript/entrypoints/public.tsx
View File

@ -316,8 +316,8 @@ function loaded() {
const message =
statusEl.dataset.spoiler === 'expanded'
? localeData['status.show_less'] ?? 'Show less'
: localeData['status.show_more'] ?? 'Show more';
? (localeData['status.show_less'] ?? 'Show less')
: (localeData['status.show_more'] ?? 'Show more');
spoilerLink.textContent = new IntlMessageFormat(
message,
locale,

12
app/javascript/flavours/glitch/actions/accounts.js
View File

@ -1,3 +1,5 @@
import { browserHistory } from 'flavours/glitch/components/router';
import api, { getLinks } from '../api';
import {
@ -722,6 +724,16 @@ export const updateAccount = ({ displayName, note, avatar, header, discoverable,
});
};
export const navigateToProfile = (accountId) => {
return (_dispatch, getState) => {
const acct = getState().accounts.getIn([accountId, 'acct']);
if (acct) {
browserHistory.push(`/@${acct}`);
}
};
};
export function fetchPinnedAccountsSuggestions(q) {
return (dispatch) => {
dispatch(fetchPinnedAccountsSuggestionsRequest());

3
app/javascript/flavours/glitch/actions/app.ts
View File

@ -2,6 +2,9 @@ import { createAction } from '@reduxjs/toolkit';
import type { LayoutType } from '../is_mobile';
export const focusApp = createAction('APP_FOCUS');
export const unfocusApp = createAction('APP_UNFOCUS');
interface ChangeLayoutPayload {
layout: LayoutType;
}

48
app/javascript/flavours/glitch/actions/compose.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
import { throttle } from 'lodash';
import api from 'flavours/glitch/api';
import { browserHistory } from 'flavours/glitch/components/router';
import { search as emojiSearch } from 'flavours/glitch/features/emoji/emoji_mart_search_light';
import { tagHistory } from 'flavours/glitch/settings';
import { recoverHashtags } from 'flavours/glitch/utils/hashtag';
@ -94,9 +95,9 @@ const messages = defineMessages({
saved: { id: 'compose.saved.body', defaultMessage: 'Post saved.' },
});
export const ensureComposeIsVisible = (getState, routerHistory) => {
export const ensureComposeIsVisible = (getState) => {
if (!getState().getIn(['compose', 'mounted'])) {
routerHistory.push('/publish');
browserHistory.push('/publish');
}
};
@ -117,7 +118,7 @@ export function changeCompose(text) {
};
}
export function replyCompose(status, routerHistory) {
export function replyCompose(status) {
return (dispatch, getState) => {
const prependCWRe = getState().getIn(['local_settings', 'prepend_cw_re']);
dispatch({
@ -126,7 +127,19 @@ export function replyCompose(status, routerHistory) {
prependCWRe: prependCWRe,
});
ensureComposeIsVisible(getState, routerHistory);
ensureComposeIsVisible(getState);
};
}
export function replyComposeById(statusId) {
return (dispatch, getState) => {
const state = getState();
const status = state.statuses.get(statusId);
if (status) {
const account = state.accounts.get(status.get('account'));
dispatch(replyCompose(status.set('account', account)));
}
};
}
@ -142,38 +155,44 @@ export function resetCompose() {
};
}
export const focusCompose = (routerHistory, defaultText) => (dispatch, getState) => {
export const focusCompose = (defaultText) => (dispatch, getState) => {
dispatch({
type: COMPOSE_FOCUS,
defaultText,
});
ensureComposeIsVisible(getState, routerHistory);
ensureComposeIsVisible(getState);
};
export function mentionCompose(account, routerHistory) {
export function mentionCompose(account) {
return (dispatch, getState) => {
dispatch({
type: COMPOSE_MENTION,
account: account,
});
ensureComposeIsVisible(getState, routerHistory);
ensureComposeIsVisible(getState);
};
}
export function directCompose(account, routerHistory) {
export function mentionComposeById(accountId) {
return (dispatch, getState) => {
dispatch(mentionCompose(getState().accounts.get(accountId)));
};
}
export function directCompose(account) {
return (dispatch, getState) => {
dispatch({
type: COMPOSE_DIRECT,
account: account,
});
ensureComposeIsVisible(getState, routerHistory);
ensureComposeIsVisible(getState);
};
}
export function submitCompose(routerHistory, overridePrivacy = null) {
export function submitCompose(overridePrivacy = null) {
return function (dispatch, getState) {
let status = getState().getIn(['compose', 'text'], '');
const media = getState().getIn(['compose', 'media_attachments']);
@ -230,11 +249,10 @@ export function submitCompose(routerHistory, overridePrivacy = null) {
'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
},
}).then(function (response) {
if (routerHistory
&& (routerHistory.location.pathname === '/publish' || routerHistory.location.pathname === '/statuses/new')
if ((browserHistory.location.pathname === '/publish' || browserHistory.location.pathname === '/statuses/new')
&& window.history.state
&& !getState().getIn(['compose', 'advanced_options', 'threaded_mode'])) {
routerHistory.goBack();
browserHistory.goBack();
}
dispatch(insertIntoTagHistory(response.data.tags, status));
@ -272,7 +290,7 @@ export function submitCompose(routerHistory, overridePrivacy = null) {
message: statusId === null ? messages.published : messages.saved,
action: messages.open,
dismissAfter: 10000,
onClick: () => routerHistory.push(`/@${response.data.account.username}/${response.data.id}`),
onClick: () => browserHistory.push(`/@${response.data.account.username}/${response.data.id}`),
}));
}
}).catch(function (error) {

118
app/javascript/flavours/glitch/actions/interactions.js
View File

@ -1,7 +1,11 @@
import { boostModal, favouriteModal } from 'flavours/glitch/initial_state';
import api, { getLinks } from '../api';
import { fetchRelationships } from './accounts';
import { importFetchedAccounts, importFetchedStatus } from './importer';
import { unreblog, reblog } from './interactions_typed';
import { openModal } from './modal';
export const REBLOGS_EXPAND_REQUEST = 'REBLOGS_EXPAND_REQUEST';
export const REBLOGS_EXPAND_SUCCESS = 'REBLOGS_EXPAND_SUCCESS';
@ -443,74 +447,60 @@ export function unpinFail(status, error) {
};
}
export const addReaction = (statusId, name, url) => (dispatch, getState) => {
const status = getState().get('statuses').get(statusId);
let alreadyAdded = false;
if (status) {
const reaction = status.get('reactions').find(x => x.get('name') === name);
if (reaction && reaction.get('me')) {
alreadyAdded = true;
function toggleReblogWithoutConfirmation(status, privacy) {
return (dispatch) => {
if (status.get('reblogged')) {
dispatch(unreblog({ statusId: status.get('id') }));
} else {
dispatch(reblog({ statusId: status.get('id'), privacy }));
}
}
if (!alreadyAdded) {
dispatch(addReactionRequest(statusId, name, url));
}
};
}
// encodeURIComponent is required for the Keycap Number Sign emoji, see:
// <https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932>
api(getState).post(`/api/v1/statuses/${statusId}/react/${encodeURIComponent(name)}`).then(() => {
dispatch(addReactionSuccess(statusId, name));
}).catch(err => {
if (!alreadyAdded) {
dispatch(addReactionFail(statusId, name, err));
export function toggleReblog(statusId, skipModal = false) {
return (dispatch, getState) => {
const state = getState();
let status = state.statuses.get(statusId);
if (!status)
return;
// The reblog modal expects a pre-filled account in status
// TODO: fix this by having the reblog modal get a statusId and do the work itself
status = status.set('account', state.accounts.get(status.get('account')));
const missing_description_setting = state.getIn(['local_settings', 'confirm_boost_missing_media_description']);
const missing_description = status.get('media_attachments').some(item => !item.get('description'));
if (missing_description_setting && missing_description && !status.get('reblogged')) {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)), missingMediaDescription: true } }));
} else if (boostModal && !skipModal) {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)) } }));
} else {
dispatch(toggleReblogWithoutConfirmation(status));
}
});
};
};
}
export const addReactionRequest = (statusId, name, url) => ({
type: REACTION_ADD_REQUEST,
id: statusId,
name,
url,
});
export function toggleFavourite(statusId, skipModal = false) {
return (dispatch, getState) => {
const state = getState();
let status = state.statuses.get(statusId);
export const addReactionSuccess = (statusId, name) => ({
type: REACTION_ADD_SUCCESS,
id: statusId,
name,
});
if (!status)
return;
export const addReactionFail = (statusId, name, error) => ({
type: REACTION_ADD_FAIL,
id: statusId,
name,
error,
});
// The favourite modal expects a pre-filled account in status
// TODO: fix this by having the reblog modal get a statusId and do the work itself
status = status.set('account', state.accounts.get(status.get('account')));
export const removeReaction = (statusId, name) => (dispatch, getState) => {
dispatch(removeReactionRequest(statusId, name));
api(getState).post(`/api/v1/statuses/${statusId}/unreact/${encodeURIComponent(name)}`).then(() => {
dispatch(removeReactionSuccess(statusId, name));
}).catch(err => {
dispatch(removeReactionFail(statusId, name, err));
});
};
export const removeReactionRequest = (statusId, name) => ({
type: REACTION_REMOVE_REQUEST,
id: statusId,
name,
});
export const removeReactionSuccess = (statusId, name) => ({
type: REACTION_REMOVE_SUCCESS,
id: statusId,
name,
});
export const removeReactionFail = (statusId, name) => ({
type: REACTION_REMOVE_FAIL,
id: statusId,
name,
});
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
if (favouriteModal && !skipModal) {
dispatch(openModal({ modalType: 'FAVOURITE', modalProps: { status, onFavourite: (status) => dispatch(favourite(status)) } }));
} else {
dispatch(favourite(status));
}
}
};
}

14
app/javascript/flavours/glitch/actions/markers.ts
View File

@ -75,9 +75,17 @@ interface MarkerParam {
}
function getLastNotificationId(state: RootState): string | undefined {
// @ts-expect-error state.notifications is not yet typed
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
return state.getIn(['notifications', 'lastReadId']);
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
const enableBeta = state.settings.getIn(
['notifications', 'groupingBeta'],
false,
) as boolean;
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return enableBeta
? state.notificationGroups.lastReadId
: // @ts-expect-error state.notifications is not yet typed
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
state.getIn(['notifications', 'lastReadId']);
}
const buildPostMarkersParams = (state: RootState) => {

144
app/javascript/flavours/glitch/actions/notification_groups.ts Normal file
View File

@ -0,0 +1,144 @@
import { createAction } from '@reduxjs/toolkit';
import {
apiClearNotifications,
apiFetchNotifications,
} from 'flavours/glitch/api/notifications';
import type { ApiAccountJSON } from 'flavours/glitch/api_types/accounts';
import type {
ApiNotificationGroupJSON,
ApiNotificationJSON,
} from 'flavours/glitch/api_types/notifications';
import { allNotificationTypes } from 'flavours/glitch/api_types/notifications';
import type { ApiStatusJSON } from 'flavours/glitch/api_types/statuses';
import type { NotificationGap } from 'flavours/glitch/reducers/notification_groups';
import {
selectSettingsNotificationsExcludedTypes,
selectSettingsNotificationsQuickFilterActive,
} from 'flavours/glitch/selectors/settings';
import type { AppDispatch } from 'flavours/glitch/store';
import {
createAppAsyncThunk,
createDataLoadingThunk,
} from 'flavours/glitch/store/typed_functions';
import { importFetchedAccounts, importFetchedStatuses } from './importer';
import { NOTIFICATIONS_FILTER_SET } from './notifications';
import { saveSettings } from './settings';
function excludeAllTypesExcept(filter: string) {
return allNotificationTypes.filter((item) => item !== filter);
}
function dispatchAssociatedRecords(
dispatch: AppDispatch,
notifications: ApiNotificationGroupJSON[] | ApiNotificationJSON[],
) {
const fetchedAccounts: ApiAccountJSON[] = [];
const fetchedStatuses: ApiStatusJSON[] = [];
notifications.forEach((notification) => {
if ('sample_accounts' in notification) {
fetchedAccounts.push(...notification.sample_accounts);
}
if (notification.type === 'admin.report') {
fetchedAccounts.push(notification.report.target_account);
}
if (notification.type === 'moderation_warning') {
fetchedAccounts.push(notification.moderation_warning.target_account);
}
if ('status' in notification) {
fetchedStatuses.push(notification.status);
}
});
if (fetchedAccounts.length > 0)
dispatch(importFetchedAccounts(fetchedAccounts));
if (fetchedStatuses.length > 0)
dispatch(importFetchedStatuses(fetchedStatuses));
}
export const fetchNotifications = createDataLoadingThunk(
'notificationGroups/fetch',
async (_params, { getState }) => {
const activeFilter =
selectSettingsNotificationsQuickFilterActive(getState());
return apiFetchNotifications({
exclude_types:
activeFilter === 'all'
? selectSettingsNotificationsExcludedTypes(getState())
: excludeAllTypesExcept(activeFilter),
});
},
({ notifications }, { dispatch }) => {
dispatchAssociatedRecords(dispatch, notifications);
const payload: (ApiNotificationGroupJSON | NotificationGap)[] =
notifications;
// TODO: might be worth not using gaps for that…
// if (nextLink) payload.push({ type: 'gap', loadUrl: nextLink.uri });
if (notifications.length > 1)
payload.push({ type: 'gap', maxId: notifications.at(-1)?.page_min_id });
return payload;
// dispatch(submitMarkers());
},
);
export const fetchNotificationsGap = createDataLoadingThunk(
'notificationGroups/fetchGap',
async (params: { gap: NotificationGap }) =>
apiFetchNotifications({ max_id: params.gap.maxId }),
({ notifications }, { dispatch }) => {
dispatchAssociatedRecords(dispatch, notifications);
return { notifications };
},
);
export const processNewNotificationForGroups = createAppAsyncThunk(
'notificationGroups/processNew',
(notification: ApiNotificationJSON, { dispatch }) => {
dispatchAssociatedRecords(dispatch, [notification]);
return notification;
},
);
export const loadPending = createAction('notificationGroups/loadPending');
export const updateScrollPosition = createAction<{ top: boolean }>(
'notificationGroups/updateScrollPosition',
);
export const setNotificationsFilter = createAppAsyncThunk(
'notifications/filter/set',
({ filterType }: { filterType: string }, { dispatch }) => {
dispatch({
type: NOTIFICATIONS_FILTER_SET,
path: ['notifications', 'quickFilter', 'active'],
value: filterType,
});
// dispatch(expandNotifications({ forceLoad: true }));
void dispatch(fetchNotifications());
dispatch(saveSettings());
},
);
export const clearNotifications = createDataLoadingThunk(
'notifications/clear',
() => apiClearNotifications(),
);
export const markNotificationsAsRead = createAction(
'notificationGroups/markAsRead',
);
export const mountNotifications = createAction('notificationGroups/mount');
export const unmountNotifications = createAction('notificationGroups/unmount');

13
app/javascript/flavours/glitch/actions/notifications.js
View File

@ -43,7 +43,6 @@ export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';
@ -187,7 +186,7 @@ const noOp = () => {};
let expandNotificationsController = new AbortController();
export function expandNotifications({ maxId, forceLoad } = {}, done = noOp) {
export function expandNotifications({ maxId, forceLoad = false } = {}, done = noOp) {
return (dispatch, getState) => {
const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
const notifications = getState().get('notifications');
@ -270,16 +269,6 @@ export function expandNotificationsFail(error, isLoadingMore) {
};
}
export function clearNotifications() {
return (dispatch) => {
dispatch({
type: NOTIFICATIONS_CLEAR,
});
api().post('/api/v1/notifications/clear');
};
}
export function scrollTopNotifications(top) {
return {
type: NOTIFICATIONS_SCROLL_TOP,

18
app/javascript/flavours/glitch/actions/notifications_migration.tsx Normal file
View File

@ -0,0 +1,18 @@
import { createAppAsyncThunk } from 'flavours/glitch/store';
import { fetchNotifications } from './notification_groups';
import { expandNotifications } from './notifications';
export const initializeNotifications = createAppAsyncThunk(
'notifications/initialize',
(_, { dispatch, getState }) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
const enableBeta = getState().settings.getIn(
['notifications', 'groupingBeta'],
false,
) as boolean;
if (enableBeta) void dispatch(fetchNotifications());
else dispatch(expandNotifications());
},
);

9
app/javascript/flavours/glitch/actions/notifications_typed.ts
View File

@ -1,11 +1,6 @@
import { createAction } from '@reduxjs/toolkit';
import type { ApiAccountJSON } from '../api_types/accounts';
// To be replaced once ApiNotificationJSON type exists
interface FakeApiNotificationJSON {
type: string;
account: ApiAccountJSON;
}
import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';
export const notificationsUpdate = createAction(
'notifications/update',
@ -13,7 +8,7 @@ export const notificationsUpdate = createAction(
playSound,
...args
}: {
notification: FakeApiNotificationJSON;
notification: ApiNotificationJSON;
usePendingItems: boolean;
playSound: boolean;
}) => ({

37
app/javascript/flavours/glitch/actions/statuses.js
View File

@ -1,3 +1,5 @@
import { browserHistory } from 'flavours/glitch/components/router';
import api from '../api';
import { ensureComposeIsVisible, setComposeToStatus } from './compose';
@ -94,7 +96,7 @@ export function redraft(status, raw_text, content_type) {
};
}
export const editStatus = (id, routerHistory) => (dispatch, getState) => {
export const editStatus = (id) => (dispatch, getState) => {
let status = getState().getIn(['statuses', id]);
if (status.get('poll')) {
@ -105,7 +107,7 @@ export const editStatus = (id, routerHistory) => (dispatch, getState) => {
api().get(`/api/v1/statuses/${id}/source`).then(response => {
dispatch(fetchStatusSourceSuccess());
ensureComposeIsVisible(getState, routerHistory);
ensureComposeIsVisible(getState);
dispatch(setComposeToStatus(status, response.data.text, response.data.spoiler_text, response.data.content_type));
}).catch(error => {
dispatch(fetchStatusSourceFail(error));
@ -125,7 +127,7 @@ export const fetchStatusSourceFail = error => ({
error,
});
export function deleteStatus(id, routerHistory, withRedraft = false) {
export function deleteStatus(id, withRedraft = false) {
return (dispatch, getState) => {
let status = getState().getIn(['statuses', id]);
@ -142,7 +144,7 @@ export function deleteStatus(id, routerHistory, withRedraft = false) {
if (withRedraft) {
dispatch(redraft(status, response.data.text, response.data.content_type));
ensureComposeIsVisible(getState, routerHistory);
ensureComposeIsVisible(getState);
}
}).catch(error => {
dispatch(deleteStatusFail(id, error));
@ -309,6 +311,21 @@ export function revealStatus(ids) {
};
}
export function toggleStatusSpoilers(statusId) {
return (dispatch, getState) => {
const status = getState().statuses.get(statusId);
if (!status)
return;
if (status.get('hidden')) {
dispatch(revealStatus(statusId));
} else {
dispatch(hideStatus(statusId));
}
};
}
export function toggleStatusCollapse(id, isCollapsed) {
return {
type: STATUS_COLLAPSE,
@ -349,3 +366,15 @@ export const undoStatusTranslation = (id, pollId) => ({
id,
pollId,
});
export const navigateToStatus = (statusId) => {
return (_dispatch, getState) => {
const state = getState();
const accountId = state.statuses.getIn([statusId, 'account']);
const acct = state.accounts.getIn([accountId, 'acct']);
if (acct) {
browserHistory.push(`/@${acct}/${statusId}`);
}
};
};

11
app/javascript/flavours/glitch/actions/streaming.js
View File

@ -10,6 +10,7 @@ import {
deleteAnnouncement,
} from './announcements';
import { updateConversations } from './conversations';
import { processNewNotificationForGroups } from './notification_groups';
import { updateNotifications, expandNotifications } from './notifications';
import { updateStatus } from './statuses';
import {
@ -98,10 +99,16 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
case 'delete':
dispatch(deleteFromTimelines(data.payload));
break;
case 'notification':
case 'notification': {
// @ts-expect-error
dispatch(updateNotifications(JSON.parse(data.payload), messages, locale));
const notificationJSON = JSON.parse(data.payload);
dispatch(updateNotifications(notificationJSON, messages, locale));
// TODO: remove this once the groups feature replaces the previous one
if(getState().notificationGroups.groups.length > 0) {
dispatch(processNewNotificationForGroups(notificationJSON));
}
break;
}
case 'conversation':
// @ts-expect-error
dispatch(updateConversations(JSON.parse(data.payload)));

18
app/javascript/flavours/glitch/api/notifications.ts Normal file
View File

@ -0,0 +1,18 @@
import api, { apiRequest, getLinks } from 'flavours/glitch/api';
import type { ApiNotificationGroupJSON } from 'flavours/glitch/api_types/notifications';
export const apiFetchNotifications = async (params?: {
exclude_types?: string[];
max_id?: string;
}) => {
const response = await api().request<ApiNotificationGroupJSON[]>({
method: 'GET',
url: '/api/v2_alpha/notifications',
params,
});
return { notifications: response.data, links: getLinks(response) };
};
export const apiClearNotifications = () =>
apiRequest<undefined>('POST', 'v1/notifications/clear');

145
app/javascript/flavours/glitch/api_types/notifications.ts Normal file
View File

@ -0,0 +1,145 @@
// See app/serializers/rest/notification_group_serializer.rb
import type { AccountWarningAction } from 'flavours/glitch/models/notification_group';
import type { ApiAccountJSON } from './accounts';
import type { ApiReportJSON } from './reports';
import type { ApiStatusJSON } from './statuses';
// See app/model/notification.rb
export const allNotificationTypes = [
'follow',
'follow_request',
'favourite',
'reblog',
'mention',
'poll',
'status',
'update',
'admin.sign_up',
'admin.report',
'moderation_warning',
'severed_relationships',
];
export type NotificationWithStatusType =
| 'favourite'
| 'reblog'
| 'status'
| 'mention'
| 'poll'
| 'update';
export type NotificationType =
| NotificationWithStatusType
| 'follow'
| 'follow_request'
| 'moderation_warning'
| 'severed_relationships'
| 'admin.sign_up'
| 'admin.report';
export interface BaseNotificationJSON {
id: string;
type: NotificationType;
created_at: string;
group_key: string;
account: ApiAccountJSON;
}
export interface BaseNotificationGroupJSON {
group_key: string;
notifications_count: number;
type: NotificationType;
sample_accounts: ApiAccountJSON[];
latest_page_notification_at: string; // FIXME: This will only be present if the notification group is returned in a paginated list, not requested directly
most_recent_notification_id: string;
page_min_id?: string;
page_max_id?: string;
}
interface NotificationGroupWithStatusJSON extends BaseNotificationGroupJSON {
type: NotificationWithStatusType;
status: ApiStatusJSON;
}
interface NotificationWithStatusJSON extends BaseNotificationJSON {
type: NotificationWithStatusType;
status: ApiStatusJSON;
}
interface ReportNotificationGroupJSON extends BaseNotificationGroupJSON {
type: 'admin.report';
report: ApiReportJSON;
}
interface ReportNotificationJSON extends BaseNotificationJSON {
type: 'admin.report';
report: ApiReportJSON;
}
type SimpleNotificationTypes = 'follow' | 'follow_request' | 'admin.sign_up';
interface SimpleNotificationGroupJSON extends BaseNotificationGroupJSON {
type: SimpleNotificationTypes;
}
interface SimpleNotificationJSON extends BaseNotificationJSON {
type: SimpleNotificationTypes;
}
export interface ApiAccountWarningJSON {
id: string;
action: AccountWarningAction;
text: string;
status_ids: string[];
created_at: string;
target_account: ApiAccountJSON;
appeal: unknown;
}
interface ModerationWarningNotificationGroupJSON
extends BaseNotificationGroupJSON {
type: 'moderation_warning';
moderation_warning: ApiAccountWarningJSON;
}
interface ModerationWarningNotificationJSON extends BaseNotificationJSON {
type: 'moderation_warning';
moderation_warning: ApiAccountWarningJSON;
}
export interface ApiAccountRelationshipSeveranceEventJSON {
id: string;
type: 'account_suspension' | 'domain_block' | 'user_domain_block';
purged: boolean;
target_name: string;
followers_count: number;
following_count: number;
created_at: string;
}
interface AccountRelationshipSeveranceNotificationGroupJSON
extends BaseNotificationGroupJSON {
type: 'severed_relationships';
event: ApiAccountRelationshipSeveranceEventJSON;
}
interface AccountRelationshipSeveranceNotificationJSON
extends BaseNotificationJSON {
type: 'severed_relationships';
event: ApiAccountRelationshipSeveranceEventJSON;
}
export type ApiNotificationJSON =
| SimpleNotificationJSON
| ReportNotificationJSON
| AccountRelationshipSeveranceNotificationJSON
| NotificationWithStatusJSON
| ModerationWarningNotificationJSON;
export type ApiNotificationGroupJSON =
| SimpleNotificationGroupJSON
| ReportNotificationGroupJSON
| AccountRelationshipSeveranceNotificationGroupJSON
| NotificationGroupWithStatusJSON
| ModerationWarningNotificationGroupJSON;

16
app/javascript/flavours/glitch/api_types/reports.ts Normal file
View File

@ -0,0 +1,16 @@
import type { ApiAccountJSON } from './accounts';
export type ReportCategory = 'other' | 'spam' | 'legal' | 'violation';
export interface ApiReportJSON {
id: string;
action_taken: unknown;
action_taken_at: unknown;
category: ReportCategory;
comment: string;
forwarded: boolean;
created_at: string;
status_ids: string[];
rule_ids: string[];
target_account: ApiAccountJSON;
}

12
app/javascript/flavours/glitch/components/load_gap.tsx
View File

@ -9,18 +9,18 @@ const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
});
interface Props {
interface Props<T> {
disabled: boolean;
maxId: string;
onClick: (maxId: string) => void;
param: T;
onClick: (params: T) => void;
}
export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
const intl = useIntl();
const handleClick = useCallback(() => {
onClick(maxId);
}, [maxId, onClick]);
onClick(param);
}, [param, onClick]);
return (
<button

2
app/javascript/flavours/glitch/components/router.tsx
View File

@ -22,7 +22,7 @@ type LocationState = MastodonLocationState | null | undefined;
type HistoryPath = Path | LocationDescriptor<LocationState>;
const browserHistory = createBrowserHistory<LocationState>();
export const browserHistory = createBrowserHistory<LocationState>();
const originalPush = browserHistory.push.bind(browserHistory);
const originalReplace = browserHistory.replace.bind(browserHistory);

32
app/javascript/flavours/glitch/components/status.jsx
View File

@ -121,6 +121,8 @@ class Status extends ImmutablePureComponent {
cacheMediaWidth: PropTypes.func,
cachedMediaWidth: PropTypes.number,
scrollKey: PropTypes.string,
skipPrepend: PropTypes.bool,
avatarSize: PropTypes.number,
deployPictureInPicture: PropTypes.func,
settings: ImmutablePropTypes.map.isRequired,
pictureInPicture: ImmutablePropTypes.contains({
@ -446,7 +448,7 @@ class Status extends ImmutablePureComponent {
handleHotkeyReply = e => {
e.preventDefault();
this.props.onReply(this.props.status, this.props.history);
this.props.onReply(this.props.status);
};
handleHotkeyFavourite = (e) => {
@ -463,7 +465,7 @@ class Status extends ImmutablePureComponent {
handleHotkeyMention = e => {
e.preventDefault();
this.props.onMention(this.props.status.get('account'), this.props.history);
this.props.onMention(this.props.status.get('account'));
};
handleHotkeyOpen = () => {
@ -524,12 +526,14 @@ class Status extends ImmutablePureComponent {
}
render () {
const { intl, hidden, featured, unfocusable, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
const {
parseClick,
setCollapsed,
} = this;
const {
intl,
status,
account,
settings,
@ -539,13 +543,6 @@ class Status extends ImmutablePureComponent {
onOpenVideo,
onOpenMedia,
notification,
hidden,
unread,
featured,
pictureInPicture,
previousId,
nextInReplyToId,
rootId,
history,
identity,
...other
@ -595,8 +592,8 @@ class Status extends ImmutablePureComponent {
if (hidden) {
return (
<HotKeys handlers={handlers}>
<div ref={this.handleRef} className='status focusable' tabIndex={0}>
<HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
<div ref={this.handleRef} className='status focusable' tabIndex={unfocusable ? null : 0}>
<span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
<span>{status.get('content')}</span>
</div>
@ -616,8 +613,8 @@ class Status extends ImmutablePureComponent {
};
return (
<HotKeys handlers={minHandlers}>
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
<HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
{' '}
<button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
@ -797,17 +794,17 @@ class Status extends ImmutablePureComponent {
contentMedia.push(hashtagBar);
return (
<HotKeys handlers={handlers}>
<HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
<div
className={classNames('status__wrapper', 'focusable', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, collapsed: isCollapsed })}
{...selectorAttribs}
tabIndex={0}
tabIndex={unfocusable ? null : 0}
data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
ref={this.handleRef}
data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}
>
{prepend}
{!skipPrepend && prepend}
<div
className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background })}
@ -823,6 +820,7 @@ class Status extends ImmutablePureComponent {
friend={account}
collapsed={isCollapsed}
parseClick={parseClick}
avatarSize={avatarSize}
/>
<StatusIcons
status={status}

12
app/javascript/flavours/glitch/components/status_action_bar.jsx
View File

@ -112,7 +112,7 @@ class StatusActionBar extends ImmutablePureComponent {
const { signedIn } = this.props.identity;
if (signedIn) {
this.props.onReply(this.props.status, this.props.history);
this.props.onReply(this.props.status);
} else {
this.props.onInteractionModal('reply', this.props.status);
}
@ -153,15 +153,15 @@ class StatusActionBar extends ImmutablePureComponent {
};
handleDeleteClick = () => {
this.props.onDelete(this.props.status, this.props.history);
this.props.onDelete(this.props.status);
};
handleRedraftClick = () => {
this.props.onDelete(this.props.status, this.props.history, true);
this.props.onDelete(this.props.status, true);
};
handleEditClick = () => {
this.props.onEdit(this.props.status, this.props.history);
this.props.onEdit(this.props.status);
};
handlePinClick = () => {
@ -169,11 +169,11 @@ class StatusActionBar extends ImmutablePureComponent {
};
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.props.history);
this.props.onMention(this.props.status.get('account'));
};
handleDirectClick = () => {
this.props.onDirect(this.props.status.get('account'), this.props.history);
this.props.onDirect(this.props.status.get('account'));
};
handleMuteClick = () => {

2
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -181,7 +181,7 @@ class StatusContent extends PureComponent {
if (mention) {
link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
link.removeAttribute('title');
link.setAttribute('title', `@${mention.get('acct')}`);
link.setAttribute('data-hover-card-account', mention.get('id'));
if (rewriteMentions !== 'no') {
while (link.firstChild) link.removeChild(link.firstChild);

5
app/javascript/flavours/glitch/components/status_header.jsx
View File

@ -14,6 +14,7 @@ export default class StatusHeader extends PureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
friend: ImmutablePropTypes.map,
avatarSize: PropTypes.number,
parseClick: PropTypes.func.isRequired,
};
@ -33,13 +34,14 @@ export default class StatusHeader extends PureComponent {
const {
status,
friend,
avatarSize,
} = this.props;
const account = status.get('account');
let statusAvatar;
if (friend === undefined || friend === null) {
statusAvatar = <Avatar account={account} size={46} />;
statusAvatar = <Avatar account={account} size={avatarSize} />;
} else {
statusAvatar = <AvatarOverlay account={account} friend={friend} />;
}
@ -51,6 +53,7 @@ export default class StatusHeader extends PureComponent {
target='_blank'
onClick={this.handleAccountClick}
rel='noopener noreferrer'
title={status.getIn(['account', 'acct'])}
data-hover-card-account={status.getIn(['account', 'id'])}
>
<div className='status__avatar'>

2
app/javascript/flavours/glitch/components/status_list.jsx
View File

@ -108,7 +108,7 @@ export default class StatusList extends ImmutablePureComponent {
<LoadGap
key={'gap:' + statusIds.get(index + 1)}
disabled={isLoading}
maxId={index > 0 ? statusIds.get(index - 1) : null}
param={index > 0 ? statusIds.get(index - 1) : null}
onClick={onLoadMore}
/>
);

2
app/javascript/flavours/glitch/components/status_prepend.jsx
View File

@ -108,7 +108,7 @@ export default class StatusPrepend extends PureComponent {
return (
<FormattedMessage
id='notification.poll'
defaultMessage='A poll you have voted in has ended'
defaultMessage='A poll you voted in has ended'
/>
);
}

82
app/javascript/flavours/glitch/containers/status_container.js
View File

@ -12,11 +12,9 @@ import {
initAddFilter,
} from 'flavours/glitch/actions/filters';
import {
reblog,
favourite,
toggleReblog,
toggleFavourite,
bookmark,
unreblog,
unfavourite,
unbookmark,
pin,
unpin,
@ -32,14 +30,13 @@ import {
muteStatus,
unmuteStatus,
deleteStatus,
hideStatus,
revealStatus,
toggleStatusSpoilers,
editStatus,
translateStatus,
undoStatusTranslation,
} from 'flavours/glitch/actions/statuses';
import Status from 'flavours/glitch/components/status';
import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
import { deleteModal } from 'flavours/glitch/initial_state';
import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
import { showAlertForError } from '../actions/alerts';
@ -95,7 +92,7 @@ const makeMapStateToProps = () => {
const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
onReply (status, router) {
onReply (status) {
dispatch((_, getState) => {
let state = getState();
@ -106,34 +103,17 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm),
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
onConfirm: () => dispatch(replyCompose(status, router)),
onConfirm: () => dispatch(replyCompose(status)),
},
}));
} else {
dispatch(replyCompose(status, router));
dispatch(replyCompose(status));
}
});
},
onModalReblog (status, privacy) {
if (status.get('reblogged')) {
dispatch(unreblog({ statusId: status.get('id') }));
} else {
dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
}
},
onReblog (status, e) {
dispatch((_, getState) => {
let state = getState();
if (state.getIn(['local_settings', 'confirm_boost_missing_media_description']) && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog, missingMediaDescription: true } }));
} else if (e.shiftKey || !boostModal) {
this.onModalReblog(status);
} else {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
}
});
dispatch(toggleReblog(status.get('id'), e.shiftKey));
},
onBookmark (status) {
@ -144,26 +124,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
}
},
onModalFavourite (status) {
dispatch(favourite(status));
},
onFavourite (status, e) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
if (e.shiftKey || !favouriteModal) {
this.onModalFavourite(status);
} else {
dispatch(openModal({
modalType: 'FAVOURITE',
modalProps: {
status,
onFavourite: this.onModalFavourite,
},
}));
}
}
dispatch(toggleFavourite(status.get('id'), e.shiftKey));
},
onPin (status) {
@ -192,22 +154,22 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
}));
},
onDelete (status, history, withRedraft = false) {
onDelete (status, withRedraft = false) {
if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft));
dispatch(deleteStatus(status.get('id'), withRedraft));
} else {
dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
},
}));
}
},
onEdit (status, history) {
onEdit (status) {
dispatch((_, getState) => {
let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) {
@ -216,11 +178,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
modalProps: {
message: intl.formatMessage(messages.editMessage),
confirm: intl.formatMessage(messages.editConfirm),
onConfirm: () => dispatch(editStatus(status.get('id'), history)),
onConfirm: () => dispatch(editStatus(status.get('id'))),
},
}));
} else {
dispatch(editStatus(status.get('id'), history));
dispatch(editStatus(status.get('id')));
}
});
},
@ -233,12 +195,12 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
}
},
onDirect (account, router) {
dispatch(directCompose(account, router));
onDirect (account) {
dispatch(directCompose(account));
},
onMention (account, router) {
dispatch(mentionCompose(account, router));
onMention (account) {
dispatch(mentionCompose(account));
},
onOpenMedia (statusId, media, index, lang) {
@ -281,11 +243,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
},
onToggleHidden (status) {
if (status.get('hidden')) {
dispatch(revealStatus(status.get('id')));
} else {
dispatch(hideStatus(status.get('id')));
}
dispatch(toggleStatusSpoilers(status.get('id')));
},
deployPictureInPicture (status, type, mediaProps) {

4
app/javascript/flavours/glitch/entrypoints/public.tsx
View File

@ -316,8 +316,8 @@ function loaded() {
const message =
statusEl.dataset.spoiler === 'expanded'
? localeData['status.show_less'] ?? 'Show less'
: localeData['status.show_more'] ?? 'Show more';
? (localeData['status.show_less'] ?? 'Show less')
: (localeData['status.show_more'] ?? 'Show more');
spoilerLink.textContent = new IntlMessageFormat(
message,
locale,

11
app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
View File

@ -2,13 +2,11 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { NavLink, withRouter } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import ActionBar from '../../account/components/action_bar';
import InnerHeader from '../../account/components/header';
@ -36,7 +34,6 @@ class Header extends ImmutablePureComponent {
hideTabs: PropTypes.bool,
domain: PropTypes.string.isRequired,
hidden: PropTypes.bool,
...WithRouterPropTypes,
};
handleFollow = () => {
@ -48,11 +45,11 @@ class Header extends ImmutablePureComponent {
};
handleMention = () => {
this.props.onMention(this.props.account, this.props.history);
this.props.onMention(this.props.account);
};
handleDirect = () => {
this.props.onDirect(this.props.account, this.props.history);
this.props.onDirect(this.props.account);
};
handleReport = () => {
@ -158,4 +155,4 @@ class Header extends ImmutablePureComponent {
}
export default withRouter(Header);
export default Header;

8
app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
View File

@ -75,12 +75,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
},
onMention (account, router) {
dispatch(mentionCompose(account, router));
onMention (account) {
dispatch(mentionCompose(account));
},
onDirect (account, router) {
dispatch(directCompose(account, router));
onDirect (account) {
dispatch(directCompose(account));
},
onReblogToggle (account) {

9
app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
View File

@ -10,8 +10,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
import AutosuggestInput from '../../../components/autosuggest_input';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import { Button } from '../../../components/button';
@ -81,7 +79,6 @@ class ComposeForm extends ImmutablePureComponent {
singleColumn: PropTypes.bool,
lang: PropTypes.string,
maxChars: PropTypes.number,
...WithOptionalRouterPropTypes
};
static defaultProps = {
@ -141,9 +138,9 @@ class ComposeForm extends ImmutablePureComponent {
// Submit unless there are media with missing descriptions
if (this.props.mediaDescriptionConfirmation && this.props.media && this.props.media.some(item => !item.get('description'))) {
const firstWithoutDescription = this.props.media.find(item => !item.get('description'));
this.props.onMediaDescriptionConfirm(this.props.history || null, firstWithoutDescription.get('id'), overridePrivacy);
this.props.onMediaDescriptionConfirm(firstWithoutDescription.get('id'), overridePrivacy);
} else {
this.props.onSubmit(this.props.history || null, overridePrivacy);
this.props.onSubmit(overridePrivacy);
}
};
@ -351,4 +348,4 @@ class ComposeForm extends ImmutablePureComponent {
}
export default withOptionalRouter(injectIntl(ComposeForm));
export default injectIntl(ComposeForm);

10
app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
View File

@ -12,6 +12,7 @@ import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import { Permalink } from 'flavours/glitch/components/permalink';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
import { EmbeddedStatusContent } from 'flavours/glitch/features/notifications_v2/components/embedded_status_content';
const messages = defineMessages({
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
@ -32,8 +33,6 @@ export const EditIndicator = () => {
return null;
}
const content = { __html: status.get('contentHtml') };
return (
<div className='edit-indicator'>
<div className='edit-indicator__header'>
@ -48,7 +47,12 @@ export const EditIndicator = () => {
</div>
</div>
<div className='edit-indicator__content translate' dangerouslySetInnerHTML={content} />
<EmbeddedStatusContent
className='edit-indicator__content translate'
content={status.get('contentHtml')}
language={status.get('language')}
mentions={status.get('mentions')}
/>
{(status.get('poll') || status.get('media_attachments').size > 0) && (
<div className='edit-indicator__attachments'>

10
app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
View File

@ -8,6 +8,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import { Permalink } from 'flavours/glitch/components/permalink';
import { EmbeddedStatusContent } from 'flavours/glitch/features/notifications_v2/components/embedded_status_content';
export const ReplyIndicator = () => {
const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
@ -18,8 +19,6 @@ export const ReplyIndicator = () => {
return null;
}
const content = { __html: status.get('contentHtml') };
return (
<div className='reply-indicator'>
<div className='reply-indicator__line' />
@ -33,7 +32,12 @@ export const ReplyIndicator = () => {
<DisplayName account={account} />
</Permalink>
<div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
<EmbeddedStatusContent
className='reply-indicator__content translate'
content={status.get('contentHtml')}
language={status.get('language')}
mentions={status.get('mentions')}
/>
{(status.get('poll') || status.get('media_attachments').size > 0) && (
<div className='reply-indicator__attachments'>

8
app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
View File

@ -82,8 +82,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(changeCompose(text));
},
onSubmit (router, overridePrivacy = null) {
dispatch(submitCompose(router, overridePrivacy));
onSubmit (overridePrivacy = null) {
dispatch(submitCompose(overridePrivacy));
},
onClearSuggestions () {
@ -110,14 +110,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(insertEmojiCompose(position, data, needsSpace));
},
onMediaDescriptionConfirm (routerHistory, mediaId, overridePrivacy = null) {
onMediaDescriptionConfirm (mediaId, overridePrivacy = null) {
dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.missingDescriptionMessage),
confirm: intl.formatMessage(messages.missingDescriptionConfirm),
onConfirm: () => {
dispatch(submitCompose(routerHistory, overridePrivacy));
dispatch(submitCompose(overridePrivacy));
},
secondary: intl.formatMessage(messages.missingDescriptionEdit),
onSecondary: () => dispatch(openModal({

14
app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
View File

@ -18,7 +18,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import { replyCompose } from 'flavours/glitch/actions/compose';
import { markConversationRead, deleteConversation } from 'flavours/glitch/actions/conversations';
import { openModal } from 'flavours/glitch/actions/modal';
import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'flavours/glitch/actions/statuses';
import { muteStatus, unmuteStatus, toggleStatusSpoilers } from 'flavours/glitch/actions/statuses';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import AvatarComposite from 'flavours/glitch/components/avatar_composite';
import { IconButton } from 'flavours/glitch/components/icon_button';
@ -126,14 +126,14 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
modalProps: {
message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm),
onConfirm: () => dispatch(replyCompose(lastStatus, history)),
onConfirm: () => dispatch(replyCompose(lastStatus)),
},
}));
} else {
dispatch(replyCompose(lastStatus, history));
dispatch(replyCompose(lastStatus));
}
});
}, [dispatch, lastStatus, history, intl]);
}, [dispatch, lastStatus, intl]);
const handleDelete = useCallback(() => {
dispatch(deleteConversation(id));
@ -156,11 +156,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
}, [dispatch, lastStatus]);
const handleShowMore = useCallback(() => {
if (lastStatus.get('hidden')) {
dispatch(revealStatus(lastStatus.get('id')));
} else {
dispatch(hideStatus(lastStatus.get('id')));
}
dispatch(toggleStatusSpoilers(lastStatus.get('id')));
if (lastStatus.get('spoiler_text')) {
setExpanded(!expanded);

11
app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
View File

@ -53,6 +53,7 @@ class ColumnSettings extends PureComponent {
const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission, notificationPolicy } = this.props;
const unreadMarkersShowStr = <FormattedMessage id='notifications.column_settings.unread_notifications.highlight' defaultMessage='Highlight unread notifications' />;
const groupingShowStr = <FormattedMessage id='notifications.column_settings.beta.grouping' defaultMessage='Group notifications' />;
const filterBarShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show_bar' defaultMessage='Show filter bar' />;
const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
@ -115,6 +116,16 @@ class ColumnSettings extends PureComponent {
</div>
</section>
<section role='group' aria-labelledby='notifications-beta'>
<h3 id='notifications-beta'>
<FormattedMessage id='notifications.column_settings.beta.category' defaultMessage='Experimental features' />
</h3>
<div className='column-settings__row'>
<SettingToggle id='unread-notification-markers' prefix='notifications' settings={settings} settingPath={['groupingBeta']} onChange={onChange} label={groupingShowStr} />
</div>
</section>
<section role='group' aria-labelledby='notifications-unread-markers'>
<h3 id='notifications-unread-markers'>
<FormattedMessage id='notifications.column_settings.unread_notifications.category' defaultMessage='Unread notifications' />

4
app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.tsx
View File

@ -35,7 +35,9 @@ export const FilteredNotificationsBanner: React.FC = () => {
className='filtered-notifications-banner'
to='/notifications/requests'
>
<Icon icon={InventoryIcon} id='filtered-notifications' />
<div className='notification-group__icon'>
<Icon icon={InventoryIcon} id='filtered-notifications' />
</div>
<div className='filtered-notifications-banner__text'>
<strong>

51
app/javascript/flavours/glitch/features/notifications/components/moderation_warning.tsx
View File

@ -1,7 +1,10 @@
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import type { AccountWarningAction } from 'flavours/glitch/models/notification_group';
// This needs to be kept in sync with app/models/account_warning.rb
const messages = defineMessages({
@ -36,19 +39,18 @@ const messages = defineMessages({
});
interface Props {
action:
| 'none'
| 'disable'
| 'mark_statuses_as_sensitive'
| 'delete_statuses'
| 'sensitive'
| 'silence'
| 'suspend';
action: AccountWarningAction;
id: string;
hidden: boolean;
hidden?: boolean;
unread?: boolean;
}
export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
export const ModerationWarning: React.FC<Props> = ({
action,
id,
hidden,
unread,
}) => {
const intl = useIntl();
if (hidden) {
@ -56,23 +58,32 @@ export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
}
return (
<a
href={`/disputes/strikes/${id}`}
target='_blank'
rel='noopener noreferrer'
className='notification__moderation-warning'
<div
role='button'
className={classNames(
'notification-group notification-group--link notification-group--moderation-warning focusable',
{ 'notification-group--unread': unread },
)}
tabIndex={0}
>
<Icon id='warning' icon={GavelIcon} />
<div className='notification-group__icon'>
<Icon id='warning' icon={GavelIcon} />
</div>
<div className='notification__moderation-warning__content'>
<div className='notification-group__main'>
<p>{intl.formatMessage(messages[action])}</p>
<span className='link-button'>
<a
href={`/disputes/strikes/${id}`}
target='_blank'
rel='noopener noreferrer'
className='link-button'
>
<FormattedMessage
id='notification.moderation-warning.learn_more'
defaultMessage='Learn more'
/>
</span>
</a>
</div>
</a>
</div>
);
};

2
app/javascript/flavours/glitch/features/notifications/components/notification.jsx
View File

@ -92,7 +92,7 @@ class Notification extends ImmutablePureComponent {
e.preventDefault();
const { notification, onMention } = this.props;
onMention(notification.get('account'), this.props.history);
onMention(notification.get('account'));
};
handleHotkeyFavourite = () => {

15
app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx
View File

@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { domain } from 'flavours/glitch/initial_state';
@ -13,7 +15,7 @@ const messages = defineMessages({
user_domain_block: { id: 'notification.relationships_severance_event.user_domain_block', defaultMessage: 'You have blocked {target}, removing {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
});
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden, unread }) => {
const intl = useIntl();
if (hidden) {
@ -21,14 +23,14 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
}
return (
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='notification__relationships-severance-event'>
<Icon id='heart_broken' icon={HeartBrokenIcon} />
<div role='button' className={classNames('notification-group notification-group--link notification-group--relationships-severance-event focusable', { 'notification-group--unread': unread })} tabIndex='0'>
<div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>
<div className='notification__relationships-severance-event__content'>
<div className='notification-group__main'>
<p>{intl.formatMessage(messages[type], { from: <strong>{domain}</strong>, target: <strong>{target}</strong>, followingCount, followersCount })}</p>
<span className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></span>
<a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></a>
</div>
</a>
</div>
);
};
@ -42,4 +44,5 @@ RelationshipsSeveranceEvent.propTypes = {
followersCount: PropTypes.number.isRequired,
followingCount: PropTypes.number.isRequired,
hidden: PropTypes.bool,
unread: PropTypes.bool,
};

8
app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
View File

@ -2,10 +2,13 @@ import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { initializeNotifications } from 'flavours/glitch/actions/notifications_migration';
import { showAlert } from '../../../actions/alerts';
import { openModal } from '../../../actions/modal';
import { clearNotifications } from '../../../actions/notification_groups';
import { updateNotificationsPolicy } from '../../../actions/notification_policies';
import { setFilter, clearNotifications, requestBrowserPermission } from '../../../actions/notifications';
import { setFilter, requestBrowserPermission } from '../../../actions/notifications';
import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
import { changeSetting } from '../../../actions/settings';
import ColumnSettings from '../components/column_settings';
@ -58,6 +61,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
} else {
dispatch(changeSetting(['notifications', ...path], checked));
}
} else if(path[0] === 'groupingBeta') {
dispatch(changeSetting(['notifications', ...path], checked));
dispatch(initializeNotifications());
} else {
dispatch(changeSetting(['notifications', ...path], checked));
}

34
app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
View File

@ -2,13 +2,9 @@ import { connect } from 'react-redux';
import { mentionCompose } from '../../../actions/compose';
import {
reblog,
favourite,
unreblog,
unfavourite,
toggleReblog,
toggleFavourite,
} from '../../../actions/interactions';
import { openModal } from '../../../actions/modal';
import { boostModal } from '../../../initial_state';
import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
import Notification from '../components/notification';
@ -31,32 +27,16 @@ const makeMapStateToProps = () => {
};
const mapDispatchToProps = dispatch => ({
onMention: (account, router) => {
dispatch(mentionCompose(account, router));
},
onModalReblog (status, privacy) {
dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
onMention: (account) => {
dispatch(mentionCompose(account));
},
onReblog (status, e) {
if (status.get('reblogged')) {
dispatch(unreblog({ statusId: status.get('id') }));
} else {
if (e.shiftKey || !boostModal) {
this.onModalReblog(status);
} else {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
}
}
dispatch(toggleReblog(status.get('id'), e.shiftKey));
},
onFavourite (status) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
}
onFavourite (status, e) {
dispatch(toggleFavourite(status.get('id'), e.shiftKey));
},
});

13
app/javascript/flavours/glitch/features/notifications/index.jsx
View File

@ -237,7 +237,7 @@ class Notifications extends PureComponent {
<LoadGap
key={'gap:' + notifications.getIn([index + 1, 'id'])}
disabled={isLoading}
maxId={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
param={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
onClick={this.handleLoadGap}
/>
) : (
@ -258,6 +258,13 @@ class Notifications extends PureComponent {
let scrollContainer;
const prepend = (
<>
{needsNotificationPermission && <NotificationsPermissionBanner />}
<FilteredNotificationsBanner />
</>
);
if (signedIn) {
scrollContainer = (
<ScrollableList
@ -267,7 +274,7 @@ class Notifications extends PureComponent {
showLoading={isLoading && notifications.size === 0}
hasMore={hasMore}
numPending={numPending}
prepend={needsNotificationPermission && <NotificationsPermissionBanner />}
prepend={prepend}
alwaysPrepend
emptyMessage={emptyMessage}
onLoadMore={this.handleLoadOlder}
@ -356,8 +363,6 @@ class Notifications extends PureComponent {
{filterBarContainer}
<FilteredNotificationsBanner />
{scrollContainer}
<Helmet>

31
app/javascript/flavours/glitch/features/notifications_v2/components/avatar_group.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Link } from 'react-router-dom';
import { Avatar } from 'flavours/glitch/components/avatar';
import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store';
const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
const account = useAppSelector((state) => state.accounts.get(accountId));
if (!account) return null;
return (
<Link
to={`/@${account.acct}`}
title={`@${account.acct}`}
data-hover-card-account={account.id}
>
<Avatar account={account} size={28} />
</Link>
);
};
export const AvatarGroup: React.FC<{ accountIds: string[] }> = ({
accountIds,
}) => (
<div className='notification-group__avatar-group'>
{accountIds.slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS).map((accountId) => (
<AvatarWrapper key={accountId} accountId={accountId} />
))}
</div>
);

159
app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx Normal file
View File

@ -0,0 +1,159 @@
import { useCallback, useRef } from 'react';
import { FormattedMessage } from 'react-intl';
import { useHistory } from 'react-router-dom';
import type { List as ImmutableList, RecordOf } from 'immutable';
import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
import { Avatar } from 'flavours/glitch/components/avatar';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import type { Status } from 'flavours/glitch/models/status';
import { useAppSelector } from 'flavours/glitch/store';
import { EmbeddedStatusContent } from './embedded_status_content';
export type Mention = RecordOf<{ url: string; acct: string }>;
export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
statusId,
}) => {
const history = useHistory();
const clickCoordinatesRef = useRef<[number, number] | null>();
const status = useAppSelector(
(state) => state.statuses.get(statusId) as Status | undefined,
);
const account = useAppSelector((state) =>
state.accounts.get(status?.get('account') as string),
);
const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
({ clientX, clientY }) => {
clickCoordinatesRef.current = [clientX, clientY];
},
[clickCoordinatesRef],
);
const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
({ clientX, clientY, target, button }) => {
const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
const [deltaX, deltaY] = [
Math.abs(clientX - startX),
Math.abs(clientY - startY),
];
let element: HTMLDivElement | null = target as HTMLDivElement;
while (element) {
if (
element.localName === 'button' ||
element.localName === 'a' ||
element.localName === 'label'
) {
return;
}
element = element.parentNode as HTMLDivElement | null;
}
if (deltaX + deltaY < 5 && button === 0 && account) {
history.push(`/@${account.acct}/${statusId}`);
}
clickCoordinatesRef.current = null;
},
[clickCoordinatesRef, statusId, account, history],
);
const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
({ currentTarget }) => {
const emojis =
currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
for (const emoji of emojis) {
const newSrc = emoji.getAttribute('data-original');
if (newSrc) emoji.src = newSrc;
}
},
[],
);
const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
({ currentTarget }) => {
const emojis =
currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
for (const emoji of emojis) {
const newSrc = emoji.getAttribute('data-static');
if (newSrc) emoji.src = newSrc;
}
},
[],
);
if (!status) {
return null;
}
// Assign status attributes to variables with a forced type, as status is not yet properly typed
const contentHtml = status.get('contentHtml') as string;
const poll = status.get('poll');
const language = status.get('language') as string;
const mentions = status.get('mentions') as ImmutableList<Mention>;
const mediaAttachmentsSize = (
status.get('media_attachments') as ImmutableList<unknown>
).size;
return (
<div
className='notification-group__embedded-status'
role='button'
tabIndex={-1}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className='notification-group__embedded-status__account'>
<Avatar account={account} size={16} />
<DisplayName account={account} />
</div>
<EmbeddedStatusContent
className='notification-group__embedded-status__content reply-indicator__content translate'
content={contentHtml}
language={language}
mentions={mentions}
/>
{(poll || mediaAttachmentsSize > 0) && (
<div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
{!!poll && (
<>
<Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
<FormattedMessage
id='reply_indicator.poll'
defaultMessage='Poll'
/>
</>
)}
{mediaAttachmentsSize > 0 && (
<>
<Icon icon={PhotoLibraryIcon} id='photo-library' />
<FormattedMessage
id='reply_indicator.attachments'
defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
values={{ count: mediaAttachmentsSize }}
/>
</>
)}
</div>
)}
</div>
);
};

93
app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx Normal file
View File

@ -0,0 +1,93 @@
import { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import type { List } from 'immutable';
import type { History } from 'history';
import type { Mention } from './embedded_status';
const handleMentionClick = (
history: History,
mention: Mention,
e: MouseEvent,
) => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault();
history.push(`/@${mention.get('acct')}`);
}
};
const handleHashtagClick = (
history: History,
hashtag: string,
e: MouseEvent,
) => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault();
history.push(`/tags/${hashtag.replace(/^#/, '')}`);
}
};
export const EmbeddedStatusContent: React.FC<{
content: string;
mentions: List<Mention>;
language: string;
className?: string;
}> = ({ content, mentions, language, className }) => {
const history = useHistory();
const handleContentRef = useCallback(
(node: HTMLDivElement | null) => {
if (!node) {
return;
}
const links = node.querySelectorAll<HTMLAnchorElement>('a');
for (const link of links) {
if (link.classList.contains('status-link')) {
continue;
}
link.classList.add('status-link');
const mention = mentions.find((item) => link.href === item.get('url'));
if (mention) {
link.addEventListener(
'click',
handleMentionClick.bind(null, history, mention),
false,
);
link.setAttribute('title', `@${mention.get('acct')}`);
link.setAttribute('href', `/@${mention.get('acct')}`);
} else if (
link.textContent?.[0] === '#' ||
link.previousSibling?.textContent?.endsWith('#')
) {
link.addEventListener(
'click',
handleHashtagClick.bind(null, history, link.text),
false,
);
link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
} else {
link.setAttribute('title', link.href);
link.classList.add('unhandled-link');
}
}
},
[mentions, history],
);
return (
<div
className={className}
ref={handleContentRef}
lang={language}
dangerouslySetInnerHTML={{ __html: content }}
/>
);
};

51
app/javascript/flavours/glitch/features/notifications_v2/components/names_list.tsx Normal file
View File

@ -0,0 +1,51 @@
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { useAppSelector } from 'flavours/glitch/store';
export const NamesList: React.FC<{
accountIds: string[];
total: number;
seeMoreHref?: string;
}> = ({ accountIds, total, seeMoreHref }) => {
const lastAccountId = accountIds[0] ?? '0';
const account = useAppSelector((state) => state.accounts.get(lastAccountId));
if (!account) return null;
const displayedName = (
<Link
to={`/@${account.acct}`}
title={`@${account.acct}`}
data-hover-card-account={account.id}
>
<bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
</Link>
);
if (total === 1) {
return displayedName;
}
if (seeMoreHref)
return (
<FormattedMessage
id='name_and_others_with_link'
defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a>'
values={{
name: displayedName,
count: total - 1,
a: (chunks) => <Link to={seeMoreHref}>{chunks}</Link>,
}}
/>
);
return (
<FormattedMessage
id='name_and_others'
defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
values={{ name: displayedName, count: total - 1 }}
/>
);
};

132
app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_report.tsx Normal file
View File

@ -0,0 +1,132 @@
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import classNames from 'classnames';
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
import type { NotificationGroupAdminReport } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store';
// This needs to be kept in sync with app/models/report.rb
const messages = defineMessages({
other: {
id: 'report_notification.categories.other_sentence',
defaultMessage: 'other',
},
spam: {
id: 'report_notification.categories.spam_sentence',
defaultMessage: 'spam',
},
legal: {
id: 'report_notification.categories.legal_sentence',
defaultMessage: 'illegal content',
},
violation: {
id: 'report_notification.categories.violation_sentence',
defaultMessage: 'rule violation',
},
});
export const NotificationAdminReport: React.FC<{
notification: NotificationGroupAdminReport;
unread?: boolean;
}> = ({ notification, notification: { report }, unread }) => {
const intl = useIntl();
const targetAccount = useAppSelector((state) =>
state.accounts.get(report.targetAccountId),
);
const account = useAppSelector((state) =>
state.accounts.get(notification.sampleAccountIds[0] ?? '0'),
);
if (!account || !targetAccount) return null;
const values = {
name: (
<bdi
dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
/>
),
target: (
<bdi
dangerouslySetInnerHTML={{
__html: targetAccount.get('display_name_html'),
}}
/>
),
category: intl.formatMessage(messages[report.category]),
count: report.status_ids.length,
};
let message;
if (report.status_ids.length > 0) {
if (report.category === 'other') {
message = (
<FormattedMessage
id='notification.admin.report_account_other'
defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target}'
values={values}
/>
);
} else {
message = (
<FormattedMessage
id='notification.admin.report_account'
defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target} for {category}'
values={values}
/>
);
}
} else {
if (report.category === 'other') {
message = (
<FormattedMessage
id='notification.admin.report_statuses_other'
defaultMessage='{name} reported {target}'
values={values}
/>
);
} else {
message = (
<FormattedMessage
id='notification.admin.report_statuses'
defaultMessage='{name} reported {target} for {category}'
values={values}
/>
);
}
}
return (
<a
href={`/admin/reports/${report.id}`}
target='_blank'
rel='noopener noreferrer'
className={classNames(
'notification-group notification-group--link notification-group--admin-report focusable',
{ 'notification-group--unread': unread },
)}
>
<div className='notification-group__icon'>
<Icon id='flag' icon={FlagIcon} />
</div>
<div className='notification-group__main'>
<div className='notification-group__main__header'>
<div className='notification-group__main__header__label'>
{message}
<RelativeTimestamp timestamp={report.created_at} />
</div>
</div>
{report.comment.length > 0 && (
<div className='notification-group__embedded-status__content'>
“{report.comment}”
</div>
)}
</div>
</a>
);
};

31
app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_sign_up.tsx Normal file
View File

@ -0,0 +1,31 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import type { NotificationGroupAdminSignUp } from 'flavours/glitch/models/notification_group';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.admin.sign_up'
defaultMessage='{name} signed up'
values={values}
/>
);
export const NotificationAdminSignUp: React.FC<{
notification: NotificationGroupAdminSignUp;
unread: boolean;
}> = ({ notification, unread }) => (
<NotificationGroupWithStatus
type='admin-sign-up'
icon={PersonAddIcon}
iconId='person-add'
accountIds={notification.sampleAccountIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
unread={unread}
/>
);

45
app/javascript/flavours/glitch/features/notifications_v2/components/notification_favourite.tsx Normal file
View File

@ -0,0 +1,45 @@
import { FormattedMessage } from 'react-intl';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import type { NotificationGroupFavourite } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.favourite'
defaultMessage='{name} favorited your status'
values={values}
/>
);
export const NotificationFavourite: React.FC<{
notification: NotificationGroupFavourite;
unread: boolean;
}> = ({ notification, unread }) => {
const { statusId } = notification;
const statusAccount = useAppSelector(
(state) =>
state.accounts.get(state.statuses.getIn([statusId, 'account']) as string)
?.acct,
);
return (
<NotificationGroupWithStatus
type='favourite'
icon={StarIcon}
iconId='star'
accountIds={notification.sampleAccountIds}
statusId={notification.statusId}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
labelSeeMoreHref={
statusAccount ? `/@${statusAccount}/${statusId}/favourites` : undefined
}
unread={unread}
/>
);
};

31
app/javascript/flavours/glitch/features/notifications_v2/components/notification_follow.tsx Normal file
View File

@ -0,0 +1,31 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import type { NotificationGroupFollow } from 'flavours/glitch/models/notification_group';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.follow'
defaultMessage='{name} followed you'
values={values}
/>
);
export const NotificationFollow: React.FC<{
notification: NotificationGroupFollow;
unread: boolean;
}> = ({ notification, unread }) => (
<NotificationGroupWithStatus
type='follow'
icon={PersonAddIcon}
iconId='person-add'
accountIds={notification.sampleAccountIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
unread={unread}
/>
);

78
app/javascript/flavours/glitch/features/notifications_v2/components/notification_follow_request.tsx Normal file
View File

@ -0,0 +1,78 @@
import { useCallback } from 'react';
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import {
authorizeFollowRequest,
rejectFollowRequest,
} from 'flavours/glitch/actions/accounts';
import { IconButton } from 'flavours/glitch/components/icon_button';
import type { NotificationGroupFollowRequest } from 'flavours/glitch/models/notification_group';
import { useAppDispatch } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
});
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.follow_request'
defaultMessage='{name} has requested to follow you'
values={values}
/>
);
export const NotificationFollowRequest: React.FC<{
notification: NotificationGroupFollowRequest;
unread: boolean;
}> = ({ notification, unread }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const onAuthorize = useCallback(() => {
dispatch(authorizeFollowRequest(notification.sampleAccountIds[0]));
}, [dispatch, notification.sampleAccountIds]);
const onReject = useCallback(() => {
dispatch(rejectFollowRequest(notification.sampleAccountIds[0]));
}, [dispatch, notification.sampleAccountIds]);
const actions = (
<div className='notification-group__actions'>
<IconButton
title={intl.formatMessage(messages.reject)}
icon='times'
iconComponent={CloseIcon}
onClick={onReject}
/>
<IconButton
title={intl.formatMessage(messages.authorize)}
icon='check'
iconComponent={CheckIcon}
onClick={onAuthorize}
/>
</div>
);
return (
<NotificationGroupWithStatus
type='follow-request'
icon={PersonAddIcon}
iconId='person-add'
accountIds={notification.sampleAccountIds}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
actions={actions}
unread={unread}
/>
);
};

151
app/javascript/flavours/glitch/features/notifications_v2/components/notification_group.tsx Normal file
View File

@ -0,0 +1,151 @@
import { useMemo } from 'react';
import { HotKeys } from 'react-hotkeys';
import { navigateToProfile } from 'flavours/glitch/actions/accounts';
import { mentionComposeById } from 'flavours/glitch/actions/compose';
import type { NotificationGroup as NotificationGroupModel } from 'flavours/glitch/models/notification_group';
import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
import { NotificationAdminReport } from './notification_admin_report';
import { NotificationAdminSignUp } from './notification_admin_sign_up';
import { NotificationFavourite } from './notification_favourite';
import { NotificationFollow } from './notification_follow';
import { NotificationFollowRequest } from './notification_follow_request';
import { NotificationMention } from './notification_mention';
import { NotificationModerationWarning } from './notification_moderation_warning';
import { NotificationPoll } from './notification_poll';
import { NotificationReblog } from './notification_reblog';
import { NotificationSeveredRelationships } from './notification_severed_relationships';
import { NotificationStatus } from './notification_status';
import { NotificationUpdate } from './notification_update';
export const NotificationGroup: React.FC<{
notificationGroupId: NotificationGroupModel['group_key'];
unread: boolean;
onMoveUp: (groupId: string) => void;
onMoveDown: (groupId: string) => void;
}> = ({ notificationGroupId, unread, onMoveUp, onMoveDown }) => {
const notificationGroup = useAppSelector((state) =>
state.notificationGroups.groups.find(
(item) => item.type !== 'gap' && item.group_key === notificationGroupId,
),
);
const dispatch = useAppDispatch();
const accountId =
notificationGroup?.type === 'gap'
? undefined
: notificationGroup?.sampleAccountIds[0];
const handlers = useMemo(
() => ({
moveUp: () => {
onMoveUp(notificationGroupId);
},
moveDown: () => {
onMoveDown(notificationGroupId);
},
openProfile: () => {
if (accountId) dispatch(navigateToProfile(accountId));
},
mention: () => {
if (accountId) dispatch(mentionComposeById(accountId));
},
}),
[dispatch, notificationGroupId, accountId, onMoveUp, onMoveDown],
);
if (!notificationGroup || notificationGroup.type === 'gap') return null;
let content;
switch (notificationGroup.type) {
case 'reblog':
content = (
<NotificationReblog unread={unread} notification={notificationGroup} />
);
break;
case 'favourite':
content = (
<NotificationFavourite
unread={unread}
notification={notificationGroup}
/>
);
break;
case 'severed_relationships':
content = (
<NotificationSeveredRelationships
unread={unread}
notification={notificationGroup}
/>
);
break;
case 'mention':
content = (
<NotificationMention unread={unread} notification={notificationGroup} />
);
break;
case 'follow':
content = (
<NotificationFollow unread={unread} notification={notificationGroup} />
);
break;
case 'follow_request':
content = (
<NotificationFollowRequest
unread={unread}
notification={notificationGroup}
/>
);
break;
case 'poll':
content = (
<NotificationPoll unread={unread} notification={notificationGroup} />
);
break;
case 'status':
content = (
<NotificationStatus unread={unread} notification={notificationGroup} />
);
break;
case 'update':
content = (
<NotificationUpdate unread={unread} notification={notificationGroup} />
);
break;
case 'admin.sign_up':
content = (
<NotificationAdminSignUp
unread={unread}
notification={notificationGroup}
/>
);
break;
case 'admin.report':
content = (
<NotificationAdminReport
unread={unread}
notification={notificationGroup}
/>
);
break;
case 'moderation_warning':
content = (
<NotificationModerationWarning
unread={unread}
notification={notificationGroup}
/>
);
break;
default:
return null;
}
return <HotKeys handlers={handlers}>{content}</HotKeys>;
};

113
app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx Normal file
View File

@ -0,0 +1,113 @@
import { useMemo } from 'react';
import classNames from 'classnames';
import { HotKeys } from 'react-hotkeys';
import { replyComposeById } from 'flavours/glitch/actions/compose';
import { navigateToStatus } from 'flavours/glitch/actions/statuses';
import type { IconProp } from 'flavours/glitch/components/icon';
import { Icon } from 'flavours/glitch/components/icon';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
import { useAppDispatch } from 'flavours/glitch/store';
import { AvatarGroup } from './avatar_group';
import { EmbeddedStatus } from './embedded_status';
import { NamesList } from './names_list';
export type LabelRenderer = (
values: Record<string, React.ReactNode>,
) => JSX.Element;
export const NotificationGroupWithStatus: React.FC<{
icon: IconProp;
iconId: string;
statusId?: string;
actions?: JSX.Element;
count: number;
accountIds: string[];
timestamp: string;
labelRenderer: LabelRenderer;
labelSeeMoreHref?: string;
type: string;
unread: boolean;
}> = ({
icon,
iconId,
timestamp,
accountIds,
actions,
count,
statusId,
labelRenderer,
labelSeeMoreHref,
type,
unread,
}) => {
const dispatch = useAppDispatch();
const label = useMemo(
() =>
labelRenderer({
name: (
<NamesList
accountIds={accountIds}
total={count}
seeMoreHref={labelSeeMoreHref}
/>
),
}),
[labelRenderer, accountIds, count, labelSeeMoreHref],
);
const handlers = useMemo(
() => ({
open: () => {
dispatch(navigateToStatus(statusId));
},
reply: () => {
dispatch(replyComposeById(statusId));
},
}),
[dispatch, statusId],
);
return (
<HotKeys handlers={handlers}>
<div
role='button'
className={classNames(
`notification-group focusable notification-group--${type}`,
{ 'notification-group--unread': unread },
)}
tabIndex={0}
>
<div className='notification-group__icon'>
<Icon icon={icon} id={iconId} />
</div>
<div className='notification-group__main'>
<div className='notification-group__main__header'>
<div className='notification-group__main__header__wrapper'>
<AvatarGroup accountIds={accountIds} />
{actions}
</div>
<div className='notification-group__main__header__label'>
{label}
{timestamp && <RelativeTimestamp timestamp={timestamp} />}
</div>
</div>
{statusId && (
<div className='notification-group__main__status'>
<EmbeddedStatus statusId={statusId} />
</div>
)}
</div>
</div>
</HotKeys>
);
};

55
app/javascript/flavours/glitch/features/notifications_v2/components/notification_mention.tsx Normal file
View File

@ -0,0 +1,55 @@
import { FormattedMessage } from 'react-intl';
import ReplyIcon from '@/material-icons/400-24px/reply-fill.svg?react';
import type { StatusVisibility } from 'flavours/glitch/api_types/statuses';
import type { NotificationGroupMention } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.mention'
defaultMessage='{name} mentioned you'
values={values}
/>
);
const privateMentionLabelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.private_mention'
defaultMessage='{name} privately mentioned you'
values={values}
/>
);
export const NotificationMention: React.FC<{
notification: NotificationGroupMention;
unread: boolean;
}> = ({ notification, unread }) => {
const statusVisibility = useAppSelector(
(state) =>
state.statuses.getIn([
notification.statusId,
'visibility',
]) as StatusVisibility,
);
return (
<NotificationWithStatus
type='mention'
icon={ReplyIcon}
iconId='reply'
accountIds={notification.sampleAccountIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={
statusVisibility === 'direct'
? privateMentionLabelRenderer
: labelRenderer
}
unread={unread}
/>
);
};

13
app/javascript/flavours/glitch/features/notifications_v2/components/notification_moderation_warning.tsx Normal file
View File

@ -0,0 +1,13 @@
import { ModerationWarning } from 'flavours/glitch/features/notifications/components/moderation_warning';
import type { NotificationGroupModerationWarning } from 'flavours/glitch/models/notification_group';
export const NotificationModerationWarning: React.FC<{
notification: NotificationGroupModerationWarning;
unread: boolean;
}> = ({ notification: { moderationWarning }, unread }) => (
<ModerationWarning
action={moderationWarning.action}
id={moderationWarning.id}
unread={unread}
/>
);

41
app/javascript/flavours/glitch/features/notifications_v2/components/notification_poll.tsx Normal file
View File

@ -0,0 +1,41 @@
import { FormattedMessage } from 'react-intl';
import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
import { me } from 'flavours/glitch/initial_state';
import type { NotificationGroupPoll } from 'flavours/glitch/models/notification_group';
import { NotificationWithStatus } from './notification_with_status';
const labelRendererOther = () => (
<FormattedMessage
id='notification.poll'
defaultMessage='A poll you voted in has ended'
/>
);
const labelRendererOwn = () => (
<FormattedMessage
id='notification.own_poll'
defaultMessage='Your poll has ended'
/>
);
export const NotificationPoll: React.FC<{
notification: NotificationGroupPoll;
unread: boolean;
}> = ({ notification, unread }) => (
<NotificationWithStatus
type='poll'
icon={BarChart4BarsIcon}
iconId='bar-chart-4-bars'
accountIds={notification.sampleAccountIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={
notification.sampleAccountIds[0] === me
? labelRendererOwn
: labelRendererOther
}
unread={unread}
/>
);

45
app/javascript/flavours/glitch/features/notifications_v2/components/notification_reblog.tsx Normal file
View File

@ -0,0 +1,45 @@
import { FormattedMessage } from 'react-intl';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import type { NotificationGroupReblog } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.reblog'
defaultMessage='{name} boosted your status'
values={values}
/>
);
export const NotificationReblog: React.FC<{
notification: NotificationGroupReblog;
unread: boolean;
}> = ({ notification, unread }) => {
const { statusId } = notification;
const statusAccount = useAppSelector(
(state) =>
state.accounts.get(state.statuses.getIn([statusId, 'account']) as string)
?.acct,
);
return (
<NotificationGroupWithStatus
type='reblog'
icon={RepeatIcon}
iconId='repeat'
accountIds={notification.sampleAccountIds}
statusId={notification.statusId}
timestamp={notification.latest_page_notification_at}
count={notification.notifications_count}
labelRenderer={labelRenderer}
labelSeeMoreHref={
statusAccount ? `/@${statusAccount}/${statusId}/reblogs` : undefined
}
unread={unread}
/>
);
};

15
app/javascript/flavours/glitch/features/notifications_v2/components/notification_severed_relationships.tsx Normal file
View File

@ -0,0 +1,15 @@
import { RelationshipsSeveranceEvent } from 'flavours/glitch/features/notifications/components/relationships_severance_event';
import type { NotificationGroupSeveredRelationships } from 'flavours/glitch/models/notification_group';
export const NotificationSeveredRelationships: React.FC<{
notification: NotificationGroupSeveredRelationships;
unread: boolean;
}> = ({ notification: { event }, unread }) => (
<RelationshipsSeveranceEvent
type={event.type}
target={event.target_name}
followersCount={event.followers_count}
followingCount={event.following_count}
unread={unread}
/>
);

31
app/javascript/flavours/glitch/features/notifications_v2/components/notification_status.tsx Normal file
View File

@ -0,0 +1,31 @@
import { FormattedMessage } from 'react-intl';
import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
import type { NotificationGroupStatus } from 'flavours/glitch/models/notification_group';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.status'
defaultMessage='{name} just posted'
values={values}
/>
);
export const NotificationStatus: React.FC<{
notification: NotificationGroupStatus;
unread: boolean;
}> = ({ notification, unread }) => (
<NotificationWithStatus
type='status'
icon={NotificationsActiveIcon}
iconId='notifications-active'
accountIds={notification.sampleAccountIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={labelRenderer}
unread={unread}
/>
);

31
app/javascript/flavours/glitch/features/notifications_v2/components/notification_update.tsx Normal file
View File

@ -0,0 +1,31 @@
import { FormattedMessage } from 'react-intl';
import EditIcon from '@/material-icons/400-24px/edit.svg?react';
import type { NotificationGroupUpdate } from 'flavours/glitch/models/notification_group';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationWithStatus } from './notification_with_status';
const labelRenderer: LabelRenderer = (values) => (
<FormattedMessage
id='notification.update'
defaultMessage='{name} edited a post'
values={values}
/>
);
export const NotificationUpdate: React.FC<{
notification: NotificationGroupUpdate;
unread: boolean;
}> = ({ notification, unread }) => (
<NotificationWithStatus
type='update'
icon={EditIcon}
iconId='edit'
accountIds={notification.sampleAccountIds}
count={notification.notifications_count}
statusId={notification.statusId}
labelRenderer={labelRenderer}
unread={unread}
/>
);

115
app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx Normal file
View File

@ -0,0 +1,115 @@
import { useMemo } from 'react';
import classNames from 'classnames';
import { HotKeys } from 'react-hotkeys';
import { replyComposeById } from 'flavours/glitch/actions/compose';
import {
toggleReblog,
toggleFavourite,
} from 'flavours/glitch/actions/interactions';
import {
navigateToStatus,
toggleStatusSpoilers,
} from 'flavours/glitch/actions/statuses';
import type { IconProp } from 'flavours/glitch/components/icon';
import { Icon } from 'flavours/glitch/components/icon';
import Status from 'flavours/glitch/containers/status_container';
import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
import { NamesList } from './names_list';
import type { LabelRenderer } from './notification_group_with_status';
export const NotificationWithStatus: React.FC<{
type: string;
icon: IconProp;
iconId: string;
accountIds: string[];
statusId: string;
count: number;
labelRenderer: LabelRenderer;
unread: boolean;
}> = ({
icon,
iconId,
accountIds,
statusId,
count,
labelRenderer,
type,
unread,
}) => {
const dispatch = useAppDispatch();
const label = useMemo(
() =>
labelRenderer({
name: <NamesList accountIds={accountIds} total={count} />,
}),
[labelRenderer, accountIds, count],
);
const isPrivateMention = useAppSelector(
(state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
);
const handlers = useMemo(
() => ({
open: () => {
dispatch(navigateToStatus(statusId));
},
reply: () => {
dispatch(replyComposeById(statusId));
},
boost: () => {
dispatch(toggleReblog(statusId));
},
favourite: () => {
dispatch(toggleFavourite(statusId));
},
toggleHidden: () => {
// TODO: glitch-soc is different and needs different handling of CWs
dispatch(toggleStatusSpoilers(statusId));
},
}),
[dispatch, statusId],
);
return (
<HotKeys handlers={handlers}>
<div
role='button'
className={classNames(
`notification-ungrouped focusable notification-ungrouped--${type}`,
{
'notification-ungrouped--unread': unread,
'notification-ungrouped--direct': isPrivateMention,
},
)}
tabIndex={0}
>
<div className='notification-ungrouped__header'>
<div className='notification-ungrouped__header__icon'>
<Icon icon={icon} id={iconId} />
</div>
{label}
</div>
<Status
// @ts-expect-error -- <Status> is not yet typed
id={statusId}
contextType='notifications'
withDismiss
skipPrepend
avatarSize={40}
unfocusable
/>
</div>
</HotKeys>
);
};

145
app/javascript/flavours/glitch/features/notifications_v2/filter_bar.tsx Normal file
View File

@ -0,0 +1,145 @@
import type { PropsWithChildren } from 'react';
import { useCallback } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
import StarIcon from '@/material-icons/400-24px/star.svg?react';
import { setNotificationsFilter } from 'flavours/glitch/actions/notification_groups';
import { Icon } from 'flavours/glitch/components/icon';
import {
selectSettingsNotificationsQuickFilterActive,
selectSettingsNotificationsQuickFilterAdvanced,
} from 'flavours/glitch/selectors/settings';
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
const tooltips = defineMessages({
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
favourites: {
id: 'notifications.filter.favourites',
defaultMessage: 'Favorites',
},
boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
statuses: {
id: 'notifications.filter.statuses',
defaultMessage: 'Updates from people you follow',
},
});
const BarButton: React.FC<
PropsWithChildren<{
selectedFilter: string;
type: string;
title?: string;
}>
> = ({ selectedFilter, type, title, children }) => {
const dispatch = useAppDispatch();
const onClick = useCallback(() => {
void dispatch(setNotificationsFilter({ filterType: type }));
}, [dispatch, type]);
return (
<button
className={selectedFilter === type ? 'active' : ''}
onClick={onClick}
title={title}
>
{children}
</button>
);
};
export const FilterBar: React.FC = () => {
const intl = useIntl();
const selectedFilter = useAppSelector(
selectSettingsNotificationsQuickFilterActive,
);
const advancedMode = useAppSelector(
selectSettingsNotificationsQuickFilterAdvanced,
);
if (advancedMode)
return (
<div className='notification__filter-bar'>
<BarButton selectedFilter={selectedFilter} type='all' key='all'>
<FormattedMessage
id='notifications.filter.all'
defaultMessage='All'
/>
</BarButton>
<BarButton
selectedFilter={selectedFilter}
type='mention'
key='mention'
title={intl.formatMessage(tooltips.mentions)}
>
<Icon id='reply-all' icon={ReplyAllIcon} />
</BarButton>
<BarButton
selectedFilter={selectedFilter}
type='favourite'
key='favourite'
title={intl.formatMessage(tooltips.favourites)}
>
<Icon id='star' icon={StarIcon} />
</BarButton>
<BarButton
selectedFilter={selectedFilter}
type='reblog'
key='reblog'
title={intl.formatMessage(tooltips.boosts)}
>
<Icon id='retweet' icon={RepeatIcon} />
</BarButton>
<BarButton
selectedFilter={selectedFilter}
type='poll'
key='poll'
title={intl.formatMessage(tooltips.polls)}
>
<Icon id='tasks' icon={InsertChartIcon} />
</BarButton>
<BarButton
selectedFilter={selectedFilter}
type='status'
key='status'
title={intl.formatMessage(tooltips.statuses)}
>
<Icon id='home' icon={HomeIcon} />
</BarButton>
<BarButton
selectedFilter={selectedFilter}
type='follow'
key='follow'
title={intl.formatMessage(tooltips.follows)}
>
<Icon id='user-plus' icon={PersonAddIcon} />
</BarButton>
</div>
);
else
return (
<div className='notification__filter-bar'>
<BarButton selectedFilter={selectedFilter} type='all' key='all'>
<FormattedMessage
id='notifications.filter.all'
defaultMessage='All'
/>
</BarButton>
<BarButton selectedFilter={selectedFilter} type='mention' key='mention'>
<FormattedMessage
id='notifications.filter.mentions'
defaultMessage='Mentions'
/>
</BarButton>
</div>
);
};

354
app/javascript/flavours/glitch/features/notifications_v2/index.tsx Normal file
View File

@ -0,0 +1,354 @@
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { createSelector } from '@reduxjs/toolkit';
import { useDebouncedCallback } from 'use-debounce';
import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
import {
fetchNotificationsGap,
updateScrollPosition,
loadPending,
markNotificationsAsRead,
mountNotifications,
unmountNotifications,
} from 'flavours/glitch/actions/notification_groups';
import { compareId } from 'flavours/glitch/compare_id';
import { Icon } from 'flavours/glitch/components/icon';
import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
import { useIdentity } from 'flavours/glitch/identity_context';
import type { NotificationGap } from 'flavours/glitch/reducers/notification_groups';
import {
selectUnreadNotificationGroupsCount,
selectPendingNotificationGroupsCount,
} from 'flavours/glitch/selectors/notifications';
import {
selectNeedsNotificationPermission,
selectSettingsNotificationsExcludedTypes,
selectSettingsNotificationsQuickFilterActive,
selectSettingsNotificationsQuickFilterShow,
selectSettingsNotificationsShowUnread,
} from 'flavours/glitch/selectors/settings';
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
import type { RootState } from 'flavours/glitch/store';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { submitMarkers } from '../../actions/markers';
import Column from '../../components/column';
import { ColumnHeader } from '../../components/column_header';
import { LoadGap } from '../../components/load_gap';
import ScrollableList from '../../components/scrollable_list';
import { FilteredNotificationsBanner } from '../notifications/components/filtered_notifications_banner';
import NotificationsPermissionBanner from '../notifications/components/notifications_permission_banner';
import ColumnSettingsContainer from '../notifications/containers/column_settings_container';
import { NotificationGroup } from './components/notification_group';
import { FilterBar } from './filter_bar';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
markAsRead: {
id: 'notifications.mark_as_read',
defaultMessage: 'Mark every notification as read',
},
});
const getNotifications = createSelector(
[
selectSettingsNotificationsQuickFilterShow,
selectSettingsNotificationsQuickFilterActive,
selectSettingsNotificationsExcludedTypes,
(state: RootState) => state.notificationGroups.groups,
],
(showFilterBar, allowedType, excludedTypes, notifications) => {
if (!showFilterBar || allowedType === 'all') {
// used if user changed the notification settings after loading the notifications from the server
// otherwise a list of notifications will come pre-filtered from the backend
// we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
return notifications.filter(
(item) => item.type === 'gap' || !excludedTypes.includes(item.type),
);
}
return notifications.filter(
(item) => item.type === 'gap' || allowedType === item.type,
);
},
);
export const Notifications: React.FC<{
columnId?: string;
multiColumn?: boolean;
}> = ({ columnId, multiColumn }) => {
const intl = useIntl();
const notifications = useAppSelector(getNotifications);
const dispatch = useAppDispatch();
const isLoading = useAppSelector((s) => s.notificationGroups.isLoading);
const hasMore = notifications.at(-1)?.type === 'gap';
const lastReadId = useAppSelector((s) =>
selectSettingsNotificationsShowUnread(s)
? s.notificationGroups.lastReadId
: '0',
);
const numPending = useAppSelector(selectPendingNotificationGroupsCount);
const unreadNotificationsCount = useAppSelector(
selectUnreadNotificationGroupsCount,
);
const isUnread = unreadNotificationsCount > 0;
const canMarkAsRead =
useAppSelector(selectSettingsNotificationsShowUnread) &&
unreadNotificationsCount > 0;
const needsNotificationPermission = useAppSelector(
selectNeedsNotificationPermission,
);
const columnRef = useRef<Column>(null);
const selectChild = useCallback((index: number, alignTop: boolean) => {
const container = columnRef.current?.node as HTMLElement | undefined;
if (!container) return;
const element = container.querySelector<HTMLElement>(
`article:nth-of-type(${index + 1}) .focusable`,
);
if (element) {
if (alignTop && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (
!alignTop &&
container.scrollTop + container.clientHeight <
element.offsetTop + element.offsetHeight
) {
element.scrollIntoView(false);
}
element.focus();
}
}, []);
// Keep track of mounted components for unread notification handling
useEffect(() => {
dispatch(mountNotifications());
return () => {
dispatch(unmountNotifications());
dispatch(updateScrollPosition({ top: false }));
};
}, [dispatch]);
const handleLoadGap = useCallback(
(gap: NotificationGap) => {
void dispatch(fetchNotificationsGap({ gap }));
},
[dispatch],
);
const handleLoadOlder = useDebouncedCallback(
() => {
const gap = notifications.at(-1);
if (gap?.type === 'gap') void dispatch(fetchNotificationsGap({ gap }));
},
300,
{ leading: true },
);
const handleLoadPending = useCallback(() => {
dispatch(loadPending());
}, [dispatch]);
const handleScrollToTop = useDebouncedCallback(() => {
dispatch(updateScrollPosition({ top: true }));
}, 100);
const handleScroll = useDebouncedCallback(() => {
dispatch(updateScrollPosition({ top: false }));
}, 100);
useEffect(() => {
return () => {
handleLoadOlder.cancel();
handleScrollToTop.cancel();
handleScroll.cancel();
};
}, [handleLoadOlder, handleScrollToTop, handleScroll]);
const handlePin = useCallback(() => {
if (columnId) {
dispatch(removeColumn(columnId));
} else {
dispatch(addColumn('NOTIFICATIONS', {}));
}
}, [columnId, dispatch]);
const handleMove = useCallback(
(dir: unknown) => {
dispatch(moveColumn(columnId, dir));
},
[dispatch, columnId],
);
const handleHeaderClick = useCallback(() => {
columnRef.current?.scrollTop();
}, []);
const handleMoveUp = useCallback(
(id: string) => {
const elementIndex =
notifications.findIndex(
(item) => item.type !== 'gap' && item.group_key === id,
) - 1;
selectChild(elementIndex, true);
},
[notifications, selectChild],
);
const handleMoveDown = useCallback(
(id: string) => {
const elementIndex =
notifications.findIndex(
(item) => item.type !== 'gap' && item.group_key === id,
) + 1;
selectChild(elementIndex, false);
},
[notifications, selectChild],
);
const handleMarkAsRead = useCallback(() => {
dispatch(markNotificationsAsRead());
void dispatch(submitMarkers({ immediate: true }));
}, [dispatch]);
const pinned = !!columnId;
const emptyMessage = (
<FormattedMessage
id='empty_column.notifications'
defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here."
/>
);
const { signedIn } = useIdentity();
const filterBar = signedIn ? <FilterBar /> : null;
const scrollableContent = useMemo(() => {
if (notifications.length === 0 && !hasMore) return null;
return notifications.map((item) =>
item.type === 'gap' ? (
<LoadGap
key={`${item.maxId}-${item.sinceId}`}
disabled={isLoading}
param={item}
onClick={handleLoadGap}
/>
) : (
<NotificationGroup
key={item.group_key}
notificationGroupId={item.group_key}
onMoveUp={handleMoveUp}
onMoveDown={handleMoveDown}
unread={
lastReadId !== '0' &&
!!item.page_max_id &&
compareId(item.page_max_id, lastReadId) > 0
}
/>
),
);
}, [
notifications,
isLoading,
hasMore,
lastReadId,
handleLoadGap,
handleMoveUp,
handleMoveDown,
]);
const prepend = (
<>
{needsNotificationPermission && <NotificationsPermissionBanner />}
<FilteredNotificationsBanner />
</>
);
const scrollContainer = signedIn ? (
<ScrollableList
scrollKey={`notifications-${columnId}`}
trackScroll={!pinned}
isLoading={isLoading}
showLoading={isLoading && notifications.length === 0}
hasMore={hasMore}
numPending={numPending}
prepend={prepend}
alwaysPrepend
emptyMessage={emptyMessage}
onLoadMore={handleLoadOlder}
onLoadPending={handleLoadPending}
onScrollToTop={handleScrollToTop}
onScroll={handleScroll}
bindToDocument={!multiColumn}
>
{scrollableContent}
</ScrollableList>
) : (
<NotSignedInIndicator />
);
const extraButton = canMarkAsRead ? (
<button
aria-label={intl.formatMessage(messages.markAsRead)}
title={intl.formatMessage(messages.markAsRead)}
onClick={handleMarkAsRead}
className='column-header__button'
>
<Icon id='done-all' icon={DoneAllIcon} />
</button>
) : null;
return (
<Column
bindToDocument={!multiColumn}
ref={columnRef}
label={intl.formatMessage(messages.title)}
>
<ColumnHeader
icon='bell'
iconComponent={NotificationsIcon}
active={isUnread}
title={intl.formatMessage(messages.title)}
onPin={handlePin}
onMove={handleMove}
onClick={handleHeaderClick}
pinned={pinned}
multiColumn={multiColumn}
extraButton={extraButton}
>
<ColumnSettingsContainer />
</ColumnHeader>
{filterBar}
{scrollContainer}
<Helmet>
<title>{intl.formatMessage(messages.title)}</title>
<meta name='robots' content='noindex' />
</Helmet>
</Column>
);
};
// eslint-disable-next-line import/no-default-export
export default Notifications;

13
app/javascript/flavours/glitch/features/notifications_wrapper.jsx Normal file
View File

@ -0,0 +1,13 @@
import Notifications from 'flavours/glitch/features/notifications';
import Notifications_v2 from 'flavours/glitch/features/notifications_v2';
import { useAppSelector } from 'flavours/glitch/store';
export const NotificationsWrapper = (props) => {
const optedInGroupedNotifications = useAppSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
return (
optedInGroupedNotifications ? <Notifications_v2 {...props} /> : <Notifications {...props} />
);
};
export default NotificationsWrapper;

7
app/javascript/flavours/glitch/features/onboarding/index.jsx
View File

@ -3,7 +3,7 @@ import { useCallback } from 'react';
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link, Switch, Route, useHistory } from 'react-router-dom';
import { Link, Switch, Route } from 'react-router-dom';
import { useDispatch } from 'react-redux';
@ -34,11 +34,10 @@ const Onboarding = () => {
const account = useAppSelector(state => state.getIn(['accounts', me]));
const dispatch = useDispatch();
const intl = useIntl();
const history = useHistory();
const handleComposeClick = useCallback(() => {
dispatch(focusCompose(history, intl.formatMessage(messages.template)));
}, [dispatch, intl, history]);
dispatch(focusCompose(intl.formatMessage(messages.template)));
}, [dispatch, intl]);
return (
<Column>

29
app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
View File

@ -15,11 +15,11 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
import StarIcon from '@/material-icons/400-24px/star.svg?react';
import { replyCompose } from 'flavours/glitch/actions/compose';
import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions';
import { toggleReblog, toggleFavourite } from 'flavours/glitch/actions/interactions';
import { openModal } from 'flavours/glitch/actions/modal';
import { IconButton } from 'flavours/glitch/components/icon_button';
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
import { me, boostModal } from 'flavours/glitch/initial_state';
import { me } from 'flavours/glitch/initial_state';
import { makeGetStatus } from 'flavours/glitch/selectors';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
@ -63,13 +63,13 @@ class Footer extends ImmutablePureComponent {
};
_performReply = () => {
const { dispatch, status, onClose, history } = this.props;
const { dispatch, status, onClose } = this.props;
if (onClose) {
onClose(true);
}
dispatch(replyCompose(status, history));
dispatch(replyCompose(status));
};
handleReplyClick = () => {
@ -101,16 +101,12 @@ class Footer extends ImmutablePureComponent {
}
};
handleFavouriteClick = () => {
handleFavouriteClick = e => {
const { dispatch, status } = this.props;
const { signedIn } = this.props.identity;
if (signedIn) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
}
dispatch(toggleFavourite(status.get('id'), e && e.shiftKey));
} else {
dispatch(openModal({
modalType: 'INTERACTION',
@ -123,23 +119,12 @@ class Footer extends ImmutablePureComponent {
}
};
_performReblog = (status, privacy) => {
const { dispatch } = this.props;
dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
};
handleReblogClick = e => {
const { dispatch, status } = this.props;
const { signedIn } = this.props.identity;
if (signedIn) {
if (status.get('reblogged')) {
dispatch(unreblog({ statusId: status.get('id') }));
} else if ((e && e.shiftKey) || !boostModal) {
this._performReblog(status);
} else {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this._performReblog } }));
}
dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
} else {
dispatch(openModal({
modalType: 'INTERACTION',

15
app/javascript/flavours/glitch/features/status/components/action_bar.jsx
View File

@ -4,7 +4,6 @@ import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
@ -24,7 +23,6 @@ import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import { IconButton } from '../../../components/icon_button';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
@ -82,7 +80,6 @@ class ActionBar extends PureComponent {
onPin: PropTypes.func,
onEmbed: PropTypes.func,
intl: PropTypes.object.isRequired,
...WithRouterPropTypes,
};
handleReplyClick = () => {
@ -106,23 +103,23 @@ class ActionBar extends PureComponent {
};
handleDeleteClick = () => {
this.props.onDelete(this.props.status, this.props.history);
this.props.onDelete(this.props.status);
};
handleRedraftClick = () => {
this.props.onDelete(this.props.status, this.props.history, true);
this.props.onDelete(this.props.status, true);
};
handleEditClick = () => {
this.props.onEdit(this.props.status, this.props.history);
this.props.onEdit(this.props.status);
};
handleDirectClick = () => {
this.props.onDirect(this.props.status.get('account'), this.props.history);
this.props.onDirect(this.props.status.get('account'));
};
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.props.history);
this.props.onMention(this.props.status.get('account'));
};
handleMuteClick = () => {
@ -276,4 +273,4 @@ class ActionBar extends PureComponent {
}
export default withRouter(withIdentity(injectIntl(ActionBar)));
export default withIdentity(injectIntl(ActionBar));

50
app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
View File

@ -10,10 +10,8 @@ import {
directCompose,
} from '../../../actions/compose';
import {
reblog,
favourite,
unreblog,
unfavourite,
toggleReblog,
toggleFavourite,
pin,
unpin,
} from '../../../actions/interactions';
@ -25,7 +23,7 @@ import {
unmuteStatus,
deleteStatus,
} from '../../../actions/statuses';
import { boostModal, deleteModal } from '../../../initial_state';
import { deleteModal } from '../../../initial_state';
import { makeGetStatus } from '../../../selectors';
import DetailedStatus from '../components/detailed_status';
@ -52,7 +50,7 @@ const makeMapStateToProps = () => {
const mapDispatchToProps = (dispatch, { intl }) => ({
onReply (status, router) {
onReply (status) {
dispatch((_, getState) => {
let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) {
@ -61,37 +59,21 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
modalProps: {
message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm),
onConfirm: () => dispatch(replyCompose(status, router)),
onConfirm: () => dispatch(replyCompose(status)),
},
}));
} else {
dispatch(replyCompose(status, router));
dispatch(replyCompose(status));
}
});
},
onModalReblog (status, privacy) {
dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
},
onReblog (status, e) {
if (status.get('reblogged')) {
dispatch(unreblog({ statusId: status.get('id') }));
} else {
if (e.shiftKey || !boostModal) {
this.onModalReblog(status);
} else {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
}
}
dispatch(toggleReblog(status.get('id'), e.shiftKey));
},
onFavourite (status) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
}
onFavourite (status, e) {
dispatch(toggleFavourite(status.get('id'), e.shiftKey));
},
onPin (status) {
@ -112,27 +94,27 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}));
},
onDelete (status, history, withRedraft = false) {
onDelete (status, withRedraft = false) {
if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft));
dispatch(deleteStatus(status.get('id'), withRedraft));
} else {
dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
},
}));
}
},
onDirect (account, router) {
dispatch(directCompose(account, router));
onDirect (account) {
dispatch(directCompose(account));
},
onMention (account, router) {
dispatch(mentionCompose(account, router));
onMention (account) {
dispatch(mentionCompose(account));
},
onOpenMedia (media, index, lang) {

69
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -32,12 +32,10 @@ import {
directCompose,
} from '../../actions/compose';
import {
favourite,
unfavourite,
toggleFavourite,
bookmark,
unbookmark,
reblog,
unreblog,
toggleReblog,
pin,
unpin,
addReaction,
@ -61,7 +59,7 @@ import {
import ColumnHeader from '../../components/column_header';
import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
import StatusContainer from '../../containers/status_container';
import { boostModal, favouriteModal, deleteModal } from '../../initial_state';
import { deleteModal } from '../../initial_state';
import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
import Column from '../ui/components/column';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
@ -270,30 +268,13 @@ class Status extends ImmutablePureComponent {
this.setState({ showMedia: !this.state.showMedia });
};
handleModalFavourite = (status) => {
this.props.dispatch(favourite(status));
};
handleFavouriteClick = (status, e) => {
const { dispatch } = this.props;
const { signedIn } = this.props.identity;
if (signedIn) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
if ((e && e.shiftKey) || !favouriteModal) {
this.handleModalFavourite(status);
} else {
dispatch(openModal({
modalType: 'FAVOURITE',
modalProps: {
status,
onFavourite: this.handleModalFavourite,
},
}));
}
}
dispatch(toggleFavourite(status.get('id'), e && e.shiftKey));
} else {
dispatch(openModal({
modalType: 'INTERACTION',
@ -339,11 +320,11 @@ class Status extends ImmutablePureComponent {
message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm),
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
onConfirm: () => dispatch(replyCompose(status, this.props.history)),
onConfirm: () => dispatch(replyCompose(status)),
},
}));
} else {
dispatch(replyCompose(status, this.props.history));
dispatch(replyCompose(status));
}
} else {
dispatch(openModal({
@ -357,28 +338,12 @@ class Status extends ImmutablePureComponent {
}
};
handleModalReblog = (status, privacy) => {
const { dispatch } = this.props;
if (status.get('reblogged')) {
dispatch(unreblog({ statusId: status.get('id') }));
} else {
dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
}
};
handleReblogClick = (status, e) => {
const { settings, dispatch } = this.props;
const { dispatch } = this.props;
const { signedIn } = this.props.identity;
if (signedIn) {
if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog, missingMediaDescription: true } }));
} else if ((e && e.shiftKey) || !boostModal) {
this.handleModalReblog(status);
} else {
dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog } }));
}
dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
} else {
dispatch(openModal({
modalType: 'INTERACTION',
@ -399,33 +364,33 @@ class Status extends ImmutablePureComponent {
}
};
handleDeleteClick = (status, history, withRedraft = false) => {
handleDeleteClick = (status, withRedraft = false) => {
const { dispatch, intl } = this.props;
if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft));
dispatch(deleteStatus(status.get('id'), withRedraft));
} else {
dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
},
}));
}
};
handleEditClick = (status, history) => {
this.props.dispatch(editStatus(status.get('id'), history));
handleEditClick = (status) => {
this.props.dispatch(editStatus(status.get('id')));
};
handleDirectClick = (account, history) => {
this.props.dispatch(directCompose(account, history));
handleDirectClick = (account) => {
this.props.dispatch(directCompose(account));
};
handleMentionClick = (account, history) => {
this.props.dispatch(mentionCompose(account, history));
handleMentionClick = (account) => {
this.props.dispatch(mentionCompose(account));
};
handleOpenMedia = (media, index, lang) => {

4
app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
View File

@ -10,7 +10,7 @@ import { scrollRight } from '../../../scroll';
import BundleContainer from '../containers/bundle_container';
import {
Compose,
Notifications,
NotificationsWrapper,
HomeTimeline,
CommunityTimeline,
PublicTimeline,
@ -32,7 +32,7 @@ import NavigationPanel from './navigation_panel';
const componentMap = {
'COMPOSE': Compose,
'HOME': HomeTimeline,
'NOTIFICATIONS': Notifications,
'NOTIFICATIONS': NotificationsWrapper,
'PUBLIC': PublicTimeline,
'REMOTE': PublicTimeline,
'COMMUNITY': CommunityTimeline,

9
app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
View File

@ -33,6 +33,7 @@ import { NavigationPortal } from 'flavours/glitch/components/navigation_portal';
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
import { timelinePreview, trendsEnabled } from 'flavours/glitch/initial_state';
import { transientSingleColumn } from 'flavours/glitch/is_mobile';
import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
import { preferencesLink } from 'flavours/glitch/utils/backend_links';
import ColumnLink from './column_link';
@ -60,15 +61,19 @@ const messages = defineMessages({
});
const NotificationsLink = () => {
const optedInGroupedNotifications = useSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
const count = useSelector(state => state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0);
const intl = useIntl();
const newCount = useSelector(selectUnreadNotificationGroupsCount);
return (
<ColumnLink
key='notifications'
transparent
to='/notifications'
icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={count} className='column-link__icon' />}
activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={count} className='column-link__icon' />}
icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
text={intl.formatMessage(messages.notifications)}
/>
);

19
app/javascript/flavours/glitch/features/ui/index.jsx
View File

@ -12,8 +12,9 @@ import Favico from 'favico.js';
import { debounce } from 'lodash';
import { HotKeys } from 'react-hotkeys';
import { changeLayout } from 'flavours/glitch/actions/app';
import { focusApp, unfocusApp, changeLayout } from 'flavours/glitch/actions/app';
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
import { initializeNotifications } from 'flavours/glitch/actions/notifications_migration';
import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
import { HoverCardController } from 'flavours/glitch/components/hover_card_controller';
import { Permalink } from 'flavours/glitch/components/permalink';
@ -24,10 +25,10 @@ import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
import { clearHeight } from '../../actions/height_cache';
import { expandNotifications, notificationsSetVisibility } from '../../actions/notifications';
import { notificationsSetVisibility } from '../../actions/notifications';
import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
import { expandHomeTimeline } from '../../actions/timelines';
import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding } from '../../initial_state';
import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding, disableHoverCards } from '../../initial_state';
import BundleColumnError from './components/bundle_column_error';
import Header from './components/header';
@ -51,7 +52,7 @@ import {
Favourites,
DirectTimeline,
HashtagTimeline,
Notifications,
NotificationsWrapper,
NotificationRequests,
NotificationRequest,
FollowRequests,
@ -74,6 +75,7 @@ import {
} from './util/async-components';
import { ColumnsContextProvider } from './util/columns_context';
import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
// Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import '../../components/status';
@ -214,7 +216,7 @@ class SwitchingColumnsArea extends PureComponent {
<WrappedRoute path='/tags/:id' component={HashtagTimeline} content={children} />
<WrappedRoute path='/links/:url' component={LinkTimeline} content={children} />
<WrappedRoute path='/lists/:id' component={ListTimeline} content={children} />
<WrappedRoute path='/notifications' component={Notifications} content={children} exact />
<WrappedRoute path='/notifications' component={NotificationsWrapper} content={children} exact />
<WrappedRoute path='/notifications/requests' component={NotificationRequests} content={children} exact />
<WrappedRoute path='/notifications/requests/:id' component={NotificationRequest} content={children} exact />
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
@ -304,7 +306,10 @@ class UI extends PureComponent {
const visibility = !document[this.visibilityHiddenProp];
this.props.dispatch(notificationsSetVisibility(visibility));
if (visibility) {
this.props.dispatch(focusApp());
this.props.dispatch(submitMarkers({ immediate: true }));
} else {
this.props.dispatch(unfocusApp());
}
};
@ -419,7 +424,7 @@ class UI extends PureComponent {
if (signedIn) {
this.props.dispatch(fetchMarkers());
this.props.dispatch(expandHomeTimeline());
this.props.dispatch(expandNotifications());
this.props.dispatch(initializeNotifications());
this.props.dispatch(fetchServerTranslationLanguages());
setTimeout(() => this.props.dispatch(fetchServer()), 3000);
@ -651,7 +656,7 @@ class UI extends PureComponent {
{layout !== 'mobile' && <PictureInPicture />}
<NotificationsContainer />
<HoverCardController />
{!disableHoverCards && <HoverCardController />}
<LoadingBarContainer className='loading-bar' />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />

10
app/javascript/flavours/glitch/features/ui/util/async-components.js
View File

@ -7,7 +7,15 @@ export function Compose () {
}
export function Notifications () {
return import(/* webpackChunkName: "flavours/glitch/async/notifications" */'../../notifications');
return import(/* webpackChunkName: "flavours/glitch/async/notifications_v1" */'../../notifications');
}
export function Notifications_v2 () {
return import(/* webpackChunkName: "flavours/glitch/async/notifications_v2" */'../../notifications_v2');
}
export function NotificationsWrapper () {
return import(/* webpackChunkName: "flavours/glitch/async/notifications" */'../../notifications_wrapper');
}
export function HomeTimeline () {

2
app/javascript/flavours/glitch/initial_state.js
View File

@ -17,6 +17,7 @@
* @property {boolean} crop_images
* @property {boolean=} delete_modal
* @property {boolean=} disable_swiping
* @property {boolean=} disable_hover_cards
* @property {string=} disabled_account_id
* @property {string} display_media
* @property {string} domain
@ -109,6 +110,7 @@ export const boostModal = getMeta('boost_modal');
export const cropImages = getMeta('crop_images');
export const deleteModal = getMeta('delete_modal');
export const disableSwiping = getMeta('disable_swiping');
export const disableHoverCards = getMeta('disable_hover_cards');
export const disabledAccountId = getMeta('disabled_account_id');
export const displayMedia = getMeta('display_media');
export const domain = getMeta('domain');

3
app/javascript/flavours/glitch/locales/de.json
View File

@ -154,6 +154,5 @@
"status.in_reply_to": "Dieser Toot ist eine Antwort",
"status.is_poll": "Dieser Toot ist eine Umfrage",
"status.local_only": "Nur auf deiner Instanz sichtbar",
"status.uncollapse": "Ausklappen",
"suggestions.dismiss": "Vorschlag ablehnen"
"status.uncollapse": "Ausklappen"
}

3
app/javascript/flavours/glitch/locales/es-AR.json
View File

@ -155,6 +155,5 @@
"status.in_reply_to": "Esta publicación es una respuesta",
"status.is_poll": "Esta publicación es una encuesta",
"status.local_only": "Sólo visible para tu instancia",
"status.uncollapse": "Descolapsar",
"suggestions.dismiss": "Descartar sugerencia"
"status.uncollapse": "Descolapsar"
}

5
app/javascript/flavours/glitch/locales/ko.json
View File

@ -25,6 +25,9 @@
"compose.content-type.plain_meta": "고급 양식 없이 작성",
"compose.disable_threaded_mode": "글타래 모드 비활성화",
"compose.enable_threaded_mode": "글타래 모드 활성화",
"compose_form.sensitive.hide": "{count, plural, other {미디어를 민감함으로 표시}}",
"compose_form.sensitive.marked": "{count, plural, other {미디어가 민감함으로 표시되었습니다}}",
"compose_form.sensitive.unmarked": "{count, plural, other {미디어가 민감함으로 표시되지 않았습니다}}",
"confirmation_modal.do_not_ask_again": "다음부터 확인창을 띄우지 않기",
"confirmations.deprecated_settings.confirm": "마스토돈 설정 사용",
"confirmations.deprecated_settings.message": "사용하던 몇몇 기기별 글리치 {app_settings}은 마스토돈 {preferences}으로 대체되었습니다:",
@ -61,6 +64,7 @@
"notification_purge.btn_invert": "선택반전",
"notification_purge.btn_none": "전체선택해제",
"notification_purge.start": "알림 삭제모드로 들어가기",
"notifications.column_settings.filter_bar.show_bar": "필터 막대 표시",
"notifications.marked_clear": "선택된 알림 모두 삭제",
"notifications.marked_clear_confirmation": "정말로 선택된 알림들을 영구적으로 삭제할까요?",
"settings.always_show_spoilers_field": "열람주의 항목을 언제나 활성화",
@ -124,6 +128,7 @@
"settings.shared_settings_link": "사용자 설정",
"settings.show_action_bar": "접힌 글에 액션 버튼들 보이기",
"settings.show_content_type_choice": "글을 작성할 때 콘텐트 타입을 고를 수 있도록 합니다",
"settings.show_published_toast": "게시물을 게시/저장할 때 토스트 표시",
"settings.show_reply_counter": "대략적인 답글 개수를 표시합니다",
"settings.side_arm": "보조 작성 버튼:",
"settings.side_arm.none": "없음",

3
app/javascript/flavours/glitch/locales/zh-CN.json
View File

@ -155,6 +155,5 @@
"status.in_reply_to": "此嘟文是回复",
"status.is_poll": "此嘟文是投票",
"status.local_only": "此嘟文仅本站可见",
"status.uncollapse": "展开",
"suggestions.dismiss": "关闭建议"
"status.uncollapse": "展开"
}

3
app/javascript/flavours/glitch/locales/zh-TW.json
View File

@ -151,6 +151,5 @@
"status.in_reply_to": "貼文有回覆",
"status.is_poll": "貼文有投票",
"status.local_only": "只在此實例可見",
"status.uncollapse": "展開",
"suggestions.dismiss": "關閉建議"
"status.uncollapse": "展開"
}

207
app/javascript/flavours/glitch/models/notification_group.ts Normal file
View File

@ -0,0 +1,207 @@
import type {
ApiAccountRelationshipSeveranceEventJSON,
ApiAccountWarningJSON,
BaseNotificationGroupJSON,
ApiNotificationGroupJSON,
ApiNotificationJSON,
NotificationType,
NotificationWithStatusType,
} from 'flavours/glitch/api_types/notifications';
import type { ApiReportJSON } from 'flavours/glitch/api_types/reports';
// Maximum number of avatars displayed in a notification group
// This corresponds to the max lenght of `group.sampleAccountIds`
export const NOTIFICATIONS_GROUP_MAX_AVATARS = 8;
interface BaseNotificationGroup
extends Omit<BaseNotificationGroupJSON, 'sample_accounts'> {
sampleAccountIds: string[];
}
interface BaseNotificationWithStatus<Type extends NotificationWithStatusType>
extends BaseNotificationGroup {
type: Type;
statusId: string;
}
interface BaseNotification<Type extends NotificationType>
extends BaseNotificationGroup {
type: Type;
}
export type NotificationGroupFavourite =
BaseNotificationWithStatus<'favourite'>;
export type NotificationGroupReblog = BaseNotificationWithStatus<'reblog'>;
export type NotificationGroupStatus = BaseNotificationWithStatus<'status'>;
export type NotificationGroupMention = BaseNotificationWithStatus<'mention'>;
export type NotificationGroupPoll = BaseNotificationWithStatus<'poll'>;
export type NotificationGroupUpdate = BaseNotificationWithStatus<'update'>;
export type NotificationGroupFollow = BaseNotification<'follow'>;
export type NotificationGroupFollowRequest = BaseNotification<'follow_request'>;
export type NotificationGroupAdminSignUp = BaseNotification<'admin.sign_up'>;
export type AccountWarningAction =
| 'none'
| 'disable'
| 'mark_statuses_as_sensitive'
| 'delete_statuses'
| 'sensitive'
| 'silence'
| 'suspend';
export interface AccountWarning
extends Omit<ApiAccountWarningJSON, 'target_account'> {
targetAccountId: string;
}
export interface NotificationGroupModerationWarning
extends BaseNotification<'moderation_warning'> {
moderationWarning: AccountWarning;
}
type AccountRelationshipSeveranceEvent =
ApiAccountRelationshipSeveranceEventJSON;
export interface NotificationGroupSeveredRelationships
extends BaseNotification<'severed_relationships'> {
event: AccountRelationshipSeveranceEvent;
}
interface Report extends Omit<ApiReportJSON, 'target_account'> {
targetAccountId: string;
}
export interface NotificationGroupAdminReport
extends BaseNotification<'admin.report'> {
report: Report;
}
export type NotificationGroup =
| NotificationGroupFavourite
| NotificationGroupReblog
| NotificationGroupStatus
| NotificationGroupMention
| NotificationGroupPoll
| NotificationGroupUpdate
| NotificationGroupFollow
| NotificationGroupFollowRequest
| NotificationGroupModerationWarning
| NotificationGroupSeveredRelationships
| NotificationGroupAdminSignUp
| NotificationGroupAdminReport;
function createReportFromJSON(reportJSON: ApiReportJSON): Report {
const { target_account, ...report } = reportJSON;
return {
targetAccountId: target_account.id,
...report,
};
}
function createAccountWarningFromJSON(
warningJSON: ApiAccountWarningJSON,
): AccountWarning {
const { target_account, ...warning } = warningJSON;
return {
targetAccountId: target_account.id,
...warning,
};
}
function createAccountRelationshipSeveranceEventFromJSON(
eventJson: ApiAccountRelationshipSeveranceEventJSON,
): AccountRelationshipSeveranceEvent {
return eventJson;
}
export function createNotificationGroupFromJSON(
groupJson: ApiNotificationGroupJSON,
): NotificationGroup {
const { sample_accounts, ...group } = groupJson;
const sampleAccountIds = sample_accounts.map((account) => account.id);
switch (group.type) {
case 'favourite':
case 'reblog':
case 'status':
case 'mention':
case 'poll':
case 'update': {
const { status, ...groupWithoutStatus } = group;
return {
statusId: status.id,
sampleAccountIds,
...groupWithoutStatus,
};
}
case 'admin.report': {
const { report, ...groupWithoutTargetAccount } = group;
return {
report: createReportFromJSON(report),
sampleAccountIds,
...groupWithoutTargetAccount,
};
}
case 'severed_relationships':
return {
...group,
event: createAccountRelationshipSeveranceEventFromJSON(group.event),
sampleAccountIds,
};
case 'moderation_warning': {
const { moderation_warning, ...groupWithoutModerationWarning } = group;
return {
...groupWithoutModerationWarning,
moderationWarning: createAccountWarningFromJSON(moderation_warning),
sampleAccountIds,
};
}
default:
return {
sampleAccountIds,
...group,
};
}
}
export function createNotificationGroupFromNotificationJSON(
notification: ApiNotificationJSON,
) {
const group = {
sampleAccountIds: [notification.account.id],
group_key: notification.group_key,
notifications_count: 1,
type: notification.type,
most_recent_notification_id: notification.id,
page_min_id: notification.id,
page_max_id: notification.id,
latest_page_notification_at: notification.created_at,
} as NotificationGroup;
switch (notification.type) {
case 'favourite':
case 'reblog':
case 'status':
case 'mention':
case 'poll':
case 'update':
return { ...group, statusId: notification.status.id };
case 'admin.report':
return { ...group, report: createReportFromJSON(notification.report) };
case 'severed_relationships':
return {
...group,
event: createAccountRelationshipSeveranceEventFromJSON(
notification.event,
),
};
case 'moderation_warning':
return {
...group,
moderationWarning: createAccountWarningFromJSON(
notification.moderation_warning,
),
};
default:
return group;
}
}

2
app/javascript/flavours/glitch/reducers/index.ts
View File

@ -25,6 +25,7 @@ import { markersReducer } from './markers';
import media_attachments from './media_attachments';
import meta from './meta';
import { modalReducer } from './modal';
import { notificationGroupsReducer } from './notification_groups';
import { notificationPolicyReducer } from './notification_policy';
import { notificationRequestsReducer } from './notification_requests';
import notifications from './notifications';
@ -68,6 +69,7 @@ const reducers = {
search,
media_attachments,
notifications,
notificationGroups: notificationGroupsReducer,
height_cache,
custom_emojis,
lists,

25
app/javascript/flavours/glitch/reducers/markers.ts
View File

@ -1,6 +1,10 @@
import { createReducer } from '@reduxjs/toolkit';
import { submitMarkersAction } from 'flavours/glitch/actions/markers';
import {
submitMarkersAction,
fetchMarkers,
} from 'flavours/glitch/actions/markers';
import { compareId } from 'flavours/glitch/compare_id';
const initialState = {
home: '0',
@ -15,4 +19,23 @@ export const markersReducer = createReducer(initialState, (builder) => {
if (notifications) state.notifications = notifications;
},
);
builder.addCase(
fetchMarkers.fulfilled,
(
state,
{
payload: {
markers: { home, notifications },
},
},
) => {
if (home && compareId(home.last_read_id, state.home) > 0)
state.home = home.last_read_id;
if (
notifications &&
compareId(notifications.last_read_id, state.notifications) > 0
)
state.notifications = notifications.last_read_id;
},
);
});

508
app/javascript/flavours/glitch/reducers/notification_groups.ts Normal file
View File

@ -0,0 +1,508 @@
import { createReducer, isAnyOf } from '@reduxjs/toolkit';
import {
authorizeFollowRequestSuccess,
blockAccountSuccess,
muteAccountSuccess,
rejectFollowRequestSuccess,
} from 'flavours/glitch/actions/accounts_typed';
import { focusApp, unfocusApp } from 'flavours/glitch/actions/app';
import { blockDomainSuccess } from 'flavours/glitch/actions/domain_blocks_typed';
import { fetchMarkers } from 'flavours/glitch/actions/markers';
import {
clearNotifications,
fetchNotifications,
fetchNotificationsGap,
processNewNotificationForGroups,
loadPending,
updateScrollPosition,
markNotificationsAsRead,
mountNotifications,
unmountNotifications,
} from 'flavours/glitch/actions/notification_groups';
import {
disconnectTimeline,
timelineDelete,
} from 'flavours/glitch/actions/timelines_typed';
import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';
import { compareId } from 'flavours/glitch/compare_id';
import { usePendingItems } from 'flavours/glitch/initial_state';
import {
NOTIFICATIONS_GROUP_MAX_AVATARS,
createNotificationGroupFromJSON,
createNotificationGroupFromNotificationJSON,
} from 'flavours/glitch/models/notification_group';
import type { NotificationGroup } from 'flavours/glitch/models/notification_group';
const NOTIFICATIONS_TRIM_LIMIT = 50;
export interface NotificationGap {
type: 'gap';
maxId?: string;
sinceId?: string;
}
interface NotificationGroupsState {
groups: (NotificationGroup | NotificationGap)[];
pendingGroups: (NotificationGroup | NotificationGap)[];
scrolledToTop: boolean;
isLoading: boolean;
lastReadId: string;
mounted: number;
isTabVisible: boolean;
}
const initialState: NotificationGroupsState = {
groups: [],
pendingGroups: [], // holds pending groups in slow mode
scrolledToTop: false,
isLoading: false,
// The following properties are used to track unread notifications
lastReadId: '0', // used for unread notifications
mounted: 0, // number of mounted notification list components, usually 0 or 1
isTabVisible: true,
};
function filterNotificationsForAccounts(
groups: NotificationGroupsState['groups'],
accountIds: string[],
onlyForType?: string,
) {
groups = groups
.map((group) => {
if (
group.type !== 'gap' &&
(!onlyForType || group.type === onlyForType)
) {
const previousLength = group.sampleAccountIds.length;
group.sampleAccountIds = group.sampleAccountIds.filter(
(id) => !accountIds.includes(id),
);
const newLength = group.sampleAccountIds.length;
const removed = previousLength - newLength;
group.notifications_count -= removed;
}
return group;
})
.filter(
(group) => group.type === 'gap' || group.sampleAccountIds.length > 0,
);
mergeGaps(groups);
return groups;
}
function filterNotificationsForStatus(
groups: NotificationGroupsState['groups'],
statusId: string,
) {
groups = groups.filter(
(group) =>
group.type === 'gap' ||
!('statusId' in group) ||
group.statusId !== statusId,
);
mergeGaps(groups);
return groups;
}
function removeNotificationsForAccounts(
state: NotificationGroupsState,
accountIds: string[],
onlyForType?: string,
) {
state.groups = filterNotificationsForAccounts(
state.groups,
accountIds,
onlyForType,
);
state.pendingGroups = filterNotificationsForAccounts(
state.pendingGroups,
accountIds,
onlyForType,
);
}
function removeNotificationsForStatus(
state: NotificationGroupsState,
statusId: string,
) {
state.groups = filterNotificationsForStatus(state.groups, statusId);
state.pendingGroups = filterNotificationsForStatus(
state.pendingGroups,
statusId,
);
}
function isNotificationGroup(
groupOrGap: NotificationGroup | NotificationGap,
): groupOrGap is NotificationGroup {
return groupOrGap.type !== 'gap';
}
// Merge adjacent gaps in `groups` in-place
function mergeGaps(groups: NotificationGroupsState['groups']) {
for (let i = 0; i < groups.length; i++) {
const firstGroupOrGap = groups[i];
if (firstGroupOrGap?.type === 'gap') {
let lastGap = firstGroupOrGap;
let j = i + 1;
for (; j < groups.length; j++) {
const groupOrGap = groups[j];
if (groupOrGap?.type === 'gap') lastGap = groupOrGap;
else break;
}
if (j - i > 1) {
groups.splice(i, j - i, {
type: 'gap',
maxId: firstGroupOrGap.maxId,
sinceId: lastGap.sinceId,
});
}
}
}
}
// Checks if `groups[index-1]` and `groups[index]` are gaps, and merge them in-place if they are
function mergeGapsAround(
groups: NotificationGroupsState['groups'],
index: number,
) {
if (index > 0) {
const potentialFirstGap = groups[index - 1];
const potentialSecondGap = groups[index];
if (
potentialFirstGap?.type === 'gap' &&
potentialSecondGap?.type === 'gap'
) {
groups.splice(index - 1, 2, {
type: 'gap',
maxId: potentialFirstGap.maxId,
sinceId: potentialSecondGap.sinceId,
});
}
}
}
function processNewNotification(
groups: NotificationGroupsState['groups'],
notification: ApiNotificationJSON,
) {
const existingGroupIndex = groups.findIndex(
(group) =>
group.type !== 'gap' && group.group_key === notification.group_key,
);
// In any case, we are going to add a group at the top
// If there is currently a gap at the top, now is the time to update it
if (groups.length > 0 && groups[0]?.type === 'gap') {
groups[0].maxId = notification.id;
}
if (existingGroupIndex > -1) {
const existingGroup = groups[existingGroupIndex];
if (
existingGroup &&
existingGroup.type !== 'gap' &&
!existingGroup.sampleAccountIds.includes(notification.account.id) // This can happen for example if you like, then unlike, then like again the same post
) {
// Update the existing group
if (
existingGroup.sampleAccountIds.unshift(notification.account.id) >
NOTIFICATIONS_GROUP_MAX_AVATARS
)
existingGroup.sampleAccountIds.pop();
existingGroup.most_recent_notification_id = notification.id;
existingGroup.page_max_id = notification.id;
existingGroup.latest_page_notification_at = notification.created_at;
existingGroup.notifications_count += 1;
groups.splice(existingGroupIndex, 1);
mergeGapsAround(groups, existingGroupIndex);
groups.unshift(existingGroup);
}
} else {
// Create a new group
groups.unshift(createNotificationGroupFromNotificationJSON(notification));
}
}
function trimNotifications(state: NotificationGroupsState) {
if (state.scrolledToTop) {
state.groups.splice(NOTIFICATIONS_TRIM_LIMIT);
}
}
function shouldMarkNewNotificationsAsRead(
{
isTabVisible,
scrolledToTop,
mounted,
lastReadId,
groups,
}: NotificationGroupsState,
ignoreScroll = false,
) {
const isMounted = mounted > 0;
const oldestGroup = groups.findLast(isNotificationGroup);
const hasMore = groups.at(-1)?.type === 'gap';
const oldestGroupReached =
!hasMore ||
lastReadId === '0' ||
(oldestGroup?.page_min_id &&
compareId(oldestGroup.page_min_id, lastReadId) <= 0);
return (
isTabVisible &&
(ignoreScroll || scrolledToTop) &&
isMounted &&
oldestGroupReached
);
}
function updateLastReadId(
state: NotificationGroupsState,
group: NotificationGroup | undefined = undefined,
) {
if (shouldMarkNewNotificationsAsRead(state)) {
group = group ?? state.groups.find(isNotificationGroup);
if (
group?.page_max_id &&
compareId(state.lastReadId, group.page_max_id) < 0
)
state.lastReadId = group.page_max_id;
}
}
export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
initialState,
(builder) => {
builder
.addCase(fetchNotifications.fulfilled, (state, action) => {
state.groups = action.payload.map((json) =>
json.type === 'gap' ? json : createNotificationGroupFromJSON(json),
);
state.isLoading = false;
updateLastReadId(state);
})
.addCase(fetchNotificationsGap.fulfilled, (state, action) => {
const { notifications } = action.payload;
// find the gap in the existing notifications
const gapIndex = state.groups.findIndex(
(groupOrGap) =>
groupOrGap.type === 'gap' &&
groupOrGap.sinceId === action.meta.arg.gap.sinceId &&
groupOrGap.maxId === action.meta.arg.gap.maxId,
);
if (gapIndex < 0)
// We do not know where to insert, let's return
return;
// Filling a disconnection gap means we're getting historical data
// about groups we may know or may not know about.
// The notifications timeline is split in two by the gap, with
// group information newer than the gap, and group information older
// than the gap.
// Filling a gap should not touch anything before the gap, so any
// information on groups already appearing before the gap should be
// discarded, while any information on groups appearing after the gap
// can be updated and re-ordered.
const oldestPageNotification = notifications.at(-1)?.page_min_id;
// replace the gap with the notifications + a new gap
const newerGroupKeys = state.groups
.slice(0, gapIndex)
.filter(isNotificationGroup)
.map((group) => group.group_key);
const toInsert: NotificationGroupsState['groups'] = notifications
.map((json) => createNotificationGroupFromJSON(json))
.filter(
(notification) => !newerGroupKeys.includes(notification.group_key),
);
const apiGroupKeys = (toInsert as NotificationGroup[]).map(
(group) => group.group_key,
);
const sinceId = action.meta.arg.gap.sinceId;
if (
notifications.length > 0 &&
!(
oldestPageNotification &&
sinceId &&
compareId(oldestPageNotification, sinceId) <= 0
)
) {
// If we get an empty page, it means we reached the bottom, so we do not need to insert a new gap
// Similarly, if we've fetched more than the gap's, this means we have completely filled it
toInsert.push({
type: 'gap',
maxId: notifications.at(-1)?.page_max_id,
sinceId,
} as NotificationGap);
}
// Remove older groups covered by the API
state.groups = state.groups.filter(
(groupOrGap) =>
groupOrGap.type !== 'gap' &&
!apiGroupKeys.includes(groupOrGap.group_key),
);
// Replace the gap with API results (+ the new gap if needed)
state.groups.splice(gapIndex, 1, ...toInsert);
// Finally, merge any adjacent gaps that could have been created by filtering
// groups earlier
mergeGaps(state.groups);
state.isLoading = false;
updateLastReadId(state);
})
.addCase(processNewNotificationForGroups.fulfilled, (state, action) => {
const notification = action.payload;
processNewNotification(
usePendingItems ? state.pendingGroups : state.groups,
notification,
);
updateLastReadId(state);
trimNotifications(state);
})
.addCase(disconnectTimeline, (state, action) => {
if (action.payload.timeline === 'home') {
if (state.groups.length > 0 && state.groups[0]?.type !== 'gap') {
state.groups.unshift({
type: 'gap',
sinceId: state.groups[0]?.page_min_id,
});
}
}
})
.addCase(timelineDelete, (state, action) => {
removeNotificationsForStatus(state, action.payload.statusId);
})
.addCase(clearNotifications.pending, (state) => {
state.groups = [];
state.pendingGroups = [];
})
.addCase(blockAccountSuccess, (state, action) => {
removeNotificationsForAccounts(state, [action.payload.relationship.id]);
})
.addCase(muteAccountSuccess, (state, action) => {
if (action.payload.relationship.muting_notifications)
removeNotificationsForAccounts(state, [
action.payload.relationship.id,
]);
})
.addCase(blockDomainSuccess, (state, action) => {
removeNotificationsForAccounts(
state,
action.payload.accounts.map((account) => account.id),
);
})
.addCase(loadPending, (state) => {
// First, remove any existing group and merge data
state.pendingGroups.forEach((group) => {
if (group.type !== 'gap') {
const existingGroupIndex = state.groups.findIndex(
(groupOrGap) =>
isNotificationGroup(groupOrGap) &&
groupOrGap.group_key === group.group_key,
);
if (existingGroupIndex > -1) {
const existingGroup = state.groups[existingGroupIndex];
if (existingGroup && existingGroup.type !== 'gap') {
group.notifications_count += existingGroup.notifications_count;
group.sampleAccountIds = group.sampleAccountIds
.concat(existingGroup.sampleAccountIds)
.slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS);
state.groups.splice(existingGroupIndex, 1);
}
}
}
trimNotifications(state);
});
// Then build the consolidated list and clear pending groups
state.groups = state.pendingGroups.concat(state.groups);
state.pendingGroups = [];
})
.addCase(updateScrollPosition, (state, action) => {
state.scrolledToTop = action.payload.top;
updateLastReadId(state);
trimNotifications(state);
})
.addCase(markNotificationsAsRead, (state) => {
const mostRecentGroup = state.groups.find(isNotificationGroup);
if (
mostRecentGroup?.page_max_id &&
compareId(state.lastReadId, mostRecentGroup.page_max_id) < 0
)
state.lastReadId = mostRecentGroup.page_max_id;
})
.addCase(fetchMarkers.fulfilled, (state, action) => {
if (
action.payload.markers.notifications &&
compareId(
state.lastReadId,
action.payload.markers.notifications.last_read_id,
) < 0
)
state.lastReadId = action.payload.markers.notifications.last_read_id;
})
.addCase(mountNotifications, (state) => {
state.mounted += 1;
updateLastReadId(state);
})
.addCase(unmountNotifications, (state) => {
state.mounted -= 1;
})
.addCase(focusApp, (state) => {
state.isTabVisible = true;
updateLastReadId(state);
})
.addCase(unfocusApp, (state) => {
state.isTabVisible = false;
})
.addMatcher(
isAnyOf(authorizeFollowRequestSuccess, rejectFollowRequestSuccess),
(state, action) => {
removeNotificationsForAccounts(
state,
[action.payload.id],
'follow_request',
);
},
)
.addMatcher(
isAnyOf(fetchNotifications.pending, fetchNotificationsGap.pending),
(state) => {
state.isLoading = true;
},
)
.addMatcher(
isAnyOf(fetchNotifications.rejected, fetchNotificationsGap.rejected),
(state) => {
state.isLoading = false;
},
);
},
);

4
app/javascript/flavours/glitch/reducers/notifications.js
View File

@ -12,6 +12,7 @@ import {
import {
fetchMarkers,
} from '../actions/markers';
import { clearNotifications } from '../actions/notification_groups';
import {
NOTIFICATIONS_MOUNT,
NOTIFICATIONS_UNMOUNT,
@ -21,7 +22,6 @@ import {
NOTIFICATIONS_EXPAND_REQUEST,
NOTIFICATIONS_EXPAND_FAIL,
NOTIFICATIONS_FILTER_SET,
NOTIFICATIONS_CLEAR,
NOTIFICATIONS_SCROLL_TOP,
NOTIFICATIONS_LOAD_PENDING,
NOTIFICATIONS_DELETE_MARKED_REQUEST,
@ -332,7 +332,7 @@ export default function notifications(state = initialState, action) {
case authorizeFollowRequestSuccess.type:
case rejectFollowRequestSuccess.type:
return filterNotifications(state, [action.payload.id], 'follow_request');
case NOTIFICATIONS_CLEAR:
case clearNotifications.pending.type:
return state.set('items', ImmutableList()).set('pendingItems', ImmutableList()).set('hasMore', false);
case timelineDelete.type:
return deleteByStatus(state, action.payload.statusId);

34
app/javascript/flavours/glitch/selectors/notifications.ts Normal file
View File

@ -0,0 +1,34 @@
import { createSelector } from '@reduxjs/toolkit';
import { compareId } from 'flavours/glitch/compare_id';
import type { RootState } from 'flavours/glitch/store';
export const selectUnreadNotificationGroupsCount = createSelector(
[
(s: RootState) => s.notificationGroups.lastReadId,
(s: RootState) => s.notificationGroups.pendingGroups,
(s: RootState) => s.notificationGroups.groups,
],
(notificationMarker, pendingGroups, groups) => {
return (
groups.filter(
(group) =>
group.type !== 'gap' &&
group.page_max_id &&
compareId(group.page_max_id, notificationMarker) > 0,
).length +
pendingGroups.filter(
(group) =>
group.type !== 'gap' &&
group.page_max_id &&
compareId(group.page_max_id, notificationMarker) > 0,
).length
);
},
);
export const selectPendingNotificationGroupsCount = createSelector(
[(s: RootState) => s.notificationGroups.pendingGroups],
(pendingGroups) =>
pendingGroups.filter((group) => group.type !== 'gap').length,
);

40
app/javascript/flavours/glitch/selectors/settings.ts Normal file
View File

@ -0,0 +1,40 @@
import type { RootState } from 'flavours/glitch/store';
/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
// state.settings is not yet typed, so we disable some ESLint checks for those selectors
export const selectSettingsNotificationsShows = (state: RootState) =>
state.settings.getIn(['notifications', 'shows']).toJS() as Record<
string,
boolean
>;
export const selectSettingsNotificationsExcludedTypes = (state: RootState) =>
Object.entries(selectSettingsNotificationsShows(state))
.filter(([_type, enabled]) => !enabled)
.map(([type, _enabled]) => type);
export const selectSettingsNotificationsQuickFilterShow = (state: RootState) =>
state.settings.getIn(['notifications', 'quickFilter', 'show']) as boolean;
export const selectSettingsNotificationsQuickFilterActive = (
state: RootState,
) => state.settings.getIn(['notifications', 'quickFilter', 'active']) as string;
export const selectSettingsNotificationsQuickFilterAdvanced = (
state: RootState,
) =>
state.settings.getIn(['notifications', 'quickFilter', 'advanced']) as boolean;
export const selectSettingsNotificationsShowUnread = (state: RootState) =>
state.settings.getIn(['notifications', 'showUnread']) as boolean;
export const selectNeedsNotificationPermission = (state: RootState) =>
(state.settings.getIn(['notifications', 'alerts']).includes(true) &&
state.notifications.get('browserSupport') &&
state.notifications.get('browserPermission') === 'default' &&
!state.settings.getIn([
'notifications',
'dismissPermissionBanner',
])) as boolean;
/* eslint-enable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */

Some files were not shown because too many files have changed in this diff Show More