initial commit

entrypoints/popup/App.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import ToggleOnOff from "@/components/ToggleOnOff.vue";
+import Todo from "@/components/Todo.vue"
+import BlockedSite from "@/components/BlockedSite.vue"
+const currentMenu = ref("main")
+const menuLists = [
+  "main",
+  "completed",
+  "blocked sites",
+]
+
+const changeMenu = (menu: string) => {
+  currentMenu.value = menu
+}
+</script>
+
+<template>
+    <ToggleOnOff />
+    <h1>let me focus</h1>
+    <ul style="text-align: center;" v-for="menu in menuLists">
+        <li>
+            <button @click="changeMenu(menu)">[{{ menu }}]</button>
+        </li>
+    </ul>
+    <Todo v-if="currentMenu === 'main'" showInput hoverShowDeleteButton />
+    <Todo v-if="currentMenu === 'completed'" showOnlyCompleted showClearAllTodo />
+    <BlockedSite v-if="currentMenu === 'blocked sites'" />
+    <br/>
+    [{{browser.runtime.getManifest().version}}]
+</template>
+
+<style scoped>
+ul {
+    padding: 0;
+    display: inline-block;
+}
+
+li {
+    list-style: none;
+    margin: 0px 5px;
+}
+
+li button {
+    cursor: pointer;
+}
+
+.logo {
+    height: 6em;
+    filter: drop-shadow(0 0 1em #ffffff);
+}
+</style>