Minor fix

Allow , in username to support multiple users
Fixes #1329
2025-12-05 19:45:36 -05:00 · 2025-11-30 18:07:27 +01:00 · 2025-11-30 18:06:22 +01:00 · 2025-11-30 05:43:17 +01:00 · 2025-11-30 04:12:38 +01:00 · 2025-11-30 03:58:43 +01:00
44 changed files with 1496 additions and 1247 deletions
--- a/nitter.example.conf
+++ b/nitter.example.conf
@@ -26,6 +26,7 @@ enableRSS = true  # set this to false to disable RSS feeds
 enableDebug = false  # enable request logs and debug endpoints (/.sessions)
 proxy = ""  # http/https url, SOCKS proxies are not supported
 proxyAuth = ""
+disableTid = false # enable this if cookie-based auth is failing

 # Change default preferences here, see src/prefs_impl.nim for a complete list
 [Preferences]
--- a/public/css/fontello.css
+++ b/public/css/fontello.css
@@ -1,53 +1,138 @@
@font-face {
-  font-family: 'fontello';
-  src: url('/fonts/fontello.eot?61663884');
-  src: url('/fonts/fontello.eot?61663884#iefix') format('embedded-opentype'),
-       url('/fonts/fontello.woff2?61663884') format('woff2'),
-       url('/fonts/fontello.woff?61663884') format('woff'),
-       url('/fonts/fontello.ttf?61663884') format('truetype'),
-       url('/fonts/fontello.svg?61663884#fontello') format('svg');
+  font-family: "fontello";
+  src: url("/fonts/fontello.eot?77185648");
+  src:
+    url("/fonts/fontello.eot?77185648#iefix") format("embedded-opentype"),
+    url("/fonts/fontello.woff2?77185648") format("woff2"),
+    url("/fonts/fontello.woff?77185648") format("woff"),
+    url("/fonts/fontello.ttf?77185648") format("truetype"),
+    url("/fonts/fontello.svg?77185648#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
 }
-[class^="icon-"]:before, [class*=" icon-"]:before {
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
- 
+
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
+  margin-right: 0.2em;
  text-align: center;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
- 
+
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
- 
+
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-.icon-views:before { content: '\e800'; } /* '' */
-.icon-heart:before { content: '\e801'; } /* '' */
-.icon-quote:before { content: '\e802'; } /* '' */
-.icon-comment:before { content: '\e803'; } /* '' */
-.icon-ok:before { content: '\e804'; } /* '' */
-.icon-play:before { content: '\e805'; } /* '' */
-.icon-link:before { content: '\e806'; } /* '' */
-.icon-calendar:before { content: '\e807'; } /* '' */
-.icon-location:before { content: '\e808'; } /* '' */
-.icon-picture:before { content: '\e809'; } /* '' */
-.icon-lock:before { content: '\e80a'; } /* '' */
-.icon-down:before { content: '\e80b'; } /* '' */
-.icon-retweet:before { content: '\e80c'; } /* '' */
-.icon-search:before { content: '\e80d'; } /* '' */
-.icon-pin:before { content: '\e80e'; } /* '' */
-.icon-cog:before { content: '\e80f'; } /* '' */
-.icon-rss:before { content: '\e810'; } /* '' */
-.icon-info:before { content: '\f128'; } /* '' */
-.icon-bird:before { content: '\f309'; } /* '' */
+.icon-views:before {
+  content: "\e800";
+}
+
+/* '' */
+.icon-heart:before {
+  content: "\e801";
+}
+
+/* '' */
+.icon-quote:before {
+  content: "\e802";
+}
+
+/* '' */
+.icon-comment:before {
+  content: "\e803";
+}
+
+/* '' */
+.icon-play:before {
+  content: "\e805";
+}
+
+/* '' */
+.icon-link:before {
+  content: "\e806";
+}
+
+/* '' */
+.icon-calendar:before {
+  content: "\e807";
+}
+
+/* '' */
+.icon-location:before {
+  content: "\e808";
+}
+
+/* '' */
+.icon-picture:before {
+  content: "\e809";
+}
+
+/* '' */
+.icon-lock:before {
+  content: "\e80a";
+}
+
+/* '' */
+.icon-down:before {
+  content: "\e80b";
+}
+
+/* '' */
+.icon-retweet:before {
+  content: "\e80c";
+}
+
+/* '' */
+.icon-search:before {
+  content: "\e80d";
+}
+
+/* '' */
+.icon-pin:before {
+  content: "\e80e";
+}
+
+/* '' */
+.icon-cog:before {
+  content: "\e80f";
+}
+
+/* '' */
+.icon-rss:before {
+  content: "\e810";
+}
+
+/* '' */
+.icon-ok:before {
+  content: "\e811";
+}
+
+/* '' */
+.icon-circle:before {
+  content: "\f111";
+}
+
+/* '' */
+.icon-info:before {
+  content: "\f128";
+}
+
+/* '' */
+.icon-bird:before {
+  content: "\f309";
+}
+
+/* '' */
--- a/public/fonts/fontello.eot
+++ b/public/fonts/fontello.eot
--- a/public/fonts/fontello.svg
+++ b/public/fonts/fontello.svg
@@ -14,8 +14,6 @@

 <glyph glyph-name="comment" unicode="&#xe803;" d="M1000 350q0-97-67-179t-182-130-251-48q-39 0-81 4-110-97-257-135-27-8-63-12-10-1-17 5t-10 16v1q-2 2 0 6t1 6 2 5l4 5t4 5 4 5q4 5 17 19t20 22 17 22 18 28 15 33 15 42q-88 50-138 123t-51 157q0 73 40 139t106 114 160 76 194 28q136 0 251-48t182-130 67-179z" horiz-adv-x="1000" />

-<glyph glyph-name="ok" unicode="&#xe804;" d="M0 260l162 162 166-164 508 510 164-164-510-510-162-162-162 164z" horiz-adv-x="1000" />
-
 <glyph glyph-name="play" unicode="&#xe805;" d="M772 333l-741-412q-13-7-22-2t-9 20v822q0 14 9 20t22-2l741-412q13-7 13-17t-13-17z" horiz-adv-x="785.7" />

 <glyph glyph-name="link" unicode="&#xe806;" d="M294 116q14 14 34 14t36-14q32-34 0-70l-42-40q-56-56-132-56-78 0-134 56t-56 132q0 78 56 134l148 148q70 68 144 77t128-43q16-16 16-36t-16-36q-36-32-70 0-50 48-132-34l-148-146q-26-26-26-64t26-62q26-26 63-26t63 26z m450 574q56-56 56-132 0-78-56-134l-158-158q-74-72-150-72-62 0-112 50-14 14-14 34t14 36q14 14 35 14t35-14q50-48 122 24l158 156q28 28 28 64 0 38-28 62-24 26-56 31t-60-21l-50-50q-16-14-36-14t-34 14q-34 34 0 70l50 50q54 54 127 51t129-61z" horiz-adv-x="800" />
@@ -40,6 +38,10 @@

 <glyph glyph-name="rss" unicode="&#xe810;" d="M184 93c0-51-43-91-93-91s-91 40-91 91c0 50 41 91 91 91s93-41 93-91z m261-85l-125 0c0 174-140 323-315 323l0 118c231 0 440-163 440-441z m259 0l-136 0c0 300-262 561-563 561l0 129c370 0 699-281 699-690z" horiz-adv-x="704" />

+<glyph glyph-name="ok" unicode="&#xe811;" d="M933 534q0-22-16-38l-404-404-76-76q-16-15-38-15t-38 15l-76 76-202 202q-15 16-15 38t15 38l76 76q16 16 38 16t38-16l164-165 366 367q16 16 38 16t38-16l76-76q16-15 16-38z" horiz-adv-x="1000" />
+
+<glyph glyph-name="circle" unicode="&#xf111;" d="M857 350q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="info" unicode="&#xf128;" d="M393 149v-134q0-9-7-15t-15-7h-134q-9 0-16 7t-7 15v134q0 9 7 16t16 6h134q9 0 15-6t7-16z m176 335q0-30-8-56t-20-43-31-33-32-25-34-19q-23-13-38-37t-15-37q0-10-7-18t-16-9h-134q-8 0-14 11t-6 20v26q0 46 37 87t79 60q33 16 47 32t14 42q0 24-26 41t-60 18q-36 0-60-16-20-14-60-64-7-9-17-9-7 0-14 4l-91 70q-8 6-9 14t3 16q89 148 259 148 45 0 90-17t81-46 59-72 23-88z" horiz-adv-x="571.4" />

 <glyph glyph-name="bird" unicode="&#xf309;" d="M920 636q-36-54-94-98l0-24q0-130-60-250t-186-203-290-83q-160 0-290 84 14-2 46-2 132 0 234 80-62 2-110 38t-66 94q10-4 34-4 26 0 50 6-66 14-108 66t-42 120l0 2q36-20 84-24-84 58-84 158 0 48 26 94 154-188 390-196-6 18-6 42 0 78 55 133t135 55q82 0 136-58 60 12 120 44-20-66-82-104 56 8 108 30z" horiz-adv-x="920" />
--- a/public/fonts/fontello.ttf
+++ b/public/fonts/fontello.ttf
--- a/public/fonts/fontello.woff
+++ b/public/fonts/fontello.woff
--- a/public/fonts/fontello.woff2
+++ b/public/fonts/fontello.woff2
--- a/src/api.nim
+++ b/src/api.nim
@@ -1,5 +1,5 @@
 # SPDX-License-Identifier: AGPL-3.0-only
-import asyncdispatch, httpclient, uri, strutils, sequtils, sugar, tables
+import asyncdispatch, httpclient, strutils, sequtils, sugar
 import packedjson
 import types, query, formatters, consts, apiutils, parser
 import experimental/parser as newParser
@@ -11,95 +11,92 @@ proc genParams(variables: string; fieldToggles = ""): seq[(string, string)] =
  if fieldToggles.len > 0:
    result.add ("fieldToggles", fieldToggles)

-proc mediaUrl(id: string; cursor: string): SessionAwareUrl =
-  let
-    cookieVars = userMediaVars % [id, cursor]
-    oauthVars = restIdVars % [id, cursor]
-  result = SessionAwareUrl(
-    cookieUrl: graphUserMedia ? genParams(cookieVars),
-    oauthUrl: graphUserMediaV2 ? genParams(oauthVars)
+proc apiUrl(endpoint, variables: string; fieldToggles = ""): ApiUrl =
+  return ApiUrl(endpoint: endpoint, params: genParams(variables, fieldToggles))
+
+proc apiReq(endpoint, variables: string; fieldToggles = ""): ApiReq =
+  let url = apiUrl(endpoint, variables, fieldToggles)
+  return ApiReq(cookie: url, oauth: url)
+
+proc mediaUrl(id: string; cursor: string): ApiReq =
+  result = ApiReq(
+    cookie: apiUrl(graphUserMedia, userMediaVars % [id, cursor]),
+    oauth: apiUrl(graphUserMediaV2, restIdVars % [id, cursor])
  )

-proc userTweetsUrl(id: string; cursor: string): SessionAwareUrl =
-  let
-    cookieVars = userTweetsVars % [id, cursor]
-    oauthVars = restIdVars % [id, cursor]
-  result = SessionAwareUrl(
-    # cookieUrl: graphUserTweets ? genParams(cookieVars, userTweetsFieldToggles),
-    oauthUrl: graphUserTweetsV2 ? genParams(oauthVars)
+proc userTweetsUrl(id: string; cursor: string): ApiReq =
+  result = ApiReq(
+    # cookie: apiUrl(graphUserTweets, userTweetsVars % [id, cursor], userTweetsFieldToggles),
+    oauth: apiUrl(graphUserTweetsV2, restIdVars % [id, cursor])
  )
  # might change this in the future pending testing
-  result.cookieUrl = result.oauthUrl
+  result.cookie = result.oauth

-proc userTweetsAndRepliesUrl(id: string; cursor: string): SessionAwareUrl =
-  let
-    cookieVars = userTweetsAndRepliesVars % [id, cursor]
-    oauthVars = restIdVars % [id, cursor]
-  result = SessionAwareUrl(
-    cookieUrl: graphUserTweetsAndReplies ? genParams(cookieVars, userTweetsFieldToggles),
-    oauthUrl: graphUserTweetsAndRepliesV2 ? genParams(oauthVars)
+proc userTweetsAndRepliesUrl(id: string; cursor: string): ApiReq =
+  let cookieVars = userTweetsAndRepliesVars % [id, cursor]
+  result = ApiReq(
+    cookie: apiUrl(graphUserTweetsAndReplies, cookieVars, userTweetsFieldToggles),
+    oauth: apiUrl(graphUserTweetsAndRepliesV2, restIdVars % [id, cursor])
  )

-proc tweetDetailUrl(id: string; cursor: string): SessionAwareUrl =
-  let
-    cookieVars = tweetDetailVars % [id, cursor]
-    oauthVars = tweetVars % [id, cursor]
-  result = SessionAwareUrl(
-    cookieUrl: graphTweetDetail ? genParams(cookieVars, tweetDetailFieldToggles),
-    oauthUrl: graphTweet ? genParams(oauthVars)
+proc tweetDetailUrl(id: string; cursor: string): ApiReq =
+  let cookieVars = tweetDetailVars % [id, cursor]
+  result = ApiReq(
+    # cookie: apiUrl(graphTweetDetail, cookieVars, tweetDetailFieldToggles),
+    cookie: apiUrl(graphTweet, tweetVars % [id, cursor]),
+    oauth: apiUrl(graphTweet, tweetVars % [id, cursor])
  )

-proc userUrl(username: string): SessionAwareUrl =
-  let
-    cookieVars = """{"screen_name":"$1","withGrokTranslatedBio":false}""" % username
-    oauthVars = """{"screen_name": "$1"}""" % username
-  result = SessionAwareUrl(
-    cookieUrl: graphUser ? genParams(cookieVars, tweetDetailFieldToggles),
-    oauthUrl: graphUserV2 ? genParams(oauthVars)
+proc userUrl(username: string): ApiReq =
+  let cookieVars = """{"screen_name":"$1","withGrokTranslatedBio":false}""" % username
+  result = ApiReq(
+    cookie: apiUrl(graphUser, cookieVars, tweetDetailFieldToggles),
+    oauth: apiUrl(graphUserV2, """{"screen_name": "$1"}""" % username)
  )

 proc getGraphUser*(username: string): Future[User] {.async.} =
  if username.len == 0: return
-  let js = await fetchRaw(userUrl(username), Api.userScreenName)
+  let js = await fetchRaw(userUrl(username))
  result = parseGraphUser(js)

 proc getGraphUserById*(id: string): Future[User] {.async.} =
  if id.len == 0 or id.any(c => not c.isDigit): return
  let
-    url = graphUserById ? genParams("""{"rest_id": "$1"}""" % id)
-    js = await fetchRaw(url, Api.userRestId)
+    url = apiReq(graphUserById, """{"rest_id": "$1"}""" % id)
+    js = await fetchRaw(url)
  result = parseGraphUser(js)

 proc getGraphUserTweets*(id: string; kind: TimelineKind; after=""): Future[Profile] {.async.} =
  if id.len == 0: return
  let
    cursor = if after.len > 0: "\"cursor\":\"$1\"," % after else: ""
-    js = case kind
-      of TimelineKind.tweets:
-        await fetch(userTweetsUrl(id, cursor), Api.userTweets)
-      of TimelineKind.replies:
-        await fetch(userTweetsAndRepliesUrl(id, cursor), Api.userTweetsAndReplies)
-      of TimelineKind.media:
-        await fetch(mediaUrl(id, cursor), Api.userMedia)
+    url = case kind
+      of TimelineKind.tweets: userTweetsUrl(id, cursor)
+      of TimelineKind.replies: userTweetsAndRepliesUrl(id, cursor)
+      of TimelineKind.media: mediaUrl(id, cursor)
+    js = await fetch(url)
  result = parseGraphTimeline(js, after)

 proc getGraphListTweets*(id: string; after=""): Future[Timeline] {.async.} =
  if id.len == 0: return
  let
    cursor = if after.len > 0: "\"cursor\":\"$1\"," % after else: ""
-    url = graphListTweets ? genParams(restIdVars % [id, cursor])
-  result = parseGraphTimeline(await fetch(url, Api.listTweets), after).tweets
+    url = apiReq(graphListTweets, restIdVars % [id, cursor])
+    js = await fetch(url)
+  result = parseGraphTimeline(js, after).tweets

 proc getGraphListBySlug*(name, list: string): Future[List] {.async.} =
  let
    variables = %*{"screenName": name, "listSlug": list}
-    url = graphListBySlug ? genParams($variables)
-  result = parseGraphList(await fetch(url, Api.listBySlug))
+    url = apiReq(graphListBySlug, $variables)
+    js = await fetch(url)
+  result = parseGraphList(js)

 proc getGraphList*(id: string): Future[List] {.async.} =
-  let
-    url = graphListById ? genParams("""{"listId": "$1"}""" % id)
-  result = parseGraphList(await fetch(url, Api.list))
+  let 
+    url = apiReq(graphListById, """{"listId": "$1"}""" % id)
+    js = await fetch(url)
+  result = parseGraphList(js)

 proc getGraphListMembers*(list: List; after=""): Future[Result[User]] {.async.} =
  if list.id.len == 0: return
@@ -113,22 +110,23 @@ proc getGraphListMembers*(list: List; after=""): Future[Result[User]] {.async.}
    }
  if after.len > 0:
    variables["cursor"] = % after
-  let url = graphListMembers ? genParams($variables)
-  result = parseGraphListMembers(await fetchRaw(url, Api.listMembers), after)
+  let 
+    url = apiReq(graphListMembers, $variables)
+    js = await fetchRaw(url)
+  result = parseGraphListMembers(js, after)

 proc getGraphTweetResult*(id: string): Future[Tweet] {.async.} =
  if id.len == 0: return
  let
-    variables = """{"rest_id": "$1"}""" % id
-    params = {"variables": variables, "features": gqlFeatures}
-    js = await fetch(graphTweetResult ? params, Api.tweetResult)
+    url = apiReq(graphTweetResult, """{"rest_id": "$1"}""" % id)
+    js = await fetch(url)
  result = parseGraphTweetResult(js)

 proc getGraphTweet(id: string; after=""): Future[Conversation] {.async.} =
  if id.len == 0: return
  let
    cursor = if after.len > 0: "\"cursor\":\"$1\"," % after else: ""
-    js = await fetch(tweetDetailUrl(id, cursor), Api.tweetDetail)
+    js = await fetch(tweetDetailUrl(id, cursor))
  result = parseGraphConversation(js, id)

 proc getReplies*(id, after: string): Future[Result[Chain]] {.async.} =
@@ -157,8 +155,10 @@ proc getGraphTweetSearch*(query: Query; after=""): Future[Timeline] {.async.} =
    }
  if after.len > 0:
    variables["cursor"] = % after
-  let url = graphSearchTimeline ? genParams($variables)
-  result = parseGraphSearch[Tweets](await fetch(url, Api.search), after)
+  let 
+    url = apiReq(graphSearchTimeline, $variables)
+    js = await fetch(url)
+  result = parseGraphSearch[Tweets](js, after)
  result.query = query

 proc getGraphUserSearch*(query: Query; after=""): Future[Result[User]] {.async.} =
@@ -179,13 +179,15 @@ proc getGraphUserSearch*(query: Query; after=""): Future[Result[User]] {.async.}
    variables["cursor"] = % after
    result.beginning = false

-  let url = graphSearchTimeline ? genParams($variables)
-  result = parseGraphSearch[User](await fetch(url, Api.search), after)
+  let 
+    url = apiReq(graphSearchTimeline, $variables)
+    js = await fetch(url)
+  result = parseGraphSearch[User](js, after)
  result.query = query

 proc getPhotoRail*(id: string): Future[PhotoRail] {.async.} =
  if id.len == 0: return
-  let js = await fetch(mediaUrl(id, ""), Api.userMedia)
+  let js = await fetch(mediaUrl(id, ""))
  result = parseGraphPhotoRail(js)

 proc resolve*(url: string; prefs: Prefs): Future[string] {.async.} =
--- a/src/apiutils.nim
+++ b/src/apiutils.nim
@@ -1,16 +1,30 @@
 # SPDX-License-Identifier: AGPL-3.0-only
 import httpclient, asyncdispatch, options, strutils, uri, times, math, tables
 import jsony, packedjson, zippy, oauth1
-import types, auth, consts, parserutils, http_pool
+import types, auth, consts, parserutils, http_pool, tid
 import experimental/types/common

 const
  rlRemaining = "x-rate-limit-remaining"
  rlReset = "x-rate-limit-reset"
  rlLimit = "x-rate-limit-limit"
-  errorsToSkip = {doesntExist, tweetNotFound, timeout, unauthorized, badRequest}
+  errorsToSkip = {null, doesntExist, tweetNotFound, timeout, unauthorized, badRequest}

-var pool: HttpPool
+var 
+  pool: HttpPool
+  disableTid: bool
+
+proc setDisableTid*(disable: bool) =
+  disableTid = disable
+
+proc toUrl(req: ApiReq; sessionKind: SessionKind): Uri =
+  case sessionKind
+  of oauth:  
+    let o = req.oauth
+    parseUri("https://api.x.com/graphql")   / o.endpoint ? o.params
+  of cookie: 
+    let c = req.cookie
+    parseUri("https://x.com/i/api/graphql") / c.endpoint ? c.params

 proc getOauthHeader(url, oauthToken, oauthTokenSecret: string): string =
  let
@@ -32,31 +46,34 @@ proc getOauthHeader(url, oauthToken, oauthTokenSecret: string): string =
 proc getCookieHeader(authToken, ct0: string): string =
  "auth_token=" & authToken & "; ct0=" & ct0

-proc genHeaders*(session: Session, url: string): HttpHeaders =
+proc genHeaders*(session: Session, url: Uri): Future[HttpHeaders] {.async.} =
  result = newHttpHeaders({
-    "connection": "keep-alive",
-    "content-type": "application/json",
-    "x-twitter-active-user": "yes",
-    "x-twitter-client-language": "en",
-    "authority": "api.x.com",
+    "accept": "*/*",
    "accept-encoding": "gzip",
    "accept-language": "en-US,en;q=0.9",
-    "accept": "*/*",
-    "DNT": "1",
-    "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
+    "connection": "keep-alive",
+    "content-type": "application/json",
+    "origin": "https://x.com",
+    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36",
+    "x-twitter-active-user": "yes",
+    "x-twitter-client-language": "en"
  })

  case session.kind
  of SessionKind.oauth:
-    result["authorization"] = getOauthHeader(url, session.oauthToken, session.oauthSecret)
+    result["authorization"] = getOauthHeader($url, session.oauthToken, session.oauthSecret)
  of SessionKind.cookie:
-    result["authorization"] = "Bearer AAAAAAAAAAAAAAAAAAAAAFXzAwAAAAAAMHCxpeSDG1gLNLghVe8d74hl6k4%3DRUMF4xAQLsbeBhTSRrCiQpJtxoGWeyHrDb5te2jpGskWDFW82F"
    result["x-twitter-auth-type"] = "OAuth2Session"
    result["x-csrf-token"] = session.ct0
    result["cookie"] = getCookieHeader(session.authToken, session.ct0)
+    if disableTid:
+      result["authorization"] = bearerToken2
+    else:
+      result["authorization"] = bearerToken
+      result["x-client-transaction-id"] = await genTid(url.path)

-proc getAndValidateSession*(api: Api): Future[Session] {.async.} =
-  result = await getSession(api)
+proc getAndValidateSession*(req: ApiReq): Future[Session] {.async.} =
+  result = await getSession(req)
  case result.kind
  of SessionKind.oauth:
    if result.oauthToken.len == 0:
@@ -73,7 +90,7 @@ template fetchImpl(result, fetchBody) {.dirty.} =

  try:
    var resp: AsyncResponse
-    pool.use(genHeaders(session, $url)):
+    pool.use(await genHeaders(session, url)):
      template getContent =
        resp = await c.get($url)
        result = await resp.body
@@ -89,7 +106,7 @@ template fetchImpl(result, fetchBody) {.dirty.} =
        remaining = parseInt(resp.headers[rlRemaining])
        reset = parseInt(resp.headers[rlReset])
        limit = parseInt(resp.headers[rlLimit])
-      session.setRateLimit(api, remaining, reset, limit)
+      session.setRateLimit(req, remaining, reset, limit)

    if result.len > 0:
      if resp.headers.getOrDefault("content-encoding") == "gzip":
@@ -98,24 +115,22 @@ template fetchImpl(result, fetchBody) {.dirty.} =
      if result.startsWith("{\"errors"):
        let errors = result.fromJson(Errors)
        if errors notin errorsToSkip:
-          echo "Fetch error, API: ", api, ", errors: ", errors
+          echo "Fetch error, API: ", url.path, ", errors: ", errors
          if errors in {expiredToken, badToken, locked}:
            invalidate(session)
            raise rateLimitError()
          elif errors in {rateLimited}:
            # rate limit hit, resets after 24 hours
-            setLimited(session, api)
+            setLimited(session, req)
            raise rateLimitError()
      elif result.startsWith("429 Too Many Requests"):
-        echo "[sessions] 429 error, API: ", api, ", session: ", session.pretty
-        session.apis[api].remaining = 0
-        # rate limit hit, resets after the 15 minute window
+        echo "[sessions] 429 error, API: ", url.path, ", session: ", session.pretty
        raise rateLimitError()

    fetchBody

    if resp.status == $Http400:
-      echo "ERROR 400, ", api, ": ", result
+      echo "ERROR 400, ", url.path, ": ", result
      raise newException(InternalError, $url)
  except InternalError as e:
    raise e
@@ -134,19 +149,16 @@ template retry(bod) =
  try:
    bod
  except RateLimitError:
-    echo "[sessions] Rate limited, retrying ", api, " request..."
+    echo "[sessions] Rate limited, retrying ", req.cookie.endpoint, " request..."
    bod

-proc fetch*(url: Uri | SessionAwareUrl; api: Api): Future[JsonNode] {.async.} =
+proc fetch*(req: ApiReq): Future[JsonNode] {.async.} =
  retry:
    var 
      body: string
-      session = await getAndValidateSession(api)
+      session = await getAndValidateSession(req)

-    when url is SessionAwareUrl:
-      let url = case session.kind
-        of SessionKind.oauth: url.oauthUrl
-        of SessionKind.cookie: url.cookieUrl
+    let url = req.toUrl(session.kind)

    fetchImpl body:
      if body.startsWith('{') or body.startsWith('['):
@@ -157,19 +169,15 @@ proc fetch*(url: Uri | SessionAwareUrl; api: Api): Future[JsonNode] {.async.} =

      let error = result.getError
      if error != null and error notin errorsToSkip:
-        echo "Fetch error, API: ", api, ", error: ", error
+        echo "Fetch error, API: ", url.path, ", error: ", error
        if error in {expiredToken, badToken, locked}:
          invalidate(session)
          raise rateLimitError()

-proc fetchRaw*(url: Uri | SessionAwareUrl; api: Api): Future[string] {.async.} =
+proc fetchRaw*(req: ApiReq): Future[string] {.async.} =
  retry:
-    var session = await getAndValidateSession(api)
-
-    when url is SessionAwareUrl:
-      let url = case session.kind
-        of SessionKind.oauth: url.oauthUrl
-        of SessionKind.cookie: url.cookieUrl
+    var session = await getAndValidateSession(req)
+    let url = req.toUrl(session.kind)

    fetchImpl result:
      if not (result.startsWith('{') or result.startsWith('[')):
--- a/src/auth.nim
+++ b/src/auth.nim
@@ -1,6 +1,6 @@
 #SPDX-License-Identifier: AGPL-3.0-only
-import std/[asyncdispatch, times, json, random, sequtils, strutils, tables, packedsets, os]
-import types
+import std/[asyncdispatch, times, json, random, strutils, tables, packedsets, os]
+import types, consts
 import experimental/parser/session

 # max requests at a time per session to avoid race conditions
@@ -15,6 +15,11 @@ var
 template log(str: varargs[string, `$`]) =
  echo "[sessions] ", str.join("")

+proc endpoint(req: ApiReq; session: Session): string =
+  case session.kind
+  of oauth: req.oauth.endpoint
+  of cookie: req.cookie.endpoint
+
 proc pretty*(session: Session): string =
  if session.isNil:
    return "<null>"
@@ -122,11 +127,12 @@ proc rateLimitError*(): ref RateLimitError =
 proc noSessionsError*(): ref NoSessionsError =
  newException(NoSessionsError, "no sessions available")

-proc isLimited(session: Session; api: Api): bool =
+proc isLimited(session: Session; req: ApiReq): bool =
  if session.isNil:
    return true

-  if session.limited and api != Api.userTweets:
+  let api = req.endpoint(session)
+  if session.limited and api != graphUserTweetsV2:
    if (epochTime().int - session.limitedAt) > hourInSeconds:
      session.limited = false
      log "resetting limit: ", session.pretty
@@ -140,8 +146,8 @@ proc isLimited(session: Session; api: Api): bool =
  else:
    return false

-proc isReady(session: Session; api: Api): bool =
-  not (session.isNil or session.pending > maxConcurrentReqs or session.isLimited(api))
+proc isReady(session: Session; req: ApiReq): bool =
+  not (session.isNil or session.pending > maxConcurrentReqs or session.isLimited(req))

 proc invalidate*(session: var Session) =
  if session.isNil: return
@@ -156,24 +162,26 @@ proc release*(session: Session) =
  if session.isNil: return
  dec session.pending

-proc getSession*(api: Api): Future[Session] {.async.} =
+proc getSession*(req: ApiReq): Future[Session] {.async.} =
  for i in 0 ..< sessionPool.len:
-    if result.isReady(api): break
+    if result.isReady(req): break
    result = sessionPool.sample()

-  if not result.isNil and result.isReady(api):
+  if not result.isNil and result.isReady(req):
    inc result.pending
  else:
-    log "no sessions available for API: ", api
+    log "no sessions available for API: ", req.cookie.endpoint
    raise noSessionsError()

-proc setLimited*(session: Session; api: Api) =
+proc setLimited*(session: Session; req: ApiReq) =
+  let api = req.endpoint(session)
  session.limited = true
  session.limitedAt = epochTime().int
  log "rate limited by api: ", api, ", reqs left: ", session.apis[api].remaining, ", ", session.pretty

-proc setRateLimit*(session: Session; api: Api; remaining, reset, limit: int) =
+proc setRateLimit*(session: Session; req: ApiReq; remaining, reset, limit: int) =
  # avoid undefined behavior in race conditions
+  let api = req.endpoint(session)
  if api in session.apis:
    let rateLimit = session.apis[api]
    if rateLimit.reset >= reset and rateLimit.remaining < remaining:
--- a/src/config.nim
+++ b/src/config.nim
@@ -40,7 +40,8 @@ proc getConfig*(path: string): (Config, parseCfg.Config) =
    enableRss: cfg.get("Config", "enableRSS", true),
    enableDebug: cfg.get("Config", "enableDebug", false),
    proxy: cfg.get("Config", "proxy", ""),
-    proxyAuth: cfg.get("Config", "proxyAuth", "")
+    proxyAuth: cfg.get("Config", "proxyAuth", ""),
+    disableTid: cfg.get("Config", "disableTid", false)
  )

  return (conf, cfg)
--- a/src/consts.nim
+++ b/src/consts.nim
@@ -1,29 +1,29 @@
 # SPDX-License-Identifier: AGPL-3.0-only
-import uri, strutils
+import strutils

 const
  consumerKey* = "3nVuSoBZnx6U4vzUxf5w"
  consumerSecret* = "Bcs59EFbbsdF6Sl9Ng71smgStWEGwXXKSjYvPVt7qys"
+  bearerToken* = "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA"
+  bearerToken2* = "Bearer AAAAAAAAAAAAAAAAAAAAAFXzAwAAAAAAMHCxpeSDG1gLNLghVe8d74hl6k4%3DRUMF4xAQLsbeBhTSRrCiQpJtxoGWeyHrDb5te2jpGskWDFW82F"

-  gql = parseUri("https://api.x.com") / "graphql"
-
-  graphUser* = gql / "-oaLodhGbbnzJBACb1kk2Q/UserByScreenName"
-  graphUserV2* = gql / "WEoGnYB0EG1yGwamDCF6zg/UserResultByScreenNameQuery"
-  graphUserById* = gql / "VN33vKXrPT7p35DgNR27aw/UserResultByIdQuery"
-  graphUserTweetsV2* = gql / "6QdSuZ5feXxOadEdXa4XZg/UserWithProfileTweetsQueryV2"
-  graphUserTweetsAndRepliesV2* = gql / "BDX77Xzqypdt11-mDfgdpQ/UserWithProfileTweetsAndRepliesQueryV2"
-  graphUserTweets* = gql / "oRJs8SLCRNRbQzuZG93_oA/UserTweets"
-  graphUserTweetsAndReplies* = gql / "kkaJ0Mf34PZVarrxzLihjg/UserTweetsAndReplies"
-  graphUserMedia* = gql / "36oKqyQ7E_9CmtONGjJRsA/UserMedia"
-  graphUserMediaV2* = gql / "bp0e_WdXqgNBIwlLukzyYA/MediaTimelineV2"
-  graphTweet* = gql / "Y4Erk_-0hObvLpz0Iw3bzA/ConversationTimeline"
-  graphTweetDetail* = gql / "YVyS4SfwYW7Uw5qwy0mQCA/TweetDetail"
-  graphTweetResult* = gql / "nzme9KiYhfIOrrLrPP_XeQ/TweetResultByIdQuery"
-  graphSearchTimeline* = gql / "bshMIjqDk8LTXTq4w91WKw/SearchTimeline"
-  graphListById* = gql / "cIUpT1UjuGgl_oWiY7Snhg/ListByRestId"
-  graphListBySlug* = gql / "K6wihoTiTrzNzSF8y1aeKQ/ListBySlug"
-  graphListMembers* = gql / "fuVHh5-gFn8zDBBxb8wOMA/ListMembers"
-  graphListTweets* = gql / "VQf8_XQynI3WzH6xopOMMQ/ListTimeline"
+  graphUser* = "-oaLodhGbbnzJBACb1kk2Q/UserByScreenName"
+  graphUserV2* = "WEoGnYB0EG1yGwamDCF6zg/UserResultByScreenNameQuery"
+  graphUserById* = "VN33vKXrPT7p35DgNR27aw/UserResultByIdQuery"
+  graphUserTweetsV2* = "6QdSuZ5feXxOadEdXa4XZg/UserWithProfileTweetsQueryV2"
+  graphUserTweetsAndRepliesV2* = "BDX77Xzqypdt11-mDfgdpQ/UserWithProfileTweetsAndRepliesQueryV2"
+  graphUserTweets* = "oRJs8SLCRNRbQzuZG93_oA/UserTweets"
+  graphUserTweetsAndReplies* = "kkaJ0Mf34PZVarrxzLihjg/UserTweetsAndReplies"
+  graphUserMedia* = "36oKqyQ7E_9CmtONGjJRsA/UserMedia"
+  graphUserMediaV2* = "bp0e_WdXqgNBIwlLukzyYA/MediaTimelineV2"
+  graphTweet* = "Y4Erk_-0hObvLpz0Iw3bzA/ConversationTimeline"
+  graphTweetDetail* = "YVyS4SfwYW7Uw5qwy0mQCA/TweetDetail"
+  graphTweetResult* = "nzme9KiYhfIOrrLrPP_XeQ/TweetResultByIdQuery"
+  graphSearchTimeline* = "bshMIjqDk8LTXTq4w91WKw/SearchTimeline"
+  graphListById* = "cIUpT1UjuGgl_oWiY7Snhg/ListByRestId"
+  graphListBySlug* = "K6wihoTiTrzNzSF8y1aeKQ/ListBySlug"
+  graphListMembers* = "fuVHh5-gFn8zDBBxb8wOMA/ListMembers"
+  graphListTweets* = "VQf8_XQynI3WzH6xopOMMQ/ListTimeline"

  gqlFeatures* = """{
  "android_ad_formats_media_component_render_overlay_enabled": false,
--- a/src/experimental/parser/tid.nim
+++ b/src/experimental/parser/tid.nim
@@ -0,0 +1,8 @@
+import jsony
+import ../types/tid
+export TidPair
+
+proc parseTidPairs*(raw: string): seq[TidPair] =
+  result = raw.fromJson(seq[TidPair])
+  if result.len == 0:
+    raise newException(ValueError, "Parsing pairs failed: " & raw)
--- a/src/experimental/types/tid.nim
+++ b/src/experimental/types/tid.nim
@@ -0,0 +1,4 @@
+type
+  TidPair* = object
+    animationKey*: string
+    verification*: string
--- a/src/formatters.nim
+++ b/src/formatters.nim
@@ -1,5 +1,5 @@
 # SPDX-License-Identifier: AGPL-3.0-only
-import strutils, strformat, times, uri, tables, xmltree, htmlparser, htmlgen
+import strutils, strformat, times, uri, tables, xmltree, htmlparser, htmlgen, math
 import std/[enumerate, re]
 import types, utils, query

@@ -154,6 +154,17 @@ proc getShortTime*(tweet: Tweet): string =
  else:
    result = "now"

+proc getDuration*(video: Video): string =
+  let 
+    ms = video.durationMs
+    sec = int(round(ms / 1000))
+    min = floorDiv(sec, 60)
+    hour = floorDiv(min, 60)
+  if hour > 0:
+    return &"{hour}:{min mod 60}:{sec mod 60:02}"
+  else:
+    return &"{min mod 60}:{sec mod 60:02}"
+
 proc getLink*(tweet: Tweet; focus=true): string =
  if tweet.id == 0: return
  var username = tweet.user.username
--- a/src/nitter.nim
+++ b/src/nitter.nim
@@ -6,7 +6,7 @@ from os import getEnv

 import jester

-import types, config, prefs, formatters, redis_cache, http_pool, auth
+import types, config, prefs, formatters, redis_cache, http_pool, auth, apiutils
 import views/[general, about]
 import routes/[
  preferences, timeline, status, media, search, rss, list, debug,
@@ -37,6 +37,7 @@ setHmacKey(cfg.hmacKey)
 setProxyEncoding(cfg.base64Media)
 setMaxHttpConns(cfg.httpMaxConns)
 setHttpProxy(cfg.proxy, cfg.proxyAuth)
+setDisableTid(cfg.disableTid)
 initAboutPage(cfg.staticDir)

 waitFor initRedisPool(cfg)
--- a/src/parser.nim
+++ b/src/parser.nim
@@ -184,7 +184,7 @@ proc parseMediaEntities(js: JsonNode; result: var Tweet) =
  # Remove media URLs from text
  with mediaList, js{"legacy", "entities", "media"}:
    for url in mediaList:
-      let expandedUrl = url{"expanded_url"}.getStr
+      let expandedUrl = url.getExpandedUrl
      if result.text.endsWith(expandedUrl):
        result.text.removeSuffix(expandedUrl)
        result.text = result.text.strip()
@@ -267,7 +267,7 @@ proc parseCard(js: JsonNode; urls: JsonNode): Card =

  for u in ? urls:
    if u{"url"}.getStr == result.url:
-      result.url = u{"expanded_url"}.getStr
+      result.url = u.getExpandedUrl(result.url)
      break

  if kind in {videoDirectMessage, imageDirectMessage}:
--- a/src/parserutils.nim
+++ b/src/parserutils.nim
@@ -112,6 +112,9 @@ proc getImageStr*(js: JsonNode): string =
 template getImageVal*(js: JsonNode): string =
  js{"image_value", "url"}.getImageStr

+template getExpandedUrl*(js: JsonNode; fallback=""): string =
+  js{"expanded_url"}.getStr(js{"url"}.getStr(fallback))
+
 proc getCardUrl*(js: JsonNode; kind: CardKind): string =
  result = js{"website_url"}.getStrVal
  if kind == promoVideoConvo:
@@ -177,7 +180,7 @@ proc extractSlice(js: JsonNode): Slice[int] =
 proc extractUrls(result: var seq[ReplaceSlice]; js: JsonNode;
                 textLen: int; hideTwitter = false) =
  let
-    url = js["expanded_url"].getStr
+    url = js.getExpandedUrl
    slice = js.extractSlice

  if hideTwitter and slice.b.succ >= textLen and url.isTwitterUrl:
@@ -238,7 +241,7 @@ proc expandUserEntities*(user: var User; js: JsonNode) =
    ent = ? js{"entities"}

  with urls, ent{"url", "urls"}:
-    user.website = urls[0]{"expanded_url"}.getStr
+    user.website = urls[0].getExpandedUrl

  var replacements = newSeq[ReplaceSlice]()

@@ -268,7 +271,7 @@ proc expandTextEntities(tweet: Tweet; entities: JsonNode; text: string; textSlic
      replacements.extractUrls(u, textSlice.b, hideTwitter = hasRedundantLink)

      if hasCard and u{"url"}.getStr == get(tweet.card).url:
-        get(tweet.card).url = u{"expanded_url"}.getStr
+        get(tweet.card).url = u.getExpandedUrl

  with media, entities{"media"}:
    for m in media:
--- a/src/routes/media.nim
+++ b/src/routes/media.nim
@@ -52,10 +52,10 @@ proc proxyMedia*(req: jester.Request; url: string): Future[HttpCode] {.async.} =
        ""

    let headers = newHttpHeaders({
-      "Content-Type": res.headers["content-type", 0],
-      "Content-Length": contentLength,
-      "Cache-Control": maxAge,
-      "ETag": hashed
+      "content-type": res.headers["content-type", 0],
+      "content-length": contentLength,
+      "cache-control": maxAge,
+      "etag": hashed
    })

    respond(request, headers)
--- a/src/routes/timeline.nim
+++ b/src/routes/timeline.nim
@@ -114,6 +114,7 @@ proc createTimelineRouter*(cfg: Config) =
    get "/@name/?@tab?/?":
      cond '.' notin @"name"
      cond @"name" notin ["pic", "gif", "video", "search", "settings", "login", "intent", "i"]
+      cond @"name".allCharsInSet({'a'..'z', 'A'..'Z', '0'..'9', '_', ','})
      cond @"tab" in ["with_replies", "media", "search", ""]
      let
        prefs = cookiePrefs()
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -1,39 +1,40 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";

 .panel-container {
-    margin: auto;
-    font-size: 130%;
+  margin: auto;
+  font-size: 130%;
 }

 .error-panel {
-    @include center-panel(var(--error_red));
-    text-align: center;
+  @include center-panel(var(--error_red));
+  text-align: center;
 }

 .search-bar > form {
-    @include center-panel(var(--darkest_grey));
+  @include center-panel(var(--darkest_grey));

-    button {
-        background: var(--bg_elements);
-        color: var(--fg_color);
-        border: 0;
-        border-radius: 3px;
-        cursor: pointer;
-        font-weight: bold;
-        width: 30px;
-        height: 30px;
-    }
+  button {
+    background: var(--bg_elements);
+    color: var(--fg_color);
+    border: 0;
+    border-radius: 3px;
+    cursor: pointer;
+    font-weight: bold;
+    width: 30px;
+    height: 30px;
+    padding: 0px 5px 1px 8px;
+  }

-    input {
-        font-size: 16px;
-        width: 100%;
-        background: var(--bg_elements);
-        color: var(--fg_color);
-        border: 0;
-        border-radius: 4px;
-        padding: 4px;
-        margin-right: 8px;
-        height: unset;
-    }
+  input {
+    font-size: 16px;
+    width: 100%;
+    background: var(--bg_elements);
+    color: var(--fg_color);
+    border: 0;
+    border-radius: 4px;
+    padding: 4px;
+    margin-right: 8px;
+    height: unset;
+  }
 }
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -1,46 +1,43 @@
 // colors
-$bg_color: #0F0F0F;
-$fg_color: #F8F8F2;
-$fg_faded: #F8F8F2CF;
-$fg_dark: #FF6C60;
-$fg_nav: #FF6C60;
+$bg_color: #0f0f0f;
+$fg_color: #f8f8f2;
+$fg_faded: #f8f8f2cf;
+$fg_dark: #ff6c60;
+$fg_nav: #ff6c60;

 $bg_panel: #161616;
 $bg_elements: #121212;
-$bg_overlays: #1F1F1F;
-$bg_hover: #1A1A1A;
+$bg_overlays: #1f1f1f;
+$bg_hover: #1a1a1a;

 $grey: #888889;
 $dark_grey: #404040;
 $darker_grey: #282828;
 $darkest_grey: #222222;
-$border_grey: #3E3E35;
+$border_grey: #3e3e35;

-$accent: #FF6C60;
-$accent_light: #FFACA0;
-$accent_dark: #8A3731;
-$accent_border: #FF6C6091;
+$accent: #ff6c60;
+$accent_light: #ffaca0;
+$accent_dark: #8a3731;
+$accent_border: #ff6c6091;

-$play_button: #D8574D;
-$play_button_hover: #FF6C60;
+$play_button: #d8574d;
+$play_button_hover: #ff6c60;

-$more_replies_dots: #AD433B;
-$error_red: #420A05;
+$more_replies_dots: #ad433b;
+$error_red: #420a05;

-$verified_blue: #1DA1F2;
-$verified_business: #FAC82B;
-$verified_government: #C1B6A4;
+$verified_blue: #1da1f2;
+$verified_business: #fac82b;
+$verified_government: #c1b6a4;
 $icon_text: $fg_color;

 $tab: $fg_color;
 $tab_selected: $accent;

-$shadow: rgba(0,0,0,.6);
-$shadow_dark: rgba(0,0,0,.2);
+$shadow: rgba(0, 0, 0, 0.6);
+$shadow_dark: rgba(0, 0, 0, 0.2);

 //fonts
-$font_0: Helvetica Neue;
-$font_1: Helvetica;
-$font_2: Arial;
-$font_3: sans-serif;
-$font_4: fontello;
+$font_0: sans-serif;
+$font_1: fontello;
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -1,180 +1,202 @@
-@import '_variables';
+@import "_variables";

-@import 'tweet/_base';
-@import 'profile/_base';
-@import 'general';
-@import 'navbar';
-@import 'inputs';
-@import 'timeline';
-@import 'search';
+@import "tweet/_base";
+@import "profile/_base";
+@import "general";
+@import "navbar";
+@import "inputs";
+@import "timeline";
+@import "search";

 body {
-    // colors
-    --bg_color: #{$bg_color};
-    --fg_color: #{$fg_color};
-    --fg_faded: #{$fg_faded};
-    --fg_dark: #{$fg_dark};
-    --fg_nav: #{$fg_nav};
+  // colors
+  --bg_color: #{$bg_color};
+  --fg_color: #{$fg_color};
+  --fg_faded: #{$fg_faded};
+  --fg_dark: #{$fg_dark};
+  --fg_nav: #{$fg_nav};

-    --bg_panel: #{$bg_panel};
-    --bg_elements: #{$bg_elements};
-    --bg_overlays: #{$bg_overlays};
-    --bg_hover: #{$bg_hover};
+  --bg_panel: #{$bg_panel};
+  --bg_elements: #{$bg_elements};
+  --bg_overlays: #{$bg_overlays};
+  --bg_hover: #{$bg_hover};

-    --grey: #{$grey};
-    --dark_grey: #{$dark_grey};
-    --darker_grey: #{$darker_grey};
-    --darkest_grey: #{$darkest_grey};
-    --border_grey: #{$border_grey};
+  --grey: #{$grey};
+  --dark_grey: #{$dark_grey};
+  --darker_grey: #{$darker_grey};
+  --darkest_grey: #{$darkest_grey};
+  --border_grey: #{$border_grey};

-    --accent: #{$accent};
-    --accent_light: #{$accent_light};
-    --accent_dark: #{$accent_dark};
-    --accent_border: #{$accent_border};
+  --accent: #{$accent};
+  --accent_light: #{$accent_light};
+  --accent_dark: #{$accent_dark};
+  --accent_border: #{$accent_border};

-    --play_button: #{$play_button};
-    --play_button_hover: #{$play_button_hover};
+  --play_button: #{$play_button};
+  --play_button_hover: #{$play_button_hover};

-    --more_replies_dots: #{$more_replies_dots};
-    --error_red: #{$error_red};
+  --more_replies_dots: #{$more_replies_dots};
+  --error_red: #{$error_red};

-    --verified_blue: #{$verified_blue};
-    --verified_business: #{$verified_business};
-    --verified_government: #{$verified_government};
-    --icon_text: #{$icon_text};
+  --verified_blue: #{$verified_blue};
+  --verified_business: #{$verified_business};
+  --verified_government: #{$verified_government};
+  --icon_text: #{$icon_text};

-    --tab: #{$fg_color};
-    --tab_selected: #{$accent};
+  --tab: #{$fg_color};
+  --tab_selected: #{$accent};

-    --profile_stat: #{$fg_color};
+  --profile_stat: #{$fg_color};

-    background-color: var(--bg_color);
-    color: var(--fg_color);
-    font-family: $font_0, $font_1, $font_2, $font_3;
-    font-size: 15px;
-    line-height: 1.3;
-    margin: 0;
+  background-color: var(--bg_color);
+  color: var(--fg_color);
+  font-family: $font_0, $font_1;
+  font-size: 15px;
+  line-height: 1.3;
+  margin: 0;
 }

 * {
-    outline: unset;
-    margin: 0;
-    text-decoration: none;
+  outline: unset;
+  margin: 0;
+  text-decoration: none;
 }

 h1 {
-    display: inline;
+  display: inline;
 }

-h2, h3 {
-    font-weight: normal;
+h2,
+h3 {
+  font-weight: normal;
 }

 p {
-    margin: 14px 0;
+  margin: 14px 0;
 }

 a {
-    color: var(--accent);
+  color: var(--accent);

-    &:hover {
-        text-decoration: underline;
-    }
+  &:hover {
+    text-decoration: underline;
+  }
 }

 fieldset {
-    border: 0;
-    padding: 0;
-    margin-top: -0.6em;
+  border: 0;
+  padding: 0;
+  margin-top: -0.6em;
 }

 legend {
-    width: 100%;
-    padding: .6em 0 .3em 0;
-    border: 0;
-    font-size: 16px;
-    font-weight: 600;
-    border-bottom: 1px solid var(--border_grey);
-    margin-bottom: 8px;
+  width: 100%;
+  padding: 0.6em 0 0.3em 0;
+  border: 0;
+  font-size: 16px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--border_grey);
+  margin-bottom: 8px;
 }

 .preferences .note {
-    border-top: 1px solid var(--border_grey);
-    border-bottom: 1px solid var(--border_grey);
-    padding: 6px 0 8px 0;
-    margin-bottom: 8px;
-    margin-top: 16px;
+  border-top: 1px solid var(--border_grey);
+  border-bottom: 1px solid var(--border_grey);
+  padding: 6px 0 8px 0;
+  margin-bottom: 8px;
+  margin-top: 16px;
 }

 ul {
-    padding-left: 1.3em;
+  padding-left: 1.3em;
 }

 .container {
-    display: flex;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-    padding-top: 50px;
-    margin: auto;
-    min-height: 100vh;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding-top: 50px;
+  margin: auto;
+  min-height: 100vh;
 }

 .icon-container {
-    display: inline;
+  display: inline;
 }

 .overlay-panel {
-    max-width: 600px;
-    width: 100%;
-    margin: 0 auto;
-    margin-top: 10px;
-    background-color: var(--bg_overlays);
-    padding: 10px 15px;
-    align-self: start;
+  max-width: 600px;
+  width: 100%;
+  margin: 0 auto;
+  margin-top: 10px;
+  background-color: var(--bg_overlays);
+  padding: 10px 15px;
+  align-self: start;

-    ul {
-        margin-bottom: 14px;
-    }
+  ul {
+    margin-bottom: 14px;
+  }

-    p {
-        word-break: break-word;
-    }
+  p {
+    word-break: break-word;
+  }
 }

 .verified-icon {
-    color: var(--icon_text);
-    border-radius: 50%;
-    flex-shrink: 0;
-    margin: 2px 0 3px 3px;
-    padding-top: 3px;
-    height: 11px;
-    width: 14px;
-    font-size: 8px;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 2px;

-    &.blue {
-        background-color: var(--verified_blue);
+  .verified-icon-circle {
+    position: absolute;
+    font-size: 15px;
+  }
+
+  .verified-icon-check {
+    position: absolute;
+    font-size: 9px;
+    margin: 5px 3px;
+  }
+
+  &.blue {
+    .verified-icon-circle {
+      color: var(--verified_blue);
    }

-    &.business {
-        color: var(--bg_panel);
-        background-color: var(--verified_business);
+    .verified-icon-check {
+      color: var(--icon_text);
+    }
+  }
+
+  &.business {
+    .verified-icon-circle {
+      color: var(--verified_business);
    }

-    &.government {
-        color: var(--bg_panel);
-        background-color: var(--verified_government);
+    .verified-icon-check {
+      color: var(--bg_panel);
    }
+  }
+
+  &.government {
+    .verified-icon-circle {
+      color: var(--verified_government);
+    }
+
+    .verified-icon-check {
+      color: var(--bg_panel);
+    }
+  }
 }

-@media(max-width: 600px) {
-    .preferences-container {
-        max-width: 95vw;
-    }
+@media (max-width: 600px) {
+  .preferences-container {
+    max-width: 95vw;
+  }

-    .nav-item, .nav-item .icon-container {
-        font-size: 16px;
-    }
+  .nav-item,
+  .nav-item .icon-container {
+    font-size: 16px;
+  }
 }
--- a/src/sass/inputs.scss
+++ b/src/sass/inputs.scss
@@ -1,203 +1,203 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";

 button {
-    @include input-colors;
-    background-color: var(--bg_elements);
-    color: var(--fg_color);
-    border: 1px solid var(--accent_border);
-    padding: 3px 6px;
-    font-size: 14px;
-    cursor: pointer;
-    float: right;
+  @include input-colors;
+  background-color: var(--bg_elements);
+  color: var(--fg_color);
+  border: 1px solid var(--accent_border);
+  padding: 3px 6px;
+  font-size: 14px;
+  cursor: pointer;
+  float: right;
 }

 input[type="text"],
 input[type="date"],
 input[type="number"],
 select {
-    @include input-colors;
-    background-color: var(--bg_elements);
-    padding: 1px 4px;
-    color: var(--fg_color);
-    border: 1px solid var(--accent_border);
-    border-radius: 0;
-    font-size: 14px;
+  @include input-colors;
+  background-color: var(--bg_elements);
+  padding: 1px 4px;
+  color: var(--fg_color);
+  border: 1px solid var(--accent_border);
+  border-radius: 0;
+  font-size: 14px;
 }

 input[type="number"] {
-    -moz-appearance: textfield;
+  -moz-appearance: textfield;
 }

 input[type="text"],
 input[type="number"] {
-    height: 16px;
+  height: 16px;
 }

 select {
-    height: 20px;
-    padding: 0 2px;
-    line-height: 1;
+  height: 20px;
+  padding: 0 2px;
+  line-height: 1;
 }

 input[type="date"]::-webkit-inner-spin-button {
-    display: none;
+  display: none;
 }

 input[type="number"] {
-    -moz-appearance: textfield;
+  -moz-appearance: textfield;
 }

 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-    display: none;
-    -webkit-appearance: none;
-    margin: 0;
+  display: none;
+  -webkit-appearance: none;
+  margin: 0;
 }

 input[type="date"]::-webkit-clear-button {
-    margin-left: 17px;
-    filter: grayscale(100%);
-    filter: hue-rotate(120deg);
+  margin-left: 17px;
+  filter: grayscale(100%);
+  filter: hue-rotate(120deg);
 }

 input::-webkit-calendar-picker-indicator {
-    opacity: 0;
+  opacity: 0;
 }

 input::-webkit-datetime-edit-day-field:focus,
 input::-webkit-datetime-edit-month-field:focus,
 input::-webkit-datetime-edit-year-field:focus {
-    background-color: var(--accent);
-    color: var(--fg_color);
-    outline: none;
+  background-color: var(--accent);
+  color: var(--fg_color);
+  outline: none;
 }

 .date-range {
-    .date-input {
-        display: inline-block;
-        position: relative;
-    }
+  .date-input {
+    display: inline-block;
+    position: relative;
+  }

-    .icon-container {
-        pointer-events: none;
-        position: absolute;
-        top: 2px;
-        right: 5px;
-    }
+  .icon-container {
+    pointer-events: none;
+    position: absolute;
+    top: 2px;
+    right: 5px;
+  }

-    .search-title {
-        margin: 0 2px;
-    }
+  .search-title {
+    margin: 0 2px;
+  }
 }

 .icon-button button {
-    color: var(--accent);
-    text-decoration: none;
-    background: none;
-    border: none;
-    float: none;
-    padding: unset;
-    padding-left: 4px;
+  color: var(--accent);
+  text-decoration: none;
+  background: none;
+  border: none;
+  float: none;
+  padding: unset;
+  padding-left: 4px;

-    &:hover {
-        color: var(--accent_light);
-    }
+  &:hover {
+    color: var(--accent_light);
+  }
 }

 .checkbox {
-    position: absolute;
-    top: 1px;
-    right: 0;
-    height: 17px;
-    width: 17px;
-    background-color: var(--bg_elements);
-    border: 1px solid var(--accent_border);
+  position: absolute;
+  top: 1px;
+  right: 0;
+  height: 17px;
+  width: 17px;
+  background-color: var(--bg_elements);
+  border: 1px solid var(--accent_border);

-    &:after {
-        content: "";
-        position: absolute;
-        display: none;
-    }
+  &:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
 }

 .checkbox-container {
-    display: block;
-    position: relative;
-    margin-bottom: 5px;
+  display: block;
+  position: relative;
+  margin-bottom: 5px;
+  cursor: pointer;
+  user-select: none;
+  padding-right: 22px;
+
+  input {
+    position: absolute;
+    opacity: 0;
    cursor: pointer;
-    user-select: none;
-    padding-right: 22px;
+    height: 0;
+    width: 0;

-    input {
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
-
-        &:checked ~ .checkbox:after {
-            display: block;
-        }
+    &:checked ~ .checkbox:after {
+      display: block;
    }
+  }

-    &:hover input ~ .checkbox {
-        border-color: var(--accent);
-    }
+  &:hover input ~ .checkbox {
+    border-color: var(--accent);
+  }

-    &:active input ~ .checkbox {
-        border-color: var(--accent_light);
-    }
+  &:active input ~ .checkbox {
+    border-color: var(--accent_light);
+  }

-    .checkbox:after {
-        left: 2px;
-        bottom: 0;
-        font-size: 13px;
-        font-family: $font_4;
-        content: '\e803';
-    }
+  .checkbox:after {
+    left: 2px;
+    bottom: 0;
+    font-size: 13px;
+    font-family: $font_1;
+    content: "\e811";
+  }
 }

 .pref-group {
-    display: inline;
+  display: inline;
 }

 .preferences {
-    button {
-        margin: 6px 0 3px 0;
-    }
+  button {
+    margin: 6px 0 3px 0;
+  }

-    label {
-        padding-right: 150px;
-    }
+  label {
+    padding-right: 150px;
+  }

-    select {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: block;
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        appearance: none;
-    }
+  select {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }

-    input[type="text"],
-    input[type="number"] {
-        position: absolute;
-        right: 0;
-        max-width: 140px;
-    }
+  input[type="text"],
+  input[type="number"] {
+    position: absolute;
+    right: 0;
+    max-width: 140px;
+  }

-    .pref-group {
-        display: block;
-    }
+  .pref-group {
+    display: block;
+  }

-    .pref-input {
-        position: relative;
-        margin-bottom: 6px;
-    }
+  .pref-input {
+    position: relative;
+    margin-bottom: 6px;
+  }

-    .pref-reset {
-        float: left;
-    }
+  .pref-reset {
+    float: left;
+  }
 }
--- a/src/sass/navbar.scss
+++ b/src/sass/navbar.scss
@@ -1,89 +1,87 @@
-@import '_variables';
+@import "_variables";

 nav {
-    display: flex;
-    align-items: center;
-    position: fixed;
-    background-color: var(--bg_overlays);
-    box-shadow: 0 0 4px $shadow;
-    padding: 0;
-    width: 100%;
-    height: 50px;
-    z-index: 1000;
-    font-size: 16px;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  background-color: var(--bg_overlays);
+  box-shadow: 0 0 4px $shadow;
+  padding: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 1000;
+  font-size: 16px;

-    a, .icon-button button {
-        color: var(--fg_nav);
-    }
+  a,
+  .icon-button button {
+    color: var(--fg_nav);
+  }
 }

 .inner-nav {
-    margin: auto;
-    box-sizing: border-box;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    flex-basis: 920px;
-    height: 50px;
+  margin: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  flex-basis: 920px;
+  height: 50px;
 }

 .site-name {
-    font-size: 15px;
-    font-weight: 600;
-    line-height: 1;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;

-    &:hover {
-        color: var(--accent_light);
-        text-decoration: unset;
-    }
+  &:hover {
+    color: var(--accent_light);
+    text-decoration: unset;
+  }
 }

 .site-logo {
-    display: block;
-    width: 35px;
-    height: 35px;
+  display: block;
+  width: 35px;
+  height: 35px;
 }

 .nav-item {
-    display: flex;
-    flex: 1;
-    line-height: 50px;
-    height: 50px;
-    overflow: hidden;
-    flex-wrap: wrap;
-    align-items: center;
+  display: flex;
+  flex: 1;
+  line-height: 50px;
+  height: 50px;
+  overflow: hidden;
+  flex-wrap: wrap;
+  align-items: center;

-    &.right {
-        text-align: right;
-        justify-content: flex-end;
-    }
+  &.right {
+    text-align: right;
+    justify-content: flex-end;
+  }

-    &.right a {
-        padding-left: 4px;
-
-        &:hover {
-            color: var(--accent_light);
-            text-decoration: unset;
-        }
-    }
+  &.right a:hover {
+    color: var(--accent_light);
+    text-decoration: unset;
+  }
 }

 .lp {
-    height: 14px;
-    display: inline-block;
-    position: relative;
-    top: 2px;
-    fill: var(--fg_nav);
+  height: 14px;
+  display: inline-block;
+  position: relative;
+  top: 2px;
+  fill: var(--fg_nav);

-    &:hover {
-        fill: var(--accent_light);
-    }
+  &:hover {
+    fill: var(--accent_light);
+  }
 }

-.icon-info:before {
-    margin: 0 -3px;
+.icon-info {
+  margin: 0 -3px;
 }

 .icon-cog {
-    font-size: 15px;
+  font-size: 15px;
+  padding-left: 0 !important;
 }
--- a/src/sass/search.scss
+++ b/src/sass/search.scss
@@ -1,120 +1,118 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";

 .search-title {
-    font-weight: bold;
-    display: inline-block;
-    margin-top: 4px;
+  font-weight: bold;
+  display: inline-block;
+  margin-top: 4px;
 }

 .search-field {
+  display: flex;
+  flex-wrap: wrap;
+
+  button {
+    margin: 0 2px 0 0;
+    padding: 0px 1px 1px 4px;
+    height: 23px;
    display: flex;
-    flex-wrap: wrap;
+    align-items: center;
+  }

-    button {
-        margin: 0 2px 0 0;
-        height: 23px;
-        display: flex;
-        align-items: center;
-    }
+  .pref-input {
+    margin: 0 4px 0 0;
+    flex-grow: 1;
+    height: 23px;
+  }

-    .pref-input {
-        margin: 0 4px 0 0;
-        flex-grow: 1;
-        height: 23px;
-    }
+  input[type="text"],
+  input[type="number"] {
+    height: calc(100% - 4px);
+    width: calc(100% - 8px);
+  }

-    input[type="text"],
-    input[type="number"] {
-        height: calc(100% - 4px);
-        width: calc(100% - 8px);
-    }
+  > label {
+    display: inline;
+    background-color: var(--bg_elements);
+    color: var(--fg_color);
+    border: 1px solid var(--accent_border);
+    padding: 1px 1px 2px 4px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-bottom: 2px;

-    > label {
-        display: inline;
-        background-color: var(--bg_elements);
-        color: var(--fg_color);
-        border: 1px solid var(--accent_border);
-        padding: 1px 6px 2px 6px;
-        font-size: 14px;
-        cursor: pointer;
-        margin-bottom: 2px;
+    @include input-colors;
+  }

-        @include input-colors;
-    }
-
-    @include create-toggle(search-panel, 380px);
+  @include create-toggle(search-panel, 380px);
 }

 .search-panel {
-    width: 100%;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.4s;
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s;

-    flex-grow: 1;
-    font-weight: initial;
-    text-align: left;
+  flex-grow: 1;
+  font-weight: initial;
+  text-align: left;

-    > div {
-        line-height: 1.7em;
-    }
+  .checkbox-container {
+    display: inline;
+    padding-right: unset;
+    margin-bottom: 5px;
+    margin-left: 23px;
+  }

-    .checkbox-container {
-        display: inline;
-        padding-right: unset;
-        margin-bottom: unset;
-        margin-left: 23px;
-    }
+  .checkbox {
+    right: unset;
+    left: -22px;
+    line-height: 1.6em;
+  }

-    .checkbox {
-        right: unset;
-        left: -22px;
-    }
-
-    .checkbox-container .checkbox:after {
-        top: -4px;
-    }
+  .checkbox-container .checkbox:after {
+    top: -4px;
+  }
 }

 .search-row {
-    display: flex;
-    flex-wrap: wrap;
-    line-height: unset;
+  display: flex;
+  flex-wrap: wrap;
+  line-height: unset;

-    > div {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
+  > div {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  input {
+    height: 21px;
+  }
+
+  .pref-input {
+    display: block;
+    padding-bottom: 5px;

    input {
-        height: 21px;
-    }
-
-    .pref-input {
-        display: block;
-        padding-bottom: 5px;
-
-        input {
-            height: 21px;
-            margin-top: 1px;
-        }
+      height: 21px;
+      margin-top: 1px;
    }
+  }
 }

 .search-toggles {
-    flex-grow: 1;
-    display: grid;
-    grid-template-columns: repeat(5, auto);
-    grid-column-gap: 10px;
+  flex-grow: 1;
+  display: grid;
+  grid-template-columns: repeat(5, auto);
+  grid-column-gap: 10px;
 }

 .profile-tabs {
-    @include search-resize(820px, 5);
-    @include search-resize(715px, 4);
-    @include search-resize(700px, 5);
-    @include search-resize(485px, 4);
-    @include search-resize(410px, 3);
+  @include search-resize(820px, 5);
+  @include search-resize(715px, 4);
+  @include search-resize(700px, 5);
+  @include search-resize(485px, 4);
+  @include search-resize(410px, 3);
 }

@include search-resize(700px, 5);
--- a/src/sass/timeline.scss
+++ b/src/sass/timeline.scss
@@ -1,162 +1,162 @@
-@import '_variables';
+@import "_variables";

 .timeline-container {
-    @include panel(100%, 600px);
+  @include panel(100%, 600px);
 }

 .timeline {
-    background-color: var(--bg_panel);
+  background-color: var(--bg_panel);

-    > div:not(:first-child) {
-        border-top: 1px solid var(--border_grey);
-    }
+  > div:not(:first-child) {
+    border-top: 1px solid var(--border_grey);
+  }
 }

 .timeline-header {
-    width: 100%;
-    background-color: var(--bg_panel);
-    text-align: center;
-    padding: 8px;
-    display: block;
-    font-weight: bold;
-    margin-bottom: 5px;
-    box-sizing: border-box;
+  width: 100%;
+  background-color: var(--bg_panel);
+  text-align: center;
+  padding: 8px;
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+  box-sizing: border-box;

-    button {
-        float: unset;
-    }
+  button {
+    float: unset;
+  }
 }

 .timeline-banner img {
-    width: 100%;
+  width: 100%;
 }

 .timeline-description {
-    font-weight: normal;
+  font-weight: normal;
 }

 .tab {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: 0 0 5px 0;
-    background-color: var(--bg_panel);
-    padding: 0;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0 0 5px 0;
+  background-color: var(--bg_panel);
+  padding: 0;
 }

 .tab-item {
-    flex: 1 1 0;
-    text-align: center;
-    margin-top: 0;
+  flex: 1 1 0;
+  text-align: center;
+  margin-top: 0;

-    a {
-        border-bottom: .1rem solid transparent;
-        color: var(--tab);
-        display: block;
-        padding: 8px 0;
-        text-decoration: none;
-        font-weight: bold;
+  a {
+    border-bottom: 0.1rem solid transparent;
+    color: var(--tab);
+    display: block;
+    padding: 8px 0;
+    text-decoration: none;
+    font-weight: bold;

-        &:hover {
-            text-decoration: none;
-        }
-
-        &.active {
-            border-bottom-color: var(--tab_selected);
-            color: var(--tab_selected);
-        }
+    &:hover {
+      text-decoration: none;
    }

-    &.active a {
-        border-bottom-color: var(--tab_selected);
-        color: var(--tab_selected);
+    &.active {
+      border-bottom-color: var(--tab_selected);
+      color: var(--tab_selected);
    }
+  }

-    &.wide {
-        flex-grow: 1.2;
-        flex-basis: 50px;
-    }
+  &.active a {
+    border-bottom-color: var(--tab_selected);
+    color: var(--tab_selected);
+  }
+
+  &.wide {
+    flex-grow: 1.2;
+    flex-basis: 50px;
+  }
 }

 .timeline-footer {
-    background-color: var(--bg_panel);
-    padding: 6px 0;
+  background-color: var(--bg_panel);
+  padding: 6px 0;
 }

 .timeline-protected {
-    text-align: center;
+  text-align: center;

-    p {
-        margin: 8px 0;
-    }
+  p {
+    margin: 8px 0;
+  }

-    h2 {
-        color: var(--accent);
-        font-size: 20px;
-        font-weight: 600;
-    }
-}
-
-.timeline-none {
+  h2 {
    color: var(--accent);
    font-size: 20px;
    font-weight: 600;
-    text-align: center;
+  }
+}
+
+.timeline-none {
+  color: var(--accent);
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
 }

 .timeline-end {
-    background-color: var(--bg_panel);
-    color: var(--accent);
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
+  background-color: var(--bg_panel);
+  color: var(--accent);
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
 }

 .show-more {
-    background-color: var(--bg_panel);
-    text-align: center;
-    padding: .75em 0;
-    display: block !important;
+  background-color: var(--bg_panel);
+  text-align: center;
+  padding: 0.75em 0;
+  display: block !important;

-    a {
-        background-color: var(--darkest_grey);
-        display: inline-block;
-        height: 2em;
-        padding: 0 2em;
-        line-height: 2em;
+  a {
+    background-color: var(--darkest_grey);
+    display: inline-block;
+    height: 2em;
+    padding: 0 2em;
+    line-height: 2em;

-        &:hover {
-            background-color: var(--darker_grey);
-        }
+    &:hover {
+      background-color: var(--darker_grey);
    }
+  }
 }

 .top-ref {
-    background-color: var(--bg_color);
-    border-top: none !important;
+  background-color: var(--bg_color);
+  border-top: none !important;

-    .icon-down {
-        font-size: 20px;
-        display: flex;
-        justify-content: center;
-        text-decoration: none;
+  .icon-down {
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    text-decoration: none;

-        &:hover {
-            color: var(--accent_light);
-        }
-
-        &::before {
-            transform: rotate(180deg) translateY(-1px);
-        }
+    &:hover {
+      color: var(--accent_light);
    }
+
+    &::before {
+      transform: rotate(180deg) translateY(-1px);
+    }
+  }
 }

 .timeline-item {
-    overflow-wrap: break-word;
-    border-left-width: 0;
-    min-width: 0;
-    padding: .75em;
-    display: flex;
-    position: relative;
+  overflow-wrap: break-word;
+  border-left-width: 0;
+  min-width: 0;
+  padding: 0.75em;
+  display: flex;
+  position: relative;
 }
--- a/src/sass/tweet/_base.scss
+++ b/src/sass/tweet/_base.scss
@@ -1,240 +1,244 @@
-@import '_variables';
-@import '_mixins';
-@import 'thread';
-@import 'media';
-@import 'video';
-@import 'embed';
-@import 'card';
-@import 'poll';
-@import 'quote';
+@import "_variables";
+@import "_mixins";
+@import "thread";
+@import "media";
+@import "video";
+@import "embed";
+@import "card";
+@import "poll";
+@import "quote";

 .tweet-body {
-    flex: 1;
-    min-width: 0;
-    margin-left: 58px;
-    pointer-events: none;
-    z-index: 1;
+  flex: 1;
+  min-width: 0;
+  margin-left: 58px;
+  pointer-events: none;
+  z-index: 1;
 }

 .tweet-content {
-    font-family: $font_3;
-    line-height: 1.3em;
-    pointer-events: all;
-    display: inline;
+  line-height: 1.3em;
+  pointer-events: all;
+  display: inline;
 }

 .tweet-bidi {
-    display: block !important;
+  display: block !important;
 }

 .tweet-header {
-    padding: 0;
-    vertical-align: bottom;
-    flex-basis: 100%;
-    margin-bottom: .2em;
+  padding: 0;
+  vertical-align: bottom;
+  flex-basis: 100%;
+  margin-bottom: 0.2em;

-    a {
-        display: inline-block;
-        word-break: break-all;
-        max-width: 100%;
-        pointer-events: all;
-    }
+  a {
+    display: inline-block;
+    word-break: break-all;
+    max-width: 100%;
+    pointer-events: all;
+  }
 }

 .tweet-name-row {
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
 }

 .fullname-and-username {
-    display: flex;
-    min-width: 0;
+  display: flex;
+  min-width: 0;
 }

 .fullname {
-    @include ellipsis;
-    flex-shrink: 2;
-    max-width: 80%;
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--fg_color);
+  @include ellipsis;
+  flex-shrink: 2;
+  max-width: 80%;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--fg_color);
 }

 .username {
-    @include ellipsis;
-    min-width: 1.6em;
-    margin-left: .4em;
-    word-wrap: normal;
+  @include ellipsis;
+  min-width: 1.6em;
+  margin-left: 0.4em;
+  word-wrap: normal;
 }

 .tweet-date {
-    display: flex;
-    flex-shrink: 0;
-    margin-left: 4px;
+  display: flex;
+  flex-shrink: 0;
+  margin-left: 4px;
 }

-.tweet-date a, .username, .show-more a {
-    color: var(--fg_dark);
+.tweet-date a,
+.username,
+.show-more a {
+  color: var(--fg_dark);
 }

 .tweet-published {
-    margin: 0;
-    margin-top: 5px;
-    color: var(--grey);
-    pointer-events: all;
+  margin: 0;
+  margin-top: 5px;
+  color: var(--grey);
+  pointer-events: all;
 }

 .tweet-avatar {
-    display: contents !important;
+  display: contents !important;

-    img {
-        float: left;
-        margin-top: 3px;
-        margin-left: -58px;
-        width: 48px;
-        height: 48px;
-    }
+  img {
+    float: left;
+    margin-top: 3px;
+    margin-left: -58px;
+    width: 48px;
+    height: 48px;
+  }
 }

 .avatar {
-    &.round {
-        border-radius: 50%;
-        -webkit-user-select: none;
-    }
-    
-    &.mini {
-        position: unset;
-        margin-right: 5px;
-        margin-top: -1px;
-        width: 20px;
-        height: 20px;
-    }
+  &.round {
+    border-radius: 50%;
+    -webkit-user-select: none;
+  }
+
+  &.mini {
+    position: unset;
+    margin-right: 5px;
+    margin-top: -1px;
+    width: 20px;
+    height: 20px;
+  }
 }

 .tweet-embed {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  background-color: var(--bg_panel);
+
+  .tweet-content {
+    font-size: 18px;
+  }
+
+  .tweet-body {
    display: flex;
    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    background-color: var(--bg_panel);
+    max-height: calc(100vh - 0.75em * 2);
+  }

-    .tweet-content { 
-        font-size: 18px;
-    }
-    
-    .tweet-body {
-        display: flex;
-        flex-direction: column;
-        max-height: calc(100vh - 0.75em * 2);
-    }
+  .card-image img {
+    height: auto;
+  }

-    .card-image img {
-        height: auto;
-    }
-    
-    .avatar {
-        position: absolute;
-    }
+  .avatar {
+    position: absolute;
+  }
 }

 .attribution {
-    display: flex;
-    pointer-events: all;
-    margin: 5px 0;
+  display: flex;
+  pointer-events: all;
+  margin: 5px 0;

-    strong {
-        color: var(--fg_color);
-    }
+  strong {
+    color: var(--fg_color);
+  }
 }

 .media-tag-block {
-    padding-top: 5px;
-    pointer-events: all;
+  padding-top: 5px;
+  pointer-events: all;
+  color: var(--fg_faded);
+
+  .icon-container {
+    padding-right: 2px;
+  }
+
+  .media-tag,
+  .icon-container {
    color: var(--fg_faded);
-
-    .icon-container {
-        padding-right: 2px;
-    }
-
-    .media-tag, .icon-container {
-        color: var(--fg_faded);
-    }
+  }
 }

 .timeline-container .media-tag-block {
-    font-size: 13px;
+  font-size: 13px;
 }

 .tweet-geo {
-    color: var(--fg_faded);
+  color: var(--fg_faded);
 }

 .replying-to {
-    color: var(--fg_faded);
-    margin: -2px 0 4px;
+  color: var(--fg_faded);
+  margin: -2px 0 4px;

-    a {
-        pointer-events: all;
-    }
+  a {
+    pointer-events: all;
+  }
 }

-.retweet-header, .pinned, .tweet-stats {
-    align-content: center;
-    color: var(--grey);
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 22px;
+.retweet-header,
+.pinned,
+.tweet-stats {
+  align-content: center;
+  color: var(--grey);
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;

-    span {
-        @include ellipsis;
-    }
+  span {
+    @include ellipsis;
+  }
 }

 .retweet-header {
-    margin-top: -5px !important;
+  margin-top: -5px !important;
 }

 .tweet-stats {
-    margin-bottom: -3px;
-    -webkit-user-select: none;
+  margin-bottom: -3px;
+  -webkit-user-select: none;
 }

 .tweet-stat {
-    padding-top: 5px;
-    min-width: 1em;
-    margin-right: 0.8em;
+  padding-top: 5px;
+  min-width: 1em;
+  margin-right: 0.8em;
 }

 .show-thread {
-    display: block;
-    pointer-events: all;
-    padding-top: 2px;
+  display: block;
+  pointer-events: all;
+  padding-top: 2px;
 }

 .unavailable-box {
-    width: 100%;
-    height: 100%;
-    padding: 12px;
-    border: solid 1px var(--dark_grey);
-    box-sizing: border-box;
-    border-radius: 10px;
-    background-color: var(--bg_color);
-    z-index: 2;
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+  border: solid 1px var(--dark_grey);
+  box-sizing: border-box;
+  border-radius: 10px;
+  background-color: var(--bg_color);
+  z-index: 2;
 }

 .tweet-link {
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    position: absolute;
-    -webkit-user-select: none;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+  -webkit-user-select: none;

-    &:hover {
-        background-color: var(--bg_hover);
-    }
+  &:hover {
+    background-color: var(--bg_hover);
+  }
 }
--- a/src/sass/tweet/embed.scss
+++ b/src/sass/tweet/embed.scss
@@ -1,17 +1,17 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";

 .embed-video {
-    .gallery-video {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background-color: black;
-        top: 0%;
-        left: 0%;
-    }
+  .gallery-video {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: black;
+    top: 0%;
+    left: 0%;
+  }

-    .video-container {
-        max-height: unset;
-    }
+  .video-container {
+    max-height: unset;
+  }
 }
--- a/src/sass/tweet/media.scss
+++ b/src/sass/tweet/media.scss
@@ -1,76 +1,76 @@
-@import '_variables';
+@import "_variables";

 .gallery-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    overflow: hidden;
-    flex-grow: 1;
-    max-height: 379.5px;
-    max-width: 533px;
-    pointer-events: all;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  overflow: hidden;
+  flex-grow: 1;
+  max-height: 379.5px;
+  max-width: 533px;
+  pointer-events: all;

-    .still-image {
-        width: 100%;
-        display: flex;
-    }
+  .still-image {
+    width: 100%;
+    display: flex;
+  }
 }

 .attachments {
-    margin-top: .35em;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    max-height: 600px;
-    border-radius: 7px;
-    overflow: hidden;
-    flex-flow: column;
-    background-color: var(--bg_color);
-    align-items: center;
-    pointer-events: all;
+  margin-top: 0.35em;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-height: 600px;
+  border-radius: 7px;
+  overflow: hidden;
+  flex-flow: column;
+  background-color: var(--bg_color);
+  align-items: center;
+  pointer-events: all;

-    .image-attachment {
-        width: 100%;
-    }
+  .image-attachment {
+    width: 100%;
+  }
 }

 .attachment {
-    position: relative;
-    line-height: 0;
-    overflow: hidden;
-    margin: 0 .25em 0 0;
-    flex-grow: 1;
-    box-sizing: border-box;
-    min-width: 2em;
+  position: relative;
+  line-height: 0;
+  overflow: hidden;
+  margin: 0 0.25em 0 0;
+  flex-grow: 1;
+  box-sizing: border-box;
+  min-width: 2em;

-    &:last-child {
-        margin: 0;
-        max-height: 530px;
-    }
+  &:last-child {
+    margin: 0;
+    max-height: 530px;
+  }
 }

 .gallery-gif video {
-    max-height: 530px;
-    background-color: #101010;
+  max-height: 530px;
+  background-color: #101010;
 }

 .still-image {
-    max-height: 379.5px;
-    max-width: 533px;
-    justify-content: center;
+  max-height: 379.5px;
+  max-width: 533px;
+  justify-content: center;

-    img {
-        object-fit: cover;
-        max-width: 100%;
-        max-height: 379.5px;
-        flex-basis: 300px;
-        flex-grow: 1;
-    }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 379.5px;
+    flex-basis: 300px;
+    flex-grow: 1;
+  }
 }

 .image {
-    display: inline-block;
+  display: inline-block;
 }

 // .single-image {
@@ -86,34 +86,34 @@
 // }

 .overlay-circle {
-    border-radius: 50%;
-    background-color: var(--dark_grey);
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    display: flex;
-    border-width: 5px;
-    border-color: var(--play_button);
-    border-style: solid;
+  border-radius: 50%;
+  background-color: var(--dark_grey);
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  display: flex;
+  border-width: 5px;
+  border-color: var(--play_button);
+  border-style: solid;
 }

 .overlay-triangle {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 12px 0 12px 17px;
-    border-color: transparent transparent transparent var(--play_button);
-    margin-left: 14px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 12px 0 12px 17px;
+  border-color: transparent transparent transparent var(--play_button);
+  margin-left: 14px;
 }

 .media-gif {
-    display: table;
-    background-color: unset;
-    width: unset;
+  display: table;
+  background-color: unset;
+  width: unset;
 }

 .media-body {
-    flex: 1;
-    padding: 0;
-    white-space: pre-wrap;
+  flex: 1;
+  padding: 0;
+  white-space: pre-wrap;
 }
--- a/src/sass/tweet/poll.scss
+++ b/src/sass/tweet/poll.scss
@@ -1,42 +1,42 @@
-@import '_variables';
+@import "_variables";

 .poll-meter {
-    overflow: hidden;
-    position: relative;
-    margin: 6px 0;
-    height: 26px;
-    background: var(--bg_color);
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
+  overflow: hidden;
+  position: relative;
+  margin: 6px 0;
+  height: 26px;
+  background: var(--bg_color);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
 }

 .poll-choice-bar {
-    height: 100%;
-    position: absolute;
-    background: var(--dark_grey);
+  height: 100%;
+  position: absolute;
+  background: var(--dark_grey);
 }

 .poll-choice-value {
-    position: relative;
-    font-weight: bold;
-    margin-left: 5px;
-    margin-right: 6px;
-    min-width: 30px;
-    text-align: right;
-    pointer-events: all;
+  position: relative;
+  font-weight: bold;
+  margin-left: 5px;
+  margin-right: 6px;
+  min-width: 30px;
+  text-align: right;
+  pointer-events: all;
 }

 .poll-choice-option {
-    position: relative;
-    pointer-events: all;
+  position: relative;
+  pointer-events: all;
 }

 .poll-info {
-    color: var(--grey);
-    pointer-events: all;
+  color: var(--grey);
+  pointer-events: all;
 }

 .leader .poll-choice-bar {
-    background: var(--accent_dark);
+  background: var(--accent_dark);
 }
--- a/src/sass/tweet/quote.scss
+++ b/src/sass/tweet/quote.scss
@@ -1,94 +1,95 @@
-@import '_variables';
+@import "_variables";

 .quote {
-    margin-top: 10px;
-    border: solid 1px var(--dark_grey);
-    border-radius: 10px;
-    background-color: var(--bg_elements);
+  margin-top: 10px;
+  border: solid 1px var(--dark_grey);
+  border-radius: 10px;
+  background-color: var(--bg_elements);
+  overflow: hidden;
+  pointer-events: all;
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    border-color: var(--grey);
+  }
+
+  &.unavailable:hover {
+    border-color: var(--dark_grey);
+  }
+
+  .tweet-name-row {
+    padding: 6px 8px;
+    margin-top: 1px;
+  }
+
+  .quote-text {
    overflow: hidden;
-    pointer-events: all;
-    position: relative;
-    width: 100%;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 0px 8px 8px 8px;
+  }

-    &:hover {
-        border-color: var(--grey);
-    }
+  .show-thread {
+    padding: 0px 8px 6px 8px;
+    margin-top: -6px;
+  }

-    &.unavailable:hover {
-        border-color: var(--dark_grey);
-    }
-
-    .tweet-name-row {
-        padding: 6px 8px;
-        margin-top: 1px;
-    }
-
-    .quote-text {
-        overflow: hidden;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        padding: 0px 8px 8px 8px;
-    }
-
-    .show-thread {
-        padding: 0px 8px 6px 8px;
-        margin-top: -6px;
-    }
-
-    .replying-to {
-        padding: 0px 8px;
-        margin: unset;
-    }
+  .replying-to {
+    padding: 0px 8px;
+    margin: unset;
+  }
 }

 .unavailable-quote {
-    padding: 12px;
+  padding: 12px;
 }

 .quote-link {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
 }

 .quote-media-container {
-    max-height: 300px;
+  max-height: 300px;
+  display: flex;
+
+  .card {
+    margin: unset;
+  }
+
+  .attachments {
+    border-radius: 0;
+  }
+
+  .media-gif {
+    width: 100%;
    display: flex;
+    justify-content: center;
+  }

-    .card {
-        margin: unset;
+  .gallery-gif .attachment {
+    display: flex;
+    justify-content: center;
+    background-color: var(--bg_color);
+
+    video {
+      height: unset;
+      width: unset;
+      max-height: 100%;
+      max-width: 100%;
    }
+  }

-    .attachments {
-        border-radius: 0;
-    }
+  .gallery-video,
+  .gallery-gif {
+    max-height: 300px;
+  }

-    .media-gif {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-    }
-
-    .gallery-gif .attachment {
-        display: flex;
-        justify-content: center;
-        background-color: var(--bg_color);
-
-        video {
-            height: unset;
-            width: unset;
-            max-height: 100%;
-            max-width: 100%;
-        }
-    }
-
-    .gallery-video, .gallery-gif {
-        max-height: 300px;
-    }
-
-    .still-image img {
-        max-height: 250px
-    }
+  .still-image img {
+    max-height: 250px;
+  }
 }
--- a/src/sass/tweet/thread.scss
+++ b/src/sass/tweet/thread.scss
@@ -1,138 +1,139 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";

 .conversation {
-    @include panel(100%, 600px);
+  @include panel(100%, 600px);

-    .show-more {
-        margin-bottom: 10px;
-    }
+  .show-more {
+    margin-bottom: 10px;
+  }
 }

 .main-thread {
-    margin-bottom: 20px;
-    background-color: var(--bg_panel);
+  margin-bottom: 20px;
+  background-color: var(--bg_panel);
 }

-.main-tweet, .replies {
-    padding-top: 50px;
-    margin-top: -50px;
+.main-tweet,
+.replies {
+  padding-top: 50px;
+  margin-top: -50px;
 }

 .main-tweet .tweet-content {
-    font-size: 18px;
+  font-size: 18px;
 }

-@media(max-width: 600px) {
-    .main-tweet .tweet-content {
-        font-size: 16px;
-    }
+@media (max-width: 600px) {
+  .main-tweet .tweet-content {
+    font-size: 16px;
+  }
 }

 .reply {
-    background-color: var(--bg_panel);
-    margin-bottom: 10px;
+  background-color: var(--bg_panel);
+  margin-bottom: 10px;
 }

 .thread-line {
-    .timeline-item::before,
-    &.timeline-item::before {
-        background: var(--accent_dark);
-        content: '';
-        position: relative;
-        min-width: 3px;
-        width: 3px;
-        left: 26px;
-        border-radius: 2px;
-        margin-left: -3px;
-        margin-bottom: 37px;
-        top: 56px;
-        z-index: 1;
-        pointer-events: none;
-    }
+  .timeline-item::before,
+  &.timeline-item::before {
+    background: var(--accent_dark);
+    content: "";
+    position: relative;
+    min-width: 3px;
+    width: 3px;
+    left: 26px;
+    border-radius: 2px;
+    margin-left: -3px;
+    margin-bottom: 37px;
+    top: 56px;
+    z-index: 1;
+    pointer-events: none;
+  }

-    .with-header:not(:first-child)::after {
-        background: var(--accent_dark);
-        content: '';
-        position: relative;
-        float: left;
-        min-width: 3px;
-        width: 3px;
-        right: calc(100% - 26px);
-        border-radius: 2px;
-        margin-left: -3px;
-        margin-bottom: 37px;
-        bottom: 10px;
-        height: 30px;
-        z-index: 1;
-        pointer-events: none;
-    }
+  .with-header:not(:first-child)::after {
+    background: var(--accent_dark);
+    content: "";
+    position: relative;
+    float: left;
+    min-width: 3px;
+    width: 3px;
+    right: calc(100% - 26px);
+    border-radius: 2px;
+    margin-left: -3px;
+    margin-bottom: 37px;
+    bottom: 10px;
+    height: 30px;
+    z-index: 1;
+    pointer-events: none;
+  }

-    .unavailable::before {
-        top: 48px;
-        margin-bottom: 28px;
-    }
+  .unavailable::before {
+    top: 48px;
+    margin-bottom: 28px;
+  }

-    .more-replies::before {
-        content: '...';
-        background: unset;
-        color: var(--more_replies_dots);
-        font-weight: bold;
-        font-size: 20px;
-        line-height: 0.25em;
-        left: 1.2em;
-        width: 5px;
-        top: 2px;
-        margin-bottom: 0;
-        margin-left: -2.5px;
-    }
+  .more-replies::before {
+    content: "...";
+    background: unset;
+    color: var(--more_replies_dots);
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 0.25em;
+    left: 1.2em;
+    width: 5px;
+    top: 2px;
+    margin-bottom: 0;
+    margin-left: -2.5px;
+  }

-    .earlier-replies {
-        padding-bottom: 0;
-        margin-bottom: -5px;
-    }
+  .earlier-replies {
+    padding-bottom: 0;
+    margin-bottom: -5px;
+  }
 }

 .timeline-item.thread-last::before {
-    background: unset;
-    min-width: unset;
-    width: 0;
-    margin: 0;
+  background: unset;
+  min-width: unset;
+  width: 0;
+  margin: 0;
 }

 .more-replies {
-    padding-top: 0.3em !important;
+  padding-top: 0.3em !important;
 }

 .more-replies-text {
-    @include ellipsis;
-    display: block;
-    margin-left: 58px;
-    padding: 7px 0;
+  @include ellipsis;
+  display: block;
+  margin-left: 58px;
+  padding: 7px 0;
 }

 .timeline-item.thread.more-replies-thread {
-    padding: 0 0.75em;
+  padding: 0 0.75em;
+
+  &::before {
+    top: 40px;
+    margin-bottom: 31px;
+  }
+
+  .more-replies {
+    display: flex;
+    padding-top: unset !important;
+    margin-top: 8px;

    &::before {
-        top: 40px;
-        margin-bottom: 31px;
+      display: inline-block;
+      position: relative;
+      top: -1px;
+      line-height: 0.4em;
    }

-    .more-replies {
-        display: flex;
-        padding-top: unset !important;
-        margin-top: 8px;
-
-        &::before {
-            display: inline-block;
-            position: relative;
-            top: -1px;
-            line-height: 0.4em;
-        }
-
-        .more-replies-text {
-            display: inline;
-        }
+    .more-replies-text {
+      display: inline;
    }
+  }
 }
--- a/src/sass/tweet/video.scss
+++ b/src/sass/tweet/video.scss
@@ -1,68 +1,77 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";

 video {
-    max-height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
 }

 .gallery-video {
-    display: flex;
-    overflow: hidden;
+  display: flex;
+  overflow: hidden;
 }

 .gallery-video.card-container {
-    flex-direction: column;
+  flex-direction: column;
+  width: 100%;
 }

 .video-container {
-    min-height: 80px;
-    min-width: 200px;
-    max-height: 530px;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  min-height: 80px;
+  min-width: 200px;
+  max-height: 530px;
+  margin: 0;

-    img {
-        max-height: 100%;
-        max-width: 100%;
-    }
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
 }

 .video-overlay {
-    @include play-button;
-    background-color: $shadow;
+  @include play-button;
+  background-color: $shadow;

-    p {
-        position: relative;
-        z-index: 0;
-        text-align: center;
-        top: calc(50% - 20px);
-        font-size: 20px;
-        line-height: 1.3;
-        margin: 0 20px;
-    }
+  p {
+    position: relative;
+    z-index: 0;
+    text-align: center;
+    top: calc(50% - 20px);
+    font-size: 20px;
+    line-height: 1.3;
+    margin: 0 20px;
+  }

-    div {
-        position: relative;
-        z-index: 0;
-        top: calc(50% - 20px);
-        margin: 0 auto;
-        width: 40px;
-        height: 40px;
-    }
+  .overlay-circle {
+    position: relative;
+    z-index: 0;
+    top: calc(50% - 20px);
+    margin: 0 auto;
+    width: 40px;
+    height: 40px;
+  }

-    form {
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-    }
+  .overlay-duration {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    background-color: #0000007a;
+    line-height: 1em;
+    padding: 4px 6px 4px 6px;
+    border-radius: 5px;
+    font-weight: bold;
+  }

-    button {
-        padding: 5px 8px;
-        font-size: 16px;
-    }
+  form {
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+
+  button {
+    padding: 5px 8px;
+    font-size: 16px;
+  }
 }
--- a/src/tid.nim
+++ b/src/tid.nim
@@ -0,0 +1,62 @@
+import std/[asyncdispatch, base64, httpclient, random, strutils, sequtils, times]
+import nimcrypto
+import experimental/parser/tid
+
+randomize()
+
+const defaultKeyword = "obfiowerehiring";
+const pairsUrl =
+  "https://raw.githubusercontent.com/fa0311/x-client-transaction-id-pair-dict/refs/heads/main/pair.json";
+
+var
+  cachedPairs: seq[TidPair] = @[]
+  lastCached = 0
+  # refresh every hour
+  ttlSec = 60 * 60
+
+proc getPair(): Future[TidPair] {.async.} =
+  if cachedPairs.len == 0 or int(epochTime()) - lastCached > ttlSec:
+    lastCached = int(epochTime())
+
+    let client = newAsyncHttpClient()
+    defer: client.close()
+
+    let resp = await client.get(pairsUrl)
+    if resp.status == $Http200:
+      cachedPairs = parseTidPairs(await resp.body)
+
+  return sample(cachedPairs)
+
+proc encodeSha256(text: string): array[32, byte] =
+  let
+    data = cast[ptr byte](addr text[0])
+    dataLen = uint(len(text))
+    digest = sha256.digest(data, dataLen)
+  return digest.data
+
+proc encodeBase64[T](data: T): string =
+  return encode(data).replace("=", "")
+
+proc decodeBase64(data: string): seq[byte] =
+  return cast[seq[byte]](decode(data))
+
+proc genTid*(path: string): Future[string] {.async.} =
+  let 
+    pair = await getPair()
+
+    timeNow = int(epochTime() - 1682924400)
+    timeNowBytes = @[
+      byte(timeNow and 0xff),
+      byte((timeNow shr 8) and 0xff),
+      byte((timeNow shr 16) and 0xff),
+      byte((timeNow shr 24) and 0xff)
+    ]
+
+    data = "GET!" & path & "!" & $timeNow & defaultKeyword & pair.animationKey
+    hashBytes = encodeSha256(data)
+    keyBytes = decodeBase64(pair.verification)
+    bytesArr = keyBytes & timeNowBytes & hashBytes[0 ..< 16] & @[3'u8]
+    randomNum = byte(rand(256))
+    tid = @[randomNum] & bytesArr.mapIt(it xor randomNum)
+
+  return encodeBase64(tid)
--- a/src/types.nim
+++ b/src/types.nim
@@ -1,5 +1,5 @@
 # SPDX-License-Identifier: AGPL-3.0-only
-import times, sequtils, options, tables, uri
+import times, sequtils, options, tables
 import prefs_impl

 genPrefsType()
@@ -13,19 +13,13 @@ type
  TimelineKind* {.pure.} = enum
    tweets, replies, media

-  Api* {.pure.} = enum
-    tweetDetail
-    tweetResult
-    search
-    list
-    listBySlug
-    listMembers
-    listTweets
-    userRestId
-    userScreenName
-    userTweets
-    userTweetsAndReplies
-    userMedia
+  ApiUrl* = object
+    endpoint*: string
+    params*: seq[(string, string)]
+
+  ApiReq* = object
+    oauth*: ApiUrl
+    cookie*: ApiUrl

  RateLimit* = object
    limit*: int
@@ -42,7 +36,7 @@ type
    pending*: int
    limited*: bool
    limitedAt*: int
-    apis*: Table[Api, RateLimit]
+    apis*: Table[string, RateLimit]
    case kind*: SessionKind
    of oauth:
      oauthToken*: string
@@ -51,10 +45,6 @@ type
      authToken*: string
      ct0*: string

-  SessionAwareUrl* = object
-    oauthUrl*: Uri
-    cookieUrl*: Uri
-
  Error* = enum
    null = 0
    noUserMatches = 17
@@ -285,6 +275,7 @@ type
    enableDebug*: bool
    proxy*: string
    proxyAuth*: string
+    disableTid*: bool

    rssCacheTime*: int
    listCacheTime*: int
--- a/src/views/general.nim
+++ b/src/views/general.nim
@@ -52,8 +52,8 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
  let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"

  buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=21")
-    link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=3")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=22")
+    link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=4")

    if theme.len > 0:
      link(rel="stylesheet", type="text/css", href=(&"/css/themes/{theme}.css"))
--- a/src/views/renderutils.nim
+++ b/src/views/renderutils.nim
@@ -26,7 +26,9 @@ proc icon*(icon: string; text=""; title=""; class=""; href=""): VNode =
 template verifiedIcon*(user: User): untyped {.dirty.} =
  if user.verifiedType != VerifiedType.none:
    let lower = ($user.verifiedType).toLowerAscii()
-    icon "ok", class=(&"verified-icon {lower}"), title=(&"Verified {lower} account")
+    buildHtml(tdiv(class=(&"verified-icon {lower}"))):
+      icon "circle", class="verified-icon-circle", title=(&"Verified {lower} account")
+      icon "ok", class="verified-icon-check", title=(&"Verified {lower} account")
  else:
    text ""

--- a/src/views/rss.nimf
+++ b/src/views/rss.nimf
@@ -2,6 +2,9 @@
 ## SPDX-License-Identifier: AGPL-3.0-only
 #import strutils, xmltree, strformat, options, unicode
 #import ../types, ../utils, ../formatters, ../prefs
+## Snowflake ID cutoff for RSS GUID format transition
+## Corresponds to approximately December 14, 2025 UTC
+#const guidCutoff = 2000000000000000000'i64
 #
 #proc getTitle(tweet: Tweet; retweet: string): string =
 #if tweet.pinned: result = "Pinned: "
@@ -101,12 +104,17 @@ ${renderRssTweet(quoteTweet, cfg)}
 #    if link in links: continue
 #    end if
 #    links.add link
+#    let useGlobalGuid = tweet.id >= guidCutoff
      <item>
        <title>${getTitle(tweet, retweet)}</title>
        <dc:creator>@${tweet.user.username}</dc:creator>
        <description><![CDATA[${renderRssTweet(tweet, cfg).strip(chars={'\n'})}]]></description>
        <pubDate>${getRfc822Time(tweet)}</pubDate>
+#if useGlobalGuid:
+        <guid isPermaLink="false">${tweet.id}</guid>
+#else:
        <guid>${urlPrefix & link}</guid>
+#end if
        <link>${urlPrefix & link}</link>
      </item>
 #  end for
--- a/src/views/status.nim
+++ b/src/views/status.nim
@@ -28,14 +28,19 @@ proc renderReplyThread(thread: Chain; prefs: Prefs; path: string): VNode =
    if thread.hasMore:
      renderMoreReplies(thread)

-proc renderReplies*(replies: Result[Chain]; prefs: Prefs; path: string): VNode =
+proc renderReplies*(replies: Result[Chain]; prefs: Prefs; path: string; tweet: Tweet = nil): VNode =
  buildHtml(tdiv(class="replies", id="r")):
+    var hasReplies = false
+    var replyCount = 0
    for thread in replies.content:
      if thread.content.len == 0: continue
+      hasReplies = true
+      replyCount += thread.content.len
      renderReplyThread(thread, prefs, path)

-    if replies.bottom.len > 0:
-      renderMore(Query(), replies.bottom, focus="#r")
+    if hasReplies and replies.bottom.len > 0:
+      if tweet == nil or not replies.beginning or replyCount < tweet.stats.replies:
+        renderMore(Query(), replies.bottom, focus="#r")

 proc renderConversation*(conv: Conversation; prefs: Prefs; path: string): VNode =
  let hasAfter = conv.after.content.len > 0
@@ -70,6 +75,6 @@ proc renderConversation*(conv: Conversation; prefs: Prefs; path: string): VNode
      if not conv.replies.beginning:
        renderNewer(Query(), getLink(conv.tweet), focus="#r")
      if conv.replies.content.len > 0 or conv.replies.bottom.len > 0:
-        renderReplies(conv.replies, prefs, path)
+        renderReplies(conv.replies, prefs, path, conv.tweet)

    renderToTop(focus="#m")
--- a/src/views/tweet.nim
+++ b/src/views/tweet.nim
@@ -109,6 +109,7 @@ proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
            video(poster=thumb, data-url=source, data-autoload="false", muted=prefs.muteVideos)
            verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
            tdiv(class="overlay-circle"): span(class="overlay-triangle")
+            tdiv(class="overlay-duration"): text getDuration(video)
            verbatim "</div>"
      if container.len > 0:
        tdiv(class="card-content"):
--- a/tests/test_card.py
+++ b/tests/test_card.py
@@ -11,12 +11,7 @@ card = [
    ['voidtarget/status/1094632512926605312',
     'Basic OBS Studio plugin, written in nim, supporting C++ (C fine too)',
     'Basic OBS Studio plugin, written in nim, supporting C++ (C fine too) - obsplugin.nim',
-     'gist.github.com', True],
-
-    ['nim_lang/status/1082989146040340480',
-     'Nim in 2018: A short recap',
-     'There were several big news in the Nim world in 2018 – two new major releases, partnership with Status, and much more. But let us go chronologically.',
-     'nim-lang.org', True]
+     'gist.github.com', True]
 ]

 no_thumb = [
--- a/tests/test_profile.py
+++ b/tests/test_profile.py
@@ -15,7 +15,19 @@ protected = [
    ['Poop', 'Randy', 'Social media fanatic.']
 ]

-invalid = [['thisprofiledoesntexist'], ['%']]
+invalid = [['thisprofiledoesntexist']]
+
+malformed = [
+    ['${userId}'],
+    ['$%7BuserId%7D'],  # URL encoded version
+    ['%'],  # Percent sign is invalid
+    ['user@name'],
+    ['user.name'],
+    ['user-name'],
+    ['user$name'],
+    ['user{name}'],
+    ['user name'],  # space
+]

 banner_image = [
    ['mobile_test', 'profile_banners%2F82135242%2F1384108037%2F1500x500']
@@ -65,6 +77,13 @@ class ProfileTest(BaseTestCase):
        self.open_nitter(username)
        self.assert_text(f'User "{username}" not found')

+    @parameterized.expand(malformed)
+    def test_malformed_username(self, username):
+        """Test that malformed usernames (with invalid characters) return 404"""
+        self.open_nitter(username)
+        # Malformed usernames should return 404 page not found, not try to fetch from Twitter
+        self.assert_text('Page not found')
+
    def test_suspended(self):
        self.open_nitter('suspendme')
        self.assert_text('User "suspendme" has been suspended')
--- a/tools/create_session_browser.py
+++ b/tools/create_session_browser.py
@@ -94,7 +94,7 @@ async def login_and_get_cookies(username, password, totp_seed=None, headless=Fal

 async def main():
    if len(sys.argv) < 3:
-        print('Usage: python3 twitter-auth.py username password [totp_seed] [--append sessions.jsonl] [--headless]')
+        print('Usage: python3 create_session_browser.py username password [totp_seed] [--append file.jsonl] [--headless]')
        sys.exit(1)

    username = sys.argv[1]
Author	SHA1	Message	Date
Zed	17fc2628f9	Minor fix	2025-11-30 18:07:27 +01:00
Zed	e741385828	Allow , in username to support multiple users Fixes #1329	2025-11-30 18:06:22 +01:00
Zed	693a189462	Add heuristics to detect when to show "Load more" Fixes #1328	2025-11-30 05:43:17 +01:00
Zed	7734d976f7	Add username validation Fixes #1317	2025-11-30 04:12:38 +01:00
Zed	a62ec9cbb4	Normalize headers	2025-11-30 03:58:43 +01:00
Zed	4b9aec6fde	Use graphTweet for cookie sessions for now	2025-11-30 02:57:34 +01:00
Zed	064ec88080	Transition to ID-only RSS GUIDs on Dec 14, 2025 Fixes #447	2025-11-30 02:56:19 +01:00
Zed	71e65c84d7	Round video duration properly	2025-11-29 04:34:04 +01:00
Zed	436a873e4b	Improve verified checkmark icon, css improvements	2025-11-29 04:33:49 +01:00
Zed	96ec75fc7f	Add video duration to overlay Fixes #498	2025-11-29 03:38:40 +01:00
Zed	7a08a9e132	Format css	2025-11-29 03:36:21 +01:00
Zed	31d210ca47	Add experimental x-client-transaction-id support (#1324 ) * Add experimental x-client-transaction-id support * Remove broken test	2025-11-29 01:13:08 +01:00
Zed	dae68b4f13	Ignore null errors, they're internal API errors	2025-11-29 01:05:57 +01:00
Zed	8516ebe2b7	Fix 'key not found in object: expanded_url' error Fixes #1318	2025-11-29 00:37:45 +01:00