Skip to content

Commit 893dc3a

Browse files
emrecppemrecpp
committed
feat(new ui & swagger-ui): New UI & begin building interactive UI menu for Swagger interface
1 parent 8a60622 commit 893dc3a

42 files changed

Lines changed: 1136 additions & 1282 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎content-script/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" translate="no">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="/favicon.ico" />

‎content-script/src/App.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11

22
function App() {
3-
// Not avaible for now
4-
return null
5-
// return (
6-
// <div className="w-full text-center">
7-
// <header className="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-2xl text-white">
8-
// <p>Hello, World!</p>
9-
// <p>I'm a Chrome Extension Content Script!</p>
10-
//
11-
// </header>
12-
// </div>
13-
// );
3+
return null
4+
return (
5+
<div className="w-full text-center">
6+
<header className="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-2xl text-white">
7+
<p>Hello, World!</p>
8+
</header>
9+
</div>
10+
);
1411
}
1512

1613
export default App;

‎content-script/src/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎content-script/src/main.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
// import React from "react";
2-
// import { createRoot } from "react-dom/client";
3-
// import App from "./App";
1+
import React from "react";
2+
import { createRoot } from "react-dom/client";
3+
import App from "./App";
4+
import cssText from "./index.css?inline";
45

5-
// const app = document.createElement("div");
6-
// app.id = "root";
7-
//
8-
// document.body.prepend(app);
9-
//
10-
// const root = createRoot(app);
11-
//
12-
// root.render(
13-
// <React.StrictMode>
14-
// <App />
15-
// </React.StrictMode>
16-
// );
6+
const container = document.createElement("div");
7+
const shadowRoot = container.attachShadow({ mode: "open" });
8+
document.body.appendChild(container);
179

10+
const style = document.createElement("style");
11+
style.textContent = cssText;
12+
shadowRoot.appendChild(style);
1813

14+
const reactRoot = document.createElement("div");
15+
shadowRoot.appendChild(reactRoot);
16+
17+
const root = createRoot(reactRoot);
18+
root.render(
19+
<React.StrictMode>
20+
<App />
21+
</React.StrictMode>
22+
);

‎package-lock.json‎

