feat: search

src/components/Search.vue

@@ -4,10 +4,12 @@ import { throttle } from "lodash-es"
 import IconSearch from "@/components/icons/IconSearch.vue"
 import IconGlobe from "@/components/icons/IconGlobe.vue"
 import { getLocal } from "@/utils/ext"
+import { useI18n } from "@/utils/i18n"
 import config from "@/assets/config.json"
 
 const bingImg = chrome.runtime.getURL("img/bing.svg")
 const googleImg = chrome.runtime.getURL("img/google.svg")
+const { t } = useI18n()
 
 enum Engine {
   google = "google",
@@ -124,7 +126,7 @@ function switchEngine(value: Engine) {
             type="text"
             autocomplete="search"
             class="border-none outline-none bg-transparent text-base w-full"
-            placeholder="Search..."
+            :placeholder="t('searchPlaceholder')"
             v-model="value"
             @focus="engineListVisible = !(focus = true)"
             @blur="focus = false"
@@ -134,7 +136,7 @@ function switchEngine(value: Engine) {
         </div>
       </div>
 
-      <div v-if="engineListVisible" class="border-t">
+      <div v-if="engineListVisible" class="border-t border-foreground/20">
         <div
           class="flex items-center px-2 py-1 cursor-pointer hover:bg-background-soft"
           @click="switchEngine(Engine.google)"
@@ -158,7 +160,7 @@ function switchEngine(value: Engine) {
       <div
         v-if="!collapsed && value"
         :class="[
-          'scrollbar overflow-auto border-t transition-all duration-300 ease-in-out',
+          'scrollbar overflow-auto border-t border-foreground/20 transition-all duration-300 ease-in-out',
           !collapsed ? 'max-h-52' : 'max-h-0',
         ]"
       >

src/components/sidebar/ContentSidebar.vue

@@ -121,24 +121,24 @@ onUnmounted(() => {
         @pointerdown="autoPointerCapture"
         @pointermove="pointermove"
       ></div>
-      <div class="flex gap-2 items-center justify-between h-9 px-2">
+      <div class="flex gap-2 items-center justify-between h-8 px-2">
         <button
           @click=""
-          class="size-6 flex items-center justify-center mr-auto"
+          class="size-7 flex items-center justify-center mr-auto"
         >
           <img class="size-4" :src="logoUrl" />
         </button>
         <button
           @click="emit('hide')"
-          class="size-6 rounded-full hover:bg-background-soft flex items-center justify-center"
+          class="size-7 rounded-full hover:bg-background-soft flex items-center justify-center"
         >
-          <IconSplitscreenRight class="size-4 scale-95" />
+          <IconSplitscreenRight class="size-5 scale-95" />
         </button>
         <button
           @click="emit('close')"
-          class="size-6 rounded-full hover:bg-background-soft flex items-center justify-center"
+          class="size-7 rounded-full hover:bg-background-soft flex items-center justify-center"
         >
-          <IconClose class="size-4" />
+          <IconClose class="size-5" />
         </button>
       </div>
       <iframe class="w-full h-full flex-1" :src="sidebarUrl"></iframe>

src/components/sidebar/SidebarHome.vue

+<script setup lang="ts">
+import {} from "vue"
+import { useI18n } from "@/utils/i18n"
+import Search from "@/components/Search.vue"
+import SiteButton from "@/components/SiteButton.vue"
+import type config from "@/assets/config.json"
+
+const logoUrl = chrome.runtime.getURL("/logo.svg")
+const { t } = useI18n()
+
+defineProps<{
+  recentItems: typeof config.data.popularSites
+  popularItems: typeof config.data.popularSites
+}>()
+const emit = defineEmits({
+  go: (url: string) => true,
+  removeRecentItem: (url: string) => true,
+})
+</script>
+
+<template>
+  <div class="flex flex-col p-6 w-full max-w-md mx-auto">
+    <div class="flex flex-col items-center gap-2 mx-auto mt-16">
+      <img :src="logoUrl" class="size-16" />
+      <span class="text-2xl font-bold my-2">{{ t("sidebar") }}</span>
+    </div>
+
+    <div class="my-12">
+      <Search @go="(url) => emit('go', url)" />
+    </div>
+
+    <div class="flex flex-wrap gap-x-4 gap-y-4 justify-center">
+      <SiteButton
+        v-for="item of recentItems"
+        :icon="item.icon"
+        :title="item.title"
+        badge="remove"
+        @click="emit('go', item.url)"
+        @remove="emit('removeRecentItem', item.url)"
+      />
+    </div>
+
+    <!-- <div class="text-center my-3">Popular</div> -->
+    <div class="w-full my-6 border-b border-background-soft h-0"></div>
+    <div class="flex flex-wrap gap-x-4 gap-y-4 justify-center">
+      <SiteButton
+        v-for="item of popularItems"
+        :icon="item.icon"
+        :title="item.title"
+        @click="emit('go', item.url)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/locales/am.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "ከመረጡ የሚያሳውቁ ተግባራዎችን ለመረጡ ይችላሉ",
     "notSupported": "ይህ ገጽ ራስ-ሰር መላክን አይደግፍም. እባክዎ መልዕክቱን ይቅዱ እና እራስዎ ይላኩ."
   },
-  "openSidebar": "የጎን አሞሌውን ይክፈቱ"
+  "openSidebar": "የጎን አሞሌውን ይክፈቱ",
+  "searchPlaceholder": "ዩአርኤል ይፈልጉ ወይም ይተይቡ"
 }
\ No newline at end of file

src/locales/ar.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "اختر محتوى أكثر صلة بالموضوع الذي ترغب في التعلم عنه",
     "notSupported": "هذه الصفحة لا تدعم الإرسال التلقائي. يرجى نسخ الرسالة وإرسالها يدويًا."
   },
-  "openSidebar": "افتح الشريط الجانبي"
+  "openSidebar": "افتح الشريط الجانبي",
+  "searchPlaceholder": "ابحث عن عنوان URL أو اكتبه"
 }
\ No newline at end of file

src/locales/bg.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Изберете съдържание, свързано с темата, за която искате да научите повече",
     "notSupported": "Тази страница не поддържа автоматично изпращане. Моля, копирайте съобщението и го изпратете ръчно."
   },
