From f3d7f8937608f1bc99e8e902ddaa72b02544322e Mon Sep 17 00:00:00 2001 From: codetorso Date: Sun, 2 Jun 2024 19:54:55 +0530 Subject: Add Extension Template --- apps/an-extension/README.md | 37 +++++++++++++ apps/an-extension/background.ts | 1 + apps/an-extension/content/ContentApp.tsx | 87 ++++++++++++++++++++++++++++++ apps/an-extension/content/base.css | 3 ++ apps/an-extension/content/content.css | 6 +++ apps/an-extension/content/content.tsx | 19 +++++++ apps/an-extension/extension-env.d.ts | 9 ++++ apps/an-extension/manifest.json | 23 ++++++++ apps/an-extension/package.json | 20 +++++++ apps/an-extension/postcss.config.js | 6 +++ apps/an-extension/public/chromeWindow.png | Bin 0 -> 297816 bytes apps/an-extension/public/icon/icon_16.png | Bin 0 -> 1038 bytes apps/an-extension/public/icon/icon_48.png | Bin 0 -> 4771 bytes apps/an-extension/public/react.png | Bin 0 -> 76583 bytes apps/an-extension/public/tailwind.png | Bin 0 -> 28424 bytes apps/an-extension/public/tailwind_bg.png | Bin 0 -> 174555 bytes apps/an-extension/public/typescript.png | Bin 0 -> 23667 bytes apps/an-extension/tailwind.config.js | 8 +++ apps/an-extension/tsconfig.json | 18 +++++++ 19 files changed, 237 insertions(+) create mode 100644 apps/an-extension/README.md create mode 100644 apps/an-extension/background.ts create mode 100644 apps/an-extension/content/ContentApp.tsx create mode 100644 apps/an-extension/content/base.css create mode 100644 apps/an-extension/content/content.css create mode 100644 apps/an-extension/content/content.tsx create mode 100644 apps/an-extension/extension-env.d.ts create mode 100644 apps/an-extension/manifest.json create mode 100644 apps/an-extension/package.json create mode 100644 apps/an-extension/postcss.config.js create mode 100644 apps/an-extension/public/chromeWindow.png create mode 100644 apps/an-extension/public/icon/icon_16.png create mode 100644 apps/an-extension/public/icon/icon_48.png create mode 100644 apps/an-extension/public/react.png create mode 100644 apps/an-extension/public/tailwind.png create mode 100644 apps/an-extension/public/tailwind_bg.png create mode 100644 apps/an-extension/public/typescript.png create mode 100644 apps/an-extension/tailwind.config.js create mode 100644 apps/an-extension/tsconfig.json (limited to 'apps') diff --git a/apps/an-extension/README.md b/apps/an-extension/README.md new file mode 100644 index 00000000..6f11ddab --- /dev/null +++ b/apps/an-extension/README.md @@ -0,0 +1,37 @@ +# an-extension + +> This project was bootstrapped using the Extension.js React-TypeScript template. + +## Scripts Available + +In the project directory, you can run: + +### npm dev + +``` +// Runs the app in the development mode. +// Will open a new browser instance with your extension loaded. +// The page will reload when you make changes. +npm dev +``` + +### npm start + +``` +// Runs the app in the production mode. +// Will open a new browser instance with your extension loaded. +// This is how your browser extension will work once published. +npm start +``` + +### npm build + +``` +// Builds the app for production. +// Bundles your browser extension in production mode for the target browser. +npm run build +``` + +## Learn More + +You can learn more in the [Extension.js](https://extension.js.org) documentation. diff --git a/apps/an-extension/background.ts b/apps/an-extension/background.ts new file mode 100644 index 00000000..798d5018 --- /dev/null +++ b/apps/an-extension/background.ts @@ -0,0 +1 @@ +console.log('Hello from the background script!') diff --git a/apps/an-extension/content/ContentApp.tsx b/apps/an-extension/content/ContentApp.tsx new file mode 100644 index 00000000..a0715969 --- /dev/null +++ b/apps/an-extension/content/ContentApp.tsx @@ -0,0 +1,87 @@ +import React from 'react' +import reactLogo from '../public/react.png' +import tailwindBg from '../public/tailwind_bg.png' +import typescriptLogo from '../public/typescript.png' +import tailwindLogo from '../public/tailwind.png' +import chromeWindowBg from '../public/chromeWindow.png' + +export default function ContentApp() { + const [isdialogOpen, setIsDialogOpen] = React.useState(true) + + if (!isdialogOpen) { + return ( +
+ +
+ ) + } + + return ( +
+
+
+
+ + + +
+
+
+
+ React logo +
+
+ TypeScript logo +
+
+ Tailwind logo +
+

+ This is a content script running React, TypeScript, and + Tailwind.css. +

+

+ Learn more about creating cross-browser extensions by{' '} + + . +

+
+
+ Chrome window screenshot +
+
+
+ ) +} diff --git a/apps/an-extension/content/base.css b/apps/an-extension/content/base.css new file mode 100644 index 00000000..bd6213e1 --- /dev/null +++ b/apps/an-extension/content/base.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/apps/an-extension/content/content.css b/apps/an-extension/content/content.css new file mode 100644 index 00000000..b8195ee8 --- /dev/null +++ b/apps/an-extension/content/content.css @@ -0,0 +1,6 @@ +#extension-root { + position: fixed; + bottom: 0; + right: 0; + z-index: 99999; +} diff --git a/apps/an-extension/content/content.tsx b/apps/an-extension/content/content.tsx new file mode 100644 index 00000000..01569724 --- /dev/null +++ b/apps/an-extension/content/content.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import ContentApp from './ContentApp' +import('./base.css') +import('./content.css') + +setTimeout(initial, 1000) + +function initial() { + // Create a new div element and append it to the document's body + const rootDiv = document.createElement('div') + rootDiv.id = 'extension-root' + document.body.appendChild(rootDiv) + + // Use `createRoot` to create a root, then render the component + // Note that `createRoot` takes the container DOM node, not the React element + const root = ReactDOM.createRoot(rootDiv) + root.render() +} diff --git a/apps/an-extension/extension-env.d.ts b/apps/an-extension/extension-env.d.ts new file mode 100644 index 00000000..356fb729 --- /dev/null +++ b/apps/an-extension/extension-env.d.ts @@ -0,0 +1,9 @@ +// Required Extension.js types for TypeScript projects. +// This file auto-generated and should not be excluded. +// If you need extra types, consider creating a new *.d.ts and +// referencing it in the "include" array in your tsconfig.json file. +// See https://www.typescriptlang.org/tsconfig#include for info. +/// + +// Polyfill types for browser.* APIs. +/// diff --git a/apps/an-extension/manifest.json b/apps/an-extension/manifest.json new file mode 100644 index 00000000..a270fb66 --- /dev/null +++ b/apps/an-extension/manifest.json @@ -0,0 +1,23 @@ +{ + "manifest_version": 3, + "version": "1.0", + "name": "an-extension", + "description": "An extension template using React and TypeScript. This template includes a content script using Tailwind.css. To see it in action, visit https://extension.js.org.", + "background": { + "service_worker": "./background.ts" + }, + "content_scripts": [ + { + "matches": [ + "https://extension.js.org/*" + ], + "js": [ + "./content/content.tsx" + ] + } + ], + "icons": { + "16": "public/icon/icon_16.png", + "48": "public/icon/icon_48.png" + } +} \ No newline at end of file diff --git a/apps/an-extension/package.json b/apps/an-extension/package.json new file mode 100644 index 00000000..3625295b --- /dev/null +++ b/apps/an-extension/package.json @@ -0,0 +1,20 @@ +{ + "devDependencies": { + "@types/react": "^18.0.9", + "@types/react-dom": "^18.0.5", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "tailwindcss": "^3.4.1", + "typescript": "5.3.3", + "extension": "latest" + }, + "scripts": { + "dev": "extension dev", + "start": "extension start", + "build": "extension build" + }, + "dependencies": {}, + "name": "an-extension", + "private": true, + "version": "0.0.0" +} \ No newline at end of file diff --git a/apps/an-extension/postcss.config.js b/apps/an-extension/postcss.config.js new file mode 100644 index 00000000..85f717cc --- /dev/null +++ b/apps/an-extension/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +} diff --git a/apps/an-extension/public/chromeWindow.png b/apps/an-extension/public/chromeWindow.png new file mode 100644 index 00000000..da525dd8 Binary files /dev/null and b/apps/an-extension/public/chromeWindow.png differ diff --git a/apps/an-extension/public/icon/icon_16.png b/apps/an-extension/public/icon/icon_16.png new file mode 100644 index 00000000..651139b5 Binary files /dev/null and b/apps/an-extension/public/icon/icon_16.png differ diff --git a/apps/an-extension/public/icon/icon_48.png b/apps/an-extension/public/icon/icon_48.png new file mode 100644 index 00000000..73b36f0f Binary files /dev/null and b/apps/an-extension/public/icon/icon_48.png differ diff --git a/apps/an-extension/public/react.png b/apps/an-extension/public/react.png new file mode 100644 index 00000000..9080fddd Binary files /dev/null and b/apps/an-extension/public/react.png differ diff --git a/apps/an-extension/public/tailwind.png b/apps/an-extension/public/tailwind.png new file mode 100644 index 00000000..83ed5e12 Binary files /dev/null and b/apps/an-extension/public/tailwind.png differ diff --git a/apps/an-extension/public/tailwind_bg.png b/apps/an-extension/public/tailwind_bg.png new file mode 100644 index 00000000..edc40be8 Binary files /dev/null and b/apps/an-extension/public/tailwind_bg.png differ diff --git a/apps/an-extension/public/typescript.png b/apps/an-extension/public/typescript.png new file mode 100644 index 00000000..93614694 Binary files /dev/null and b/apps/an-extension/public/typescript.png differ diff --git a/apps/an-extension/tailwind.config.js b/apps/an-extension/tailwind.config.js new file mode 100644 index 00000000..069e1bc3 --- /dev/null +++ b/apps/an-extension/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['**/*.html', '**/*.tsx'], + theme: { + extend: {} + }, + plugins: [] +} diff --git a/apps/an-extension/tsconfig.json b/apps/an-extension/tsconfig.json new file mode 100644 index 00000000..520f3602 --- /dev/null +++ b/apps/an-extension/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "allowJs": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": false, + "jsx": "react-jsx", + "lib": ["dom", "dom.iterable", "esnext"], + "moduleResolution": "node", + "module": "esnext", + "resolveJsonModule": true, + "strict": true, + "target": "esnext" + }, + "include": ["./"], + "exclude": ["node_modules", "dist"] +} -- cgit v1.2.3 From 8ecbde0b22326ddc5e5d386c242c129062d162e8 Mon Sep 17 00:00:00 2001 From: codetorso Date: Mon, 3 Jun 2024 09:14:28 +0530 Subject: Implemented Highlight in Extension --- apps/an-extension/background.ts | 27 +++++++++- apps/an-extension/content/ContentApp.tsx | 84 ++++++++--------------------- apps/an-extension/content/content.tsx | 4 -- apps/an-extension/index.html | 11 ++++ apps/an-extension/manifest.json | 18 ++++--- apps/an-extension/public/chromeWindow.png | Bin 297816 -> 0 bytes apps/an-extension/public/icon/icon_16.png | Bin 1038 -> 0 bytes apps/an-extension/public/icon/icon_48.png | Bin 4771 -> 0 bytes apps/an-extension/public/icon/logo(16).png | Bin 0 -> 980 bytes apps/an-extension/public/icon/logo(48).png | Bin 0 -> 2087 bytes apps/an-extension/public/react.png | Bin 76583 -> 0 bytes apps/an-extension/public/tailwind.png | Bin 28424 -> 0 bytes apps/an-extension/public/typescript.png | Bin 23667 -> 0 bytes 13 files changed, 70 insertions(+), 74 deletions(-) create mode 100644 apps/an-extension/index.html delete mode 100644 apps/an-extension/public/chromeWindow.png delete mode 100644 apps/an-extension/public/icon/icon_16.png delete mode 100644 apps/an-extension/public/icon/icon_48.png create mode 100644 apps/an-extension/public/icon/logo(16).png create mode 100644 apps/an-extension/public/icon/logo(48).png delete mode 100644 apps/an-extension/public/react.png delete mode 100644 apps/an-extension/public/tailwind.png delete mode 100644 apps/an-extension/public/typescript.png (limited to 'apps') diff --git a/apps/an-extension/background.ts b/apps/an-extension/background.ts index 798d5018..3428b484 100644 --- a/apps/an-extension/background.ts +++ b/apps/an-extension/background.ts @@ -1 +1,26 @@ -console.log('Hello from the background script!') +chrome.runtime.onInstalled.addListener(function () { + let context = 'selection'; + let title = "Supermemory - Save Highlight"; + chrome.contextMenus.create({ + title: title, + contexts: ['selection'], + id: context, + }); +}); + +chrome.contextMenus.onClicked.addListener(function (info, tab) { + if (info.menuItemId === 'selection') { + console.log(info.pageUrl) + chrome.tabs.sendMessage(tab?.id || 1, info.selectionText); + console.log(info.selectionText) + + // you can add a link to a cf worker or whatever u want + // fetch("", { + // method: "POST", + // headers: { "Content-Type": "application/json" }, + // body: JSON.stringify({ + // data: info.selectionText, + // }), + // }); + } +}); diff --git a/apps/an-extension/content/ContentApp.tsx b/apps/an-extension/content/ContentApp.tsx index a0715969..8773c71d 100644 --- a/apps/an-extension/content/ContentApp.tsx +++ b/apps/an-extension/content/ContentApp.tsx @@ -1,29 +1,26 @@ -import React from 'react' -import reactLogo from '../public/react.png' -import tailwindBg from '../public/tailwind_bg.png' -import typescriptLogo from '../public/typescript.png' -import tailwindLogo from '../public/tailwind.png' -import chromeWindowBg from '../public/chromeWindow.png' +import React, { useEffect } from "react"; +import tailwindBg from "../public/tailwind_bg.png"; export default function ContentApp() { - const [isdialogOpen, setIsDialogOpen] = React.useState(true) + const [text, setText] = React.useState(""); - if (!isdialogOpen) { - return ( -
- -
- ) - } + useEffect(() => { + const messageListener = (message: any) => { + setText(message); + setTimeout(() => setText(""), 2000); + }; + + chrome.runtime.onMessage.addListener(messageListener); + return () => { + chrome.runtime.onMessage.removeListener(messageListener); + }; + }, []); return ( -
-
+
+
@@ -37,51 +34,12 @@ export default function ContentApp() {
-
- React logo -
+
- TypeScript logo -
+
- Tailwind logo -
+

- This is a content script running React, TypeScript, and - Tailwind.css. + Saved: {text}

-

- Learn more about creating cross-browser extensions by{' '} - - . -

-
-
- Chrome window screenshot
- ) + ); } diff --git a/apps/an-extension/content/content.tsx b/apps/an-extension/content/content.tsx index 01569724..d9e5a4ed 100644 --- a/apps/an-extension/content/content.tsx +++ b/apps/an-extension/content/content.tsx @@ -1,4 +1,3 @@ -import React from 'react' import ReactDOM from 'react-dom/client' import ContentApp from './ContentApp' import('./base.css') @@ -7,13 +6,10 @@ import('./content.css') setTimeout(initial, 1000) function initial() { - // Create a new div element and append it to the document's body const rootDiv = document.createElement('div') rootDiv.id = 'extension-root' document.body.appendChild(rootDiv) - // Use `createRoot` to create a root, then render the component - // Note that `createRoot` takes the container DOM node, not the React element const root = ReactDOM.createRoot(rootDiv) root.render() } diff --git a/apps/an-extension/index.html b/apps/an-extension/index.html new file mode 100644 index 00000000..bb4c07c7 --- /dev/null +++ b/apps/an-extension/index.html @@ -0,0 +1,11 @@ + + + + + + God Bless Vanilla JavaScript!!! + + +

hello World! Follow @supermemoryai

+ + \ No newline at end of file diff --git a/apps/an-extension/manifest.json b/apps/an-extension/manifest.json index a270fb66..9c31c9c9 100644 --- a/apps/an-extension/manifest.json +++ b/apps/an-extension/manifest.json @@ -1,15 +1,21 @@ { + "name": "Supermemory.ai-Extension", + "description": "Uses the chrome.contextMenus API to customize the context menu.", + "version": "0.1", + "permissions": [ + "contextMenus" + ], "manifest_version": 3, - "version": "1.0", - "name": "an-extension", - "description": "An extension template using React and TypeScript. This template includes a content script using Tailwind.css. To see it in action, visit https://extension.js.org.", + "action": { + "default_popup": "index.html" + }, "background": { "service_worker": "./background.ts" }, "content_scripts": [ { "matches": [ - "https://extension.js.org/*" + "" ], "js": [ "./content/content.tsx" @@ -17,7 +23,7 @@ } ], "icons": { - "16": "public/icon/icon_16.png", - "48": "public/icon/icon_48.png" + "16": "public/icon/logo(16).png", + "48": "public/icon/logo(48).png" } } \ No newline at end of file diff --git a/apps/an-extension/public/chromeWindow.png b/apps/an-extension/public/chromeWindow.png deleted file mode 100644 index da525dd8..00000000 Binary files a/apps/an-extension/public/chromeWindow.png and /dev/null differ diff --git a/apps/an-extension/public/icon/icon_16.png b/apps/an-extension/public/icon/icon_16.png deleted file mode 100644 index 651139b5..00000000 Binary files a/apps/an-extension/public/icon/icon_16.png and /dev/null differ diff --git a/apps/an-extension/public/icon/icon_48.png b/apps/an-extension/public/icon/icon_48.png deleted file mode 100644 index 73b36f0f..00000000 Binary files a/apps/an-extension/public/icon/icon_48.png and /dev/null differ diff --git a/apps/an-extension/public/icon/logo(16).png b/apps/an-extension/public/icon/logo(16).png new file mode 100644 index 00000000..3c1610b0 Binary files /dev/null and b/apps/an-extension/public/icon/logo(16).png differ diff --git a/apps/an-extension/public/icon/logo(48).png b/apps/an-extension/public/icon/logo(48).png new file mode 100644 index 00000000..de5a6d2e Binary files /dev/null and b/apps/an-extension/public/icon/logo(48).png differ diff --git a/apps/an-extension/public/react.png b/apps/an-extension/public/react.png deleted file mode 100644 index 9080fddd..00000000 Binary files a/apps/an-extension/public/react.png and /dev/null differ diff --git a/apps/an-extension/public/tailwind.png b/apps/an-extension/public/tailwind.png deleted file mode 100644 index 83ed5e12..00000000 Binary files a/apps/an-extension/public/tailwind.png and /dev/null differ diff --git a/apps/an-extension/public/typescript.png b/apps/an-extension/public/typescript.png deleted file mode 100644 index 93614694..00000000 Binary files a/apps/an-extension/public/typescript.png and /dev/null differ -- cgit v1.2.3 From 7ceaddf6f499cda8f4ded9a02e6f511a7372f11b Mon Sep 17 00:00:00 2001 From: codetorso Date: Tue, 4 Jun 2024 21:08:22 +0530 Subject: Implement extension --- apps/an-extension/background.ts | 7 ++--- apps/an-extension/content/ContentApp.tsx | 50 +++++++++++++++---------------- apps/an-extension/content/content.css | 9 ++++-- apps/an-extension/content/content.tsx | 2 +- apps/an-extension/public/tailwind_bg.png | Bin 174555 -> 0 bytes apps/an-extension/tailwind.config.js | 1 + apps/an-extension/tsconfig.json | 1 + 7 files changed, 37 insertions(+), 33 deletions(-) delete mode 100644 apps/an-extension/public/tailwind_bg.png (limited to 'apps') diff --git a/apps/an-extension/background.ts b/apps/an-extension/background.ts index 3428b484..4e453b95 100644 --- a/apps/an-extension/background.ts +++ b/apps/an-extension/background.ts @@ -10,10 +10,6 @@ chrome.runtime.onInstalled.addListener(function () { chrome.contextMenus.onClicked.addListener(function (info, tab) { if (info.menuItemId === 'selection') { - console.log(info.pageUrl) - chrome.tabs.sendMessage(tab?.id || 1, info.selectionText); - console.log(info.selectionText) - // you can add a link to a cf worker or whatever u want // fetch("", { // method: "POST", @@ -22,5 +18,8 @@ chrome.contextMenus.onClicked.addListener(function (info, tab) { // data: info.selectionText, // }), // }); + + //so you first save it and then send the reponse to the screen + chrome.tabs.sendMessage(tab?.id || 1, info.selectionText); } }); diff --git a/apps/an-extension/content/ContentApp.tsx b/apps/an-extension/content/ContentApp.tsx index 8773c71d..45ca64b4 100644 --- a/apps/an-extension/content/ContentApp.tsx +++ b/apps/an-extension/content/ContentApp.tsx @@ -1,45 +1,45 @@ import React, { useEffect } from "react"; -import tailwindBg from "../public/tailwind_bg.png"; export default function ContentApp() { const [text, setText] = React.useState(""); + const [hover, setHover] = React.useState(false); useEffect(() => { const messageListener = (message: any) => { setText(message); setTimeout(() => setText(""), 2000); }; - chrome.runtime.onMessage.addListener(messageListener); + + document.addEventListener('mousemove', (e)=> { + const percentageX = (e.clientX / window.innerWidth) * 100; + const percentageY = (e.clientY / window.innerHeight) * 100; + + if (percentageX > 75 && percentageY > 75){ + setHover(true) + } else { + setHover(false) + } + }) return () => { chrome.runtime.onMessage.removeListener(messageListener); }; }, []); return ( -
-
-
-
- - - -
-
-
-
-

- Saved: {text} -

-
+
+
+
+
+ +
+

Saved!

+

{text}

); -} +} \ No newline at end of file diff --git a/apps/an-extension/content/content.css b/apps/an-extension/content/content.css index b8195ee8..a860749f 100644 --- a/apps/an-extension/content/content.css +++ b/apps/an-extension/content/content.css @@ -1,6 +1,9 @@ #extension-root { + pointer-events: none; position: fixed; - bottom: 0; - right: 0; - z-index: 99999; + top: 0; + left: 0; + height: 100vh; + width: 100%; + z-index: 999999; } diff --git a/apps/an-extension/content/content.tsx b/apps/an-extension/content/content.tsx index d9e5a4ed..17436ef2 100644 --- a/apps/an-extension/content/content.tsx +++ b/apps/an-extension/content/content.tsx @@ -11,5 +11,5 @@ function initial() { document.body.appendChild(rootDiv) const root = ReactDOM.createRoot(rootDiv) - root.render() + root.render(<>) } diff --git a/apps/an-extension/public/tailwind_bg.png b/apps/an-extension/public/tailwind_bg.png deleted file mode 100644 index edc40be8..00000000 Binary files a/apps/an-extension/public/tailwind_bg.png and /dev/null differ diff --git a/apps/an-extension/tailwind.config.js b/apps/an-extension/tailwind.config.js index 069e1bc3..8ddba0a5 100644 --- a/apps/an-extension/tailwind.config.js +++ b/apps/an-extension/tailwind.config.js @@ -6,3 +6,4 @@ module.exports = { }, plugins: [] } +module.exports = require("@repo/tailwind-config/tailwind.config"); diff --git a/apps/an-extension/tsconfig.json b/apps/an-extension/tsconfig.json index 520f3602..4d9801e2 100644 --- a/apps/an-extension/tsconfig.json +++ b/apps/an-extension/tsconfig.json @@ -1,4 +1,5 @@ { + "extends": "@repo/typescript-config/nextjs.json", "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, -- cgit v1.2.3 From 004c952dc323ef481ae0b1532bab78b244841dbc Mon Sep 17 00:00:00 2001 From: codetorso Date: Sat, 8 Jun 2024 06:25:25 +0530 Subject: Add Dynamic Island --- apps/web/app/(dash)/dynamicisland.tsx | 194 ++++++++++++++++++++++++++++++++ apps/web/app/(dash)/header.tsx | 40 ++----- apps/web/app/(dash)/home/page.tsx | 2 +- apps/web/app/(dash)/home/queryinput.tsx | 2 +- apps/web/app/(dash)/menu.tsx | 2 +- 5 files changed, 205 insertions(+), 35 deletions(-) create mode 100644 apps/web/app/(dash)/dynamicisland.tsx (limited to 'apps') diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx new file mode 100644 index 00000000..a30ec8cf --- /dev/null +++ b/apps/web/app/(dash)/dynamicisland.tsx @@ -0,0 +1,194 @@ +"use client"; + +import { AddIcon } from "@repo/ui/icons"; +import Image from "next/image"; + +import { AnimatePresence, useMotionValueEvent, useScroll } from "framer-motion"; +import { useState } from "react"; +import { motion } from "framer-motion"; +import { Label } from "@repo/ui/shadcn/label"; +import { Input } from "@repo/ui/shadcn/input"; +import { Textarea } from "@repo/ui/shadcn/textarea"; + +export function DynamicIsland() { + const { scrollYProgress } = useScroll(); + const [visible, setVisible] = useState(true); + + useMotionValueEvent(scrollYProgress, "change", (current) => { + // Check if current is not undefined and is a number + if (typeof current === "number") { + let direction = current! - scrollYProgress.getPrevious()!; + + if (direction < 0 || direction === 1) { + setVisible(true); + } else { + setVisible(false); + } + } + }); + + return ( +
+ + + + + +
+ ); +} + +export default DynamicIsland; + +function DynamicIslandContent() { + const [show, setshow] = useState(true); + function cancelfn(){ + setshow(true); + } + return ( + <> + {show ? ( +
setshow(!show)} + className="bg-[#1F2428] p-2 rounded-3xl" + > + Add icon +
+ ) : ( +
+ +
+ )} + + ); +} + +const fakeitems = ["spaces", "page", "note"]; + +function ToolBar({cancelfn}: {cancelfn: ()=> void}) { + const [index, setIndex] = useState(0); + return ( +
+
+ setIndex(i)} + /> +
+ { index === 0 ? + : + index === 1 ? + : + + } +
+ ); +} + +export const HoverEffect = ({ + items, + index, + indexFn, +}: { + items: string[]; + index: number; + indexFn: (i: number) => void; +}) => { + return ( +
+ {items.map((item, idx) => ( + + ))} +
+ ); +}; + +function SpaceForm({cancelfn}: {cancelfn: ()=> void}) { + return ( +
+
+ + +
+ +
+ ); +} + +function PageForm({cancelfn}: {cancelfn: ()=> void}) { + return ( +
+
+ + +
+
+ + +
+
+
cancel
+
+
+ ); +} + +function NoteForm({cancelfn}: {cancelfn: ()=> void}) { + return ( +
+
+ + +
+
+ +