Initial commit

2026-06-29 19:29:19 +05:30
commit aabb8986aa
292 changed files with 17976 additions and 0 deletions
--- a/pages/side-panel/index.html
+++ b/pages/side-panel/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Side Panel</title>
+  </head>
+
+  <body>
+    <div id="app-container"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
--- a/pages/side-panel/package.json
+++ b/pages/side-panel/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@extension/sidepanel",
+  "version": "0.5.0",
+  "description": "chrome extension - side panel",
+  "type": "module",
+  "private": true,
+  "sideEffects": true,
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "clean:node_modules": "pnpx rimraf node_modules",
+    "clean:turbo": "rimraf .turbo",
+    "clean": "pnpm clean:turbo && pnpm clean:node_modules",
+    "build": "vite build",
+    "dev": "vite build --mode development",
+    "lint": "eslint .",
+    "lint:fix": "pnpm lint --fix",
+    "format": "prettier . --write --ignore-path ../../.prettierignore",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@extension/shared": "workspace:*",
+    "@extension/storage": "workspace:*",
+    "@extension/i18n": "workspace:*",
+    "@extension/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@extension/tailwindcss-config": "workspace:*",
+    "@extension/tsconfig": "workspace:*",
+    "@extension/vite-config": "workspace:*"
+  },
+  "postcss": {
+    "plugins": {
+      "tailwindcss": {},
+      "autoprefixer": {}
+    }
+  }
+}
--- a/pages/side-panel/public/logo_vertical.svg
+++ b/pages/side-panel/public/logo_vertical.svg
--- a/pages/side-panel/public/logo_vertical_dark.svg
+++ b/pages/side-panel/public/logo_vertical_dark.svg
--- a/pages/side-panel/src/SidePanel.css
+++ b/pages/side-panel/src/SidePanel.css
@@ -0,0 +1,30 @@
+.App {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  height: 100%;
+  padding: 1rem;
+}
+
+.App-logo {
+  height: 50vmin;
+  margin-bottom: 1rem;
+}
+
+.App-header {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+code {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5rem;
+}
--- a/pages/side-panel/src/SidePanel.tsx
+++ b/pages/side-panel/src/SidePanel.tsx
@@ -0,0 +1,28 @@
+import '@src/SidePanel.css';
+import { t } from '@extension/i18n';
+import { PROJECT_URL_OBJECT, useStorage, withErrorBoundary, withSuspense } from '@extension/shared';
+import { exampleThemeStorage } from '@extension/storage';
+import { cn, ErrorDisplay, LoadingSpinner, ToggleButton } from '@extension/ui';
+
+const SidePanel = () => {
+  const { isLight } = useStorage(exampleThemeStorage);
+  const logo = isLight ? 'side-panel/logo_vertical.svg' : 'side-panel/logo_vertical_dark.svg';
+
+  const goGithubSite = () => chrome.tabs.create(PROJECT_URL_OBJECT);
+
+  return (
+    <div className={cn('App', isLight ? 'bg-slate-50' : 'bg-gray-800')}>
+      <header className={cn('App-header', isLight ? 'text-gray-900' : 'text-gray-100')}>
+        <button onClick={goGithubSite}>
+          <img src={chrome.runtime.getURL(logo)} className="App-logo" alt="logo" />
+        </button>
+        <p>
+          Edit <code>pages/side-panel/src/SidePanel.tsx</code>
+        </p>
+        <ToggleButton onClick={exampleThemeStorage.toggle}>{t('toggleTheme')}</ToggleButton>
+      </header>
+    </div>
+  );
+};
+
+export default withErrorBoundary(withSuspense(SidePanel, <LoadingSpinner />), ErrorDisplay);
--- a/pages/side-panel/src/index.css
+++ b/pages/side-panel/src/index.css
@@ -0,0 +1 @@
+@import '@extension/ui/global.css';
--- a/pages/side-panel/src/index.tsx
+++ b/pages/side-panel/src/index.tsx
@@ -0,0 +1,14 @@
+import '@src/index.css';
+import SidePanel from '@src/SidePanel';
+import { createRoot } from 'react-dom/client';
+
+const init = () => {
+  const appContainer = document.querySelector('#app-container');
+  if (!appContainer) {
+    throw new Error('Can not find #app-container');
+  }
+  const root = createRoot(appContainer);
+  root.render(<SidePanel />);
+};
+
+init();
--- a/pages/side-panel/tailwind.config.ts
+++ b/pages/side-panel/tailwind.config.ts
@@ -0,0 +1,5 @@
+import { withUI } from '@extension/ui';
+
+export default withUI({
+  content: ['index.html', 'src/**/*.tsx'],
+});
--- a/pages/side-panel/tsconfig.json
+++ b/pages/side-panel/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@extension/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"]
+    },
+    "types": ["chrome", "node"]
+  },
+  "include": ["src", "vite.config.mts", "tailwind.config.ts"]
+}
--- a/pages/side-panel/vite.config.mts
+++ b/pages/side-panel/vite.config.mts
@@ -0,0 +1,17 @@
+import { resolve } from 'node:path';
+import { withPageConfig } from '@extension/vite-config';
+
+const rootDir = resolve(import.meta.dirname);
+const srcDir = resolve(rootDir, 'src');
+
+export default withPageConfig({
+  resolve: {
+    alias: {
+      '@src': srcDir,
+    },
+  },
+  publicDir: resolve(rootDir, 'public'),
+  build: {
+    outDir: resolve(rootDir, '..', '..', 'dist', 'side-panel'),
+  },
+});