Merge pull request #1208 from getfider/ui-tweaks

First set of proposed UI tweaks.

app/cmd/routes.go

@@ -73,7 +73,7 @@ func routes(r *web.Engine) *web.Engine {
 	r.Get("/oauth/:provider", handlers.SignInByOAuth())
 	r.Get("/oauth/:provider/callback", handlers.OAuthCallback())
 
-	//Starting from this step, a Tenant is required
+	// Starting from this step, a Tenant is required
 	r.Use(middlewares.RequireTenant())
 
 	r.Get("/sitemap.xml", handlers.Sitemap())
@@ -98,7 +98,7 @@ func routes(r *web.Engine) *web.Engine {
 	r.Get("/oauth/:provider/token", handlers.OAuthToken())
 	r.Get("/oauth/:provider/echo", handlers.OAuthEcho())
 
-	//If tenant is pending, block it from using any other route
+	// If tenant is pending, block it from using any other route
 	r.Use(middlewares.BlockPendingTenants())
 
 	r.Get("/signin", handlers.SignInPage())
@@ -108,7 +108,7 @@ func routes(r *web.Engine) *web.Engine {
 	r.Post("/_api/signin/complete", handlers.CompleteSignInProfile())
 	r.Post("/_api/signin", handlers.SignInByEmail())
 
-	//Block if it's private tenant with unauthenticated user
+	// Block if it's private tenant with unauthenticated user
 	r.Use(middlewares.CheckTenantPrivacy())
 
 	r.Get("/", handlers.Index())
@@ -117,12 +117,13 @@ func routes(r *web.Engine) *web.Engine {
 
 	ui := r.Group()
 	{
-		//From this step, a User is required
+		// From this step, a User is required
 		ui.Use(middlewares.IsAuthenticated())
 
 		ui.Get("/settings", handlers.UserSettings())
 		ui.Get("/notifications", handlers.Notifications())
 		ui.Get("/notifications/:id", handlers.ReadNotification())
+		ui.Get("/_api/notifications/unread", handlers.GetAllNotifications())
 		ui.Get("/change-email/verify", handlers.VerifyChangeEmailKey())
 
 		ui.Delete("/_api/user", handlers.DeleteUser())
@@ -148,7 +149,7 @@ func routes(r *web.Engine) *web.Engine {
 		ui.Get("/admin/authentication", handlers.ManageAuthentication())
 		ui.Get("/_api/admin/oauth/:provider", handlers.GetOAuthConfig())
 
-		//From this step, only Administrators are allowed
+		// From this step, only Administrators are allowed
 		ui.Use(middlewares.IsAuthorized(enum.RoleAdministrator))
 
 		ui.Get("/admin/export", handlers.Page("Export · Site Settings", "", "Administration/pages/Export.page"))

app/handlers/notification.go

@@ -9,6 +9,18 @@ import (
 	"github.com/getfider/fider/app/pkg/web"
 )
 
+// GetAllNotifications will get all the notifications for the new modal
+func GetAllNotifications() web.HandlerFunc {
+	return func(c *web.Context) error {
+		q := &query.GetActiveNotifications{}
+		if err := bus.Dispatch(c, q); err != nil {
+			return c.Failure(err)
+		}
+
+		return c.Ok(q.Result)
+	}
+}
+
 // TotalUnreadNotifications returns the total number of unread notifications
 func TotalUnreadNotifications() web.HandlerFunc {
 	return func(c *web.Context) error {
@@ -65,7 +77,6 @@ func ReadNotification() web.HandlerFunc {
 // ReadAllNotifications marks all unread notifications as read
 func ReadAllNotifications() web.HandlerFunc {
 	return func(c *web.Context) error {
-
 		if err := bus.Dispatch(c, &cmd.MarkAllNotificationsAsRead{}); err != nil {
 			return c.Failure(err)
 		}

app/models/entity/notification.go

@@ -1,12 +1,21 @@
 package entity
 
-import "time"
+import (
+	"time"
+
+	"github.com/getfider/fider/app/models/enum"
+)
 
 // Notification is the system generated notification entity
 type Notification struct {
-	ID        int       `json:"id" db:"id"`
-	Title     string    `json:"title" db:"title"`
-	Link      string    `json:"link" db:"link"`
-	Read      bool      `json:"read" db:"read"`
-	CreatedAt time.Time `json:"createdAt" db:"created_at"`
+	ID            int             `json:"id" db:"id"`
+	Title         string          `json:"title" db:"title"`
+	Link          string          `json:"link" db:"link"`
+	Read          bool            `json:"read" db:"read"`
+	CreatedAt     time.Time       `json:"createdAt" db:"created_at"`
+	AuthorName    string          `json:"authorName" db:"name"`
+	AuthorID      int             `json:"-" db:"author_id"`
+	AvatarBlobKey string          `json:"-" db:"avatar_bkey"`
+	AvatarType    enum.AvatarType `json:"-" db:"avatar_type"`
+	AvatarURL     string          `json:"avatarURL,omitempty"`
 }

app/pkg/web/testdata/basic.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/pkg/web/testdata/canonical.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
     <link rel="canonical" href="http://feedback.demo.org" />
 

app/pkg/web/testdata/chunk.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/pkg/web/testdata/home.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/pkg/web/testdata/home_ssr.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/pkg/web/testdata/oauth.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/pkg/web/testdata/tenant.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/pkg/web/testdata/user.html

@@ -6,6 +6,9 @@
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=64" sizes="64x64" type="image/png">
   <link rel="icon" href="https://demo.test.fider.io:3000/static/favicon?size=192" sizes="192x192" type="image/png">
   <link rel="apple-touch-icon" href="https://demo.test.fider.io:3000/static/favicon?size=180&bg=white" sizes="180x180" type="image/png">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
 
 
 

app/services/sqlstore/postgres/notification.go

@@ -102,16 +102,23 @@ func getNotificationByID(ctx context.Context, q *query.GetNotificationByID) erro
 
 func getActiveNotifications(ctx context.Context, q *query.GetActiveNotifications) error {
 	return using(ctx, func(trx *dbx.Trx, tenant *entity.Tenant, user *entity.User) error {
-		q.Result = []*entity.Notification{}
 		err := trx.Select(&q.Result, `
-			SELECT id, title, link, read, created_at 
-			FROM notifications 
-			WHERE tenant_id = $1 AND user_id = $2
-			AND (read = false OR updated_at > CURRENT_DATE - INTERVAL '30 days')
+			SELECT n.id, n.title, n.link, n.read, n.created_at, n.author_id, u.avatar_type, u.avatar_bkey, u.name
+			FROM notifications n
+			LEFT JOIN users u ON u.id = n.author_id
+			WHERE n.tenant_id = $1 AND n.user_id = $2
+			AND (n.read = false OR n.updated_at > CURRENT_DATE - INTERVAL '30 days')
+			ORDER BY n.updated_at DESC 
 		`, tenant.ID, user.ID)
 		if err != nil {
 			return errors.Wrap(err, "failed to get active notifications")
 		}
+
+		// Iterate over notifications and build avatar URL
+		for i := range q.Result {
+			q.Result[i].AvatarURL = buildAvatarURL(ctx, q.Result[i].AvatarType, int(q.Result[i].AuthorID), q.Result[i].AuthorName, q.Result[i].AvatarBlobKey)
+		}
+
 		return nil
 	})
 }

e2e/features/server/ssr.feature

@@ -5,7 +5,7 @@ Feature: SSR
     And I set the "User-Agent" header to "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
     When I send the request
     Then I should see http status 200
-    And I should not see ">Powered by Fider</a>" on the response body
+    And I should not see ">Powered by Fider ⚡</a>" on the response body
     And I should see "This website requires JavaScript, please enable and reload the page." on the response body
     And I should see "/assets/js/vendor" on the response body
 
@@ -14,6 +14,6 @@ Feature: SSR
     And I set the "User-Agent" header to "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
     When I send the request
     Then I should see http status 200
-    And I should see ">Powered by Fider</a>" on the response body
+    And I should see ">Powered by Fider ⚡</a>" on the response body
     And I should not see "This website requires JavaScript, please enable and reload the page." on the response body
     And I should not see "/assets/js/vendor" on the response body

locale/de/client.json

@@ -3,6 +3,7 @@
   "action.change": "ändern",
   "action.close": "Schließen",
   "action.confirm": "Bestätigen",
+  "action.copylink": "",
   "action.delete": "Löschen",
   "action.edit": "Bearbeiten",
   "action.markallasread": "Alle als gelesen markieren",
@@ -81,6 +82,9 @@
   "modal.deleteaccount.text": "<0>Wenn Sie Ihr Konto löschen, werden wir all Ihre persönlichen Daten für immer löschen. Der von Ihnen veröffentlichte Inhalt bleibt erhalten, wird aber anonymisiert.</0><1>Dieser Prozess ist irreversibel. <2>Sind Sie sicher? </2></1>",
   "modal.deletecomment.header": "Kommentar löschen",
   "modal.deletecomment.text": "Dieser Prozess ist unumkehrbar. <0>Bist du dir sicher?</0>",
+  "modal.notifications.nonew": "",
+  "modal.notifications.previous": "",
+  "modal.notifications.unread": "",
   "modal.showvotes.message.zeromatches": "Keine Benutzer gefunden, die <0>{0}</0> entsprechen.",
   "modal.showvotes.query.placeholder": "Suche nach Benutzern nach Namen...",
   "modal.signin.header": "Melde dich an, um eine neue Idee zu posten",
@@ -127,6 +131,9 @@
   "page.pendingactivation.text": "Wir haben Ihnen eine Bestätigungs-E-Mail mit einem Link zur Aktivierung Ihrer Website geschickt.",
   "page.pendingactivation.text2": "Bitte überprüfe deinen Posteingang, um ihn zu aktivieren.",
   "page.pendingactivation.title": "Dein Account ist nicht aktiviert",
+  "showpost.comment.copylink.error": "",
+  "showpost.comment.copylink.success": "",
+  "showpost.comment.unknownhighlighted": "",
   "showpost.commentinput.placeholder": "Kommentar hinzufügen",
   "showpost.discussionpanel.emptymessage": "Niemand hat bisher kommentiert.",
   "showpost.label.author": "Gepostet von <0/> · <1/>",

locale/el/client.json

@@ -3,6 +3,7 @@
   "action.change": "αλλαγή",
   "action.close": "Κλείσιμο",
   "action.confirm": "Επιβεβαίωση",
+  "action.copylink": "",
   "action.delete": "Διαγραφή",
   "action.edit": "Επεξεργασία",
   "action.markallasread": "Σήμανση όλων ως αναγνωσμένων",
@@ -81,6 +82,9 @@
   "modal.deleteaccount.text": "<0>Όταν επιλέξετε να διαγράψετε τον λογαριασμό σας, θα διαγράψουμε για πάντα όλες τις προσωπικές σας πληροφορίες. Το περιεχόμενο που δημοσιεύσατε θα παραμείνει, αλλά θα είναι ανώνυμο.</0><1>Αυτή η διαδικασία είναι μη αναστρέψιμη. <2>Είστε σίγουρος;</2></1>",
   "modal.deletecomment.header": "Διαγραφή Σχολίου",
   "modal.deletecomment.text": "Αυτή η διαδικασία είναι μη αναστρέψιμη. <0>Είστε σίγουρος;</0>",
+  "modal.notifications.nonew": "",
+  "modal.notifications.previous": "",
+  "modal.notifications.unread": "",
   "modal.showvotes.message.zeromatches": "Δεν βρέθηκαν χρήστες που να ταιριάζουν <0>{0}</0>.",
   "modal.showvotes.query.placeholder": "Αναζήτηση χρηστών με όνομα...",
   "modal.signin.header": "Συνδεθείτε για να συμμετάσχετε και να ψηφίσετε",
@@ -127,6 +131,9 @@
   "page.pendingactivation.text": "Σας στείλαμε ένα email επιβεβαίωσης με ένα σύνδεσμο για να ενεργοποιήσετε τον ιστότοπό σας.",
   "page.pendingactivation.text2": "Παρακαλώ ελέγξτε τα εισερχόμενά σας για να το ενεργοποιήσετε.",
   "page.pendingactivation.title": "Ο λογαριασμός σας εκκρεμεί ενεργοποίηση",
+  "showpost.comment.copylink.error": "",
+  "showpost.comment.copylink.success": "",
+  "showpost.comment.unknownhighlighted": "",
   "showpost.commentinput.placeholder": "Αφήστε ένα σχόλιο",
   "showpost.discussionpanel.emptymessage": "Κανείς δεν έχει σχολιάσει ακόμα.",
   "showpost.label.author": "Δημοσιεύτηκε από <0/> · <1/>",

locale/en/client.json

@@ -82,6 +82,9 @@
   "modal.deleteaccount.text": "<0>When you choose to delete your account, we will erase all your personal information forever. The content you have published will remain, but it will be anonymised.</0><1>This process is irreversible. <2>Are you sure?</2></1>",
   "modal.deletecomment.header": "Delete Comment",
   "modal.deletecomment.text": "This process is irreversible. <0>Are you sure?</0>",
+  "modal.notifications.nonew": "No new notifications",
+  "modal.notifications.previous": "Previous notifications",
+  "modal.notifications.unread": "Unread notifications",
   "modal.showvotes.message.zeromatches": "No users found matching <0>{0}</0>.",
   "modal.showvotes.query.placeholder": "Search for users by name...",
   "modal.signin.header": "Sign in to participate and vote",

locale/es-ES/client.json

@@ -3,6 +3,7 @@
   "action.change": "cambiar",
   "action.close": "Cerrar",
   "action.confirm": "Confirmar",
+  "action.copylink": "",
   "action.delete": "Eliminar",
   "action.edit": "Editar",
   "action.markallasread": "Marcar Todo como Leído",
@@ -81,6 +82,9 @@
   "modal.deleteaccount.text": "<0>Cuando decides eliminar tu cuenta, borraremos toda tu información personal para siempre. El contenido que has publicado permanecerá, pero será anónimo.</0><1>Este proceso es irreversible. <2>¿Estás seguro?</2></1>",
   "modal.deletecomment.header": "Eliminar Comentario",
   "modal.deletecomment.text": "Este proceso es irreversible. <0>¿Estás seguro?</0>",
+  "modal.notifications.nonew": "",
+  "modal.notifications.previous": "",
+  "modal.notifications.unread": "",
   "modal.showvotes.message.zeromatches": "No se encontraron usuarios que coincidan con <0>{0}</0>.",
   "modal.showvotes.query.placeholder": "Buscar usuarios por nombre...",
   "modal.signin.header": "Inicia sesión para publicar y votar",
@@ -127,6 +131,9 @@
   "page.pendingactivation.text": "Te hemos enviado un correo electrónico de confirmación con un enlace para activar tu sitio.",
   "page.pendingactivation.text2": "Por favor, revisa tu bandeja de entrada para activarla.",
   "page.pendingactivation.title": "Tu cuenta está pendiente de activación",
+  "showpost.comment.copylink.error": "",
+  "showpost.comment.copylink.success": "",
+  "showpost.comment.unknownhighlighted": "",
   "showpost.commentinput.placeholder": "Publica un comentario",
   "showpost.discussionpanel.emptymessage": "Nadie ha comentado todavía.",
   "showpost.label.author": "Publicado por <0/> · <1/>",

locale/fr/client.json

@@ -3,6 +3,7 @@
   "action.change": "changer",
   "action.close": "Fermer",
   "action.confirm": "Confirmer",
+  "action.copylink": "",
   "action.delete": "Supprimer",
   "action.edit": "Modifier",
   "action.markallasread": "Tout marquer comme lu",
@@ -81,6 +82,9 @@
   "modal.deleteaccount.text": "<0>Lorsque vous choisissez de supprimer votre compte, nous effacerons définitivement toutes vos informations personnelles. Le contenu que vous avez publié restera, mais il sera anonyme.</0><1>Ce processus est irréversible. <2>Êtes-vous sûr ?</2></1>",
   "modal.deletecomment.header": "Supprimer le commentaire",
   "modal.deletecomment.text": "Ce processus est irréversible. <0>Êtes-vous sûr ?</0>",
+  "modal.notifications.nonew": "",
+  "modal.notifications.previous": "",
+  "modal.notifications.unread": "",
   "modal.showvotes.message.zeromatches": "Aucun utilisateur correspondant à <0>{0}</0>.",
   "modal.showvotes.query.placeholder": "Rechercher des utilisateurs par nom...",
   "modal.signin.header": "Connectez-vous pour poster et voter",
@@ -127,6 +131,9 @@
   "page.pendingactivation.text": "Nous vous avons envoyé un e-mail de confirmation avec un lien pour activer votre site.",
   "page.pendingactivation.text2": "Veuillez vérifier votre boîte de réception pour l'activer.",
   "page.pendingactivation.title": "Votre compte n'est pas activé",
+  "showpost.comment.copylink.error": "",
+  "showpost.comment.copylink.success": "",
+  "showpost.comment.unknownhighlighted": "",
   "showpost.commentinput.placeholder": "Rédiger un commentaire",
   "showpost.discussionpanel.emptymessage": "Personne n'a encore commenté.",
   "showpost.label.author": "Posté par <0/> · <1/>",