├── .nvmrc
├── .husky
    └── pre-commit
├── vercel.json
├── public
    └── favicon.png
├── src
    ├── helpers
    │   ├── asyncHelpers.ts
    │   ├── domHelpers.ts
    │   ├── typeHelpers.ts
    │   ├── mastodonHelpers.ts
    │   ├── mastodonContext.tsx
    │   ├── overlayBugWorkaround.tsx
    │   └── authHelpers.ts
    ├── pages
    │   ├── _app.tsx
    │   ├── review.tsx
    │   └── index.tsx
    ├── components
    │   ├── block.tsx
    │   ├── followingsLoadingIndicator.tsx
    │   ├── htmlRendered.tsx
    │   ├── feedWidgetIframe.tsx
    │   ├── linkButton.tsx
    │   ├── emojify.tsx
    │   ├── textField.tsx
    │   ├── radioGroup.tsx
    │   ├── blurhashImage.tsx
    │   ├── reviewerPrompt.tsx
    │   ├── htmlReactParserOptions.tsx
    │   ├── popover.tsx
    │   ├── feedWidget.tsx
    │   ├── button.tsx
    │   ├── options.tsx
    │   ├── reviewerFooter.tsx
    │   ├── menu.tsx
    │   ├── reviewerButtons.tsx
    │   ├── finished.tsx
    │   ├── status.tsx
    │   └── reviewer.tsx
    ├── env
    │   ├── server.mjs
    │   ├── client.mjs
    │   └── schema.mjs
    ├── styles
    │   └── globals.css
    └── store
    │   ├── index.ts
    │   ├── selectors.ts
    │   └── actions.ts
├── .vscode
    └── settings.json
├── prettier.config.cjs
├── postcss.config.cjs
├── lint-staged.config.cjs
├── tailwind.config.cjs
├── next.config.mjs
├── .env.example
├── .gitignore
├── tsconfig.json
├── eslint.config.mjs
├── README.md
├── LICENSE.md
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | v22.4.1
2 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npx lint-staged


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "github": {
3 |     "silent": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eramdam/tokimeki-mastodon/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/src/helpers/asyncHelpers.ts:
--------------------------------------------------------------------------------
1 | export function delayAsync(n: number) {
2 |   return new Promise<void>((resolve) => setTimeout(resolve, n));
3 | }
4 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.formatOnSave": true,
3 |   "editor.codeActionsOnSave": {
4 |     "source.fixAll.eslint": "explicit"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import("prettier").Config} */
2 | module.exports = {
3 |   plugins: [require.resolve("prettier-plugin-tailwindcss")],
4 | };
5 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     "tailwindcss/nesting": "postcss-nesting",
4 |     tailwindcss: {},
5 |     autoprefixer: {},
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/src/helpers/domHelpers.ts:
--------------------------------------------------------------------------------
1 | import { isElement as lodashIsElement } from "lodash-es";
2 | 
3 | export function isElement(node: EventTarget | null): node is Element {
4 |   return lodashIsElement(node);
5 | }
6 | 


--------------------------------------------------------------------------------
/lint-staged.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "*.{json,html,svg}": "prettier --write",
3 |   "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
4 |   "*.{js,mjs,cjs}": ["eslint --fix", "prettier --write"],
5 | };
6 | 


--------------------------------------------------------------------------------
/src/helpers/typeHelpers.ts:
--------------------------------------------------------------------------------
1 | import type { PropsWithChildren } from "react";
2 | 
3 | export type PropsWithHtmlProps<
4 |   E extends keyof JSX.IntrinsicElements,
5 |   P = PropsWithChildren<object>,
6 | > = Omit<JSX.IntrinsicElements[E], keyof P> & P;
7 | 