Lines changed: 14 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"preview": "vite preview"
1212
},
1313
"dependencies": {
14+
"@fontsource/inter": "^5.2.5",
1415
"@hello-pangea/dnd": "^18.0.1",
1516
"@radix-ui/react-checkbox": "^1.1.3",
1617
"@radix-ui/react-dialog": "^1.1.4",
@@ -27,7 +28,7 @@
2728
"class-variance-authority": "^0.7.1",
2829
"clsx": "^2.1.1",
2930
"framer-motion": "^11.16.4",
30-
"lucide-react": "^0.469.0",
31+
"lucide-react": "^0.508.0",
3132
"react": "^18.3.1",
3233
"react-dom": "^18.3.1",
3334
"react-hot-toast": "^2.5.1",

‎src/app/App.tsx‎

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,17 @@
11
import TabPages from "@/app/pages/TabPages.tsx";
22
import { useGlobalContext } from "@/context/global-context";
33
import { useEffectAfterMount } from "@/hooks/useEffectAfterMount.ts";
4-
import { exportToFile, getTabInfo, sendMessage } from "@/lib/utils.ts";
4+
import {cn, exportToFile, getTabInfo, sendMessage} from "@/lib/utils.ts";
55
import { useEffect } from 'react';
66
import { Header } from './components/Header';
7-
8-
/* Temporary solution for react-beautiful-dnd with React 18 */
9-
import React from 'react';
10-
// @ts-ignore
11-
window.React = React;
7+
import "@fontsource/inter";
128

139
const STORAGE_KEY = 'Cookify'
14-
1510
export default function App() {
1611
const {cookies, setCookies, swaggers, setSwaggers, setCurrentView} = useGlobalContext()
1712

1813

1914
useEffect(() => {
20-
const handleAutoLogin = async (tabId: number, swagger: any) => {
21-
const key = `hasRun_${tabId}`
22-
const result = await chrome.storage.local.get([key])
23-
24-
if (!result[key]) {
25-
await chrome.storage.local.set({[key]: true})
26-
await sendMessage("loginSwagger", {bearerToken: swagger.bearerToken})
27-
28-
chrome.tabs.onRemoved.addListener((closedTabId) => {
29-
if (closedTabId === tabId)
30-
chrome.storage.local.remove(key)
31-
})
32-
}
33-
}
34-
3515
const initializeExtension = async () => {
3616
const savedCookies = localStorage.getItem(STORAGE_KEY)
3717
if (!savedCookies) return
@@ -45,30 +25,11 @@ export default function App() {
4525
const {isSwagger} = await sendMessage("isSwagger", {})
4626
setCurrentView(isSwagger ? "list-swaggers" : "list-cookies")
4727

48-
49-
if (isSwagger && data.swaggers.length > 0) {
50-
const autoLoginSwagger = data.swaggers.find(swagger => swagger.autoLogin)
51-
if (autoLoginSwagger)
52-
await handleAutoLogin(tabs[0].id, autoLoginSwagger)
53-
54-
}
5528
}
5629

57-
const handlePageLoad = async (details: chrome.webNavigation.NavFrameDetails) => {
58-
if (details.frameId === 0) { // Main frame only
59-
const {tabs} = await getTabInfo()
60-
chrome.storage.local.remove(`hasRun_${tabs[0].id}`)
61-
initializeExtension().catch(console.error)
62-
}
63-
}
64-
65-
/* When the page is refreshed, ensure automatic login on extension click */
66-
chrome.webNavigation.onCompleted.addListener(handlePageLoad)
67-
6830
initializeExtension().catch(console.error)
6931

7032
return () => {
71-
chrome.webNavigation.onCompleted.removeListener(handlePageLoad)
7233
}
7334
}, [])
7435

@@ -82,7 +43,7 @@ export default function App() {
8243
<div className="fixed top-0 left-0 right-0 z-50 bg-background max-w-[700px] mx-auto ">
8344
<Header/>
8445
</div>
85-
<div className="flex-grow overflow-auto flex flex-col pt-[56px]">
46+
<div className="flex-grow overflow-auto flex flex-col pt-[56px] h-full">
8647
<TabPages/>
8748
</div>
8849
</div>

‎src/app/components/BackBtn.tsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/app/components/Header.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import { motion } from 'framer-motion';
44
import { PlusCircle } from 'lucide-react';
55

66
export function Header() {
7-
const {currentView, setCurrentView, setEditingCookie, setEditingSwagger, editingCookie, editingSwagger} = useGlobalContext()
7+
const {
8+
currentView,
9+
setCurrentView,
10+
setEditingCookie,
11+
setEditingSwagger,
12+
cookies,
13+
swaggers
14+
} = useGlobalContext()
815

916
const activePage = (view: string) => {
1017
if (view.includes("cookie")) return "cookies";
@@ -32,6 +39,15 @@ export function Header() {
3239

3340
const showTitle = ["add-cookie", "edit-cookie", "add-swagger", "edit-swagger"].includes(currentView);
3441

42+
const shouldShowAddButton = () => {
43+
if (currentView === "list-cookies") {
44+
return cookies.length > 0;
45+
} else if (currentView === "list-swaggers") {
46+
return swaggers.length > 0;
47+
}
48+
return false;
49+
};
50+
3551
return (
3652
<div className="px-2 bg-white shadow-sm">
3753
<motion.header
@@ -56,7 +72,7 @@ export function Header() {
5672
)}
5773

5874
<div className="space-x-2">
59-
{["list-cookies", "list-swaggers"].includes(currentView) && (
75+
{["list-cookies", "list-swaggers"].includes(currentView) && shouldShowAddButton() && (
6076
<Button variant="outline" size="sm" onClick={handleAddClick}>
6177
<PlusCircle
6278
className="h-4 w-4 mr-1"/> {activePage(currentView) === "cookies" ? 'Add New Cookie' : 'Add New Swagger'}

‎src/app/components/OptionsBtn.tsx‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)