-  "openSidebar": "Отворете страничната лента"
+  "openSidebar": "Отворете страничната лента",
+  "searchPlaceholder": "Потърсете или въведете URL"
 }
\ No newline at end of file

src/locales/bn.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "আপনি যে বিষয়ে আরও জানতে চান তা সম্পর্কিত কনটেন্ট চয়ন করুন",
     "notSupported": "এই পৃষ্ঠাটি স্বয়ংক্রিয় প্রেরণকে সমর্থন করে না। দয়া করে বার্তাটি অনুলিপি করুন এবং এটি ম্যানুয়ালি প্রেরণ করুন।"
   },
-  "openSidebar": "সাইডবারটি খুলুন"
+  "openSidebar": "সাইডবারটি খুলুন",
+  "searchPlaceholder": "একটি URL অনুসন্ধান করুন বা টাইপ করুন"
 }
\ No newline at end of file

src/locales/ca.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Trieu contingut més rellevant pel tema que voleu aprendre",
     "notSupported": "Aquesta pàgina no admet l'enviament automàtic. Copieu el missatge i envieu -lo manualment."
   },
-  "openSidebar": "Obriu la barra lateral"
+  "openSidebar": "Obriu la barra lateral",
+  "searchPlaceholder": "Cerqueu o escriviu un URL"
 }
\ No newline at end of file

src/locales/cs.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Vyberte obsah více relevantní k tématu, které chcete studovat",
     "notSupported": "Tato stránka nepodporuje automatické odesílání. Zkopírujte zprávu a odešlete ji ručně."
   },
-  "openSidebar": "Otevřete postranní panel"
+  "openSidebar": "Otevřete postranní panel",
+  "searchPlaceholder": "Vyhledejte nebo zadejte adresu URL"
 }
\ No newline at end of file

src/locales/da.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Vælg indhold mere relevant for det emne, du ønsker at lære om",
     "notSupported": "Denne side understøtter ikke automatisk afsendelse. Kopier meddelelsen og send den manuelt."
   },
-  "openSidebar": "Åbn sidebjælken"
+  "openSidebar": "Åbn sidebjælken",
+  "searchPlaceholder": "Søg eller skriv en URL"
 }
\ No newline at end of file

src/locales/de.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Wählen Sie Inhalte, die zum gewünschten Thema passen",
     "notSupported": "Diese Seite unterstützt das automatische Senden nicht. Bitte kopieren Sie die Nachricht und senden Sie sie manuell."
   },
-  "openSidebar": "Öffnen Sie die Seitenleiste"
+  "openSidebar": "Öffnen Sie die Seitenleiste",
+  "searchPlaceholder": "Suchen oder geben Sie eine URL ein"
 }
