Attempt to make month picker better

cheeaun · Oct 20, 2023 · 3721acf · 3721acf · Alex0007 · Oct 20, 2023
1 parent ab7df0f
commit 3721acf
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/src/app.css b/src/app.css
@@ -2134,11 +2134,18 @@ ul.link-list li a .icon {
     border-radius: 999px;
     color: var(--text-color);
     background-color: var(--bg-color);
+    background-image: none;
     border: 2px solid transparent;
     margin: 0;
-    appearance: none;
+    /* appearance: none; */
     line-height: 1;
     font-size: 90%;
+    display: flex;
+    gap: 8px;
+
+    > .icon {
+      color: var(--link-color);
+    }
 
     &:placeholder-shown {
       color: var(--text-insignificant-color);
@@ -2157,6 +2164,7 @@ ul.link-list li a .icon {
 
     :is(input, select) {
       background-color: transparent;
+      background-image: none;
       border: 0;
       padding: 0;
       margin: 0;
@@ -2167,6 +2175,12 @@ ul.link-list li a .icon {
       border-radius: 0;
       box-shadow: none;
       outline: none;
+
+      &::-webkit-calendar-picker-indicator {
+        /* replace icon with triangle */
+        opacity: 0.5;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+      }
     }
   }
 }

diff --git a/src/components/icon.jsx b/src/components/icon.jsx
@@ -101,6 +101,7 @@ export const ICONS = {
   'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
   keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
   cloud: () => import('@iconify-icons/mingcute/cloud-line'),
+  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
 };
 
 function Icon({

diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
@@ -16,6 +16,8 @@ import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
+const MIN_YEAR = 1983;
+const MIN_YEAR_MONTH = `${MIN_YEAR}-01`; // Birth of the Internet
 
 const supportsInputMonth = (() => {
   try {
@@ -67,7 +69,9 @@ function AccountStatuses() {
   }, [sameCurrentInstance, account?.acct]);
 
   async function fetchAccountStatuses(firstLoad) {
-    if (/^\d{4}-[01]\d$/.test(month)) {
+    const isValidMonth = /^\d{4}-[01]\d$/.test(month);
+    const isValidYear = month?.split?.('-')?.[0] >= MIN_YEAR;
+    if (isValidMonth && isValidYear) {
       if (!account) {
         return {
           value: [],
@@ -297,31 +301,33 @@ function AccountStatuses() {
           ))}
           {searchEnabled &&
             (supportsInputMonth ? (
-              <input
-                type="month"
-                class={`filter-field ${month ? 'is-active' : ''}`}
-                disabled={!account?.acct}
-                value={month || ''}
-                min="1983-01" // Birth of the Internet
-                max={new Date().toISOString().slice(0, 7)}
-                onInput={(e) => {
-                  const { value } = e.currentTarget;
-                  setSearchParams(
-                    value
-                      ? {
-                          month: value,
-                        }
-                      : {},
-                  );
-                }}
-              />
+              <label class={`filter-field ${month ? 'is-active' : ''}`}>
+                <Icon icon="month" size="l" />
+                <input
+                  type="month"
+                  disabled={!account?.acct}
+                  value={month || ''}
+                  min={MIN_YEAR_MONTH}
+                  max={new Date().toISOString().slice(0, 7)}
+                  onInput={(e) => {
+                    const { value } = e.currentTarget;
+                    setSearchParams(
+                      value
+                        ? {
+                            month: value,
+                          }
+                        : {},
+                    );
+                  }}
+                />
+              </label>
             ) : (
               // Fallback to <select> for month and <input type="number"> for year
               <MonthPicker
                 class={`filter-field ${month ? 'is-active' : ''}`}
                 disabled={!account?.acct}
                 value={month || ''}
-                min="1983-01" // Birth of the Internet
+                min={MIN_YEAR_MONTH}
                 max={new Date().toISOString().slice(0, 7)}
                 onInput={(e) => {
                   const { value } = e;
@@ -465,6 +471,7 @@ function MonthPicker(props) {
 
   return (
     <div class={className}>
+      <Icon icon="month" size="l" />
       <select
         ref={monthFieldRef}
         disabled={disabled}
@@ -497,7 +504,7 @@ function MonthPicker(props) {
         type="number"
         disabled={disabled}
         value={_year || new Date().getFullYear()}
-        min={min?.slice(0, 4) || '1983'}
+        min={min?.slice(0, 4) || MIN_YEAR}
         max={max?.slice(0, 4) || new Date().getFullYear()}
         onInput={(e) => {
           const { value } = e.currentTarget;