--------------------------------------------------------------------------------
/src/helpers/mastodonHelpers.ts:
--------------------------------------------------------------------------------
1 | import type { TokimekiAccount } from "../store";
2 | 
3 | export function makeAccountName(account: TokimekiAccount) {
4 |   return (
5 |     account.displayName.trim() || account.username.trim() || account.acct.trim()
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-require-imports */
 2 | /** @type {import('tailwindcss').Config} */
 3 | module.exports = {
 4 |   content: ["./src/**/*.{js,ts,jsx,tsx}"],
 5 |   theme: {
 6 |     extend: {},
 7 |   },
 8 |   plugins: [require("@tailwindcss/typography")],
 9 | };
10 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | /**
 3 |  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 4 |  * This is especially useful for Docker builds.
 5 |  */
 6 | // eslint-disable-next-line @typescript-eslint/no-unused-expressions
 7 | !process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"));
 8 | 
 9 | /** @type {import("next").NextConfig} */
10 | const config = {
11 |   reactStrictMode: false,
12 |   swcMinify: true,
13 |   i18n: {
14 |     locales: ["en"],
15 |     defaultLocale: "en",
16 |   },
17 | };
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | # Since .env is gitignored, you can use .env.example to build a new `.env` file when you clone the repo.
 2 | # Keep this file up-to-date when you add new variables to `.env`.
 3 | 
 4 | # This file will be committed to version control, so make sure not to have any secrets in it.
 5 | # If you are cloning this repo, create a copy of this file named `.env` and populate it with your secrets.
 6 | 
 7 | # When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly
 8 | 
 9 | # Example:
10 | # SERVERVAR=foo
11 | # NEXT_PUBLIC_CLIENTVAR=bar
12 | NEXT_PUBLIC_CLIENT_NAME=


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | 
 3 | import { type AppType } from "next/dist/shared/lib/utils";
 4 | import Head from "next/head";
 5 | import Script from "next/script";
 6 | 
 7 | const MyApp: AppType = ({ Component, pageProps }) => {
 8 |   return (
 9 |     <>
10 |       <Head>
11 |         <title>Tokimeki Mastodon</title>
12 |       </Head>
13 |       <Script
14 |         defer
15 |         data-domain="tokimeki.erambert.me"
16 |         src="https://p.erambert.me/js/script.js"
17 |       ></Script>
18 |       <Component {...pageProps} />
19 |     </>
20 |   );
21 | };
22 | 
23 | export default MyApp;
24 | 


--------------------------------------------------------------------------------
/src/components/block.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | 
 3 | import type { PropsWithHtmlProps } from "../helpers/typeHelpers";
 4 | 
 5 | export function Block(props: PropsWithHtmlProps<"div">) {
 6 |   const { className, children, ...rest } = props;
 7 |   return (
 8 |     <div
 9 |       className={clsx(
10 |         "mx-0 w-full gap-2 p-2 first:mt-0 lg:my-10 lg:mx-auto lg:max-w-2xl lg:gap-3 lg:rounded-lg lg:p-4 lg:shadow-xl first:lg:mt-2",
11 |         "bg-white",
12 |         "dark:bg-neutral-800",
13 |         "peer lg:peer-[]:-mt-4",
14 |         className,
15 |       )}
16 |       {...rest}
17 |     >
18 |       {children}
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/followingsLoadingIndicator.tsx:
--------------------------------------------------------------------------------
 1 | import { Block } from "./block";
 2 | 
 3 | export function FollowingsLoadingIndicator() {
 4 |   return (
 5 |     <Block className="text-center lg:max-w-md">
 6 |       <p className="custom-prose">Loading your followings</p>
 7 |       <div className="mt-4 flex justify-center gap-2">
 8 |         {Array.from({ length: 6 }).map((_, i) => {
 9 |           return (
10 |             <div
11 |               key={i}
12 |               className="h-3 w-3 animate-pulse rounded-full bg-black/20 dark:bg-white/20"
13 |               style={{ animationDelay: `${i * 200}ms` }}
14 |             />
15 |           );
16 |         })}
17 |       </div>
18 |     </Block>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # database
12 | /prisma/db.sqlite
13 | /prisma/db.sqlite-journal
14 | 
15 | # next.js
16 | /.next/
17 | /out/
18 | next-env.d.ts
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # local env files
34 | # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
35 | .env
36 | .env*.local
37 | 
38 | # vercel
39 | .vercel
40 | 
41 | # typescript
42 | *.tsbuildinfo
43 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "noUncheckedIndexedAccess": true,
18 |     "preserveWatchOutput": false
19 |   },
20 |   "include": [
21 |     "next-env.d.ts",
22 |     "**/*.ts",
23 |     "**/*.tsx",
24 |     "**/*.cjs",
25 |     "**/*.mjs",
26 |     ".eslintrc.cjs"
27 |   ],
28 |   "exclude": ["node_modules"]
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/htmlRendered.tsx:
--------------------------------------------------------------------------------
 1 | import parse from "html-react-parser";
 2 | import type { mastodon } from "masto";
 3 | import { useMemo } from "react";
 4 | import { ErrorBoundary } from "react-error-boundary";
 5 | 
 6 | import { getParserOptions } from "./htmlReactParserOptions";
 7 | 
 8 | interface HtmlRendererProps {
 9 |   content: string;
10 |   emojiArray: mastodon.v1.CustomEmoji[];
11 |   classNames?: {
12 |     p?: string;
13 |     a?: string;
14 |   };
15 | }
16 | 
17 | export function HtmlRenderer(props: HtmlRendererProps) {
18 |   const { content, emojiArray, classNames } = props;
19 |   const parseOptions = useMemo(
20 |     () => getParserOptions({ emojiArray, classNames }),
21 |     [classNames, emojiArray],
22 |   );
23 | 
24 |   return (
25 |     <ErrorBoundary
26 |       fallbackRender={() => {
27 |         return <span>{content}</span>;
28 |       }}
29 |     >
30 |       {parse(content, parseOptions)}
31 |     </ErrorBoundary>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/env/server.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | /**
 3 |  * This file is included in `/next.config.mjs` which ensures the app isn't built with invalid env vars.
 4 |  * It has to be a `.mjs`-file to be imported there.
 5 |  */
 6 | import { env as clientEnv, formatErrors } from "./client.mjs";
 7 | import { serverSchema } from "./schema.mjs";
 8 | 
 9 | const _serverEnv = serverSchema.safeParse(process.env);
10 | 
11 | if (!_serverEnv.success) {
12 |   console.error(
13 |     "❌ Invalid environment variables:\n",
14 |     ...formatErrors(_serverEnv.error.format()),
15 |   );
16 |   throw new Error("Invalid environment variables");
17 | }
18 | 
19 | for (let key of Object.keys(_serverEnv.data)) {
20 |   if (key.startsWith("NEXT_PUBLIC_")) {
21 |     console.warn("❌ You are exposing a server-side env-variable:", key);
22 | 
23 |     throw new Error("You are exposing a server-side env-variable");
24 |   }
25 | }
26 | 
27 | export const env = { ..._serverEnv.data, ...clientEnv };
28 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import eslint from "@eslint/js";
 3 | import tseslint from "typescript-eslint";
 4 | import globals from "globals";
 5 | 
 6 | export default [
 7 |   {
 8 |     ignores: [".next/"],
 9 |   },
10 |   {
11 |     languageOptions: {
12 |       globals: {
13 |         ...globals.node,
14 |         ...globals.browser,
15 |       },
16 |     },
17 |   },
18 |   eslint.configs.recommended,
19 |   ...tseslint.configs.recommended,
20 |   {
21 |     rules: {
22 |       "@typescript-eslint/consistent-type-imports": "warn",
23 |       "@typescript-eslint/no-unused-vars": [
24 |         "error",
25 |         {
26 |           args: "all",
27 |           argsIgnorePattern: "^_",
28 |           caughtErrors: "all",
29 |           caughtErrorsIgnorePattern: "^_",
30 |           destructuredArrayIgnorePattern: "^_",
31 |           varsIgnorePattern: "^_",
32 |           ignoreRestSiblings: true,
33 |         },
34 |       ],
35 |       "no-unused-vars": "off",
36 |     },
37 |   },
38 | ];
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tokimeki Mastodon
 2 | 
 3 | This project is a clone of [Tokimeki Unfollow](https://tokimeki-unfollow.glitch.me/) for Mastodon. It lets you review the accounts you follow, and saves your progress in your browser's local storage.
 4 | 
 5 | ## Contributing
 6 | 
 7 | The project is based on the [T3 stack](https://create.t3.gg/), it uses:
 8 | 
 9 | - [NextJS](https://nextjs.org/) for the server, and [React](https://reactjs.org) for the UI
10 | - [Tailwind](https://tailwindcss.com/)
11 | - [Zustand](https://github.com/pmndrs/zustand) for the state-managed, using its [persist](https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md) middleware to save the data locally.
12 | 
13 | You will need NodeJS (see [.nvrmrc](./.nvmrc) for the version) installed.
14 | 
15 | ### Setup steps
16 | 
17 | - `npm install`
18 | - `npm run dev` for the local dev server
19 | - `npm run typecheck` and `npm run typecheck:watch` to run TypeScript's type-checking process
20 | 
21 | TODO: write more documentation.
22 | 


--------------------------------------------------------------------------------
/src/env/client.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { clientEnv, clientSchema } from "./schema.mjs";
 3 | 
 4 | const _clientEnv = clientSchema.safeParse(clientEnv);
 5 | 
 6 | export const formatErrors = (
 7 |   /** @type {import('zod').ZodFormattedError<Map<string,string>,string>} */
 8 |   errors,
 9 | ) =>
10 |   Object.entries(errors)
11 |     .map(([name, value]) => {
12 |       if (value && "_errors" in value)
13 |         return `${name}: ${value._errors.join(", ")}\n`;
14 |     })
15 |     .filter(Boolean);
16 | 
17 | if (!_clientEnv.success) {
18 |   console.error(
19 |     "❌ Invalid environment variables:\n",
20 |     ...formatErrors(_clientEnv.error.format()),
21 |   );
22 |   throw new Error("Invalid environment variables");
23 | }
24 | 
25 | for (let key of Object.keys(_clientEnv.data)) {
26 |   if (!key.startsWith("NEXT_PUBLIC_")) {
27 |     console.warn(
28 |       `❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
29 |     );
30 | 
31 |     throw new Error("Invalid public environment variable name");
32 |   }
33 | }
34 | 
35 | export const env = _clientEnv.data;
36 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Damien Erambert
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/feedWidgetIframe.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo } from "react";
 2 | 
 3 | interface FeedWidgetProps {
 4 |   width: number;
 5 |   height: number;
 6 |   theme: "dark" | "light" | "auto";
 7 |   showBoosts: boolean;
 8 |   showReplies: boolean;
 9 |   showHeader: boolean;
10 |   url: string;
11 | }
12 | 
13 | export function FeedWidgetIframe(props: FeedWidgetProps) {
14 |   const { width, height, theme, showBoosts, showReplies, showHeader, url } =
15 |     props;
16 | 
17 |   const iframeSrc = useMemo(() => {
18 |     const frameUrl = new URL("https://www.mastofeed.com/apiv2/feed");
19 |     const params = new URLSearchParams({
20 |       userurl: url,
21 |       theme,
22 |       header: String(showHeader),
23 |       boosts: String(showBoosts),
24 |       replies: String(showReplies),
25 |       size: "100",
26 |     }).toString();
27 | 
28 |     frameUrl.search = params;
29 | 
30 |     return frameUrl.toString();
31 |   }, [showBoosts, showHeader, showReplies, theme, url]);
32 | 
33 |   return (
34 |     <iframe
35 |       sandbox="allow-top-navigation allow-scripts"
36 |       width={width}
37 |       height={height}
38 |       src={iframeSrc}
39 |     ></iframe>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/src/env/schema.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { z } from "zod";
 3 | 
 4 | /**
 5 |  * Specify your server-side environment variables schema here.
 6 |  * This way you can ensure the app isn't built with invalid env vars.
 7 |  */
 8 | export const serverSchema = z.object({
 9 |   NODE_ENV: z.enum(["development", "test", "production"]),
10 | });
11 | 
12 | /**
13 |  * Specify your client-side environment variables schema here.
14 |  * This way you can ensure the app isn't built with invalid env vars.
15 |  * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
16 |  */
17 | export const clientSchema = z.object({
18 |   NEXT_PUBLIC_CLIENT_NAME: z.string(),
19 |   // NEXT_PUBLIC_CLIENTVAR: z.string(),
20 | });
21 | 
22 | /**
23 |  * You can't destruct `process.env` as a regular object, so you have to do
24 |  * it manually here. This is because Next.js evaluates this at build time,
25 |  * and only used environment variables are included in the build.
26 |  * @type {{ [k in keyof z.infer<typeof clientSchema>]: z.infer<typeof clientSchema>[k] | undefined }}
27 |  */
28 | export const clientEnv = {
29 |   NEXT_PUBLIC_CLIENT_NAME: process.env.NEXT_PUBLIC_CLIENT_NAME,
30 |   // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
31 | };
32 | 


--------------------------------------------------------------------------------
/src/components/linkButton.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import type { PropsWithChildren } from "react";
 3 | import { useRef } from "react";
 4 | import type { AriaButtonProps } from "react-aria";
 5 | import { useButton } from "react-aria";
 6 | 
 7 | interface LinkButtonProps extends PropsWithChildren<AriaButtonProps<"button">> {
 8 |   className?: string;
 9 |   position?: "northwest" | "northeast" | "southwest" | "southeast";
10 | }
11 | 
12 | export function LinkButton(props: LinkButtonProps) {
13 |   const ref = useRef<HTMLButtonElement | null>(null);
14 |   const { buttonProps } = useButton(props, ref);
15 | 
16 |   const positionClassnames: Record<
17 |     NonNullable<LinkButtonProps["position"]>,
18 |     string
19 |   > = {
20 |     northwest: "top-2 left-2",
21 |     northeast: "top-2 right-2",
22 |     southeast: "bottom-2 right-2",
23 |     southwest: "bottom-2 left-2",
24 |   };
25 | 
26 |   return (
27 |     <button
28 |       {...buttonProps}
29 |       ref={ref}
30 |       className={clsx(
31 |         "text-sm underline dark:text-white",
32 |         props.position && positionClassnames[props.position],
33 |         props.position && "fixed block",
34 |         props.className,
35 |       )}
36 |     >
37 |       {props.children}
38 |     </button>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/emojify.tsx:
--------------------------------------------------------------------------------
 1 | import { isString, keyBy } from "lodash-es";
 2 | import type { mastodon } from "masto";
 3 | 
 4 | export function renderWithEmoji(
 5 |   emojiArray: mastodon.v1.CustomEmoji[],
 6 |   text: string,
 7 | ) {
 8 |   const emojiMap = keyBy(emojiArray, (e) => e.shortcode);
 9 |   const shortcodes = Object.keys(emojiMap).map((s) => `:${s}:`);
10 | 
11 |   if (emojiArray.length < 1) {
12 |     return isString(text) ? <>{text}</> : text;
13 |   }
14 |   const regex = new RegExp(`(${shortcodes.join("|")})`, "i");
15 |   const textParts = String(text).split(regex);
16 | 
17 |   if (textParts.length === 1) {
18 |     return isString(text) ? <>{text}</> : text;
19 |   }
20 | 
21 |   return (
22 |     <>
23 |       {textParts.map((part, index) => {
24 |         if (part.startsWith(":") && part.endsWith(":")) {
25 |           const shortcode = part.slice(1, -1);
26 |           const emoji = emojiMap[shortcode];
27 |           if (!emoji) {
28 |             return part;
29 |           }
30 | 
31 |           return (
32 |             <img
33 |               key={emoji.shortcode + index}
34 |               src={emoji.url}
35 |               alt={emoji.shortcode}
36 |               className="!m-0 inline h-[1em] w-[1em] align-middle"
37 |             />
38 |           );
39 |         }
40 | 
41 |         return part;
42 |       })}
43 |     </>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/textField.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import type { PropsWithChildren } from "react";
 3 | import { useRef } from "react";
 4 | import type { AriaTextFieldOptions } from "react-aria";
 5 | import { useTextField } from "react-aria";
 6 | 
 7 | interface TextFieldProps extends AriaTextFieldOptions<"input"> {
 8 |   className?: string;
 9 | }
10 | 
11 | export function TextInput(props: PropsWithChildren<TextFieldProps>) {
12 |   const { label } = props;
13 |   const ref = useRef<HTMLInputElement>(null);
14 | 
15 |   const { labelProps, inputProps } = useTextField(props, ref);
16 | 
17 |   return (
18 |     <div className={props.className}>
19 |       <label {...labelProps} className="custom-prose">
20 |         {label}
21 |       </label>
22 |       <input
23 |         {...inputProps}
24 |         ref={ref}
25 |         className={clsx(
26 |           "rounded-md bg-neutral-200 px-2 py-1 text-base dark:bg-neutral-700",
27 |           "border-2 border-transparent outline-none",
28 |           "focus:border-2 focus:border-violet-500",
29 |           inputProps.disabled && "opacity-50",
30 |         )}
31 |       />
32 |       {/* {props.errorMessage && props.validationState === "invalid" && (
33 |         <div {...errorMessageProps} style={{ color: "red", fontSize: 12 }}>
34 |           {props.errorMessage}
35 |         </div>
36 |       )} */}
37 |       {props.children}
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/radioGroup.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import type { PropsWithChildren } from "react";
 3 | import { createContext, useContext, useRef } from "react";
 4 | import type { AriaButtonProps, AriaRadioGroupProps } from "react-aria";
 5 | import { useRadio, useRadioGroup } from "react-aria";
 6 | import type { RadioGroupState } from "react-stately";
 7 | import { useRadioGroupState } from "react-stately";
 8 | 
 9 | const RadioContext = createContext<RadioGroupState | null>(null);
10 | 
11 | export function RadioGroup(
12 |   props: PropsWithChildren<AriaRadioGroupProps & { className?: string }>,
13 | ) {
14 |   const { label, children } = props;
15 |   const state = useRadioGroupState(props);
16 |   const { labelProps, radioGroupProps } = useRadioGroup(props, state);
17 | 
18 |   return (
19 |     <div
20 |       {...radioGroupProps}
21 |       className={clsx("flex flex-col", props.className)}
22 |     >
23 |       <span {...labelProps}>{label}</span>
24 |       <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export function Radio(props: AriaButtonProps<"input"> & { value: string }) {
30 |   const { children } = props;
31 |   const state = useContext(RadioContext);
32 |   const ref = useRef(null);
33 |   const { inputProps } = useRadio(props, state as RadioGroupState, ref);
34 | 
35 |   return (
36 |     <label>
37 |       <input type="checkbox" {...inputProps} ref={ref} /> {children}
38 |     </label>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/helpers/mastodonContext.tsx:
--------------------------------------------------------------------------------
 1 | import type { mastodon } from "masto";
 2 | import { createRestAPIClient } from "masto";
 3 | import type { PropsWithChildren } from "react";
 4 | import { createContext, useContext, useEffect, useMemo, useState } from "react";
 5 | 
 6 | import {
 7 |   useAccessToken,
 8 |   useAccountId,
 9 |   useInstanceUrl,
10 | } from "../store/selectors";
11 | 
12 | const MastodonContext = createContext<{
13 |   client: mastodon.rest.Client | undefined;
14 |   accountId: string | null;
15 | }>({ client: undefined, accountId: null });
16 | 
17 | export const MastodonProvider = (props: PropsWithChildren<object>) => {
18 |   const accessToken = useAccessToken();
19 |   const accountId = useAccountId();
20 |   const instanceUrl = useInstanceUrl();
21 |   const [masto, setMasto] = useState<mastodon.rest.Client | undefined>();
22 | 
23 |   useEffect(() => {
24 |     if (!accessToken || !instanceUrl) {
25 |       return;
26 |     }
27 | 
28 |     const mastoClient = createRestAPIClient({
29 |       url: instanceUrl,
30 |       accessToken: accessToken,
31 |     });
32 |     setMasto(mastoClient);
33 |   }, [accessToken, instanceUrl]);
34 | 
35 |   const value = useMemo(() => {
36 |     return {
37 |       client: masto,
38 |       accountId: accountId || null,
39 |     };
40 |   }, [accountId, masto]);
41 | 
42 |   return (
43 |     <MastodonContext.Provider value={value}>
44 |       {props.children}
45 |     </MastodonContext.Provider>
46 |   );
47 | };
48 | 
49 | export function useMastodon() {
50 |   return useContext(MastodonContext);
51 | }
52 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   body {
 7 |     @apply bg-gray-200 font-mono accent-violet-800 dark:bg-neutral-800 lg:dark:bg-gray-500;
 8 |   }
 9 |   h1 {
10 |     @apply text-xl font-bold text-gray-800 lg:text-2xl;
11 |   }
12 | 
13 |   #__next {
14 |     @apply flex h-screen flex-col;
15 |   }
16 | }
17 | 
18 | @layer utilities {
19 |   .text-accentColor {
20 |     @apply text-violet-600;
21 |   }
22 | 
23 |   .custom-prose {
24 |     @apply prose prose-sm dark:prose-invert lg:prose-base;
25 |   }
26 | }
27 | 
28 | /* snowfall: http://pajasevi.github.io/CSSnowflakes/ */
29 | @keyframes snowflakes-fall {
30 |   0% {
31 |     top: -10%;
32 |   }
33 |   100% {
34 |     top: 100%;
35 |   }
36 | }
37 | @keyframes snowflakes-shake {
38 |   0%,
39 |   100% {
40 |     transform: translateX(0);
41 |   }
42 |   50% {
43 |     transform: translateX(80px);
44 |   }
45 | }
46 | 
47 | .snowflake {
48 |   position: fixed;
49 |   top: -10%;
50 |   user-select: none;
51 |   pointer-events: none;
52 |   animation-name: snowflakes-fall, snowflakes-shake;
53 |   animation-duration: 10s, 3s;
54 |   animation-timing-function: linear, ease-in-out;
55 |   animation-iteration-count: infinite, infinite;
56 |   animation-play-state: running, running;
57 | }
58 | .snowflake img {
59 |   width: 36px;
60 |   height: 36px;
61 | }
62 | 
63 | article .invisible {
64 |   display: inline-block;
65 |   font-size: 0;
66 |   height: 0;
67 |   line-height: 0;
68 |   position: absolute;
69 |   width: 0;
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/blurhashImage.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import { useEffect, useRef, useState } from "react";
 3 | import { BlurhashCanvas } from "react-blurhash";
 4 | 
 5 | interface BlurhashImageProps {
 6 |   imgClassname?: string;
 7 |   canvasClassname?: string;
 8 |   src: string;
 9 |   width?: number;
10 |   height?: number;
11 |   hash: string;
12 |   description?: string;
13 |   isHidden?: boolean;
14 |   isUncached?: boolean;
15 | }
16 | 
17 | export function BlurhashImage(props: BlurhashImageProps) {
18 |   const [isLoaded, setIsLoaded] = useState(false);
19 |   const imgRef = useRef<HTMLImageElement>(null);
20 | 
21 |   useEffect(() => {
22 |     if (imgRef.current?.complete) {
23 |       setIsLoaded(true);
24 |     }
25 |   }, []);
26 | 
27 |   return (
28 |     <>
29 |       <img
30 |         ref={imgRef}
31 |         src={props.isHidden || props.isUncached ? "" : props.src}
32 |         className={clsx(
33 |           props.imgClassname,
34 |           {
35 |             "opacity-0": !isLoaded || props.isHidden || props.isUncached,
36 |           },
37 |           "text-[0px]",
38 |         )}
39 |         onLoad={() => setIsLoaded(true)}
40 |         width={props.width || 32}
41 |         height={props.height || 32}
42 |         alt={props.description || ""}
43 |       />
44 |       {!isLoaded && (
45 |         <BlurhashCanvas
46 |           className={props.canvasClassname}
47 |           hash={props.hash}
48 |           width={props.width || 32}
49 |           height={props.height || 32}
50 |         ></BlurhashCanvas>
51 |       )}
52 |     </>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/reviewerPrompt.tsx:
--------------------------------------------------------------------------------
 1 | import type { PropsWithChildren, ReactNode } from "react";
 2 | 
 3 | import { makeAccountName } from "../helpers/mastodonHelpers";
 4 | import type { TokimekiAccount } from "../store";
 5 | import { renderWithEmoji } from "./emojify";
 6 | import { AnimationState } from "./reviewer";
 7 | 
 8 | export const ReviewerPrompt = (
 9 |   props: PropsWithChildren<{
10 |     animationState: AnimationState;
11 |     account: TokimekiAccount;
12 |     loadingRender: ReactNode;
13 |   }>,
14 | ) => {
15 |   const { animationState, account } = props;
16 |   const accountName = makeAccountName(account);
17 | 
18 |   function renderContent() {
19 |     if (animationState === AnimationState.Keep) {
20 |       return (
21 |         <>
22 |           Glad to hear{" "}
23 |           <strong>{renderWithEmoji(account.emojis, accountName)}</strong>
24 |           &apos;s toots are still important to you.
25 |         </>
26 |       );
27 |     } else if (animationState === AnimationState.Unfollow) {
28 |       return (
29 |         <>
30 |           Great, unfollowed! Let&apos;s thank{" "}
31 |           <strong>{renderWithEmoji(account.emojis, accountName)}</strong> for
32 |           all the toots you&apos;ve enjoyed before.{" "}
33 |         </>
34 |       );
35 |     }
36 | 
37 |     return <>Do their toots still spark joy or feel important to you?</>;
38 |   }
39 | 
40 |   if (animationState === AnimationState.Hidden) {
41 |     return <>{props.loadingRender}</>;
42 |   }
43 | 
44 |   return <div className="custom-prose leading-normal">{renderContent()}</div>;
45 | };
46 | 


--------------------------------------------------------------------------------
/src/helpers/overlayBugWorkaround.tsx:
--------------------------------------------------------------------------------
 1 | import { Fragment, useEffect, useReducer } from "react";
 2 | import type { MenuTriggerState, OverlayTriggerState } from "react-stately";
 3 | 
 4 | /**
 5 |  * Work around a bug that prevents overlay menus from opening
 6 |  *
 7 |  * This hook is a workaround for this weird bug:
 8 |  * https://github.com/adobe/react-spectrum/issues/3517
 9 |  *
10 |  * Since the bug presumably exists somewhere in the interplay between Next.js
11 |  * and React Aria, it is hard for either project to fix. And of course, our glue
12 |  * code might be at fault as well.
13 |  *
14 |  * The bug is that `useOverlayPosition` usually looks at the position of the
15 |  * overlay trigger, and then updates the style properties that it returns with
16 |  * the values needed to position the overlay. However, that update does not
17 |  * happen by itself. Hence, this hook returns an invisible element that you can
18 |  * include in your view, and that will trigger a re-render whenever the menu
19 |  * opens or closes.
20 |  *
21 |  * @param state The OverlayTriggerState controlling your overlay (i.e. whose `isOpen` property you pass to `useOverlayPosition`)
22 |  * @returns An invisible element to include next to your overlay trigger
23 |  */
24 | export const useOverlayBugWorkaround = (
25 |   state: MenuTriggerState | OverlayTriggerState,
26 | ) => {
27 |   const [renderCount, triggerRerender] = useReducer(
28 |     (renders) => renders + 1,
29 |     0,
30 |   );
31 | 
32 |   useEffect(() => {
33 |     // Not doing anything, just triggering a re-render if the menu opens to
34 |     // work around
35 |     // https://github.com/adobe/react-spectrum/issues/3517
36 |     setTimeout(() => triggerRerender());
37 |   }, [state.isOpen]);
38 | 
39 |   // An invisible element that gets re-rendered every time the menu opens
40 |   const elementToRender = (
41 |     <Fragment key={`overlayBugWorkaroundRender${renderCount}`} />
42 |   );
43 |   return elementToRender;
44 | };
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tokimeki-mastodon",
 3 |   "version": "1.3.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "next build",
 7 |     "dev": "next dev",
 8 |     "lint": "eslint .",
 9 |     "start": "next start",
10 |     "typecheck": "tsc -p .",
11 |     "typecheck:watch": "npm run typecheck -- --watch",
12 |     "prepare": "husky"
13 |   },
14 |   "dependencies": {
15 |     "@github/relative-time-element": "^4.4.2",
16 |     "@react-types/shared": "^3.24.1",
17 |     "@types/eslint__js": "^8.42.3",
18 |     "@types/lodash-es": "^4.17.12",
19 |     "@types/zen-observable": "^0.8.7",
20 |     "blurhash": "^2.0.5",
21 |     "clsx": "^2.1.1",
22 |     "globals": "^15.9.0",
23 |     "html-react-parser": "^5.1.12",
24 |     "localforage": "^1.10.0",
25 |     "localforage-observable": "^2.1.1",
26 |     "lodash-es": "^4.17.21",
27 |     "masto": "^6.8.0",
28 |     "next": "^14.2.5",
29 |     "react": "18.3.1",
30 |     "react-aria": "^3.34.1",
31 |     "react-blurhash": "^0.3.0",
32 |     "react-dom": "18.3.1",
33 |     "react-error-boundary": "^4.0.13",
34 |     "react-merge-refs": "^2.1.1",
35 |     "react-stately": "3.32.1",
36 |     "swr": "^2.2.5",
37 |     "typescript-eslint": "^8.1.0",
38 |     "zen-observable": "^0.10.0",
39 |     "zod": "^3.23.8",
40 |     "zustand": "^4.5.5"
41 |   },
42 |   "devDependencies": {
43 |     "@eslint/eslintrc": "^3.1.0",
44 |     "@eslint/js": "^9.9.0",
45 |     "@tailwindcss/typography": "^0.5.14",
46 |     "@types/node": "^22.4.0",
47 |     "@types/react": "^18.3.3",
48 |     "@types/react-dom": "^18.3.0",
49 |     "autoprefixer": "^10.4.20",
50 |     "eslint": "^9.9.0",
51 |     "husky": "^9.1.4",
52 |     "lint-staged": "^15.2.9",
53 |     "postcss": "^8.4.41",
54 |     "postcss-nesting": "^13.0.0",
55 |     "prettier": "^3.3.3",
56 |     "prettier-plugin-tailwindcss": "^0.6.6",
57 |     "tailwindcss": "^3.4.10",
58 |     "typescript": "^5.5.4"
59 |   },
60 |   "ct3aMetadata": {
61 |     "initVersion": "6.11.4"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/htmlReactParserOptions.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import type { Text } from "domhandler";
 3 | import type { DOMNode, HTMLReactParserOptions } from "html-react-parser";
 4 | import { attributesToProps, domToReact, Element } from "html-react-parser";
 5 | import type { mastodon } from "masto";
 6 | import { mergeProps } from "react-aria";
 7 | 
 8 | import { renderWithEmoji } from "./emojify";
 9 | 
10 | interface GetParserOptionsProps {
11 |   emojiArray: mastodon.v1.CustomEmoji[];
12 |   classNames?: {
13 |     p?: string;
14 |     a?: string;
15 |   };
16 | }
17 | export function getParserOptions(options: GetParserOptionsProps) {
18 |   const { emojiArray, classNames } = options;
19 |   const parseOptions: HTMLReactParserOptions = {
20 |     replace: (domNode) => {
21 |       if (domNode.type === "text") {
22 |         return renderWithEmoji(emojiArray, (domNode as Text).data);
23 |       }
24 | 
25 |       if (domNode instanceof Element) {
26 |         if (domNode.tagName === "br") {
27 |           return <br />;
28 |         }
29 |         if (domNode.tagName === "a") {
30 |           const anchorProps = mergeProps(attributesToProps(domNode.attribs), {
31 |             className: clsx(
32 |               "text-blue-500 hover:underline",
33 |               classNames?.a,
34 |               "statuses-link",
35 |             ),
36 |             target: "_blank",
37 |             rel: "noreferrer noopener",
38 |           });
39 |           return (
40 |             <a {...anchorProps}>
41 |               {domToReact(domNode.children as DOMNode[], parseOptions)}
42 |             </a>
43 |           );
44 |         }
45 |         if (domNode.tagName === "p") {
46 |           return (
47 |             <p className={clsx("leading-normal last:mb-0", classNames?.p)}>
48 |               {domToReact(domNode.children as DOMNode[], parseOptions)}
49 |             </p>
50 |           );
51 |         }
52 |       }
53 | 
54 |       return domNode;
55 |     },
56 |   };
57 | 
58 |   return parseOptions;
59 | }
60 | 


--------------------------------------------------------------------------------
/src/helpers/authHelpers.ts:
--------------------------------------------------------------------------------
 1 | import { createRestAPIClient } from "masto";
 2 | 
 3 | import { env } from "../env/client.mjs";
 4 | 
 5 | const OAUTH_SCOPES = [
 6 |   "read:follows",
 7 |   "write:follows",
 8 |   "read:accounts",
 9 |   "read:statuses",
10 |   "read:lists",
11 |   "write:lists",
12 | ].join(" ");
13 | 
14 | export async function registerApplication(instanceURL: string, origin: string) {
15 |   const masto = createRestAPIClient({
16 |     url: instanceURL,
17 |   });
18 | 
19 |   return await masto.v1.apps.create({
20 |     clientName: env.NEXT_PUBLIC_CLIENT_NAME || "",
21 |     redirectUris: `${origin}`,
22 |     scopes: OAUTH_SCOPES,
23 |     website: origin,
24 |   });
25 | }
26 | 
27 | export function getAuthURL(opts: { clientId: string; instanceUrl: string }) {
28 |   const authorizationParams = new URLSearchParams({
29 |     client_id: opts.clientId,
30 |     scope: OAUTH_SCOPES,
31 |     redirect_uri: `${location.origin}`,
32 |     response_type: "code",
33 |   });
34 |   const authorizationURL = `https://${opts.instanceUrl.replace(
35 |     /https?:\/\//,
36 |     "",
37 |   )}/oauth/authorize?${authorizationParams.toString()}`;
38 | 
39 |   return authorizationURL;
40 | }
41 | 
42 | export async function getAccessToken(opts: {
43 |   clientId: string;
44 |   instanceUrl: string;
45 |   clientSecret: string;
46 |   code: string;
47 | }): Promise<{ access_token: string } | null> {
48 |   const params = new URLSearchParams({
49 |     client_id: opts.clientId,
50 |     client_secret: opts.clientSecret,
51 |     redirect_uri: location.origin,
52 |     grant_type: "authorization_code",
53 |     code: opts.code,
54 |     scope: OAUTH_SCOPES,
55 |   });
56 |   const tokenResponse = await fetch(
57 |     `https://${opts.instanceUrl.replace(/https?:\/\//, "")}/oauth/token`,
58 |     {
59 |       method: "POST",
60 |       headers: {
61 |         "Content-Type": "application/x-www-form-urlencoded",
62 |       },
63 |       body: params.toString(),
64 |     },
65 |   );
66 |   const tokenJSON = await tokenResponse.json();
67 |   return tokenJSON;
68 | }
69 | 


--------------------------------------------------------------------------------
/src/components/popover.tsx:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   AriaOverlayProps,
 3 |   AriaPopoverProps,
 4 |   OverlayTriggerProps,
 5 | } from "@react-aria/overlays";
 6 | import { useOverlayTrigger } from "@react-aria/overlays";
 7 | import { DismissButton, Overlay, usePopover } from "@react-aria/overlays";
 8 | import clsx from "clsx";
 9 | import * as React from "react";
10 | import { useRef } from "react";
11 | import type { OverlayTriggerState } from "react-stately";
12 | import { useOverlayTriggerState } from "react-stately";
13 | 
14 | import { useOverlayBugWorkaround } from "../helpers/overlayBugWorkaround";
15 | import { Button } from "./button";
16 | 
17 | interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
18 |   children: React.ReactNode;
19 |   state: OverlayTriggerState;
20 | }
21 | 
22 | export function Popover(props: PopoverProps) {
23 |   const ref = React.useRef<HTMLDivElement>(null);
24 |   const { state, children } = props;
25 | 
26 |   const returnProps = usePopover(
27 |     {
28 |       ...props,
29 |       popoverRef: ref,
30 |     },
31 |     state,
32 |   );
33 | 
34 |   const { popoverProps, underlayProps } = returnProps;
35 | 
36 |   return (
37 |     <Overlay>
38 |       <div {...underlayProps} className="fixed inset-0" />
39 |       <div
40 |         {...popoverProps}
41 |         ref={ref}
42 |         className={clsx(
43 |           "z-10 mt-2 rounded-xl border-2 border-violet-800 shadow-lg shadow-black/30 dark:border-violet-500",
44 |           "bg-white",
45 |           "dark:bg-neutral-800",
46 |         )}
47 |       >
48 |         <DismissButton onDismiss={state.close} />
49 |         {children}
50 |         <DismissButton onDismiss={state.close} />
51 |       </div>
52 |     </Overlay>
53 |   );
54 | }
55 | 
56 | interface PopoverButtonProps extends AriaOverlayProps, OverlayTriggerProps {
57 |   label: string;
58 |   children: React.ReactNode;
59 | }
60 | 
61 | export function PopoverButton(props: PopoverButtonProps) {
62 |   const state = useOverlayTriggerState(props);
63 |   const menuBugWorkaround = useOverlayBugWorkaround(state);
64 | 
65 |   const ref = useRef<HTMLButtonElement>(null);
66 |   const { overlayProps, triggerProps } = useOverlayTrigger(props, state, ref);
67 | 
68 |   return (
69 |     <div>
70 |       {menuBugWorkaround}
71 |       <Button
72 |         {...triggerProps}
73 |         isPressed={state.isOpen}
74 |         ref={ref}
75 |         variant="secondary"
76 |       >
77 |         {props.label}
78 |       </Button>
79 |       {state.isOpen && (
80 |         <Popover
81 |           {...overlayProps}
82 |           state={state}
83 |           triggerRef={ref}
84 |           placement="top"
85 |         >
86 |           {props.children}
87 |         </Popover>
88 |       )}
89 |     </div>
90 |   );
91 | }
92 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
  1 | import { omit, pick } from "lodash-es";
  2 | import type { mastodon } from "masto";
  3 | import { createWithEqualityFn } from "zustand/traditional";
  4 | import { devtools, persist } from "zustand/middleware";
  5 | 
  6 | export enum SortOrders {
  7 |   OLDEST = "oldest",
  8 |   RANDOM = "random",
  9 |   NEWEST = "newest",
 10 | }
 11 | 
 12 | export interface TokimekiAccount {
 13 |   id: string;
 14 |   acct: string;
 15 |   note: string;
 16 |   displayName: string;
 17 |   username: string;
 18 |   url: string;
 19 |   emojis: mastodon.v1.CustomEmoji[];
 20 | }
 21 | 
 22 | export function pickTokimekiAccount(
 23 |   account: mastodon.v1.Account | TokimekiAccount,
 24 | ): TokimekiAccount {
 25 |   return pick(account, [
 26 |     "id",
 27 |     "acct",
 28 |     "note",
 29 |     "displayName",
 30 |     "username",
 31 |     "url",
 32 |     "emojis",
 33 |   ]);
 34 | }
 35 | 
 36 | export interface TokimekiRelationship {
 37 |   followedBy: boolean;
 38 |   note?: string | null;
 39 |   showingReblogs: boolean;
 40 | }
 41 | 
 42 | export interface TokimekiState {
 43 |   clientId?: string;
 44 |   clientSecret?: string;
 45 |   instanceUrl?: string;
 46 |   accessToken?: string;
 47 |   accountId?: string;
 48 |   accountUsername?: string;
 49 |   startCount?: number;
 50 |   unfollowedIds: string[];
 51 |   keptIds: string[];
 52 |   settings: {
 53 |     showBio: boolean;
 54 |     showNote: boolean;
 55 |     showFollowLabel: boolean;
 56 |     sortOrder: SortOrders;
 57 |     skipConfirmation: boolean;
 58 |   };
 59 |   isFetching: boolean;
 60 |   currentAccount?: TokimekiAccount;
 61 |   currentAccountListIds?: string[];
 62 |   currentRelationship?: TokimekiRelationship;
 63 |   nextAccount?: TokimekiAccount;
 64 |   nextAccountListIds?: string[];
 65 |   nextRelationship?: TokimekiRelationship;
 66 |   baseFollowingIds: string[];
 67 |   followingIds: string[];
 68 |   isFinished: boolean;
 69 |   lists: mastodon.v1.List[];
 70 | }
 71 | 
 72 | export const initialPersistedState: TokimekiState = {
 73 |   settings: {
 74 |     sortOrder: SortOrders.OLDEST,
 75 |     showBio: false,
 76 |     showNote: false,
 77 |     showFollowLabel: false,
 78 |     skipConfirmation: false,
 79 |   },
 80 |   keptIds: [],
 81 |   unfollowedIds: [],
 82 |   isFinished: false,
 83 |   isFetching: false,
 84 |   baseFollowingIds: [],
 85 |   followingIds: [],
 86 |   lists: [],
 87 | };
 88 | 
 89 | export const usePersistedStore = createWithEqualityFn<TokimekiState>()(
 90 |   devtools(
 91 |     persist(() => initialPersistedState, {
 92 |       name: "tokimeki-mastodon", // name of the item in the storage (must be unique)
 93 |       partialize(state) {
 94 |         return omit(state, ["actions", "nextAccount", "nextRelationship"]);
 95 |       },
 96 |       version: 3,
 97 |     }),
 98 |     { name: "main-store" },
 99 |   ),
100 | );
101 | 


--------------------------------------------------------------------------------
/src/components/feedWidget.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import type { mastodon } from "masto";
 3 | import { useEffect, useMemo, useState } from "react";
 4 | 
 5 | import { useMastodon } from "../helpers/mastodonContext";
 6 | import type { TokimekiAccount } from "../store";
 7 | import {
 8 |   useCurrentAccountRelationship,
 9 |   useInstanceUrl,
10 | } from "../store/selectors";
11 | import { Status } from "./status";
12 | 
13 | interface FeedWidgetProps {
14 |   account?: TokimekiAccount;
15 |   className?: string;
16 | }
17 | 
18 | export function FeedWidget(props: FeedWidgetProps) {
19 |   const { account } = props;
20 |   const { client } = useMastodon();
21 |   const [isLoading, setIsLoading] = useState(true);
22 |   const currentAccountRelationship = useCurrentAccountRelationship();
23 |   const [statuses, setStatuses] = useState<mastodon.v1.Status[]>([]);
24 |   const instanceUrl = useInstanceUrl();
25 |   const isRemote = useMemo(() => {
26 |     return !(instanceUrl && account?.url.startsWith(instanceUrl));
27 |   }, [account?.url, instanceUrl]);
28 | 
29 |   useEffect(() => {
30 |     setIsLoading(true);
31 |     if (!client || !account || !currentAccountRelationship) {
32 |       return;
33 |     }
34 | 
35 |     const statusesPromise = client.v1.accounts
36 |       .$select(account.id)
37 |       .statuses.list({
38 |         limit: 40,
39 |         excludeReplies: true,
40 |         excludeReblogs: !currentAccountRelationship.showingReblogs,
41 |       });
42 | 
43 |     statusesPromise.then((res) => {
44 |       setStatuses(res.slice(0, 20));
45 |       setIsLoading(false);
46 |     });
47 |   }, [account, client, currentAccountRelationship]);
48 | 
49 |   function renderContent() {
50 |     if (isLoading || !account) {
51 |       return <p className="custom-prose p-2 text-center">Loading...</p>;
52 |     }
53 |     if (statuses.length === 0) {
54 |       if (isRemote) {
55 |         return (
56 |           <p className="custom-prose p-2 text-center">
57 |             Older posts are not available for remote users.
58 |             <br />
59 |             <a href={account.url} target="_blank" rel="noreferrer noopener">
60 |               Browse original profile
61 |             </a>
62 |           </p>
63 |         );
64 |       }
65 | 
66 |       return (
67 |         <p className="custom-prose p-2">
68 |           It seems this user has not posted anything yet!
69 |         </p>
70 |       );
71 |     }
72 | 
73 |     return statuses.map((status) => {
74 |       const statusToUse = status.reblog || status;
75 | 
76 |       return (
77 |         <Status
78 |           key={status.id}
79 |           booster={status.reblog ? status.account : undefined}
80 |           status={statusToUse}
81 |         ></Status>
82 |       );
83 |     });
84 |   }
85 | 
86 |   return (
87 |     <div
88 |       className={clsx(
89 |         "flex min-h-[400px] min-w-full flex-col overflow-y-scroll",
90 |         props.className,
91 |       )}
92 |     >
93 |       {renderContent()}
94 |     </div>
95 |   );
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/button.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from "clsx";
 2 | import type { PropsWithChildren } from "react";
 3 | import { forwardRef } from "react";
 4 | import { useEffect } from "react";
 5 | import { useRef } from "react";
 6 | import type { AriaButtonProps } from "react-aria";
 7 | import { mergeProps, useButton, useFocusRing, useHover } from "react-aria";
 8 | import { mergeRefs } from "react-merge-refs";
 9 | 
10 | interface ButtonProps extends AriaButtonProps<"button"> {
11 |   className?: string;
12 |   variant: "primary" | "secondary" | "monochrome";
13 |   isStatic?: boolean;
14 |   isPressed?: boolean;
15 | }
16 | 
17 | export const Button = forwardRef<
18 |   HTMLButtonElement,
19 |   PropsWithChildren<ButtonProps>
20 | >((props, outerRef) => {
21 |   const ref = useRef<HTMLButtonElement | null>(null);
22 |   const { children, className, isStatic, variant, ...ariaProps } = props;
23 |   const { buttonProps, isPressed: ariaPressed } = useButton(ariaProps, ref);
24 |   const { isFocused } = useFocusRing(ariaProps);
25 |   const { isHovered, hoverProps } = useHover(ariaProps);
26 |   const mergedProps = mergeProps(buttonProps, hoverProps);
27 |   const { disabled } = mergedProps;
28 |   const isPressed = props.isPressed ?? ariaPressed;
29 | 
30 |   const baseClassname = clsx(
31 |     "inline-block rounded-md px-4 py-2 shadow-lg outline-none text-sm lg:text-base",
32 |     (isHovered || isFocused) && !isStatic && " -translate-y-0.5",
33 |     !isStatic && "transition-all duration-200 ease-in-out",
34 |     disabled && "cursor-not-allowed opacity-40",
35 |   );
36 | 
37 |   const variantClassnames: Record<ButtonProps["variant"], string> = {
38 |     primary: clsx(
39 |       "text-white shadow-violet-500/30",
40 |       isPressed ? "bg-violet-800  ring-violet-800 " : "bg-violet-500",
41 |       isHovered && "bg-violet-600 shadow-violet-600/30",
42 |       isFocused && "ring-violet-600",
43 |     ),
44 |     secondary: clsx(
45 |       "bg-white dark:bg-neutral-800 dark:text-violet-500 dark:ring-violet-500 text-violet-800 ring-2 ring-inset ring-violet-800",
46 |       (isHovered || isPressed) && "bg-violet-200 dark:bg-violet-800",
47 |     ),
48 |     monochrome: clsx(
49 |       "bg-black/40 text-white backdrop-blur-sm ",
50 |       isHovered && "bg-black/80",
51 |     ),
52 |   };
53 | 
54 |   // Workaround for react/react-aria #1513
55 |   useEffect(() => {
56 |     ref.current?.addEventListener("touchstart", (event: TouchEvent) => {
57 |       event.preventDefault();
58 |     });
59 |   }, []);
60 | 
61 |   return (
62 |     <button
63 |       {...mergedProps}
64 |       ref={mergeRefs([ref, outerRef])}
65 |       className={clsx(baseClassname, variantClassnames[variant], className)}
66 |     >
67 |       {children}
68 |     </button>
69 |   );
70 | });
71 | Button.displayName = "Button";
72 | 
73 | export function SmallButton(props: PropsWithChildren<ButtonProps>) {
74 |   return (
75 |     <Button
76 |       {...props}
77 |       isStatic
78 |       className={clsx("px-2 py-1 text-sm shadow-none", props.className)}
79 |     />
80 |   );
81 | }
82 | 


--------------------------------------------------------------------------------
/src/store/selectors.ts:
--------------------------------------------------------------------------------
  1 | import { shuffle } from "lodash-es";
  2 | import { useMemo } from "react";
  3 | 
  4 | import { SortOrders, usePersistedStore } from "./index";
  5 | 
  6 | export const useIsFinished = () =>
  7 |   usePersistedStore((state) => state.isFinished);
  8 | export const useAccountId = () => usePersistedStore((state) => state.accountId);
  9 | export const useAccountUsername = () =>
 10 |   usePersistedStore((state) => state.accountUsername);
 11 | export const useKeptIds = () => usePersistedStore((state) => state.keptIds);
 12 | export const useUnfollowedIds = () =>
 13 |   usePersistedStore((state) => state.unfollowedIds);
 14 | export const useSettings = () => usePersistedStore((state) => state.settings);
 15 | export const useStartCount = () =>
 16 |   usePersistedStore((state) => state.startCount || 0);
 17 | export const useInstanceUrl = () =>
 18 |   usePersistedStore((state) => state.instanceUrl?.replace(/\/$/, ""));
 19 | export const useAccessToken = () =>
 20 |   usePersistedStore((state) => state.accessToken);
 21 | export const useOAuthCodeDependencies = () =>
 22 |   usePersistedStore((state) => {
 23 |     return {
 24 |       clientId: state.clientId,
 25 |       clientSecret: state.clientSecret,
 26 |       instanceUrl: state.instanceUrl,
 27 |     };
 28 |   });
 29 | 
 30 | export const useFollowingIds = () =>
 31 |   usePersistedStore((state) => state.followingIds);
 32 | export const useBaseFollowings = () =>
 33 |   usePersistedStore((state) => state.baseFollowingIds);
 34 | export const useFilteredFollowings = () => {
 35 |   const baseFollowings = useFollowingIds();
 36 |   const keptIds = useKeptIds();
 37 |   const unfollowedIds = useUnfollowedIds();
 38 | 
 39 |   return useMemo(
 40 |     () => filterFollowingIds(baseFollowings, keptIds, unfollowedIds),
 41 |     [baseFollowings, keptIds, unfollowedIds],
 42 |   );
 43 | };
 44 | 
 45 | export const useCurrentAccountListIds = () =>
 46 |   usePersistedStore((state) => state.currentAccountListIds);
 47 | export const useCurrentAccountRelationship = () =>
 48 |   usePersistedStore((state) => state.currentRelationship);
 49 | export const useCurrentAccount = () =>
 50 |   usePersistedStore((state) => state.currentAccount);
 51 | export const useCurrentIndex = () => {
 52 |   const currentAccount = useCurrentAccount();
 53 |   const followings = useFollowingIds();
 54 | 
 55 |   if (!currentAccount) {
 56 |     return 0;
 57 |   }
 58 | 
 59 |   return followings.indexOf(currentAccount.id);
 60 | };
 61 | export const useIsFetching = () =>
 62 |   usePersistedStore((state) => state.isFetching);
 63 | export const useKeptAccounts = () => {
 64 |   const baseFollowings = useFollowingIds();
 65 |   const keptIds = useKeptIds();
 66 | 
 67 |   return useMemo(
 68 |     () => baseFollowings.filter((a) => keptIds?.includes(a)),
 69 |     [baseFollowings, keptIds],
 70 |   );
 71 | };
 72 | 
 73 | export const useLists = () => usePersistedStore((state) => state.lists);
 74 | export const useListById = (id: string | undefined) => {
 75 |   return usePersistedStore((state) => state.lists.find((l) => l.id === id));
 76 | };
 77 | 
 78 | /*
 79 |  * Helpers.
 80 |  */
 81 | export function filterFollowingIds(
 82 |   array: string[],
 83 |   keptIds: string[] | null | undefined,
 84 |   unfollowedIds: string[] | null | undefined,
 85 | ) {
 86 |   return array.filter((a) => {
 87 |     return !keptIds?.includes(a) && !unfollowedIds?.includes(a);
 88 |   });
 89 | }
 90 | export function sortFollowings(array: string[], sortOrder: SortOrders) {
 91 |   switch (sortOrder) {
 92 |     case SortOrders.NEWEST: {
 93 |       return array;
 94 |     }
 95 |     case SortOrders.OLDEST: {
 96 |       const newArray = [...array];
 97 |       newArray.reverse();
 98 |       return newArray;
 99 |     }
100 |     case SortOrders.RANDOM: {
101 |       return shuffle([...array]);
102 |     }
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/options.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | 
  3 | import { SortOrders } from "../store";
  4 | import { reorderFollowings, updateSettings } from "../store/actions";
  5 | import { useSettings } from "../store/selectors";
  6 | import { LinkButton } from "./linkButton";
  7 | import { Radio, RadioGroup } from "./radioGroup";
  8 | 
  9 | export function Options() {
 10 |   const { showBio, sortOrder, showFollowLabel, showNote, skipConfirmation } =
 11 |     useSettings();
 12 | 
 13 |   const [showAdvanced, setShowAdvanced] = useState(false);
 14 | 
 15 |   return (
 16 |     <div className="custom-prose w-full">
 17 |       <h3 className="!mt-2">Options</h3>
 18 |       <div>
 19 |         <label>
 20 |           <input
 21 |             type="checkbox"
 22 |             checked={Boolean(showBio)}
 23 |             onChange={() => {
 24 |               updateSettings({
 25 |                 showBio: !showBio,
 26 |               });
 27 |             }}
 28 |           />{" "}
 29 |           <strong>Show account bio</strong> (Recommended: off)
 30 |         </label>
 31 |         <p className="!mt-0">
 32 |           I&apos;ve followed a lot of accounts based on their profile or who
 33 |           they are, but not their actual tweets. Hide their bio so you can
 34 |           evaluate based on content only.
 35 |         </p>
 36 |       </div>
 37 |       <div>
 38 |         <label>
 39 |           <input
 40 |             type="checkbox"
 41 |             checked={Boolean(showNote)}
 42 |             onChange={() => {
 43 |               updateSettings({
 44 |                 showNote: !showNote,
 45 |               });
 46 |             }}
 47 |           />{" "}
 48 |           <strong>Show account notes</strong> (Recommended: off)
 49 |         </label>
 50 |         <p className="!mt-0">
 51 |           Account notes can be useful to remember why you followed someone. Hide
 52 |           their note so you can evaluate based on content only.
 53 |         </p>
 54 |       </div>
 55 |       <div>
 56 |         <label>
 57 |           <input
 58 |             type="checkbox"
 59 |             checked={Boolean(showFollowLabel)}
 60 |             onChange={() => {
 61 |               updateSettings({
 62 |                 showFollowLabel: !showFollowLabel,
 63 |               });
 64 |             }}
 65 |           />{" "}
 66 |           <strong>Show if account follows you</strong> (Recommended: off)
 67 |         </label>
 68 |         <p className="!mt-0">
 69 |           Show a badge indicating whether or not the account follows you.
 70 |         </p>
 71 |       </div>
 72 |       <RadioGroup
 73 |         className="mb-5"
 74 |         label={
 75 |           <>
 76 |             <strong>Select an order to use</strong> (Recommended: Oldest first)
 77 |           </>
 78 |         }
 79 |         value={sortOrder || SortOrders.OLDEST}
 80 |         onChange={(value) => {
 81 |           updateSettings({
 82 |             sortOrder: value as SortOrders,
 83 |           });
 84 |           reorderFollowings(value as SortOrders);
 85 |         }}
 86 |       >
 87 |         <Radio value={SortOrders.OLDEST}>
 88 |           Oldest first, chronological order
 89 |         </Radio>
 90 |         <Radio value={SortOrders.RANDOM}>Random order</Radio>
 91 |         <Radio value={SortOrders.NEWEST}>
 92 |           Newest first, reverse chronological order
 93 |         </Radio>
 94 |       </RadioGroup>
 95 | 
 96 |       {!showAdvanced && (
 97 |         <LinkButton
 98 |           className="text-accentColor"
 99 |           onPress={() => {
100 |             setShowAdvanced(true);
101 |           }}
102 |         >
103 |           Show advanced options...
104 |         </LinkButton>
105 |       )}
106 |       {showAdvanced && (
107 |         <>
108 |           <h5 className="!mt-2">Advanced</h5>
109 |           <div>
110 |             <label>
111 |               <input
112 |                 type="checkbox"
113 |                 checked={Boolean(skipConfirmation)}
114 |                 onChange={() => {
115 |                   updateSettings({
116 |                     skipConfirmation: !skipConfirmation,
117 |                   });
118 |                 }}
119 |               />{" "}
120 |               <strong>Skip confirmation/undo step</strong> (Recommended: off)
121 |             </label>
122 |             <p className="!mt-0">
123 |               Turn this on to skip the confirmation step after you click
124 |               Unfollow/Keep. This will make the process faster, but you
125 |               won&apos;t be able to undo your actions.
126 |             </p>
127 |           </div>
128 |         </>
129 |       )}
130 |     </div>
131 |   );
132 | }
133 | 


--------------------------------------------------------------------------------
/src/components/reviewerFooter.tsx:
--------------------------------------------------------------------------------
  1 | import clsx from "clsx";
  2 | import type { Dispatch, SetStateAction } from "react";
  3 | 
  4 | import { makeAccountName } from "../helpers/mastodonHelpers";
  5 | import type { TokimekiAccount, TokimekiRelationship } from "../store";
  6 | import {
  7 |   useCurrentIndex,
  8 |   useFollowingIds,
  9 |   useInstanceUrl,
 10 |   useListById,
 11 |   useSettings,
 12 | } from "../store/selectors";
 13 | import { SmallButton } from "./button";
 14 | import { renderWithEmoji } from "./emojify";
 15 | import { HtmlRenderer } from "./htmlRendered";
 16 | 
 17 | interface ReviewerFooterProps {
 18 |   account: TokimekiAccount;
 19 |   accountRelationship: TokimekiRelationship | undefined;
 20 |   showBio: boolean;
 21 |   setShowBio: Dispatch<SetStateAction<boolean>>;
 22 |   showNote: boolean;
 23 |   setShowNote: Dispatch<SetStateAction<boolean>>;
 24 |   addedToListId: string | undefined;
 25 | }
 26 | export function ReviewerFooter(props: ReviewerFooterProps) {
 27 |   const {
 28 |     account,
 29 |     accountRelationship,
 30 |     showBio,
 31 |     setShowBio,
 32 |     showNote,
 33 |     setShowNote,
 34 |   } = props;
 35 |   const followingIndex = useCurrentIndex();
 36 |   const followings = useFollowingIds();
 37 |   const { showFollowLabel } = useSettings();
 38 |   const instanceUrl = useInstanceUrl();
 39 |   const list = useListById(props.addedToListId);
 40 | 
 41 |   const renderTitle = () => {
 42 |     if (followingIndex === followings.length - 1) {
 43 |       return "Last but not least, ";
 44 |     }
 45 | 
 46 |     return followingIndex === 0 ? "Starting with " : `#${followingIndex + 1}: `;
 47 |   };
 48 | 
 49 |   const baseBlockClassname =
 50 |     "custom-prose w-full rounded-md border-[1px] border-black/30 p-2 leading-normal";
 51 | 
 52 |   return (
 53 |     <>
 54 |       <div className="flex w-full items-center justify-between">
 55 |         <p className="custom-prose break-words text-left leading-normal">
 56 |           {list && (
 57 |             <>
 58 |               Added to <strong>{list.title}</strong>!
 59 |               <br />
 60 |             </>
 61 |           )}
 62 |           {renderTitle()}
 63 |           {makeAccountName(account) && (
 64 |             <strong className="inline-block">
 65 |               {renderWithEmoji(account.emojis, makeAccountName(account).trim())}
 66 |             </strong>
 67 |           )}{" "}
 68 |           <a
 69 |             href={`${instanceUrl}/@${account.acct}`}
 70 |             target="_blank"
 71 |             className="text-sm text-neutral-400 hover:underline"
 72 |             rel="noreferrer noopener"
 73 |           >
 74 |             @{account.acct}
 75 |           </a>
 76 |           !{" "}
 77 |           {showFollowLabel && accountRelationship?.followedBy && (
 78 |             <span className="inline-block rounded-md bg-violet-500 py-[2px] px-2 align-middle text-[10px] uppercase text-white dark:bg-violet-800">
 79 |               Follows you
 80 |             </span>
 81 |           )}
 82 |         </p>
 83 |       </div>
 84 | 
 85 |       <div className="flex gap-2">
 86 |         {account.note && (
 87 |           <SmallButton
 88 |             variant="secondary"
 89 |             onPress={() => {
 90 |               setShowBio((p) => !p);
 91 |             }}
 92 |           >
 93 |             {showBio ? "Hide bio" : "Show bio"}
 94 |           </SmallButton>
 95 |         )}
 96 |         {accountRelationship?.note && (
 97 |           <SmallButton
 98 |             variant="secondary"
 99 |             onPress={() => {
100 |               setShowNote((p) => !p);
101 |             }}
102 |           >
103 |             {showNote ? "Hide note" : "Show note"}
104 |           </SmallButton>
105 |         )}
106 |       </div>
107 |       {((showBio && account.note) ||
108 |         (showNote && accountRelationship?.note)) && (
109 |         <div className="flex w-full flex-shrink flex-grow flex-col gap-3 overflow-scroll">
110 |           {showBio && account.note && (
111 |             <div
112 |               className={clsx(
113 |                 baseBlockClassname,
114 |                 "border-black/30 bg-black/10 dark:bg-black/50",
115 |               )}
116 |             >
117 |               <strong className="text-sm">Bio:</strong>{" "}
118 |               <HtmlRenderer
119 |                 content={account.note}
120 |                 emojiArray={account.emojis}
121 |                 classNames={{
122 |                   p: "first-of-type:mt-0 text-sm !mt-1 lg:!mt-2",
123 |                 }}
124 |               />
125 |             </div>
126 |           )}
127 |           {showNote && accountRelationship?.note && (
128 |             <div className={clsx(baseBlockClassname, "bg-yellow-400/10")}>
129 |               <strong className="text-sm">Note:</strong>{" "}
130 |               <HtmlRenderer
131 |                 content={accountRelationship.note}
132 |                 emojiArray={account.emojis}
133 |                 classNames={{
134 |                   p: "first-of-type:mt-0 text-sm !mt-1 lg:!mt-2",
135 |                 }}
136 |               />
137 |             </div>
138 |           )}
139 |         </div>
140 |       )}
141 |     </>
142 |   );
143 | }
144 | 


--------------------------------------------------------------------------------
/src/components/menu.tsx:
--------------------------------------------------------------------------------
  1 | import type { AriaMenuProps, MenuTriggerProps } from "@react-types/menu";
  2 | import type { Node } from "@react-types/shared";
  3 | import clsx from "clsx";
  4 | import type { CSSProperties } from "react";
  5 | import React, { useRef } from "react";
  6 | import {
  7 |   useMenu,
  8 |   useMenuItem,
  9 |   useMenuSection,
 10 |   useMenuTrigger,
 11 | } from "react-aria";
 12 | import type { TreeState } from "react-stately";
 13 | import { useMenuTriggerState, useTreeState } from "react-stately";
 14 | 
 15 | import { useOverlayBugWorkaround } from "../helpers/overlayBugWorkaround";
 16 | import { Button } from "./button";
 17 | import { Popover } from "./popover";
 18 | 
 19 | interface MenuButtonProps<T extends object>
 20 |   extends AriaMenuProps<T>,
 21 |     MenuTriggerProps {
 22 |   label: string;
 23 | }
 24 | 
 25 | export function MenuButton<T extends object>(props: MenuButtonProps<T>) {
 26 |   // Create state based on the incoming props
 27 |   const state = useMenuTriggerState(props);
 28 |   const menuBugWorkaround = useOverlayBugWorkaround(state);
 29 | 
 30 |   // Get props for the menu trigger and menu elements
 31 |   const ref = useRef<HTMLButtonElement>(null);
 32 |   const { menuTriggerProps, menuProps } = useMenuTrigger<T>({}, state, ref);
 33 | 
 34 |   return (
 35 |     <div style={{ position: "relative", display: "inline-block" }}>
 36 |       {menuBugWorkaround}
 37 |       <Button
 38 |         {...menuTriggerProps}
 39 |         isPressed={state.isOpen}
 40 |         ref={ref}
 41 |         variant="secondary"
 42 |       >
 43 |         {props.label}
 44 |       </Button>
 45 |       {state.isOpen && (
 46 |         <Popover state={state} triggerRef={ref} placement="top">
 47 |           <Menu
 48 |             {...menuProps}
 49 |             {...props}
 50 |             autoFocus={state.focusStrategy || true}
 51 |             onClose={() => state.close()}
 52 |             style={{
 53 |               minWidth: ref.current?.clientWidth
 54 |                 ? ref.current?.clientWidth + 10
 55 |                 : "",
 56 |             }}
 57 |           />
 58 |         </Popover>
 59 |       )}
 60 |     </div>
 61 |   );
 62 | }
 63 | 
 64 | interface MenuProps<T extends object> extends AriaMenuProps<T> {
 65 |   onClose: () => void;
 66 |   style?: CSSProperties;
 67 | }
 68 | 
 69 | function Menu<T extends object>(props: MenuProps<T>) {
 70 |   // Create state based on the incoming props
 71 |   const state = useTreeState(props);
 72 | 
 73 |   // Get props for the menu element
 74 |   const ref = useRef<HTMLUListElement>(null);
 75 |   const { menuProps } = useMenu(props, state, ref);
 76 | 
 77 |   return (
 78 |     <ul
 79 |       {...menuProps}
 80 |       ref={ref}
 81 |       className="max-w-md focus:outline-none"
 82 |       style={props.style}
 83 |     >
 84 |       {Array.from(state.collection).map((item) => (
 85 |         <MenuSection
 86 |           key={item.key}
 87 |           section={item}
 88 |           state={state}
 89 |           onAction={props.onAction}
 90 |           onClose={props.onClose}
 91 |         />
 92 |       ))}
 93 |     </ul>
 94 |   );
 95 | }
 96 | 
 97 | interface MenuSectionProps<T> {
 98 |   section: Node<T>;
 99 |   state: TreeState<T>;
100 |   onAction?: (key: number | string) => void;
101 |   onClose: () => void;
102 | }
103 | 
104 | function MenuSection<T>({
105 |   section,
106 |   state,
107 |   onAction,
108 |   onClose,
109 | }: MenuSectionProps<T>) {
110 |   const { itemProps, groupProps } = useMenuSection({
111 |     heading: section.rendered,
112 |     "aria-label": section["aria-label"],
113 |   });
114 | 
115 |   return (
116 |     <>
117 |       <li
118 |         {...itemProps}
119 |         className={clsx(
120 |           section.key === state.collection.getFirstKey() && "mt-1",
121 |           section.key !== state.collection.getFirstKey() && "mb-1",
122 |         )}
123 |       >
124 |         <ul {...groupProps}>
125 |           {Array.from(section.childNodes).map((node) => (
126 |             <MenuItem
127 |               key={node.key}
128 |               item={node}
129 |               state={state}
130 |               onAction={onAction}
131 |               onClose={onClose}
132 |             />
133 |           ))}
134 |         </ul>
135 |       </li>
136 |     </>
137 |   );
138 | }
139 | 
140 | interface MenuItemProps<T> {
141 |   item: Node<T>;
142 |   state: TreeState<T>;
143 |   onAction?: (key: string | number) => void;
144 |   onClose: () => void;
145 | }
146 | 
147 | function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
148 |   // Get props for the menu item element
149 |   const ref = React.useRef<HTMLLIElement>(null);
150 |   const { menuItemProps } = useMenuItem(
151 |     {
152 |       key: item.key,
153 |       onAction,
154 |       onClose,
155 |     },
156 |     state,
157 |     ref,
158 |   );
159 | 
160 |   // Handle focus events so we can apply highlighted
161 |   // style to the focused menu item
162 |   const isFocused = state.selectionManager.focusedKey === item.key;
163 | 
164 |   return (
165 |     <li
166 |       {...menuItemProps}
167 |       ref={ref}
168 |       className={clsx(
169 |         "mx-1 truncate rounded-lg px-3 py-2 text-sm capitalize text-violet-800 focus:outline-none dark:text-violet-500",
170 |         isFocused ? "bg-violet-200 dark:bg-violet-800" : "",
171 |       )}
172 |     >
173 |       {item.rendered}
174 |     </li>
175 |   );
176 | }
177 | 


--------------------------------------------------------------------------------
/src/pages/review.tsx:
--------------------------------------------------------------------------------
  1 | import type { NextPage } from "next";
  2 | import { useRouter } from "next/router";
  3 | import { useEffect, useMemo, useState } from "react";
  4 | 
  5 | import { Block } from "../components/block";
  6 | import { Button } from "../components/button";
  7 | import { Finished } from "../components/finished";
  8 | import { LinkButton } from "../components/linkButton";
  9 | import { Options } from "../components/options";
 10 | import { Reviewer } from "../components/reviewer";
 11 | import { MastodonProvider, useMastodon } from "../helpers/mastodonContext";
 12 | import {
 13 |   fetchFollowings,
 14 |   fetchLists,
 15 |   markAsFinished,
 16 |   resetState,
 17 | } from "../store/actions";
 18 | import {
 19 |   useAccountId,
 20 |   useAccountUsername,
 21 |   useFilteredFollowings,
 22 |   useIsFinished,
 23 |   useKeptIds,
 24 |   useStartCount,
 25 |   useUnfollowedIds,
 26 | } from "../store/selectors";
 27 | 
 28 | const Review: NextPage = () => {
 29 |   const [hasMounted, setHasMounted] = useState(false);
 30 | 
 31 |   useEffect(() => {
 32 |     setHasMounted(true);
 33 |   }, []);
 34 | 
 35 |   if (!hasMounted) {
 36 |     return null;
 37 |   }
 38 | 
 39 |   return (
 40 |     <MastodonProvider>
 41 |       <ReviewContent />
 42 |     </MastodonProvider>
 43 |   );
 44 | };
 45 | 
 46 | const ReviewContent = () => {
 47 |   const [isReviewing, setIsReviewing] = useState(false);
 48 |   const router = useRouter();
 49 | 
 50 |   const { client } = useMastodon();
 51 |   const accountId = useAccountId();
 52 |   const accountUsername = useAccountUsername();
 53 |   const keptIds = useKeptIds();
 54 |   const unfollowedIds = useUnfollowedIds();
 55 |   const startCount = useStartCount();
 56 | 
 57 |   const hasProgress = useMemo(
 58 |     () =>
 59 |       Boolean(
 60 |         (unfollowedIds && unfollowedIds.length) || (keptIds && keptIds.length),
 61 |       ),
 62 |     [keptIds, unfollowedIds],
 63 |   );
 64 |   const isFinished = useIsFinished();
 65 |   const filteredFollowings = useFilteredFollowings();
 66 | 
 67 |   useEffect(() => {
 68 |     if (!isReviewing || !client || !accountId) {
 69 |       return;
 70 |     }
 71 | 
 72 |     fetchFollowings(accountId, client);
 73 |     fetchLists(client);
 74 |   }, [accountId, client, isReviewing]);
 75 | 
 76 |   if (isFinished) {
 77 |     return <Finished />;
 78 |   }
 79 | 
 80 |   if (!accountUsername || !accountId) {
 81 |     return (
 82 |       <Block>
 83 |         <p className="custom-prose">Loading...</p>
 84 |       </Block>
 85 |     );
 86 |   }
 87 | 
 88 |   if (isReviewing) {
 89 |     return (
 90 |       <>
 91 |         <LinkButton
 92 |           onPress={() => {
 93 |             setIsReviewing(false);
 94 |           }}
 95 |           position="southeast"
 96 |         >
 97 |           Options
 98 |         </LinkButton>
 99 |         <Reviewer
100 |           onFinished={() => {
101 |             markAsFinished();
102 |           }}
103 |         />
104 |       </>
105 |     );
106 |   }
107 | 
108 |   return (
109 |     <>
110 |       <LinkButton
111 |         position="southeast"
112 |         onPress={() => {
113 |           resetState();
114 |           router.push("/");
115 |         }}
116 |       >
117 |         Log out
118 |       </LinkButton>
119 |       <Block className="inline-flex flex-col items-center justify-center gap-6">
120 |         <h1 className="text-accentColor text-center">
121 |           {hasProgress ? "Hello again," : "Hello"} @{accountUsername}!
122 |           Let&apos;s go through those {startCount} accounts you are following 😤
123 |           {hasProgress && (
124 |             <>
125 |               <br />
126 |               {filteredFollowings.length} to go!
127 |             </>
128 |           )}
129 |         </h1>
130 |         <p className="custom-prose">
131 |           You can&apos;t be expected to do this all at once, do not feel bad if
132 |           you need to take a break. Progress will be saved as you go!
133 |         </p>
134 |         {hasProgress && (
135 |           <p className="custom-prose">
136 |             Keep at it! You started with {startCount} follows. We loaded your
137 |             progress from last time when you kept {(keptIds || []).length}{" "}
138 |             accounts that mattered to you.
139 |             <br />
140 |             <br />
141 |             <strong>
142 |               Let&apos;s get started on the {filteredFollowings.length} accounts
143 |               you have left!
144 |             </strong>
145 |           </p>
146 |         )}
147 | 
148 |         <Options />
149 | 
150 |         <Button
151 |           variant="primary"
152 |           onPress={() => {
153 |             setIsReviewing(true);
154 |           }}
155 |         >
156 |           Start
157 |         </Button>
158 |       </Block>
159 |       <Block className="w-full">
160 |         <div className="custom-prose opacity-60">
161 |           <p className="!m-0">
162 |             Based off{" "}
163 |             <a href="https://tokimeki-unfollow.glitch.me/">Tokimeki Unfollow</a>{" "}
164 |             by <a href="https://tarng.com/">Julius Tarng</a>.
165 |             <br />
166 |             Made by <a href="https://erambert.me">Damien Erambert</a>. Find me
167 |             at{" "}
168 |             <a href="https://social.erambert.me/@eramdam">
169 |               eramdam@erambert.me
170 |             </a>
171 |             !
172 |           </p>
173 |         </div>
174 |       </Block>
175 |     </>
176 |   );
177 | };
178 | 
179 | export default Review;
180 | 


--------------------------------------------------------------------------------
/src/components/reviewerButtons.tsx:
--------------------------------------------------------------------------------
  1 | import { isString } from "lodash-es";
  2 | import { useState } from "react";
  3 | import { Item, Section } from "react-stately";
  4 | 
  5 | import { useMastodon } from "../helpers/mastodonContext";
  6 | import { createList } from "../store/actions";
  7 | import { useCurrentAccountListIds, useLists } from "../store/selectors";
  8 | import { Button, SmallButton } from "./button";
  9 | import { MenuButton } from "./menu";
 10 | import { PopoverButton } from "./popover";
 11 | import { TextInput } from "./textField";
 12 | 
 13 | enum ItemKeysEnum {
 14 |   CREATE_LIST = "create-list",
 15 |   CANCEL = "cancel",
 16 | }
 17 | 
 18 | interface ReviewerButtonsProps {
 19 |   onUnfollowClick: () => void;
 20 |   onKeepClick: () => void;
 21 |   onUndoClick: () => void;
 22 |   onNextClick: () => void;
 23 |   onAddToList: (listId: string) => void;
 24 |   isVisible: boolean;
 25 |   shouldSkipConfirmation: boolean;
 26 |   isFetching: boolean;
 27 | }
 28 | export function ReviewerButtons(props: ReviewerButtonsProps) {
 29 |   const {
 30 |     isVisible,
 31 |     onKeepClick,
 32 |     onNextClick,
 33 |     onUndoClick,
 34 |     onUnfollowClick,
 35 |     onAddToList,
 36 |     shouldSkipConfirmation,
 37 |     isFetching,
 38 |   } = props;
 39 |   const lists = useLists();
 40 |   const currentAccountListIds = useCurrentAccountListIds();
 41 |   const [isCreatingList, setIsCreatingList] = useState(false);
 42 |   const [isAddingToList, setIsAddingTolist] = useState(false);
 43 |   const [listName, setListName] = useState("");
 44 |   const { client } = useMastodon();
 45 | 
 46 |   const renderMenuButton = () => {
 47 |     if (isCreatingList) {
 48 |       return (
 49 |         <PopoverButton type="menu" label="Add to list" isOpen={isCreatingList}>
 50 |           <div className="m-4 mt-2 flex flex-col gap-2">
 51 |             <TextInput
 52 |               label="List name"
 53 |               onChange={setListName}
 54 |               value={listName}
 55 |               className="flex flex-col gap-2"
 56 |             />
 57 |             <SmallButton
 58 |               isStatic
 59 |               variant="primary"
 60 |               onPress={async () => {
 61 |                 if (!client) {
 62 |                   return;
 63 |                 }
 64 |                 await createList(client, listName);
 65 |                 setIsCreatingList(false);
 66 |                 setIsAddingTolist(true);
 67 |                 setListName("");
 68 |               }}
 69 |             >
 70 |               Create list
 71 |             </SmallButton>
 72 |             <SmallButton
 73 |               isStatic
 74 |               variant="secondary"
 75 |               onPress={async () => {
 76 |                 setIsCreatingList(false);
 77 |                 setIsAddingTolist(true);
 78 |                 setListName("");
 79 |               }}
 80 |             >
 81 |               Cancel
 82 |             </SmallButton>
 83 |           </div>
 84 |         </PopoverButton>
 85 |       );
 86 |     }
 87 | 
 88 |     return (
 89 |       <MenuButton
 90 |         label="Add to list"
 91 |         onAction={(key) => {
 92 |           if (key === ItemKeysEnum.CANCEL) {
 93 |             return;
 94 |           }
 95 |           if (key === ItemKeysEnum.CREATE_LIST) {
 96 |             setIsCreatingList(true);
 97 |           } else if (isString(key)) {
 98 |             onAddToList(key);
 99 |             setIsAddingTolist(false);
100 |           }
101 |         }}
102 |         onOpenChange={setIsAddingTolist}
103 |         isOpen={isAddingToList}
104 |       >
105 |         <Section>
106 |           {lists.map((list) => {
107 |             return (
108 |               <Item key={list.id} textValue={list.title}>
109 |                 {list.title}
110 |                 {currentAccountListIds?.includes(list.id) && (
111 |                   <span className="ml-3 align-middle">✅</span>
112 |                 )}
113 |               </Item>
114 |             );
115 |           })}
116 |         </Section>
117 |         <Section>
118 |           <Item key={ItemKeysEnum.CREATE_LIST}>Create new list...</Item>
119 |           <Item key={ItemKeysEnum.CANCEL}>Cancel</Item>
120 |         </Section>
121 |       </MenuButton>
122 |     );
123 |   };
124 | 
125 |   function renderContent() {
126 |     if (isVisible) {
127 |       return (
128 |         <>
129 |           <Button
130 |             variant="secondary"
131 |             onPress={() => onUnfollowClick()}
132 |             isDisabled={isFetching}
133 |           >
134 |             Unfollow
135 |           </Button>
136 |           {renderMenuButton()}
137 |           <Button
138 |             onPress={() => onKeepClick()}
139 |             variant="secondary"
140 |             isDisabled={isFetching}
141 |           >
142 |             Keep
143 |           </Button>
144 |         </>
145 |       );
146 |     }
147 | 
148 |     return (
149 |       <>
150 |         <Button
151 |           variant="secondary"
152 |           onPress={() => onUndoClick()}
153 |           isDisabled={isFetching}
154 |         >
155 |           Undo
156 |         </Button>
157 |         <Button
158 |           onPress={() => onNextClick()}
159 |           variant="secondary"
160 |           isDisabled={isFetching}
161 |         >
162 |           Next
163 |         </Button>
164 |       </>
165 |     );
166 |   }
167 |   if (shouldSkipConfirmation && !isVisible) {
168 |     return null;
169 |   }
170 | 
171 |   return (
172 |     <div className="mt-2 inline-flex w-full justify-center gap-4 lg:-mb-8">
173 |       {renderContent()}
174 |     </div>
175 |   );
176 | }
177 | 


--------------------------------------------------------------------------------
/src/components/finished.tsx:
--------------------------------------------------------------------------------
  1 | import { pick } from "lodash-es";
  2 | import { useRouter } from "next/router";
  3 | import { useMemo, useState } from "react";
  4 | import useSWR from "swr";
  5 | 
  6 | import { useMastodon } from "../helpers/mastodonContext";
  7 | import { resetState } from "../store/actions";
  8 | import {
  9 |   useAccountId,
 10 |   useInstanceUrl,
 11 |   useKeptIds,
 12 |   useStartCount,
 13 | } from "../store/selectors";
 14 | import { Block } from "./block";
 15 | import { Button } from "./button";
 16 | 
 17 | export function Finished() {
 18 |   const [maybeReset, setMaybeReset] = useState(false);
 19 |   const router = useRouter();
 20 |   const keptIdsFromStorage = useKeptIds();
 21 |   const keptIds = useMemo(() => keptIdsFromStorage || [], [keptIdsFromStorage]);
 22 |   const startCount = useStartCount();
 23 |   const instanceUrl = useInstanceUrl();
 24 |   const accountId = useAccountId();
 25 | 
 26 |   const { client } = useMastodon();
 27 |   const { data: avatarsData } = useSWR("pics", async () => {
 28 |     if (!client || !accountId) {
 29 |       return [];
 30 |     }
 31 | 
 32 |     const accounts = await client.v1.accounts
 33 |       .$select(accountId)
 34 |       .following.list({
 35 |         limit: 80,
 36 |       });
 37 |     return accounts.map((a) => pick(a, ["id", "avatar", "displayName"]));
 38 |   });
 39 | 
 40 |   const keptPicsRenders = useMemo(() => {
 41 |     if (!avatarsData) {
 42 |       return null;
 43 |     }
 44 |     return avatarsData.map((pic) => {
 45 |       const delay = Math.random() * 10;
 46 |       return (
 47 |         <div
 48 |           className="snowflake overflow-hidden rounded-full bg-white shadow-lg"
 49 |           key={pic.id}
 50 |           style={{
 51 |             left: `${Math.random() * 110 - 10}%`,
 52 |             animationDelay: `${delay}s, ${delay - Math.random() * 3}s`,
 53 |             zIndex: `${Math.random() > 0.5 ? 1 : -1}`,
 54 |           }}
 55 |         >
 56 |           <img src={pic.avatar} alt={pic.displayName} />
 57 |         </div>
 58 |       );
 59 |     });
 60 |   }, [avatarsData]);
 61 | 
 62 |   const renderFinishedFooter = () => {
 63 |     if (maybeReset) {
 64 |       return (
 65 |         <Block className="mt-0 flex flex-shrink-0 flex-col items-start lg:w-3/4">
 66 |           <p className="custom-prose leading-normal">
 67 |             Wanna do it again with your current follows? <br />
 68 |             <br />
 69 |             This will reset your progress data and start over. Then, it will log
 70 |             you out so you can log in again and start over fresh!
 71 |           </p>
 72 |           <div className="mt-2 inline-flex w-full justify-center gap-4 lg:-mb-8">
 73 |             <Button
 74 |               variant="secondary"
 75 |               onPress={async () => {
 76 |                 setMaybeReset(false);
 77 |               }}
 78 |             >
 79 |               Nevermind
 80 |             </Button>
 81 |             <Button
 82 |               onPress={() => {
 83 |                 resetState();
 84 |                 router.push("/");
 85 |               }}
 86 |               variant="secondary"
 87 |             >
 88 |               Reset & Log out
 89 |             </Button>
 90 |           </div>
 91 |         </Block>
 92 |       );
 93 |     }
 94 | 
 95 |     return (
 96 |       <Block className="mt-0 flex flex-shrink-0 flex-col items-start lg:w-3/4">
 97 |         <p className="custom-prose leading-normal">
 98 |           Wow, you&apos;ve done it — amazing! Hope you enjoy your new feed. Come
 99 |           back if you ever feel like it&apos;s getting out of control again.{" "}
100 |           <br />
101 |           <br />— <a href="https://octodon.social/@eramdam">@Eramdam</a>
102 |         </p>
103 |         <div className="mt-2 inline-flex w-full justify-center gap-4 lg:-mb-8">
104 |           <Button
105 |             variant="secondary"
106 |             onPress={async () => {
107 |               const text =
108 |                 "✨I just konmari'd my Mastodon feed!✨\n\n" +
109 |                 `Started with ${startCount} follows and unfollowed ${
110 |                   startCount - keptIds.length
111 |                 }` +
112 |                 ` using Tokimeki Unfollow\n${window.origin}`;
113 | 
114 |               window.open(
115 |                 `${instanceUrl}/share?text=${encodeURIComponent(text)}`,
116 |               );
117 |             }}
118 |           >
119 |             Post
120 |           </Button>
121 |           <Button
122 |             onPress={() => {
123 |               setMaybeReset(true);
124 |             }}
125 |             variant="secondary"
126 |           >
127 |             Do it again?
128 |           </Button>
129 |         </div>
130 |       </Block>
131 |     );
132 |   };
133 | 
134 |   return (
135 |     <div className="flex max-h-full flex-1 flex-shrink flex-col items-center">
136 |       {keptPicsRenders}
137 |       <div className="w-full flex-1 lg:w-auto">
138 |         <Block className="custom-prose">
139 |           <h1 className="text-accentColor text-center">Tokimeki Complete!</h1>
140 | 
141 |           <div className="flex flex-col gap-2">
142 |             <div className="opacity-60">Results</div>
143 |             <div className="flex">
144 |               <span className="flex-1">Starting follows</span>
145 |               <span>{startCount}</span>
146 |             </div>
147 |             <div className="flex">
148 |               <span className="flex-1">Unfollowed</span>
149 |               <span className="text-red-500">
150 |                 {keptIds.length - startCount}
151 |               </span>
152 |             </div>
153 |             <hr className="my-4" />
154 |             <div className="flex">
155 |               <span className="flex-1">Now following</span>
156 |               <span className="text-accentColor">{keptIds.length}</span>
157 |             </div>
158 |           </div>
159 |         </Block>
160 |       </div>
161 |       {renderFinishedFooter()}
162 |     </div>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/src/components/status.tsx:
--------------------------------------------------------------------------------
  1 | import "@github/relative-time-element";
  2 | 
  3 | import clsx from "clsx";
  4 | import { compact } from "lodash-es";
  5 | import type { mastodon } from "masto";
  6 | import { useRef, useState } from "react";
  7 | import { useButton } from "react-aria";
  8 | 
  9 | import { isElement } from "../helpers/domHelpers";
 10 | import { makeAccountName } from "../helpers/mastodonHelpers";
 11 | import { BlurhashImage } from "./blurhashImage";
 12 | import { SmallButton } from "./button";
 13 | import { renderWithEmoji } from "./emojify";
 14 | import { HtmlRenderer } from "./htmlRendered";
 15 | 
 16 | interface StatusProps {
 17 |   status: mastodon.v1.Status;
 18 |   booster?: mastodon.v1.Account;
 19 | }
 20 | 
 21 | export function Status(props: StatusProps) {
 22 |   const { booster, status } = props;
 23 | 
 24 |   const initialIsCollapsed = !!status.spoilerText;
 25 |   const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed);
 26 |   const [areMediaHidden, setAreMediaHidden] = useState(
 27 |     status.sensitive || initialIsCollapsed,
 28 |   );
 29 |   const mediaWrapperRef = useRef<HTMLDivElement | null>(null);
 30 |   const { buttonProps } = useButton(
 31 |     {
 32 |       onPress: () => {
 33 |         setAreMediaHidden(false);
 34 |       },
 35 |     },
 36 |     mediaWrapperRef,
 37 |   );
 38 |   const hasUncachedMedia = status.mediaAttachments.some(
 39 |     (m) => m.type === "unknown",
 40 |   );
 41 |   const renderMediaText = () => {
 42 |     if (hasUncachedMedia) {
 43 |       return "Not available";
 44 |     }
 45 | 
 46 |     return areMediaHidden ? "Sensitive content" : "Hide";
 47 |   };
 48 | 
 49 |   const eligibleMedia = status.mediaAttachments.filter((m) => m.blurhash);
 50 |   const mediaRenders = compact(
 51 |     eligibleMedia.map((m) => {
 52 |       if (!m.blurhash) {
 53 |         return null;
 54 |       }
 55 | 
 56 |       const isUncached = m.type === "unknown";
 57 | 
 58 |       return (
 59 |         <div
 60 |           key={m.id}
 61 |           className="relative w-full overflow-hidden rounded-md object-cover"
 62 |         >
 63 |           <BlurhashImage
 64 |             isUncached={isUncached}
 65 |             isHidden={areMediaHidden}
 66 |             imgClassname="relative top-0 left-0 h-full w-full object-cover z-10"
 67 |             canvasClassname="absolute top-0 left-0 h-full w-full object-cover"
 68 |             width={m.meta?.small?.width}
 69 |             height={m.meta?.small?.height}
 70 |             description={m.description || ""}
 71 |             src={m.previewUrl}
 72 |             hash={m.blurhash}
 73 |           ></BlurhashImage>
 74 |         </div>
 75 |       );
 76 |     }),
 77 |   );
 78 | 
 79 |   return (
 80 |     <article
 81 |       role="article"
 82 |       onClickCapture={(e) => {
 83 |         if (!status.url) {
 84 |           return;
 85 |         }
 86 | 
 87 |         if (isElement(e.target)) {
 88 |           if (e.target.matches("img")) {
 89 |             return;
 90 |           }
 91 |           if (e.target.closest("button, a")) {
 92 |             return;
 93 |           }
 94 | 
 95 |           window.open(status.url, "_blank", "noopener,noreferrer");
 96 |         }
 97 |       }}
 98 |       className="relative cursor-pointer border-b-[1px] border-neutral-300 p-2 font-sans no-underline last:border-b-0 hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-white/5"
 99 |     >
100 |       {booster && (
101 |         <div className="text-xs text-neutral-500 dark:text-neutral-400">
102 |           🔁 {makeAccountName(booster)} boosted
103 |         </div>
104 |       )}
105 |       <div className={clsx("flex items-center gap-3", booster && "pt-2")}>
106 |         <div className="relative">
107 |           <img
108 |             alt={makeAccountName(status.account)}
109 |             src={status.account.avatar}
110 |             className="-mt-2 h-8 w-8 rounded-md bg-white"
111 |           />
112 |           {booster && (
113 |             <img
114 |               alt={makeAccountName(booster)}
115 |               src={booster.avatar}
116 |               className="absolute -bottom-2 -right-2 -mt-2 h-6 w-6 rounded-md border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800"
117 |             />
118 |           )}
119 |         </div>
120 | 
121 |         <div className="mb-2 flex flex-col truncate dark:text-neutral-200">
122 |           <span className="truncate text-base leading-tight">
123 |             {renderWithEmoji(
124 |               status.account.emojis,
125 |               makeAccountName(status.account),
126 |             )}
127 |           </span>
128 |           <span className="truncate text-xs leading-tight">
129 |             {status.account.acct}
130 |           </span>
131 |         </div>
132 | 
133 |         <div className="flex-1 flex-shrink"></div>
134 | 
135 |         <div className="self-start">
136 |           <relative-time
137 |             // @ts-expect-error - relative-time-element is not typed properly
138 |             class="text-xs leading-normal dark:text-neutral-400"
139 |             datetime={status.createdAt}
140 |             tense="past"
141 |             format="relative"
142 |             formatStyle="narrow"
143 |           ></relative-time>
144 |         </div>
145 |       </div>
146 |       {initialIsCollapsed && (
147 |         <SmallButton
148 |           variant="secondary"
149 |           className="mb-2"
150 |           onPress={() => {
151 |             setIsCollapsed((p) => !p);
152 |           }}
153 |         >
154 |           {status.spoilerText} {isCollapsed ? "➕" : "➖"}
155 |         </SmallButton>
156 |       )}
157 |       {(!isCollapsed && (
158 |         <div className="text-sm dark:text-neutral-100">
159 |           <HtmlRenderer content={status.content} emojiArray={status.emojis} />
160 |         </div>
161 |       )) ||
162 |         null}
163 |       {(mediaRenders.length && (
164 |         <div
165 |           className="relative mt-4 mb-2 flex gap-1"
166 |           {...buttonProps}
167 |           ref={mediaWrapperRef}
168 |         >
169 |           <SmallButton
170 |             variant="monochrome"
171 |             className={clsx(
172 |               "absolute",
173 |               (areMediaHidden || hasUncachedMedia) &&
174 |                 "top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2",
175 |               !areMediaHidden && !hasUncachedMedia && "top-1 left-1 z-20",
176 |             )}
177 |             onPress={() => {
178 |               if (hasUncachedMedia) {
179 |                 return;
180 |               }
181 |               setAreMediaHidden((p) => !p);
182 |             }}
183 |           >
184 |             {renderMediaText()}
185 |           </SmallButton>
186 |           {mediaRenders}
187 |         </div>
188 |       )) ||
189 |         null}
190 |     </article>
191 |   );
192 | }
193 | 


--------------------------------------------------------------------------------
/src/components/reviewer.tsx:
--------------------------------------------------------------------------------
  1 | import clsx from "clsx";
  2 | import { compact } from "lodash-es";
  3 | import { useState } from "react";
  4 | 
  5 | import { delayAsync } from "../helpers/asyncHelpers";
  6 | import { useMastodon } from "../helpers/mastodonContext";
  7 | import {
  8 |   goToNextAccount,
  9 |   keepAccount,
 10 |   unfollowAccount,
 11 | } from "../store/actions";
 12 | import {
 13 |   useCurrentAccount,
 14 |   useCurrentAccountRelationship,
 15 |   useFilteredFollowings,
 16 |   useFollowingIds,
 17 |   useSettings,
 18 | } from "../store/selectors";
 19 | import { Block } from "./block";
 20 | import { FeedWidget } from "./feedWidget";
 21 | import { FollowingsLoadingIndicator } from "./followingsLoadingIndicator";
 22 | import { ReviewerButtons } from "./reviewerButtons";
 23 | import { ReviewerFooter } from "./reviewerFooter";
 24 | import { ReviewerPrompt } from "./reviewerPrompt";
 25 | 
 26 | export enum AnimationState {
 27 |   Idle,
 28 |   Unfollow,
 29 |   Keep,
 30 |   Hidden,
 31 | }
 32 | 
 33 | interface ReviewerProps {
 34 |   onFinished: () => void;
 35 | }
 36 | 
 37 | export function Reviewer(props: ReviewerProps) {
 38 |   const currentAccount = useCurrentAccount();
 39 |   const currentAccountRelationship = useCurrentAccountRelationship();
 40 |   const filteredFollowings = useFilteredFollowings();
 41 |   const followings = useFollowingIds();
 42 |   const { client } = useMastodon();
 43 | 
 44 |   const [animationState, setAnimated] = useState(AnimationState.Idle);
 45 |   const isVisible = animationState === AnimationState.Idle;
 46 |   const { skipConfirmation } = useSettings();
 47 |   const [isFetching, setIsFetching] = useState(false);
 48 |   const [addedToListId, setAddedToListId] = useState<string | undefined>(
 49 |     undefined,
 50 |   );
 51 | 
 52 |   const onNextClick = async ({
 53 |     forceUnfollow,
 54 |     dontHide,
 55 |   }: {
 56 |     forceUnfollow?: boolean;
 57 |     dontHide?: boolean;
 58 |   }) => {
 59 |     if (!client || !currentAccount || isFetching) {
 60 |       return;
 61 |     }
 62 | 
 63 |     setIsFetching(true);
 64 | 
 65 |     const shouldUnfollow =
 66 |       forceUnfollow ?? animationState === AnimationState.Unfollow;
 67 |     if (currentAccount) {
 68 |       if (shouldUnfollow) {
 69 |         console.log("Will unfollow", currentAccount.acct);
 70 |         if (process.env.NODE_ENV !== "development") {
 71 |           await client.v1.accounts.$select(currentAccount.id).unfollow();
 72 |         }
 73 |         unfollowAccount(currentAccount.id);
 74 |       } else {
 75 |         keepAccount(currentAccount.id);
 76 |       }
 77 |     }
 78 | 
 79 |     if (!dontHide) {
 80 |       setAnimated(AnimationState.Hidden);
 81 |     }
 82 | 
 83 |     if (
 84 |       filteredFollowings.length < 1 ||
 85 |       (currentAccount &&
 86 |         currentAccount.id === followings[followings.length - 1])
 87 |     ) {
 88 |       setIsFetching(false);
 89 |       props.onFinished();
 90 |       return;
 91 |     }
 92 | 
 93 |     setAddedToListId(undefined);
 94 |     setAnimated(AnimationState.Idle);
 95 |     await goToNextAccount(client, currentAccount);
 96 |     setIsFetching(false);
 97 |   };
 98 | 
 99 |   const onUndoClick = () => setAnimated(AnimationState.Idle);
100 |   const onUnfollowClick = async () => {
101 |     if (skipConfirmation) {
102 |       setAnimated(AnimationState.Hidden);
103 |       await delayAsync(100);
104 |       onNextClick({ forceUnfollow: true, dontHide: true });
105 |     } else {
106 |       setAnimated(AnimationState.Unfollow);
107 |     }
108 |   };
109 |   const onKeepClick = async () => {
110 |     if (skipConfirmation) {
111 |       setAnimated(AnimationState.Hidden);
112 |       await delayAsync(100);
113 |       onNextClick({ forceUnfollow: false, dontHide: true });
114 |     } else {
115 |       setAnimated(AnimationState.Keep);
116 |     }
117 |   };
118 |   const onAddToList = async (listId: string) => {
119 |     if (!client) {
120 |       return;
121 |     }
122 |     await client.v1.lists.$select(listId).accounts.create({
123 |       accountIds: compact([currentAccount?.id ?? ""]),
124 |     });
125 |     setAddedToListId(listId);
126 |   };
127 | 
128 |   const { showBio: initialShowBio, showNote: initialShowNote } = useSettings();
129 |   const [showBio, setShowBio] = useState(initialShowBio);
130 |   const [showNote, setShowNote] = useState(initialShowNote);
131 | 
132 |   if (followings?.length === 0) {
133 |     return <FollowingsLoadingIndicator />;
134 |   }
135 | 
136 |   const loadingRender = (
137 |     <span className="custom-prose min-h-[100px]">Loading...</span>
138 |   );
139 | 
140 |   return (
141 |     <div className="flex max-h-full flex-1 flex-shrink flex-col items-center">
142 |       <Block
143 |         className={clsx(
144 |           "relative m-auto inline-flex flex-1 flex-shrink overflow-hidden !p-0",
145 |           "w-full lg:w-[400px]",
146 |           "transition-all duration-[250ms] ease-in-out",
147 |           animationState !== AnimationState.Idle && "opacity-0",
148 |           animationState === AnimationState.Hidden && "scale-0 opacity-0",
149 |           animationState === AnimationState.Idle && "scale-1 opacity-100",
150 |           animationState === AnimationState.Keep &&
151 |             "translate-x-[20%] translate-y-[200px] rotate-[10deg] scale-0 opacity-0",
152 |           animationState === AnimationState.Unfollow &&
153 |             "translate-x-[-20%] translate-y-[200px] rotate-[-10deg] scale-0 opacity-0",
154 |         )}
155 |       >
156 |         <FeedWidget
157 |           key={currentAccount?.id}
158 |           account={currentAccount}
159 |         ></FeedWidget>
160 |       </Block>
161 | 
162 |       <Block
163 |         className={clsx(
164 |           "mt-0 flex max-h-[75vh] flex-shrink-0 flex-col items-start border-t-2 lg:max-h-[50vh] lg:w-3/4 dark:border-t-neutral-600",
165 |         )}
166 |       >
167 |         {currentAccount && currentAccountRelationship ? (
168 |           <>
169 |             {isVisible && (
170 |               <ReviewerFooter
171 |                 showBio={showBio}
172 |                 setShowBio={setShowBio}
173 |                 showNote={showNote}
174 |                 setShowNote={setShowNote}
175 |                 account={currentAccount}
176 |                 accountRelationship={currentAccountRelationship}
177 |                 addedToListId={addedToListId}
178 |               />
179 |             )}
180 |             <ReviewerPrompt
181 |               account={currentAccount}
182 |               animationState={animationState}
183 |               loadingRender={loadingRender}
184 |             />
185 |             <ReviewerButtons
186 |               onUndoClick={onUndoClick}
187 |               onUnfollowClick={onUnfollowClick}
188 |               onKeepClick={onKeepClick}
189 |               onAddToList={onAddToList}
190 |               onNextClick={() => onNextClick({})}
191 |               isVisible={isVisible}
192 |               shouldSkipConfirmation={skipConfirmation}
193 |               isFetching={isFetching}
194 |             />
195 |           </>
196 |         ) : (
197 |           loadingRender
198 |         )}
199 |       </Block>
200 |     </div>
201 |   );
202 | }
203 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import type { ValidationState } from "@react-types/shared";
  2 | import { createRestAPIClient } from "masto";
  3 | import { type NextPage } from "next";
  4 | import Head from "next/head";
  5 | import { useRouter } from "next/router";
  6 | import { useCallback, useEffect, useMemo, useState } from "react";
  7 | 
  8 | import packageJson from "../../package.json";
  9 | import { Block } from "../components/block";
 10 | import { Button } from "../components/button";
 11 | import { TextInput } from "../components/textField";
 12 | import {
 13 |   getAccessToken,
 14 |   getAuthURL,
 15 |   registerApplication,
 16 | } from "../helpers/authHelpers";
 17 | import { saveAfterOAuthCode, saveLoginCredentials } from "../store/actions";
 18 | import { useAccountId, useOAuthCodeDependencies } from "../store/selectors";
 19 | 
 20 | const Home: NextPage = () => {
 21 |   const [localInstanceUrl, setInstanceDomain] = useState("");
 22 |   const [isLoading, setIsLoading] = useState(false);
 23 |   const router = useRouter();
 24 |   const {
 25 |     clientId,
 26 |     clientSecret,
 27 |     instanceUrl: storedInstanceUrl,
 28 |   } = useOAuthCodeDependencies();
 29 | 
 30 |   const isInstanceValid: ValidationState | undefined = useMemo(() => {
 31 |     try {
 32 |       new URL(localInstanceUrl);
 33 |       return "valid";
 34 |     } catch (_e) {
 35 |       return "invalid";
 36 |     }
 37 |   }, [localInstanceUrl]);
 38 | 
 39 |   const onCode = useCallback(
 40 |     async (code: string) => {
 41 |       setIsLoading(true);
 42 | 
 43 |       if (!clientId || !clientSecret || !storedInstanceUrl) {
 44 |         return;
 45 |       }
 46 | 
 47 |       const accessTokenResponse = await getAccessToken({
 48 |         clientId,
 49 |         clientSecret,
 50 |         code,
 51 |         instanceUrl: storedInstanceUrl,
 52 |       });
 53 | 
 54 |       if (!accessTokenResponse) {
 55 |         return;
 56 |       }
 57 | 
 58 |       const { access_token } = accessTokenResponse;
 59 | 
 60 |       if (!access_token) {
 61 |         return;
 62 |       }
 63 | 
 64 |       const masto = createRestAPIClient({
 65 |         url: storedInstanceUrl,
 66 |         accessToken: access_token,
 67 |         timeout: 30_000,
 68 |       });
 69 |       const account = await masto.v1.accounts.verifyCredentials();
 70 |       saveAfterOAuthCode({
 71 |         accessToken: access_token,
 72 |         account,
 73 |       });
 74 |       router.push("/review");
 75 |     },
 76 |     [clientId, clientSecret, router, storedInstanceUrl],
 77 |   );
 78 | 
 79 |   const account = useAccountId();
 80 | 
 81 |   useEffect(() => {
 82 |     if (account) {
 83 |       router.push("/review");
 84 |       return;
 85 |     }
 86 |     const code = new URLSearchParams(window.location.search).get("code");
 87 | 
 88 |     if (!code) {
 89 |       return;
 90 |     }
 91 | 
 92 |     onCode(code);
 93 |   }, [account, onCode, router]);
 94 | 
 95 |   const onLogin = async () => {
 96 |     if (!isInstanceValid || isLoading) {
 97 |       return;
 98 |     }
 99 | 
100 |     setIsLoading(true);
101 | 
102 |     try {
103 |       const { clientId, clientSecret } = await registerApplication(
104 |         localInstanceUrl.replace(/\/$/, ""),
105 |         window.location.origin,
106 |       );
107 | 
108 |       if (clientId && clientSecret) {
109 |         saveLoginCredentials({
110 |           instanceUrl: localInstanceUrl.replace(/\/$/, ""),
111 |           clientId,
112 |           clientSecret,
113 |         });
114 | 
115 |         location.href = getAuthURL({
116 |           instanceUrl: localInstanceUrl.replace(/\/$/, ""),
117 |           clientId,
118 |         });
119 |       }
120 |     } catch (e) {
121 |       console.error(e);
122 |     }
123 |   };
124 | 
125 |   return (
126 |     <>
127 |       <Block className="flex flex-col items-center justify-center">
128 |         <Head>
129 |           <title>Tokimeki Mastodon</title>
130 |           <meta name="description" content="" />
131 |           <link rel="icon" href="/favicon.png" />
132 |         </Head>
133 |         <h1 className="text-accentColor text-center">
134 |           ✨ Welcome to Tokimeki Mastodon ✨
135 |         </h1>
136 |         <p className="custom-prose">
137 |           Following too many accounts? You&apos;re in the right place!
138 |         </p>
139 |         <p className="custom-prose">
140 |           If you&apos;re like me, you have followed a lot of accounts over the
141 |           years on Mastodon. Some of them date from years ago, you were a
142 |           different human being! Some of them you feel like you *have* to keep
143 |           following, and others you may have outgrown, but you never had the
144 |           energy to clean up your follows.
145 |         </p>
146 |         <form
147 |           onSubmit={(e) => {
148 |             e.preventDefault();
149 |             onLogin();
150 |           }}
151 |           className="my-10 mb-2 flex w-full max-w-lg flex-col gap-5"
152 |         >
153 |           <TextInput
154 |             label="Instance domain"
155 |             placeholder="https://"
156 |             type={"url"}
157 |             className="custom-prose flex flex-col gap-2 text-center"
158 |             value={localInstanceUrl}
159 |             onChange={(value) => {
160 |               setInstanceDomain(
161 |                 value.startsWith("https://") ? value : `https://${value}`,
162 |               );
163 |             }}
164 |             validationState={isInstanceValid || "valid"}
165 |             isDisabled={isLoading}
166 |           ></TextInput>
167 |           <div className="flex justify-center">
168 |             <Button
169 |               variant="primary"
170 |               type="submit"
171 |               onPress={() => {
172 |                 onLogin();
173 |               }}
174 |               isDisabled={isInstanceValid === "invalid" || isLoading}
175 |             >
176 |               {(isLoading && "Loading...") || "Login"}
177 |             </Button>
178 |           </div>
179 |         </form>
180 |         <p className="custom-prose !w-full !max-w-full !text-sm opacity-60">
181 |           This tool uses your Mastodon&apos;s account authorization to fetch
182 |           your followings, their toots and unfollow accounts.
183 |         </p>
184 |       </Block>
185 |       <Block className="lg:py-0">
186 |         <div className="custom-prose !max-w-full !text-sm !leading-relaxed opacity-60">
187 |           <p>
188 |             P.S. Tokimeki is the original word that was translated to
189 |             &quot;spark joy&quot; in English. &quot;Spark joy&quot; doesn&apos;t
190 |             fully capture the meaning, which is why there are all these caveats
191 |             whenever someone explains it, like I&apos;m doing here. Please treat
192 |             this term as inclusive of anything you enjoy or feel is important to
193 |             you. Also, KonMari (TM) is trademark of Marie Kondo, and this tool
194 |             is not affiliated with, nor does it profit off the use of the brand.
195 |           </p>
196 |           <p>
197 |             P.P.S. This tool uses your browser&apos;s local storage (not
198 |             cookies) to store your progress. The code is{" "}
199 |             <a href="https://github.com/eramdam/tokimeki-mastodon">
200 |               open source and hosted on GitHub.
201 |             </a>
202 |           </p>
203 |           <p className="!mb-2">
204 |             Based off{" "}
205 |             <a href="https://tokimeki-unfollow.glitch.me/">Tokimeki Unfollow</a>{" "}
206 |             by <a href="https://tarng.com/">Julius Tarng</a>.
207 |             <br />
208 |             Made by <a href="https://erambert.me">Damien Erambert</a>. Find me
209 |             at{" "}
210 |             <a href="https://social.erambert.me/@eramdam">
211 |               eramdam@erambert.me
212 |             </a>
213 |             !
214 |           </p>
215 |           <small className="inline-block w-full pb-2 text-center">
216 |             Version {packageJson.version}
217 |           </small>
218 |         </div>
219 |       </Block>
220 |     </>
221 |   );
222 | };
223 | 
224 | export default Home;
225 | 


--------------------------------------------------------------------------------
/src/store/actions.ts:
--------------------------------------------------------------------------------
  1 | import { compact, pick, uniq } from "lodash-es";
  2 | import type { mastodon } from "masto";
  3 | 
  4 | import type { SortOrders, TokimekiAccount, TokimekiState } from ".";
  5 | import { pickTokimekiAccount } from ".";
  6 | import { initialPersistedState, usePersistedStore } from ".";
  7 | import { filterFollowingIds, sortFollowings } from "./selectors";
  8 | 
  9 | export function resetState() {
 10 |   return usePersistedStore.setState(() => {
 11 |     return initialPersistedState;
 12 |   }, true);
 13 | }
 14 | 
 15 | export function saveLoginCredentials(payload: {
 16 |   clientId: string;
 17 |   clientSecret: string;
 18 |   instanceUrl: string;
 19 | }): void {
 20 |   usePersistedStore.setState({
 21 |     clientId: payload.clientId,
 22 |     clientSecret: payload.clientSecret,
 23 |     instanceUrl: payload.instanceUrl,
 24 |   });
 25 | }
 26 | 
 27 | export function saveAfterOAuthCode(payload: {
 28 |   accessToken: string;
 29 |   account: mastodon.v1.AccountCredentials;
 30 | }): void {
 31 |   usePersistedStore.setState({
 32 |     accessToken: payload.accessToken,
 33 |     accountId: payload.account.id,
 34 |     accountUsername: payload.account.username,
 35 |     startCount: payload.account.followingCount,
 36 |   });
 37 | }
 38 | 
 39 | export function updateSettings(
 40 |   payload: Partial<TokimekiState["settings"]>,
 41 | ): void {
 42 |   usePersistedStore.setState((state) => ({
 43 |     settings: {
 44 |       ...state.settings,
 45 |       ...payload,
 46 |     },
 47 |   }));
 48 | }
 49 | export function unfollowAccount(accountId: string): void {
 50 |   usePersistedStore.setState((state) => ({
 51 |     unfollowedIds: uniq([...(state.unfollowedIds || []), accountId]),
 52 |   }));
 53 | }
 54 | export function keepAccount(accountId: string): void {
 55 |   usePersistedStore.setState((state) => ({
 56 |     keptIds: uniq([...(state.keptIds || []), accountId]),
 57 |   }));
 58 | }
 59 | export async function fetchFollowings(
 60 |   accountId: string,
 61 |   client: mastodon.rest.Client,
 62 | ) {
 63 |   usePersistedStore.setState({ isFetching: true });
 64 |   const persistedState = usePersistedStore.getState();
 65 | 
 66 |   if (persistedState.baseFollowingIds.length) {
 67 |     const sortedFollowings = sortFollowings(
 68 |       filterFollowingIds(
 69 |         persistedState.baseFollowingIds,
 70 |         persistedState.keptIds,
 71 |         persistedState.unfollowedIds,
 72 |       ),
 73 |       usePersistedStore.getState().settings.sortOrder,
 74 |     );
 75 |     usePersistedStore.setState({
 76 |       currentAccount: undefined,
 77 |       currentAccountListIds: undefined,
 78 |       currentRelationship: undefined,
 79 |       nextAccount: undefined,
 80 |       nextRelationship: undefined,
 81 |       nextAccountListIds: undefined,
 82 |       followingIds: sortedFollowings,
 83 |     });
 84 | 
 85 |     const [firstAccountId, secondAccountId] = sortedFollowings;
 86 |     const accountIdsToFetch = compact([firstAccountId, secondAccountId]);
 87 |     const accountPromises = accountIdsToFetch.map((id) => {
 88 |       return client.v1.accounts.$select(id).fetch();
 89 |     });
 90 |     const relationshipsPromises = client.v1.accounts.relationships.fetch({
 91 |       id: accountIdsToFetch,
 92 |     });
 93 |     const [currentAccount, nextAccount] = await Promise.all(accountPromises);
 94 |     const [currentRelationship, nextRelationship] = await relationshipsPromises;
 95 |     const listPromises = accountIdsToFetch.map((id) => {
 96 |       return client.v1.accounts.$select(id).lists.list();
 97 |     });
 98 |     const [currentAccountListIds, nextAccountListIds] = (
 99 |       await Promise.all(listPromises)
100 |     ).map((listsList) => listsList.map((l) => l.id));
101 | 
102 |     usePersistedStore.setState({
103 |       currentAccount,
104 |       currentRelationship,
105 |       currentAccountListIds,
106 |       nextAccount,
107 |       nextRelationship,
108 |       nextAccountListIds,
109 |     });
110 | 
111 |     return;
112 |   }
113 | 
114 |   const accounts: mastodon.v1.Account[] = [];
115 | 
116 |   if (accounts.length === 0) {
117 |     for await (const followings of client.v1.accounts
118 |       .$select(accountId)
119 |       .following.list({
120 |         limit: 80,
121 |       })) {
122 |       accounts.push(...followings);
123 |     }
124 |   }
125 | 
126 |   const accountIds = accounts.map((a) => a.id);
127 |   const sortedFollowings = sortFollowings(
128 |     accountIds,
129 |     usePersistedStore.getState().settings.sortOrder,
130 |   );
131 | 
132 |   const firstId = sortedFollowings[0] || "";
133 |   const firstAccount = accounts.find((a) => a.id === firstId);
134 |   const secondId = sortedFollowings[1] || "";
135 |   const secondAccount = accounts.find((a) => a.id === secondId);
136 |   const listPromises = [firstId, secondId].map((id) => {
137 |     return client.v1.accounts.$select(id).lists.list();
138 |   });
139 |   const [currentAccountListIds, nextAccountListIds] = (
140 |     await Promise.all(listPromises)
141 |   ).map((listsList) => listsList.map((l) => l.id));
142 | 
143 |   usePersistedStore.setState({
144 |     baseFollowingIds: accountIds,
145 |     followingIds: sortedFollowings,
146 |     currentAccount:
147 |       (firstAccount && pickTokimekiAccount(firstAccount)) || undefined,
148 |     currentAccountListIds,
149 |     nextAccount:
150 |       (secondAccount && pickTokimekiAccount(secondAccount)) || undefined,
151 |     nextAccountListIds,
152 |   });
153 | 
154 |   const relationships = await client.v1.accounts.relationships.fetch({
155 |     id: compact([firstAccount?.id]),
156 |   });
157 |   const currentRelationship = relationships[0]
158 |     ? pick(relationships[0], ["followedBy", "note", "showingReblogs"])
159 |     : undefined;
160 | 
161 |   usePersistedStore.setState({
162 |     isFetching: false,
163 |     currentRelationship,
164 |   });
165 | }
166 | export function reorderFollowings(order: SortOrders): void {
167 |   usePersistedStore.setState((state) => ({
168 |     followingIds: sortFollowings(state.baseFollowingIds, order),
169 |   }));
170 | }
171 | export async function setCurrentAccountEmpty() {
172 |   usePersistedStore.setState({
173 |     currentAccount: undefined,
174 |   });
175 | }
176 | export async function goToNextAccount(
177 |   client: mastodon.rest.Client,
178 |   currentAccount: TokimekiAccount,
179 | ) {
180 |   const { followingIds, nextAccount, nextRelationship } =
181 |     usePersistedStore.getState();
182 | 
183 |   const currentIndex = followingIds.indexOf(currentAccount.id);
184 |   const newAccountId =
185 |     nextAccount?.id ?? (followingIds[currentIndex + 1] || followingIds[0]);
186 |   const newAccount =
187 |     nextAccount ??
188 |     (await client.v1.accounts.$select(newAccountId || "").fetch());
189 |   const relationships = nextRelationship
190 |     ? [nextRelationship]
191 |     : await client.v1.accounts.relationships.fetch({
192 |         id: compact([newAccountId]),
193 |       });
194 |   const currentRelationship = relationships[0]
195 |     ? pick(relationships[0], ["followedBy", "note", "showingReblogs"])
196 |     : undefined;
197 | 
198 |   const currentAccountListIds = (
199 |     await client.v1.accounts.$select(newAccount.id).lists.list()
200 |   ).map((l) => l.id);
201 | 
202 |   usePersistedStore.setState({
203 |     currentAccount: pickTokimekiAccount(newAccount),
204 |     currentRelationship,
205 |     currentAccountListIds,
206 |   });
207 | 
208 |   const nextAccountId = followingIds[currentIndex + 2];
209 | 
210 |   if (!nextAccountId) {
211 |     return;
212 |   }
213 | 
214 |   client.v1.accounts
215 |     .$select(nextAccountId)
216 |     .fetch()
217 |     .then((newNextAccount) => {
218 |       usePersistedStore.setState({
219 |         nextAccount: pickTokimekiAccount(newNextAccount),
220 |       });
221 |     });
222 |   client.v1.accounts.relationships
223 |     .fetch({ id: [nextAccountId] })
224 |     .then((newNextRelationship) => {
225 |       const newNextRelationshipPicked = newNextRelationship[0]
226 |         ? pick(newNextRelationship[0], ["followedBy", "note", "showingReblogs"])
227 |         : undefined;
228 |       usePersistedStore.setState({
229 |         nextRelationship: newNextRelationshipPicked,
230 |       });
231 |     });
232 | }
233 | export function markAsFinished(): void {
234 |   usePersistedStore.setState({ isFinished: true });
235 | }
236 | 
237 | export async function fetchLists(client: mastodon.rest.Client) {
238 |   const lists = await client.v1.lists.list();
239 |   usePersistedStore.setState({ lists });
240 | }
241 | 
242 | export async function createList(client: mastodon.rest.Client, name: string) {
243 |   const newList = await client.v1.lists.create({
244 |     title: name,
245 |   });
246 |   const currentLists = usePersistedStore.getState().lists;
247 |   usePersistedStore.setState({
248 |     lists: [...currentLists, newList],
249 |   });
250 | }
251 | 


--------------------------------------------------------------------------------