feat: replace FeedbackButton with GitHubButton (#54)

- Removed FeedbackButton component and integrated GitHubButton for improved functionality.
- Added GitHubButton component to fetch and display star count from GitHub API.
- Introduced new styles for GitHubButton and updated the GitHubIcon for better visual representation.

Author: atyrode

src/frontend/src/ExcalidrawWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { Children, cloneElement, useState, useEffect } from 'react';
 import DiscordButton from './ui/DiscordButton';
-import FeedbackButton from './ui/FeedbackButton';
+import GitHubButton from './ui/GitHubButton';
 import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { NonDeletedExcalidrawElement } from '@atyrode/excalidraw/element/types';
 import type { AppState } from '@atyrode/excalidraw/types';
@@ -99,7 +99,7 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
         renderEmbeddable: (element, appState) => renderCustomEmbeddable(element, appState, excalidrawAPI),
         renderTopRightUI: renderTopRightUI ?? (() => (
           <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
-            <FeedbackButton />
+            <GitHubButton />
             <DiscordButton />
           </div>
         )),

src/frontend/src/icons/GithubIcon.tsx

@@ -4,32 +4,29 @@ interface GithubIconProps {
   className?: string;
   width?: number;
   height?: number;
-  stroke?: string;
-  strokeWidth?: number;
+  fill?: string;
 }
 
 export const GithubIcon: React.FC<GithubIconProps> = ({
   className = "",
   width = 20,
   height = 20,
-  stroke = "currentColor",
-  strokeWidth = 2,
+  fill = "currentColor",
 }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      viewBox="0 0 98 96"
       className={className}
     >
-      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-      <path d="M9 18c-4.51 2-5-2-7-2" />
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" 
+        fill={fill}
+      />
     </svg>
   );
 };

src/frontend/src/ui/FeedbackButton.tsx

@@ -1,25 +1,36 @@
-.feedback-button {
+.github-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 2.75rem;
   padding: 0 1rem;
   border-radius: 0.5rem;
   margin-left: 0.275rem;
-
   background: #232329;
   color: #fff;
   border: none;
   cursor: pointer;
   font-weight: 500;
   transition: background 0.15s ease-in-out, border 0.15s ease-in-out;
+  gap: 0.5rem;
+  font-size: 1.05rem;
+  font-weight: 500;
+  color: #c9c9c9;
+  font-family: "Roboto", sans-serif;
 
   &:hover,
   &:focus {
     background: #cc6d24;
     outline: none;
   }
+
+  .github-icon {
+    margin-right: 0.15rem;
+  }
 }
 
 @media (max-width: 730px) {
-  .feedback-button {
+  .github-button {
     display: none !important;
   }
 }

src/frontend/src/ui/FeedbackButton.scss renamed to src/frontend/src/ui/GitHubButton.scss

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import { GithubIcon } from "../icons";
+import "./GitHubButton.scss";
+
+const GitHubButton: React.FC = () => {
+  const [starCount, setStarCount] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Fetch star count from GitHub API
+    fetch("https://api.github.com/repos/pad-ws/pad.ws")
+      .then(response => response.json())
+      .then(data => {
+        const stars = data.stargazers_count;
+        
+        // Format the star count with European number formatting (commas as thousand separators)
+        let formattedStars;
+        if (stars >= 1000) {
+          // For numbers >= 1000, format with commas as thousand separators
+          // e.g., 1000 -> 1,000, 1500 -> 1,500, etc.
+          formattedStars = stars.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        } else {
+          // For numbers < 1000, just use the number as is
+          formattedStars = stars.toString();
+        }
+        
+        setStarCount(formattedStars);
+      })
+      .catch(error => {
+        console.error("Error fetching GitHub stars:", error);
+        setStarCount("--");
+      });
+  }, []);
+
+  return (
+    <button 
+      className="github-button" 
+      type="button" 
+      onClick={() => window.open("https://github.com/pad-ws/pad.ws", "_blank")}
+      aria-label="View on GitHub"
+    >
+      <GithubIcon 
+        className="github-icon" 
+        width={24} 
+        height={24} 
+        fill="#fff"
+      />
+      {starCount || "..."}
+    </button>
+  );
+};
+
+export default GitHubButton;