\ No newline at end of file

src/locales/el.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Επιλέξτε περιεχόμενο που σχετίζεται περισσότερο με το θέμα που θέλετε να μάθετε",
     "notSupported": "Αυτή η σελίδα δεν υποστηρίζει αυτόματη αποστολή. Αντιγράψτε το μήνυμα και στείλτε το χειροκίνητα."
   },
-  "openSidebar": "Ανοίξτε την πλαϊνή μπάρα"
+  "openSidebar": "Ανοίξτε την πλαϊνή μπάρα",
+  "searchPlaceholder": "Αναζητήστε ή πληκτρολογήστε μια διεύθυνση URL"
 }
\ No newline at end of file

src/locales/en.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Choose content more relevant to the topic you want to learn about",
     "notSupported": "This page does not support automatic sending. Please copy the message and send it manually."
   },
-  "openSidebar": "Open Sidebar"
+  "openSidebar": "Open Sidebar",
+  "searchPlaceholder": "Search or type a URL"
 }
\ No newline at end of file

src/locales/es-419.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Elige contenido más relevante para el tema que deseas aprender",
     "notSupported": "Esta página no admite el envío automático. Copie el mensaje y envíelo manualmente."
   },
-  "openSidebar": "Abrir la barra lateral"
+  "openSidebar": "Abrir la barra lateral",
+  "searchPlaceholder": "Buscar o escribir una URL"
 }
\ No newline at end of file

src/locales/es.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Elige contenido más relevante para el tema que deseas aprender",
     "notSupported": "Esta página no admite el envío automático. Copie el mensaje y envíelo manualmente."
   },
-  "openSidebar": "Abrir la barra lateral"
+  "openSidebar": "Abrir la barra lateral",
+  "searchPlaceholder": "Buscar o escribir una URL"
 }
\ No newline at end of file

src/locales/et.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Valige teema kohta rohkem seotud sisu",
     "notSupported": "See leht ei toeta automaatset saatmist. Kopeerige sõnum ja saatke see käsitsi."
   },
-  "openSidebar": "Avage külgriba"
+  "openSidebar": "Avage külgriba",
+  "searchPlaceholder": "Otsige või sisestage URL"
 }
\ No newline at end of file

src/locales/fa.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "محتوای مرتبط با موضوعی که می‌خواهید درباره آن یاد بگیرید را انتخاب کنید",
     "notSupported": "این صفحه از ارسال خودکار پشتیبانی نمی کند. لطفا پیام را کپی کرده و به صورت دستی ارسال کنید."
   },
-  "openSidebar": "نوار کناری را باز کنید"
+  "openSidebar": "نوار کناری را باز کنید",
+  "searchPlaceholder": "یک URL را جستجو یا تایپ کنید"
 }
\ No newline at end of file

src/locales/fi.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Valitse aiheeseesi liittyvämpi sisältö",
     "notSupported": "Tämä sivu ei tue automaattista lähettämistä. Kopioi viesti ja lähetä se manuaalisesti."
   },
-  "openSidebar": "Avaa sivupalkki"
+  "openSidebar": "Avaa sivupalkki",
+  "searchPlaceholder": "Hae tai kirjoita URL-osoite"
 }
\ No newline at end of file

src/locales/fil.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Pumili ng nilalaman na mas kaugnay sa paksa na nais mong malaman",
     "notSupported": "Ang pahinang ito ay hindi sumusuporta sa awtomatikong pagpapadala. Mangyaring kopyahin ang mensahe at manu -manong ipadala ito."
   },
-  "openSidebar": "Buksan ang sidebar"
+  "openSidebar": "Buksan ang sidebar",
+  "searchPlaceholder": "Maghanap o mag-type ng URL"
 }
\ No newline at end of file

src/locales/fr.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Choisissez un contenu plus pertinent pour le sujet que vous souhaitez apprendre",
     "notSupported": "Cette page ne prend pas en charge l'envoi automatique. Veuillez copier le message et l'envoyer manuellement."
   },
-  "openSidebar": "Ouvrir la barre latérale"
+  "openSidebar": "Ouvrir la barre latérale",
+  "searchPlaceholder": "Rechercher ou saisir une URL"
 }
\ No newline at end of file

src/locales/gu.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "તમારા શીખવાના વિષય સાથે સંબંધિત કન્ટેન્ટ પસંદ કરો",
     "notSupported": "આ પૃષ્ઠ સ્વચાલિત મોકલવાનું સમર્થન કરતું નથી. કૃપા કરીને સંદેશની નકલ કરો અને તેને જાતે મોકલો."
   },
