UI overhaul: sidebar, friend list & DMs, auth UX improvements, and message rendering#5
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2fbc6cb94a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| ui.authDiv.style.display = "none"; | ||
| ui.chatDiv.style.display = "flex"; | ||
|
|
||
| onSnapshot(query(collection(db, "messages"), orderBy("createdAt")), (snap) => { |
There was a problem hiding this comment.
DM visibility is enforced only in filteredMessages, but this listener subscribes to the entire messages collection and downloads every document before filtering. In environments where authenticated users can read global chat documents (the previous model), users can still access other users' 1:1 message payloads via client-side inspection, so private chat data is exposed.
Useful? React with 👍 / 👎.
| renderMessages(); | ||
| }); | ||
|
|
||
| onSnapshot(collection(db, "users", user.uid, "friends"), (snap) => { |
There was a problem hiding this comment.
This onSnapshot is registered inside onAuthStateChanged but its unsubscribe handle is never saved or called, so each login adds another live listener. After logout/login or account switching, stale listeners continue firing against old user paths, causing duplicate renders and potential permission errors for the previous user.uid.
Useful? React with 👍 / 👎.
| text: ui.msgInput.value.trim(), | ||
| image: imageBase64, | ||
| name: auth.currentUser.displayName || (auth.currentUser.email || "匿名"), | ||
| senderEmail: auth.currentUser.email || "", |
There was a problem hiding this comment.
Friend emails are lowercased when added/selected, but senderEmail is written with raw auth.currentUser.email. When an account email includes uppercase characters, DM matching in filteredMessages uses strict equality against lowercased friend addresses, so recipients can miss valid messages in that 1:1 thread.
Useful? React with 👍 / 👎.
reodesureodesu
temporarily deployed
to
github-pages
reodesureodesu
temporarily deployed
to
github-pages
reodesureodesu
temporarily deployed
to
github-pages
reodesureodesu
temporarily deployed
to
github-pages
reodesureodesu
temporarily deployed
to
github-pages
reodesureodesu
temporarily deployed
to
github-pages
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
reodesureodesu
temporarily deployed
to
github-pages
# Vercel Speed Insights Implementation
## Summary
Successfully implemented Vercel Speed Insights tracking for this HTML-based LINE chat application.
## Changes Made
### Modified Files
- **index.html** - Added Vercel Speed Insights tracking scripts
## Implementation Details
### What was added:
Added the required Vercel Speed Insights scripts just before the closing `</body>` tag in index.html:
1. **Initialization script**: Creates the `window.si` function and `window.siq` queue for tracking data
2. **Speed Insights script**: Loads the Vercel Speed Insights tracking script from `/_vercel/speed-insights/script.js` with defer attribute
### Code added:
```html
<script>
window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>
```
## Technical Notes
- This is an HTML-based project (no build tools or package manager required)
- According to Vercel's documentation, for HTML projects, no package installation is needed
- The scripts are placed before the closing `</body>` tag as recommended
- The defer attribute ensures the script loads after HTML parsing is complete
- After deployment to Vercel, the route `/_vercel/speed-insights/script.js` will be automatically available
## Next Steps for the User
1. **Enable Speed Insights in Vercel Dashboard**:
- Go to your Vercel project dashboard
- Navigate to the "Speed Insights" tab
- Click "Enable" to activate the feature
2. **Deploy to Vercel**:
- Deploy the updated HTML file to Vercel
- Speed Insights will begin collecting data after deployment
3. **Verify Installation**:
- After deployment, check the page source for the `/_vercel/speed-insights/script.js` script in the body tag
- Visit the Speed Insights dashboard to view collected metrics
## References
- Vercel Speed Insights Documentation: https://vercel.com/docs/speed-insights
- HTML Implementation Guide: https://vercel.com/docs/speed-insights/quickstart
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
reodesureodesu
temporarily deployed
to
github-pages
…s-to-proje-0nbp3z Add Vercel Speed Insights to project
reodesureodesu
temporarily deployed
to
github-pages
# Vercel Web Analytics Implementation Successfully implemented Vercel Web Analytics for this plain HTML project. ## Changes Made ### Modified Files: - `index.html` - Added Vercel Web Analytics tracking scripts ## Implementation Details Added two script tags just before the closing `</head>` tag in `index.html`: 1. **Analytics initialization script**: Initializes the `window.va` function and queue (`window.vaq`) for tracking events 2. **Analytics tracking script**: Loads the Vercel insights script asynchronously using `defer` attribute The implementation follows the official Vercel documentation for plain HTML sites, which requires: - No package installation (no `@vercel/analytics` package needed) - Simple script tag addition to HTML files - Note: Route support is not available for plain HTML implementations ## What This Enables Once the site is deployed to Vercel with Web Analytics enabled in the dashboard: - Automatic tracking of page views and visitor data - The tracking script will be loaded from `/_vercel/insights/script.js` - Analytics data will be available in the Vercel dashboard under the Analytics tab ## Next Steps To complete the setup: 1. Deploy the site to Vercel using `vercel deploy` 2. Enable Web Analytics in the Vercel dashboard (Project → Analytics tab → Enable) 3. Once deployed and enabled, verify the implementation by checking the browser's Network tab for requests to `/_vercel/insights/view` 4. View analytics data in the Vercel dashboard after users visit the site ## Technical Notes - This is a plain HTML project with no build system or package dependencies - The implementation uses the standard HTML approach as documented in the Vercel Web Analytics guide - The scripts are placed in the `<head>` section with `defer` attribute for optimal loading performance - No changes to project structure or additional files were necessary Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
…alytics-se-df8esp Enable Vercel Web Analytics setup guide
1 participant
Motivation
updateProfile.Description
index.htmlmarkup and CSS to introduce a sidebar, backdrop, header toolbar, status bar, dark theme, font-size slider (CSS variable--msg-font-size), and responsive layout changes.setDoc,deleteDoc) and storingsenderEmail/targetEmailon messages to enable 1:1 chats and per-friend selection UI.uimapping object and new client logic:renderFriends,renderMessages,filteredMessages,formatTime, and helper functions for opening/closing the sidebar and setting status messages.updateProfile,doc,setDoc, anddeleteDoc, replaced ad-hoc DOM handling with structured event handlers for register/login/logout/Google sign-in, message send (with image base64 handling), friend add/delete, search, theme toggle, and AI response integration.Testing
Codex Task