├── .github
    └── workflows
    │   └── build.yml
├── .gitignore
├── .million
    └── store.json
├── .prettierrc.mjs
├── .vscode
    └── settings.json
├── debug_proxy.html
├── eslint.config.mjs
├── index.html
├── package.json
├── patches
    └── @tanstack__react-virtual@3.10.9.patch
├── plugins
    ├── css-plugin.js
    └── eslint-recursive-sort.js
├── pnpm-lock.yaml
├── postcss.config.cjs
├── readme.md
├── renovate.json
├── setup-file.ts
├── src
    ├── App.tsx
    ├── assets
    │   └── fonts
    │   │   └── GeistVF.woff2
    ├── atoms
    │   ├── app.ts
    │   ├── context-menu.ts
    │   ├── dom.ts
    │   ├── helper
    │   │   └── setting.ts
    │   ├── route.ts
    │   ├── settings
    │   │   ├── general.ts
    │   │   └── ui.ts
    │   ├── sidebar.ts
    │   └── user.ts
    ├── components
    │   ├── common
    │   │   ├── ErrorElement.tsx
    │   │   ├── LoadRemixAsyncComponent.tsx
    │   │   ├── NotFound.tsx
    │   │   └── ProviderComposer.tsx
    │   ├── layout
    │   │   └── sidebar
    │   │   │   ├── atoms.ts
    │   │   │   └── index.tsx
    │   └── ui
    │   │   ├── avatar
    │   │       └── index.tsx
    │   │   ├── button
    │   │       ├── Button.tsx
    │   │       ├── MotionButton.tsx
    │   │       └── index.ts
    │   │   ├── context-menu
    │   │       ├── context-menu.tsx
    │   │       └── index.ts
    │   │   ├── datetime
    │   │       └── index.tsx
    │   │   ├── divider
    │   │       ├── Divider.tsx
    │   │       ├── PanelSpliter.tsx
    │   │       └── index.ts
    │   │   ├── dropdown-menu
    │   │       └── DropdownMenu.tsx
    │   │   ├── icons
    │   │       └── ActivityType.tsx
    │   │   ├── input
    │   │       ├── Input.tsx
    │   │       ├── TextArea.tsx
    │   │       └── index.ts
    │   │   ├── kbd
    │   │       └── Kbd.tsx
    │   │   ├── loading.tsx
    │   │   ├── markdown
    │   │       └── index.tsx
    │   │   ├── portal
    │   │       ├── index.tsx
    │   │       └── provider.tsx
    │   │   ├── scroll-area
    │   │       ├── ScrollArea.tsx
    │   │       ├── ctx.ts
    │   │       ├── hooks.ts
    │   │       ├── index.module.css
    │   │       └── index.ts
    │   │   ├── tabs
    │   │       └── index.tsx
    │   │   ├── toast
    │   │       └── index.tsx
    │   │   └── tooltip
    │   │       ├── index.tsx
    │   │       └── styles.ts
    ├── database
    │   ├── constants.ts
    │   ├── db.ts
    │   ├── db_schema.ts
    │   ├── global.d.ts
    │   ├── index.ts
    │   ├── schemas
    │   │   ├── base.ts
    │   │   └── index.ts
    │   └── services
    │   │   ├── base.ts
    │   │   ├── issue.ts
    │   │   ├── meta.ts
    │   │   ├── notification.ts
    │   │   ├── pull-request.ts
    │   │   ├── repo-pin.ts
    │   │   ├── repo.ts
    │   │   └── user.ts
    ├── framer-lazy-feature.ts
    ├── global.d.ts
    ├── hooks
    │   ├── biz
    │   │   └── useRouter.ts
    │   └── common
    │   │   ├── index.ts
    │   │   ├── useDark.ts
    │   │   ├── useInputComposition.ts
    │   │   ├── useIsOnline.ts
    │   │   ├── useMeasure.ts
    │   │   ├── usePrevious.ts
    │   │   ├── useRefValue.ts
    │   │   ├── useTitle.ts
    │   │   └── useTypescriptHappyCallback.ts
    ├── initialize
    │   ├── hydrate.ts
    │   ├── index.ts
    │   └── jobs
    │   │   ├── index.ts
    │   │   └── polling.ts
    ├── lib
    │   ├── cn.ts
    │   ├── dev.tsx
    │   ├── dom.ts
    │   ├── gh.ts
    │   ├── i18n.ts
    │   ├── jotai.ts
    │   ├── log.ts
    │   ├── ns.ts
    │   ├── octokit.ts
    │   ├── parser.ts
    │   ├── query-client.ts
    │   ├── route-builder.ts
    │   └── utils.ts
    ├── main.tsx
    ├── modules
    │   └── notification
    │   │   ├── IssueDetail.tsx
    │   │   ├── NotificationItem.tsx
    │   │   ├── PullRequestDetail.tsx
    │   │   ├── atom.ts
    │   │   ├── list.tsx
    │   │   └── peek.tsx
    ├── pages
    │   └── (main)
    │   │   ├── index.tsx
    │   │   ├── layout.tsx
    │   │   └── notifications
    │   │       ├── (type)
    │   │           ├── [repo].tsx
    │   │           └── all.tsx
    │   │       └── layout.tsx
    ├── providers
    │   ├── context-menu-provider.tsx
    │   ├── root-providers.tsx
    │   ├── setting-sync.tsx
    │   └── stable-router-provider.tsx
    ├── router.tsx
    ├── scan.ts
    ├── store
    │   ├── issue
    │   │   ├── hooks.ts
    │   │   └── store.ts
    │   ├── notification
    │   │   ├── helper.ts
    │   │   ├── hooks.ts
    │   │   ├── selectors.ts
    │   │   └── store.ts
    │   ├── pull-request
    │   │   ├── hooks.ts
    │   │   └── store.ts
    │   ├── repo-pin
    │   │   ├── getters.ts
    │   │   ├── hooks.ts
    │   │   └── store.ts
    │   ├── repo
    │   │   ├── getters.ts
    │   │   ├── hooks.ts
    │   │   ├── selectors.ts
    │   │   └── store.ts
    │   └── utils
    │   │   ├── helper.test.ts
    │   │   ├── helper.ts
    │   │   └── queue.ts
    ├── styles
    │   ├── index.css
    │   ├── layer.css
    │   ├── tailwind.css
    │   └── theme.css
    └── vite-env.d.ts
├── tailwind.config.ts
├── todo.md
├── tsconfig.json
├── vercel.json
├── vite.config.ts
└── vitest.config.ts


/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Build
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [main, master]
 9 |   pull_request:
10 |     branches: [main, master]
11 | 
12 | jobs:
13 |   build:
14 |     runs-on: ubuntu-latest
15 | 
16 |     strategy:
17 |       matrix:
18 |         node-version: [20.x]
19 | 
20 |     steps:
21 |       - uses: actions/checkout@v4
22 |       - name: Use Node.js ${{ matrix.node-version }}
23 |         uses: actions/setup-node@v4
24 |         with:
25 |           node-version: ${{ matrix.node-version }}
26 | 
27 |       - name: Cache pnpm modules
28 |         uses: actions/cache@v4
29 |         env:
30 |           cache-name: cache-pnpm-modules
31 |         with:
32 |           path: ~/.pnpm-store
33 |           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
34 |           restore-keys: |
35 |             ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-
36 | 
37 |       - name: Setup pnpm
38 |         uses: pnpm/action-setup@v4
39 |         with:
40 |           run_install: true
41 |       - run: pnpm run build
42 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | 
7 | # Million Lint
8 | .million
9 | 


--------------------------------------------------------------------------------
/.prettierrc.mjs:
--------------------------------------------------------------------------------
1 | import { factory } from '@innei/prettier'
2 | 
3 | export default factory({
4 |   importSort: false,
5 | })
6 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.formatOnSave": true,
 3 |   "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
 4 |     "editor.codeActionsOnSave": {
 5 |       "source.fixAll.eslint": "explicit"
 6 |     }
 7 |   },
 8 |   // If you do not want to autofix some rules on save
 9 |   // You can put this in your user settings or workspace settings
10 |   "eslint.codeActionsOnSave.rules": [
11 |     "!unused-imports/no-unused-imports",
12 |     "*"
13 |   ],
14 | 
15 |   // If you want to silent stylistic rules
16 |   // You can put this in your user settings or workspace settings
17 |   "eslint.rules.customizations": [
18 |     { "rule": "@stylistic/*", "severity": "off", "fixable": true },
19 |     { "rule": "antfu/consistent-list-newline", "severity": "off" },
20 |     { "rule": "hyoban/jsx-attribute-spacing", "severity": "off" },
21 |     { "rule": "simple-import-sort/*", "severity": "off" },
22 |     { "rule": "unused-imports/no-unused-imports", "severity": "off" }
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/debug_proxy.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Debug Proxy</title>
 5 | 
 6 |     <script type="module">
 7 |       globalThis['__DEBUG_PROXY__'] = true
 8 | 
 9 |       const searchParams = new URLSearchParams(window.location.search)
10 |       const debugHost = searchParams.get('debug-host')
11 | 
12 |       const resetSessionStorage = () => {
13 |         sessionStorage.removeItem('debug-host')
14 |       }
15 | 
16 |       const resetParams = searchParams.get('reset')
17 |       if (resetParams) {
18 |         resetSessionStorage()
19 |       }
20 | 
21 |       const debugHostInSessionStorage = sessionStorage.getItem('debug-host')
22 | 
23 |       const host =
24 |         debugHost || debugHostInSessionStorage || 'http://localhost:7123'
25 |       if (debugHost) {
26 |         sessionStorage.setItem('debug-host', debugHost)
27 |       }
28 | 
29 |       const createRefreshRuntimeScript = `
30 |       import RefreshRuntime from "${host}/@react-refresh";
31 |       RefreshRuntime.injectIntoGlobalHook(window);
32 |       window.$RefreshReg$ = () => {};
33 |       window.$RefreshSig$ = () => (type) => type;
34 |       window.__vite_plugin_react_preamble_installed__ = true;
35 |       `
36 |       const $script = document.createElement('script')
37 |       $script.innerHTML = createRefreshRuntimeScript
38 |       $script.type = 'module'
39 |       document.head.append($script)
40 | 
41 |       fetch(`${host}`)
42 |         .then((res) => res.text())
43 |         .then((html) => {
44 |           const parser = new DOMParser()
45 |           const doc = parser.parseFromString(html, 'text/html')
46 | 
47 |           const scripts = doc.querySelectorAll('script')
48 | 
49 |           scripts.forEach((script) => {
50 |             script.remove()
51 |           })
52 | 
53 |           // header meta
54 | 
55 |           const $meta = doc.head.querySelectorAll('meta')
56 |           $meta.forEach((meta) => {
57 |             document.head.append(meta)
58 |           })
59 | 
60 |           const $style = doc.head.querySelectorAll('style')
61 |           $style.forEach((style) => {
62 |             document.head.append(style)
63 |           })
64 | 
65 |           document.body.innerHTML = doc.body.innerHTML
66 | 
67 |           scripts.forEach((script) => {
68 |             const $script = document.createElement('script')
69 |             $script.type = 'module'
70 |             $script.crossOrigin = script.crossOrigin
71 | 
72 |             if (script.src) {
73 |               $script.src = new URL(
74 |                 script.src.startsWith('http')
75 |                   ? new URL(script.src).pathname
76 |                   : script.src,
77 |                 host,
78 |               ).toString()
79 |             } else if (script.innerHTML) {
80 |               $script.innerHTML = script.innerHTML
81 |             } else {
82 |               return
83 |             }
84 | 
85 |             document.body.append($script)
86 |           })
87 |         })
88 |     </script>
89 |   </head>
90 |   <body></body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { defineConfig } from 'eslint-config-hyoban'
 3 | 
 4 | import recursiveSort from './plugins/eslint-recursive-sort.js'
 5 | 
 6 | export default defineConfig(
 7 |   {
 8 |     formatting: false,
 9 |     lessOpinionated: true,
10 |     ignores: ['dist/**'],
11 |     preferESM: false,
12 |   },
13 |   {
14 |     settings: {
15 |       tailwindcss: {
16 |         whitelist: ['center'],
17 |       },
18 |     },
19 |     rules: {
20 |       'unicorn/prefer-math-trunc': 'off',
21 |       'unicorn/expiring-todo-comments': 0,
22 |       '@eslint-react/no-clone-element': 0,
23 |       '@eslint-react/hooks-extra/no-direct-set-state-in-use-effect': 0,
24 |       // NOTE: Disable this temporarily
25 |       'react-compiler/react-compiler': 0,
26 |       'no-restricted-syntax': 0,
27 |       'package-json/valid-name': 0,
28 |       'no-restricted-globals': [
29 |         'error',
30 |         {
31 |           name: 'location',
32 |           message:
33 |             "Since you don't use the same router instance in electron and browser, you can't use the global location to get the route info. \n\n" +
34 |             'You can use `useLocaltion` or `getReadonlyRoute` to get the route info.',
35 |         },
36 |       ],
37 |     },
38 |   },
39 |   {
40 |     files: ['**/*.tsx'],
41 |     rules: {
42 |       '@stylistic/jsx-self-closing-comp': 'error',
43 |     },
44 |   },
45 |   {
46 |     files: ['locales/**/*.json'],
47 |     plugins: {
48 |       'recursive-sort': recursiveSort,
49 |     },
50 |     rules: {
51 |       'recursive-sort/recursive-sort': 'error',
52 |     },
53 |   },
54 |   {
55 |     files: ['package.json'],
56 |     rules: {
57 |       'package-json/valid-name': 0,
58 |     },
59 |   },
60 | )
61 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="h-full">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Linear</title>
 8 |     <script>
 9 |       function setTheme() {
10 |         let e = 'color-mode',
11 |           t = document.documentElement,
12 |           a = localStorage.getItem(e)
13 |         function h() {
14 |           return window.matchMedia
15 |             ? window.matchMedia('(prefers-color-scheme: dark)').matches
16 |               ? 'dark'
17 |               : window.matchMedia('(prefers-color-scheme: light)').matches
18 |                 ? 'light'
19 |                 : void 0
20 |             : void 0
21 |         }
22 |         if (!a) {
23 |           t.dataset.theme = h() || 'light'
24 |           return
25 |         }
26 |         switch ((a = JSON.parse(a))) {
27 |           case 'dark':
28 |             t.dataset.theme = 'dark'
29 |             break
30 |           case 'light':
31 |             t.dataset.theme = 'light'
32 |             break
33 |           case 'system':
34 |             t.dataset.theme = h() || 'light'
35 |         }
36 |       }
37 |       setTheme()
38 |     </script>
39 |     <style>
40 |       #skeleton {
41 |         position: fixed;
42 |         top: 0;
43 |         left: 0;
44 |         width: 256px;
45 |         height: 100%;
46 |         background-color: hsl(var(--sidebar) / var(--tw-bg-opacity, 1));
47 |         display: flex;
48 |         flex-direction: column;
49 |         grow: 1;
50 |         inset: 0;
51 |         z-index: 2;
52 |       }
53 |     </style>
54 |   </head>
55 |   <body class="flex h-full flex-col">
56 |     <div id="skeleton"></div>
57 |     <div id="root" class="flex h-full flex-col"></div>
58 | 
59 |     <script type="module" src="/src/main.tsx"></script>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "Linear",
  3 |   "type": "module",
  4 |   "version": "0.0.0",
  5 |   "packageManager": "pnpm@10.8.0",
  6 |   "repository": {
  7 |     "type": "git",
  8 |     "url": "https://"
  9 |   },
 10 |   "scripts": {
 11 |     "build": "tsc && vite build",
 12 |     "dev": "vite",
 13 |     "format": "prettier --write \"src/**/*.ts\" ",
 14 |     "lint": "eslint --fix",
 15 |     "prepare": "simple-git-hooks",
 16 |     "serve": "vite preview"
 17 |   },
 18 |   "dependencies": {
 19 |     "@headlessui/react": "2.2.1",
 20 |     "@infinite-list/react": "3.0.1",
 21 |     "@million/lint": "1.0.14",
 22 |     "@octokit/core": "6.1.4",
 23 |     "@radix-ui/react-avatar": "1.1.3",
 24 |     "@radix-ui/react-context-menu": "2.2.6",
 25 |     "@radix-ui/react-dialog": "1.1.6",
 26 |     "@radix-ui/react-dropdown-menu": "2.1.6",
 27 |     "@radix-ui/react-scroll-area": "1.2.3",
 28 |     "@radix-ui/react-slot": "1.1.2",
 29 |     "@radix-ui/react-tabs": "1.1.3",
 30 |     "@radix-ui/react-tooltip": "1.1.8",
 31 |     "@remixicon/react": "4.6.0",
 32 |     "@tanstack/react-query": "5.72.1",
 33 |     "@tanstack/react-virtual": "3.13.6",
 34 |     "@types/react-syntax-highlighter": "15.5.13",
 35 |     "clsx": "2.1.1",
 36 |     "date-fns": "4.1.0",
 37 |     "dexie": "4.0.11",
 38 |     "dexie-export-import": "4.1.4",
 39 |     "es-toolkit": "1.34.1",
 40 |     "foxact": "0.2.45",
 41 |     "github-markdown-css": "5.8.1",
 42 |     "immer": "10.1.1",
 43 |     "jotai": "2.12.2",
 44 |     "motion": "12.6.3",
 45 |     "octokit": "4.1.2",
 46 |     "ofetch": "1.4.1",
 47 |     "pluralize": "8.0.0",
 48 |     "react": "19.1.0",
 49 |     "react-context-selector": "1.0.3",
 50 |     "react-diff-viewer": "3.1.1",
 51 |     "react-dom": "19.1.0",
 52 |     "react-markdown": "10.1.0",
 53 |     "react-resizable-layout": "npm:@innei/react-resizable-layout@0.7.3-fork.1",
 54 |     "react-router": "7.5.0",
 55 |     "react-scan": "0.3.3",
 56 |     "react-syntax-highlighter": "15.6.1",
 57 |     "rehype-raw": "7.0.0",
 58 |     "remark-gfm": "4.0.1",
 59 |     "sonner": "2.0.3",
 60 |     "tailwind-merge": "3.2.0",
 61 |     "use-sync-external-store": "1.5.0",
 62 |     "usehooks-ts": "3.1.1",
 63 |     "vaul": "1.1.2",
 64 |     "zustand": "5.0.3"
 65 |   },
 66 |   "devDependencies": {
 67 |     "@egoist/tailwindcss-icons": "1.9.0",
 68 |     "@iconify-json/mingcute": "1.2.3",
 69 |     "@iconify-json/octicon": "1.2.5",
 70 |     "@innei/prettier": "^0.15.0",
 71 |     "@octokit/openapi-types": "24.0.0",
 72 |     "@tailwindcss/container-queries": "0.1.1",
 73 |     "@tailwindcss/typography": "0.5.16",
 74 |     "@types/node": "22.14.0",
 75 |     "@types/pluralize": "0.0.33",
 76 |     "@types/react": "19.1.0",
 77 |     "@types/react-dom": "19.1.1",
 78 |     "@vitejs/plugin-react": "^4.3.4",
 79 |     "autoprefixer": "10.4.21",
 80 |     "click-to-react-component": "1.1.2",
 81 |     "daisyui": "^4",
 82 |     "eslint": "9.24.0",
 83 |     "eslint-config-hyoban": "4.0.2",
 84 |     "fake-indexeddb": "6.0.0",
 85 |     "happy-dom": "17.4.4",
 86 |     "kolorist": "1.8.0",
 87 |     "lint-staged": "15.5.0",
 88 |     "postcss": "8.5.3",
 89 |     "postcss-import": "16.1.0",
 90 |     "postcss-js": "4.0.1",
 91 |     "prettier": "3.5.3",
 92 |     "simple-git-hooks": "2.12.1",
 93 |     "tailwind-scrollbar": "4.0.1",
 94 |     "tailwind-variants": "0.3.1",
 95 |     "tailwindcss": "^3",
 96 |     "tailwindcss-animate": "1.0.7",
 97 |     "tailwindcss-animated": "2.0.0",
 98 |     "tailwindcss-motion": "1.1.0",
 99 |     "tailwindcss-uikit-colors": "0.3.10",
100 |     "typescript": "5.8.3",
101 |     "unplugin-ast": "0.14.4",
102 |     "vite": "6.2.5",
103 |     "vite-plugin-checker": "0.9.1",
104 |     "vite-tsconfig-paths": "5.1.4",
105 |     "vitest": "3.1.1"
106 |   },
107 |   "simple-git-hooks": {
108 |     "pre-commit": "pnpm exec lint-staged"
109 |   },
110 |   "lint-staged": {
111 |     "*.{js,jsx,ts,tsx}": [
112 |       "prettier --ignore-path ./.gitignore --write "
113 |     ],
114 |     "*.{js,ts,cjs,mjs,jsx,tsx,json}": [
115 |       "eslint --fix"
116 |     ]
117 |   }
118 | }