-  "openSidebar": "સાઇડબાર ખોલો"
+  "openSidebar": "સાઇડબાર ખોલો",
+  "searchPlaceholder": "URL શોધો અથવા લખો"
 }
\ No newline at end of file

src/locales/he.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "בחר תוכן הקשור יותר לנושא שברצונך ללמוד עליו",
     "notSupported": "דף זה אינו תומך בשליחה אוטומטית. אנא העתק את ההודעה ושלח אותה ידנית."
   },
-  "openSidebar": "פתח את סרגל הצד"
+  "openSidebar": "פתח את סרגל הצד",
+  "searchPlaceholder": "חפש או הקלד כתובת אתר"
 }
\ No newline at end of file

src/locales/hi.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "उस विषय के बारे में सीखना जिस पर आप चर्चा करना चाहते हैं, उससे संबंधित सामग्री चुनें",
     "notSupported": "यह पृष्ठ स्वचालित भेजने का समर्थन नहीं करता है। कृपया संदेश कॉपी करें और इसे मैन्युअल रूप से भेजें।"
   },
-  "openSidebar": "साइडबार खोलें"
+  "openSidebar": "साइडबार खोलें",
+  "searchPlaceholder": "URL खोजें या टाइप करें"
 }
\ No newline at end of file

src/locales/hr.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Odaberite sadržaj koji je relevantan za temu koju želite naučiti",
     "notSupported": "Ova stranica ne podržava automatsko slanje. Kopirajte poruku i pošaljite je ručno."
   },
-  "openSidebar": "Otvorite bočnu traku"
+  "openSidebar": "Otvorite bočnu traku",
+  "searchPlaceholder": "Pretražite ili upišite URL"
 }
\ No newline at end of file

src/locales/hu.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Válassza ki a témához relevánsabb tartalmat, amiről szeretne tanulni",
     "notSupported": "Ez az oldal nem támogatja az automatikus küldéseket. Kérjük, másolja az üzenetet, és küldje el manuálisan."
   },
-  "openSidebar": "Nyissa ki az oldalsávot"
+  "openSidebar": "Nyissa ki az oldalsávot",
+  "searchPlaceholder": "Keressen vagy írjon be egy URL-t"
 }
\ No newline at end of file

src/locales/id.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Pilih konten yang lebih relevan dengan topik yang ingin Anda pelajari",
     "notSupported": "Halaman ini tidak mendukung pengiriman otomatis. Harap salin pesan dan kirimkan secara manual."
   },
-  "openSidebar": "Buka bilah samping"
+  "openSidebar": "Buka bilah samping",
+  "searchPlaceholder": "Cari atau ketik URL"
 }
\ No newline at end of file

src/locales/it.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Scegli contenuti più pertinenti all'argomento che vuoi apprendere",
     "notSupported": "Questa pagina non supporta l'invio automatico. Si prega di copiare il messaggio e inviarlo manualmente."
   },
-  "openSidebar": "Apri la barra laterale"
+  "openSidebar": "Apri la barra laterale",
+  "searchPlaceholder": "Cerca o digita un URL"
 }
\ No newline at end of file

src/locales/ja.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "学びたいトピックに関連するコンテンツを選択してください",
     "notSupported": "このページは、自動送信をサポートしていません。メッセージをコピーして手動で送信してください。"
   },
-  "openSidebar": "サイドバーを開きます"
+  "openSidebar": "サイドバーを開きます",
+  "searchPlaceholder": "URLを検索または入力します"
 }
\ No newline at end of file

src/locales/kn.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "ನೀವು ಕಲಿಯಬಯಸುವ ವಿಷಯಕ್ಕೆ ಹೆಚ್ಚಿನ ಸಂಬಂಧಪಟ್ಟ ವಿಷಯಗಳನ್ನು ಆರಿಸಿ",
     "notSupported": "ಈ ಪುಟವು ಸ್ವಯಂಚಾಲಿತ ಕಳುಹಿಸುವಿಕೆಯನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ದಯವಿಟ್ಟು ಸಂದೇಶವನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಅದನ್ನು ಕೈಯಾರೆ ಕಳುಹಿಸಿ."
   },
-  "openSidebar": "ಸೈಡ್‌ಬಾರ್ ತೆರೆಯಿರಿ"
+  "openSidebar": "ಸೈಡ್‌ಬಾರ್ ತೆರೆಯಿರಿ",
+  "searchPlaceholder": "URL ಅನ್ನು ಹುಡುಕಿ ಅಥವಾ ಟೈಪ್ ಮಾಡಿ"
 }
