feat: add timezone configuration in app settings

[devin-ai-integration]

feat: add timezone configuration in app settings

Summary

Adds a timezone configuration option to the app settings, allowing users to select their preferred timezone for displaying dates and times. This addresses the issue where users in different timezones (e.g., London) see incorrect times in the app.

Changes:

• Added timezone field to the general settings schema (packages/store/src/zod.ts)
• Added timezone to SETTINGS_MAPPING in TinyBase store for proper persistence
• Created TimezoneView component with a dropdown of 21 common timezones plus a "System" option
• Created useTimezone hook that returns the configured timezone or falls back to system timezone
• Updated timeline sidebar items and search results to use the configured timezone when formatting dates/times
• Renamed "Language & Vocabulary" section to "Language & Region" in settings

Updates since last revision

• Fixed TypeScript errors by adding timezone to SETTINGS_MAPPING.values in settings.ts
• Properly typed the default value as string | undefined in registry.ts to fix form field type inference

Review & Testing Checklist for Human

• Verify timezone selector works: Open Settings > App, scroll to "Language & Region" section, and confirm the timezone dropdown appears and selections persist after app restart
• Test date display in timeline: Change timezone to a different value (e.g., Tokyo) and verify that session/event times in the sidebar update accordingly
• Test "System" option: Confirm that selecting "System" (or leaving default) uses the browser's detected timezone correctly
• Check other date displays: Note that export-pdf.tsx, shared.tsx, and contacts/details.tsx still use system timezone - verify if these should also be updated

Recommended test plan:

1. Set timezone to "London (GMT/BST)"
2. Create a new session and verify the timestamp displays correctly
3. Check the timeline sidebar shows correct times
4. Search for a session and verify the "timeAgo" display is correct

Notes

• The timezone list is hardcoded with 21 common timezones. Users whose timezone isn't listed can use "System" which auto-detects from the browser.
• Some date formatting locations (PDF export, connection dates, contact details) were not updated in this PR - may need follow-up if those should also respect the timezone setting.

Link to Devin run: https://app.devin.ai/sessions/9a3f7fa768c54ba3886cc7f6d4c9ef4c
Requested by: @ComputelessComputer

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	3e5124a
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/697f77a97e19620008d8107f
😎 Deploy Preview	https://deploy-preview-3530--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote-storybook canceled.

Name	Link
🔨 Latest commit	3e5124a
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/697f77a9f98a870008ee399d

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[graphite-app]

The year comparison logic is broken when using a configured timezone. new Date().getFullYear() uses the system timezone, while date will be formatted using the configured timezone. This causes incorrect display logic when the system and configured timezones are in different calendar years.

For example, if it's December 31, 2025 11PM PST (system) but the configured timezone is JST (16 hours ahead = January 1, 2026), the comparison will incorrectly compare 2025 (system) with a date that displays as 2026 (configured), causing the year to be shown/hidden incorrectly.

Fix:
Create the current date in the configured timezone for comparison:

const nowInTimezone = new Date().toLocaleString('en-US', { timeZone: timezone });
const currentYear = new Date(nowInTimezone).getFullYear();
const dateInTimezone = date.toLocaleString('en-US', { timeZone: timezone });
const dateYear = new Date(dateInTimezone).getFullYear();
const sameYear = dateYear === currentYear;

Suggested change

	hour: "numeric",
	minute: "numeric",
	timeZone: timezone,
	});
	if (precision === "time") {
	const nowInTimezone = new Date().toLocaleString('en-US', { timeZone: timezone });
	const currentYear = new Date(nowInTimezone).getFullYear();
	const dateInTimezone = date.toLocaleString('en-US', { timeZone: timezone });
	const dateYear = new Date(dateInTimezone).getFullYear();
	const sameYear = dateYear === currentYear;

Spotted by Graphite Agent



Is this helpful? React 👍 or 👎 to let us know.