add bite notification support

README.md

@@ -1,3 +1,7 @@
+# with harper's tweaks
+
+- added bite notification support
+
 # Chuckya (standalone frontend)
 
 This is a somewhat hacky fork of Chuckya that adds standalone support (based on https://iceshrimp.dev/iceshrimp/masto-fe-standalone) (meaning your browser can OAuth against an arbitrary instance). It's currently tested to work (for the most part) with Iceshrimp and Iceshrimp.NET.

app/javascript/flavours/glitch/components/status_prepend.jsx

@@ -13,6 +13,7 @@ import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
 import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import DentistryIcon from '@/material-icons/400-24px/dentistry.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { me } from 'flavours/glitch/initial_state';
 
@@ -51,6 +52,14 @@ export default class StatusPrepend extends PureComponent {
       </a>
     );
     switch (type) {
+    case 'bite':
+      return (
+        <FormattedMessage
+          id='notification.bite'
+          defaultMessage='{name} bit your status'
+          values={{ name: link }}
+        />
+      );
     case 'featured':
       return (
         <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
@@ -130,6 +139,10 @@ export default class StatusPrepend extends PureComponent {
     let iconId, iconComponent;
 
     switch(type) {
+    case 'bite':
+      iconId = 'dentistry';
+      iconComponent = DentistryIcon;
+      break;
     case 'favourite':
       iconId = 'star';
       iconComponent = StarIcon;

app/javascript/flavours/glitch/features/notifications/components/notification.jsx

@@ -13,6 +13,7 @@ import { HotKeys } from 'react-hotkeys';
 import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import Dentistry from '@/material-icons/400-24px/dentistry.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import AccountContainer from 'flavours/glitch/containers/account_container';
@@ -27,6 +28,7 @@ import { RelationshipsSeveranceEvent } from './relationships_severance_event';
 import Report from './report';
 
 const messages = defineMessages({
+  bite: { id: 'notification.bite', defaultMessage: '{name} bit you' },
   follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
   adminSignUp: { id: 'notification.admin.sign_up', defaultMessage: '{name} signed up' },
   adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
@@ -118,6 +120,52 @@ class Notification extends ImmutablePureComponent {
     };
   }
 
+  renderBiteUser (notification, account, link) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='dentistry' icon={Dentistry} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.bite' defaultMessage='{name} bit you' values={{ name: link }} />
+            </span>
+          </div>
+
+          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+  renderBiteNote (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='bite'
+        muted
+        withDismiss
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        unread={this.props.unread}
+      />
+    );
+  }
+
   renderFollow (notification, account, link) {
     const { intl, unread } = this.props;
 
@@ -455,6 +503,8 @@ class Notification extends ImmutablePureComponent {
     );
 
     switch(notification.get('type')) {
+    case 'bite':
+      return notification.get('status') ? this.renderBiteNote(notification) : this.renderBiteUser(notification, account, link);
     case 'follow':
       return this.renderFollow(notification, account, link);
     case 'follow_request':

app/javascript/material-icons/400-24px/dentistry.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M680-875q66 0 113 47t47 113q0 11-1.5 29.5T834-643l-55 403q-5 38-34.5 62T677-154q-23 0-42.5-10T602-192L495-348q-2-4-6.5-5.5T479-355q-4 0-16 9L359-195q-14 20-34.5 30.5T281-154q-38 0-67-24.5T180-241l-54-402q-3-24-4.5-42.5T120-715q0-66 47-113t113-47q36 0 57.5 9.5T379-845q20 11 42.5 20.5T480-815q36 0 58.5-9.5T581-845q20-11 42-20.5t57-9.5Zm0 80q-23 0-40.5 9.5T601-765q-21 11-49 20.5t-72 9.5q-44 0-72-9.5T359-765q-21-11-38.5-20.5T280-795q-33 0-56.5 23.5T200-715q0 8 1 23t4 35l55 405q1 8 7 12.5t14 4.5q5 0 9-2t6-6l101-148q14-20 36-32t47-12q25 0 47 12t36 32l103 151q2 3 5 4.5t7 1.5q8 0 14.5-4.5T700-251l55-406q3-20 4-35t1-23q0-33-23.5-56.5T680-795ZM480-515Z"/></svg>