\ No newline at end of file

src/locales/ko.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "학습하고 싶은 주제와 관련된 콘텐츠를 선택하세요",
     "notSupported": "이 페이지는 자동 전송을 지원하지 않습니다. 메시지를 복사하여 수동으로 보내주십시오."
   },
-  "openSidebar": "사이드 바를 엽니 다"
+  "openSidebar": "사이드 바를 엽니 다",
+  "searchPlaceholder": "URL을 검색하거나 입력하세요."
 }
\ No newline at end of file

src/locales/lt.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Pasirinkite turinį, kuris yra labiau susijęs su jumis dominančia tema",
     "notSupported": "Šis puslapis nepalaiko automatinio siuntimo. Nukopijuokite pranešimą ir atsiųskite jį rankiniu būdu."
   },
-  "openSidebar": "Atidarykite šoninę juostą"
+  "openSidebar": "Atidarykite šoninę juostą",
+  "searchPlaceholder": "Ieškokite arba įveskite URL"
 }
\ No newline at end of file

src/locales/lv.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Izvēlieties saturu, kas ir saistīts ar tēmu, par kuru vēlaties uzzināt",
     "notSupported": "Šī lapa neatbalsta automātisku sūtīšanu. Lūdzu, nokopējiet ziņojumu un nosūtiet to manuāli."
   },
-  "openSidebar": "Atveriet sānjoslu"
+  "openSidebar": "Atveriet sānjoslu",
+  "searchPlaceholder": "Meklējiet vai ierakstiet URL"
 }
\ No newline at end of file

src/locales/ml.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "നിങ്ങളുടെ അറിവിനായി കരുതോട്ട വിഷയത്തിനു കൂടുതൽ ബന്ധമായ ഉള്ളടക്കം തിരഞ്ഞെടുക്കുക",
     "notSupported": "ഈ പേജ് യാന്ത്രിക അയയ്ക്കുന്നതിനെ പിന്തുണയ്ക്കുന്നില്ല. സന്ദേശം പകർത്തി സ്വമേധയാ അയയ്ക്കുക."
   },
-  "openSidebar": "സൈഡ്ബാർ തുറക്കുക"
+  "openSidebar": "സൈഡ്ബാർ തുറക്കുക",
+  "searchPlaceholder": "ഒരു URL തിരയുക അല്ലെങ്കിൽ ടൈപ്പ് ചെയ്യുക"
 }
\ No newline at end of file

src/locales/mr.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "तुम्हाला ओळखायचं विषयसंबंधित आशय निवडा",
     "notSupported": "हे पृष्ठ स्वयंचलित पाठविण्यास समर्थन देत नाही. कृपया संदेश कॉपी करा आणि तो व्यक्तिचलितपणे पाठवा."
   },
-  "openSidebar": "साइडबार उघडा"
+  "openSidebar": "साइडबार उघडा",
+  "searchPlaceholder": "URL शोधा किंवा टाइप करा"
 }
\ No newline at end of file

src/locales/ms.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Pilih kandungan yang lebih berkaitan dengan topik yang anda ingin ketahui",
     "notSupported": "Halaman ini tidak menyokong penghantaran automatik. Sila salin mesej dan hantarkan secara manual."
   },
-  "openSidebar": "Buka bar sisi"
+  "openSidebar": "Buka bar sisi",
+  "searchPlaceholder": "Cari atau taip URL"
 }
\ No newline at end of file

src/locales/nl.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Kies inhoud die relevanter is voor het onderwerp dat je wilt leren",
     "notSupported": "Deze pagina ondersteunt geen automatisch verzenden. Kopieer het bericht en stuur het handmatig."
   },
-  "openSidebar": "Open de zijbalk"
+  "openSidebar": "Open de zijbalk",
+  "searchPlaceholder": "Zoek of typ een URL"
 }
\ No newline at end of file

src/locales/no.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Velg innhold som er mer relevant for emnet du vil lære om",
     "notSupported": "Denne siden støtter ikke automatisk sending. Kopier meldingen og send den manuelt."
   },
-  "openSidebar": "Åpne sidefeltet"
+  "openSidebar": "Åpne sidefeltet",
+  "searchPlaceholder": "Søk eller skriv inn en URL"
 }
\ No newline at end of file