--------------------------------------------------------------------------------
/patches/@tanstack__react-virtual@3.10.9.patch:
--------------------------------------------------------------------------------
 1 | diff --git a/dist/esm/index.js b/dist/esm/index.js
 2 | index 13b1ae504e8b55efcd9d8cecd30df8ab234edc18..a8549c560b0d6b7a65b4dc58e8fb134d04dda037 100644
 3 | --- a/dist/esm/index.js
 4 | +++ b/dist/esm/index.js
 5 | @@ -22,6 +22,9 @@ function useVirtualizerBase(options) {
 6 |    );
 7 |    instance.setOptions(resolvedOptions);
 8 |    React.useEffect(() => {
 9 | +    if (!instance.scrollElement) {
10 | +      instance._willUpdate()
11 | +    }
12 |      return instance._didMount();
13 |    }, []);
14 |    useIsomorphicLayoutEffect(() => {
15 | 


--------------------------------------------------------------------------------
/plugins/css-plugin.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227#issuecomment-1462034856
 2 | // cssAsPlugin.js
 3 | const postcss = require('postcss')
 4 | const postcssJs = require('postcss-js')
 5 | const { readFileSync } = require('node:fs')
 6 | 
 7 | require.extensions['.css'] = function (module, filename) {
 8 |   module.exports = ({ addBase, addComponents, addUtilities }) => {
 9 |     const css = readFileSync(filename, 'utf8')
10 |     const root = postcss.parse(css)
11 |     const jss = postcssJs.objectify(root)
12 | 
13 |     if ('@layer base' in jss) {
14 |       addBase(jss['@layer base'])
15 |     }
16 |     if ('@layer components' in jss) {
17 |       addComponents(jss['@layer components'])
18 |     }
19 |     if ('@layer utilities' in jss) {
20 |       addUtilities(jss['@layer utilities'])
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/plugins/eslint-recursive-sort.js:
--------------------------------------------------------------------------------
 1 | const sortObjectKeys = (obj) => {
 2 |   if (typeof obj !== 'object' || obj === null) {
 3 |     return obj
 4 |   }
 5 | 
 6 |   if (Array.isArray(obj)) {
 7 |     return obj.map((element) => sortObjectKeys(element))
 8 |   }
 9 | 
10 |   return Object.keys(obj)
11 |     .sort()
12 |     .reduce((acc, key) => {
13 |       acc[key] = sortObjectKeys(obj[key])
14 |       return acc
15 |     }, {})
16 | }
17 | /**
18 |  * @type {import("eslint").ESLint.Plugin}
19 |  */
20 | export default {
21 |   rules: {
22 |     'recursive-sort': {
23 |       meta: {
24 |         type: 'layout',
25 |         fixable: 'code',
26 |       },
27 |       create(context) {
28 |         return {
29 |           Program(node) {
30 |             if (context.getFilename().endsWith('.json')) {
31 |               const sourceCode = context.getSourceCode()
32 |               const text = sourceCode.getText()
33 | 
34 |               try {
35 |                 const json = JSON.parse(text)
36 |                 const sortedJson = sortObjectKeys(json)
37 |                 const sortedText = JSON.stringify(sortedJson, null, 2)
38 | 
39 |                 if (text.trim() !== sortedText.trim()) {
40 |                   context.report({
41 |                     node,
42 |                     message: 'JSON keys are not sorted recursively',
43 |                     fix(fixer) {
44 |                       return fixer.replaceText(node, sortedText)
45 |                     },
46 |                   })
47 |                 }
48 |               } catch (error) {
49 |                 context.report({
50 |                   node,
51 |                   message: `Invalid JSON: ${error.message}`,
52 |                 })
53 |               }
54 |             }
55 |           },
56 |         }
57 |       },
58 |     },
59 |   },
60 | }
61 | 


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


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Linear
2 | 
3 | A more user-friendly GitHub notification management tool (WIP)
4 | 
5 | ![CleanShot 2025-02-18 at 12  03 56@2x](https://github.com/user-attachments/assets/069fb577-5ef6-4768-89e5-957725b14204)
6 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/setup-file.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import 'fake-indexeddb/auto'
 3 | 
 4 | import { enableMapSet } from 'immer'
 5 | 
 6 | globalThis.window = {
 7 |   location: new URL('https://example.com'),
 8 |   __dbIsReady: true,
 9 |   addEventListener: () => {},
10 |   get navigator() {
11 |     return globalThis.navigator
12 |   },
13 | }
14 | 
15 | if (!globalThis.navigator) {
16 |   globalThis.navigator = {
17 |     onLine: true,
18 |     userAgent: 'node',
19 |   }
20 | }
21 | enableMapSet()
22 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import type { FC } from 'react'
 2 | import {
 3 |   Fragment,
 4 |   useEffect,
 5 |   useInsertionEffect,
 6 |   useRef,
 7 | } from 'react'
 8 | import { Outlet } from 'react-router'
 9 | 
10 | import { setGHToken, useAppIsReady, useGHToken } from './atoms/app'
11 | import { useUISettingKey } from './atoms/settings/ui'
12 | import { Button } from './components/ui/button'
13 | import { Input } from './components/ui/input'
14 | import { appLog } from './lib/log'
15 | import { RootProviders } from './providers/root-providers'
16 | 
17 | export const App: FC = () => {
18 |   return (
19 |     <RootProviders>
20 |       <AppLayer />
21 |     </RootProviders>
22 |   )
23 | }
24 | 
25 | const removeAppSkeleton = () => {
26 |   const skeleton = document.querySelector('#skeleton')
27 |   if (skeleton) {
28 |     skeleton.remove()
29 |   }
30 | }
31 | 
32 | const AppLayer = () => {
33 |   const appIsReady = useAppIsReady()
34 | 
35 |   useInsertionEffect(() => {
36 |     removeAppSkeleton()
37 |   }, [])
38 |   useEffect(() => {
39 |     const doneTime = Math.trunc(performance.now())
40 |     appLog('App is ready', `${doneTime}ms`)
41 |     // applyAfterReadyCallbacks()
42 |   }, [appIsReady])
43 | 
44 |   return appIsReady ? <Outlet /> : <AppSkeleton />
45 | }
46 | 
47 | const AppSkeleton = () => {
48 |   const sidebarColWidth = useUISettingKey('sidebarColWidth')
49 |   const ghtoken = useGHToken()
50 |   return (
51 |     <Fragment>
52 |       <div
53 |         className="flex absolute inset-y-0 z-[2] shrink-0 grow flex-col overflow-hidden bg-sidebar duration-200"
54 |         style={{
55 |           width: `${sidebarColWidth}px`,
56 |         }}
57 |       />
58 |       {!ghtoken && (
59 |         <div className="center grow">
60 |           <GHTokenForm />
61 |         </div>
62 |       )}
63 |     </Fragment>
64 |   )
65 | }
66 | 
67 | const GHTokenForm = () => {
68 |   const tokenRef = useRef('')
69 |   return (
70 |     <div className="flex w-[300px] flex-col gap-2">
71 |       <div className="text-center text-lg font-bold">GitHub Token</div>
72 |       <div className="text-center text-sm text-gray-500">
73 |         Please enter your GitHub token
74 |       </div>
75 | 
76 |       <Input
77 |         type="password"
78 |         className="mb-4 text-sm [--a:var(--p)]"
79 |         placeholder="GitHub Token"
80 |         onChange={(e) => {
81 |           tokenRef.current = e.target.value
82 |         }}
83 |       />
84 | 
85 |       <Button
86 |         className="!text-base-100 [--a:var(--p)]"
87 |         onClick={() => {
88 |           setGHToken(tokenRef.current)
89 |           window.location.reload()
90 |         }}
91 |       >
92 |         Save
93 |       </Button>
94 |     </div>
95 |   )
96 | }
97 | 
98 | export default App
99 | 


--------------------------------------------------------------------------------
/src/assets/fonts/GeistVF.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Innei/linear/427685985fb1d0f59db725e83de57057c167d1b5/src/assets/fonts/GeistVF.woff2


--------------------------------------------------------------------------------
/src/atoms/app.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'jotai'
 2 | import { atomWithStorage } from 'jotai/utils'
 3 | 
 4 | import { createAtomHooks } from '~/lib/jotai'
 5 | import { getStorageNS } from '~/lib/ns'
 6 | 
 7 | export const [, , useAppIsReady, , appIsReady, setAppIsReady] = createAtomHooks(
 8 |   atom(false),
 9 | )
10 | 
11 | export const [, , useAppSearchOpen, , , setAppSearchOpen] = createAtomHooks(
12 |   atom(false),
13 | )
14 | 
15 | export const [
16 |   ,
17 |   ,
18 |   useAppPollingInterval,
19 |   ,
20 |   getAppPollingInterval,
21 |   setAppPollingInterval,
22 | ] = createAtomHooks(atom(60 * 1000))
23 | 
24 | export const [, , useGHToken, , getGHToken, setGHToken] = createAtomHooks(
25 |   atomWithStorage(getStorageNS('gh-token'), '', undefined, {
26 |     getOnInit: true,
27 |   }),
28 | )
29 | 
30 | export const clearGHToken = () => {
31 |   setGHToken('')
32 |   localStorage.removeItem(getStorageNS('gh-token'))
33 | }
34 | 


--------------------------------------------------------------------------------
/src/atoms/context-menu.ts:
--------------------------------------------------------------------------------
  1 | import { atom } from 'jotai'
  2 | import { useCallback } from 'react'
  3 | 
  4 | import { createAtomHooks } from '~/lib/jotai'
  5 | 
  6 | // Atom
  7 | 
  8 | type ContextMenuState =
  9 |   | { open: false }
 10 |   | {
 11 |       open: true
 12 |       position: { x: number; y: number }
 13 |       menuItems: FollowMenuItem[]
 14 |       // Just for abort callback
 15 |       // Also can be optimized by using the `atomWithListeners`
 16 |       abortController: AbortController
 17 |     }
 18 | 
 19 | export const [
 20 |   contextMenuAtom,
 21 |   useContextMenuState,
 22 |   useContextMenuValue,
 23 |   useSetContextMenu,
 24 | ] = createAtomHooks(atom<ContextMenuState>({ open: false }))
 25 | 
 26 | const useShowWebContextMenu = () => {
 27 |   const setContextMenu = useSetContextMenu()
 28 | 
 29 |   const showWebContextMenu = useCallback(
 30 |     async (
 31 |       menuItems: Array<FollowMenuItem>,
 32 |       e: MouseEvent | React.MouseEvent,
 33 |     ) => {
 34 |       const abortController = new AbortController()
 35 |       const resolvers = Promise.withResolvers<void>()
 36 |       setContextMenu({
 37 |         open: true,
 38 |         position: { x: e.clientX, y: e.clientY },
 39 |         menuItems,
 40 |         abortController,
 41 |       })
 42 | 
 43 |       abortController.signal.addEventListener('abort', () => {
 44 |         resolvers.resolve()
 45 |       })
 46 |       return resolvers.promise
 47 |     },
 48 |     [setContextMenu],
 49 |   )
 50 | 
 51 |   return showWebContextMenu
 52 | }
 53 | 
 54 | // Menu
 55 | 
 56 | export type BaseMenuItemText = {
 57 |   type: 'text'
 58 |   label: string
 59 |   click?: () => void
 60 |   /** only work in web app */
 61 |   icon?: React.ReactNode
 62 |   shortcut?: string
 63 |   disabled?: boolean
 64 |   checked?: boolean
 65 |   supportMultipleSelection?: boolean
 66 | }
 67 | 
 68 | type BaseMenuItemSeparator = {
 69 |   type: 'separator'
 70 |   disabled?: boolean
 71 | }
 72 | 
 73 | type BaseMenuItem = BaseMenuItemText | BaseMenuItemSeparator
 74 | 
 75 | export type FollowMenuItem = BaseMenuItem & {
 76 |   submenu?: FollowMenuItem[]
 77 | }
 78 | 
 79 | export type MenuItemInput =
 80 |   | (BaseMenuItemText & { hide?: boolean; submenu?: MenuItemInput[] })
 81 |   | (BaseMenuItemSeparator & { hide?: boolean })
 82 |   | null
 83 |   | undefined
 84 |   | false
 85 |   | ''
 86 | 
 87 | function sortShortcutsString(shortcut: string) {
 88 |   const order = ['Shift', 'Ctrl', 'Meta', 'Alt']
 89 |   const nextShortcut = shortcut
 90 | 
 91 |   const arr = nextShortcut.split('+')
 92 | 
 93 |   const sortedModifiers = arr
 94 |     .filter((key) => order.includes(key))
 95 |     .sort((a, b) => order.indexOf(a) - order.indexOf(b))
 96 | 
 97 |   const otherKeys = arr.filter((key) => !order.includes(key))
 98 | 
 99 |   return [...sortedModifiers, ...otherKeys].join('+')
100 | }
101 | 
102 | function normalizeMenuItems(items: MenuItemInput[]): FollowMenuItem[] {
103 |   return items
104 |     .filter(
105 |       (item) =>
106 |         item !== null && item !== undefined && item !== false && item !== '',
107 |     )
108 |     .filter((item) => !item.hide)
109 |     .map((item) => {
110 |       if (item.type === 'separator') {
111 |         return item
112 |       }
113 | 
114 |       return {
115 |         ...item,
116 |         shortcut: item.shortcut
117 |           ? sortShortcutsString(item.shortcut)
118 |           : undefined,
119 |         submenu: item.submenu ? normalizeMenuItems(item.submenu) : undefined,
120 |       }
121 |     })
122 | }
123 | 
124 | export const useShowContextMenu = () => {
125 |   const showWebContextMenu = useShowWebContextMenu()
126 | 
127 |   const showContextMenu = useCallback(
128 |     async (
129 |       inputMenu: Array<MenuItemInput>,
130 |       e: MouseEvent | React.MouseEvent,
131 |     ) => {
132 |       const menuItems = normalizeMenuItems(inputMenu)
133 | 
134 |       await showWebContextMenu(menuItems, e)
135 |     },
136 |     [showWebContextMenu],
137 |   )
138 | 
139 |   return showContextMenu
140 | }
141 | 


--------------------------------------------------------------------------------
/src/atoms/dom.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'jotai'
 2 | 
 3 | import { createAtomHooks } from '~/lib/jotai'
 4 | 
 5 | export const [
 6 |   ,
 7 |   ,
 8 |   useMainContainerElement,
 9 |   ,
10 |   getMainContainerElement,
11 |   setMainContainerElement,
12 | ] = createAtomHooks(atom<HTMLElement | null>(null))
13 | 
14 | export const [
15 |   ,
16 |   ,
17 |   useRootContainerElement,
18 |   ,
19 |   getRootContainerElement,
20 |   setRootContainerElement,
21 | ] = createAtomHooks(atom<HTMLElement | null>(null))
22 | 


--------------------------------------------------------------------------------
/src/atoms/helper/setting.ts:
--------------------------------------------------------------------------------
  1 | import { atom as jotaiAtom, useAtomValue } from 'jotai'
  2 | import { atomWithStorage, selectAtom } from 'jotai/utils'
  3 | import { useMemo } from 'react'
  4 | 
  5 | import { useRefValue } from '~/hooks/common'
  6 | import { createAtomHooks } from '~/lib/jotai'
  7 | import { getStorageNS } from '~/lib/ns'
  8 | 
  9 | export const createSettingAtom = <T extends object>(
 10 |   settingKey: string,
 11 |   createDefaultSettings: () => T,
 12 | ) => {
 13 |   const atom = atomWithStorage(
 14 |     getStorageNS(settingKey),
 15 |     createDefaultSettings(),
 16 |     undefined,
 17 |     {
 18 |       getOnInit: true,
 19 |     },
 20 |   )
 21 | 
 22 |   const [, , useSettingValue, , getSettings, setSettings] =
 23 |     createAtomHooks(atom)
 24 | 
 25 |   const initializeDefaultSettings = () => {
 26 |     const currentSettings = getSettings()
 27 |     const defaultSettings = createDefaultSettings()
 28 |     if (typeof currentSettings !== 'object') setSettings(defaultSettings)
 29 |     const newSettings = { ...defaultSettings, ...currentSettings }
 30 |     setSettings(newSettings)
 31 |   }
 32 | 
 33 |   const selectAtomCacheMap = {} as Record<
 34 |     keyof ReturnType<typeof getSettings>,
 35 |     any
 36 |   >
 37 | 
 38 |   const noopAtom = jotaiAtom(null)
 39 | 
 40 |   const useMaybeSettingKey = <T extends keyof ReturnType<typeof getSettings>>(
 41 |     key: Nullable<T>,
 42 |   ) => {
 43 |     // @ts-expect-error
 44 |     let selectedAtom: Record<keyof T, any>[T] | null = null
 45 |     if (key) {
 46 |       selectedAtom = selectAtomCacheMap[key]
 47 |       if (!selectedAtom) {
 48 |         selectedAtom = selectAtom(atom, (s) => s[key])
 49 |         selectAtomCacheMap[key] = selectedAtom
 50 |       }
 51 |     } else {
 52 |       selectedAtom = noopAtom
 53 |     }
 54 | 
 55 |     return useAtomValue(selectedAtom) as ReturnType<typeof getSettings>[T]
 56 |   }
 57 | 
 58 |   const useSettingKey = <T extends keyof ReturnType<typeof getSettings>>(
 59 |     key: T,
 60 |   ) => {
 61 |     return useMaybeSettingKey(key) as ReturnType<typeof getSettings>[T]
 62 |   }
 63 | 
 64 |   function useSettingKeys<
 65 |     T extends keyof ReturnType<typeof getSettings>,
 66 |     K1 extends T,
 67 |     K2 extends T,
 68 |     K3 extends T,
 69 |     K4 extends T,
 70 |     K5 extends T,
 71 |     K6 extends T,
 72 |     K7 extends T,
 73 |     K8 extends T,
 74 |     K9 extends T,
 75 |     K10 extends T,
 76 |   >(keys: [K1, K2?, K3?, K4?, K5?, K6?, K7?, K8?, K9?, K10?]) {
 77 |     return [
 78 |       useMaybeSettingKey(keys[0]),
 79 |       useMaybeSettingKey(keys[1]),
 80 |       useMaybeSettingKey(keys[2]),
 81 |       useMaybeSettingKey(keys[3]),
 82 |       useMaybeSettingKey(keys[4]),
 83 |       useMaybeSettingKey(keys[5]),
 84 |       useMaybeSettingKey(keys[6]),
 85 |       useMaybeSettingKey(keys[7]),
 86 |       useMaybeSettingKey(keys[8]),
 87 |       useMaybeSettingKey(keys[9]),
 88 |     ] as [
 89 |       ReturnType<typeof getSettings>[K1],
 90 |       ReturnType<typeof getSettings>[K2],
 91 |       ReturnType<typeof getSettings>[K3],
 92 |       ReturnType<typeof getSettings>[K4],
 93 |       ReturnType<typeof getSettings>[K5],
 94 |       ReturnType<typeof getSettings>[K6],
 95 |       ReturnType<typeof getSettings>[K7],
 96 |       ReturnType<typeof getSettings>[K8],
 97 |       ReturnType<typeof getSettings>[K9],
 98 |       ReturnType<typeof getSettings>[K10],
 99 |     ]
100 |   }
101 | 
102 |   const useSettingSelector = <
103 |     T extends keyof ReturnType<typeof getSettings>,
104 |     S extends ReturnType<typeof getSettings>,
105 |     R = S[T],
106 |   >(
107 |     selector: (s: S) => R,
108 |   ): R => {
109 |     const stableSelector = useRefValue(selector)
110 | 
111 |     return useAtomValue(
112 |       // @ts-expect-error
113 |       useMemo(() => selectAtom(atom, stableSelector.current), [stableSelector]),
114 |     )
115 |   }
116 | 
117 |   const setSetting = <K extends keyof ReturnType<typeof getSettings>>(
118 |     key: K,
119 |     value: ReturnType<typeof getSettings>[K],
120 |   ) => {
121 |     const updated = Date.now()
122 |     setSettings({
123 |       ...getSettings(),
124 |       [key]: value,
125 | 
126 |       updated,
127 |     })
128 |   }
129 | 
130 |   const clearSettings = () => {
131 |     setSettings(createDefaultSettings())
132 |   }
133 | 
134 |   Object.defineProperty(useSettingValue, 'select', {
135 |     value: useSettingSelector,
136 |   })
137 | 
138 |   return {
139 |     useSettingKey,
140 |     useSettingSelector,
141 |     setSetting,
142 |     clearSettings,
143 |     initializeDefaultSettings,
144 | 
145 |     useSettingValue,
146 |     useSettingKeys,
147 |     getSettings,
148 | 
149 |     settingAtom: atom,
150 |   } as {
151 |     useSettingKey: typeof useSettingKey
152 |     useSettingSelector: typeof useSettingSelector
153 |     setSetting: typeof setSetting
154 |     clearSettings: typeof clearSettings
155 |     initializeDefaultSettings: typeof initializeDefaultSettings
156 |     useSettingValue: typeof useSettingValue & {
157 |       select: <T extends keyof ReturnType<() => T>>(key: T) => Awaited<T[T]>
158 |     }
159 |     useSettingKeys: typeof useSettingKeys
160 |     getSettings: typeof getSettings
161 |     settingAtom: typeof atom
162 |   }
163 | }
164 | 


--------------------------------------------------------------------------------
/src/atoms/route.ts:
--------------------------------------------------------------------------------
 1 | import { atom, useAtomValue } from 'jotai'
 2 | import { selectAtom } from 'jotai/utils'
 3 | import { useMemo } from 'react'
 4 | import type { Location, NavigateFunction, Params } from 'react-router'
 5 | 
 6 | import { createAtomHooks } from '~/lib/jotai'
 7 | 
 8 | interface RouteAtom {
 9 |   params: Readonly<Params<string>>
10 |   searchParams: URLSearchParams
11 |   location: Location<any>
12 | }
13 | 
14 | export const [routeAtom, , , , getReadonlyRoute, setRoute] = createAtomHooks(
15 |   atom<RouteAtom>({
16 |     params: {},
17 |     searchParams: new URLSearchParams(),
18 |     location: {
19 |       pathname: '',
20 |       search: '',
21 |       hash: '',
22 |       state: null,
23 |       key: '',
24 |     },
25 |   }),
26 | )
27 | 
28 | const noop = []
29 | export const useReadonlyRouteSelector = <T>(
30 |   selector: (route: RouteAtom) => T,
31 |   deps: any[] = noop,
32 | ): T =>
33 |   useAtomValue(
34 |     useMemo(() => selectAtom(routeAtom, (route) => selector(route)), deps),
35 |   )
36 | 
37 | // Vite HMR will create new router instance, but RouterProvider always stable
38 | 
39 | const [, , , , navigate, setNavigate] = createAtomHooks(
40 |   atom<{ fn: NavigateFunction | null }>({ fn() {} }),
41 | )
42 | const getStableRouterNavigate = () => navigate().fn
43 | export { getStableRouterNavigate, setNavigate }
44 | 


--------------------------------------------------------------------------------
/src/atoms/settings/general.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { createSettingAtom } from '../helper/setting'
 3 | 
 4 | export interface GeneralSettings {
 5 |   token: string
 6 | }
 7 | 
 8 | const createDefaultSettings = (): GeneralSettings => ({
 9 |   token: '',
10 | })
11 | 
12 | export const {
13 |   useSettingKey: useGeneralSettingKey,
14 |   useSettingSelector: useGeneralSettingSelector,
15 |   useSettingKeys: useGeneralSettingKeys,
16 |   setSetting: setGeneralSetting,
17 |   clearSettings: clearGeneralSettings,
18 |   initializeDefaultSettings: initializeDefaultGeneralSettings,
19 |   getSettings: getGeneralSettings,
20 |   useSettingValue: useGeneralSettingValue,
21 | 
22 |   settingAtom: __generalSettingAtom,
23 | } = createSettingAtom('general', createDefaultSettings)
24 | 


--------------------------------------------------------------------------------
/src/atoms/settings/ui.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { createSettingAtom } from '../helper/setting'
 3 | 
 4 | export interface UISettings {
 5 |   // Sidebar
 6 |   sidebarColWidth: number
 7 | }
 8 | 
 9 | export const createDefaultSettings = (): UISettings => ({
10 |   sidebarColWidth: 256,
11 | })
12 | 
13 | export const {
14 |   useSettingKey: useUISettingKey,
15 |   useSettingSelector: useUISettingSelector,
16 |   useSettingKeys: useUISettingKeys,
17 |   setSetting: setUISetting,
18 |   clearSettings: clearUISettings,
19 |   initializeDefaultSettings: initializeDefaultUISettings,
20 |   getSettings: getUISettings,
21 |   useSettingValue: useUISettingValue,
22 |   settingAtom: __uiSettingAtom,
23 | } = createSettingAtom('ui', createDefaultSettings)
24 | 
25 | export const uiServerSyncWhiteListKeys: (keyof UISettings)[] = []
26 | 


--------------------------------------------------------------------------------
/src/atoms/sidebar.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'jotai'
 2 | 
 3 | import { createAtomHooks } from '~/lib/jotai'
 4 | 
 5 | const [
 6 |   ,
 7 |   ,
 8 |   internal_useSidebarColumnShow,
 9 |   ,
10 |   internal_getSidebarColumnShow,
11 |   setSidebarColumnShow,
12 | ] = createAtomHooks(atom(true))
13 | 
14 | export { setSidebarColumnShow }
15 | export const getSidebarColumnShow = internal_getSidebarColumnShow
16 | 
17 | export const useSidebarColumnShow = internal_useSidebarColumnShow
18 | 
19 | export const [
20 |   ,
21 |   ,
22 |   useSidebarColumnTempShow,
23 |   ,
24 |   getSidebarColumnTempShow,
25 |   setSidebarColumnTempShow,
26 | ] = createAtomHooks(atom(false))
27 | 


--------------------------------------------------------------------------------
/src/atoms/user.ts:
--------------------------------------------------------------------------------
1 | import { atom } from 'jotai'
2 | 
3 | import type { DB_User } from '~/database'
4 | import { createAtomHooks } from '~/lib/jotai'
5 | 
6 | export const [, , useUser, , getUser, setUser] = createAtomHooks(
7 |   atom<DB_User | null>(null),
8 | )
9 | 


--------------------------------------------------------------------------------
/src/components/common/ErrorElement.tsx:
--------------------------------------------------------------------------------
 1 | import { repository } from '@pkg'
 2 | import { useEffect, useRef } from 'react'
 3 | import { isRouteErrorResponse, useRouteError } from 'react-router'
 4 | 
 5 | import { attachOpenInEditor } from '~/lib/dev'
 6 | 
 7 | import { Button } from '../ui/button'
 8 | 
 9 | export function ErrorElement() {
10 |   const error = useRouteError()
11 |   const message = isRouteErrorResponse(error)
12 |     ? `${error.status} ${error.statusText}`
13 |     : error instanceof Error
14 |       ? error.message
15 |       : JSON.stringify(error)
16 |   const stack = error instanceof Error ? error.stack : null
17 | 
18 |   useEffect(() => {
19 |     console.error('Error handled by React Router default ErrorBoundary:', error)
20 |   }, [error])
21 | 
22 |   const reloadRef = useRef(false)
23 |   if (
24 |     message.startsWith('Failed to fetch dynamically imported module') &&
25 |     window.sessionStorage.getItem('reload') !== '1'
26 |   ) {
27 |     if (reloadRef.current) return null
28 |     window.sessionStorage.setItem('reload', '1')
29 |     window.location.reload()
30 |     reloadRef.current = true
31 |     return null
32 |   }
33 | 
34 |   return (
35 |     <div className="flex m-auto min-h-full max-w-prose select-text flex-col p-8 pt-12">
36 |       <div className="fixed inset-x-0 top-0 h-12" />
37 |       <div className="center flex flex-col">
38 |         <i className="i-mingcute-bug-fill size-12 text-red-400" />
39 |         <h2 className="mt-12 text-2xl">
40 |           Sorry, the app has encountered an error
41 |         </h2>
42 |       </div>
43 |       <h3 className="text-xl">{message}</h3>
44 |       {import.meta.env.DEV && stack ? (
45 |         <div className="mt-4 cursor-text overflow-auto whitespace-pre rounded-md bg-red-50 p-4 text-left font-mono text-sm text-red-600">
46 |           {attachOpenInEditor(stack)}
47 |         </div>
48 |       ) : null}
49 | 
50 |       <p className="my-8">
51 |         The App has a temporary problem, click the button below to try reloading
52 |         the app or another solution?
53 |       </p>
54 | 
55 |       <div className="center gap-4">
56 |         <Button onClick={() => (window.location.href = '/')}>Reload</Button>
57 |       </div>
58 | 
59 |       <p className="mt-8">
60 |         Still having this issue? Please give feedback in Github, thanks!
61 |         <a
62 |           className="ml-2 cursor-pointer text-accent duration-200"
63 |           href={`${repository.url}/issues/new?title=${encodeURIComponent(
64 |             `Error: ${message}`,
65 |           )}&body=${encodeURIComponent(
66 |             `### Error\n\n${message}\n\n### Stack\n\n\`\`\`\n${stack}\n\`\`\``,
67 |           )}&label=bug`}
68 |           target="_blank"
69 |           rel="noreferrer"
70 |         >
71 |           Submit Issue
72 |         </a>
73 |       </p>
74 |       <div className="grow" />
75 |     </div>
76 |   )
77 | }
78 | 


--------------------------------------------------------------------------------
/src/components/common/LoadRemixAsyncComponent.tsx:
--------------------------------------------------------------------------------
 1 | import type { FC, ReactNode } from 'react'
 2 | import { createElement, useEffect, useState } from 'react'
 3 | 
 4 | import { LoadingCircle } from '../ui/loading'
 5 | 
 6 | export const LoadRemixAsyncComponent: FC<{
 7 |   loader: () => Promise<any>
 8 |   Header: FC<{ loader: () => any; [key: string]: any }>
 9 | }> = ({ loader, Header }) => {
10 |   const [loading, setLoading] = useState(true)
11 | 
12 |   const [Component, setComponent] = useState<{ c: () => ReactNode }>({
13 |     c: () => null,
14 |   })
15 | 
16 |   useEffect(() => {
17 |     let isUnmounted = false
18 |     setLoading(true)
19 |     loader()
20 |       .then((module) => {
21 |         if (!module.Component) {
22 |           return
23 |         }
24 |         if (isUnmounted) return
25 | 
26 |         const { loader } = module
27 |         setComponent({
28 |           c: () => (
29 |             <>
30 |               <Header loader={loader} />
31 |               <module.Component />
32 |             </>
33 |           ),
34 |         })
35 |       })
36 |       .finally(() => {
37 |         setLoading(false)
38 |       })
39 |     return () => {
40 |       isUnmounted = true
41 |     }
42 |   }, [Header, loader])
43 | 
44 |   if (loading) {
45 |     return (
46 |       <div className="center absolute inset-0 h-full">
47 |         <LoadingCircle size="large" />
48 |       </div>
49 |     )
50 |   }
51 | 
52 |   return createElement(Component.c)
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/common/NotFound.tsx:
--------------------------------------------------------------------------------
 1 | import { useLocation, useNavigate } from 'react-router'
 2 | 
 3 | import { Button } from '../ui/button'
 4 | 
 5 | export const NotFound = () => {
 6 |   const location = useLocation()
 7 | 
 8 |   const navigate = useNavigate()
 9 |   return (
10 |     <div className="prose center m-auto size-full flex-col dark:prose-invert">
11 |       <main className="flex grow flex-col items-center justify-center">
12 |         <p className="font-semibold">
13 |           You have come to a desert of knowledge where there is nothing.
14 |         </p>
15 |         <p>
16 |           Current path: <code>{location.pathname}</code>
17 |         </p>
18 | 
19 |         <p>
20 |           <Button onClick={() => navigate('/')}>Back to Home</Button>
21 |         </p>
22 |       </main>
23 |     </div>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/common/ProviderComposer.tsx:
--------------------------------------------------------------------------------
 1 | import type { JSX } from 'react'
 2 | import { cloneElement } from 'react'
 3 | 
 4 | export const ProviderComposer: Component<{
 5 |   contexts: JSX.Element[]
 6 | }> = ({ contexts, children }) =>
 7 |   contexts.reduceRight(
 8 |     (kids: any, parent: any) => cloneElement(parent, { children: kids }),
 9 |     children,
10 |   )
11 | 


--------------------------------------------------------------------------------
/src/components/layout/sidebar/atoms.ts:
--------------------------------------------------------------------------------
 1 | import { atomWithStorage } from 'jotai/utils'
 2 | 
 3 | import { getStorageNS } from '~/lib/ns'
 4 | 
 5 | export const groupItemsAtom = atomWithStorage(
 6 |   getStorageNS('sidebar-group-items'),
 7 |   true,
 8 |   undefined,
 9 |   {
10 |     getOnInit: true,
11 |   },
12 | )
13 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as Avatar from '@radix-ui/react-avatar'
 2 | 
 3 | import { cn } from '~/lib/cn'
 4 | 
 5 | export const AvatarBase = ({
 6 |   avatarUrl,
 7 |   login,
 8 |   className,
 9 | }: {
10 |   avatarUrl: string
11 |   login: string
12 |   className?: string
13 | }) => {
14 |   return (
15 |     <Avatar.Root className={cn('inline-block size-5 shrink-0', className)}>
16 |       <Avatar.Image className="rounded-full" src={avatarUrl} />
17 |       <Avatar.Fallback
18 |         delayMs={100}
19 |         className="center inline-flex rounded-full border text-xs text-base-content/50"
20 |       >
21 |         {login.slice(0, 2)}
22 |       </Avatar.Fallback>
23 |     </Avatar.Root>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/ui/button/Button.tsx:
--------------------------------------------------------------------------------
  1 | // Tremor Button [v0.2.0]
  2 | 
  3 | import { Slot } from '@radix-ui/react-slot'
  4 | import { RiLoader2Fill } from '@remixicon/react'
  5 | import { m } from 'motion/react'
  6 | import * as React from 'react'
  7 | import type { VariantProps } from 'tailwind-variants'
  8 | import { tv } from 'tailwind-variants'
  9 | 
 10 | import { cx, focusRing } from '~/lib/cn'
 11 | 
 12 | const buttonVariants = tv({
 13 |   base: [
 14 |     'relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-center font-medium transition-all duration-100 ease-in-out',
 15 |     'disabled:pointer-events-none',
 16 |     focusRing,
 17 |   ],
 18 |   variants: {
 19 |     variant: {
 20 |       primary: [
 21 |         'border-transparent',
 22 |         'text-white dark:text-white',
 23 |         'bg-accent dark:bg-accent',
 24 |         'hover:bg-accent/90 dark:hover:bg-accent/90',
 25 |         'disabled:bg-accent/50 disabled:text-white/70',
 26 |         'disabled:dark:bg-accent/30 disabled:dark:text-white/50',
 27 |       ],
 28 |       secondary: [
 29 |         'border border-gray-200 dark:border-gray-700',
 30 |         'text-gray-700 dark:text-gray-200',
 31 |         'bg-gray-50 dark:bg-gray-800',
 32 |         'hover:bg-gray-100 dark:hover:bg-gray-750',
 33 |         'disabled:bg-gray-50 disabled:text-gray-400',
 34 |         'disabled:dark:bg-gray-800 disabled:dark:text-gray-500',
 35 |       ],
 36 |       light: [
 37 |         'shadow-none',
 38 |         'border-transparent',
 39 |         'text-gray-900 dark:text-gray-50',
 40 |         'bg-gray-200 dark:bg-gray-900',
 41 |         'hover:bg-gray-300/70 dark:hover:bg-gray-800/80',
 42 |         'disabled:bg-gray-100 disabled:text-gray-400',
 43 |         'disabled:dark:bg-gray-800 disabled:dark:text-gray-600',
 44 |       ],
 45 |       ghost: [
 46 |         'shadow-none',
 47 |         'border-transparent',
 48 |         'text-gray-900 dark:text-gray-50',
 49 |         'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/80',
 50 |         'disabled:text-gray-400',
 51 |         'disabled:dark:text-gray-600',
 52 |       ],
 53 |       destructive: [
 54 |         'text-white',
 55 |         'border-transparent',
 56 |         'bg-red-600 dark:bg-red-700',
 57 |         'hover:bg-red-700 dark:hover:bg-red-600',
 58 |         'disabled:bg-red-300 disabled:text-white',
 59 |         'disabled:dark:bg-red-950 disabled:dark:text-red-400',
 60 |       ],
 61 |     },
 62 |     size: {
 63 |       xs: 'h-6 px-2 text-xs',
 64 |       sm: 'h-8 px-3 text-sm',
 65 |       md: 'h-10 px-4 text-sm',
 66 |       lg: 'h-11 px-8 text-base',
 67 |       xl: 'h-12 px-8 text-base',
 68 |     },
 69 |     flat: {
 70 |       true: 'shadow-none',
 71 |       false: 'shadow-sm',
 72 |     },
 73 |   },
 74 |   defaultVariants: {
 75 |     variant: 'primary',
 76 |     size: 'sm',
 77 |     flat: false,
 78 |   },
 79 | })
 80 | 
 81 | interface ButtonProps
 82 |   extends React.ComponentPropsWithoutRef<'button'>,
 83 |     VariantProps<typeof buttonVariants> {
 84 |   asChild?: boolean
 85 |   isLoading?: boolean
 86 |   loadingText?: string
 87 | }
 88 | 
 89 | const Button = (
 90 |     { ref: forwardedRef, asChild, isLoading = false, loadingText, className, disabled, variant, size, flat, children, ...props }: ButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> },
 91 |   ) => {
 92 |     const Component = asChild ? Slot : m.button
 93 |     return (
 94 |       // @ts-expect-error
 95 |       <Component
 96 |         ref={forwardedRef}
 97 |         className={cx(buttonVariants({ variant, size, flat }), className)}
 98 |         disabled={disabled || isLoading}
 99 |         data-tremor-id="tremor-raw"
100 |         whileTap={{ scale: 0.95 }}
101 |         {...props}
102 |       >
103 |         {isLoading ? (
104 |           <span className="pointer-events-none inline-flex items-center justify-center gap-1.5">
105 |             <RiLoader2Fill
106 |               className={cx(
107 |                 'shrink-0 animate-spin',
108 |                 size === 'xs' || size === 'sm' ? 'size-3' : 'size-4',
109 |               )}
110 |               aria-hidden="true"
111 |             />
112 |             <span className="sr-only">{loadingText ?? 'Loading'}</span>
113 |             <span className="inline-block">{loadingText ?? children}</span>
114 |           </span>
115 |         ) : (
116 |           children
117 |         )}
118 |       </Component>
119 |     )
120 |   }
121 | 
122 | Button.displayName = 'Button'
123 | 
124 | export { Button, type ButtonProps, buttonVariants }
125 | 


--------------------------------------------------------------------------------
/src/components/ui/button/MotionButton.tsx:
--------------------------------------------------------------------------------
 1 | import type { HTMLMotionProps } from 'motion/react'
 2 | import { m } from 'motion/react'
 3 | 
 4 | export const MotionButtonBase = ({ ref, children, ...rest }: HTMLMotionProps<'button'> & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
 5 |   return (
 6 |     <m.button
 7 |       initial={true}
 8 |       whileFocus={{ scale: 1.02 }}
 9 |       whileHover={{ scale: 1.02 }}
10 |       whileTap={{ scale: 0.95 }}
11 |       {...rest}
12 |       ref={ref}
13 |     >
14 |       {children}
15 |     </m.button>
16 |   )
17 | }
18 | 
19 | MotionButtonBase.displayName = 'MotionButtonBase'
20 | 


--------------------------------------------------------------------------------
/src/components/ui/button/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Button'
2 | export * from './MotionButton'
3 | 


--------------------------------------------------------------------------------
/src/components/ui/context-menu/index.ts:
--------------------------------------------------------------------------------
1 | export * from './context-menu'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/datetime/index.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   differenceInDays,
  3 |   differenceInHours,
  4 |   differenceInMinutes,
  5 |   differenceInSeconds,
  6 |   format,
  7 |   formatDistance,
  8 | } from 'date-fns'
  9 | import type { FC } from 'react'
 10 | import { useEffect, useRef, useState } from 'react'
 11 | 
 12 | import { stopPropagation } from '~/lib/dom'
 13 | 
 14 | import {
 15 |   Tooltip,
 16 |   TooltipContent,
 17 |   TooltipPortal,
 18 |   TooltipTrigger,
 19 | } from '../tooltip'
 20 | 
 21 | const formatTemplateString = 'MMM d, yyyy h:mm a'
 22 | 
 23 | const formatTime = (
 24 |   date: string | Date,
 25 |   relativeBeforeDay?: number,
 26 |   template = formatTemplateString,
 27 | ) => {
 28 |   const dateObj = typeof date === 'string' ? new Date(date) : date
 29 | 
 30 |   if (
 31 |     relativeBeforeDay &&
 32 |     Math.abs(differenceInDays(dateObj, new Date())) > relativeBeforeDay
 33 |   ) {
 34 |     return format(dateObj, template)
 35 |   }
 36 |   return formatDistance(dateObj, new Date(), { addSuffix: false })
 37 | }
 38 | 
 39 | const getUpdateInterval = (date: string | Date, relativeBeforeDay?: number) => {
 40 |   if (!relativeBeforeDay) return null
 41 |   const dateObj = typeof date === 'string' ? new Date(date) : date
 42 |   const diffInSeconds = Math.abs(differenceInSeconds(dateObj, new Date()))
 43 |   if (diffInSeconds <= 60) {
 44 |     return 1000 // Update every second
 45 |   }
 46 |   const diffInMinutes = Math.abs(differenceInMinutes(dateObj, new Date()))
 47 |   if (diffInMinutes <= 60) {
 48 |     return 60000 // Update every minute
 49 |   }
 50 |   const diffInHours = Math.abs(differenceInHours(dateObj, new Date()))
 51 |   if (diffInHours <= 24) {
 52 |     return 3600000 // Update every hour
 53 |   }
 54 |   const diffInDays = Math.abs(differenceInDays(dateObj, new Date()))
 55 |   if (diffInDays <= relativeBeforeDay) {
 56 |     return 86400000 // Update every day
 57 |   }
 58 |   return null // No need to update
 59 | }
 60 | 
 61 | export const RelativeTime: FC<{
 62 |   date: string | Date
 63 |   displayAbsoluteTimeAfterDay?: number
 64 |   dateFormatTemplate?: string
 65 | }> = (props) => {
 66 |   const {
 67 |     displayAbsoluteTimeAfterDay = 29,
 68 |     dateFormatTemplate = formatTemplateString,
 69 |   } = props
 70 |   const [relative, setRelative] = useState<string>(() =>
 71 |     formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate),
 72 |   )
 73 | 
 74 |   const timerRef = useRef<any>(null)
 75 | 
 76 |   useEffect(() => {
 77 |     const updateRelativeTime = () => {
 78 |       setRelative(
 79 |         formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate),
 80 |       )
 81 |       const updateInterval = getUpdateInterval(
 82 |         props.date,
 83 |         displayAbsoluteTimeAfterDay,
 84 |       )
 85 | 
 86 |       if (updateInterval !== null) {
 87 |         timerRef.current = setTimeout(updateRelativeTime, updateInterval)
 88 |       }
 89 |     }
 90 | 
 91 |     updateRelativeTime()
 92 | 
 93 |     return () => {
 94 |       clearTimeout(timerRef.current)
 95 |     }
 96 |   }, [props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate])
 97 |   const formated = format(props.date, dateFormatTemplate)
 98 | 
 99 |   if (formated === relative) {
100 |     return <>{relative}</>
101 |   }
102 |   return (
103 |     <Tooltip>
104 |       {/* https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904 */}
105 |       <TooltipTrigger onFocusCapture={stopPropagation} className="tabular-nums">
106 |         {relative.replace('about ', '')} ago
107 |       </TooltipTrigger>
108 | 
109 |       <TooltipPortal>
110 |         <TooltipContent>{formated}</TooltipContent>
111 |       </TooltipPortal>
112 |     </Tooltip>
113 |   )
114 | }
115 | 


--------------------------------------------------------------------------------
/src/components/ui/divider/Divider.tsx:
--------------------------------------------------------------------------------
 1 | import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react'
 2 | 
 3 | import { clsxm } from '~/lib/cn'
 4 | 
 5 | export const Divider: FC<
 6 |   DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>
 7 | > = (props) => {
 8 |   const { className, ...rest } = props
 9 |   return (
10 |     <hr
11 |       className={clsxm(
12 |         'my-4 h-[0.5px] border-0 bg-black !bg-opacity-30 dark:bg-white',
13 |         className,
14 |       )}
15 |       {...rest}
16 |     />
17 |   )
18 | }
19 | 
20 | export const DividerVertical: FC<
21 |   DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
22 | > = (props) => {
23 |   const { className, ...rest } = props
24 |   return (
25 |     <span
26 |       className={clsxm(
27 |         'mx-4 inline-block h-full w-[0.5px] select-none bg-black text-transparent !opacity-20 dark:bg-white',
28 |         className,
29 |       )}
30 |       {...rest}
31 |     >
32 |       w
33 |     </span>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/ui/divider/PanelSpliter.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | import { useMeasure } from '~/hooks/common/useMeasure'
 4 | import { clsxm } from '~/lib/cn'
 5 | 
 6 | import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
 7 | 
 8 | export const PanelSplitter = (
 9 |   props: React.DetailedHTMLProps<
10 |     React.HTMLAttributes<HTMLDivElement>,
11 |     HTMLDivElement
12 |   > & {
13 |     isDragging?: boolean
14 |     cursor?: string
15 | 
16 |     tooltip?: React.ReactNode
17 |   },
18 | ) => {
19 |   const { isDragging, cursor, tooltip, ...rest } = props
20 | 
21 |   React.useEffect(() => {
22 |     if (!isDragging) return
23 |     const $css = document.createElement('style')
24 | 
25 |     $css.innerHTML = `
26 |       * {
27 |         cursor: ${cursor} !important;
28 |       }
29 |     `
30 | 
31 |     document.head.append($css)
32 |     return () => {
33 |       $css.remove()
34 |     }
35 |   }, [cursor, isDragging])
36 | 
37 |   const [ref, { height }] = useMeasure()
38 | 
39 |   const El = (
40 |     <div
41 |       tabIndex={-1}
42 |       ref={ref}
43 |       {...rest}
44 |       className={clsxm(
45 |         'absolute inset-0 z-[3] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500',
46 |         isDragging ? 'bg-accent' : '',
47 |       )}
48 |     />
49 |   )
50 | 
51 |   return (
52 |     <div className="relative h-full w-0 shrink-0" data-hide-in-print>
53 |       {tooltip ? (
54 |         <Tooltip>
55 |           <TooltipTrigger>{El}</TooltipTrigger>
56 |           <TooltipContent sideOffset={height / 2}>{tooltip}</TooltipContent>
57 |         </Tooltip>
58 |       ) : (
59 |         El
60 |       )}
61 |     </div>
62 |   )
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/ui/divider/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Divider'
2 | export * from './PanelSpliter'
3 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu/DropdownMenu.tsx:
--------------------------------------------------------------------------------
  1 | import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
  2 | import * as React from 'react'
  3 | 
  4 | import { cn } from '~/lib/cn'
  5 | 
  6 | import { RootPortal } from '../portal'
  7 | 
  8 | const DropdownMenu: typeof DropdownMenuPrimitive.Root = (props) => {
  9 |   return <DropdownMenuPrimitive.Root {...props} />
 10 | }
 11 | 
 12 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 13 | 
 14 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 15 | 
 16 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 17 | 
 18 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 19 | 
 20 | const DropdownMenuContent = ({
 21 |   ref,
 22 |   className,
 23 |   sideOffset = 4,
 24 |   ...props
 25 | }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
 26 |   ref?: React.RefObject<React.ElementRef<
 27 |     typeof DropdownMenuPrimitive.Content
 28 |   > | null>
 29 | }) => {
 30 |   return (
 31 |     <RootPortal>
 32 |       <DropdownMenuPrimitive.Content
 33 |         ref={ref}
 34 |         sideOffset={sideOffset}
 35 |         className={cn(
 36 |           'shadow-context-menu z-50 min-w-32 overflow-hidden rounded-md border bg-base-100 p-1 text-base-content',
 37 |           'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 38 |           '!outline-none !ring-0',
 39 |           className,
 40 |         )}
 41 |         {...props}
 42 |       />
 43 |     </RootPortal>
 44 |   )
 45 | }
 46 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 47 | 
 48 | const DropdownMenuItem = ({
 49 |   ref,
 50 |   className,
 51 |   inset,
 52 |   icon,
 53 |   active,
 54 |   ...props
 55 | }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 56 |   inset?: boolean
 57 |   icon?: React.ReactNode | ((props?: { isActive?: boolean }) => React.ReactNode)
 58 |   active?: boolean
 59 | } & {
 60 |   ref?: React.RefObject<React.ElementRef<
 61 |     typeof DropdownMenuPrimitive.Item
 62 |   > | null>
 63 | }) => (
 64 |   <DropdownMenuPrimitive.Item
 65 |     ref={ref}
 66 |     className={cn(
 67 |       'flex relative cursor-menu select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
 68 |       'hover:bg-base-200 data-[state=open]:bg-base-200 dark:hover:bg-neutral-700 dark:data-[state=active]:bg-neutral-700',
 69 |       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 70 |       'focus-within:!outline-transparent',
 71 |       'focus-within:!ring-0',
 72 |       inset && 'pl-8',
 73 |       className,
 74 |     )}
 75 |     {...props}
 76 |   >
 77 |     {!!icon && (
 78 |       <span className="mr-1.5 inline-flex size-4 items-center justify-center">
 79 |         {typeof icon === 'function' ? icon({ isActive: active }) : icon}
 80 |       </span>
 81 |     )}
 82 |     {props.children}
 83 |     {/* Justify Fill */}
 84 |     {!!icon && <span className="ml-1.5 size-4" />}
 85 |   </DropdownMenuPrimitive.Item>
 86 | )
 87 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 88 | 
 89 | const DropdownMenuCheckboxItem = ({
 90 |   ref,
 91 |   className,
 92 |   children,
 93 |   checked,
 94 |   ...props
 95 | }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
 96 |   ref?: React.RefObject<React.ElementRef<
 97 |     typeof DropdownMenuPrimitive.CheckboxItem
 98 |   > | null>
 99 | }) => (
100 |   <DropdownMenuPrimitive.CheckboxItem
101 |     ref={ref}
102 |     className={cn(
103 |       'flex relative cursor-menu select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
104 |       'hover:bg-base-200 data-[state=open]:bg-base-200 dark:hover:bg-neutral-700 dark:data-[state=open]:bg-neutral-700',
105 |       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
106 |       className,
107 |     )}
108 |     checked={checked}
109 |     {...props}
110 |   >
111 |     <span className="flex absolute left-2 size-3.5 items-center justify-center">
112 |       <DropdownMenuPrimitive.ItemIndicator>
113 |         <i className="i-mingcute-checkbox-line size-4" />
114 |       </DropdownMenuPrimitive.ItemIndicator>
115 |     </span>
116 |     {children}
117 |   </DropdownMenuPrimitive.CheckboxItem>
118 | )
119 | DropdownMenuCheckboxItem.displayName =
120 |   DropdownMenuPrimitive.CheckboxItem.displayName
121 | 
122 | const DropdownMenuLabel = ({
123 |   ref,
124 |   className,
125 |   inset,
126 |   ...props
127 | }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
128 |   inset?: boolean
129 | } & {
130 |   ref?: React.RefObject<React.ElementRef<
131 |     typeof DropdownMenuPrimitive.Label
132 |   > | null>
133 | }) => (
134 |   <DropdownMenuPrimitive.Label
135 |     ref={ref}
136 |     className={cn(
137 |       'px-2 py-1.5 text-sm font-semibold',
138 |       inset && 'pl-8',
139 |       className,
140 |     )}
141 |     {...props}
142 |   />
143 | )
144 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
145 | 
146 | const DropdownMenuSeparator = ({
147 |   ref,
148 |   className,
149 |   ...props
150 | }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
151 |   ref?: React.RefObject<React.ElementRef<
152 |     typeof DropdownMenuPrimitive.Separator
153 |   > | null>
154 | }) => (
155 |   <DropdownMenuPrimitive.Separator
156 |     ref={ref}
157 |     className={cn('-mx-1 my-1 h-px bg-border', className)}
158 |     {...props}
159 |   />
160 | )
161 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
162 | 
163 | const DropdownMenuShortcut = ({
164 |   className,
165 |   ...props
166 | }: React.HTMLAttributes<HTMLSpanElement>) => (
167 |   <span
168 |     className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
169 |     {...props}
170 |   />
171 | )
172 | DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
173 | 
174 | export {
175 |   DropdownMenu,
176 |   DropdownMenuCheckboxItem,
177 |   DropdownMenuContent,
178 |   DropdownMenuGroup,
179 |   DropdownMenuItem,
180 |   DropdownMenuLabel,
181 |   DropdownMenuPortal,
182 |   DropdownMenuRadioGroup,
183 |   DropdownMenuSeparator,
184 |   DropdownMenuShortcut,
185 |   DropdownMenuTrigger,
186 | }
187 | 


--------------------------------------------------------------------------------
/src/components/ui/icons/ActivityType.tsx:
--------------------------------------------------------------------------------
 1 | import clsx from 'clsx'
 2 | 
 3 | export const ActivityType = ({
 4 |   type,
 5 |   state,
 6 | }: {
 7 |   type: string
 8 |   state?: string
 9 | }) => {
10 |   switch (type) {
11 |     case 'Issue': {
12 |       return (
13 |         <i
14 |           className={clsx(
15 |             'i-mingcute-question-line',
16 |             !state && 'text-green-500',
17 |             state === 'open' && 'text-green-500',
18 |           )}
19 |         />
20 |       )
21 |     }
22 |     case 'PullRequest': {
23 |       return (
24 |         <i
25 |           className={clsx(
26 |             'i-mingcute-git-pull-request-line',
27 |             !state && 'text-green-500',
28 |             state === 'open' && 'text-green-500',
29 |             state === 'merged' && 'i-mingcute-git-merge-line text-purple-500',
30 |             state === 'closed' &&
31 |               'i-mingcute-git-pull-request-close-line text-red-500',
32 |           )}
33 |         />
34 |       )
35 |     }
36 |     case 'Discussion': {
37 |       return <i className="i-mingcute-comment-line text-yellow-500" />
38 |     }
39 |     case 'CheckSuite': {
40 |       return <i className="i-mingcute-close-line text-red-500" />
41 |     }
42 |     case 'Release': {
43 |       return <i className="i-mingcute-tag-2-line text-green-500" />
44 |     }
45 |     default: {
46 |       return null
47 |     }
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/ui/input/Input.tsx:
--------------------------------------------------------------------------------
 1 | import type { DetailedHTMLProps, InputHTMLAttributes } from 'react'
 2 | 
 3 | import { useInputComposition } from '~/hooks/common/useInputComposition'
 4 | import { clsxm } from '~/lib/cn'
 5 | 
 6 | // This composition handler is not perfect
 7 | // @see https://foxact.skk.moe/use-composition-input
 8 | export const Input = ({
 9 |   ref,
10 |   className,
11 |   ...props
12 | }: Omit<
13 |   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
14 |   'ref'
15 | > & { ref?: React.RefObject<HTMLInputElement | null> }) => {
16 |   const inputProps = useInputComposition(props)
17 |   return (
18 |     <input
19 |       ref={ref}
20 |       className={clsxm(
21 |         'min-w-0 flex-auto appearance-none rounded-lg border ring-accent/20 duration-200 sm:text-sm lg:text-base',
22 |         'bg-base-100 px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 focus:outline-none focus:ring-2 dark:bg-zinc-700/[0.15]',
23 |         'border-border',
24 |         'focus:!border-accent/80 focus:!bg-accent/5 dark:text-zinc-200 dark:placeholder:text-zinc-500',
25 |         props.type === 'password'
26 |           ? 'font-mono placeholder:font-sans'
27 |           : 'font-sans',
28 |         className,
29 |       )}
30 |       {...props}
31 |       {...inputProps}
32 |     />
33 |   )
34 | }
35 | Input.displayName = 'Input'
36 | 


--------------------------------------------------------------------------------
/src/components/ui/input/TextArea.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import clsx from 'clsx'
  4 | import { m, useMotionTemplate, useMotionValue } from 'motion/react'
  5 | import type {
  6 |   DetailedHTMLProps,
  7 |   PropsWithChildren,
  8 |   TextareaHTMLAttributes,
  9 | } from 'react'
 10 | import { useCallback, useState } from 'react'
 11 | 
 12 | import { useInputComposition } from '~/hooks/common/useInputComposition'
 13 | import { clsxm } from '~/lib/cn'
 14 | 
 15 | const roundedMap = {
 16 |   sm: 'rounded-sm',
 17 |   md: 'rounded-md',
 18 |   lg: 'rounded-lg',
 19 |   xl: 'rounded-xl',
 20 |   '2xl': 'rounded-2xl',
 21 |   '3xl': 'rounded-3xl',
 22 |   default: 'rounded',
 23 | }
 24 | export const TextArea = ({
 25 |   ref,
 26 |   ...props
 27 | }: DetailedHTMLProps<
 28 |   TextareaHTMLAttributes<HTMLTextAreaElement>,
 29 |   HTMLTextAreaElement
 30 | > &
 31 |   PropsWithChildren<{
 32 |     wrapperClassName?: string
 33 |     onCmdEnter?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
 34 |     rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'default'
 35 |     bordered?: boolean
 36 |   }> & { ref?: React.RefObject<HTMLTextAreaElement | null> }) => {
 37 |   const {
 38 |     className,
 39 |     wrapperClassName,
 40 |     children,
 41 |     rounded = 'xl',
 42 |     bordered = true,
 43 |     onCmdEnter,
 44 |     onKeyDown,
 45 |     ...rest
 46 |   } = props
 47 |   const mouseX = useMotionValue(0)
 48 |   const mouseY = useMotionValue(0)
 49 |   const handleMouseMove = useCallback(
 50 |     ({ clientX, clientY, currentTarget }: React.MouseEvent) => {
 51 |       const bounds = currentTarget.getBoundingClientRect()
 52 |       mouseX.set(clientX - bounds.left)
 53 |       mouseY.set(clientY - bounds.top)
 54 |     },
 55 |     [mouseX, mouseY],
 56 |   )
 57 |   const handleKeyDown = useCallback(
 58 |     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
 59 |       if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
 60 |         onCmdEnter?.(e)
 61 |       }
 62 |       onKeyDown?.(e)
 63 |     },
 64 |     [onCmdEnter, onKeyDown],
 65 |   )
 66 |   const background = useMotionTemplate`radial-gradient(320px circle at ${mouseX}px ${mouseY}px, var(--spotlight-color) 0%, transparent 85%)`
 67 | 
 68 |   const inputProps = useInputComposition<HTMLTextAreaElement>(
 69 |     Object.assign({}, props, { onKeyDown: handleKeyDown }),
 70 |   )
 71 |   const [isFocus, setIsFocus] = useState(false)
 72 |   return (
 73 |     <div
 74 |       className={clsxm(
 75 |         'group relative h-full border ring-0 ring-accent/20 duration-200 [--spotlight-color:oklch(var(--a)_/_0.12)]',
 76 |         roundedMap[rounded],
 77 | 
 78 |         'border-transparent',
 79 |         isFocus && 'border-accent/80 bg-accent/5 ring-2',
 80 |         // 'bg-gray-200/50 dark:bg-zinc-800/50',
 81 |         'dark:text-zinc-200 dark:placeholder:text-zinc-500',
 82 |         wrapperClassName,
 83 |       )}
 84 |       onMouseMove={handleMouseMove}
 85 |     >
 86 |       <m.div
 87 |         className={clsx(
 88 |           'pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100',
 89 |           roundedMap[rounded],
 90 |         )}
 91 |         style={{ background }}
 92 |         aria-hidden="true"
 93 |       />
 94 | 
 95 |       {bordered && (
 96 |         <div
 97 |           className={clsx(
 98 |             'pointer-events-none absolute inset-0 z-0 border border-border',
 99 |             roundedMap[rounded],
100 |           )}
101 |           aria-hidden="true"
102 |         />
103 |       )}
104 |       <textarea
105 |         ref={ref}
106 |         className={clsxm(
107 |           'size-full resize-none bg-transparent',
108 |           'overflow-auto px-3 py-4',
109 |           '!outline-none',
110 |           'text-neutral-900/80 dark:text-slate-100/80',
111 |           roundedMap[rounded],
112 |           className,
113 |         )}
114 |         {...rest}
115 |         onFocus={(e) => {
116 |           setIsFocus(true)
117 |           rest.onFocus?.(e)
118 |         }}
119 |         onBlur={(e) => {
120 |           setIsFocus(false)
121 |           rest.onBlur?.(e)
122 |         }}
123 |         {...inputProps}
124 |       />
125 | 
126 |       {children}
127 |     </div>
128 |   )
129 | }
130 | TextArea.displayName = 'TextArea'
131 | 


--------------------------------------------------------------------------------
/src/components/ui/input/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Input'
2 | export * from './TextArea'
3 | 


--------------------------------------------------------------------------------
/src/components/ui/loading.tsx:
--------------------------------------------------------------------------------
 1 | import { clsxm } from '~/lib/cn'
 2 | 
 3 | interface LoadingCircleProps {
 4 |   size: 'small' | 'medium' | 'large'
 5 | }
 6 | 
 7 | const sizeMap = {
 8 |   small: 'text-md',
 9 |   medium: 'text-xl',
10 |   large: 'text-3xl',
11 | }
12 | export const LoadingCircle: Component<LoadingCircleProps> = ({
13 |   className,
14 |   size,
15 | }) => (
16 |   <div className={clsxm(sizeMap[size], className)}>
17 |     <i className="i-mingcute-loading-3-line animate-spin" />
18 |   </div>
19 | )
20 | 


--------------------------------------------------------------------------------
/src/components/ui/markdown/index.tsx:
--------------------------------------------------------------------------------
 1 | import 'github-markdown-css'
 2 | 
 3 | import * as React from 'react'
 4 | import ReactMarkdown from 'react-markdown'
 5 | import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 6 | import {
 7 |   atomOneDark,
 8 |   githubGist,
 9 | } from 'react-syntax-highlighter/dist/esm/styles/hljs'
10 | import rehypeRaw from 'rehype-raw'
11 | import remarkGfm from 'remark-gfm'
12 | 
13 | import { useIsDark } from '~/hooks/common'
14 | 
15 | interface MarkdownProps {
16 |   content: string
17 |   className?: string
18 | }
19 | 
20 | const CodeBlockContext = React.createContext<boolean>(false)
21 | 
22 | export const Markdown: React.FC<MarkdownProps> = ({
23 |   content,
24 |   className = '',
25 | }) => {
26 |   const theme = useIsDark() ? 'dark' : 'light'
27 | 
28 |   return (
29 |     <div className={`prose max-w-none dark:prose-invert ${className}`}>
30 |       <ReactMarkdown
31 |         remarkPlugins={[remarkGfm]}
32 |         rehypePlugins={[rehypeRaw]}
33 |         components={{
34 |           a: ({ node, ...props }) => (
35 |             <a target="_blank" rel="noopener noreferrer" {...props} />
36 |           ),
37 | 
38 |           pre: ({ node, className, children, ...props }: any) => {
39 |             return (
40 |               <CodeBlockContext value={true}>
41 |                 <pre className={className} {...props}>
42 |                   {children}
43 |                 </pre>
44 |               </CodeBlockContext>
45 |             )
46 |           },
47 |           code: ({ node, className, children, ...props }: any) => {
48 |             // eslint-disable-next-line react-hooks/rules-of-hooks
49 |             const isCodeBlock = React.use(CodeBlockContext)
50 |             if (!isCodeBlock)
51 |               return (
52 |                 <code className={className} {...props}>
53 |                   {children}
54 |                 </code>
55 |               )
56 |             const match = /language-(\w+)/.exec(className || '')
57 |             const lang = match ? match[1] : ''
58 |             const code = String(children).replace(/\n$/, '')
59 | 
60 |             return (
61 |               <SyntaxHighlighter
62 |                 style={theme === 'dark' ? atomOneDark : githubGist}
63 |                 language={lang}
64 |                 PreTag="div"
65 |                 {...props}
66 |               >
67 |                 {code}
68 |               </SyntaxHighlighter>
69 |             )
70 |           },
71 |         }}
72 |       >
73 |         {content}
74 |       </ReactMarkdown>
75 |     </div>
76 |   )
77 | }
78 | 


--------------------------------------------------------------------------------
/src/components/ui/portal/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { FC, PropsWithChildren } from 'react'
 2 | import { createPortal } from 'react-dom'
 3 | 
 4 | import { useRootPortal } from './provider'
 5 | 
 6 | export const RootPortal: FC<
 7 |   {
 8 |     to?: HTMLElement | null
 9 |   } & PropsWithChildren
10 | > = (props) => {
11 |   const to = useRootPortal()
12 | 
13 |   if (props.to === null) return props.children
14 | 
15 |   return createPortal(props.children, props.to || to || document.body)
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/ui/portal/provider.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext } from 'react'
 2 | 
 3 | export const useRootPortal = () => {
 4 |   const ctx = useContext(RootPortalContext)
 5 | 
 6 |   return ctx || document.body
 7 | }
 8 | 
 9 | const RootPortalContext = createContext<HTMLElement | undefined>(undefined)
10 | 
11 | export const RootPortalProvider = RootPortalContext.Provider
12 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/ScrollArea.tsx:
--------------------------------------------------------------------------------
  1 | import * as ScrollAreaBase from '@radix-ui/react-scroll-area'
  2 | import * as React from 'react'
  3 | 
  4 | import { cn } from '~/lib/cn'
  5 | import { stopPropagation } from '~/lib/dom'
  6 | 
  7 | import { ScrollElementContext } from './ctx'
  8 | import styles from './index.module.css'
  9 | 
 10 | const Corner = React.forwardRef<
 11 |   React.ElementRef<typeof ScrollAreaBase.Corner>,
 12 |   React.ComponentPropsWithoutRef<typeof ScrollAreaBase.Corner>
 13 | >(({ className, ...rest }, forwardedRef) => (
 14 |   <ScrollAreaBase.Corner
 15 |     {...rest}
 16 |     ref={forwardedRef}
 17 |     className={cn('bg-accent', className)}
 18 |   />
 19 | ))
 20 | 
 21 | Corner.displayName = 'ScrollArea.Corner'
 22 | 
 23 | const Thumb = React.forwardRef<
 24 |   React.ElementRef<typeof ScrollAreaBase.Thumb>,
 25 |   React.ComponentPropsWithoutRef<typeof ScrollAreaBase.Thumb>
 26 | >(({ className, ...rest }, forwardedRef) => (
 27 |   <ScrollAreaBase.Thumb
 28 |     {...rest}
 29 |     onClick={(e) => {
 30 |       e.stopPropagation()
 31 |       rest.onClick?.(e)
 32 |     }}
 33 |     ref={forwardedRef}
 34 |     className={cn(
 35 |       'relative w-full flex-1 rounded-xl transition-colors duration-150',
 36 |       'bg-gray-300 hover:bg-neutral-400/80',
 37 |       'active:bg-neutral-400',
 38 |       'dark:bg-neutral-500 hover:dark:bg-neutral-400/80 active:dark:bg-neutral-400',
 39 |       'before:absolute before:-left-1/2 before:-top-1/2 before:h-full before:min-h-[44]',
 40 |       'before:w-full before:min-w-[44] before:-translate-x-full before:-translate-y-full before:content-[""]',
 41 | 
 42 |       className,
 43 |     )}
 44 |   />
 45 | ))
 46 | Thumb.displayName = 'ScrollArea.Thumb'
 47 | 
 48 | const Scrollbar = React.forwardRef<
 49 |   React.ElementRef<typeof ScrollAreaBase.Scrollbar>,
 50 |   React.ComponentPropsWithoutRef<typeof ScrollAreaBase.Scrollbar>
 51 | >(({ className, children, ...rest }, forwardedRef) => {
 52 |   const { orientation = 'vertical' } = rest
 53 |   return (
 54 |     <ScrollAreaBase.Scrollbar
 55 |       {...rest}
 56 |       ref={forwardedRef}
 57 |       className={cn(
 58 |         'flex w-2.5 touch-none select-none p-0.5',
 59 |         orientation === 'horizontal'
 60 |           ? `h-2.5 w-full flex-col`
 61 |           : `w-2.5 flex-row`,
 62 |         'z-[3] animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
 63 |         className,
 64 |       )}
 65 |     >
 66 |       {children}
 67 |       <Thumb />
 68 |     </ScrollAreaBase.Scrollbar>
 69 |   )
 70 | })
 71 | Scrollbar.displayName = 'ScrollArea.Scrollbar'
 72 | 
 73 | const Viewport = React.forwardRef<
 74 |   React.ElementRef<typeof ScrollAreaBase.Viewport>,
 75 |   React.ComponentPropsWithoutRef<typeof ScrollAreaBase.Viewport> & {
 76 |     mask?: boolean
 77 |   }
 78 | >(({ className, mask = false, ...rest }, forwardedRef) => {
 79 |   const ref = React.useRef<HTMLDivElement>(null)
 80 |   const [shouldAddMask, setShouldAddMask] = React.useState(false)
 81 |   React.useLayoutEffect(() => {
 82 |     if (!mask) {
 83 |       setShouldAddMask(false)
 84 |       return
 85 |     }
 86 |     const $el = ref.current
 87 |     const $child = $el?.firstElementChild
 88 |     if (!$el) return
 89 |     if (!$child) return
 90 |     const handler = () => {
 91 |       setShouldAddMask($el.scrollHeight > $el.clientHeight + 48 * 2)
 92 |     }
 93 |     const observer = new ResizeObserver(handler)
 94 |     handler()
 95 |     observer.observe($child)
 96 | 
 97 |     return () => observer.disconnect()
 98 |   }, [mask])
 99 | 
100 |   React.useImperativeHandle(forwardedRef, () => ref.current as HTMLDivElement)
101 |   return (
102 |     <ScrollAreaBase.Viewport
103 |       {...rest}
104 |       ref={ref}
105 |       tabIndex={-1}
106 |       className={cn(
107 |         'block size-full',
108 |         shouldAddMask && styles['mask-scroller'],
109 |         className,
110 |       )}
111 |     />
112 |   )
113 | })
114 | Viewport.displayName = 'ScrollArea.Viewport'
115 | 
116 | const Root = React.forwardRef<
117 |   React.ElementRef<typeof ScrollAreaBase.Root>,
118 |   React.ComponentPropsWithoutRef<typeof ScrollAreaBase.Root>
119 | >(({ className, children, ...rest }, forwardedRef) => (
120 |   <ScrollAreaBase.Root
121 |     {...rest}
122 |     scrollHideDelay={0}
123 |     ref={forwardedRef}
124 |     className={cn('overflow-hidden', className)}
125 |   >
126 |     {children}
127 |     <Corner />
128 |   </ScrollAreaBase.Root>
129 | ))
130 | 
131 | Root.displayName = 'ScrollArea.Root'
132 | export const ScrollArea = React.forwardRef<
133 |   HTMLDivElement,
134 |   React.PropsWithChildren & {
135 |     rootClassName?: string
136 |     viewportClassName?: string
137 |     scrollbarClassName?: string
138 |     flex?: boolean
139 |     mask?: boolean
140 |     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void
141 |     orientation?: 'vertical' | 'horizontal'
142 |   }
143 | >(
144 |   (
145 |     {
146 |       flex,
147 |       children,
148 |       rootClassName,
149 |       viewportClassName,
150 |       scrollbarClassName,
151 |       mask = false,
152 |       onScroll,
153 |       orientation = 'vertical',
154 |     },
155 |     ref,
156 |   ) => {
157 |     const [viewportRef, setViewportRef] = React.useState<HTMLDivElement | null>(
158 |       null,
159 |     )
160 |     React.useImperativeHandle(ref, () => viewportRef as HTMLDivElement)
161 | 
162 |     return (
163 |       <ScrollElementContext.Provider value={viewportRef}>
164 |         <Root className={rootClassName}>
165 |           <Viewport
166 |             ref={setViewportRef}
167 |             onWheel={stopPropagation}
168 |             className={cn(
169 |               flex ? '[&>div]:!flex [&>div]:!flex-col' : '',
170 |               viewportClassName,
171 |             )}
172 |             mask={mask}
173 |             onScroll={onScroll}
174 |           >
175 |             {children}
176 |           </Viewport>
177 |           <Scrollbar orientation={orientation} className={scrollbarClassName} />
178 |         </Root>
179 |       </ScrollElementContext.Provider>
180 |     )
181 |   },
182 | )
183 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/ctx.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react'
2 | 
3 | export const ScrollElementContext = createContext<HTMLElement | null>(
4 |   document.documentElement,
5 | )
6 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/hooks.ts:
--------------------------------------------------------------------------------
  1 | import clsx from 'clsx'
  2 | import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
  3 | import { useCallback, useContext, useRef, useState } from 'react'
  4 | import { useEventCallback } from 'usehooks-ts'
  5 | 
  6 | import { ScrollElementContext } from './ctx'
  7 | 
  8 | const THRESHOLD = 0
  9 | export const useMaskScrollArea = <T extends HTMLElement = HTMLElement>({
 10 |   ref,
 11 |   size = 'base',
 12 |   element,
 13 |   selector,
 14 | }: {
 15 |   ref?: React.RefObject<HTMLElement | null>
 16 |   element?: HTMLElement
 17 |   size?: 'base' | 'lg'
 18 |   selector?: string
 19 | } = {}) => {
 20 |   const containerRef = useRef<T>(null)
 21 |   const [isScrollToBottom, setIsScrollToBottom] = useState(false)
 22 |   const [isScrollToTop, setIsScrollToTop] = useState(false)
 23 |   const [canScroll, setCanScroll] = useState(false)
 24 | 
 25 |   const getDomRef = useCallback(() => {
 26 |     let $ = containerRef.current || ref?.current || element
 27 | 
 28 |     if (!$) return
 29 | 
 30 |     if (selector) {
 31 |       $ = $.querySelector(selector) as HTMLElement
 32 |     }
 33 |     return $
 34 |   }, [ref, selector, element])
 35 |   const eventHandler = useEventCallback(() => {
 36 |     const $ = getDomRef()
 37 | 
 38 |     if (!$) return
 39 | 
 40 |     // if $ can not scroll
 41 |     if ($.scrollHeight <= $.clientHeight + 2) {
 42 |       setCanScroll(false)
 43 |       setIsScrollToBottom(false)
 44 |       setIsScrollToTop(false)
 45 |       return
 46 |     }
 47 | 
 48 |     setCanScroll(true)
 49 | 
 50 |     // if $ can scroll
 51 |     const isScrollToBottom =
 52 |       $.scrollTop + $.clientHeight >= $.scrollHeight - THRESHOLD
 53 |     const isScrollToTop = $.scrollTop <= THRESHOLD
 54 |     setIsScrollToBottom(isScrollToBottom)
 55 |     setIsScrollToTop(isScrollToTop)
 56 |   })
 57 |   useIsomorphicLayoutEffect(() => {
 58 |     const $ = getDomRef()
 59 |     if (!$) return
 60 | 
 61 |     $.addEventListener('scroll', eventHandler)
 62 | 
 63 |     return () => {
 64 |       $.removeEventListener('scroll', eventHandler)
 65 |     }
 66 |   }, [eventHandler, getDomRef, element])
 67 | 
 68 |   useIsomorphicLayoutEffect(() => {
 69 |     if (!ref?.current) {
 70 |       return
 71 |     }
 72 |     const $ = ref.current
 73 |     const resizeObserver = new ResizeObserver(() => {
 74 |       eventHandler()
 75 |     })
 76 |     eventHandler()
 77 |     resizeObserver.observe($)
 78 |     return () => {
 79 |       resizeObserver.disconnect()
 80 |     }
 81 |   }, [eventHandler, element])
 82 | 
 83 |   const postfixSize = {
 84 |     base: '',
 85 |     lg: '-lg',
 86 |   }[size]
 87 | 
 88 |   return [
 89 |     containerRef,
 90 |     canScroll
 91 |       ? clsx(
 92 |           isScrollToBottom && 'mask-t',
 93 |           isScrollToTop && 'mask-b',
 94 |           !isScrollToBottom && !isScrollToTop && 'mask-both',
 95 |         ) + postfixSize
 96 |       : '',
 97 |   ] as const
 98 | }
 99 | 
100 | /**
101 |  * Get the scroll area element when in radix scroll area
102 |  * @returns
103 |  */
104 | export const useScrollViewElement = () => useContext(ScrollElementContext)
105 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/index.module.css:
--------------------------------------------------------------------------------
 1 | .mask-scroller {
 2 |   mask:
 3 |     linear-gradient(white, transparent) 50% 0 / 100% 0 no-repeat,
 4 |     linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
 5 |     linear-gradient(transparent, white) 50% 100% / 100% 30px no-repeat;
 6 |   mask-composite: exclude;
 7 |   mask-size:
 8 |     100% calc((var(--scroll-progress-top) / 100) * 30px),
 9 |     100% 100%,
10 |     100% calc((100 - (100 * (var(--scroll-progress-bottom) / 100))) * 1px);
11 | }
12 | 
13 | @supports (animation-timeline: scroll()) {
14 |   .mask-scroller {
15 |     mask:
16 |       linear-gradient(white, transparent) 50% 0 / 100% 0 no-repeat,
17 |       linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
18 |       linear-gradient(transparent, white) 50% 100% / 100% 30px no-repeat;
19 |     mask-composite: exclude;
20 |     animation:
21 |       mask-up both linear,
22 |       mask-down both linear;
23 |     animation-timeline: scroll(self);
24 |     animation-range:
25 |       0 50px,
26 |       calc(100% - 50px) 100%;
27 |   }
28 | }
29 | @keyframes mask-up {
30 |   100% {
31 |     mask-size:
32 |       100% 30px,
33 |       100% 100%,
34 |       100% 30px;
35 |   }
36 | }
37 | @keyframes mask-down {
38 |   100% {
39 |     mask-size:
40 |       100% 30px,
41 |       100% 100%,
42 |       100% 0;
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/index.ts:
--------------------------------------------------------------------------------
1 | export * as ScrollArea from './ScrollArea'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs/index.tsx:
--------------------------------------------------------------------------------
  1 | import type { TabsProps } from '@radix-ui/react-tabs'
  2 | import * as TabsPrimitive from '@radix-ui/react-tabs'
  3 | import * as React from 'react'
  4 | import { tv } from 'tailwind-variants'
  5 | 
  6 | import { cx } from '~/lib/cn'
  7 | 
  8 | const TabsIdContext = React.createContext<string | null>(null)
  9 | const SetTabIndicatorContext = React.createContext<
 10 |   React.Dispatch<
 11 |     React.SetStateAction<{
 12 |       w: number
 13 |       x: number
 14 |     }>
 15 |   >
 16 | >(() => {})
 17 | 
 18 | const TabVariantContext = React.createContext<
 19 |   'default' | 'rounded' | undefined
 20 | >(undefined)
 21 | 
 22 | const TabIndicatorContext = React.createContext<{
 23 |   w: number
 24 |   x: number
 25 | } | null>(null)
 26 | 
 27 | const Tabs: React.FC<
 28 |   TabsProps &
 29 |     React.RefAttributes<HTMLDivElement> & {
 30 |       variant?: 'default' | 'rounded'
 31 |     }
 32 | > = ({ ref, ...props }) => {
 33 |   const { children, variant, ...rest } = props
 34 |   const [indicator, setIndicator] = React.useState({
 35 |     w: 0,
 36 |     x: 0,
 37 |   })
 38 |   const id = React.useId()
 39 | 
 40 |   return (
 41 |     <TabsIdContext value={id}>
 42 |       <SetTabIndicatorContext value={setIndicator}>
 43 |         <TabsPrimitive.Root {...rest} ref={ref}>
 44 |           <TabIndicatorContext value={indicator}>
 45 |             <TabVariantContext value={variant}>{children}</TabVariantContext>
 46 |           </TabIndicatorContext>
 47 |         </TabsPrimitive.Root>
 48 |       </SetTabIndicatorContext>
 49 |     </TabsIdContext>
 50 |   )
 51 | }
 52 | 
 53 | export interface TabsListProps
 54 |   extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {}
 55 | const TabsList = ({
 56 |   ref,
 57 |   className,
 58 |   ...props
 59 | }: TabsListProps & {
 60 |   ref?: React.RefObject<React.ElementRef<typeof TabsPrimitive.List> | null>
 61 | }) => {
 62 |   const indicator = React.use(TabIndicatorContext)
 63 |   const variant = React.use(TabVariantContext)
 64 | 
 65 |   return (
 66 |     <TabsPrimitive.List
 67 |       ref={ref}
 68 |       className={cx(
 69 |         'relative inline-flex items-center justify-center text-muted-foreground',
 70 |         className,
 71 |       )}
 72 |     >
 73 |       {props.children}
 74 | 
 75 |       <span
 76 |         className={cx(
 77 |           'absolute left-0 duration-200 will-change-[transform,width]',
 78 |           variant === 'rounded'
 79 |             ? 'inset-0 z-0 h-[calc(100%-12px)] my-auto rounded bg-muted'
 80 |             : 'bottom-0 h-0.5 rounded bg-accent',
 81 |         )}
 82 |         style={{
 83 |           width: indicator?.w,
 84 |           transform: `translate3d(${indicator?.x}px, 0, 0)`,
 85 |         }}
 86 |       />
 87 |     </TabsPrimitive.List>
 88 |   )
 89 | }
 90 | TabsList.displayName = TabsPrimitive.List.displayName
 91 | const tabsTriggerVariants = tv({
 92 |   variants: {
 93 |     variant: {
 94 |       default:
 95 |         'py-1.5 border-b-2 border-transparent data-[state=active]:text-accent dark:data-[state=active]:text-theme-accent-500',
 96 |       rounded: '!py-1 !px-3 bg-transparent',
 97 |     },
 98 |   },
 99 |   defaultVariants: {
100 |     variant: 'default',
101 |   },
102 | })
103 | 
104 | export interface TabsTriggerProps
105 |   extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {}
106 | const TabsTrigger = ({
107 |   ref,
108 |   className,
109 |   children,
110 |   ...props
111 | }: TabsTriggerProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
112 |   const variant = React.use(TabVariantContext)
113 |   const triggerRef = React.useRef<HTMLDivElement>(null)
114 |   React.useImperativeHandle(ref, () => triggerRef.current!, [])
115 | 
116 |   const setIndicator = React.use(SetTabIndicatorContext)
117 | 
118 |   React.useLayoutEffect(() => {
119 |     if (!triggerRef.current) return
120 | 
121 |     const handler = () => {
122 |       const trigger = triggerRef.current as HTMLElement
123 |       const isSelect = trigger.dataset.state === 'active'
124 |       if (isSelect) {
125 |         setIndicator({
126 |           w: trigger.clientWidth,
127 |           x: trigger.offsetLeft,
128 |         })
129 |       }
130 |     }
131 | 
132 |     handler()
133 |     const trigger = triggerRef.current as HTMLElement
134 |     const ob = new MutationObserver(handler)
135 |     ob.observe(trigger, {
136 |       attributes: true,
137 |       attributeFilter: ['data-state'],
138 |     })
139 | 
140 |     return () => {
141 |       ob.disconnect()
142 |     }
143 |   }, [setIndicator])
144 | 
145 |   return (
146 |     <TabsPrimitive.Trigger
147 |       ref={triggerRef as any}
148 |       className={cx(
149 |         'inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-theme-foreground',
150 |         'group relative z-[1]',
151 |         tabsTriggerVariants({ variant }),
152 |       )}
153 |       {...props}
154 |     >
155 |       {children}
156 |     </TabsPrimitive.Trigger>
157 |   )
158 | }
159 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
160 | 
161 | const TabsContent = ({
162 |   ref,
163 |   className,
164 |   ...props
165 | }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
166 |   ref?: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content> | null>
167 | }) => (
168 |   <TabsPrimitive.Content
169 |     ref={ref}
170 |     className={cx(
171 |       'ring-offset-background mt-2 focus-visible:outline-none',
172 |       className,
173 |     )}
174 |     {...props}
175 |   />
176 | )
177 | TabsContent.displayName = TabsPrimitive.Content.displayName
178 | 
179 | export { Tabs, TabsContent, TabsList, TabsTrigger }
180 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Toaster as Sonner } from 'sonner'
 2 | 
 3 | import { useIsDark } from '~/hooks/common'
 4 | 
 5 | type ToasterProps = React.ComponentProps<typeof Sonner>
 6 | 
 7 | export const Toaster = ({ ...props }: ToasterProps) => (
 8 |   <Sonner
 9 |     theme={useIsDark() ? 'dark' : 'light'}
10 |     toastOptions={{
11 |       className: tw`pointer-events-auto group font-theme`,
12 |       classNames: {
13 |         content: 'min-w-0',
14 |         icon: tw`self-start translate-y-[2px]`,
15 |         actionButton: tw`font-sans font-medium`,
16 |         closeButton: tw`!border-border !bg-background transition-opacity will-change-opacity duration-200 opacity-0 group-hover:opacity-100`,
17 |       },
18 |     }}
19 |     {...props}
20 |   />
21 | )
22 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 2 | import { m } from 'motion/react'
 3 | import * as React from 'react'
 4 | 
 5 | import { clsxm } from '~/lib/cn'
 6 | 
 7 | import { tooltipStyle } from './styles'
 8 | 
 9 | const TooltipProvider = TooltipPrimitive.Provider
10 | 
11 | const Tooltip: typeof TooltipProvider = ({ children, ...props }) => (
12 |   <TooltipProvider {...props}>
13 |     <TooltipPrimitive.Tooltip>{children}</TooltipPrimitive.Tooltip>
14 |   </TooltipProvider>
15 | )
16 | 
17 | const TooltipTrigger = TooltipPrimitive.Trigger
18 | 
19 | const TooltipContent = ({ ref, className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { ref?: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content> | null> }) => (
20 |   <TooltipPrimitive.Content
21 |     ref={ref}
22 |     asChild
23 |     sideOffset={sideOffset}
24 |     className={clsxm(tooltipStyle.content, className)}
25 |     {...props}
26 |   >
27 |     <m.div
28 |       initial={{ opacity: 0.82, scale: 0.95 }}
29 |       animate={{ opacity: 1, scale: 1 }}
30 |       transition={{
31 |         type: 'spring',
32 |         tension: 280,
33 |         friction: 60,
34 | 
35 |         duration: 0.1,
36 |       }}
37 |     >
38 |       {/* https://github.com/radix-ui/primitives/discussions/868 */}
39 |       <TooltipPrimitive.Arrow className="z-50 fill-white [clip-path:inset(0_-10px_-10px_-10px)] dark:fill-neutral-950 dark:drop-shadow-[0_0_1px_theme(colors.white/0.5)]" />
40 |       {props.children}
41 |     </m.div>
42 |   </TooltipPrimitive.Content>
43 | )
44 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
45 | 
46 | export { Tooltip, TooltipContent, TooltipTrigger }
47 | 
48 | export { RootPortal as TooltipPortal } from '../portal'
49 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/styles.ts:
--------------------------------------------------------------------------------
 1 | export const tooltipStyle = {
 2 |   content: [
 3 |     'relative z-[101] bg-white px-2 py-1 text-foreground dark:bg-neutral-950',
 4 |     'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
 5 |     'rounded-lg text-sm',
 6 |     'max-w-[75ch] select-text',
 7 |     'drop-shadow data-[side=top]:shadow-tooltip-bottom data-[side=bottom]:shadow-tooltip-top',
 8 |     tw`dark:drop-shadow-[0_0_1px_theme(colors.white/0.5)]`,
 9 |   ],
10 | }
11 | 


--------------------------------------------------------------------------------
/src/database/constants.ts:
--------------------------------------------------------------------------------
1 | export const LOCAL_DB_NAME = 'LINEAR_DB'
2 | 


--------------------------------------------------------------------------------
/src/database/db.ts:
--------------------------------------------------------------------------------
 1 | import Dexie from 'dexie'
 2 | import { exportDB, importDB } from 'dexie-export-import'
 3 | 
 4 | import { LOCAL_DB_NAME } from './constants'
 5 | import {
 6 |   dbSchemaV1,
 7 |   dbSchemaV2,
 8 |   dbSchemaV3,
 9 |   dbSchemaV4,
10 |   dbSchemaV5,
11 | } from './db_schema'
12 | import type {
13 |   DB_Issue,
14 |   DB_Meta,
15 |   DB_Notification,
16 |   DB_PullRequest,
17 |   DB_Repo,
18 |   DB_RepoPin,
19 |   DB_User,
20 | } from './schemas'
21 | 
22 | export interface LocalDBSchemaMap {
23 |   repos: DB_Repo
24 |   notifications: DB_Notification
25 |   meta: DB_Meta
26 |   issues: DB_Issue
27 |   pullRequests: DB_PullRequest
28 |   repoPin: DB_RepoPin
29 |   user: DB_User
30 | }
31 | 
32 | // Define a local DB
33 | class BrowserDB extends Dexie {
34 |   public repos: BrowserDBTable<'repos'>
35 |   public notifications: BrowserDBTable<'notifications'>
36 |   public meta: BrowserDBTable<'meta'>
37 |   public issues: BrowserDBTable<'issues'>
38 |   public pullRequests: BrowserDBTable<'pullRequests'>
39 |   public repoPin: BrowserDBTable<'repoPin'>
40 |   public user: BrowserDBTable<'user'>
41 |   constructor() {
42 |     super(LOCAL_DB_NAME)
43 |     this.version(1).stores(dbSchemaV1)
44 |     this.version(2).stores(dbSchemaV2)
45 |     this.version(3).stores(dbSchemaV3)
46 |     this.version(4).stores(dbSchemaV4)
47 |     this.version(5).stores(dbSchemaV5)
48 | 
49 |     this.repos = this.table('repos')
50 |     this.notifications = this.table('notifications')
51 |     this.meta = this.table('meta')
52 |     this.issues = this.table('issues')
53 |     this.pullRequests = this.table('pullRequests')
54 |     this.repoPin = this.table('repoPin')
55 |     this.user = this.table('user')
56 |   }
57 | 
58 |   export() {
59 |     return exportDB(this)
60 |   }
61 | 
62 |   importDb(data: Blob) {
63 |     return importDB(data, this)
64 |   }
65 | 
66 |   clear() {
67 |     this.delete()
68 |     window.location.reload()
69 |   }
70 | }
71 | 
72 | export const browserDB = new BrowserDB()
73 | 
74 | // ================================================ //
75 | // ================================================ //
76 | // ================================================ //
77 | // ================================================ //
78 | // ================================================ //
79 | 
80 | // types helper
81 | export type BrowserDBSchema = {
82 |   [t in keyof LocalDBSchemaMap]: {
83 |     model: LocalDBSchemaMap[t]
84 |     table: Dexie.Table<LocalDBSchemaMap[t], string>
85 |   }
86 | }
87 | export type BrowserDBTable<T extends keyof LocalDBSchemaMap> =
88 |   BrowserDBSchema[T]['table']
89 | 


--------------------------------------------------------------------------------
/src/database/db_schema.ts:
--------------------------------------------------------------------------------
 1 | import type { LocalDBSchemaMap } from './db'
 2 | 
 3 | type SchemaType = Partial<Record<keyof LocalDBSchemaMap, string>>
 4 | export const dbSchemaV1: SchemaType = {
 5 |   notifications: '&id, updated_at, unread, last_read_at, repositoryId',
 6 |   repos: '&id',
 7 |   meta: '&name, value',
 8 | }
 9 | 
10 | export const dbSchemaV2: SchemaType = {
11 |   issues: '&id',
12 |   pullRequests: '&id',
13 | }
14 | 
15 | export const dbSchemaV3: SchemaType = {
16 |   repoPin: '&id, createdAt, order',
17 | }
18 | 
19 | export const dbSchemaV4: SchemaType = {
20 |   user: '&id',
21 | }
22 | 
23 | export const dbSchemaV5: SchemaType = {
24 |   user: '&id, login, isMe',
25 | }
26 | 


--------------------------------------------------------------------------------
/src/database/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare global {
 2 |   // This flag controls write data in indexedDB, if it's false, pass data insert to db
 3 |   // When app not ready, it's false, after hydrate data, it's true
 4 |   // Or set is false when disable indexedDB in setting
 5 | 
 6 |   export let __dbIsReady: boolean
 7 | 
 8 |   interface Window {
 9 |     __dbIsReady: boolean
10 |   }
11 | }
12 | 
13 | export {}
14 | 


--------------------------------------------------------------------------------
/src/database/index.ts:
--------------------------------------------------------------------------------
 1 | import { browserDB } from './db'
 2 | 
 3 | export * from './db'
 4 | export * from './schemas'
 5 | 
 6 | export const DB_NOT_READY_OR_DISABLED = 'Database is not ready or disabled'
 7 | /**
 8 |  * @description Check if database is ready
 9 |  * If users disabled data persist, it's always false, that means you can't do operation with database.
10 |  *
11 |  */
12 | 
13 | export const runTransactionInScope = <T>(
14 |   fn: (db: typeof browserDB) => T,
15 | ): T | typeof DB_NOT_READY_OR_DISABLED => {
16 |   if (!window.__dbIsReady) {
17 |     // Or, push to waiting queue
18 |     return DB_NOT_READY_OR_DISABLED
19 |   }
20 | 
21 |   return fn(browserDB)
22 | }
23 | 


--------------------------------------------------------------------------------
/src/database/schemas/base.ts:
--------------------------------------------------------------------------------
1 | export type DB_Base = {
2 |   id: string
3 | }
4 | 


--------------------------------------------------------------------------------
/src/database/schemas/index.ts:
--------------------------------------------------------------------------------
 1 | import type { components } from '@octokit/openapi-types'
 2 | 
 3 | export * from './base'
 4 | 
 5 | export type DB_PullRequest = components['schemas']['pull-request']
 6 | export type DB_Repo = components['schemas']['minimal-repository']
 7 | export type DB_Issue = components['schemas']['issue']
 8 | 
 9 | export type DB_Notification = Omit<
10 |   components['schemas']['thread'],
11 |   'repository'
12 | > & {
13 |   repositoryId: DB_Repo['id']
14 | }
15 | 
16 | export type DB_Meta = {
17 |   name: string
18 |   value: any
19 | }
20 | 
21 | export type DB_RepoPin = {
22 |   id: number
23 |   createdAt: Date
24 |   order: number
25 | }
26 | 
27 | export type DB_User = {
28 |   login: string
29 |   name: string
30 |   avatarUrl: string
31 |   id: number
32 | 
33 |   isMe: number
34 | }
35 | 


--------------------------------------------------------------------------------
/src/database/services/base.ts:
--------------------------------------------------------------------------------
 1 | import type Dexie from 'dexie'
 2 | import type { UpdateSpec } from 'dexie'
 3 | 
 4 | export interface Hydratable {
 5 |   hydrate: () => Promise<void>
 6 | }
 7 | 
 8 | export abstract class BaseService<T extends { id: string | number }> {
 9 |   constructor(public readonly table: Dexie.Table<T, string>) {}
10 | 
11 |   async upsert(data: T): Promise<unknown> {
12 |     return this.table.put(data)
13 |   }
14 | 
15 |   async upsertMany(data: T[]): Promise<string> {
16 |     return this.table.bulkPut(data)
17 |   }
18 | 
19 |   async findAll() {
20 |     return this.table.toArray()
21 |   }
22 | 
23 |   async patch(id: string, data: Partial<T>) {
24 |     const oldData = await this.table.get(id)
25 |     if (!oldData) return
26 |     await this.table.update(id, {
27 |       ...oldData,
28 |       ...data,
29 |     } as unknown as UpdateSpec<T>)
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/database/services/issue.ts:
--------------------------------------------------------------------------------
 1 | import { issueAction } from '~/store/issue/store'
 2 | 
 3 | import { browserDB } from '../db'
 4 | import type { DB_Issue } from '../schemas'
 5 | import type { Hydratable } from './base'
 6 | 
 7 | class IssueServiceStatic implements Hydratable {
 8 |   public table = browserDB.issues
 9 | 
10 |   async upsertMany(data: DB_Issue[]) {
11 |     await this.table.bulkPut(data)
12 |   }
13 | 
14 |   async hydrate() {
15 |     const data = await this.table.toArray()
16 |     issueAction.upsertMany(data)
17 |   }
18 | }
19 | 
20 | export const issueService = new IssueServiceStatic()
21 | 


--------------------------------------------------------------------------------
/src/database/services/meta.ts:
--------------------------------------------------------------------------------
 1 | import { useNotificationStore } from '~/store/notification/store'
 2 | 
 3 | import { browserDB } from '../db'
 4 | import type { Hydratable } from './base'
 5 | 
 6 | export enum MetaKey {
 7 |   LastModified = 'last-modified',
 8 | }
 9 | interface MetaKeyMap {
10 |   [MetaKey.LastModified]: string
11 | }
12 | 
13 | class MetaServiceStatic implements Hydratable {
14 |   public table = browserDB.meta
15 | 
16 |   async set<K extends MetaKey>(name: K, value: MetaKeyMap[K]) {
17 |     await this.table.put({ name, value })
18 |   }
19 | 
20 |   async get<K extends MetaKey>(name: K): Promise<MetaKeyMap[K] | undefined> {
21 |     const value = await this.table.get(name)
22 |     return value?.value
23 |   }
24 | 
25 |   async hydrate() {
26 |     const lastModified = await this.get(MetaKey.LastModified)
27 |     if (lastModified) {
28 |       useNotificationStore.setState((state) => ({
29 |         ...state,
30 |         lastModified: new Date(lastModified),
31 |       }))
32 |     }
33 |   }
34 | }
35 | 
36 | export const MetaService = new MetaServiceStatic()
37 | 


--------------------------------------------------------------------------------
/src/database/services/notification.ts:
--------------------------------------------------------------------------------
 1 | import type { components } from '@octokit/openapi-types'
 2 | 
 3 | import { NotificationStoreActions } from '~/store/notification/store'
 4 | import { RepoStoreActions } from '~/store/repo/store'
 5 | 
 6 | import type { BrowserDBTable } from '../db'
 7 | import { browserDB } from '../db'
 8 | import type { DB_Notification } from '../schemas'
 9 | import type { Hydratable } from './base'
10 | 
11 | class NotificationServiceStatic implements Hydratable {
12 |   private table: BrowserDBTable<'notifications'>
13 | 
14 |   constructor() {
15 |     this.table = browserDB.notifications
16 |   }
17 | 
18 |   async hydrate(): Promise<void> {
19 |     const notifications = await this.table.toArray()
20 |     NotificationStoreActions.upsertMany(notifications)
21 |   }
22 | 
23 |   async markRead(id: string) {
24 |     await this.table.update(id, {
25 |       unread: false,
26 |       last_read_at: new Date().toISOString(),
27 |     })
28 |   }
29 | 
30 |   async upsertMany(data: components['schemas']['thread'][]) {
31 |     const insertedData: DB_Notification[] = data.map(
32 |       ({ repository, ...n }) => ({
33 |         repositoryId: repository.id,
34 |         ...n,
35 |       }),
36 |     )
37 | 
38 |     const repos = data.map(({ repository }) => repository)
39 |     await Promise.all([
40 |       this.table.bulkPut(insertedData),
41 | 
42 |       RepoStoreActions.upsertMany(repos),
43 |     ])
44 |     return insertedData
45 |   }
46 | }
47 | 
48 | export const NotificationService = new NotificationServiceStatic()
49 | 


--------------------------------------------------------------------------------
/src/database/services/pull-request.ts:
--------------------------------------------------------------------------------
 1 | import { pullRequestAction } from '~/store/pull-request/store'
 2 | 
 3 | import { browserDB } from '../db'
 4 | import type { DB_PullRequest } from '../schemas'
 5 | import type { Hydratable } from './base'
 6 | 
 7 | class PullRequestServiceStatic implements Hydratable {
 8 |   public table = browserDB.pullRequests
 9 | 
10 |   async upsertMany(data: DB_PullRequest[]) {
11 |     await this.table.bulkPut(data)
12 |   }
13 | 
14 |   async hydrate() {
15 |     const data = await this.table.toArray()
16 |     pullRequestAction.upsertMany(data)
17 |   }
18 | }
19 | 
20 | export const pullRequestService = new PullRequestServiceStatic()
21 | 


--------------------------------------------------------------------------------
/src/database/services/repo-pin.ts:
--------------------------------------------------------------------------------
 1 | import { repoPinAction } from '~/store/repo-pin/store'
 2 | 
 3 | import { browserDB } from '../db'
 4 | import type { DB_RepoPin } from '../schemas'
 5 | import type { Hydratable } from './base'
 6 | 
 7 | class RepoPinServiceStatic implements Hydratable {
 8 |   public table = browserDB.repoPin
 9 | 
10 |   async hydrate() {
11 |     const data = await this.table.toArray()
12 |     repoPinAction.upsertMany(data)
13 |   }
14 | 
15 |   async upsertMany(data: DB_RepoPin[]) {
16 |     await this.table.bulkPut(data)
17 |   }
18 | 
19 |   async deleteMany(ids: string[]) {
20 |     await this.table.bulkDelete(ids)
21 |   }
22 | }
23 | 
24 | export const RepoPinService = new RepoPinServiceStatic()
25 | 


--------------------------------------------------------------------------------
/src/database/services/repo.ts:
--------------------------------------------------------------------------------
 1 | import type { components } from '@octokit/openapi-types'
 2 | 
 3 | import { RepoStoreActions } from '~/store/repo/store'
 4 | 
 5 | import { browserDB } from '../db'
 6 | import type { DB_Repo } from '../schemas'
 7 | import type { Hydratable } from './base'
 8 | import { BaseService } from './base'
 9 | 
10 | class RepoServiceStatic extends BaseService<DB_Repo> implements Hydratable {
11 |   constructor() {
12 |     super(browserDB.repos)
13 |   }
14 | 
15 |   async hydrate(): Promise<void> {
16 |     const repos = await this.table.toArray()
17 |     RepoStoreActions.upsertManyInStore(repos)
18 |   }
19 | 
20 |   async upsert(
21 |     data: components['schemas']['minimal-repository'],
22 |   ): Promise<unknown> {
23 |     return super.upsert(data)
24 |   }
25 | }
26 | 
27 | export const RepoService = new RepoServiceStatic()
28 | 


--------------------------------------------------------------------------------
/src/database/services/user.ts:
--------------------------------------------------------------------------------
 1 | import { setUser } from '~/atoms/user'
 2 | import { octokit } from '~/lib/octokit'
 3 | 
 4 | import { browserDB } from '../db'
 5 | import type { DB_User } from '../schemas'
 6 | import type { Hydratable } from './base'
 7 | import { BaseService } from './base'
 8 | 
 9 | class UserServiceStatic extends BaseService<DB_User> implements Hydratable {
10 |   constructor() {
11 |     super(browserDB.user)
12 |   }
13 | 
14 |   async fetchMe() {
15 |     const { data } = await octokit.rest.users.getAuthenticated()
16 |     await this.upsert({
17 |       avatarUrl: data.avatar_url,
18 |       id: data.id,
19 |       isMe: 1,
20 |       login: data.login,
21 |       name: data.name ?? data.login,
22 |     })
23 |     this.hydrate()
24 |     return data
25 |   }
26 | 
27 |   async upsertMany(users: DB_User[]) {
28 |     return super.upsertMany(users)
29 |   }
30 | 
31 |   async hydrate(): Promise<void> {
32 |     const users = await this.table.where('isMe').equals(1).toArray()
33 | 
34 |     if (users[0]) {
35 |       setUser(users[0])
36 |     }
37 |   }
38 | }
39 | 
40 | export const UserService = new UserServiceStatic()
41 | 


--------------------------------------------------------------------------------
/src/framer-lazy-feature.ts:
--------------------------------------------------------------------------------
1 | export { domMax as default } from 'motion/react'
2 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare global {
 2 |   export type Component<P = object> = FC<ComponentType & P>
 3 | 
 4 |   export type ComponentType<P = object> = {
 5 |     className?: string
 6 |   } & PropsWithChildren &
 7 |     P
 8 |   export type Nullable<T> = T | null | undefined
 9 | 
10 |   export const APP_DEV_CWD: string
11 |   export const APP_NAME: string
12 | 
13 |   /**
14 |    * This function is a macro, will replace in the build stage.
15 |    */
16 |   export function tw(strings: TemplateStringsArray, ...values: any[]): string
17 | }
18 | 
19 | declare interface ImportMetaEnv {
20 |   VITE_GH_TOKEN: string
21 | }
22 | export {}
23 | 


--------------------------------------------------------------------------------
/src/hooks/biz/useRouter.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback } from 'react'
 2 | 
 3 | import {
 4 |   getReadonlyRoute,
 5 |   getStableRouterNavigate,
 6 |   useReadonlyRouteSelector,
 7 | } from '~/atoms/route'
 8 | 
 9 | export const ALL_REPO = 'all'
10 | export type NotificationType = 'all' | 'unread'
11 | export const useRouteParams = () => {
12 |   const search = useReadonlyRouteSelector((state) => {
13 |     return {
14 |       type: state.searchParams.get('type') as NotificationType,
15 |       notificationId: state.searchParams.get('notificationId'),
16 |     }
17 |   })
18 |   const params = useReadonlyRouteSelector((state) => {
19 |     return { repoId: state.params.repo || ALL_REPO }
20 |   })
21 |   return { ...search, ...params }
22 | }
23 | 
24 | const routerParamsKey = ['repo']
25 | const routerSearchParamsKey = ['type', 'notificationId']
26 | 
27 | type RouterParams = {
28 |   repo?: string
29 |   notificationId?: string
30 | }
31 | 
32 | export const useRouter = () => {
33 |   return {
34 |     navigate: useCallback(
35 |       (params: {
36 |         type?: NotificationType
37 |         repo?: string
38 |         notificationId?: string
39 |       }) => {
40 |         const currentRouter = getReadonlyRoute()
41 | 
42 |         const filteredParams = routerParamsKey
43 |           .filter((key) => params[key])
44 |           .reduce(
45 |             (acc, key) => {
46 |               acc[key] = params[key]
47 |               return acc
48 |             },
49 |             {} as Record<string, string>,
50 |           )
51 | 
52 |         const nextParams = {
53 |           ...currentRouter.params,
54 |           ...filteredParams,
55 |         } as RouterParams
56 |         const filteredSearchParams = routerSearchParamsKey.filter(
57 |           (key) => params[key],
58 |         )
59 | 
60 |         const nextSearchParams = new URLSearchParams(currentRouter.searchParams)
61 |         filteredSearchParams.forEach((key) => {
62 |           if (params[key] === undefined) {
63 |             nextSearchParams.delete(key)
64 |           } else {
65 |             nextSearchParams.set(key, params[key])
66 |           }
67 |         })
68 | 
69 |         const finalPath = `/notifications/${nextParams.repo || ALL_REPO}?${nextSearchParams.toString()}`
70 |         const currentPath =
71 |           currentRouter.location.pathname +
72 |           currentRouter.searchParams.toString()
73 |         if (finalPath === currentPath) return
74 |         getStableRouterNavigate()?.(finalPath)
75 |       },
76 |       [],
77 |     ),
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/hooks/common/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDark'
2 | export * from './usePrevious'
3 | export * from './useRefValue'
4 | export * from './useTitle'
5 | 


--------------------------------------------------------------------------------
/src/hooks/common/useDark.ts:
--------------------------------------------------------------------------------
 1 | import { useAtomValue } from 'jotai'
 2 | import { atomWithStorage } from 'jotai/utils'
 3 | import { useCallback, useLayoutEffect } from 'react'
 4 | import { useMediaQuery } from 'usehooks-ts'
 5 | 
 6 | import { nextFrame } from '~/lib/dom'
 7 | import { jotaiStore } from '~/lib/jotai'
 8 | import { getStorageNS } from '~/lib/ns'
 9 | 
10 | const useDarkQuery = () => useMediaQuery('(prefers-color-scheme: dark)')
11 | type ColorMode = 'light' | 'dark' | 'system'
12 | const themeAtom = atomWithStorage(
13 |   'color-mode',
14 |   'system' as ColorMode,
15 |   undefined,
16 |   {
17 |     getOnInit: true,
18 |   },
19 | )
20 | 
21 | function useDarkWebApp() {
22 |   const systemIsDark = useDarkQuery()
23 |   const mode = useAtomValue(themeAtom)
24 |   return mode === 'dark' || (mode === 'system' && systemIsDark)
25 | }
26 | export const useIsDark = useDarkWebApp
27 | 
28 | export const useThemeAtomValue = () => useAtomValue(themeAtom)
29 | 
30 | const useSyncThemeWebApp = () => {
31 |   const colorMode = useAtomValue(themeAtom)
32 |   const systemIsDark = useDarkQuery()
33 |   useLayoutEffect(() => {
34 |     const realColorMode: Exclude<ColorMode, 'system'> =
35 |       colorMode === 'system' ? (systemIsDark ? 'dark' : 'light') : colorMode
36 |     document.documentElement.dataset.theme = realColorMode
37 |     disableTransition(['[role=switch]>*'])()
38 |   }, [colorMode, systemIsDark])
39 | }
40 | 
41 | export const useSyncThemeark = useSyncThemeWebApp
42 | 
43 | export const useSetTheme = () =>
44 |   useCallback((colorMode: ColorMode) => {
45 |     jotaiStore.set(themeAtom, colorMode)
46 |   }, [])
47 | 
48 | function disableTransition(disableTransitionExclude: string[] = []) {
49 |   const css = document.createElement('style')
50 |   css.append(
51 |     document.createTextNode(
52 |       `
53 | *${disableTransitionExclude.map((s) => `:not(${s})`).join('')} {
54 |   -webkit-transition: none !important;
55 |   -moz-transition: none !important;
56 |   -o-transition: none !important;
57 |   -ms-transition: none !important;
58 |   transition: none !important;
59 | }
60 |       `,
61 |     ),
62 |   )
63 |   document.head.append(css)
64 | 
65 |   return () => {
66 |     // Force restyle
67 |     ;(() => window.getComputedStyle(document.body))()
68 | 
69 |     // Wait for next tick before removing
70 |     nextFrame(() => {
71 |       css.remove()
72 |     })
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/hooks/common/useInputComposition.ts:
--------------------------------------------------------------------------------
 1 | import type { CompositionEventHandler } from 'react'
 2 | import { useCallback, useEffect, useRef } from 'react'
 3 | 
 4 | type InputElementAttributes = React.DetailedHTMLProps<
 5 |   React.InputHTMLAttributes<HTMLInputElement>,
 6 |   HTMLInputElement
 7 | >
 8 | type TextareaElementAttributes = React.DetailedHTMLProps<
 9 |   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
10 |   HTMLTextAreaElement
11 | >
12 | export const useInputComposition = <E = HTMLInputElement>(
13 |   props: Pick<
14 |     E extends HTMLInputElement
15 |       ? InputElementAttributes
16 |       : E extends HTMLTextAreaElement
17 |         ? TextareaElementAttributes
18 |         : never,
19 |     'onKeyDown' | 'onCompositionEnd' | 'onCompositionStart' | 'onKeyDownCapture'
20 |   >,
21 | ) => {
22 |   const { onKeyDown, onCompositionStart, onCompositionEnd } = props
23 | 
24 |   const isCompositionRef = useRef(false)
25 | 
26 |   const currentInputTargetRef = useRef<E | null>(null)
27 | 
28 |   const handleCompositionStart: CompositionEventHandler<E> = useCallback(
29 |     (e) => {
30 |       currentInputTargetRef.current = e.target as E
31 | 
32 |       isCompositionRef.current = true
33 |       onCompositionStart?.(e as any)
34 |     },
35 |     [onCompositionStart],
36 |   )
37 | 
38 |   const handleCompositionEnd: CompositionEventHandler<E> = useCallback(
39 |     (e) => {
40 |       currentInputTargetRef.current = null
41 |       isCompositionRef.current = false
42 |       onCompositionEnd?.(e as any)
43 |     },
44 |     [onCompositionEnd],
45 |   )
46 | 
47 |   const handleKeyDown: React.KeyboardEventHandler<E> = useCallback(
48 |     (e: any) => {
49 |       // The keydown event stop emit when the composition is being entered
50 |       if (isCompositionRef.current) {
51 |         e.stopPropagation()
52 |         return
53 |       }
54 |       onKeyDown?.(e)
55 | 
56 |       if (e.key === 'Escape') {
57 |         e.preventDefault()
58 |         e.stopPropagation()
59 | 
60 |         if (!isCompositionRef.current) {
61 |           e.currentTarget.blur()
62 |         }
63 |       }
64 |     },
65 |     [onKeyDown],
66 |   )
67 | 
68 |   // Register a global capture keydown listener to prevent the radix `useEscapeKeydown` from working
69 |   useEffect(() => {
70 |     const handleGlobalKeyDown = (e: KeyboardEvent) => {
71 |       if (e.key === 'Escape' && currentInputTargetRef.current) {
72 |         e.stopPropagation()
73 |         e.preventDefault()
74 |       }
75 |     }
76 | 
77 |     document.addEventListener('keydown', handleGlobalKeyDown, { capture: true })
78 | 
79 |     return () => {
80 |       document.removeEventListener('keydown', handleGlobalKeyDown, {
81 |         capture: true,
82 |       })
83 |     }
84 |   }, [])
85 | 
86 |   const ret = {
87 |     onCompositionEnd: handleCompositionEnd,
88 |     onCompositionStart: handleCompositionStart,
89 |     onKeyDown: handleKeyDown,
90 |   }
91 |   Object.defineProperty(ret, 'isCompositionRef', {
92 |     value: isCompositionRef,
93 |     enumerable: false,
94 |   })
95 |   return ret as typeof ret & {
96 |     isCompositionRef: typeof isCompositionRef
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/hooks/common/useIsOnline.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | 
 3 | export const useIsOnline = () => {
 4 |   const [isOnline, setIsOnline] = useState(navigator.onLine)
 5 | 
 6 |   useEffect(() => {
 7 |     const handleOnline = () => setIsOnline(true)
 8 |     const handleOffline = () => setIsOnline(false)
 9 | 
10 |     window.addEventListener('online', handleOnline)
11 |     window.addEventListener('offline', handleOffline)
12 | 
13 |     return () => {
14 |       window.removeEventListener('online', handleOnline)
15 |       window.removeEventListener('offline', handleOffline)
16 |     }
17 |   }, [])
18 | 
19 |   return isOnline
20 | }
21 | 


--------------------------------------------------------------------------------
/src/hooks/common/usePrevious.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react'
 2 | 
 3 | export const usePrevious = <T>(value: T): T | undefined => {
 4 |   const ref = useRef<T>(undefined)
 5 |   useEffect(() => {
 6 |     ref.current = value
 7 |   })
 8 |   return ref.current
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/hooks/common/useRefValue.ts:
--------------------------------------------------------------------------------
 1 | import { useLayoutEffect, useRef } from 'react'
 2 | 
 3 | export const useRefValue = <S>(
 4 |   value: S,
 5 | ): Readonly<{
 6 |   current: Readonly<S>
 7 | }> => {
 8 |   const ref = useRef<S>(value)
 9 | 
10 |   useLayoutEffect(() => {
11 |     ref.current = value
12 |   })
13 |   return ref
14 | }
15 | 


--------------------------------------------------------------------------------
/src/hooks/common/useTitle.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react'
 2 | 
 3 | const titleTemplate = `%s | ${APP_NAME}`
 4 | export const useTitle = (title?: Nullable<string>) => {
 5 |   const currentTitleRef = useRef(document.title)
 6 |   useEffect(() => {
 7 |     if (!title) return
 8 | 
 9 |     document.title = titleTemplate.replace('%s', title)
10 |     return () => {
11 |       document.title = currentTitleRef.current
12 |     }
13 |   }, [title])
14 | }
15 | 


--------------------------------------------------------------------------------
/src/hooks/common/useTypescriptHappyCallback.ts:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react'
2 | 
3 | export const useTypeScriptHappyCallback: <Args extends unknown[], R>(
4 |   fn: (...args: Args) => R,
5 |   deps: React.DependencyList,
6 | ) => (...args: Args) => R = useCallback
7 | 


--------------------------------------------------------------------------------
/src/initialize/hydrate.ts:
--------------------------------------------------------------------------------
 1 | import type { Hydratable } from '~/database/services/base'
 2 | import { MetaService } from '~/database/services/meta'
 3 | import { NotificationService } from '~/database/services/notification'
 4 | import { RepoService } from '~/database/services/repo'
 5 | import { RepoPinService } from '~/database/services/repo-pin'
 6 | import { UserService } from '~/database/services/user'
 7 | import { appLog } from '~/lib/log'
 8 | import { sleep } from '~/lib/utils'
 9 | 
10 | declare global {
11 |   interface Window {
12 |     __dbIsReady: boolean
13 |   }
14 | }
15 | export const setHydrated = (v: boolean) => {
16 |   window.__dbIsReady = v
17 | }
18 | 
19 | export const hydrateDatabaseToStore = async () => {
20 |   async function hydrate() {
21 |     const now = Date.now()
22 | 
23 |     const hydrates: Hydratable[] = [
24 |       NotificationService,
25 |       RepoService,
26 |       MetaService,
27 |       RepoPinService,
28 |       UserService,
29 |     ]
30 |     await Promise.all(hydrates.map((h) => h.hydrate()))
31 | 
32 |     window.__dbIsReady = true
33 |     const costTime = Date.now() - now
34 | 
35 |     return costTime
36 |   }
37 |   return Promise.race([hydrate(), sleep(1000).then(() => 'timeout')]).then(
38 |     (result) => {
39 |       if (result === 'timeout') {
40 |         appLog('Hydrate data timeout')
41 |       }
42 |       return result
43 |     },
44 |   )
45 | }
46 | 


--------------------------------------------------------------------------------
/src/initialize/index.ts:
--------------------------------------------------------------------------------
 1 | import { enableMapSet } from 'immer'
 2 | 
 3 | import { getGHToken } from '~/atoms/app'
 4 | import { appLog } from '~/lib/log'
 5 | 
 6 | import { hydrateDatabaseToStore } from './hydrate'
 7 | import { initializeJobs } from './jobs'
 8 | 
 9 | export const initializeApp = async () => {
10 |   if (!getGHToken()) {
11 |     throw new Error('No GitHub token found')
12 |   }
13 |   appLog(`Initialize ${APP_NAME}...`)
14 | 
15 |   const now = Date.now()
16 | 
17 |   // Enable Map/Set in immer
18 |   enableMapSet()
19 | 
20 |   const loadingTime = Date.now() - now
21 | 
22 |   await hydrateDatabaseToStore()
23 |   initializeJobs()
24 | 
25 |   appLog(`Initialize ${APP_NAME} done,`, `${loadingTime}ms`)
26 | }
27 | 


--------------------------------------------------------------------------------
/src/initialize/jobs/index.ts:
--------------------------------------------------------------------------------
1 | import { pollingNotifications } from './polling'
2 | 
3 | export const initializeJobs = () => {
4 |   pollingNotifications()
5 | }
6 | 


--------------------------------------------------------------------------------
/src/initialize/jobs/polling.ts:
--------------------------------------------------------------------------------
 1 | import { getAppPollingInterval } from '~/atoms/app'
 2 | import { queryClient } from '~/lib/query-client'
 3 | import { sleep } from '~/lib/utils'
 4 | import { NotificationRequests } from '~/store/notification/store'
 5 | 
 6 | export const pollingNotifications = async () => {
 7 |   const job = () => {
 8 |     // TODO check token
 9 |     return queryClient.prefetchQuery({
10 |       queryKey: ['notifications'],
11 |       queryFn: () => NotificationRequests.fetch(),
12 |     })
13 |   }
14 | 
15 |   while (true) {
16 |     await job().catch((err) => {
17 |       console.error('Fetching notifications failed', err)
18 |     })
19 |     const pollingInterval = getAppPollingInterval()
20 |     await sleep(pollingInterval)
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/lib/cn.ts:
--------------------------------------------------------------------------------
 1 | // Tremor Raw cx [v0.0.0]
 2 | 
 3 | import clsx from 'clsx'
 4 | import { twMerge } from 'tailwind-merge'
 5 | 
 6 | export const clsxm = (...args: any[]) => {
 7 |   return twMerge(clsx(args))
 8 | }
 9 | export { clsxm as cn, clsxm as cx }
10 | 
11 | // Tremor Raw focusInput [v0.0.1]
12 | 
13 | export const focusInput = [
14 |   // base
15 |   'focus:ring-2',
16 |   // ring color
17 |   'focus:ring-blue-200 focus:dark:ring-blue-700/30',
18 |   // border color
19 |   'focus:border-blue-500 focus:dark:border-blue-700',
20 | ]
21 | 
22 | // Tremor Raw focusRing [v0.0.1]
23 | 
24 | export const focusRing = [
25 |   // base
26 |   'outline outline-offset-2 outline-0 focus-visible:outline-2',
27 |   // outline color
28 |   'outline-blue-500 dark:outline-blue-500',
29 | ]
30 | 
31 | // Tremor Raw hasErrorInput [v0.0.1]
32 | 
33 | export const hasErrorInput = [
34 |   // base
35 |   'ring-2',
36 |   // border color
37 |   'border-red-500 dark:border-red-700',
38 |   // ring color
39 |   'ring-red-200 dark:ring-red-700/30',
40 | ]
41 | 


--------------------------------------------------------------------------------
/src/lib/dev.tsx:
--------------------------------------------------------------------------------
 1 | declare const APP_DEV_CWD: string
 2 | export const attachOpenInEditor = (stack: string) => {
 3 |   const lines = stack.split('\n')
 4 |   return lines.map((line) => {
 5 |     // A line like this: at App (http://localhost:5173/src/App.tsx?t=1720527056591:41:9)
 6 |     // Find the `localhost` part and open the file in the editor
 7 |     if (!line.includes('at ')) {
 8 |       return line
 9 |     }
10 |     const match = line.match(/(http:\/\/localhost:\d+\/[^:]+):(\d+):(\d+)/)
11 | 
12 |     if (match) {
13 |       const [o] = match
14 | 
15 |       // Find `@fs/`
16 |       // Like: `http://localhost:5173/@fs/Users/innei/git/work/rss3/follow/node_modules/.vite/deps/chunk-RPCDYKBN.js?v=757920f2:11548:26`
17 |       const realFsPath = o.split('@fs')[1]
18 | 
19 |       if (realFsPath) {
20 |         return (
21 |           // Delete `v=` hash, like `v=757920f2`
22 |           <div
23 |             className="cursor-pointer"
24 |             key={line}
25 |             onClick={openInEditor.bind(
26 |               null,
27 |               realFsPath.replace(/\?v=[a-f0-9]+/, ''),
28 |             )}
29 |           >
30 |             {line}
31 |           </div>
32 |         )
33 |       } else {
34 |         // at App (http://localhost:5173/src/App.tsx?t=1720527056591:41:9)
35 |         const srcFsPath = o.split('/src')[1]
36 | 
37 |         if (srcFsPath) {
38 |           const fs = srcFsPath.replace(/\?t=[a-f0-9]+/, '')
39 | 
40 |           return (
41 |             <div
42 |               className="cursor-pointer"
43 |               key={line}
44 |               onClick={openInEditor.bind(null, `${APP_DEV_CWD}/src${fs}`)}
45 |             >
46 |               {line}
47 |             </div>
48 |           )
49 |         }
50 |       }
51 |     }
52 | 
53 |     return line
54 |   })
55 | }
56 | // http://localhost:5173/src/App.tsx?t=1720527056591:41:9
57 | const openInEditor = (file: string) => {
58 |   fetch(`/__open-in-editor?file=${encodeURIComponent(`${file}`)}`)
59 | }
60 | 


--------------------------------------------------------------------------------
/src/lib/dom.ts:
--------------------------------------------------------------------------------
 1 | import type { ReactEventHandler } from "react"
 2 | 
 3 | export const stopPropagation: ReactEventHandler<any> = (e) => e.stopPropagation()
 4 | 
 5 | export const preventDefault: ReactEventHandler<any> = (e) => e.preventDefault()
 6 | 
 7 | export const nextFrame = (fn: (...args: any[]) => any) => {
 8 |   requestAnimationFrame(() => {
 9 |     requestAnimationFrame(() => {
10 |       fn()
11 |     })
12 |   })
13 | }
14 | 
15 | export const getElementTop = (element: HTMLElement) => {
16 |   let actualTop = element.offsetTop
17 |   let current = element.offsetParent as HTMLElement
18 |   while (current !== null) {
19 |     actualTop += current.offsetTop
20 |     current = current.offsetParent as HTMLElement
21 |   }
22 |   return actualTop
23 | }
24 | 


--------------------------------------------------------------------------------
/src/lib/gh.ts:
--------------------------------------------------------------------------------
  1 | import type { DB_Notification, DB_Repo } from '~/database'
  2 | 
  3 | // @see https://github.com/raycast/extensions/blob/23735edc3350276a33bf48dd717f335128bfc2ee/extensions/github/src/helpers/notifications.ts#L17
  4 | function generateNotificationReferrerId(
  5 |   notificationId: string,
  6 |   userId: string,
  7 | ) {
  8 |   const text = `018:NotificationThread${notificationId}:${userId}`
  9 |   const encoder = new TextEncoder()
 10 |   const bytes = encoder.encode(text)
 11 |   // eslint-disable-next-line unicorn/prefer-code-point
 12 |   return `notification_referrer_id=${btoa(String.fromCharCode(...bytes))}`
 13 | }
 14 | 
 15 | export function generateGitHubUrl(
 16 |   url: string,
 17 |   notificationId: string,
 18 |   userId?: string,
 19 |   comment = '',
 20 | ) {
 21 |   let newUrl: string = url.replace('api.github.com/repos', 'github.com')
 22 | 
 23 |   if (newUrl.includes('/pulls/')) {
 24 |     newUrl = newUrl.replace('/pulls/', '/pull/')
 25 |   }
 26 | 
 27 |   if (newUrl.includes('/releases/')) {
 28 |     newUrl = newUrl.replace('/repos', '')
 29 |     newUrl = newUrl.slice(0, Math.max(0, newUrl.lastIndexOf('/')))
 30 |   }
 31 | 
 32 |   if (userId) {
 33 |     const notificationReferrerId = generateNotificationReferrerId(
 34 |       notificationId,
 35 |       userId,
 36 |     )
 37 | 
 38 |     return `${newUrl}?${notificationReferrerId}${comment}`
 39 |   }
 40 | 
 41 |   return newUrl
 42 | }
 43 | 
 44 | const getCommentId = (url?: string) =>
 45 |   url ? /comments\/(?<id>\d+)/.exec(url)?.groups?.id : undefined
 46 | 
 47 | export function getGitHubURL(
 48 |   notification: DB_Notification,
 49 |   repository: DB_Repo,
 50 |   userId?: string,
 51 | ) {
 52 |   if (notification.subject.url) {
 53 |     const latestCommentId = getCommentId(
 54 |       notification.subject.latest_comment_url,
 55 |     )
 56 |     return generateGitHubUrl(
 57 |       notification.subject.url,
 58 |       notification.id,
 59 |       userId,
 60 |       latestCommentId ? `#issuecomment-${latestCommentId}` : undefined,
 61 |     )
 62 |   } else if (notification.subject.type === 'CheckSuite') {
 63 |     return generateGitHubUrl(
 64 |       `${repository.html_url}/actions`,
 65 |       notification.id,
 66 |       userId,
 67 |     )
 68 |   } else if (notification.subject.type === 'Discussion') {
 69 |     // Get the discussion number via GraphQL
 70 |     // See: https://github.com/orgs/community/discussions/62728#discussioncomment-9034908
 71 |     const discussionNumber: number | null = null
 72 |     try {
 73 |       //TODO
 74 |       // discussionNumber = await getGitHubDiscussionNumber(notification)
 75 |     } catch (error) {
 76 |       console.error('Failed to get discussion number', error)
 77 |     }
 78 | 
 79 |     return generateGitHubUrl(
 80 |       `${repository.html_url}/discussions/${discussionNumber ?? ''}`,
 81 |       notification.id,
 82 |       userId,
 83 |     )
 84 |   }
 85 | 
 86 |   return notification.url
 87 | }
 88 | 
 89 | // export async function getGitHubDiscussionNumber(notification: Notification) {
 90 | //   const { github } = getGitHubClient();
 91 | //   const repo = notification.repository.full_name;
 92 | //   const updated = notification.updated_at.split("T")[0];
 93 | //   const title = notification.subject.title;
 94 | 
 95 | //   const result = await github.getGitHubDiscussionNumber({
 96 | //     filter: `repo:${repo} updated:>=${updated} in:title ${title}`,
 97 | //   });
 98 | 
 99 | //   const data = result?.search?.nodes?.[0] as Discussion | null;
100 | 
101 | //   return data?.number ?? null;
102 | // }
103 | 


--------------------------------------------------------------------------------
/src/lib/i18n.ts:
--------------------------------------------------------------------------------
1 | import pluralize from 'pluralize'
2 | 
3 | export const pluralizeWord = (count: number, word: string) => {
4 |   return pluralize(word, count)
5 | }
6 | 


--------------------------------------------------------------------------------
/src/lib/jotai.ts:
--------------------------------------------------------------------------------
 1 | import type { Atom, PrimitiveAtom } from 'jotai'
 2 | import { createStore, useAtom, useAtomValue, useSetAtom } from 'jotai'
 3 | import { selectAtom } from 'jotai/utils'
 4 | import { useCallback } from 'react'
 5 | 
 6 | export const jotaiStore = createStore()
 7 | 
 8 | export const createAtomAccessor = <T>(atom: PrimitiveAtom<T>) =>
 9 |   [
10 |     () => jotaiStore.get(atom),
11 |     (value: T) => jotaiStore.set(atom, value),
12 |   ] as const
13 | 
14 | const options = { store: jotaiStore }
15 | /**
16 |  * @param atom - jotai
17 |  * @returns - [atom, useAtom, useAtomValue, useSetAtom, jotaiStore.get, jotaiStore.set]
18 |  */
19 | export const createAtomHooks = <T>(atom: PrimitiveAtom<T>) =>
20 |   [
21 |     atom,
22 |     () => useAtom(atom, options),
23 |     () => useAtomValue(atom, options),
24 |     () => useSetAtom(atom, options),
25 |     ...createAtomAccessor(atom),
26 |   ] as const
27 | 
28 | export const createAtomSelector = <T>(atom: Atom<T>) => {
29 |   const useHook = <R>(selector: (a: T) => R, deps: any[] = []) =>
30 |     useAtomValue(
31 |       selectAtom(
32 |         atom,
33 |         useCallback((a) => selector(a as T), deps),
34 |       ),
35 |     )
36 | 
37 |   useHook.__atom = atom
38 |   return useHook
39 | }
40 | 


--------------------------------------------------------------------------------
/src/lib/log.ts:
--------------------------------------------------------------------------------
 1 | export const appLog = (...args: any[]) => {
 2 |   console.info(
 3 |     `%c ${APP_NAME} %c`,
 4 |     'color: #fff; margin: 0; padding: 5px 0; background: #090909; border-radius: 3px;',
 5 |     ...args.reduce((acc, cur) => {
 6 |       acc.push('', cur)
 7 |       return acc
 8 |     }, []),
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/src/lib/ns.ts:
--------------------------------------------------------------------------------
 1 | const ns = 'linear'
 2 | export const getStorageNS = (key: string) => `${ns}:${key}`
 3 | 
 4 | export const clearStorage = () => {
 5 |   for (let i = 0; i < localStorage.length; i++) {
 6 |     const key = localStorage.key(i)
 7 |     if (key && key.startsWith(ns)) {
 8 |       localStorage.removeItem(key)
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/lib/octokit.ts:
--------------------------------------------------------------------------------
 1 | import { Octokit } from 'octokit'
 2 | import { createFetch } from 'ofetch'
 3 | 
 4 | import { clearGHToken, getGHToken } from '~/atoms/app'
 5 | 
 6 | const fetch = createFetch({
 7 |   defaults: {
 8 |     onResponseError: (error) => {
 9 |       if (error.response.status === 401) {
10 |         clearGHToken()
11 |         window.location.reload()
12 |       }
13 |     },
14 |   },
15 | })
16 | export const octokit = new Octokit({
17 |   auth: getGHToken(),
18 |   request: {
19 |     fetch,
20 |   },
21 | })
22 | 


--------------------------------------------------------------------------------
/src/lib/parser.ts:
--------------------------------------------------------------------------------
 1 | export const parseIssueSubjectUrl = (url: string) => {
 2 |   const { pathname } = new URL(url)
 3 |   const [, , owner, repo, , issue_number] = pathname.split('/')
 4 | 
 5 |   return {
 6 |     owner,
 7 |     repo,
 8 |     issue_number: Number(issue_number),
 9 |   }
10 | }
11 | 
12 | export const parsePullRequestSubjectUrl = (url: string) => {
13 |   const { pathname } = new URL(url)
14 |   const [, , owner, repo, , pull_number] = pathname.split('/')
15 | 
16 |   return { owner, repo, pull_number: Number(pull_number) }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/lib/query-client.ts:
--------------------------------------------------------------------------------
 1 | import { QueryClient } from '@tanstack/react-query'
 2 | import { FetchError } from 'ofetch'
 3 | 
 4 | export const queryClient = new QueryClient({
 5 |   defaultOptions: {
 6 |     queries: {
 7 |       gcTime: Infinity,
 8 |       retryDelay: 1000,
 9 |       retry(failureCount, error) {
10 |         console.error(error)
11 |         if (error instanceof FetchError && error.statusCode === undefined) {
12 |           return false
13 |         }
14 | 
15 |         return !!(3 - failureCount)
16 |       },
17 |       // throwOnError: import.meta.env.DEV,
18 |     },
19 |   },
20 | })
21 | 


--------------------------------------------------------------------------------
/src/lib/route-builder.ts:
--------------------------------------------------------------------------------
  1 | import { omit } from 'es-toolkit'
  2 | import { Fragment } from 'react/jsx-runtime'
  3 | import type { RouteObject } from 'react-router'
  4 | 
  5 | type NestedStructure = { [key: string]: NestedStructure }
  6 | 
  7 | const MainGroupSegment = '(main)'
  8 | 
  9 | function nestPaths(paths: string[]): NestedStructure {
 10 |   const result: NestedStructure = {}
 11 | 
 12 |   paths.forEach((path) => {
 13 |     // Remove the './pages' prefix and the '.tsx' suffix
 14 |     const trimmedPath = path.replace('./pages/', '').replace('.tsx', '')
 15 |     const parts = trimmedPath.split('/')
 16 | 
 17 |     let currentLevel = result
 18 |     for (const part of parts) {
 19 |       if (!currentLevel[part]) {
 20 |         currentLevel[part] = {}
 21 |       }
 22 |       currentLevel = currentLevel[part]
 23 |     }
 24 |   })
 25 | 
 26 |   return result
 27 | }
 28 | 
 29 | export function buildGlobRoutes(
 30 |   glob: Record<string, () => Promise<any>>,
 31 | ): RouteObject[] {
 32 |   const keys = Object.keys(glob)
 33 |   const paths = nestPaths(keys)
 34 |   const pathGetterSet = new Set<string>()
 35 | 
 36 |   const routeObject: RouteObject[] = []
 37 | 
 38 |   function dtsRoutes(
 39 |     parentKey: string,
 40 |     children: RouteObject[],
 41 |     paths: NestedStructure,
 42 | 
 43 |     parentPath = '',
 44 |   ) {
 45 |     const pathKeys = Object.keys(paths)
 46 |     // sort `layout` to the start, and `index` to the end
 47 |     pathKeys.sort((a, b) => {
 48 |       if (a === 'layout') {
 49 |         return -1
 50 |       }
 51 |       if (b === 'layout') {
 52 |         return 1
 53 |       }
 54 |       if (a === 'index') {
 55 |         return 1
 56 |       }
 57 |       if (b === 'index') {
 58 |         return -1
 59 |       }
 60 |       return a.localeCompare(b)
 61 |     })
 62 | 
 63 |     // sort, if () group, then move to the end
 64 |     pathKeys.sort((a, b) => {
 65 |       if (a.startsWith('(') && a.endsWith(')')) {
 66 |         return 1
 67 |       }
 68 |       if (b.startsWith('(') && b.endsWith(')')) {
 69 |         return -1
 70 |       }
 71 |       return 0
 72 |     })
 73 | 
 74 |     // TODO biz priority
 75 |     // move `(main)` to the top
 76 |     const mainIndex = pathKeys.indexOf(MainGroupSegment)
 77 |     if (mainIndex !== -1) {
 78 |       pathKeys.splice(mainIndex, 1)
 79 |       pathKeys.unshift(MainGroupSegment)
 80 |     }
 81 | 
 82 |     for (const key of pathKeys) {
 83 |       const isGroupedRoute = key.startsWith('(') && key.endsWith(')')
 84 | 
 85 |       const segmentPathKey = parentKey + key
 86 | 
 87 |       if (isGroupedRoute) {
 88 |         const accessPath = `${segmentPathKey}/layout.tsx`
 89 |         const globGetter = get(glob, accessPath) || (() => Fragment)
 90 |         if (pathGetterSet.has(accessPath)) {
 91 |           // throw new Error(`duplicate path: ` + accessPath)
 92 | 
 93 |           console.error(`duplicate path: ${accessPath}`)
 94 |         }
 95 |         pathGetterSet.add(accessPath)
 96 | 
 97 |         // if (!globGetter) {
 98 |         //   throw new Error("grouped route must have a layout file")
 99 |         // }
100 | 
101 |         const childrenChildren: RouteObject[] = []
102 |         dtsRoutes(
103 |           `${segmentPathKey}/`,
104 |           childrenChildren,
105 |           paths[key],
106 |           parentPath,
107 |         )
108 |         children.push({
109 |           path: '',
110 |           lazy: globGetter,
111 |           children: childrenChildren,
112 |           handle: {
113 |             fs: segmentPathKey,
114 |             fullPath: parentPath,
115 |           },
116 |         })
117 |       } else if (key === 'layout') {
118 |         // if parent key is grouped routes, the layout is handled, so skip this logic
119 |         if (parentKey.endsWith(')/')) {
120 |           continue
121 |         }
122 |         // if `key` is `layout`, then it's a grouped route
123 |         const accessPath = `${segmentPathKey}.tsx`
124 |         const globGetter = get(glob, accessPath)
125 | 
126 |         const childrenChildren: RouteObject[] = []
127 |         // should omit layout, because layout is already handled
128 |         dtsRoutes(
129 |           parentKey,
130 |           childrenChildren,
131 |           omit(paths, ['layout']),
132 |           parentPath,
133 |         )
134 |         children.push({
135 |           path: '',
136 |           lazy: globGetter,
137 |           children: childrenChildren,
138 |           handle: {
139 |             fs: segmentPathKey,
140 |             fullPath: parentPath,
141 |           },
142 |         })
143 |         break
144 |       } else {
145 |         const content = paths[key]
146 |         const hasChild = Object.keys(content).length > 0
147 | 
148 |         const normalizeKey = normalizePathKey(key)
149 | 
150 |         if (!hasChild) {
151 |           const accessPath = `${segmentPathKey}.tsx`
152 |           const globGetter = get(glob, accessPath)
153 | 
154 |           if (pathGetterSet.has(`${segmentPathKey}.tsx`)) {
155 |             // throw new Error(`duplicate path: ` + accessPath)
156 |             console.error(`duplicate path: ${accessPath}`)
157 |             // continue
158 |           }
159 |           pathGetterSet.add(accessPath)
160 | 
161 |           children.push({
162 |             path: normalizeKey,
163 |             lazy: globGetter,
164 |             handle: {
165 |               fs: `${segmentPathKey}/${normalizeKey}`,
166 |               fullPath: `${parentPath}/${normalizeKey}`,
167 |             },
168 |           })
169 |         } else {
170 |           const childrenChildren: RouteObject[] = []
171 |           const fullPath = `${parentPath}/${normalizeKey}`
172 |           dtsRoutes(
173 |             `${segmentPathKey}/`,
174 |             childrenChildren,
175 |             paths[key],
176 |             fullPath,
177 |           )
178 |           children.push({
179 |             path: normalizeKey,
180 |             children: childrenChildren,
181 |             handle: {
182 |               fs: `${segmentPathKey}/${normalizeKey}`,
183 |               fullPath,
184 |             },
185 |           })
186 |         }
187 |       }
188 |     }
189 |   }
190 | 
191 |   dtsRoutes('./pages/', routeObject, paths)
192 |   return routeObject
193 | }
194 | 
195 | const normalizePathKey = (key: string) => {
196 |   if (key === 'index') {
197 |     return ''
198 |   }
199 | 
200 |   if (key.startsWith('[') && key.endsWith(']')) {
201 |     return `:${key.slice(1, -1)}`
202 |   }
203 |   return key
204 | }
205 | 
206 | function get(obj: any, path: string): any {
207 |   // Handle direct property access first
208 |   if (path in obj) {
209 |     return obj[path]
210 |   }
211 | 
212 |   // Split the path into parts
213 |   const parts = path.split('/')
214 |   let current = obj
215 | 
216 |   for (const part of parts) {
217 |     if (current == null) {
218 |       return undefined
219 |     }
220 |     current = current[part]
221 |   }
222 | 
223 |   return current
224 | }
225 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { memoize } from 'es-toolkit'
 2 | 
 3 | export const sleep = (ms: number) =>
 4 |   new Promise<void>((resolve) => setTimeout(resolve, ms))
 5 | 
 6 | type OS = 'macOS' | 'iOS' | 'Windows' | 'Linux' | 'Android'
 7 | 
 8 | export const getOS = memoize((): OS => {
 9 |   const { userAgent } = window.navigator,
10 |     macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
11 |     windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
12 |     iosPlatforms = ['iPhone', 'iPad', 'iPod']
13 |   const platform =
14 |     // @ts-expect-error
15 |     window.navigator.userAgentData?.platform || window.navigator.platform
16 |   let os = platform
17 | 
18 |   if (macosPlatforms.includes(platform)) {
19 |     os = 'macOS'
20 |   } else if (iosPlatforms.includes(platform)) {
21 |     os = 'iOS'
22 |   } else if (windowsPlatforms.includes(platform)) {
23 |     os = 'Windows'
24 |   } else if (/Android/.test(userAgent)) {
25 |     os = 'Android'
26 |   } else if (!os && /Linux/.test(platform)) {
27 |     os = 'Linux'
28 |   }
29 | 
30 |   return os as OS
31 | })
32 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import './scan'
 2 | import './styles/index.css'
 3 | import 'tailwindcss-uikit-colors/selector.css'
 4 | 
 5 | import { ClickToComponent } from 'click-to-react-component'
 6 | import * as React from 'react'
 7 | import { createRoot } from 'react-dom/client'
 8 | import { RouterProvider } from 'react-router'
 9 | 
10 | import { setAppIsReady } from './atoms/app'
11 | import { initializeApp } from './initialize'
12 | import { router } from './router'
13 | 
14 | initializeApp().then(() => {
15 |   setAppIsReady(true)
16 | })
17 | 
18 | const $container = document.querySelector('#root') as HTMLElement
19 | 
20 | createRoot($container).render(
21 |   <React.StrictMode>
22 |     <RouterProvider router={router} />
23 |     <ClickToComponent editor={'cursor'} />
24 |   </React.StrictMode>,
25 | )
26 | 


--------------------------------------------------------------------------------
/src/modules/notification/IssueDetail.tsx:
--------------------------------------------------------------------------------
 1 | import { Markdown } from '~/components/ui/markdown'
 2 | import { useFetchIssue, useIssue } from '~/store/issue/hooks'
 3 | 
 4 | import type { SelectedIssue } from './atom'
 5 | import { useSelectedNotification } from './atom'
 6 | 
 7 | export const IssueDetail = () => {
 8 |   const selectedNotification = useSelectedNotification() as SelectedIssue
 9 |   const { data: issue } = useFetchIssue({
10 |     owner: selectedNotification.owner,
11 |     repo: selectedNotification.repo,
12 |     issue_number: selectedNotification.issue_number,
13 |   })
14 | 
15 |   if (!issue)
16 |     return (
17 |       <div className="center flex absolute inset-0">
18 |         <i className="loading loading-dots" />
19 |       </div>
20 |     )
21 | 
22 |   return <IssueDetailImpl id={issue.id} />
23 | }
24 | const IssueDetailImpl = ({ id }: { id: number }) => {
25 |   const issue = useIssue(id)
26 | 
27 |   if (!issue) return null
28 | 
29 |   return (
30 |     <div className="flex h-full flex-col">
31 |       {/* Issue Header */}
32 |       <div className="px-6 py-4">
33 |         <div className="flex mb-4 items-center gap-2">
34 |           <span
35 |             className={`inline-flex items-center rounded-full px-2 py-1 text-sm font-medium capitalize ${
36 |               issue.state === 'open'
37 |                 ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100'
38 |                 : 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-100'
39 |             }`}
40 |           >
41 |             <i
42 |               className={`mr-1 ${
43 |                 issue.state === 'open'
44 |                   ? 'i-octicon-issue-opened-16'
45 |                   : 'i-octicon-issue-closed-16'
46 |               }`}
47 |             />
48 |             {issue.state}
49 |           </span>
50 |           <h1 className="text-xl font-semibold">{issue.title}</h1>
51 |         </div>
52 | 
53 |         <div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
54 |           <img
55 |             src={issue.user?.avatar_url}
56 |             alt={issue.user?.login}
57 |             className="mr-2 size-5 rounded-full"
58 |           />
59 |           <span className="font-medium">{issue.user?.login}</span>
60 |           <span className="mx-1">opened this issue</span>
61 |           <time dateTime={issue.created_at}>
62 |             {new Date(issue.created_at).toLocaleDateString()}
63 |           </time>
64 |         </div>
65 |       </div>
66 | 
67 |       {/* Issue Body */}
68 |       {issue.body && (
69 |         <div className="grow overflow-auto border-t px-6 py-4">
70 |           <Markdown content={issue.body} />
71 |         </div>
72 |       )}
73 |     </div>
74 |   )
75 | }
76 | 


--------------------------------------------------------------------------------
/src/modules/notification/NotificationItem.tsx:
--------------------------------------------------------------------------------
  1 | import * as Avatar from '@radix-ui/react-avatar'
  2 | import { TooltipPortal } from '@radix-ui/react-tooltip'
  3 | import { memo, useMemo } from 'react'
  4 | 
  5 | import { useUser } from '~/atoms/user'
  6 | import { RelativeTime } from '~/components/ui/datetime'
  7 | import { ActivityType } from '~/components/ui/icons/ActivityType'
  8 | import {
  9 |   Tooltip,
 10 |   TooltipContent,
 11 |   TooltipTrigger,
 12 | } from '~/components/ui/tooltip'
 13 | import { useRouteParams, useRouter } from '~/hooks/biz/useRouter'
 14 | import { cn } from '~/lib/cn'
 15 | import { getGitHubURL } from '~/lib/gh'
 16 | import { parseIssueSubjectUrl, parsePullRequestSubjectUrl } from '~/lib/parser'
 17 | import { useNotification } from '~/store/notification/hooks'
 18 | import { NotificationStoreActions } from '~/store/notification/store'
 19 | import { useRepo } from '~/store/repo/hooks'
 20 | 
 21 | import { setSelectedNotification } from './atom'
 22 | 
 23 | export const NotificationItem = memo(
 24 |   (props: { id: string; prevId?: string }) => {
 25 |     const notification = useNotification(props.id)
 26 |     const prevNotificationRepoId = useNotification(
 27 |       props.prevId || '',
 28 |       (n) => n?.repositoryId,
 29 |     )
 30 |     const prevRepo = useRepo(prevNotificationRepoId || 0)
 31 |     const repo = useRepo(notification.repositoryId)
 32 | 
 33 |     const prevRepoEqual = prevRepo?.id === repo?.id
 34 | 
 35 |     const user = useUser()
 36 | 
 37 |     const resolvedUrl = useMemo(() => {
 38 |       if (!repo) return null
 39 |       return getGitHubURL(notification, repo, user?.id?.toString())
 40 |     }, [notification, repo, user?.id])
 41 | 
 42 |     const { unread } = notification
 43 | 
 44 |     const { notificationId } = useRouteParams()
 45 |     const { navigate } = useRouter()
 46 | 
 47 |     const isSelected = notificationId === notification.id
 48 | 
 49 |     if (!notification) return null
 50 | 
 51 |     if (!repo?.owner) return null
 52 | 
 53 |     return (
 54 |       <a
 55 |         data-id={notification.id}
 56 |         href={resolvedUrl || ''}
 57 |         onClick={(e) => {
 58 |           e.preventDefault()
 59 | 
 60 |           NotificationStoreActions.markAsRead(notification.id)
 61 | 
 62 |           navigate({
 63 |             notificationId: notification.id,
 64 |           })
 65 | 
 66 |           switch (notification.subject.type) {
 67 |             case 'Issue': {
 68 |               const { owner, repo, issue_number } = parseIssueSubjectUrl(
 69 |                 notification.subject.url,
 70 |               )
 71 |               setSelectedNotification({
 72 |                 type: 'issue',
 73 |                 owner,
 74 |                 repo,
 75 |                 issue_number,
 76 |               })
 77 | 
 78 |               break
 79 |             }
 80 |             case 'PullRequest': {
 81 |               const { owner, repo, pull_number } = parsePullRequestSubjectUrl(
 82 |                 notification.subject.url,
 83 |               )
 84 |               setSelectedNotification({
 85 |                 type: 'pull_request',
 86 |                 owner,
 87 |                 repo,
 88 |                 pull_request_number: pull_number,
 89 |               })
 90 | 
 91 |               break
 92 |             }
 93 |           }
 94 |         }}
 95 |         onDoubleClick={() => {
 96 |           if (resolvedUrl) {
 97 |             window.open(resolvedUrl, '_blank')
 98 |           }
 99 |         }}
100 |         className={cn(
101 |           'flex cursor-link items-center justify-between px-4 py-2 hover:bg-muted',
102 |           isSelected && 'bg-muted',
103 |         )}
104 |       >
105 |         <div className="flex items-center gap-2">
106 |           <Tooltip>
107 |             <TooltipTrigger asChild>
108 |               {!prevRepoEqual && repo ? (
109 |                 <Avatar.Root className="size-6 shrink-0">
110 |                   <Avatar.Image
111 |                     className="size-6 rounded-full"
112 |                     src={repo.owner.avatar_url}
113 |                   />
114 |                   <Avatar.Fallback
115 |                     delayMs={100}
116 |                     className="center inline-flex size-6 rounded-full border text-xs text-base-content/50"
117 |                   >
118 |                     {repo.owner.login.slice(0, 2)}
119 |                   </Avatar.Fallback>
120 |                 </Avatar.Root>
121 |               ) : (
122 |                 <div className="size-6" />
123 |               )}
124 |             </TooltipTrigger>
125 |             <TooltipPortal>
126 |               <TooltipContent>
127 |                 {repo.owner.login}/{repo.name}
128 |               </TooltipContent>
129 |             </TooltipPortal>
130 |           </Tooltip>
131 |           <div>
132 |             {!prevRepoEqual && repo && (
133 |               <a
134 |                 href={repo.html_url}
135 |                 target="_blank"
136 |                 rel="noreferrer"
137 |                 onClick={(e) => {
138 |                   e.preventDefault()
139 |                   window.open(repo.html_url, '_blank')
140 |                 }}
141 |                 className="text-xs font-medium text-base-content/60"
142 |               >
143 |                 {repo.owner.login}/{repo.name}
144 |               </a>
145 |             )}
146 |             <div
147 |               className={cn(
148 |                 "before:mr-1.5 before:inline-block before:size-2 before:shrink-0 before:translate-y-[-2px] before:rounded-full before:bg-accent before:duration-200 before:content-['']",
149 |                 !unread && 'before:-mr-2 before:scale-0',
150 |                 'flex min-w-0 items-center',
151 |               )}
152 |             >
153 |               <span className="shrink-0 translate-y-0.5 self-start">
154 |                 <ActivityType type={notification.subject.type} />
155 |               </span>
156 |               <span className="ml-1 shrink">{notification.subject.title}</span>
157 |             </div>
158 |           </div>
159 |         </div>
160 | 
161 |         <div className="ml-2 shrink-0 text-xs tabular-nums text-secondary-label">
162 |           <RelativeTime
163 |             displayAbsoluteTimeAfterDay={1}
164 |             date={notification.updated_at}
165 |           />
166 |         </div>
167 |       </a>
168 |     )
169 |   },
170 | )
171 | 


--------------------------------------------------------------------------------
/src/modules/notification/PullRequestDetail.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Markdown } from '~/components/ui/markdown'
 3 | import { useFetchPullRequest, usePullRequest } from '~/store/pull-request/hooks'
 4 | 
 5 | import type { SelectedPullRequest } from './atom'
 6 | import { useSelectedNotification } from './atom'
 7 | 
 8 | export const PullRequestDetail = () => {
 9 |   const selectedNotification = useSelectedNotification() as SelectedPullRequest
10 |   const { data: pullRequest } = useFetchPullRequest({
11 |     owner: selectedNotification.owner,
12 |     repo: selectedNotification.repo,
13 |     pull_number: selectedNotification.pull_request_number,
14 |   })
15 | 
16 |   if (!pullRequest)
17 |     return (
18 |       <div className="center flex absolute inset-0">
19 |         <i className="loading loading-dots" />
20 |       </div>
21 |     )
22 | 
23 |   return <PullRequestDetailImpl id={pullRequest.id} />
24 | }
25 | 
26 | const PullRequestDetailImpl = ({ id }: { id: number }) => {
27 |   const pullRequest = usePullRequest(id)
28 | 
29 |   if (!pullRequest) return null
30 | 
31 |   return (
32 |     <div className="flex h-full flex-col">
33 |       {/* Pull Request Header */}
34 |       <div className="px-6 py-4">
35 |         <div className="mb-2 block space-x-2">
36 |           <span
37 |             className={`inline-flex items-center rounded-full px-2 py-1 text-sm font-medium capitalize ${
38 |               pullRequest.state === 'open'
39 |                 ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100'
40 |                 : 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-100'
41 |             }`}
42 |           >
43 |             <i
44 |               className={`mr-1 ${
45 |                 pullRequest.state === 'open'
46 |                   ? 'i-octicon-git-pull-request-16'
47 |                   : 'i-octicon-git-pull-request-closed-16'
48 |               }`}
49 |             />
50 |             {pullRequest.state}
51 |           </span>
52 |           <h1 className="inline text-xl font-semibold">{pullRequest.title}</h1>
53 |         </div>
54 | 
55 |         <div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
56 |           <img
57 |             src={pullRequest.user?.avatar_url}
58 |             alt={pullRequest.user?.login}
59 |             className="mr-2 size-5 rounded-full"
60 |           />
61 |           <span className="font-medium">{pullRequest.user?.login}</span>
62 |           <span className="mx-1">opened this pull request</span>
63 |           <time dateTime={pullRequest.created_at}>
64 |             {new Date(pullRequest.created_at).toLocaleDateString()}
65 |           </time>
66 |         </div>
67 |       </div>
68 | 
69 |       {/* Pull Request Body */}
70 |       {pullRequest.body && (
71 |         <div className="grow overflow-auto border-t px-6 py-4">
72 |           <Markdown content={pullRequest.body} />
73 |         </div>
74 |       )}
75 |     </div>
76 |   )
77 | }
78 | 


--------------------------------------------------------------------------------
/src/modules/notification/atom.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'jotai'
 2 | 
 3 | import { createAtomHooks } from '~/lib/jotai'
 4 | 
 5 | export type SelectedIssue = {
 6 |   type: 'issue'
 7 |   owner: string
 8 |   repo: string
 9 |   issue_number: number
10 | }
11 | export type SelectedPullRequest = {
12 |   type: 'pull_request'
13 |   owner: string
14 |   repo: string
15 |   pull_request_number: number
16 | }
17 | export type SelectedNotification = SelectedIssue | SelectedPullRequest
18 | 
19 | export const [, , useSelectedNotification, , , setSelectedNotification] =
20 |   createAtomHooks(atom<SelectedNotification | null>(null))
21 | 


--------------------------------------------------------------------------------
/src/modules/notification/list.tsx:
--------------------------------------------------------------------------------
  1 | import { useVirtualizer } from '@tanstack/react-virtual'
  2 | import { memo, useEffect, useMemo, useState } from 'react'
  3 | 
  4 | import { ScrollArea } from '~/components/ui/scroll-area/ScrollArea'
  5 | import type { DB_Notification } from '~/database'
  6 | import { useRouteParams } from '~/hooks/biz/useRouter'
  7 | import { useRefValue } from '~/hooks/common'
  8 | import { filterUnreadNotifications } from '~/store/notification/helper'
  9 | import { useSortedNotifications } from '~/store/notification/hooks'
 10 | 
 11 | import { NotificationItem } from './NotificationItem'
 12 | import { PeekNotification } from './peek'
 13 | 
 14 | export type NotificationListProps = {
 15 |   repoId?: string
 16 | }
 17 | export const NotificationList = memo(({ repoId }: NotificationListProps) => {
 18 |   const { type } = useRouteParams()
 19 |   const allNotifications = useSortedNotifications(
 20 |     type === 'unread' ? filterUnreadNotifications : undefined,
 21 |   )
 22 | 
 23 |   const notifications = useMemo(() => {
 24 |     if (repoId) {
 25 |       return allNotifications.filter(
 26 |         (n) => n.repositoryId.toString() === repoId,
 27 |       )
 28 |     }
 29 |     return allNotifications
 30 |   }, [allNotifications, repoId])
 31 | 
 32 |   const notificationsRef = useRefValue(notifications)
 33 | 
 34 |   const [unreadNotificationSnapshot, setUnreadNotificationSnapshot] = useState(
 35 |     [] as DB_Notification[],
 36 |   )
 37 | 
 38 |   // 增量 unread 的判断 是否有最新的通知
 39 |   // const isNotificationsUnreadChanged =
 40 |   //   notifications.length !== unreadNotificationSnapshot.length
 41 | 
 42 |   useEffect(() => {
 43 |     if (type === 'unread') {
 44 |       setUnreadNotificationSnapshot(
 45 |         notificationsRef.current as DB_Notification[],
 46 |       )
 47 |     }
 48 |   }, [notificationsRef, type])
 49 | 
 50 |   const finalNotifications =
 51 |     type === 'unread' ? unreadNotificationSnapshot : notifications
 52 | 
 53 |   const [parentRef, setParentRef] = useState<HTMLDivElement | null>(null)
 54 | 
 55 |   // The virtualizer
 56 |   const rowVirtualizer = useVirtualizer({
 57 |     count: finalNotifications.length,
 58 |     getScrollElement: () => parentRef,
 59 |     estimateSize: () => 12,
 60 |     overscan: 30,
 61 |   })
 62 | 
 63 |   return (
 64 |     <>
 65 |       <ScrollArea flex rootClassName="grow" ref={setParentRef}>
 66 |         {/* <List
 67 |         id="notifications"
 68 |         keyExtractor={(item) => item.id}
 69 |         data={notifications}
 70 |         renderItem={Render}
 71 |       /> */}
 72 |         <div
 73 |           style={{
 74 |             height: `${rowVirtualizer.getTotalSize()}px`,
 75 |           }}
 76 |           className="relative contain-strict"
 77 |         >
 78 |           {rowVirtualizer.getVirtualItems().map((virtualItem) => {
 79 |             return (
 80 |               <div
 81 |                 className="duration-200 will-change-transform"
 82 |                 key={virtualItem.key}
 83 |                 ref={rowVirtualizer.measureElement}
 84 |                 data-index={virtualItem.index}
 85 |                 style={{
 86 |                   position: 'absolute',
 87 |                   top: 0,
 88 |                   left: 0,
 89 |                   width: '100%',
 90 |                   transform: `translateY(${virtualItem.start}px)`,
 91 |                 }}
 92 |               >
 93 |                 <NotificationItem
 94 |                   id={finalNotifications[virtualItem.index].id}
 95 |                   prevId={
 96 |                     finalNotifications[virtualItem.index - 1]?.id || undefined
 97 |                   }
 98 |                 />
 99 |               </div>
100 |             )
101 |           })}
102 |         </div>
103 |       </ScrollArea>
104 |       <PeekNotification />
105 |     </>
106 |   )
107 | })
108 | // const Render = memo(({ item }: { item: DB_Notification }) => {
109 | //   return <NotificationItem id={item.id} />
110 | // })
111 | 


--------------------------------------------------------------------------------
/src/modules/notification/peek.tsx:
--------------------------------------------------------------------------------
 1 | import { AnimatePresence, m } from 'motion/react'
 2 | import { useMemo } from 'react'
 3 | 
 4 | import { ScrollArea } from '~/components/ui/scroll-area'
 5 | 
 6 | import { setSelectedNotification, useSelectedNotification } from './atom'
 7 | import { IssueDetail } from './IssueDetail'
 8 | import { PullRequestDetail } from './PullRequestDetail'
 9 | 
10 | export const PeekNotification = () => {
11 |   const selectedNotification = useSelectedNotification()
12 | 
13 |   const open = !!selectedNotification
14 |   return (
15 |     <AnimatePresence>
16 |       {open && (
17 |         <m.div
18 |           className="flex fixed inset-y-0 right-0 w-[50vw] max-w-[800px] flex-col border-l bg-system-background"
19 |           initial={{ opacity: 0, transform: 'translateX(100%)' }}
20 |           animate={{
21 |             opacity: 1,
22 |             transform: 'translateX(0%)',
23 |           }}
24 |           transition={{
25 |             type: 'spring',
26 |             stiffness: 360,
27 |             damping: 40,
28 |           }}
29 |           exit={{ opacity: 0, transform: 'translateX(100%)' }}
30 |         >
31 |           <PeekHeader />
32 |           <ScrollArea.ScrollArea
33 |             rootClassName="h-0 grow"
34 |             viewportClassName="overflow-auto"
35 |           >
36 |             <ConditionalRender />
37 |           </ScrollArea.ScrollArea>
38 |         </m.div>
39 |       )}
40 |     </AnimatePresence>
41 |   )
42 | }
43 | 
44 | const PeekHeader = () => {
45 |   const selectedNotification = useSelectedNotification()
46 | 
47 |   const headerTitle = useMemo(() => {
48 |     if (!selectedNotification) return ''
49 |     if (selectedNotification.type === 'issue') {
50 |       return `${selectedNotification.owner}/${selectedNotification.repo} #${selectedNotification.issue_number}`
51 |     }
52 |     return `${selectedNotification.owner}/${selectedNotification.repo} #${selectedNotification.pull_request_number}`
53 |   }, [selectedNotification])
54 |   return (
55 |     <div className="flex relative items-center justify-between border-b p-4">
56 |       <span className="shrink grow truncate text-lg font-semibold">
57 |         {headerTitle}
58 |       </span>
59 |       <button
60 |         type="button"
61 |         className="flex shrink-0 items-center justify-center"
62 |         onClick={() => {
63 |           setSelectedNotification(null)
64 |         }}
65 |       >
66 |         <i className="i-mingcute-close-line text-xl" />
67 |       </button>
68 |     </div>
69 |   )
70 | }
71 | 
72 | const ConditionalRender = () => {
73 |   const selectedNotification = useSelectedNotification()
74 | 
75 |   if (!selectedNotification) return null
76 | 
77 |   switch (selectedNotification.type) {
78 |     case 'issue': {
79 |       return <IssueDetail />
80 |     }
81 |     case 'pull_request': {
82 |       return <PullRequestDetail />
83 |     }
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/pages/(main)/index.tsx:
--------------------------------------------------------------------------------
 1 | import { redirect } from 'react-router'
 2 | 
 3 | export const Component = () => {
 4 |   return null
 5 | }
 6 | 
 7 | export const loader = () => {
 8 |   return redirect('/notifications/all')
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/pages/(main)/layout.tsx:
--------------------------------------------------------------------------------
  1 | import { useQuery } from '@tanstack/react-query'
  2 | import { throttle } from 'es-toolkit'
  3 | import type { PropsWithChildren } from 'react'
  4 | import * as React from 'react'
  5 | import { useCallback, useEffect, useRef, useState } from 'react'
  6 | import { useResizable } from 'react-resizable-layout'
  7 | import { Outlet } from 'react-router'
  8 | 
  9 | import { setRootContainerElement } from '~/atoms/dom'
 10 | import {
 11 |   getUISettings,
 12 |   setUISetting,
 13 |   useUISettingKey,
 14 | } from '~/atoms/settings/ui'
 15 | import {
 16 |   getSidebarColumnTempShow,
 17 |   setSidebarColumnShow,
 18 |   setSidebarColumnTempShow,
 19 |   useSidebarColumnShow,
 20 |   useSidebarColumnTempShow,
 21 | } from '~/atoms/sidebar'
 22 | import { Sidebar } from '~/components/layout/sidebar/index'
 23 | import { PanelSplitter } from '~/components/ui/divider'
 24 | import { Kbd } from '~/components/ui/kbd/Kbd'
 25 | import { UserService } from '~/database/services/user'
 26 | import { clsxm } from '~/lib/cn'
 27 | import { preventDefault } from '~/lib/dom'
 28 | 
 29 | export const Component = () => {
 30 |   const containerRef = useRef<HTMLDivElement>(null)
 31 | 
 32 |   useQuery({
 33 |     queryKey: ['me'],
 34 |     queryFn: () => UserService.fetchMe(),
 35 |   })
 36 |   return (
 37 |     <RootContainer>
 38 |       <SidebarResponsiveResizerContainer containerRef={containerRef}>
 39 |         <Sidebar />
 40 |       </SidebarResponsiveResizerContainer>
 41 |       <Outlet />
 42 |     </RootContainer>
 43 |   )
 44 | }
 45 | 
 46 | const SidebarResponsiveResizerContainer = ({
 47 |   containerRef,
 48 |   children,
 49 | }: {
 50 |   containerRef: React.RefObject<HTMLDivElement | null>
 51 | } & PropsWithChildren) => {
 52 |   const { isDragging, position, separatorProps, separatorCursor } =
 53 |     useResizable({
 54 |       axis: 'x',
 55 |       min: 256,
 56 |       max: 300,
 57 |       initial: getUISettings().sidebarColWidth,
 58 |       containerRef: containerRef as React.RefObject<HTMLElement>,
 59 | 
 60 |       onResizeEnd({ position }) {
 61 |         setUISetting('sidebarColWidth', position)
 62 |       },
 63 |     })
 64 | 
 65 |   const sidebarColumnShow = useSidebarColumnShow()
 66 |   const sidebarColumnTempShow = useSidebarColumnTempShow()
 67 | 
 68 |   useEffect(() => {
 69 |     if (sidebarColumnShow) {
 70 |       setSidebarColumnTempShow(false)
 71 |       return
 72 |     }
 73 |     const handler = throttle((e: MouseEvent) => {
 74 |       const mouseX = e.clientX
 75 |       const mouseY = e.clientY
 76 | 
 77 |       const uiSettings = getUISettings()
 78 |       const feedColumnTempShow = getSidebarColumnTempShow()
 79 | 
 80 |       if (mouseY < 200) return
 81 |       const threshold = feedColumnTempShow ? uiSettings.sidebarColWidth : 100
 82 | 
 83 |       if (mouseX < threshold) {
 84 |         setSidebarColumnTempShow(true)
 85 |       } else {
 86 |         setSidebarColumnTempShow(false)
 87 |       }
 88 |     }, 300)
 89 | 
 90 |     document.addEventListener('mousemove', handler)
 91 |     return () => {
 92 |       document.removeEventListener('mousemove', handler)
 93 |     }
 94 |   }, [sidebarColumnShow])
 95 | 
 96 |   const [delayShowSplitter, setDelayShowSplitter] = useState(sidebarColumnShow)
 97 | 
 98 |   useEffect(() => {
 99 |     let timer: any
100 |     if (sidebarColumnShow) {
101 |       timer = setTimeout(() => {
102 |         setDelayShowSplitter(true)
103 |       }, 200)
104 |     } else {
105 |       setDelayShowSplitter(false)
106 |     }
107 | 
108 |     return () => {
109 |       timer = clearTimeout(timer)
110 |     }
111 |   }, [sidebarColumnShow])
112 | 
113 |   return (
114 |     <>
115 |       <div
116 |         data-hide-in-print
117 |         className={clsxm(
118 |           'shrink-0 overflow-hidden bg-sidebar',
119 |           'flex flex-col grow',
120 |           'absolute inset-y-0 z-[2]',
121 |           sidebarColumnTempShow &&
122 |             !sidebarColumnShow &&
123 |             'shadow-drawer-to-right z-[12]',
124 |           !sidebarColumnShow && !sidebarColumnTempShow
125 |             ? '-translate-x-full delay-200'
126 |             : '',
127 |           !isDragging ? 'duration-200' : '',
128 |         )}
129 |         style={{
130 |           width: `${position}px`,
131 |           // @ts-expect-error
132 |           '--app-sidebar-col-w': `${position}px`,
133 |         }}
134 |       >
135 |         {children}
136 |       </div>
137 | 
138 |       <div
139 |         data-hide-in-print
140 |         className={!isDragging ? 'duration-200' : ''}
141 |         style={{
142 |           width: sidebarColumnShow ? `${position}px` : 0,
143 |           flexShrink: 0,
144 |         }}
145 |       />
146 | 
147 |       {delayShowSplitter && (
148 |         <PanelSplitter
149 |           isDragging={isDragging}
150 |           cursor={separatorCursor}
151 |           {...separatorProps}
152 |           onDoubleClick={() => {
153 |             setSidebarColumnShow(false)
154 |           }}
155 |           tooltip={
156 |             !isDragging && (
157 |               <>
158 |                 <div>
159 |                   <b>Drag</b> to resize
160 |                 </div>
161 |                 <div className="center">
162 |                   <Kbd className="ml-1">{'['}</Kbd>
163 |                 </div>
164 |               </>
165 |             )
166 |           }
167 |         />
168 |       )}
169 |     </>
170 |   )
171 | }
172 | 
173 | const RootContainer = ({
174 |   ref,
175 |   children,
176 | }: PropsWithChildren & { ref?: React.RefObject<HTMLDivElement | null> }) => {
177 |   const feedColWidth = useUISettingKey('sidebarColWidth')
178 |   const [elementRef, _setElementRef] = useState<HTMLDivElement | null>(null)
179 |   const setElementRef = useCallback((el: HTMLDivElement | null) => {
180 |     _setElementRef(el)
181 |     setRootContainerElement(el)
182 |   }, [])
183 |   React.useImperativeHandle(ref, () => elementRef!)
184 |   return (
185 |     <div
186 |       ref={setElementRef}
187 |       style={
188 |         {
189 |           '--app-sidebar-col-w': `${feedColWidth}px`,
190 |         } as any
191 |       }
192 |       className="flex relative z-0 h-screen overflow-hidden print:h-auto print:overflow-auto"
193 |       onContextMenu={preventDefault}
194 |     >
195 |       {children}
196 |     </div>
197 |   )
198 | }
199 | 


--------------------------------------------------------------------------------
/src/pages/(main)/notifications/(type)/[repo].tsx:
--------------------------------------------------------------------------------
1 | import { useRouteParams } from '~/hooks/biz/useRouter'
2 | import { NotificationList } from '~/modules/notification/list'
3 | 
4 | export const Component = () => {
5 |   const { repoId } = useRouteParams()
6 |   return <NotificationList repoId={repoId} />
7 | }
8 | 


--------------------------------------------------------------------------------
/src/pages/(main)/notifications/(type)/all.tsx:
--------------------------------------------------------------------------------
1 | import { NotificationList } from '~/modules/notification/list'
2 | 
3 | export const Component = () => {
4 |   return <NotificationList />
5 | }
6 | 


--------------------------------------------------------------------------------
/src/pages/(main)/notifications/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from 'react-router'
 2 | 
 3 | import { Tabs, TabsList, TabsTrigger } from '~/components/ui/tabs'
 4 | import type { NotificationType } from '~/hooks/biz/useRouter'
 5 | import { useRouteParams, useRouter } from '~/hooks/biz/useRouter'
 6 | import { useNotificationLengthByRepoId } from '~/store/notification/hooks'
 7 | 
 8 | export const Component = () => {
 9 |   const { type, repoId } = useRouteParams()
10 |   const length = useNotificationLengthByRepoId(repoId)
11 |   const { navigate } = useRouter()
12 | 
13 |   return (
14 |     <div className="flex relative grow flex-col">
15 |       <div className="flex relative items-center">
16 |         <Tabs
17 |           variant="rounded"
18 |           value={type || 'all'}
19 |           onValueChange={(value) => {
20 |             navigate({
21 |               type: value as NotificationType,
22 |             })
23 |           }}
24 |           className="w-full border-b"
25 |         >
26 |           <TabsList className="border-b-0 p-2">
27 |             <TabsTrigger value="all">All</TabsTrigger>
28 |             <TabsTrigger value="unread">Unread</TabsTrigger>
29 |           </TabsList>
30 |         </Tabs>
31 | 
32 |         <div className="flex absolute inset-y-0 right-2 items-center text-xs text-secondary-label">
33 |           {length} notifications
34 |         </div>
35 |       </div>
36 |       <Outlet />
37 |     </div>
38 |   )
39 | }
40 | 


--------------------------------------------------------------------------------
/src/providers/context-menu-provider.tsx:
--------------------------------------------------------------------------------
  1 | import { Fragment, memo, useCallback, useEffect, useRef } from 'react'
  2 | 
  3 | import type { FollowMenuItem } from '~/atoms/context-menu'
  4 | import { useContextMenuState } from '~/atoms/context-menu'
  5 | import {
  6 |   ContextMenu,
  7 |   ContextMenuCheckboxItem,
  8 |   ContextMenuContent,
  9 |   ContextMenuItem,
 10 |   ContextMenuSeparator,
 11 |   ContextMenuSub,
 12 |   ContextMenuSubContent,
 13 |   ContextMenuSubTrigger,
 14 |   ContextMenuTrigger,
 15 | } from '~/components/ui/context-menu'
 16 | import { RootPortal } from '~/components/ui/portal'
 17 | import { cn } from '~/lib/cn'
 18 | import { nextFrame, preventDefault } from '~/lib/dom'
 19 | 
 20 | export const ContextMenuProvider: Component = ({ children }) => (
 21 |   <>
 22 |     {children}
 23 |     <Handler />
 24 |   </>
 25 | )
 26 | 
 27 | const Handler = () => {
 28 |   const ref = useRef<HTMLSpanElement>(null)
 29 |   const [contextMenuState, setContextMenuState] = useContextMenuState()
 30 | 
 31 |   useEffect(() => {
 32 |     if (!contextMenuState.open) return
 33 |     const triggerElement = ref.current
 34 |     if (!triggerElement) return
 35 |     // [ContextMenu] Add ability to control
 36 |     // https://github.com/radix-ui/primitives/issues/1307#issuecomment-1689754796
 37 |     triggerElement.dispatchEvent(
 38 |       new MouseEvent('contextmenu', {
 39 |         bubbles: true,
 40 |         cancelable: true,
 41 |         clientX: contextMenuState.position.x,
 42 |         clientY: contextMenuState.position.y,
 43 |       }),
 44 |     )
 45 |   }, [contextMenuState])
 46 | 
 47 |   const handleOpenChange = useCallback(
 48 |     (state: boolean) => {
 49 |       if (state) return
 50 |       if (!contextMenuState.open) return
 51 |       setContextMenuState({ open: false })
 52 |       contextMenuState.abortController.abort()
 53 |     },
 54 |     [contextMenuState, setContextMenuState],
 55 |   )
 56 | 
 57 |   return (
 58 |     <ContextMenu onOpenChange={handleOpenChange}>
 59 |       <ContextMenuTrigger className="hidden" ref={ref} />
 60 |       <ContextMenuContent onContextMenu={preventDefault}>
 61 |         {contextMenuState.open &&
 62 |           contextMenuState.menuItems.map((item, index) => (
 63 |             <Item key={index} item={item} />
 64 |           ))}
 65 |       </ContextMenuContent>
 66 |     </ContextMenu>
 67 |   )
 68 | }
 69 | 
 70 | const Item = memo(({ item }: { item: FollowMenuItem }) => {
 71 |   const onClick = useCallback(() => {
 72 |     if ('click' in item) {
 73 |       // Here we need to delay one frame,
 74 |       // so it's two raf's, in order to have `point-event: none` recorded by RadixOverlay after modal is invoked in a certain scenario,
 75 |       // and the page freezes after modal is turned off.
 76 |       nextFrame(() => {
 77 |         item.click?.()
 78 |       })
 79 |     }
 80 |   }, [item])
 81 |   const itemRef = useRef<HTMLDivElement>(null)
 82 | 
 83 |   switch (item.type) {
 84 |     case 'separator': {
 85 |       return <ContextMenuSeparator />
 86 |     }
 87 |     case 'text': {
 88 |       const Wrapper = item.submenu
 89 |         ? ContextMenuSubTrigger
 90 |         : typeof item.checked === 'boolean'
 91 |           ? ContextMenuCheckboxItem
 92 |           : ContextMenuItem
 93 | 
 94 |       const Sub = item.submenu ? ContextMenuSub : Fragment
 95 | 
 96 |       return (
 97 |         <Sub>
 98 |           <Wrapper
 99 |             ref={itemRef}
100 |             disabled={
101 |               item.disabled || (item.click === undefined && !item.submenu)
102 |             }
103 |             onClick={onClick}
104 |             className="flex items-center gap-2"
105 |             checked={item.checked}
106 |           >
107 |             {!!item.icon && (
108 |               <span className="flex absolute left-2 items-center justify-center">
109 |                 {item.icon}
110 |               </span>
111 |             )}
112 |             <span className={cn(item.icon && 'pl-6')}>{item.label}</span>
113 | 
114 |             <div className="ml-auto pl-4" />
115 |           </Wrapper>
116 |           {item.submenu && (
117 |             <RootPortal>
118 |               <ContextMenuSubContent>
119 |                 {item.submenu.map((subItem, index) => (
120 |                   <Item key={index} item={subItem} />
121 |                 ))}
122 |               </ContextMenuSubContent>
123 |             </RootPortal>
124 |           )}
125 |         </Sub>
126 |       )
127 |     }
128 |     default: {
129 |       return null
130 |     }
131 |   }
132 | })
133 | 


--------------------------------------------------------------------------------
/src/providers/root-providers.tsx:
--------------------------------------------------------------------------------
 1 | import { QueryClientProvider } from '@tanstack/react-query'
 2 | import { Provider } from 'jotai'
 3 | import { LazyMotion, MotionConfig } from 'motion/react'
 4 | import type { FC, PropsWithChildren } from 'react'
 5 | 
 6 | import { Toaster } from '~/components/ui/toast'
 7 | import { jotaiStore } from '~/lib/jotai'
 8 | import { queryClient } from '~/lib/query-client'
 9 | 
10 | import { ContextMenuProvider } from './context-menu-provider'
11 | import { SettingSync } from './setting-sync'
12 | import { StableRouterProvider } from './stable-router-provider'
13 | 
14 | const loadFeatures = () =>
15 |   import('../framer-lazy-feature').then((res) => res.default)
16 | export const RootProviders: FC<PropsWithChildren> = ({ children }) => (
17 |   <LazyMotion features={loadFeatures} strict key="framer">
18 |     <MotionConfig
19 |       transition={{
20 |         type: 'tween',
21 |         duration: 0.15,
22 |         ease: 'easeInOut',
23 |       }}
24 |     >
25 |       <QueryClientProvider client={queryClient}>
26 |         <Provider store={jotaiStore}>
27 |           <StableRouterProvider />
28 |           <SettingSync />
29 |           <ContextMenuProvider />
30 |           {children}
31 |         </Provider>
32 |       </QueryClientProvider>
33 |     </MotionConfig>
34 |     <Toaster />
35 |   </LazyMotion>
36 | )
37 | 


--------------------------------------------------------------------------------
/src/providers/setting-sync.tsx:
--------------------------------------------------------------------------------
 1 | import { useSyncThemeark } from '~/hooks/common'
 2 | 
 3 | const useUISettingSync = () => {
 4 |   useSyncThemeark()
 5 | }
 6 | 
 7 | export const SettingSync = () => {
 8 |   useUISettingSync()
 9 | 
10 |   return null
11 | }
12 | 


--------------------------------------------------------------------------------
/src/providers/stable-router-provider.tsx:
--------------------------------------------------------------------------------
 1 | import { useLayoutEffect } from 'react'
 2 | import type { NavigateFunction } from 'react-router'
 3 | import {
 4 |   useLocation,
 5 |   useNavigate,
 6 |   useParams,
 7 |   useSearchParams,
 8 | } from 'react-router'
 9 | 
10 | import { setNavigate, setRoute } from '~/atoms/route'
11 | 
12 | declare global {
13 |   export const router: {
14 |     navigate: NavigateFunction
15 |   }
16 |   interface Window {
17 |     router: typeof router
18 |   }
19 | }
20 | window.router = {
21 |   navigate() {},
22 | }
23 | 
24 | /**
25 |  * Why this.
26 |  * Remix router always update immutable object when the router has any changes, lead to the component which uses router hooks re-render.
27 |  * This provider is hold a empty component, to store the router hooks value.
28 |  * And use our router hooks will not re-render the component when the router has any changes.
29 |  * Also it can access values outside of the component and provide a value selector
30 |  */
31 | export const StableRouterProvider = () => {
32 |   const [searchParams] = useSearchParams()
33 |   const params = useParams()
34 |   const nav = useNavigate()
35 |   const location = useLocation()
36 | 
37 |   // NOTE: This is a hack to expose the navigate function to the window object, avoid to import `router` circular issue.
38 |   useLayoutEffect(() => {
39 |     window.router.navigate = nav
40 | 
41 |     setRoute({
42 |       params,
43 |       searchParams,
44 |       location,
45 |     })
46 |     setNavigate({ fn: nav })
47 |   }, [searchParams, params, location, nav])
48 | 
49 |   return null
50 | }
51 | 


--------------------------------------------------------------------------------
/src/router.tsx:
--------------------------------------------------------------------------------
 1 | import { createBrowserRouter, createHashRouter } from 'react-router'
 2 | 
 3 | import { App } from './App'
 4 | import { ErrorElement } from './components/common/ErrorElement'
 5 | import { NotFound } from './components/common/NotFound'
 6 | import { buildGlobRoutes } from './lib/route-builder'
 7 | 
 8 | const globTree = import.meta.glob('./pages/**/*.tsx')
 9 | const tree = buildGlobRoutes(globTree)
10 | 
11 | const routerCreator = window['__DEBUG_PROXY__']
12 |   ? createHashRouter
13 |   : createBrowserRouter
14 | 
15 | export const router = routerCreator([
16 |   {
17 |     path: '/',
18 |     element: <App />,
19 |     children: tree,
20 |     errorElement: <ErrorElement />,
21 |   },
22 |   {
23 |     path: '*',
24 |     element: <NotFound />,
25 |   },
26 | ])
27 | 


--------------------------------------------------------------------------------
/src/scan.ts:
--------------------------------------------------------------------------------
1 | if (import.meta.env.DEV) {
2 |   import('react-scan').then(({ scan }) => scan({}))
3 | }
4 | 


--------------------------------------------------------------------------------
/src/store/issue/hooks.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from '@tanstack/react-query'
 2 | 
 3 | import { issueRequest, useIssueStore } from './store'
 4 | 
 5 | export const useIssue = (id: number) => {
 6 |   const issue = useIssueStore((state) => state.issues[id])
 7 |   return issue
 8 | }
 9 | 
10 | export const useFetchIssue = ({
11 |   owner,
12 |   repo,
13 |   issue_number,
14 | }: {
15 |   owner: string
16 |   repo: string
17 |   issue_number: number
18 | }) => {
19 |   return useQuery({
20 |     queryKey: ['issues', owner, repo, issue_number],
21 |     queryFn: () => issueRequest.fetch({ issue_number, owner, repo }),
22 |   })
23 | }
24 | 


--------------------------------------------------------------------------------
/src/store/issue/store.ts:
--------------------------------------------------------------------------------
 1 | import type { DB_Issue, DB_Notification } from '~/database'
 2 | import { issueService } from '~/database/services/issue'
 3 | import { octokit } from '~/lib/octokit'
 4 | import { queryClient } from '~/lib/query-client'
 5 | 
 6 | import { createZustandStore } from '../utils/helper'
 7 | import { AsyncQueue } from '../utils/queue'
 8 | 
 9 | interface IssueStoreState {
10 |   issues: Record<string, DB_Issue>
11 | }
12 | 
13 | export const useIssueStore = createZustandStore<IssueStoreState>('issue')(
14 |   () => ({
15 |     issues: {},
16 |   }),
17 | )
18 | 
19 | const set = useIssueStore.setState
20 | const get = useIssueStore.getState
21 | 
22 | class IssueStoreActionStatic {
23 |   upsertMany(data: DB_Issue[]) {
24 |     const current = get().issues
25 |     const newIssues = data.reduce(
26 |       (acc, issue) => {
27 |         acc[issue.id] = issue
28 |         return acc
29 |       },
30 |       {} as Record<string, DB_Issue>,
31 |     )
32 | 
33 |     set(() => {
34 |       return {
35 |         issues: { ...current, ...newIssues },
36 |       }
37 |     })
38 |   }
39 | 
40 |   collect(notifications: DB_Notification[]) {
41 |     const tasks = [] as {
42 |       owner: string
43 |       repo: string
44 |       issue_number: number
45 |     }[]
46 | 
47 |     for (const item of notifications) {
48 |       const { type } = item.subject
49 |       if (type !== 'Issue') continue
50 | 
51 |       const { url } = item.subject
52 |       const { pathname } = new URL(url)
53 |       const [, , owner, repo, , issue_number] = pathname.split('/')
54 | 
55 |       tasks.push({
56 |         owner,
57 |         repo,
58 |         issue_number: +issue_number,
59 |       })
60 |     }
61 | 
62 |     issueRequest.batchFetch(tasks)
63 |   }
64 | }
65 | 
66 | export const issueAction = new IssueStoreActionStatic()
67 | 
68 | type FetchIssueParams = { owner: string; repo: string; issue_number: number }
69 | class IssueRequestStatic {
70 |   private q = new AsyncQueue(10)
71 | 
72 |   batchFetch(data: FetchIssueParams[]) {
73 |     this.q.addMultiple(
74 |       data.map(({ owner, repo, issue_number }) => async () => {
75 |         const res = await queryClient.fetchQuery({
76 |           queryKey: ['issues', owner, repo, issue_number],
77 |           queryFn: () => octokit.rest.issues.get({ owner, repo, issue_number }),
78 |           staleTime: 1000 * 60 * 10,
79 |         })
80 | 
81 |         issueAction.upsertMany([res.data])
82 |         issueService.upsertMany([res.data])
83 |       }),
84 |     )
85 |   }
86 | 
87 |   async fetch(params: FetchIssueParams) {
88 |     const res = await octokit.rest.issues.get(params)
89 |     issueAction.upsertMany([res.data])
90 |     issueService.upsertMany([res.data])
91 |     return res.data
92 |   }
93 | }
94 | 
95 | export const issueRequest = new IssueRequestStatic()
96 | 


--------------------------------------------------------------------------------
/src/store/notification/helper.ts:
--------------------------------------------------------------------------------
1 | import type { DB_Notification } from '~/database'
2 | 
3 | export const filterUnreadNotifications = (notification: DB_Notification) => {
4 |   return !notification.last_read_at
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/notification/hooks.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback } from 'react'
 2 | 
 3 | import type { DB_Notification } from '~/database'
 4 | import { ALL_REPO } from '~/hooks/biz/useRouter'
 5 | 
 6 | import { selectNotificationLength, selectSortedNotification } from './selectors'
 7 | import { useNotificationStore } from './store'
 8 | 
 9 | export const useSortedNotifications = (
10 |   filter?: (notification: DB_Notification) => boolean,
11 | ) => {
12 |   const notifications = useNotificationStore(
13 |     useCallback(selectSortedNotification(filter), [filter]),
14 |   )
15 | 
16 |   return notifications
17 | }
18 | 
19 | export const useIsSyncingNotifications = () => {
20 |   return useNotificationStore((state) => state.syncingAll || state.syncingDelta)
21 | }
22 | 
23 | export function useNotification(id: string): DB_Notification
24 | export function useNotification<T>(
25 |   id: string,
26 |   selector?: (notification?: DB_Notification) => T,
27 | ): T
28 | export function useNotification<T>(
29 |   id: string,
30 |   selector?: (notification?: DB_Notification) => T,
31 | ) {
32 |   return useNotificationStore(
33 |     (state) => selector?.(state.notifications[id]) ?? state.notifications[id],
34 |   )
35 | }
36 | 
37 | export const useNotificationLength = () => {
38 |   return useNotificationStore(selectNotificationLength)
39 | }
40 | 
41 | export const useNotificationLengthByRepoId = (repoId: string) => {
42 |   return useNotificationStore((state) => {
43 |     if (repoId === ALL_REPO) {
44 |       return selectNotificationLength(state)
45 |     }
46 |     return Object.values(state.notifications).filter(
47 |       (n) => n.repositoryId.toString() === repoId,
48 |     ).length
49 |   })
50 | }
51 | 
52 | export const useNotificationSyncAt = () => {
53 |   return useNotificationStore((state) => state.syncAt)
54 | }
55 | 
56 | export const useNotificationUpdatedAt = () => {
57 |   return useNotificationStore((state) => state.lastModified)
58 | }
59 | 


--------------------------------------------------------------------------------
/src/store/notification/selectors.ts:
--------------------------------------------------------------------------------
 1 | import type { DB_Notification } from '~/database'
 2 | 
 3 | import { createSelectorHelper } from '../utils/helper'
 4 | import type { useNotificationStore } from './store'
 5 | 
 6 | type StoreState = ReturnType<typeof useNotificationStore.getState>
 7 | 
 8 | const defineSelector = createSelectorHelper<StoreState>()
 9 | 
10 | export const selectNotificationLength = defineSelector(
11 |   (state) => Object.keys(state.notifications).length,
12 | )
13 | 
14 | export const selectSortedNotification = (
15 |   filter?: (notification: DB_Notification) => boolean,
16 | ) =>
17 |   defineSelector((state) => {
18 |     let result = Object.values(state.notifications)
19 |     if (filter) {
20 |       result = result.filter((element) => filter(element))
21 |     }
22 |     return result.sort((a, b) => {
23 |       return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
24 |     })
25 |   })
26 | 


--------------------------------------------------------------------------------
/src/store/pull-request/hooks.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from '@tanstack/react-query'
 2 | 
 3 | import { pullRequestRequest, usePullRequestStore } from './store'
 4 | 
 5 | export const usePullRequest = (id: number) => {
 6 |   const pullRequest = usePullRequestStore((state) => state.pullRequests[id])
 7 |   return pullRequest
 8 | }
 9 | 
10 | export const useFetchPullRequest = ({
11 |   owner,
12 |   repo,
13 |   pull_number,
14 | }: {
15 |   owner: string
16 |   repo: string
17 |   pull_number: number
18 | }) => {
19 |   return useQuery({
20 |     queryKey: ['pullRequests', owner, repo, pull_number],
21 |     queryFn: () => pullRequestRequest.fetchById({ owner, repo, pull_number }),
22 |   })
23 | }
24 | 


--------------------------------------------------------------------------------
/src/store/pull-request/store.ts:
--------------------------------------------------------------------------------
  1 | import type { DB_Notification, DB_PullRequest } from '~/database'
  2 | import { pullRequestService } from '~/database/services/pull-request'
  3 | import { octokit } from '~/lib/octokit'
  4 | import { queryClient } from '~/lib/query-client'
  5 | 
  6 | import { createZustandStore } from '../utils/helper'
  7 | import { AsyncQueue } from '../utils/queue'
  8 | 
  9 | interface PullRequestStoreState {
 10 |   pullRequests: Record<string, DB_PullRequest>
 11 | }
 12 | 
 13 | export const usePullRequestStore = createZustandStore<PullRequestStoreState>(
 14 |   'pullRequest',
 15 | )(() => ({
 16 |   pullRequests: {},
 17 | }))
 18 | 
 19 | const set = usePullRequestStore.setState
 20 | const get = usePullRequestStore.getState
 21 | 
 22 | class PullRequestStoreActionStatic {
 23 |   upsertMany(data: DB_PullRequest[]) {
 24 |     const current = get().pullRequests
 25 |     const newPullRequests = data.reduce(
 26 |       (acc, pr) => {
 27 |         acc[pr.id] = pr
 28 |         return acc
 29 |       },
 30 |       {} as Record<string, DB_PullRequest>,
 31 |     )
 32 | 
 33 |     set(() => {
 34 |       return {
 35 |         pullRequests: { ...current, ...newPullRequests },
 36 |       }
 37 |     })
 38 |   }
 39 | 
 40 |   collect(notifications: DB_Notification[]) {
 41 |     const tasks = [] as {
 42 |       owner: string
 43 |       repo: string
 44 |       pull_number: number
 45 |     }[]
 46 | 
 47 |     for (const item of notifications) {
 48 |       const { type } = item.subject
 49 |       if (type !== 'PullRequest') continue
 50 | 
 51 |       const { url } = item.subject
 52 |       const { pathname } = new URL(url)
 53 |       const [, , owner, repo, , pull_number] = pathname.split('/')
 54 | 
 55 |       tasks.push({
 56 |         owner,
 57 |         repo,
 58 |         pull_number: +pull_number,
 59 |       })
 60 |     }
 61 | 
 62 |     pullRequestRequest.fetchByIds(tasks)
 63 |   }
 64 | }
 65 | 
 66 | export const pullRequestAction = new PullRequestStoreActionStatic()
 67 | 
 68 | class PullRequestRequestStatic {
 69 |   private q = new AsyncQueue(10)
 70 | 
 71 |   fetchByIds(data: { owner: string; repo: string; pull_number: number }[]) {
 72 |     this.q.addMultiple(
 73 |       data.map(({ owner, repo, pull_number }) => async () => {
 74 |         const res = await queryClient.fetchQuery({
 75 |           queryKey: ['pullRequests', owner, repo, pull_number],
 76 |           queryFn: () => octokit.rest.pulls.get({ owner, repo, pull_number }),
 77 |           staleTime: 1000 * 60 * 10,
 78 |         })
 79 | 
 80 |         pullRequestAction.upsertMany([res.data])
 81 |         pullRequestService.upsertMany([res.data])
 82 |       }),
 83 |     )
 84 |   }
 85 | 
 86 |   async fetchById({
 87 |     owner,
 88 |     repo,
 89 |     pull_number,
 90 |   }: {
 91 |     owner: string
 92 |     repo: string
 93 |     pull_number: number
 94 |   }) {
 95 |     const res = await octokit.rest.pulls.get({ owner, repo, pull_number })
 96 |     pullRequestAction.upsertMany([res.data])
 97 |     pullRequestService.upsertMany([res.data])
 98 |     return res.data
 99 |   }
100 | }
101 | 
102 | export const pullRequestRequest = new PullRequestRequestStatic()
103 | 


--------------------------------------------------------------------------------
/src/store/repo-pin/getters.ts:
--------------------------------------------------------------------------------
 1 | import { useRepoPinStore } from './store'
 2 | 
 3 | export const getIsRepoPinned = (repoId: number) => {
 4 |   const state = useRepoPinStore.getState()
 5 |   return state.order.includes(repoId)
 6 | }
 7 | 
 8 | export const getPinRepositories = () => {
 9 |   const state = useRepoPinStore.getState()
10 |   return state.order
11 | }
12 | 


--------------------------------------------------------------------------------
/src/store/repo-pin/hooks.ts:
--------------------------------------------------------------------------------
 1 | import { getIsRepoPinned, getPinRepositories } from './getters'
 2 | import { useRepoPinStore } from './store'
 3 | 
 4 | export const useIsRepoPinned = (repoId: number) => {
 5 |   return useRepoPinStore(() => getIsRepoPinned(repoId))
 6 | }
 7 | 
 8 | export const usePinRepositories = () => {
 9 |   return useRepoPinStore(() => getPinRepositories())
10 | }
11 | 


--------------------------------------------------------------------------------
/src/store/repo-pin/store.ts:
--------------------------------------------------------------------------------
 1 | import type { DB_RepoPin } from '~/database'
 2 | import { RepoPinService } from '~/database/services/repo-pin'
 3 | 
 4 | import { createImmerSetter, createZustandStore } from '../utils/helper'
 5 | 
 6 | type RepoId = number
 7 | export interface RepoPinState {
 8 |   data: Record<RepoId, DB_RepoPin>
 9 |   order: RepoId[]
10 | }
11 | export const useRepoPinStore = createZustandStore<RepoPinState>('repoPin')(
12 |   () => {
13 |     return {
14 |       data: {},
15 |       order: [],
16 |     }
17 |   },
18 | )
19 | 
20 | const get = useRepoPinStore.getState
21 | const immerSet = createImmerSetter(useRepoPinStore)
22 | class RepoPinAction {
23 |   upsertMany(data: DB_RepoPin[]) {
24 |     immerSet((draft) => {
25 |       for (const item of data) {
26 |         draft.data[item.id] = item
27 |       }
28 | 
29 |       const newOrderId = Object.values(draft.data)
30 |         .sort((a, b) => a.order - b.order)
31 |         .map((i) => i.id)
32 |       draft.order = newOrderId
33 |     })
34 |   }
35 | 
36 |   pinRepo(id: RepoId) {
37 |     immerSet((draft) => {
38 |       const index = draft.order.indexOf(id)
39 |       if (index !== -1) {
40 |         return
41 |       }
42 |       draft.order.push(id)
43 |       draft.data[id] = {
44 |         createdAt: new Date(),
45 |         id,
46 |         order: draft.order.length,
47 |       }
48 |     })
49 |     RepoPinService.upsertMany(Object.values(get().data))
50 |   }
51 | 
52 |   unPinRepo(id: RepoId) {
53 |     immerSet((draft) => {
54 |       const index = draft.order.indexOf(id)
55 |       if (index === -1) {
56 |         return
57 |       }
58 | 
59 |       draft.order.splice(index, 1)
60 |       delete draft.data[id]
61 | 
62 |       const list = Object.values(draft.data)
63 |       for (const [i, element] of list.entries()) {
64 |         const { id } = element
65 |         draft.data[id].order = i
66 |       }
67 |     })
68 |     RepoPinService.deleteMany([id.toString()])
69 |   }
70 | 
71 |   reorder(id: RepoId, index: number) {
72 |     immerSet((draft) => {
73 |       const oldIndex = draft.order.indexOf(id)
74 |       if (oldIndex === -1) return
75 | 
76 |       // Remove from old position and insert at new position
77 |       draft.order.splice(oldIndex, 1)
78 |       draft.order.splice(index, 0, id)
79 | 
80 |       // Update order numbers for all items
81 |       const list = Object.values(draft.data)
82 |       for (const [i, element] of list.entries()) {
83 |         draft.data[element.id].order = i
84 |       }
85 |     })
86 |     RepoPinService.upsertMany(Object.values(get().data))
87 |   }
88 | }
89 | 
90 | export const repoPinAction = new RepoPinAction()
91 | 


--------------------------------------------------------------------------------
/src/store/repo/getters.ts:
--------------------------------------------------------------------------------
1 | import { useRepoStore } from './store'
2 | 
3 | export const getRepoById = (id: number) => {
4 |   return useRepoStore.getState().repos[id]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/repo/hooks.ts:
--------------------------------------------------------------------------------
 1 | import type { DB_Repo } from '~/database'
 2 | 
 3 | import { selectRepo, selectRepoList } from './selectors'
 4 | import { useRepoStore } from './store'
 5 | 
 6 | export const useRepo = (id: number) => {
 7 |   return useRepoStore(selectRepo(id)) as Nullable<DB_Repo>
 8 | }
 9 | 
10 | export const useRepoList = () => {
11 |   return useRepoStore(selectRepoList) as DB_Repo[]
12 | }
13 | 


--------------------------------------------------------------------------------
/src/store/repo/selectors.ts:
--------------------------------------------------------------------------------
 1 | import type { DB_Repo } from '~/database'
 2 | 
 3 | import { createSelectorHelper } from '../utils/helper'
 4 | import type { useRepoStore } from './store'
 5 | 
 6 | type StoreState = ReturnType<typeof useRepoStore.getState>
 7 | 
 8 | const defineSelector = createSelectorHelper<StoreState>()
 9 | 
10 | export const selectRepo = (id: number) =>
11 |   defineSelector((state) => state.repos[id])
12 | 
13 | export const selectRepoList = defineSelector((state) => {
14 |   const iterables = Object.values(state.repos)
15 | 
16 |   const repos = [] as Pick<
17 |     DB_Repo,
18 |     'id' | 'name' | 'full_name' | 'owner' | 'updated_at' | 'html_url'
19 |   >[]
20 |   for (const repo of iterables) {
21 |     repos.push({
22 |       id: repo.id,
23 |       name: repo.name,
24 |       full_name: repo.full_name,
25 |       owner: repo.owner,
26 |       updated_at: repo.updated_at,
27 |       html_url: repo.html_url,
28 |     })
29 |   }
30 |   return repos
31 | })
32 | 


--------------------------------------------------------------------------------
/src/store/repo/store.ts:
--------------------------------------------------------------------------------
 1 | import type { DB_Repo } from '~/database/schemas'
 2 | import { RepoService } from '~/database/services/repo'
 3 | import { octokit } from '~/lib/octokit'
 4 | 
 5 | import { createZustandStore } from '../utils/helper'
 6 | import { AsyncQueue } from '../utils/queue'
 7 | 
 8 | interface RepoStoreState {
 9 |   repos: Record<string, DB_Repo>
10 | }
11 | export const useRepoStore = createZustandStore<RepoStoreState>('repo')(() => ({
12 |   repos: {},
13 | }))
14 | 
15 | // const get = useRepoStore.getState
16 | const set = useRepoStore.setState
17 | 
18 | class RepoStoreActionsStatic {
19 |   upsertManyInStore(data: DB_Repo[]) {
20 |     set((state) => {
21 |       const map = { ...state.repos }
22 |       for (const n of data) {
23 |         map[n.id] = n
24 |       }
25 | 
26 |       return { ...state, repos: map }
27 |     })
28 |   }
29 |   upsertMany(data: DB_Repo[]) {
30 |     this.upsertManyInStore(data)
31 |     RepoService.upsertMany(data)
32 |   }
33 | }
34 | 
35 | class RepoRequestStatic {
36 |   private q = new AsyncQueue(10)
37 |   fetchByIds(data: { owner: string; repo: string }[]) {
38 |     this.q.addMultiple(
39 |       data.map(
40 |         ({ owner, repo }) =>
41 |           () =>
42 |             octokit.rest.repos.get({ owner, repo }),
43 |       ),
44 |     )
45 |   }
46 | }
47 | 
48 | export const repoRequest = new RepoRequestStatic()
49 | 
50 | export const RepoStoreActions = new RepoStoreActionsStatic()
51 | 


--------------------------------------------------------------------------------
/src/store/utils/helper.ts:
--------------------------------------------------------------------------------
  1 | import { isDraft, original, produce } from 'immer'
  2 | import type { StateCreator, StoreApi, UseBoundStore } from 'zustand'
  3 | import type { PersistStorage } from 'zustand/middleware'
  4 | import { shallow } from 'zustand/shallow'
  5 | import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
  6 | import { createWithEqualityFn } from 'zustand/traditional'
  7 | 
  8 | import { runTransactionInScope } from '~/database'
  9 | 
 10 | declare const window: any
 11 | export const localStorage: PersistStorage<any> = {
 12 |   getItem: (name: string) => {
 13 |     const data = window.localStorage.getItem(name)
 14 | 
 15 |     if (data === null) {
 16 |       return null
 17 |     }
 18 | 
 19 |     try {
 20 |       return JSON.parse(data)
 21 |     } catch {
 22 |       return data
 23 |     }
 24 |   },
 25 |   setItem: (name, value) => {
 26 |     window.localStorage.setItem(name, JSON.stringify(value))
 27 |   },
 28 |   removeItem: (name: string) => {
 29 |     window.localStorage.removeItem(name)
 30 |   },
 31 | }
 32 | 
 33 | const storeMap = {} as Record<string, UseBoundStoreWithEqualityFn<any>>
 34 | 
 35 | export const createZustandStore =
 36 |   <S, T extends StateCreator<S, [], []> = StateCreator<S, [], []>>(
 37 |     name: string,
 38 |   ) =>
 39 |   (store: T) => {
 40 |     if (import.meta.env.DEV && window[`store_${name}`]) {
 41 |       import.meta.hot?.send(
 42 |         'message',
 43 |         'The store has been changed, reloading...',
 44 |       )
 45 |       globalThis.location.reload()
 46 |     }
 47 | 
 48 |     const newStore = createWithEqualityFn(store, shallow)
 49 | 
 50 |     storeMap[name] = newStore
 51 | 
 52 |     window.store =
 53 |       window.store ||
 54 |       new Proxy(
 55 |         {},
 56 |         {
 57 |           get(_, prop) {
 58 |             if (prop in storeMap) {
 59 |               return storeMap[prop as string].getState()
 60 |             }
 61 |             return
 62 |           },
 63 |         },
 64 |       )
 65 | 
 66 |     window[`store_${name}`] = newStore
 67 | 
 68 |     return newStore
 69 |   }
 70 | type FunctionKeys<T> = {
 71 |   [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never
 72 | }[keyof T]
 73 | 
 74 | type FunctionProps<T> = Pick<T, FunctionKeys<T>>
 75 | export const getStoreActions = <T extends { getState: () => any }>(
 76 |   store: T,
 77 | ): FunctionProps<ReturnType<T['getState']>> => {
 78 |   const actions = {}
 79 |   const state = store.getState()
 80 |   for (const key in state) {
 81 |     if (typeof state[key] === 'function') {
 82 |       actions[key] = state[key]
 83 |     }
 84 |   }
 85 | 
 86 |   return actions as any
 87 | }
 88 | 
 89 | export function createImmerSetter<T>(useStore: UseBoundStore<StoreApi<T>>) {
 90 |   return (updater: (state: T) => void) =>
 91 |     useStore.setState((state) =>
 92 |       produce(state, (draft) => {
 93 |         updater(draft as T)
 94 |       }),
 95 |     )
 96 | }
 97 | 
 98 | type MayBeDraft<T> = T
 99 | export const toRaw = <T>(draft: MayBeDraft<T>): T => {
100 |   return isDraft(draft) ? original(draft)! : draft
101 | }
102 | 
103 | // 添加新的类型定义
104 | type SyncOrAsync<T> = T | Promise<T>
105 | type ExecutorFn<S, Ctx> = (snapshot: S, ctx: Ctx) => SyncOrAsync<void>
106 | 
107 | class Transaction<S, Ctx> {
108 |   private _snapshot: S
109 |   private _ctx: Ctx
110 |   private onRollback?: ExecutorFn<S, Ctx>
111 |   private executorFn?: ExecutorFn<S, Ctx>
112 |   private optimisticExecutor?: ExecutorFn<S, Ctx>
113 |   private onPersist?: ExecutorFn<S, Ctx>
114 | 
115 |   constructor(snapshot?: S, ctx?: Ctx) {
116 |     this._snapshot = snapshot || ({} as S)
117 |     this._ctx = ctx || ({} as Ctx)
118 |   }
119 | 
120 |   rollback(fn: ExecutorFn<S, Ctx>): this {
121 |     this.onRollback = fn
122 |     return this
123 |   }
124 | 
125 |   execute(executor: ExecutorFn<S, Ctx>): this {
126 |     this.executorFn = executor
127 |     return this
128 |   }
129 | 
130 |   optimistic(executor: ExecutorFn<S, Ctx>): this {
131 |     this.optimisticExecutor = executor
132 |     return this
133 |   }
134 | 
135 |   persist(fn: ExecutorFn<S, Ctx>): this {
136 |     this.onPersist = fn
137 |     return this
138 |   }
139 | 
140 |   async run(): Promise<void> {
141 |     let isOptimisticFailed = false
142 | 
143 |     if (this.optimisticExecutor) {
144 |       try {
145 |         await Promise.resolve(
146 |           this.optimisticExecutor(this._snapshot, this._ctx),
147 |         )
148 |       } catch (error) {
149 |         isOptimisticFailed = true
150 |         console.error(error)
151 |       }
152 |     }
153 | 
154 |     if (this.executorFn) {
155 |       try {
156 |         await Promise.resolve(this.executorFn(this._snapshot, this._ctx))
157 |       } catch (err) {
158 |         if (this.onRollback && !isOptimisticFailed) {
159 |           await Promise.resolve(this.onRollback(this._snapshot, this._ctx))
160 |         }
161 |         throw err
162 |       }
163 |     }
164 | 
165 |     if (this.onPersist) {
166 |       await runTransactionInScope(() =>
167 |         Promise.resolve(this.onPersist!(this._snapshot, this._ctx)),
168 |       )
169 |     }
170 |   }
171 | }
172 | 
173 | export const createTransaction = <S, Ctx>(
174 |   snapshot?: S,
175 |   ctx?: Ctx,
176 | ): Transaction<S, Ctx> => {
177 |   return new Transaction(snapshot, ctx)
178 | }
179 | 
180 | export const createSelectorHelper = <TState>() => {
181 |   return function defineSelector<TSelected>(
182 |     selector: (state: TState) => TSelected,
183 |   ) {
184 |     return selector
185 |   }
186 | }
187 | 


--------------------------------------------------------------------------------
/src/store/utils/queue.ts:
--------------------------------------------------------------------------------
 1 | export class AsyncQueue {
 2 |   private maxConcurrent: number
 3 |   private queue: (() => Promise<any>)[]
 4 |   private activeCount: number
 5 | 
 6 |   constructor(maxConcurrent: number) {
 7 |     this.maxConcurrent = maxConcurrent
 8 |     this.queue = []
 9 |     this.activeCount = 0
10 |   }
11 | 
12 |   private async runNext() {
13 |     if (this.activeCount >= this.maxConcurrent || this.queue.length === 0) {
14 |       return
15 |     }
16 | 
17 |     this.activeCount++
18 |     const request = this.queue.shift()!
19 | 
20 |     try {
21 |       return await request()
22 |     } catch (error) {
23 |       console.error('Request failed', error)
24 |     } finally {
25 |       this.activeCount--
26 |       this.runNext() // Start the next request after this one finishes
27 |     }
28 |   }
29 | 
30 |   add(request: () => Promise<any>) {
31 |     this.queue.push(request)
32 |     return this.runNext()
33 |   }
34 | 
35 |   addMultiple(requests: (() => Promise<any>)[]) {
36 |     this.queue.push(...requests)
37 |     this.runNext()
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
1 | @import './tailwind.css';
2 | @import './theme.css';
3 | 


--------------------------------------------------------------------------------
/src/styles/layer.css:
--------------------------------------------------------------------------------
 1 | /* This CSS File do not import anywhere, just write atom class for tailwindcss. The tailwindcss intellisense will be work. */
 2 | 
 3 | @tailwind components;
 4 | 
 5 | @layer components {
 6 |   .drag-region {
 7 |     -webkit-app-region: drag;
 8 |   }
 9 | 
10 |   .no-drag-region {
11 |     -webkit-app-region: no-drag;
12 |   }
13 |   .mask-squircle {
14 |     mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
15 |   }
16 |   .mask {
17 |     mask-size: contain;
18 |     mask-repeat: no-repeat;
19 |     mask-position: center;
20 |   }
21 | 
22 |   .center {
23 |     @apply flex items-center justify-center;
24 |   }
25 | 
26 |   .shadow-perfect {
27 |     /* https://codepen.io/jh3y/pen/yLWgjpd */
28 |     --tint: 214;
29 |     --alpha: 3;
30 |     --base: hsl(var(--tint, 214) 80% 27% / calc(var(--alpha, 4) * 1%));
31 |     /**
32 |       * Use relative syntax to get to: hsl(221 25% 22% / 40%)
33 |     */
34 |     --shade: hsl(from var(--base) calc(h + 8) 25 calc(l - 5));
35 |     --perfect-shadow: 0 0 0 1px var(--base), 0 1px 1px -0.5px var(--shade),
36 |       0 3px 3px -1.5px var(--shade), 0 6px 6px -3px var(--shade),
37 |       0 12px 12px -6px var(--base), 0 24px 24px -12px var(--base);
38 |     box-shadow: var(--perfect-shadow);
39 |   }
40 | 
41 |   .perfect-sm {
42 |     --alpha: 1;
43 |   }
44 | 
45 |   .perfect-md {
46 |     --alpha: 2;
47 |   }
48 | 
49 |   [theme='dark'] .shadow-perfect {
50 |     --tint: 221;
51 |   }
52 | 
53 |   .shadow-modal {
54 |     @apply shadow-2xl shadow-stone-300 dark:shadow-stone-900;
55 |   }
56 |   /* Utils */
57 |   .no-animation {
58 |     --btn-focus-scale: 1;
59 |     --animation-btn: 0;
60 |     --animation-input: 0;
61 |   }
62 | }
63 | 
64 | /* Context menu */
65 | @layer components {
66 |   .shadow-context-menu {
67 |     box-shadow:
68 |       rgba(0, 0, 0, 0.067) 0px 3px 8px,
69 |       rgba(0, 0, 0, 0.067) 0px 2px 5px,
70 |       rgba(0, 0, 0, 0.067) 0px 1px 1px;
71 |   }
72 | }
73 | 
74 | @layer components {
75 |   .flex {
76 |     display: flex;
77 |     min-width: 0;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/styles/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html {
 6 |   @apply font-sans;
 7 | }
 8 | 
 9 | html body {
10 |   @apply max-w-screen overflow-x-hidden;
11 |   overscroll-behavior: none;
12 | }
13 | 
14 | /* @media (min-width: 2160px) {
15 |   html {
16 |     font-size: 15px;
17 |   }
18 | } */
19 | 
20 | *:focus {
21 |   outline: none;
22 | }
23 | 
24 | *:not(input):not(textarea):not([contenteditable='true']):focus-visible {
25 |   outline: 0 !important;
26 |   box-shadow: theme(colors.accent) 0px 0px 0px 1px;
27 | }
28 | * {
29 |   tab-size: 2;
30 | 
31 |   &:hover {
32 |     scrollbar-color: auto;
33 |   }
34 | }
35 | 
36 | a {
37 |   @apply break-all;
38 | }
39 | 
40 | @screen lg {
41 |   input,
42 |   textarea {
43 |     font-size: 1rem;
44 |   }
45 | }
46 | 
47 | .prose p:last-child {
48 |   margin-bottom: 0;
49 | }
50 | 
51 | .prose
52 |   :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
53 |   @apply relative border-0;
54 | 
55 |   &::before {
56 |     content: '';
57 |     display: block;
58 |     width: 3px;
59 |     height: 100%;
60 |     position: absolute;
61 |     left: 0;
62 |     top: 0;
63 |     border-radius: 1em;
64 |     background-color: theme(colors.accent);
65 |   }
66 | }
67 | 
68 | @font-face {
69 |   font-family: 'Geist Sans';
70 |   src: url('../assets/fonts/GeistVF.woff2') format('woff2');
71 |   font-style: normal;
72 |   font-weight: 100 900;
73 | }
74 | 
75 | @layer base {
76 |   * {
77 |     @apply border-border;
78 |   }
79 |   body {
80 |     font-feature-settings:
81 |       'rlig' 1,
82 |       'calt' 1;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/styles/theme.css:
--------------------------------------------------------------------------------
 1 | [data-theme='light'] {
 2 |   --radius: 0.5rem;
 3 |   --border: 20 5.9% 90%;
 4 |   --sidebar: 240 4.8% 95.9%;
 5 | 
 6 |   --header-tab-link-bg: lch(95% 8.568 282.863 / 1);
 7 |   --muted: 240 4.8% 95.9%;
 8 | 
 9 |   --tertiary: lch(83.788 4.284 282.863);
10 | }
11 | 
12 | [data-theme='dark'] {
13 |   --radius: 0.5rem;
14 |   --border: 0 0% 22.1%;
15 |   --sidebar: 220 8.1% 14.5%;
16 | 
17 |   --header-tab-link-bg: lch(14.471% 8.568 282.863 / 1);
18 |   --muted: 220 8.1% 14.5%;
19 | 
20 |   --tertiary: lch(63.788 4.284 282.863);
21 | }
22 | 
23 | html,
24 | #shadow-html {
25 |   --pointer: default;
26 | 
27 |   --cursor-button: var(--pointer);
28 |   --cursor-select: var(--pointer);
29 |   --cursor-checkbox: var(--pointer);
30 |   --cursor-link: var(--pointer);
31 |   --cursor-menu: default;
32 |   --cursor-radio: var(--pointer);
33 |   --cursor-switch: var(--pointer);
34 |   --cursor-card: var(--pointer);
35 | }
36 | 
37 | button {
38 |   cursor: var(--cursor-button);
39 | }
40 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
  2 | import typography from '@tailwindcss/typography'
  3 | import daisyui from 'daisyui'
  4 | import { withTV } from 'tailwind-variants/transformer'
  5 | import type { Config } from 'tailwindcss'
  6 | import defaultTheme from 'tailwindcss/defaultTheme'
  7 | import { colors } from 'tailwindcss-uikit-colors/tailwind'
  8 | 
  9 | require('./plugins/css-plugin')
 10 | 
 11 | const omit = (obj: Record<string, any>, keys: string[]) => {
 12 |   return Object.fromEntries(
 13 |     Object.entries(obj).filter(([key]) => !keys.includes(key)),
 14 |   )
 15 | }
 16 | 
 17 | const ignoreUIKitColorKeys = [
 18 |   'red',
 19 |   'orange',
 20 |   'yellow',
 21 |   'green',
 22 |   'mint',
 23 |   'teal',
 24 |   'cyan',
 25 |   'blue',
 26 |   'indigo',
 27 |   'purple',
 28 |   'pink',
 29 |   'brown',
 30 |   'gray',
 31 | ]
 32 | 
 33 | const twConfig: Config = {
 34 |   content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
 35 |   darkMode: ['class', '[data-theme="dark"]'],
 36 | 
 37 |   theme: {
 38 |     container: {
 39 |       center: true,
 40 |       padding: '2rem',
 41 |       screens: {
 42 |         '2xl': '1400px',
 43 |       },
 44 |     },
 45 | 
 46 |     extend: {
 47 |       cursor: {
 48 |         button: 'var(--cursor-button)',
 49 |         select: 'var(--cursor-select)',
 50 |         checkbox: 'var(--cursor-checkbox)',
 51 |         link: 'var(--cursor-link)',
 52 |         menu: 'var(--cursor-menu)',
 53 |         radio: 'var(--cursor-radio)',
 54 |         switch: 'var(--cursor-switch)',
 55 |         card: 'var(--cursor-card)',
 56 |       },
 57 | 
 58 |       colors: {
 59 |         ...omit(colors, ignoreUIKitColorKeys),
 60 |         border: 'hsl(var(--border) / <alpha-value>)',
 61 |         sidebar: 'hsl(var(--sidebar) / <alpha-value>)',
 62 |         muted: 'hsl(var(--muted) / <alpha-value>)',
 63 |         tertiary: 'var(--tertiary)',
 64 |       },
 65 |       borderRadius: {
 66 |         lg: 'var(--radius)',
 67 |         md: 'calc(var(--radius) - 2px)',
 68 |         sm: 'calc(var(--radius) - 4px)',
 69 |       },
 70 | 
 71 |       fontFamily: {
 72 |         sans: ['Geist Sans', ...defaultTheme.fontFamily.sans],
 73 | 
 74 |         serif:
 75 |           '"Noto Serif CJK SC","Noto Serif SC",var(--font-serif),"Source Han Serif SC","Source Han Serif",source-han-serif-sc,SongTi SC,SimSum,"Hiragino Sans GB",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,"Microsoft YaHei","WenQuanYi Micro Hei",sans-serif',
 76 |         mono: `"OperatorMonoSSmLig Nerd Font","Cascadia Code PL","FantasqueSansMono Nerd Font","operator mono",JetBrainsMono,"Fira code Retina","Fira code","Consolas", Monaco, "Hannotate SC", monospace, -apple-system`,
 77 |       },
 78 |       screens: {
 79 |         'light-mode': { raw: '(prefers-color-scheme: light)' },
 80 |         'dark-mode': { raw: '(prefers-color-scheme: dark)' },
 81 | 
 82 |         'w-screen': '100vw',
 83 |         'h-screen': '100vh',
 84 |       },
 85 |       maxWidth: {
 86 |         screen: '100vw',
 87 |       },
 88 |       width: {
 89 |         screen: '100vw',
 90 |       },
 91 |       height: {
 92 |         screen: '100vh',
 93 |       },
 94 |       maxHeight: {
 95 |         screen: '100vh',
 96 |       },
 97 |     },
 98 |   },
 99 | 
100 |   daisyui: {
101 |     logs: false,
102 |     themes: [
103 |       {
104 |         light: {
105 |           'color-scheme': 'light',
106 |           primary: '#000',
107 |           secondary: '#CBDCEB',
108 |           accent: '#0969da',
109 |           'accent-content': '#fafafa',
110 |           neutral: '#C7C7CC',
111 |           'base-100': '#fff',
112 |           'base-content': '#000',
113 |           info: '#007AFF',
114 |           success: '#34C759',
115 |           warning: '#FF9500',
116 |           error: '#FF3B30',
117 |           '--rounded-btn': '1.9rem',
118 |           '--tab-border': '2px',
119 |           '--tab-radius': '.5rem',
120 |         },
121 |       },
122 |       {
123 |         dark: {
124 |           'color-scheme': 'dark',
125 |           primary: '#fff',
126 |           secondary: '#608BC1',
127 |           accent: '#316dca',
128 |           neutral: '#48484A',
129 |           'base-100': '#1C1C1E',
130 |           'base-content': '#FFF',
131 |           info: '#0A84FF',
132 |           success: '#30D158',
133 |           warning: '#FF9F0A',
134 |           error: '#FF453A',
135 |           '--rounded-btn': '1.9rem',
136 |           '--tab-border': '2px',
137 |           '--tab-radius': '.5rem',
138 |         },
139 |       },
140 |     ],
141 |     darkTheme: 'dark',
142 |   },
143 | 
144 |   plugins: [
145 |     iconsPlugin({
146 |       collections: {
147 |         ...getIconCollections(['mingcute', 'octicon']),
148 |       },
149 |     }),
150 | 
151 |     typography,
152 |     daisyui,
153 | 
154 |     require('tailwind-scrollbar'),
155 |     require('@tailwindcss/container-queries'),
156 |     require('tailwindcss-animated'),
157 |     require('tailwindcss-animate'),
158 |     require('tailwindcss-motion'),
159 | 
160 |     require('./src/styles/theme.css'),
161 |     require('./src/styles/layer.css'),
162 |   ],
163 | }
164 | 
165 | export default withTV(twConfig)
166 | 


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
1 | 侧栏显示 issue pr 详情 + 支持评论
2 | 收藏 + 追踪
3 | 置顶某个 repo + 自己的置顶
4 | 排序
5 | 搜索
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": [
 5 |       "DOM",
 6 |       "DOM.Iterable",
 7 |       "ESNext"
 8 |     ],
 9 |     "allowJs": false,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": false,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "ESNext",
16 |     "moduleResolution": "bundler",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "skipDefaultLibCheck": true,
20 |     "noImplicitAny": false,
21 |     "noEmit": true,
22 |     "jsx": "preserve",
23 |     "paths": {
24 |       "~/*": [
25 |         "./src/*"
26 |       ],
27 |       "@pkg": [
28 |         "./package.json"
29 |       ]
30 |     },
31 |   },
32 |   "include": [
33 |     "./src/**/*",
34 |   ]
35 | }


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rewrites": [
 3 |     {
 4 |       "source": "/__debug_proxy",
 5 |       "destination": "/__debug_proxy.html"
 6 |     },
 7 |     {
 8 |       "source": "/__debug_proxy/:path*",
 9 |       "destination": "/__debug_proxy.html"
10 |     },
11 |     {
12 |       "source": "/((?!assets|vendor).*)",
13 |       "destination": "/index.html"
14 |     }
15 |   ],
16 |   "headers": [
17 |     {
18 |       "source": "/assets/(.*)",
19 |       "headers": [
20 |         {
21 |           "key": "Cache-Tag",
22 |           "value": "linear-assets"
23 |         }
24 |       ]
25 |     }
26 |   ]
27 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import reactRefresh from '@vitejs/plugin-react'
 2 | import { cyan, dim, green } from 'kolorist'
 3 | import { RemoveWrapperFunction } from 'unplugin-ast/transformers'
 4 | import AST from 'unplugin-ast/vite'
 5 | import type { PluginOption, ViteDevServer } from 'vite'
 6 | import { defineConfig } from 'vite'
 7 | import { checker } from 'vite-plugin-checker'
 8 | import tsconfigPaths from 'vite-tsconfig-paths'
 9 | 
10 | import PKG from './package.json'
11 | 
12 | const devPrint = (): PluginOption => ({
13 |   name: 'dev-print',
14 |   configureServer(server: ViteDevServer) {
15 |     const _printUrls = server.printUrls
16 |     server.printUrls = () => {
17 |       _printUrls()
18 |       console.info(
19 |         `  ${green('➜')}  ${dim('Online debug')}: ${cyan(
20 |           'https://linear.innei.in/__debug_proxy',
21 |         )}`,
22 |       )
23 |     }
24 |   },
25 | })
26 | 
27 | // https://vitejs.dev/config/
28 | export default defineConfig({
29 |   plugins: [
30 |     reactRefresh(),
31 |     tsconfigPaths(),
32 |     // MillionLint.vite({}),
33 |     checker({
34 |       typescript: true,
35 |       enableBuild: true,
36 |     }),
37 |     AST({
38 |       transformer: [RemoveWrapperFunction(['tw', 'defineSettingPageData'])],
39 |     }),
40 |     devPrint(),
41 |   ],
42 |   server: {
43 |     port: 7123,
44 |   },
45 |   define: {
46 |     APP_DEV_CWD: JSON.stringify(process.cwd()),
47 |     APP_NAME: JSON.stringify(PKG.name),
48 |   },
49 | })
50 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { readFileSync } from 'node:fs'
 2 | import { resolve } from 'node:path'
 3 | import { fileURLToPath } from 'node:url'
 4 | 
 5 | import tsconfigPath from 'vite-tsconfig-paths'
 6 | import { defineProject } from 'vitest/config'
 7 | 
 8 | const pkg = JSON.parse(readFileSync('package.json', 'utf8'))
 9 | const __dirname = fileURLToPath(new URL('.', import.meta.url))
10 | 
11 | export default defineProject({
12 |   root: './',
13 |   test: {
14 |     globals: true,
15 |     setupFiles: [resolve(__dirname, './setup-file.ts')],
16 |     environment: 'happy-dom',
17 |     includeSource: [resolve(__dirname, '.')],
18 |     dom: true,
19 |   },
20 | 
21 |   define: {
22 |     APP_VERSION: JSON.stringify(pkg.version),
23 |     APP_NAME: JSON.stringify(pkg.name),
24 |     APP_DEV_CWD: JSON.stringify(process.cwd()),
25 | 
26 |     GIT_COMMIT_SHA: "'SHA'",
27 |   },
28 | 
29 |   plugins: [
30 |     tsconfigPath({
31 |       projects: ['./tsconfig.json'],
32 |     }),
33 |   ],
34 | })
35 | 


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