Add time range to search panel

src/query.nim

@@ -15,7 +15,7 @@ const
 # Experimental, this might break in the future
 # Till then, it results in shorter urls
 const
-  posPrefix = "thGAVUV0VFVBa"
+  posPrefix = "thGAVUV0VFVB"
   posSuffix = "EjUAFQAlAFUAFQAA"
 
 template `@`(param: string): untyped =
@@ -28,6 +28,8 @@ proc initQuery*(pms: Table[string, string]; name=""): Query =
     text: @"text",
     filters: validFilters.filterIt("f-" & it in pms),
     excludes: validFilters.filterIt("e-" & it in pms),
+    since: @"since",
+    until: @"until"
   )
 
   if name.len > 0:
@@ -71,6 +73,10 @@ proc genQueryParam*(query: Query): string =
     filters.add "-filter:" & e
 
   result = strip(param & filters.join(&" {query.sep} "))
+  if query.since.len > 0:
+    result &= " since:" & query.since
+  if query.until.len > 0:
+    result &= " until:" & query.until
   if query.text.len > 0:
     result &= " " & query.text
 
@@ -96,6 +102,11 @@ proc genQueryUrl*(query: Query): string =
   for i in query.excludes:
     params.add "i-" & i & "=on"
 
+  if query.since.len > 0:
+    params.add "since=" & query.since
+  if query.until.len > 0:
+    params.add "until=" & query.until
+
   if params.len > 0:
     result &= params.join("&")
 
@@ -103,4 +114,6 @@ proc cleanPos*(pos: string): string =
   pos.multiReplace((posPrefix, ""), (posSuffix, ""))
 
 proc genPos*(pos: string): string =
-  posPrefix & pos & posSuffix
+  result = posPrefix & pos
+  if "A==" notin result:
+    result &= posSuffix

src/sass/inputs.scss

@@ -12,7 +12,8 @@ button {
     float: right;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="date"] {
     @include input-colors;
     background-color: $bg_elements;
     padding: 1px 4px;
@@ -22,6 +23,38 @@ input[type="text"] {
     font-size: 14px;
 }
 
+input[type="date"]::-webkit-inner-spin-button {
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+}
+
+input::-webkit-calendar-picker-indicator {
+    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: $accent;
+    color: $fg_color;
+    outline: none;
+}
+
+.date-range {
+    display: block;
+
+    .icon-container {
+        margin-left: -22px;
+        margin-right: 4px;
+        pointer-events: none;
+    }
+
+    .search-title {
+        margin: 0 2px;
+    }
+}
+
 .icon-button button {
     color: $accent;
     text-decoration: none;

src/sass/search.scss

@@ -40,7 +40,7 @@
         @include input-colors;
     }
 
-    @include create-toggle(search-panel, 140px);
+    @include create-toggle(search-panel, 190px);
 }
 
 .search-panel {
@@ -82,14 +82,14 @@
 }
 
 .profile-tabs {
-    @include search-resize(785px, 5, 185px);
+    @include search-resize(785px, 5, 240px);
-    @include search-resize(725px, 4, 185px);
+    @include search-resize(725px, 4, 240px);
-    @include search-resize(600px, 6, 140px);
+    @include search-resize(600px, 6, 190px);
-    @include search-resize(530px, 5, 185px);
+    @include search-resize(530px, 5, 240px);
-    @include search-resize(475px, 4, 185px);
+    @include search-resize(480px, 4, 240px);
-    @include search-resize(406px, 3, 250px);
+    @include search-resize(410px, 3, 305px);
 }
 
-@include search-resize(530px, 5, 185px);
+@include search-resize(530px, 5, 240px);
-@include search-resize(475px, 4, 185px);
+@include search-resize(480px, 4, 240px);
-@include search-resize(406px, 3, 250px);
+@include search-resize(410px, 3, 305px);

src/types.nim

@@ -66,6 +66,8 @@ type
     includes*: seq[string]
     excludes*: seq[string]
     fromUser*: seq[string]
+    since*: string
+    until*: string
     sep*: string
 
   Result*[T] = ref object

src/views/renderutils.nim

@@ -83,3 +83,8 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
           option(value=opt, selected=""): text opt
         else:
           option(value=opt): text opt
+
+proc genDate*(pref, state: string): VNode =
+  buildHtml(span):
+    verbatim &"<input name={pref} type=\"date\" value=\"{state}\"/>"
+    icon "calendar"

src/views/search.nim

@@ -76,6 +76,12 @@ proc renderSearchPanel*(query: Query): VNode =
               else: k in query.excludes
             genCheckbox(&"{f[0]}-{k}", v, state)
 
+      span(class="search-title"): text "Time range"
+      tdiv(class="date-range"):
+        genDate("since", query.since)
+        span(class="search-title"): text "-"
+        genDate("until", query.until)
+
 proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode =
   let query = tweets.query
   buildHtml(tdiv(class="timeline-container")):