Add lock icon for privated users; also make embedded links display better

internal/webserver/static/icons/lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="Protected account" role="img" class="r-1nao33i r-4qtqp9 r-yyyyoo r-1xvli5t r-9cviqr r-f9ja8p r-og9te1 r-bnwqim r-1plcrui r-lrvibr" data-testid="icon-lock"><g><path d="M17.5 7H17v-.25c0-2.76-2.24-5-5-5s-5 2.24-5 5V7h-.5C5.12 7 4 8.12 4 9.5v9C4 19.88 5.12 21 6.5 21h11c1.39 0 2.5-1.12 2.5-2.5v-9C20 8.12 18.89 7 17.5 7zM13 14.73V17h-2v-2.27c-.59-.34-1-.99-1-1.73 0-1.1.9-2 2-2 1.11 0 2 .9 2 2 0 .74-.4 1.39-1 1.73zM15 7H9v-.25c0-1.66 1.35-3 3-3 1.66 0 3 1.34 3 3V7z"></path></g></svg>

internal/webserver/static/styles.css

@@ -87,6 +87,16 @@ input, select {
     cursor: default;
 }
 
+.circle-outline {
+    display: flex;
+    border-radius: 50%;
+    outline: 1px solid #777;
+    margin: 0 0.4em;
+    font-size: 0.8em;
+    padding: 0.2em;
+    box-sizing: border-box;
+}
+
 .name-and-handle {
     padding: 0 0.6em !important; /* !important to make the ".quick-link .span" rule in the login button not overrule it */
 }
@@ -152,6 +162,9 @@ a.entity {
     flex-direction: column;
     background-color: var(--color-twitter-off-white);
 }
+img.embedded-link-preview {
+    border-radius: 1em;
+}
 .embedded-link-description {
     color: var(--color-twitter-text-gray);
     font-size: 0.8em;

internal/webserver/tpl/includes/author_info.tpl

@@ -7,7 +7,14 @@
     />
   </a>
   <span class="name-and-handle">
-    <div class="display-name">{{.DisplayName}}</div>
+    <div class="display-name row">
+      {{.DisplayName}}
+      {{if .IsPrivate}}
+        <div class="circle-outline">
+          <img class="svg-icon" src="/static/icons/lock.svg" />
+        </div>
+      {{end}}
+    </div>
     <div class="handle">@{{.Handle}}</div>
   </span>
 </div>

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -65,8 +65,12 @@
           </video>
         {{end}}
         {{range $main_tweet.Urls}}
-          <a class="embedded-link rounded-gray-outline unstyled-link" target="_blank" href="{{.Text}}" style="width: {{.ThumbnailWidth}}px">
-            <img src="/content/link_preview_images/{{.ThumbnailLocalPath}}"/>
+          <a
+            class="embedded-link rounded-gray-outline unstyled-link"
+            target="_blank"
+            href="{{.Text}}"
+            style="width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}">
+            <img class="embedded-link-preview" src="/content/link_preview_images/{{.ThumbnailLocalPath}}"/>
             <h3 class="embedded-link-title">{{.Title}}</h3>
             <p class="embedded-link-description">{{.Description}}</p>
             <span class="row embedded-link-domain-container">