[feature/frontend] Add visibility icon for posts (#3908)

web/source/css/status.css

@@ -448,6 +448,10 @@ main {
 				gap: 0.4rem;
 			}
 
+			.stats-item.published-at {
+				text-decoration: underline;
+			}
+
 			.stats-item:not(.published-at):not(.edited-at) {
 				z-index: 1;
 				user-select: none;

web/template/status_info.tmpl

@@ -17,9 +17,36 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */ -}}
 
+{{- define "visibility_icon" -}}
+    {{- if eq .Visibility "public" -}}
+        globe
+    {{- else if eq .Visibility "unlisted" -}}
+        unlock
+    {{- else -}}
+        question
+    {{- end -}}
+{{- end -}}
+
+{{- define "visibility_title" -}}
+    {{- if eq .Visibility "public" -}}
+        Public
+    {{- else if eq .Visibility "unlisted" -}}
+        Unlisted
+    {{- else -}}
+        Unknown
+    {{- end -}}
+{{- end -}}
+
 {{- with . }}
 <dl class="status-stats">
     <div class="stats-grouping">
+        <div class="stats-item visibility-level" title="{{- template "visibility_title" . -}}">
+            <dt class="sr-only">Visibility</dt>
+            <dd>
+                <i class="fa fa-{{- template "visibility_icon" . -}}" aria-hidden="true"></i>
+                <span class="sr-only">{{- template "visibility_title" . -}}</span>
+            </dd>
+        </div>
         <div class="stats-item published-at text-cutoff">
             <dt class="sr-only">Published</dt>
             <dd>
@@ -30,7 +57,7 @@
         <div class="stats-item edited-at text-cutoff">
             <dt class="sr-only">Edited</dt>
             <dd>
-                (edited <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time>)
+                edited <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time>
             </dd>
         </div>
         {{ end }}