hakowork/let-me-focus-browser
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: rewrite to solidjs

Browse source
This commit is contained in:
Tholut A 2026-08-21 15:28:21 +07:00
parent 74c6215c27
commit afa2db26e7
21 changed files with 1074 additions and 1835 deletions
Download patch file Download diff file Expand all files Collapse all files

15
entrypoints/content/App.tsx Normal file
View file

@ -0,0 +1,15 @@
import stopImage from "@/assets/stop.png";
import "./style.css";
import { Todo } from "@/components/Todo";
function App() {
return (
<div class="main">
<img class="logo" src={stopImage} />
<h1 class="message">[go back to your work]</h1>
<Todo />
</div>
);
}
export default App;

17
entrypoints/content/index.ts
View file

@ -1,8 +1,8 @@
import { ContentScriptContext } from "#imports";
import App from "./App.vue";
import App from "./App";
import { render } from "solid-js/web";
import { featureEnableBlock } from "@/utils/storage";
import { createApp } from "vue";
import { createProxyService } from '@webext-core/proxy-service';
import { createProxyService } from "@webext-core/proxy-service";
import { BlockedSite } from "@/utils/types";
const blockedSitesRepo = createProxyService(BLOCKED_SITES_REPO_KEY);
@ -14,12 +14,16 @@ export default defineContentScript({
const ui = await defineOverlay(ctx);
const isBlockEnabled = await featureEnableBlock.getValue();
const currentDomain = window.location.hostname;
const blockedSites = await blockedSitesRepo.getAll()
const blockedSites = await blockedSitesRepo.getAll();
function isOnBlockList() {
return (
blockedSites.filter(function (blockedSite: BlockedSite) {
return (blockedSite.url == currentDomain || "www." + blockedSite.url == currentDomain) && blockedSite.blocked;
return (
(blockedSite.url == currentDomain ||
"www." + blockedSite.url == currentDomain) &&
blockedSite.blocked
);
}).length > 0
);
}
@ -44,8 +48,7 @@ function defineOverlay(ctx: ContentScriptContext) {
position: "overlay",
zIndex: 9999,
onMount(container, _shadow, shadowHost) {
const app = createApp(App);
app.mount(container);
const app = render(App, container);
shadowHost.style.pointerEvents = "none";
return app;
},

15
entrypoints/content/App.vue → entrypoints/content/style.css
View file

@ -1,17 +1,3 @@
<script lang="ts" setup>
import stopImage from "~/assets/stop.png";
import Todo from "@/components/Todo.vue";
</script>
<template>
<div class="main">
<img class="logo" :src="stopImage" />
<h1 class="message">[go back to your work]</h1>
<Todo />
</div>
</template>
<style>
body {
margin: 0;
}
@ -39,4 +25,3 @@ h1.message,
img.logo {
filter: drop-shadow(0 0 1em #ffffff);
}
</style>

46
entrypoints/popup/App.tsx Normal file
View file

@ -0,0 +1,46 @@
import { createSignal } from "solid-js";
import "./style.css";
import { MainToggle } from "@/components/MainToggle";
import { BlockedSite } from "@/components/BlockedSite";
import { Todo } from "@/components/Todo";
function App() {
const menus = ["main", "completed", "blocked sites"];
const [menu, setMenu] = createSignal("main");
return (
<>
<div>
<MainToggle />
<h1>let me focus</h1>
<ul class="menu">
<For each={menus}>
{(menu) => (
<li>
<button onClick={() => setMenu(menu)}>[{menu}]</button>
</li>
)}
</For>
</ul>
<Suspense>
<Switch>
<Match when={menu() === "main"}>
<Todo showInput hoverShowDeleteButton />
</Match>
<Match when={menu() === "completed"}>
<Todo showOnlyCompleted showClearAllTodo />
</Match>
<Match when={menu() === "blocked sites"}>
<BlockedSite />
</Match>
</Switch>
</Suspense>
<br />[{browser.runtime.getManifest().version}]
</div>
</>
);
}
export default App;

51
entrypoints/popup/App.vue
View file

@ -1,51 +0,0 @@
<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>

20
entrypoints/popup/index.html
View file

@ -1,13 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>let me focus</title>
<meta name="manifest.type" content="browser_action" />
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>let me focus</title>
<meta name="manifest.type" content="browser_action" />
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>

5
entrypoints/popup/main.ts
View file

@ -1,5 +0,0 @@
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');

6
entrypoints/popup/main.tsx Normal file
View file

@ -0,0 +1,6 @@
import { render } from "solid-js/web";
import "./style.css";
import App from "./App";
render(() => <App />, document.getElementById("root")!);

70
entrypoints/popup/style.css
View file

@ -1,42 +1,54 @@
:root {
font-family: monospace;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: #ffffff;
background-color: #222222;
font-family: monospace;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: #ffffff;
background-color: #222222;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 400px;
min-height: 100vh;
margin: 0;
display: flex;
place-items: center;
min-width: 400px;
min-height: 100vh;
}
h1 {
font-size: 2.4em;
font-size: 2.4em;
}
button {
font-size: 1em;
font-weight: 500;
}
#app {
max-width: 400px;
margin: 0 auto;
padding: 2rem;
text-align: center;
#root {
max-width: 400px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #222222;
background-color: #ffffff;
}
button {
background-color: #f9f9f9;
}
:root {
color: #222222;
background-color: #ffffff;
}
button {
background-color: #f9f9f9;
}
}
ul.menu {
padding: 0;
text-align: center;
}
ul.menu li {
list-style: none;
margin: 0px 5px;
display: inline-block;
}
ul.menu li button {
cursor: pointer;
font-size: 1em;
font-weight: 500;
}