[extension] [History] Support searching using your previous reactions (…

…#36) # Extension * history: Display a summary of all of the user's reactions. You can click on them to search your history. * history: Optimize updating history after deleting items. * history: Increase size of current reactions. * history: localize delete message. * history: Move loading spinner lower. * Add page titles for option pages. * badges: Use lighter text color for dates. * Bump to version "1.2.0". ## Firefox Some improvements to the UI for Firefox: * Make a little wider because the emoji selector was getting cut-off. * Make it clear when the emoji button is disabled.
emogit · May 23, 2022 · 4b0ec67 · 4b0ec67
1 parent 0631fa3
commit 4b0ec67
Show file tree

Hide file tree

Showing 13 changed files with 313 additions and 70 deletions.
diff --git a/extension/app/_locales/de/messages.json b/extension/app/_locales/de/messages.json
@@ -98,6 +98,14 @@
 	"historyPageTitle": {
 		"message": "Geschichte"
 	},
+	"deleteSelectedPages":{
+		"message": "$count$ löschen",
+		"placeholders": {
+			"count": {
+				"content": "$1"
+			}
+		}
+	},
 	"errorGettingHistory": {
 		"message": "Beim Abrufen deines Verlaufs ist ein Fehler aufgetreten."
 	},
@@ -111,7 +119,7 @@
 		"message": "Verlauf für die ausgewählte(n) Seite(n) gelöscht."
 	},
 	"currentReactionsIdentifier": {
-		"message": "Deine momentane(n) Reaktion(en): "
+		"message": ""
 	},
 	"badgesIdentifier": {
 		"message": "🏆 Dein(e) Abzeichen: "
@@ -132,6 +140,6 @@
 		"message": "💯 Abzeichen 🏆"
 	},
 	"earnedTimeIdentifier": {
-		"message": "📅: "
+		"message": "📅 "
 	}
 }
diff --git a/extension/app/_locales/en/messages.json b/extension/app/_locales/en/messages.json
@@ -81,7 +81,7 @@
 		"message": "The URL is too long. It might contain private information."
 	},
 	"badgesPageTitle": {
-		"message": "🏆 Badges 🎉"
+		"message": "🏆 Your Badges 🎉"
 	},
 	"badgeSummaryTitle": {
 		"message": "Summary"
@@ -98,6 +98,14 @@
 	"historyPageTitle": {
 		"message": "History"
 	},
+	"deleteSelectedPages":{
+		"message": "Delete $count$ selected",
+		"placeholders": {
+			"count": {
+				"content": "$1"
+			}
+		}
+	},
 	"errorGettingHistory": {
 		"message": "There was an error getting your history."
 	},
@@ -111,7 +119,7 @@
 		"message": "Successfully deleted the history for the selected page(s)."
 	},
 	"currentReactionsIdentifier": {
-		"message": "Your current reaction(s): "
+		"message": ""
 	},
 	"badgesIdentifier": {
 		"message": "🏆 Your badge(s): "
@@ -132,6 +140,6 @@
 		"message": "💯 Badges 🏆"
 	},
 	"earnedTimeIdentifier": {
-		"message": "📅: "
+		"message": "📅 "
 	}
 }
diff --git a/extension/app/manifest.json b/extension/app/manifest.json
@@ -2,7 +2,7 @@
 	"name": "__MSG_appName__",
 	"short_name": "__MSG_appShortName__",
 	"description": "__MSG_appDescription__",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"manifest_version": 2,
 	"default_locale": "en",
 	"icons": {

diff --git a/extension/app/pages/browser_action.html b/extension/app/pages/browser_action.html
@@ -8,7 +8,7 @@
 		#main-popup {
 			padding: 1px;
 			height: 320px;
-			width: 270px;
+			width: 300px;
 			max-height: 500px;
 			max-width: 400px;
 			font-family: Helvetica, Ubuntu, Arial, sans-serif;

diff --git a/extension/app/scripts/components/Badges.tsx b/extension/app/scripts/components/Badges.tsx
@@ -1,3 +1,4 @@
+import { Badge } from '@emogit/emojit-core'
 import { progressSpinnerColor } from '@emogit/emojit-react-core'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
@@ -11,14 +12,6 @@ import { getMessage } from '../i18n_helper'
 import classes from '../styles/Badges.module.css'
 import { setupUserSettings } from '../user'
 
-interface Badge {
-	name: string
-	time: Date | null | undefined
-	progress: number
-	pageUrl: string | null | undefined
-	currentReactions: string[] | null | undefined
-}
-
 class Badges extends React.Component<unknown, {
 	badges: { badges: Badge[] } | undefined,
 	errorGettingBadges: string | undefined,
@@ -29,6 +22,7 @@ class Badges extends React.Component<unknown, {
 			badges: undefined,
 			errorGettingBadges: undefined,
 		}
+		document.title = (getMessage('appName') || "Emojit") + " - " + (getMessage('badgesPageTitle') || "Your Badges")
 	}
 
 	async componentDidMount() {
@@ -57,7 +51,7 @@ class Badges extends React.Component<unknown, {
 
 		return <Container>
 			<Typography className={classes.title} component="h4" variant="h4">
-				{getMessage('badgesPageTitle') || "🏆 Badges 🎉"}
+				{getMessage('badgesPageTitle') || "🏆 Your Badges 🎉"}
 			</Typography>
 			{this.state.badges === undefined && this.state.errorGettingBadges === undefined && <div className={classes.center}>
 				<CircularProgress size={70} style={{ color: progressSpinnerColor }}
@@ -112,9 +106,12 @@ class Badges extends React.Component<unknown, {
 									</Link>
 								</Typography>}
 								{badge.currentReactions && <Typography variant="body2" component="p">
-									{getMessage('currentReactionsIdentifier') || "Your current reaction(s): "}{badge.currentReactions.join("")}
+									{getMessage('currentReactionsIdentifier') || ""}
+									<span className={classes.badgeReactions}>
+										{badge.currentReactions.join("")}
+									</span>
 								</Typography>}
-								{badge.time && <Typography variant="body2" component="p">
+								{badge.time && <Typography variant="body2" component="p" color="textSecondary">
 									{getMessage('earnedTimeIdentifier') || "📅 "}{new Date(badge.time).toString()}
 								</Typography>}
 							</CardContent>