src/locales/pl.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Wybierz treść bardziej związana z tematem, który chcesz się dowiedzieć",
     "notSupported": "Ta strona nie obsługuje automatycznego wysyłania. Skopiuj wiadomość i wysyłaj ją ręcznie."
   },
-  "openSidebar": "Otwórz pasek boczny"
+  "openSidebar": "Otwórz pasek boczny",
+  "searchPlaceholder": "Wyszukaj lub wpisz adres URL"
 }
\ No newline at end of file

src/locales/pt-BR.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Escolha conteúdo mais relevante para o tópico que você deseja aprender",
     "notSupported": "Esta página não suporta o envio automático. Copie a mensagem e envie -a manualmente."
   },
-  "openSidebar": "Abra a barra lateral"
+  "openSidebar": "Abra a barra lateral",
+  "searchPlaceholder": "Pesquise ou digite um URL"
 }
\ No newline at end of file

src/locales/pt-PT.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Escolha conteúdo mais relevante para o tópico que deseja aprender",
     "notSupported": "Esta página não suporta o envio automático. Copie a mensagem e envie -a manualmente."
   },
-  "openSidebar": "Abra a barra lateral"
+  "openSidebar": "Abra a barra lateral",
+  "searchPlaceholder": "Pesquise ou digite um URL"
 }
\ No newline at end of file

src/locales/ro.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Alegeți conținut mai relevant pentru subiectul pe care doriți să îl învățați",
     "notSupported": "Această pagină nu acceptă trimiterea automată. Vă rugăm să copiați mesajul și să -l trimiteți manual."
   },
-  "openSidebar": "Deschideți bara laterală"
+  "openSidebar": "Deschideți bara laterală",
+  "searchPlaceholder": "Căutați sau introduceți o adresă URL"
 }
\ No newline at end of file

src/locales/ru.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Выберите более релевантный контент по теме, которую вы хотите изучить",
     "notSupported": "Эта страница не поддерживает автоматическую отправку. Пожалуйста, скопируйте сообщение и отправьте его вручную."
   },
-  "openSidebar": "Откройте боковую панель"
+  "openSidebar": "Откройте боковую панель",
+  "searchPlaceholder": "Найдите или введите URL-адрес"
 }
\ No newline at end of file

src/locales/sk.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Vyberte obsah, ktorý je viac relevantný pre tému, ktorú chcete študovať",
     "notSupported": "Táto stránka nepodporuje automatické odosielanie. Skopírujte správu a pošlite ju manuálne."
   },
-  "openSidebar": "Otvorte bočný panel"
+  "openSidebar": "Otvorte bočný panel",
+  "searchPlaceholder": "Vyhľadajte alebo zadajte adresu URL"
 }
\ No newline at end of file

src/locales/sl.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Izberite vsebino, ki je bolj relevantna za temo, ki se je želite naučiti",
     "notSupported": "Ta stran ne podpira samodejnega pošiljanja. Kopirajte sporočilo in ga pošljite ročno."
   },
-  "openSidebar": "Odprite stransko vrstico"
+  "openSidebar": "Odprite stransko vrstico",
+  "searchPlaceholder": "Iščite ali vnesite URL"
 }
\ No newline at end of file

src/locales/sr.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Izaberite sadržaj koji je relevantniji za temu koju želite naučiti",
     "notSupported": "Ова страница не подржава аутоматско слање. Копирајте поруку и пошаљите га ручно."
   },
-  "openSidebar": "Отвори бочну траку"
+  "openSidebar": "Отвори бочну траку",
+  "searchPlaceholder": "Претражите или унесите УРЛ"
 }
\ No newline at end of file

src/locales/sv.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Välj innehåll som är mer relevant för det ämne du vill lära dig om",
     "notSupported": "Denna sida stöder inte automatisk sändning. Kopiera meddelandet och skicka det manuellt."
   },
-  "openSidebar": "Öppna sidofältet"
+  "openSidebar": "Öppna sidofältet",
+  "searchPlaceholder": "Sök eller skriv en URL"
 }
\ No newline at end of file

src/locales/sw.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Chagua yaliyomo inayohusiana zaidi na mada unayotaka kujifunza kuhusu",
     "notSupported": "Ukurasa huu hauungi mkono kutuma moja kwa moja. Tafadhali nakili ujumbe na utumie kwa mikono."
   },
-  "openSidebar": "Fungua pembeni"
+  "openSidebar": "Fungua pembeni",
+  "searchPlaceholder": "Tafuta au charaza URL"
 }
\ No newline at end of file

