feat: add threads page

.prettierrc

@@ -1,6 +1,6 @@
 {
   "useTabs": true,
-  "printWidth": 110,
+  "printWidth": 90,
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,

package.json

@@ -29,7 +29,7 @@
     "solid-icons": "^1.0.12",
     "solid-js": "^1.7.6",
     "solid-transition-group": "^0.0.10",
-    "webm-grabber": "^1.0.4"
+    "webm-grabber": "^1.1.0"
   },
   "devDependencies": {
     "@electron-forge/cli": "^6.4.2",

src/App.tsx

@@ -1,11 +1,12 @@
 import { Route, Routes } from "@solidjs/router";
-import { Box, globalCss, HopeProvider } from "@hope-ui/solid";
+import { NotificationsProvider, globalCss, HopeProvider } from "@hope-ui/solid";
 import { useStore } from "@nanostores/solid";
 import { $media } from "./stores/media";
 import { Match, Switch } from "solid-js";
 import { GlobalLoading } from "./components/GlobalLoading";
 import { Main } from "./pages/Main";
 import { WindowBar } from "./components/WindowBar";
+import { Threads } from "./pages/Threads";
 
 const globalStyles = globalCss({
 	"*": {
@@ -18,6 +19,7 @@ function Routing() {
 	return (
 		<Routes>
 			<Route path="/" component={Main} />
+			<Route path="/threads" component={Threads} />
 		</Routes>
 	);
 }
@@ -29,17 +31,19 @@ export function App() {
 
 	return (
 		<HopeProvider config={{ initialColorMode: "system" }}>
-			<WindowBar />
+			<NotificationsProvider>
+				<WindowBar />
 
-			<Switch>
-				<Match when={media().loading}>
-					<GlobalLoading />
-				</Match>
+				<Switch>
+					<Match when={media().loading}>
+						<GlobalLoading />
+					</Match>
 
-				<Match when={!media().loading}>
-					<Routing />
-				</Match>
-			</Switch>
+					<Match when={!media().loading}>
+						<Routing />
+					</Match>
+				</Switch>
+			</NotificationsProvider>
 		</HopeProvider>
 	);
 }

src/components/GlobalLoading.tsx

@@ -8,7 +8,7 @@ export function GlobalLoading() {
 	return (
 		<Box
 			css={{
-				height: "100vh",
+				height: "calc(100vh - 52px)",
 				display: "flex",
 				alignItems: "center",
 				flexDirection: "column",
@@ -20,6 +20,10 @@ export function GlobalLoading() {
 
 			<Box mt={12}>Обновление списка тредов и файлов</Box>
 
+			<Box my={12} fontSize="0.9em" color="$neutral9">
+				Получение тредов с 4chan - долгий процесс
+			</Box>
+
 			<Box mt={12} css={{ fontSize: "0.7em" }}>
 				state: {status()}
 			</Box>

src/pages/Main.tsx

@@ -4,7 +4,8 @@ import {
 	ListItem,
 	ListIcon,
 	Heading,
-	Switch,
+	notificationService,
+	Input,
 	SwitchPrimitive,
 	css,
 	Text,
@@ -21,7 +22,7 @@ import { TbHash } from "solid-icons/tb";
 import { $fileTypes, $fileTypesActions } from "../stores/fileTypes";
 import { $media, fetchMedia } from "../stores/media";
 import { FaSolidHashtag } from "solid-icons/fa";
-import { $filter } from "../stores/filter";
+import { $filter, $filterActions } from "../stores/filter";
 import { IoClose } from "solid-icons/io";
 
 const switchRootClass = css({
@@ -87,6 +88,17 @@ export function Main() {
 		$schemaChanged.set(false);
 	};
 
+	const handleAddFilterWord = (event: SubmitEvent) => {
+		event.preventDefault();
+		const target = event.currentTarget as HTMLFormElement;
+		const formData = new FormData(target);
+		const word = formData.get("word");
+		if (!word) return;
+
+		$filterActions.add(word.toString());
+		target.reset();
+	};
+
 	return (
 		<Box p={16} css={{ display: "flex", gap: "32px" }}>
 			<Box css={{ flex: "1 1 0" }}>
@@ -174,9 +186,16 @@ export function Main() {
 			<Box css={{ flex: "1 1 0" }}>
 				<Heading mb={18} display="flex" justifyContent="space-between">
 					<Box>Бан ворды</Box>
-					<Button size="xs" onClick={() => prompt("pizda?")}>
-						Добавить
-					</Button>
+					<Box>
+						<form
+							onSubmit={handleAddFilterWord}
+							style={{ display: "flex", "align-items": "center", gap: "8px" }}>
+							<Input required name="word" placeholder="Write here..." size="xs" />
+							<Button type="submit" colorScheme="accent" size="xs">
+								Добавить
+							</Button>
+						</form>
+					</Box>
 				</Heading>
 
 				<Text my={16} fontSize=".9em" color="$neutral9">
@@ -190,7 +209,7 @@ export function Main() {
 							Список пуст
 						</Text>
 					}>
-					{word => (
+					{(word, index) => (
 						<Box
 							my={12}
 							px={16}
@@ -205,6 +224,7 @@ export function Main() {
 								<IconButton
 									size="xs"
 									icon={<IoClose />}
+									onClick={() => $filterActions.remove(index())}
 									variant="dashed"
 									aria-label="remove"
 									colorScheme="danger"

src/pages/Threads.tsx

@@ -0,0 +1,86 @@
+import {
+	Box,
+	Input,
+	Button,
+	Heading,
+	List,
+	ListIcon,
+	ListItem,
+	Text,
+	Badge,
+} from "@hope-ui/solid";
+import { createMemo, createSignal, For } from "solid-js";
+import { useStore } from "@nanostores/solid";
+import { $media } from "../stores/media";
+import { Link } from "@solidjs/router";
+
+export function Threads() {
+	const [searchQuery, setSearchQuery] = createSignal("");
+
+	const media = useStore($media);
+
+	const threads = createMemo(() =>
+		media().threads.filter(thread => thread.subject?.includes(searchQuery())),
+	);
+
+	return (
+		<Box p={16}>
+			<Heading mb={24}>Список тредов</Heading>
+
+			<form style={{ display: "flex", gap: "12px" }}>
+				<Input
+					size="sm"
+					value={searchQuery()}
+					width={300}
+					onInput={({ currentTarget }) => setSearchQuery(currentTarget.value)}
+					placeholder="Поиск тредов"
+				/>
+				<Button type="reset" size="sm" colorScheme="warning" variant="dashed">
+					Сбросить
+				</Button>
+			</form>
+
+			<Box mt={24}>
+				{!!threads().length && (
+					<Text color="$neutral9" fontSize="0.8em" mb={8}>
+						Тредов: {threads().length}
+					</Text>
+				)}
+
+				<List spacing="$3">
+					<For
+						each={threads()}
+						fallback={
+							<Box
+								p={12}
+								border="2px dashed $neutral7"
+								display="flex"
+								borderRadius="8px"
+								color="$neutral9"
+								alignItems="center"
+								justifyContent="center">
+								Список тредов пуст
+							</Box>
+						}>
+						{thread => (
+							<ListItem>
+								<Link href={`/thread/${thread.id}`}>
+									<Badge
+										colorScheme={thread.vendorName === "2ch" ? "warning" : "success"}
+										mr={8}>
+										{thread.vendorName}
+									</Badge>
+									{thread.subject?.substring(0, 120) || (
+										<Text as="span" color="$neutral9">
+											Тред без названия
+										</Text>
+									)}
+								</Link>
+							</ListItem>
+						)}
+					</For>
+				</List>
+			</Box>
+		</Box>
+	);
+}

src/stores/fileTypes.ts

@@ -1,4 +1,5 @@
 import { map, onSet } from "nanostores";
+import { $schemaChanged } from "./schema";
 
 const STORAGE_KEY = "file-types-cache";
 
@@ -53,5 +54,7 @@ export const $fileTypesActions = {
 				return { ...type, enabled: !type.enabled };
 			}),
 		);
+
+		$schemaChanged.set(true);
 	},
 };

src/stores/filter.ts

@@ -1,6 +1,15 @@
-import { map } from "nanostores";
+import { map, onSet } from "nanostores";
 
-export const $filter = map<string[]>(["nigger", "gay"]);
+const STORAGE_KEY = "filter-cache";
+
+const basedFilters = ["gay", "trap", "трап"];
+
+function readFromCache() {
+	const cachedValue = localStorage.getItem(STORAGE_KEY);
+	return cachedValue ? JSON.parse(cachedValue) : basedFilters;
+}
+
+export const $filter = map<string[]>(readFromCache());
 
 export const $filterActions = {
 	add(text: string) {
@@ -10,3 +19,7 @@ export const $filterActions = {
 		$filter.set($filter.get().filter((_, k) => k !== key));
 	},
 };
+
+onSet($filter, ({ newValue }) => {
+	localStorage.setItem(STORAGE_KEY, JSON.stringify(newValue));
+});