Conversation
HanXHX
force-pushed
the
styling
branch
2 times, most recently
from
May 4, 2026 07:50
9c00457 to
ba5f1b2
Compare
There was a problem hiding this comment.
Pull request overview
This PR migrates the Outlook add-in from a single-page vanilla/webpack taskpane implementation to a Vue 3 SPA built with Vite, adding a modern UI layer (Nuxt UI) and i18n support while updating build, Docker, and CI workflows accordingly.
Changes:
- Replace webpack-based build/dev setup with Vite (including new Vite plugins for manifest handling and Lucide icon subsetting).
- Introduce Vue 3 SPA architecture (App shell + tabs, composables, Nuxt UI, Tailwind v4 theme) and add EN/FR localization.
- Update deployment/tooling (Docker build args for API URL, nginx caching rules, Node 24 baseline, CI workflow updates, new public/ asset layout).
Reviewed changes
Copilot reviewed 40 out of 51 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Removed webpack configuration (migration away from webpack). |
| vite.config.mts | Added Vite config, manifest copy plugin, dev HTTPS cert support, icon subsetting, chunking/caching behavior. |
| tsconfig.node.json | Added Node-specific TS config for Vite config + scripts. |
| tsconfig.json | Updated TS config for Vue/Vite types and generated d.ts includes. |
| taskpane.html | Added Vite HTML entrypoint that mounts the SPA and shows a splash screen. |
| src/types/css.d.ts | Removed CSS module shim (no longer needed with new toolchain). |
| src/taskpane/taskpane.ts | Removed legacy vanilla taskpane runtime. |
| src/taskpane/taskpane.html | Removed legacy taskpane HTML. |
| src/taskpane/taskpane.css | Removed legacy taskpane CSS. |
| src/shims/fs.ts | Added browser fs shim used via Vite aliasing. |
| src/shared/upload.ts | Updated upload pipeline API (expires in seconds, SDK progress passthrough, use result.webUrl). |
| src/shared/settings.ts | Removed settings storage/UI plumbing (API URL etc. no longer user-configurable at runtime). |
| src/shared/sdk-factory.ts | Updated SDK creation (dynamic import, API URL from build-time env constant). |
| src/shared/messages.ts | Removed old shared types (replaced by new SPA state/composables). |
| src/shared/constants.ts | Replaced defaults with build-time VITE_RETYC_API_URL and kept token storage key. |
| src/main.ts | New SPA bootstrap (Buffer polyfill, icon collection, i18n locale detection, Office.onReady mount). |
| src/locales/en.ts | Added English message bundle. |
| src/locales/fr.ts | Added French message bundle. |
| src/i18n.ts | Added vue-i18n singleton, locale detection/persistence helpers, global t. |
| src/env.d.ts | Added TS module declarations for Vue SFCs and the virtual Lucide subset module. |
| src/composables/useTransfer.ts | Added transfer flow composable (recipients sync, expiry options, upload progress state, Office handlers). |
| src/composables/useDropOverlay.ts | Added global drag/drop overlay composable. |
| src/composables/useAuth.ts | Added auth composable (device flow, token refresh, toast notifications). |
| src/components/TransferTab.vue | Added transfer UI tab built on Nuxt UI + composables. |
| src/components/LoginWall.vue | Added login UI / device flow wall. |
| src/components/DropZone.vue | Added dropzone component for file selection and list rendering. |
| src/components/AccountTab.vue | Added account UI tab (token expiry display, quota display, language selector, logout). |
| src/assets/custom.css | Added Tailwind v4 + Nuxt UI imports, theme palette, shared spinner animation. |
| src/App.vue | Added app shell (auth gate, tabs, Nuxt UI locale wiring). |
| scripts/dev-setup.js | Updated comments to reflect Vite dev server usage. |
| README.md | Updated docs for SPA UX, new build commands, Node baseline, Docker env strategy, and repo layout. |
| public/assets/icon-16.png | Added icon to new public/ assets layout. |
| public/assets/icon-32.png | Added icon to new public/ assets layout. |
| public/assets/icon-48.png | Added icon to new public/ assets layout. |
| public/assets/icon-64.png | Added icon to new public/ assets layout. |
| public/assets/icon-80.png | Added icon to new public/ assets layout. |
| public/assets/icon-128.png | Added icon to new public/ assets layout. |
| package.json | Switched scripts to Vite, added Vue/Nuxt UI/i18n deps, bumped Node engine to 24+. |
| manifest.xml | Updated description text (minor wording change). |
| eslint.config.mjs | Updated ignored files list to match new toolchain. |
| Dockerfile | Updated build to Node 24 + Vite, removed runtime substitution, added build-arg env wiring. |
| DEV_VM.md | Updated dev VM docs for Vite dev server and new public/ asset paths. |
| CLAUDE.md | Updated stack/tooling notes and architecture docs for SPA + Vite + per-env builds. |
| .nvmrc | Added Node 24 pin. |
| .gitignore | Ignored generated component/auto-import type files. |
| .github/workflows/release.yml | Updated release workflow to Node 24 and latest manifest validator. |
| .github/workflows/main.yml | Updated path filters for new structure and tooling files. |
| .github/workflows/_ci.yml | Simplified CI to Node 24 and updated manifest validation command. |
| .docker/nginx.conf | Updated caching/compression behavior and root redirect target. |
| .docker/40-substitute-base-url.sh | Removed runtime BASE_URL/LANDING_URL substitution script. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+27
| // Copies the right manifest into dist/manifest.xml at build time. | ||
| // | ||
| // production → manifest.xml (kept as a template; Docker/nginx rewrites BASE_URL at runtime). | ||
| // anything else → manifest.dev.xml (generated by `npm run dev:setup` against DEV_HOST). | ||
| // | ||
| // Dev builds fail loudly when manifest.dev.xml is missing so we can never accidentally ship a | ||
| // `outlook.retyc.com`-pointing manifest from a local dev server. |
Comment on lines
+1
to
+5
| export const readFileSync = () => '' | ||
| export const writeFileSync = () => {} | ||
| export const mkdirSync = () => {} | ||
| export const unlinkSync = () => {} | ||
| export const createWriteStream = () => ({ write: () => {}, end: () => {}, on: () => {}, once: () => {} }) |
Comment on lines
+283
to
+287
| itemChangedHandler = () => { | ||
| recipientsHandler = null | ||
| recipientsHandlerItem = null | ||
| resetTransferState() | ||
| void refreshComposeIfNeeded() |
| </div> | ||
|
|
||
| <div v-if="files.length" class="flex justify-between items-center text-xs text-neutral-500 mt-1 px-0.5"> | ||
| <span>{{ t('dropzone.fileCount', files.length, { named: { count: files.length, size: formatSize(totalSize()) } }) }}</span> |
| src/i18n.ts + src/locales/ # vue-i18n singleton + en/fr message bundles | ||
| src/assets/custom.css # @theme static block for the custom palette (no global resets) | ||
| src/shims/fs.ts # empty fs shim, aliased in vite.config.mts for browser bundles | ||
| src/env.d.ts # ImportMetaEnv typing for VITE_RETYC_API_URL |
Comment on lines
+58
to
+63
| 2. The recipient list mirrors Outlook's `To` field — edit it in Outlook and the pane stays in sync. | ||
| 3. Optionally toggle **Use a passphrase** in the Options panel (≥ 8 chars) — required if you have no recipients, or for | ||
| recipients without a Retyc account. | ||
| 4. Pick a transfer expiry from the same Options panel. | ||
| 5. Click **Encrypt & insert Retyc link** — the pane uploads the encrypted bytes, mirrors the recipients into Outlook's | ||
| `To` field, and appends a Retyc download link to the message body. |
Comment on lines
65
to
68
| @@ -79,11 +68,13 @@ Dockerfile + .docker/ # static-asset hosting (multi-stage Node 2 | |||
| Outlook recipients" button forces a re-sync. | |||
- Add vuejs + nuxtui - Drop webpack, set vite - Use latest retyc sdk - Do not perform redirect in Docker - Remove access logs in docker - Add lucide icons - API Url set at build time + drop all runtime system in Docker - Update all doc - Insert retyc link before signature - Drop any reference to Thunderbird plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.