feat: add WhatsApp QR code to community section

- Generate QR code for WhatsApp invite link
- Display QR code in Support > Community section
- Add WhatsApp link and QR to README
- Remove WhatsApp from issue template config

Author: kasvith

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: WhatsApp Community
-    url: https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris
-    about: Join our WhatsApp community for quick support and discussions
   - name: GitHub Discussions
     url: https://github.com/wavezync/opnotes/discussions
     about: Ask questions, share ideas, or discuss features with the community

README.md

@@ -75,6 +75,16 @@ src/
 └── shared/          # Shared types and models
 ```
 
+## Community
+
+Join our WhatsApp community to get instant support, share feedback, and connect with other users.
+
+<a href="https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris">
+  <img src="resources/whatsapp-qr.png" alt="WhatsApp Community QR Code" width="150" />
+</a>
+
+[Join WhatsApp Community](https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris)
+
 ## License
 
 MIT

resources/whatsapp-qr.png

@@ -1,6 +1,9 @@
 import { Card, CardContent } from '@renderer/components/ui/card'
 import { Button } from '@renderer/components/ui/button'
 import { MessageCircle, Bell, HelpCircle, Users, ExternalLink } from 'lucide-react'
+import whatsappQr from '../../../../../resources/whatsapp-qr.png?asset'
+
+const WHATSAPP_LINK = 'https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris'
 
 export const CommunitySection = () => {
   const benefits = [
@@ -50,23 +53,34 @@ export const CommunitySection = () => {
       >
         <CardContent className="pt-8 pb-8 relative">
           <div className="absolute top-0 right-0 w-48 h-48 bg-green-500/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
-          <div className="flex flex-col items-center text-center relative">
-            <div className="h-16 w-16 rounded-2xl bg-green-500/20 flex items-center justify-center mb-4 transition-transform duration-200 hover:scale-105">
-              <MessageCircle className="h-8 w-8 text-green-500" />
+          <div className="flex flex-col md:flex-row items-center gap-6 relative">
+            {/* QR Code */}
+            <div className="flex-shrink-0">
+              <div className="p-3 bg-white rounded-xl shadow-sm">
+                <img src={whatsappQr} alt="WhatsApp QR Code" className="w-32 h-32" />
+              </div>
+              <p className="text-xs text-muted-foreground text-center mt-2">Scan to join</p>
+            </div>
+
+            {/* Content */}
+            <div className="flex flex-col items-center md:items-start text-center md:text-left">
+              <div className="h-12 w-12 rounded-xl bg-green-500/20 flex items-center justify-center mb-3">
+                <MessageCircle className="h-6 w-6 text-green-500" />
+              </div>
+              <h3 className="text-xl font-bold mb-2">WhatsApp Community</h3>
+              <p className="text-muted-foreground max-w-sm mb-4">
+                Join our active WhatsApp community to get instant support, share feedback,
+                and connect with healthcare professionals using Op Notes.
+              </p>
+              <Button
+                className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
+                onClick={() => window.open(WHATSAPP_LINK, '_blank')}
+              >
+                <MessageCircle className="h-4 w-4 mr-2" />
+                Join WhatsApp Community
+                <ExternalLink className="h-3 w-3 ml-2" />
+              </Button>
             </div>
-            <h3 className="text-xl font-bold mb-2">WhatsApp Community</h3>
-            <p className="text-muted-foreground max-w-sm mb-6">
-              Join our active WhatsApp community to get instant support, share feedback,
-              and connect with healthcare professionals using Op Notes.
-            </p>
-            <Button
-              className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
-              onClick={() => window.open('https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris', '_blank')}
-            >
-              <MessageCircle className="h-4 w-4 mr-2" />
-              Join WhatsApp Community
-              <ExternalLink className="h-3 w-3 ml-2" />
-            </Button>
           </div>
         </CardContent>
       </Card>

src/renderer/src/components/support/CommunitySection.tsx

@@ -15,6 +15,8 @@ import {
 import { useSettings } from '@renderer/contexts/SettingsContext'
 import { useState } from 'react'
 
+const WHATSAPP_LINK = 'https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris'
+
 export const ReportIssue = () => {
   const { appVersion } = useSettings()
   const [copied, setCopied] = useState(false)
@@ -129,7 +131,7 @@ export const ReportIssue = () => {
           <MessageCircle className="h-3 w-3 inline-block mr-1" />
           Prefer chat? Join our{' '}
           <button
-            onClick={() => window.open('https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris', '_blank')}
+            onClick={() => window.open(WHATSAPP_LINK, '_blank')}
             className="text-green-500 hover:underline"
           >
             WhatsApp Community