src/locales/ta.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "நீங்கள் அறிந்திருக்க விரும்பும் பகுதிக்கு உரையாடல் தேர்ந்தெடுக்கவும்",
     "notSupported": "இந்த பக்கம் தானியங்கி அனுப்புதலை ஆதரிக்காது. தயவுசெய்து செய்தியை நகலெடுத்து கைமுறையாக அனுப்புங்கள்."
   },
-  "openSidebar": "பக்கப்பட்டியைத் திறக்கவும்"
+  "openSidebar": "பக்கப்பட்டியைத் திறக்கவும்",
+  "searchPlaceholder": "URL ஐத் தேடவும் அல்லது தட்டச்சு செய்யவும்"
 }
\ No newline at end of file

src/locales/te.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "మీరు కలిగిన విషయానికి అనుసంధానం కలిగిన కంటెంట్ ఎంచుకోండి",
     "notSupported": "ఈ పేజీ ఆటోమేటిక్ పంపడానికి మద్దతు ఇవ్వదు. దయచేసి సందేశాన్ని కాపీ చేసి మానవీయంగా పంపండి."
   },
-  "openSidebar": "సైడ్‌బార్ తెరవండి"
+  "openSidebar": "సైడ్‌బార్ తెరవండి",
+  "searchPlaceholder": "URLని శోధించండి లేదా టైప్ చేయండి"
 }
\ No newline at end of file

src/locales/th.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "เลือกเนื้อหาที่เกี่ยวข้องมากขึ้นกับหัวข้อที่คุณต้องการเรียนรู้",
     "notSupported": "หน้านี้ไม่รองรับการส่งอัตโนมัติ กรุณาคัดลอกข้อความและส่งด้วยตนเอง"
   },
-  "openSidebar": "เปิดแถบด้านข้าง"
+  "openSidebar": "เปิดแถบด้านข้าง",
+  "searchPlaceholder": "ค้นหาหรือพิมพ์ URL"
 }
\ No newline at end of file

src/locales/tr.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Öğrenmek istediğiniz konuyla daha ilgili içerik seçin",
     "notSupported": "Bu sayfa otomatik göndermeyi desteklemez. Lütfen mesajı kopyalayın ve manuel olarak gönderin."
   },
-  "openSidebar": "Kenar çubuğunu aç"
+  "openSidebar": "Kenar çubuğunu aç",
+  "searchPlaceholder": "Bir URL arayın veya yazın"
 }
\ No newline at end of file

src/locales/uk.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Виберіть вміст, який більше відповідає темі, яку ви хочете вивчити",
     "notSupported": "Ця сторінка не підтримує автоматичне надсилання. Будь ласка, скопіюйте повідомлення та надішліть його вручну."
   },
-  "openSidebar": "Відкрийте бічну панель"
+  "openSidebar": "Відкрийте бічну панель",
+  "searchPlaceholder": "Знайдіть або введіть URL-адресу"
 }
\ No newline at end of file

src/locales/vi.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "Chọn nội dung liên quan hơn đến chủ đề bạn muốn tìm hiểu",
     "notSupported": "Trang này không hỗ trợ gửi tự động. Vui lòng sao chép tin nhắn và gửi thủ công."
   },
-  "openSidebar": "Mở thanh bên"
+  "openSidebar": "Mở thanh bên",
+  "searchPlaceholder": "Tìm kiếm hoặc nhập URL"
 }
\ No newline at end of file

src/locales/zh-CN.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "选择与你想了解的主题更相关的内容",
     "notSupported": "此页面不支持自动发送，请复制消息发送"
   },
-  "openSidebar": "打开侧边栏"
+  "openSidebar": "打开侧边栏",
+  "searchPlaceholder": "搜索或输入 URL"
 }
\ No newline at end of file

src/locales/zh-TW.json

@@ -43,5 +43,6 @@
     "chooseContentRelevant": "選擇與你想了解的主題更相關的內容",
     "notSupported": "此頁面不支持自動發送。請複制消息並手動發送。"
   },
-  "openSidebar": "打開側邊欄"
+  "openSidebar": "打開側邊欄",
+  "searchPlaceholder": "搜尋或輸入 URL"
 }
\ No newline at end of file

src/pages/Popup.vue

