From 49bc491e08aab550a859ee76cfecbae706e9111b Mon Sep 17 00:00:00 2001 From: Bryan1029384756 <23323626+Bryan1029384756@users.noreply.github.com> Date: Wed, 11 Feb 2026 06:42:31 -0600 Subject: [PATCH] feat: Add `MembersList` component, configure Electron frontend with Vite, and establish Gitea release workflow. --- .gitea/workflows/release.yml | 3 ++- Frontend/Electron/package.json | 2 ++ Frontend/Electron/src/assets/icons/index.js | 7 +++++-- .../Electron/src/components/MembersList.jsx | 17 +++++++++++++---- Frontend/Electron/vite.config.js | 1 + TODO.md | 4 ++-- 6 files changed, 25 insertions(+), 9 deletions(-) diff --git a/.gitea/workflows/release.yml b/.gitea/workflows/release.yml index 4b6a0b2..064d7e4 100644 --- a/.gitea/workflows/release.yml +++ b/.gitea/workflows/release.yml @@ -44,7 +44,8 @@ jobs: run: | cd Frontend/Electron npm run build - xvfb-run npx electron-builder --linux --win + npx electron-builder --linux + xvfb-run npx electron-builder --win env: GH_TOKEN: ${{ secrets.CI_TOKEN }} WINEDEBUG: "-all" diff --git a/Frontend/Electron/package.json b/Frontend/Electron/package.json index a642c65..0012718 100644 --- a/Frontend/Electron/package.json +++ b/Frontend/Electron/package.json @@ -2,6 +2,8 @@ "name": "discord", "private": true, "version": "1.0.3", + "description": "A Discord clone built with Convex, React, and Electron", + "author": "Moyettes", "type": "module", "main": "main.cjs", "homepage": "./", diff --git a/Frontend/Electron/src/assets/icons/index.js b/Frontend/Electron/src/assets/icons/index.js index 8640ae3..4a0c10e 100644 --- a/Frontend/Electron/src/assets/icons/index.js +++ b/Frontend/Electron/src/assets/icons/index.js @@ -23,6 +23,7 @@ import EmojiesGreyscale from './emojies_greyscale.png'; import TypingIcon from './typing.svg'; import DMIcon from './dm.svg'; import SpoilerIcon from './spoiler.svg'; +import CrownIcon from './crown.svg'; export { AddIcon, @@ -49,7 +50,8 @@ export { PinIcon, TypingIcon, DMIcon, - SpoilerIcon + SpoilerIcon, + CrownIcon }; export const Icons = { @@ -77,5 +79,6 @@ export const Icons = { Pin: PinIcon, Typing: TypingIcon, DM: DMIcon, - Spoiler: SpoilerIcon + Spoiler: SpoilerIcon, + Crown: CrownIcon }; diff --git a/Frontend/Electron/src/components/MembersList.jsx b/Frontend/Electron/src/components/MembersList.jsx index cc6da7c..153440f 100644 --- a/Frontend/Electron/src/components/MembersList.jsx +++ b/Frontend/Electron/src/components/MembersList.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { useQuery } from 'convex/react'; import { api } from '../../../../convex/_generated/api'; import { useOnlineUsers } from '../contexts/PresenceContext'; +import { CrownIcon } from '../assets/icons'; const USER_COLORS = ['#5865F2', '#EBA7CD', '#57F287', '#FEE75C', '#EB459E', '#ED4245']; @@ -13,6 +14,12 @@ function getUserColor(name) { return USER_COLORS[Math.abs(hash) % USER_COLORS.length]; } +const ColoredIcon = ({ src, color, size = '24px', style = {} }) => ( +
+ +
+); + const STATUS_COLORS = { online: '#3ba55c', idle: '#faa61a', @@ -38,7 +45,7 @@ const MembersList = ({ channelId, visible, onMemberClick }) => { const ungrouped = []; onlineMembers.forEach(member => { - const hoistedRole = member.roles.find(r => r.isHoist && r.name !== '@everyone'); + const hoistedRole = member.roles.find(r => r.isHoist && r.name !== '@everyone' && r.name !== 'Owner'); if (hoistedRole) { const key = `${hoistedRole.position}_${hoistedRole.name}`; if (!roleGroups[key]) { @@ -54,8 +61,9 @@ const MembersList = ({ channelId, visible, onMemberClick }) => { const sortedGroups = Object.values(roleGroups).sort((a, b) => b.role.position - a.role.position); const renderMember = (member) => { - const topRole = member.roles.length > 0 ? member.roles[0] : null; - const nameColor = topRole && topRole.name !== '@everyone' ? topRole.color : '#fff'; + const displayRole = member.roles.find(r => r.name !== '@everyone' && r.name !== 'Owner') || null; + const nameColor = displayRole ? displayRole.color : '#fff'; + const isOwner = member.roles.some(r => r.name === 'Owner'); const effectiveStatus = resolveStatus(member.status, member.id); return ( @@ -87,8 +95,9 @@ const MembersList = ({ channelId, visible, onMemberClick }) => { />
- + {member.username} + {isOwner && } {member.customStatus && (
diff --git a/Frontend/Electron/vite.config.js b/Frontend/Electron/vite.config.js index d57fb8c..6979e18 100644 --- a/Frontend/Electron/vite.config.js +++ b/Frontend/Electron/vite.config.js @@ -11,5 +11,6 @@ export default defineConfig({ }, build: { outDir: 'dist-react', + chunkSizeWarningLimit: 1000, }, }) diff --git a/TODO.md b/TODO.md index 91ebf3a..d277bcb 100644 --- a/TODO.md +++ b/TODO.md @@ -1,4 +1,4 @@ -When i scroll up one time with my scroll wheel and move my mouse it scrolls down to the start. +- 955px -- 955px \ No newline at end of file +- I want to give users the choice to update the app. Can we make updating work 2 ways. One, optional updates, i want to somehow make some updates marked as optional, where techinically older versions will still work so we dont care if they are on a older version. And some updates non optional, where we will require users to update to the latest version to continue using the app. So for example when they launch the app we will check if their is a update but we dont update the app right away. We will show a download icon like discord in the header, that will be the update.svg icon. Make the icon use this color "hsl(138.353 calc(1*38.117%) 56.275% /1);" \ No newline at end of file