[+] Search bar

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@vuepic/vue-datepicker": "^9.0.3",
     "element-plus": "^2.7.1",
     "katex": "^0.16.10",
     "lxgw-wenkai-webfont": "^1.7.0",

src/css/datepicker.css

@@ -0,0 +1,100 @@
+
+:root {
+    /*General*/
+    --dp-font-family: 'LXGW Wenkai' -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans",
+    "Helvetica Neue", sans-serif;
+    --dp-border-radius: 10px; /*Configurable border-radius*/
+    --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
+    --dp-common-transition: all 0.5s ease-in; /*Generic transition applied on buttons and calendar cells*/
+
+    /*Sizing*/
+    --dp-button-height: 24px; /*Size for buttons in overlays*/
+    --dp-month-year-row-height: 24px; /*Height of the month-year select row*/
+    --dp-month-year-row-button-size: 24px; /*Specific height for the next/previous buttons*/
+    --dp-button-icon-height: 16px; /*Icon sizing in buttons*/
+    --dp-cell-size: 35px; /*Width and height of calendar cell*/
+    --dp-cell-padding: 5px; /*Padding in the cell*/
+    --dp-common-padding: 10px; /*Common padding used*/
+    --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
+    --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
+    --dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
+    --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
+    --dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/
+    --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
+    --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
+    --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
+    --dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
+    --dp-menu-padding: 6px 8px; /*Menu padding*/
+
+    /*Font sizes*/
+    --dp-font-size: 1rem; /*Default font-size*/
+    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
+    --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
+
+    /*Transitions*/
+    --dp-animation-duration: 0.1s; /*Transition duration*/
+    --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
+    --dp-transition-timing: ease-out; /*Timing on slide animations*/
+}
+
+.dp__theme_light {
+    --dp-background-color: #f0ece9;
+    --dp-text-color: #70512a;
+    --dp-hover-color: #e5deda;
+    --dp-hover-text-color: rgba(166, 134, 89, 0.84);
+    --dp-hover-icon-color: #959595;
+    --dp-primary-color: #ffeedb;
+    --dp-primary-disabled-color: #efdecb;
+    --dp-primary-text-color: #705a2a;
+    --dp-secondary-color: rgba(166, 134, 89, 0.84);
+    --dp-border-color: #ddd;
+    --dp-menu-border-color: #ddd;
+    --dp-border-color-hover: #aaaeb7;
+    --dp-border-color-focus: #aaaeb7;
+    --dp-disabled-color: #f6f6f6;
+    --dp-scroll-bar-background: #f3f3f3;
+    --dp-scroll-bar-color: #959595;
+    --dp-success-color: #76d275;
+    --dp-success-color-disabled: #a3d9b1;
+    --dp-icon-color: #959595;
+    --dp-danger-color: #ff6f60;
+    --dp-marker-color: #ff6f60;
+    --dp-tooltip-color: #fafafa;
+    --dp-disabled-color-text: #8e8e8e;
+    --dp-highlight-color: rgb(25 118 210 / 10%);
+    --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
+    --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
+    --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
+}
+
+[data-theme="dark"] {
+    .dp__theme_light {
+        --dp-background-color: hsl(32, 21%, 12%);
+        --dp-text-color: #f3b8a6;
+        --dp-hover-color: hsl(32, 21%, 7%);
+        --dp-hover-text-color: rgba(255, 225, 185, 0.9);
+        --dp-hover-icon-color: #959595;
+        --dp-primary-color: hsl(33, 25%, 25%);
+        --dp-primary-disabled-color: hsl(33, 25%, 15%);
+        --dp-primary-text-color: #ff8193;
+        --dp-secondary-color: rgba(255, 225, 185, 0.9);
+        --dp-border-color: #2d2d2d;
+        --dp-menu-border-color: #2d2d2d;
+        --dp-border-color-hover: #aaaeb7;
+        --dp-border-color-focus: #aaaeb7;
+        --dp-disabled-color: #737373;
+        --dp-disabled-color-text: #d0d0d0;
+        --dp-scroll-bar-background: #212121;
+        --dp-scroll-bar-color: #484848;
+        --dp-success-color: #00701a;
+        --dp-success-color-disabled: #428f59;
+        --dp-icon-color: #959595;
+        --dp-danger-color: #e53935;
+        --dp-marker-color: #e53935;
+        --dp-tooltip-color: #3e3e3e;
+        --dp-highlight-color: rgb(0 92 178 / 20%);
+        --dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
+        --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
+        --dp-range-between-border-color: var(--dp-hover-color, #fff);
+    }
+}

src/logic/data.ts

@@ -1,8 +1,9 @@
 export interface PersonMeta {
     path: string,
     id: string,
-    name: string
-    profileUrl: string
+    name: string,
+    profileUrl: string,
+    sortKey?: any,
 }
 
 export interface CommentReply {

src/main.ts

@@ -10,5 +10,7 @@ import 'element-plus/theme-chalk/el-message.css'
 import 'element-plus/theme-chalk/el-message-box.css'
 import 'element-plus/theme-chalk/el-overlay.css'
 import 'element-plus/theme-chalk/el-button.css'
+import '@vuepic/vue-datepicker/dist/main.css'
+import '@/css/datepicker.css'
 
 createApp(App).use(router).mount('#app')

src/views/Home.vue

@@ -16,6 +16,13 @@
                 <RandomPerson class="randomP"/>
                 <BirthdayButton class="randomP" v-for="i of birthdayList" :key="i[0]" :id="i[0]" :name="i[1]"/>
             </div>
+
+            <div class="search-bar">
+                <Icon class="search-icon" icon="mynaui:search-hexagon" v-on:click="updateSearch"/>
+                <input class="search-input" v-model="searchKey" v-on:input="updateSearch" placeholder="Search for..."/>
+                <VueDatePicker range light model-auto class="search-date" placeholder="Select a range" v-model="dateRange" @update:model-value="updateSearch" />
+            </div>
+
             <Loading v-if="isLoading"/>
 
             <transition-group id="profiles" class="unselectable" v-if="people" name="profiles" tag="div">
@@ -64,7 +71,8 @@ import {fitText} from "@/logic/dom_utils";
 import {isEaster} from "@/logic/easterEgg";
 import {
     fetchWithLang,
-    gaussian, gaussian_shuffle,
+    gaussian,
+    gaussian_shuffle,
     getResponseSync,
     handleIconFromString,
     scheduledLoopTask,
@@ -75,10 +83,12 @@ import {isUwU, UwU} from "@/logic/uwu";
 import {viaBalloon} from "@/logic/viaFetch";
 import router from "@/router";
 import TdorComments from "@/views/TdorComments.vue";
+import {Icon} from "@iconify/vue";
+import VueDatePicker from '@vuepic/vue-datepicker'
 import urljoin from "url-join";
 import {Component, Ref, Vue} from 'vue-facing-decorator';
 
-@Component({ components: { TdorComments, Loading, RandomPerson, BirthdayButton } })
+@Component({ components: { TdorComments, Loading, RandomPerson, BirthdayButton, Icon, VueDatePicker } })
 export default class Home extends Vue {
     clicked = ''
     showAdd = false
@@ -91,6 +101,9 @@ export default class Home extends Vue {
     htmlBottom = handleIconFromString(this.lang === 'zh_hans' ? htmlBottom : (this.lang === 'zh_hant' ? htmlBottomHant : htmlBottomEn));
 
     people: PersonMeta[] = null as never as PersonMeta[]
+    fullPeople = [] as PersonMeta[]
+    searchKey = ''
+    dateRange = []
 
     birthdayList = [] as [string, string][]
 
@@ -113,7 +126,7 @@ export default class Home extends Vue {
     }
 
     updated() {
-        if (this.bookmark != undefined) {
+        if ((this.bookmark != undefined) && (this.bookmark.length > 0)) {
             const width = this.bookmark[0].offsetWidth - 10
             for (const b of this.bookmarkTexts) fitText(b, { width })
         }
@@ -125,6 +138,7 @@ export default class Home extends Vue {
             .then(it => it.text())
             .then(it => {
                 this.people = (isEaster() && (gaussian() < 0.35)) ? shuffle(JSON.parse(it)) : JSON.parse(it)
+                this.fullPeople = JSON.parse(it)
                 const now = new Date();
                 const pros = ((now.getDate() == 1) && (now.getMonth() + 1 == 4)) ? 0.5 : 0.05;
                 if (isEaster() && (gaussian() < pros)) scheduledLoopTask(1500, () => {
@@ -159,6 +173,24 @@ export default class Home extends Vue {
         router.push(`/profile/${p.id}`)
     }
 
+    updateSearch() {
+        this.people = [];
+        for (const p of this.fullPeople) {
+            if (p.id.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase()) ||
+                p.name.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase())) {
+                if (!this.dateRange) this.people.push(p);
+                else if ((this.dateRange.length < 2)) this.people.push(p);
+                else {
+                    const sortDate = new Date(p.sortKey)
+                    if ((this.dateRange[0].getTime() < sortDate.getTime()) &&
+                        (this.dateRange[1].getTime() > sortDate.getTime())) {
+                        this.people.push(p);
+                    }
+                }
+            }
+        }
+    }
+
     profileUrl(p: PersonMeta): string {
         return replaceUrlVars(p.profileUrl, p.id)
     }
@@ -194,6 +226,41 @@ export default class Home extends Vue {
 #profiles
     margin-top: 20px
 
+.search-bar
+    margin: 1rem auto
+    display: flex
+    flex-direction: row
+    flex-wrap: nowrap
+    justify-content: space-around
+    align-items: center
+    padding: 0 2rem
+
+    .search-icon
+        width: 28px
+        height: 28px
+        color: $color-text-main
+        cursor: pointer
+
+    .search-input
+        width: calc(50% - 48px)
+        height: 26px
+        color: $color-text-main
+        background-color: rgba(0, 0, 0, 0.05)
+        border-radius: 10px
+        border: none
+        outline: $color-text-main
+        font-size: 16px
+        text-indent: 5px
+        padding: 6px 30px 6px 12px
+
+        &:active
+            outline: $color-text-main
+            border: none
+
+    .search-date
+        width: calc(50% - 48px)
+        height: 36px
+
 // Profile picture alignment
 .profile
     position: relative
@@ -267,6 +334,14 @@ export default class Home extends Vue {
 .profiles-move
     transition: all 0.5s $ease-in-out-cric
 
+.profiles-enter-active .profiles-leave-active
+    transition: all .5s $ease-out-cric !important
+
+.profiles-enter-from, .profiles-leave-to
+    opacity: 0
+    transform: translateY(50px)
+
+
 @media screen and (max-width: 440px)
     .profile
         .front, .back
@@ -275,6 +350,21 @@ export default class Home extends Vue {
             height: $len
             width: $len
 
+@media screen and (max-width: 700px)
+    .search-bar
+        display: flex
+        flex-direction: column
+        gap: 0.5rem
+
+        .search-icon
+            display: none
+
+        .search-input
+            width: calc(100% - 40px)
+
+        .search-date
+            width: 100%
+
 [data-theme="dark"]
     .back, .front
         border: 10px solid rgba(27, 27, 32, 0.8964) !important
@@ -283,4 +373,13 @@ export default class Home extends Vue {
     .bookmark
         border: 40px solid rgba(255, 189, 202, 0.25) !important
         border-bottom: 10px solid transparent !important
+
+    .search-bar
+        .search-icon
+            color: $color-text-dark-main
+
+        .search-input
+            color: $color-text-dark-main
+            outline: $color-text-dark-main
+            background: rgba(255, 255, 255, 0.05)
 </style>

yarn.lock

@@ -1903,6 +1903,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vuepic/vue-datepicker@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "@vuepic/vue-datepicker@npm:9.0.3"
+  dependencies:
+    date-fns: "npm:^3.6.0"
+  peerDependencies:
+    vue: ">=3.2.0"
+  checksum: 10c0/c16ee115a1cc71afd018c967b4a36190beb093c97c5fd42eae65c110aa173c73747562d81e1b41c0f16bb7e3caa695efcc6530171aad55c19d7dd00385c8a7f9
+  languageName: node
+  linkType: hard
+
 "@vueuse/core@npm:^9.1.0":
   version: 9.13.0
   resolution: "@vueuse/core@npm:9.13.0"
@@ -2606,6 +2617,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "date-fns@npm:3.6.0"
+  checksum: 10c0/0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.11.3":
   version: 1.11.9
   resolution: "dayjs@npm:1.11.9"
@@ -4923,6 +4941,7 @@ __metadata:
     "@vitejs/plugin-vue": "npm:^5.0.4"
     "@vitejs/plugin-vue-jsx": "npm:^3.1.0"
     "@vue/eslint-config-typescript": "npm:^11.0.3"
+    "@vuepic/vue-datepicker": "npm:^9.0.3"
     autocorrect-node: "npm:^2.9.0"
     element-plus: "npm:^2.7.1"
     eslint: "npm:^8.57.0"