@@ -144,6 +144,11 @@ async function handleWriteHtml() {
 }
 
 async function openSidebar(url = "") {
+  chrome.runtime.sendMessage({
+    type: MessageType.openInSidebar,
+    tabId: -1,
+    url,
+  })
   const win = await chrome.windows.getCurrent()
   await chrome.storage.session.set({
     sidebarUrls: { sidepanel: url },
@@ -159,6 +164,7 @@ async function openContentSidebar(url = "") {
   })
   await chrome.tabs.sendMessage(activeTab.value.id!, {
     type: MessageType.openContentSidebar,
+    tabId: activeTab.value.id,
     url,
   })
   window.close()
@@ -326,18 +332,6 @@ function showChatDocs() {
           <IconNoteStack class="size-7" />
           <div class="text-xs">Chat Doc</div>
         </button>
-        <button
-          class="flex flex-col items-center p-2 bg-background-soft rounded"
-        >
-          <IconNoteStack class="size-7" />
-          <div class="text-xs">Chat Doc</div>
-        </button>
-        <button
-          class="flex flex-col items-center p-2 bg-background-soft rounded"
-        >
-          <IconNoteStack class="size-7" />
-          <div class="text-xs">Chat Doc</div>
-        </button>
       </div>
     </div>
 
@@ -413,4 +407,4 @@ function showChatDocs() {
   background-clip: content-box;
   @apply bg-foreground/10;
 }
-</style>
\ No newline at end of file
+</style>

src/pages/Sidebar.vue

@@ -14,6 +14,7 @@ import { useI18n } from "@/utils/i18n"
 import { MessageType } from "@/types"
 import SiteButton from "@/components/SiteButton.vue"
 import Search from "@/components/Search.vue"
+import SidebarHome from "@/components/sidebar/SidebarHome.vue"
 
 const logoUrl = chrome.runtime.getURL("/logo.svg")
 const { t } = useI18n()
@@ -34,7 +35,7 @@ const protectedUrl = computed(() => {
 async function handleMessage(message: any) {
   switch (message.type) {
     case MessageType.openInSidebar:
-      if (!currentTab.tabId) {
+      if (currentTab.tabId == 0) {
         const current = await chrome.tabs.getCurrent()
         currentTab.tabId = current?.id || -1
       }
@@ -76,7 +77,7 @@ async function updateRecentItems(pageInfo: {
   await chrome.storage.local.set({ sidebarRecentItems })
 }
 
-async function removeRecentItems(url: string) {
+async function removeRecentItem(url: string) {
   const { sidebarRecentItems } = await getLocal({
     sidebarRecentItems: [] as {
       url: string
@@ -137,46 +138,18 @@ function go(link: string) {
 </script>
 
 <template>
-  <div class="w-full h-screen">
-    <Webview
-      v-if="!protectedUrl"
-      :url="url"
-      :ua="ua"
-      @page-info="updateRecentItems"
-    />
-
-    <div v-else class="flex flex-col p-6 max-w-md mx-auto">
-      <div class="flex flex-col items-center gap-2 mx-auto mt-16">
-        <img :src="logoUrl" class="size-16" />
-        <span class="text-2xl font-bold my-2">{{ t("sidebar") }}</span>
-      </div>
-
-      <div class="my-12">
-        <Search @go="go" />
-      </div>
-
-      <div class="flex flex-wrap gap-x-4 gap-y-4 justify-center">
-        <SiteButton
-          v-for="item of recentItems"
-          :icon="item.icon"
-          :title="item.title"
-          badge="remove"
-          @click="go(item.url)"
-          @remove="() => removeRecentItems(item.url)"
-        />
-      </div>
-
-      <!-- <div class="text-center my-3">Popular</div> -->
-      <div class="w-full my-6 border-b border-background-soft h-0"></div>
-      <div class="flex flex-wrap gap-x-4 gap-y-4 justify-center">
-        <SiteButton
-          v-for="item of popularItems"
-          :icon="item.icon"
-          :title="item.title"
-          @click="go(item.url)"
-        />
-      </div>
+  <div class="w-full h-screen flex flex-col">
+    <div class="w-full h-full" v-if="!protectedUrl">
+      <Webview :url="url" :ua="ua" @page-info="updateRecentItems" />
     </div>
+
+    <SidebarHome
+      v-else
+      :recentItems="recentItems"
+      :popularItems="popularItems"
+      @go="go"
+      @remove-recent-item="removeRecentItem"
+    />
   </div>
 
   <!-- <LoadingBar /> -->

src/utils/ext.ts

@@ -260,8 +260,8 @@ export function isProtectedUrl(url: string) {
     }
 
     return false
-  } catch (e) {
-    console.warn(e)
+  } catch (err) {
+    console.warn(err)
   }
 
   return true