+
+ {project.name}
+{project.description}
+
+ {project.tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/pubky-live-vote/src/components/Leaderboard.css b/pubky-live-vote/src/components/Leaderboard.css
new file mode 100644
index 0000000..6d265ba
--- /dev/null
+++ b/pubky-live-vote/src/components/Leaderboard.css
@@ -0,0 +1,80 @@
+.leaderboard {
+ display: grid;
+ gap: 1rem;
+}
+
+.leaderboard header h2 {
+ margin: 0;
+}
+
+.leaderboard__meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem 1rem;
+ align-items: center;
+ font-size: 0.9rem;
+ color: rgba(226, 232, 240, 0.75);
+ margin-top: 0.35rem;
+}
+
+.leaderboard__source {
+ color: rgba(125, 211, 252, 0.85);
+}
+
+.leaderboard__error {
+ margin: 0.5rem 0 0;
+ font-size: 0.9rem;
+ color: #fca5a5;
+}
+
+.leaderboard__table {
+ display: grid;
+ gap: 0.65rem;
+ overflow-x: auto;
+}
+
+.leaderboard__row {
+ display: grid;
+ grid-template-columns: 60px minmax(160px, 1fr) repeat(7, minmax(60px, 1fr));
+ gap: 0.75rem;
+ align-items: center;
+ background: rgba(15, 23, 42, 0.55);
+ padding: 0.75rem 1rem;
+ border-radius: 14px;
+ border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.leaderboard__row--header {
+ background: rgba(30, 41, 59, 0.75);
+ border: 1px solid rgba(148, 163, 184, 0.3);
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ font-weight: 600;
+}
+
+.strong {
+ font-weight: 700;
+ color: #bae6fd;
+}
+
+@media (max-width: 960px) {
+ .leaderboard__row,
+ .leaderboard__row--header {
+ grid-template-columns: 50px minmax(140px, 1fr) repeat(7, minmax(50px, 1fr));
+ }
+}
+
+@media (max-width: 720px) {
+ .leaderboard__row,
+ .leaderboard__row--header {
+ grid-template-columns: 45px minmax(130px, 1fr) repeat(7, minmax(45px, 1fr));
+ font-size: 0.85rem;
+ }
+}
+
+@media (max-width: 640px) {
+ .leaderboard__table {
+ overflow-x: auto;
+ }
+}
diff --git a/pubky-live-vote/src/components/Leaderboard.tsx b/pubky-live-vote/src/components/Leaderboard.tsx
new file mode 100644
index 0000000..beb8558
--- /dev/null
+++ b/pubky-live-vote/src/components/Leaderboard.tsx
@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import { useProjects } from '../context/ProjectContext';
+import { useLiveLeaderboard } from '../hooks/useLiveLeaderboard';
+import type { LeaderboardEntry, Project } from '../types/project';
+import './Leaderboard.css';
+
+const SOURCE_LABEL: Record<'remote-summary' | 'ballots' | 'local', string> = {
+ 'remote-summary': 'Pubky homeserver summary',
+ ballots: 'Aggregated ballots',
+ local: 'Local preview'
+};
+
+const formatUpdatedAt = (iso: string) => {
+ const parsed = Date.parse(iso);
+ if (Number.isNaN(parsed)) return 'unknown';
+ const diffMs = Date.now() - parsed;
+ if (diffMs < 30_000) return 'just now';
+ if (diffMs < 3_600_000) {
+ const minutes = Math.round(diffMs / 60_000);
+ return `${minutes} min ago`;
+ }
+ const hours = Math.round(diffMs / 3_600_000);
+ if (hours < 48) {
+ return `${hours} hr${hours === 1 ? '' : 's'} ago`;
+ }
+ return new Date(parsed).toLocaleString();
+};
+
+const formatVoterCount = (count: number) =>
+ `${count} voter${count === 1 ? '' : 's'}`;
+
+const numberFormatter = new Intl.NumberFormat(undefined, {
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 1
+});
+
+const integerFormatter = new Intl.NumberFormat(undefined, {
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 0
+});
+
+export const Leaderboard = () => {
+ const { projects, popularRanking } = useProjects();
+ const { entries, totalVoters, generatedAt, source, isLoading, error } = useLiveLeaderboard(
+ projects,
+ popularRanking
+ );
+
+ const rows = useMemo(() => (entries.length ? entries : placeholderRows(projects)), [entries, projects]);
+
+ return (
+
+
+ Pubky Live Vote
+Real-time voting for the Pubky Hackathon
+
+
+
+
+ );
+};
+
+const placeholderRows = (projects: Project[]): LeaderboardEntry[] =>
+ projects.map((project) => ({
+ projectId: project.id,
+ projectName: project.name,
+ total: 0,
+ components: {
+ complexity: 0,
+ creativity: 0,
+ readiness: 0,
+ presentation: 0,
+ feedback: 0,
+ popular: 0,
+ ai: project.aiScore ?? 0
+ }
+ }));
diff --git a/pubky-live-vote/src/components/LoginCard.tsx b/pubky-live-vote/src/components/LoginCard.tsx
new file mode 100644
index 0000000..40b1750
--- /dev/null
+++ b/pubky-live-vote/src/components/LoginCard.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import './Panel.css';
+
+export const LoginCard = () => {
+ const { user, qrCodeSvg, isAuthenticating, connect, disconnect } = useAuth();
+
+ useEffect(() => {
+ if (!user) {
+ void connect();
+ }
+ }, [user, connect]);
+
+ return (
+ Live Leaderboard
+
+ {isLoading ? 'Loading scores…' : `${formatVoterCount(totalVoters)} · ${formatUpdatedAt(generatedAt)}`}
+ Source: {SOURCE_LABEL[source]}
+
+ {error && {error.message}
} +
+
+
+ Rank
+ Project
+ Total
+ Complexity
+ Creativity
+ Readiness
+ Presentation
+ Feedback
+ Popular
+ AI
+
+ {rows.map((row, index) => (
+
+ {index + 1}
+ {row.projectName}
+
+ {numberFormatter.format(row.total)}
+
+ {integerFormatter.format(row.components.complexity)}
+ {integerFormatter.format(row.components.creativity)}
+ {integerFormatter.format(row.components.readiness)}
+ {integerFormatter.format(row.components.presentation)}
+ {integerFormatter.format(row.components.feedback)}
+ {integerFormatter.format(row.components.popular)}
+ {integerFormatter.format(row.components.ai)}
+
+ ))}
+
+
+
+
+ {!user && (
+
+ );
+};
diff --git a/pubky-live-vote/src/components/Panel.css b/pubky-live-vote/src/components/Panel.css
new file mode 100644
index 0000000..cc1edba
--- /dev/null
+++ b/pubky-live-vote/src/components/Panel.css
@@ -0,0 +1,105 @@
+.panel {
+ background: rgba(15, 23, 42, 0.8);
+ border: 1px solid var(--border);
+ border-radius: 24px;
+ padding: clamp(1.25rem, 3vw, 1.75rem);
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ box-shadow: 0 16px 32px rgba(15, 23, 42, 0.45);
+ backdrop-filter: blur(16px);
+}
+
+.panel__header {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.panel__header h2 {
+ margin: 0;
+ font-size: clamp(1.1rem, 2vw, 1.5rem);
+}
+
+.panel__subtitle {
+ margin: 0;
+ color: rgba(226, 232, 240, 0.65);
+}
+
+.button {
+ align-self: flex-start;
+ border-radius: 12px;
+ padding: 0.55rem 1.1rem;
+ border: none;
+ background: var(--accent);
+ color: #0b1120;
+ font-weight: 600;
+ cursor: pointer;
+ transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.button:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 8px 18px rgba(14, 165, 233, 0.25);
+}
+
+.button:disabled {
+ cursor: not-allowed;
+ opacity: 0.55;
+ transform: none;
+ box-shadow: none;
+}
+
+.button--ghost {
+ background: transparent;
+ color: var(--text);
+ border: 1px solid rgba(148, 163, 184, 0.35);
+}
+
+.button--ghost:hover {
+ background: rgba(148, 163, 184, 0.08);
+ box-shadow: none;
+}
+
+.qr-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 220px;
+ background: rgba(15, 23, 42, 0.6);
+ border-radius: 18px;
+ border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.qr-container svg {
+ width: min(220px, 60vw);
+ height: auto;
+}
+
+.qr-placeholder {
+ color: rgba(226, 232, 240, 0.6);
+}
+
+.identity-list {
+ display: grid;
+ gap: 0.75rem;
+ margin: 0;
+}
+
+.identity-list dt {
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: rgba(148, 163, 184, 0.75);
+}
+
+.identity-list dd {
+ margin: 0.2rem 0 0;
+ font-weight: 600;
+}
+
+.mono {
+ font-family: 'JetBrains Mono', 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
+ font-size: 0.82rem;
+ word-break: break-all;
+}
diff --git a/pubky-live-vote/src/components/PopularVoteBoard.css b/pubky-live-vote/src/components/PopularVoteBoard.css
new file mode 100644
index 0000000..01a3c36
--- /dev/null
+++ b/pubky-live-vote/src/components/PopularVoteBoard.css
@@ -0,0 +1,86 @@
+.popular {
+ gap: 1.5rem;
+}
+
+.popular__body {
+ display: grid;
+ gap: 1.25rem;
+}
+
+.popular__self-select {
+ display: grid;
+ gap: 0.35rem;
+ font-size: 0.9rem;
+}
+
+.popular__self-select select {
+ border-radius: 12px;
+ border: 1px solid rgba(148, 163, 184, 0.35);
+ background: rgba(15, 23, 42, 0.55);
+ color: inherit;
+ padding: 0.5rem 0.75rem;
+}
+
+.popular h3 {
+ margin: 0;
+ font-size: 1rem;
+}
+
+.popular__pool {
+ display: grid;
+ gap: 0.75rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.popular__pool button {
+ width: 100%;
+ justify-content: flex-start;
+}
+
+.popular__ranking ol {
+ margin: 0;
+ padding-left: 0;
+ list-style: none;
+ display: grid;
+ gap: 0.75rem;
+}
+
+.popular__ranking li {
+ display: grid;
+ grid-template-columns: 48px minmax(0, 1fr) 40px;
+ gap: 0.5rem;
+ align-items: center;
+ padding: 0.65rem 0.85rem;
+ border-radius: 12px;
+ border: 1px solid rgba(148, 163, 184, 0.25);
+ background: rgba(15, 23, 42, 0.55);
+ cursor: grab;
+}
+
+.popular__ranking li:active {
+ cursor: grabbing;
+}
+
+.popular__position {
+ font-weight: 700;
+ color: #bae6fd;
+}
+
+.popular__ranking button {
+ background: transparent;
+ border: none;
+ color: rgba(148, 163, 184, 0.9);
+ font-size: 1.25rem;
+ cursor: pointer;
+}
+
+.popular__ranking button:hover {
+ color: var(--danger);
+}
+
+.popular__empty {
+ margin: 0;
+ color: rgba(226, 232, 240, 0.6);
+}
diff --git a/pubky-live-vote/src/components/PopularVoteBoard.tsx b/pubky-live-vote/src/components/PopularVoteBoard.tsx
new file mode 100644
index 0000000..7004859
--- /dev/null
+++ b/pubky-live-vote/src/components/PopularVoteBoard.tsx
@@ -0,0 +1,110 @@
+import { DragEvent, useMemo, useState } from 'react';
+import { useProjects } from '../context/ProjectContext';
+import './PopularVoteBoard.css';
+import './Panel.css';
+
+export const PopularVoteBoard = () => {
+ const { projects, popularRanking, setPopularRanking, userProjectId, setUserProjectId } = useProjects();
+ const [draggedId, setDraggedId] = useState
+
+ {user && (
+
+ )}
+ {user ? 'Connected to Pubky' : 'Connect with Pubky Ring'}
++ {user ? 'Your identity is linked. You can vote, comment, and tag projects.' : 'Scan the QR code with Pubky Ring to authenticate.'} +
+
+ {qrCodeSvg ? (
+
+ ) : (
+
+ )}
+
+ {user && (
+ {isAuthenticating ? 'Waiting for QR code…' : 'Unable to load QR code'}
+ )}
+ -
+
- Display Name +
- {user.displayName ?? 'Anonymous Builder'} +
- Public Key +
- {user.publicKey} +
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/pubky-live-vote/src/components/ProjectCard.css b/pubky-live-vote/src/components/ProjectCard.css
new file mode 100644
index 0000000..b37a8b8
--- /dev/null
+++ b/pubky-live-vote/src/components/ProjectCard.css
@@ -0,0 +1,89 @@
+.project-card {
+ background: rgba(15, 23, 42, 0.65);
+ border-radius: 20px;
+ border: 1px solid rgba(148, 163, 184, 0.18);
+ padding: 1.25rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ transition: border 0.2s ease, transform 0.2s ease;
+}
+
+.project-card:hover {
+ transform: translateY(-3px);
+ border-color: rgba(56, 189, 248, 0.45);
+}
+
+.project-card__header {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.project-card__header h3 {
+ margin: 0;
+ font-size: 1.3rem;
+}
+
+.project-card__description {
+ margin: 0;
+ color: rgba(226, 232, 240, 0.7);
+}
+
+.project-card__tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.tag {
+ background: rgba(56, 189, 248, 0.15);
+ color: #bae6fd;
+ padding: 0.25rem 0.6rem;
+ border-radius: 999px;
+ font-size: 0.8rem;
+}
+
+.project-card__scores {
+ display: grid;
+ gap: 1rem;
+}
+
+.project-card__meta {
+ display: grid;
+ gap: 1rem;
+}
+
+.checkbox {
+ display: flex;
+ align-items: center;
+ gap: 0.65rem;
+ font-weight: 500;
+}
+
+.checkbox input {
+ width: 20px;
+ height: 20px;
+ border-radius: 6px;
+ border: 1px solid rgba(148, 163, 184, 0.35);
+ accent-color: var(--accent);
+}
+
+.project-card__comment {
+ display: grid;
+ gap: 0.35rem;
+}
+
+.project-card__comment textarea {
+ resize: vertical;
+ min-height: 90px;
+ border-radius: 12px;
+ border: 1px solid rgba(148, 163, 184, 0.25);
+ padding: 0.75rem;
+ background: rgba(15, 23, 42, 0.55);
+}
+
+.project-card__comment textarea:focus {
+ outline: 2px solid rgba(56, 189, 248, 0.45);
+ outline-offset: 2px;
+}
diff --git a/pubky-live-vote/src/components/ProjectCard.tsx b/pubky-live-vote/src/components/ProjectCard.tsx
new file mode 100644
index 0000000..3d1906c
--- /dev/null
+++ b/pubky-live-vote/src/components/ProjectCard.tsx
@@ -0,0 +1,88 @@
+import { ChangeEvent } from 'react';
+import type { Project, ScoreComponent } from '../types/project';
+import { ScoreSlider } from './ScoreSlider';
+import { TagInput } from './TagInput';
+import './ProjectCard.css';
+
+interface Props {
+ project: Project;
+ onScoreChange: (projectId: string, component: ScoreComponent, value: number) => void;
+ onReadinessToggle: (projectId: string, ready: boolean) => void;
+ onCommentChange: (projectId: string, comment: string) => void;
+ onTagsChange: (projectId: string, tags: string[]) => void;
+}
+
+const SCORE_LABELS: Record
+
+ Popular Vote
+Rank up to five favourite projects. Self votes are blocked automatically.
+
+
+
+
+
+
+
+
+ Available projects
+-
+ {selectableProjects.map((project) => (
+
- + + + ))} +
Ranking
+-
+ {popularRanking.map((projectId, index) => {
+ const project = projects.find((item) => item.id === projectId);
+ if (!project) return null;
+ return (
+
- onDragStart(event, projectId)} + onDragOver={(event) => onDragOver(event, projectId)} + onDragEnd={onDragEnd} + > + #{index + 1} + {project.name} + + + ); + })} +
Select favourites to start ranking them.
} +
+
+
+
+ );
+};
diff --git a/pubky-live-vote/src/components/ScoreSlider.css b/pubky-live-vote/src/components/ScoreSlider.css
new file mode 100644
index 0000000..5f48574
--- /dev/null
+++ b/pubky-live-vote/src/components/ScoreSlider.css
@@ -0,0 +1,47 @@
+.slider {
+ display: grid;
+ gap: 0.6rem;
+}
+
+.slider__label {
+ font-weight: 600;
+ color: rgba(226, 232, 240, 0.85);
+}
+
+.slider__input {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.slider__input input[type='range'] {
+ width: 100%;
+ appearance: none;
+ height: 8px;
+ border-radius: 999px;
+ background: rgba(71, 85, 105, 0.35);
+}
+
+.slider__input input[type='range']::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: var(--accent);
+ border: none;
+ box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
+}
+
+.slider__input input[type='range']::-moz-range-thumb {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: var(--accent);
+ border: none;
+}
+
+.slider__value {
+ font-weight: 700;
+ min-width: 2ch;
+ text-align: right;
+}
diff --git a/pubky-live-vote/src/components/ScoreSlider.tsx b/pubky-live-vote/src/components/ScoreSlider.tsx
new file mode 100644
index 0000000..bc50def
--- /dev/null
+++ b/pubky-live-vote/src/components/ScoreSlider.tsx
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import './ScoreSlider.css';
+
+interface Props {
+ label: string;
+ value: number;
+ onChange: (value: number) => void;
+}
+
+const buildGradient = (value: number) => {
+ const percentage = Math.round((value / 10) * 100);
+ return `linear-gradient(90deg, rgba(56, 189, 248, 0.85) ${percentage}%, rgba(71, 85, 105, 0.35) ${percentage}%)`;
+};
+
+export const ScoreSlider = ({ label, value, onChange }: Props) => {
+ const background = useMemo(() => buildGradient(value), [value]);
+
+ return (
+
+ );
+};
diff --git a/pubky-live-vote/src/components/SubmissionBanner.css b/pubky-live-vote/src/components/SubmissionBanner.css
new file mode 100644
index 0000000..3c1cd2d
--- /dev/null
+++ b/pubky-live-vote/src/components/SubmissionBanner.css
@@ -0,0 +1,27 @@
+.submission-banner {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ background: rgba(15, 23, 42, 0.65);
+ border: 1px solid rgba(148, 163, 184, 0.25);
+ border-radius: 16px;
+ padding: 0.75rem 1rem;
+}
+
+.submission-banner p {
+ margin: 0;
+ color: rgba(226, 232, 240, 0.75);
+}
+
+@media (max-width: 600px) {
+ .submission-banner {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .submission-banner .button {
+ width: 100%;
+ }
+}
diff --git a/pubky-live-vote/src/components/SubmissionBanner.tsx b/pubky-live-vote/src/components/SubmissionBanner.tsx
new file mode 100644
index 0000000..f1a5dbc
--- /dev/null
+++ b/pubky-live-vote/src/components/SubmissionBanner.tsx
@@ -0,0 +1,39 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import './SubmissionBanner.css';
+import './Panel.css';
+
+dayjs.extend(relativeTime);
+
+interface Props {
+ hasPendingChanges: boolean;
+ lastSubmittedAt: string | null;
+ onSubmit: () => Promise
+
+ Projects
+Score projects across the rubric, leave feedback, and apply tags.
+
+ {projects.map((project) => (
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/pubky-live-vote/src/components/TagInput.css b/pubky-live-vote/src/components/TagInput.css
new file mode 100644
index 0000000..797f154
--- /dev/null
+++ b/pubky-live-vote/src/components/TagInput.css
@@ -0,0 +1,82 @@
+.tag-input {
+ display: grid;
+ gap: 0.85rem;
+ background: rgba(15, 23, 42, 0.5);
+ border: 1px dashed rgba(148, 163, 184, 0.35);
+ border-radius: 16px;
+ padding: 0.9rem;
+}
+
+.tag-input__header h4 {
+ margin: 0;
+}
+
+.tag-input__header p {
+ margin: 0.35rem 0 0;
+ color: rgba(226, 232, 240, 0.65);
+ font-size: 0.9rem;
+}
+
+.tag-input__chips {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ background: rgba(59, 130, 246, 0.2);
+ border-radius: 999px;
+ padding: 0.25rem 0.6rem;
+ font-size: 0.82rem;
+}
+
+.chip button {
+ background: transparent;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+}
+
+.tag-input__form {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.tag-input__form input {
+ flex: 1;
+ border-radius: 12px;
+ border: 1px solid rgba(148, 163, 184, 0.35);
+ padding: 0.55rem 0.75rem;
+ background: rgba(15, 23, 42, 0.55);
+}
+
+.tag-input__form input:focus {
+ outline: 2px solid rgba(56, 189, 248, 0.45);
+ outline-offset: 2px;
+}
+
+.tag-input__suggestions {
+ display: grid;
+ gap: 0.35rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.tag-input__suggestions button {
+ width: 100%;
+ text-align: left;
+ background: rgba(15, 23, 42, 0.45);
+ border: 1px solid transparent;
+ border-radius: 10px;
+ padding: 0.5rem 0.75rem;
+ color: rgba(148, 163, 184, 0.9);
+}
+
+.tag-input__suggestions button:hover {
+ border-color: rgba(56, 189, 248, 0.45);
+ color: var(--text);
+}
diff --git a/pubky-live-vote/src/components/TagInput.tsx b/pubky-live-vote/src/components/TagInput.tsx
new file mode 100644
index 0000000..d6ceac9
--- /dev/null
+++ b/pubky-live-vote/src/components/TagInput.tsx
@@ -0,0 +1,97 @@
+import { FormEvent, KeyboardEvent, useMemo, useState } from 'react';
+import './TagInput.css';
+
+interface Props {
+ value: string[];
+ onChange: (tags: string[]) => void;
+ ariaLabel: string;
+}
+
+export const TagInput = ({ value, onChange, ariaLabel }: Props) => {
+ const [draft, setDraft] = useState('');
+
+ const suggestions = useMemo(() => {
+ const unique = new Set([
+ 'ux',
+ 'ai',
+ 'education',
+ 'governance',
+ 'defi',
+ 'infrastructure',
+ 'tooling',
+ 'community'
+ ]);
+ value.forEach((tag) => unique.delete(tag));
+ return Array.from(unique).filter((tag) => tag.includes(draft.toLowerCase())).slice(0, 6);
+ }, [draft, value]);
+
+ const addTag = (tag: string) => {
+ const trimmed = tag.trim().toLowerCase();
+ if (!trimmed || value.includes(trimmed)) {
+ return;
+ }
+ onChange([...value, trimmed]);
+ setDraft('');
+ };
+
+ const removeTag = (tag: string) => {
+ onChange(value.filter((item) => item !== tag));
+ };
+
+ const handleSubmit = (event: FormEvent
+
+
+ {status}
+
+
+ );
+};
diff --git a/pubky-live-vote/src/context/AuthContext.tsx b/pubky-live-vote/src/context/AuthContext.tsx
new file mode 100644
index 0000000..0458dbf
--- /dev/null
+++ b/pubky-live-vote/src/context/AuthContext.tsx
@@ -0,0 +1,92 @@
+import {
+ PropsWithChildren,
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState
+} from 'react';
+import { PubkyClient, ensurePubkyClient } from '../services/pubkyClient';
+
+type User = {
+ publicKey: string;
+ displayName?: string;
+};
+
+type AuthContextValue = {
+ user: User | null;
+ qrCodeSvg: string | null;
+ isAuthenticating: boolean;
+ connect: () => Promise
+
+ Tags
+Label projects with themes to make browsing easier.
+
+ {value.map((tag) => (
+
+ #{tag}
+
+
+ ))}
+
+
+ {suggestions.length > 0 && (
+ -
+ {suggestions.map((suggestion) => (
+
- + + + ))} +
+
- .github.io//` on both desktop and mobile browsers.
+
+If you need to serve the site from a custom subdirectory, override the `VITE_BASE_PATH` environment variable in the **Build static site** step of the workflow. For custom domains, configure the CNAME record in the repository settings after the first deployment completes.
+
## License
This project is released under the MIT license. See [LICENSE](./LICENSE).
diff --git a/pubky-live-vote/vite.config.ts b/pubky-live-vote/vite.config.ts
index efe6335..c90c169 100644
--- a/pubky-live-vote/vite.config.ts
+++ b/pubky-live-vote/vite.config.ts
@@ -1,7 +1,12 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
+declare const process: { env: Record };
+
+const base = process.env.VITE_BASE_PATH ?? '/';
+
export default defineConfig({
+ base,
plugins: [react()],
server: {
port: 5173
From 8100b88bafb71c924964520be3f6bd911ead5822 Mon Sep 17 00:00:00 2001
From: JeanChristophe <46056211+JeanlChristophe@users.noreply.github.com>
Date: Thu, 23 Oct 2025 14:20:52 +0200
Subject: [PATCH 27/34] Update hackathon project roster and samples (#25)
* Update hackathon project roster and samples
* Display team tags with unified styling
---
.../public/pubky-live-vote/ballots/index.json | 45 -----------
.../public/pubky-live-vote/summary.json | 13 ----
.../src/components/ProjectCard.css | 11 +++
.../src/components/ProjectCard.tsx | 11 ++-
pubky-live-vote/src/index.css | 1 +
.../src/services/sampleProjects.ts | 76 +++++++++++++------
6 files changed, 76 insertions(+), 81 deletions(-)
diff --git a/pubky-live-vote/public/pubky-live-vote/ballots/index.json b/pubky-live-vote/public/pubky-live-vote/ballots/index.json
index d3c4410..dc753ee 100644
--- a/pubky-live-vote/public/pubky-live-vote/ballots/index.json
+++ b/pubky-live-vote/public/pubky-live-vote/ballots/index.json
@@ -131,20 +131,6 @@
"tags": [
"mapping"
]
- },
- {
- "projectId": "realm",
- "scores": {
- "complexity": 8,
- "creativity": 6,
- "presentation": 6,
- "feedback": 7
- },
- "readiness": true,
- "comment": "Love the resilient networking angle.",
- "tags": [
- "infra"
- ]
}
],
"popularRanking": [
@@ -153,7 +139,6 @@
"geostories",
"pubky-cookbook",
"monky",
- "realm",
"pubky-homeserver-cli",
"pubky-tag-extension",
"booksy",
@@ -289,20 +274,6 @@
"tags": [
"mapping"
]
- },
- {
- "projectId": "realm",
- "scores": {
- "complexity": 8,
- "creativity": 6,
- "presentation": 6,
- "feedback": 7
- },
- "readiness": true,
- "comment": "Relay stats look solid.",
- "tags": [
- "infra"
- ]
}
],
"popularRanking": [
@@ -311,7 +282,6 @@
"pubky-mcp-server",
"geostories",
"monky",
- "realm",
"pubky-homeserver-cli",
"pubky-tag-extension",
"decentralized-wiki",
@@ -447,20 +417,6 @@
"tags": [
"mapping"
]
- },
- {
- "projectId": "realm",
- "scores": {
- "complexity": 8,
- "creativity": 6,
- "presentation": 6,
- "feedback": 7
- },
- "readiness": true,
- "comment": "Redundancy plan feels strong.",
- "tags": [
- "infra"
- ]
}
],
"popularRanking": [
@@ -468,7 +424,6 @@
"pubky-live-vote",
"pubky-mcp-server",
"pubky-cookbook",
- "realm",
"monky",
"pubky-tag-extension",
"pubky-homeserver-cli",
diff --git a/pubky-live-vote/public/pubky-live-vote/summary.json b/pubky-live-vote/public/pubky-live-vote/summary.json
index 00f1310..f51be85 100644
--- a/pubky-live-vote/public/pubky-live-vote/summary.json
+++ b/pubky-live-vote/public/pubky-live-vote/summary.json
@@ -118,19 +118,6 @@
"popular": 82,
"ai": 84
}
- },
- {
- "projectId": "realm",
- "total": 78.6,
- "components": {
- "complexity": 82,
- "creativity": 74,
- "readiness": 84,
- "presentation": 70,
- "feedback": 76,
- "popular": 72,
- "ai": 80
- }
}
]
}
diff --git a/pubky-live-vote/src/components/ProjectCard.css b/pubky-live-vote/src/components/ProjectCard.css
index 22c18da..fdf6681 100644
--- a/pubky-live-vote/src/components/ProjectCard.css
+++ b/pubky-live-vote/src/components/ProjectCard.css
@@ -55,6 +55,12 @@
gap: 0.45rem;
}
+.project-card__team {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.45rem;
+}
+
.tag {
padding: 0.35rem 0.75rem;
border-radius: 999px;
@@ -78,6 +84,11 @@
box-shadow: 0 6px 14px rgba(215, 154, 255, 0.42);
}
+.tag--team {
+ background: var(--tag-team);
+ box-shadow: 0 6px 14px rgba(255, 186, 121, 0.38);
+}
+
.project-card__scores {
display: grid;
gap: 1.1rem;
diff --git a/pubky-live-vote/src/components/ProjectCard.tsx b/pubky-live-vote/src/components/ProjectCard.tsx
index 5b2760b..98d2804 100644
--- a/pubky-live-vote/src/components/ProjectCard.tsx
+++ b/pubky-live-vote/src/components/ProjectCard.tsx
@@ -44,13 +44,22 @@ export const ProjectCard = ({ project, onScoreChange, onReadinessToggle, onComme
-
+
From 6d4314548fe25de67e09db361540a6f5274c3e22 Mon Sep 17 00:00:00 2001
From: JeanChristophe <46056211+JeanlChristophe@users.noreply.github.com>
Date: Thu, 23 Oct 2025 14:18:56 +0200
Subject: [PATCH 26/34] Add GitHub Pages deployment workflow (#29)
---
.github/workflows/deploy-pages.yml | 58 ++++++++++++++++++++++++++++++
pubky-live-vote/README.md | 10 ++++++
pubky-live-vote/vite.config.ts | 5 +++
3 files changed, 73 insertions(+)
create mode 100644 .github/workflows/deploy-pages.yml
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
new file mode 100644
index 0000000..fddba74
--- /dev/null
+++ b/.github/workflows/deploy-pages.yml
@@ -0,0 +1,58 @@
+name: Deploy to GitHub Pages
+
+on:
+ push:
+ branches:
+ - main
+ workflow_dispatch:
+
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: 20
+ cache: npm
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Build static site
+ run: npm run build
+ env:
+ VITE_BASE_PATH: /${{ github.event.repository.name }}/
+
+ - name: Upload Pages artifact
+ uses: actions/upload-pages-artifact@v3
+ with:
+ path: pubky-live-vote/dist
+
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ needs: build
+ runs-on: ubuntu-latest
+ permissions:
+ pages: write
+ id-token: write
+
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4
diff --git a/pubky-live-vote/README.md b/pubky-live-vote/README.md
index 3777541..e6e5013 100644
--- a/pubky-live-vote/README.md
+++ b/pubky-live-vote/README.md
@@ -104,6 +104,16 @@ src/
2. Each project’s component scores are normalised to a 0–100 range, the official weights are applied, and tie-ready totals are produced. The UI highlights whether the snapshot came from the summary file, raw ballots, or a local preview.
3. The table updates in place without a page reload, giving organisers and participants a reliable view of standings as ballots from up to 24 voters (and beyond) land during the event.
+## Deploying to GitHub Pages
+
+A ready-to-use GitHub Actions workflow lives in [`.github/workflows/deploy-pages.yml`](../.github/workflows/deploy-pages.yml). It builds the Vite app, packages the static output from `pubky-live-vote/dist`, and publishes it to the repository’s GitHub Pages environment. To go live:
+
+1. Push the workflow to your fork or repository and make sure the default branch is `main` (or update the workflow trigger).
+2. In **Settings → Pages**, select **GitHub Actions** as the source.
+3. Merge to `main` or run the workflow manually from the **Actions** tab. The job automatically sets the correct base path so the app works from `https://Pubky Live Vote
-Real-time voting for the Pubky Hackathon
+Real-time scoring and tagging for the Pubky Hackathon
{project.tags.map((tag) => (
-
+
#{tag}
))}
diff --git a/pubky-live-vote/src/components/ProjectList.css b/pubky-live-vote/src/components/ProjectList.css
index ba546d1..9257a01 100644
--- a/pubky-live-vote/src/components/ProjectList.css
+++ b/pubky-live-vote/src/components/ProjectList.css
@@ -1,10 +1,10 @@
.project-list {
- gap: 1.25rem;
+ gap: 1.35rem;
}
.project-list__grid {
display: grid;
- gap: 1.5rem;
+ gap: clamp(1.2rem, 3vw, 1.75rem);
}
@media (min-width: 900px) {
diff --git a/pubky-live-vote/src/components/ScoreSlider.css b/pubky-live-vote/src/components/ScoreSlider.css
index 5f48574..3c75a3c 100644
--- a/pubky-live-vote/src/components/ScoreSlider.css
+++ b/pubky-live-vote/src/components/ScoreSlider.css
@@ -1,47 +1,50 @@
.slider {
display: grid;
- gap: 0.6rem;
+ gap: 0.65rem;
}
.slider__label {
font-weight: 600;
- color: rgba(226, 232, 240, 0.85);
+ color: rgba(206, 214, 255, 0.85);
}
.slider__input {
display: flex;
align-items: center;
- gap: 0.75rem;
+ gap: 0.85rem;
}
.slider__input input[type='range'] {
width: 100%;
appearance: none;
- height: 8px;
+ height: 10px;
border-radius: 999px;
- background: rgba(71, 85, 105, 0.35);
+ background: linear-gradient(90deg, rgba(42, 47, 78, 0.65), rgba(29, 32, 55, 0.35));
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.slider__input input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
- width: 18px;
- height: 18px;
+ width: 20px;
+ height: 20px;
border-radius: 50%;
- background: var(--accent);
- border: none;
- box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
+ background: linear-gradient(135deg, rgba(155, 168, 255, 0.95), rgba(95, 108, 255, 0.92));
+ border: 1px solid rgba(255, 255, 255, 0.35);
+ box-shadow: 0 6px 16px rgba(88, 101, 214, 0.45);
}
.slider__input input[type='range']::-moz-range-thumb {
- width: 18px;
- height: 18px;
+ width: 20px;
+ height: 20px;
border-radius: 50%;
- background: var(--accent);
- border: none;
+ background: linear-gradient(135deg, rgba(155, 168, 255, 0.95), rgba(95, 108, 255, 0.92));
+ border: 1px solid rgba(255, 255, 255, 0.35);
+ box-shadow: 0 6px 16px rgba(88, 101, 214, 0.45);
}
.slider__value {
font-weight: 700;
min-width: 2ch;
text-align: right;
+ color: rgba(226, 232, 255, 0.9);
}
diff --git a/pubky-live-vote/src/components/ScoreSlider.tsx b/pubky-live-vote/src/components/ScoreSlider.tsx
index bc50def..61bb8e1 100644
--- a/pubky-live-vote/src/components/ScoreSlider.tsx
+++ b/pubky-live-vote/src/components/ScoreSlider.tsx
@@ -9,7 +9,7 @@ interface Props {
const buildGradient = (value: number) => {
const percentage = Math.round((value / 10) * 100);
- return `linear-gradient(90deg, rgba(56, 189, 248, 0.85) ${percentage}%, rgba(71, 85, 105, 0.35) ${percentage}%)`;
+ return `linear-gradient(90deg, rgba(155, 168, 255, 0.92) ${percentage}%, rgba(47, 52, 80, 0.35) ${percentage}%)`;
};
export const ScoreSlider = ({ label, value, onChange }: Props) => {
diff --git a/pubky-live-vote/src/components/SubmissionBanner.css b/pubky-live-vote/src/components/SubmissionBanner.css
index 3c1cd2d..2bc8b29 100644
--- a/pubky-live-vote/src/components/SubmissionBanner.css
+++ b/pubky-live-vote/src/components/SubmissionBanner.css
@@ -3,16 +3,18 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- gap: 0.75rem;
- background: rgba(15, 23, 42, 0.65);
- border: 1px solid rgba(148, 163, 184, 0.25);
- border-radius: 16px;
- padding: 0.75rem 1rem;
+ gap: 0.85rem;
+ background: linear-gradient(120deg, rgba(105, 120, 255, 0.18), rgba(18, 21, 36, 0.92));
+ border: 1px solid rgba(141, 154, 255, 0.45);
+ border-radius: 18px;
+ padding: 0.85rem 1.15rem;
+ box-shadow: inset 0 0 0 1px rgba(95, 108, 255, 0.2);
}
.submission-banner p {
margin: 0;
- color: rgba(226, 232, 240, 0.75);
+ color: rgba(204, 212, 255, 0.82);
+ font-size: 0.98rem;
}
@media (max-width: 600px) {
diff --git a/pubky-live-vote/src/components/TagInput.css b/pubky-live-vote/src/components/TagInput.css
index 797f154..1646c63 100644
--- a/pubky-live-vote/src/components/TagInput.css
+++ b/pubky-live-vote/src/components/TagInput.css
@@ -1,66 +1,100 @@
.tag-input {
display: grid;
- gap: 0.85rem;
- background: rgba(15, 23, 42, 0.5);
- border: 1px dashed rgba(148, 163, 184, 0.35);
- border-radius: 16px;
- padding: 0.9rem;
+ gap: 0.95rem;
+ background: linear-gradient(145deg, rgba(18, 20, 34, 0.94), rgba(13, 15, 27, 0.92));
+ border: 1px dashed rgba(136, 150, 255, 0.45);
+ border-radius: 18px;
+ padding: clamp(0.9rem, 2vw, 1.1rem);
+ box-shadow: inset 0 0 0 1px rgba(73, 86, 170, 0.18);
}
.tag-input__header h4 {
margin: 0;
+ font-size: 1rem;
}
.tag-input__header p {
margin: 0.35rem 0 0;
- color: rgba(226, 232, 240, 0.65);
- font-size: 0.9rem;
+ color: rgba(200, 208, 255, 0.72);
+ font-size: 0.92rem;
}
.tag-input__chips {
display: flex;
- gap: 0.5rem;
+ gap: 0.55rem;
flex-wrap: wrap;
}
.chip {
display: inline-flex;
align-items: center;
- gap: 0.35rem;
- background: rgba(59, 130, 246, 0.2);
+ gap: 0.4rem;
border-radius: 999px;
- padding: 0.25rem 0.6rem;
+ padding: 0.28rem 0.7rem 0.28rem 0.6rem;
font-size: 0.82rem;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ text-transform: lowercase;
+ background: var(--tag-blue);
+ color: #0a0c17;
+ border: 1px solid rgba(255, 255, 255, 0.14);
+ box-shadow: 0 8px 20px rgba(114, 130, 255, 0.4);
+}
+
+.chip__hash {
+ opacity: 0.7;
+}
+
+.chip.tone-green {
+ background: var(--tag-green);
+ box-shadow: 0 8px 20px rgba(54, 215, 167, 0.32);
+}
+
+.chip.tone-purple {
+ background: var(--tag-purple);
+ box-shadow: 0 8px 20px rgba(215, 154, 255, 0.35);
}
.chip button {
- background: transparent;
+ background: rgba(255, 255, 255, 0.22);
border: none;
color: inherit;
cursor: pointer;
+ border-radius: 999px;
+ width: 1.25rem;
+ height: 1.25rem;
+ display: grid;
+ place-items: center;
+ font-size: 0.9rem;
+}
+
+.chip button:hover {
+ background: rgba(255, 255, 255, 0.35);
}
.tag-input__form {
display: flex;
- gap: 0.5rem;
+ gap: 0.6rem;
}
.tag-input__form input {
flex: 1;
- border-radius: 12px;
- border: 1px solid rgba(148, 163, 184, 0.35);
- padding: 0.55rem 0.75rem;
- background: rgba(15, 23, 42, 0.55);
+ border-radius: 14px;
+ border: 1px solid rgba(130, 143, 255, 0.4);
+ padding: 0.6rem 0.8rem;
+ background: linear-gradient(135deg, rgba(17, 18, 30, 0.92), rgba(12, 13, 24, 0.9));
+ color: rgba(222, 228, 255, 0.92);
}
.tag-input__form input:focus {
- outline: 2px solid rgba(56, 189, 248, 0.45);
- outline-offset: 2px;
+ outline: none;
+ border-color: rgba(155, 168, 255, 0.65);
+ box-shadow: 0 0 0 3px rgba(121, 136, 255, 0.24);
}
.tag-input__suggestions {
display: grid;
- gap: 0.35rem;
+ gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
@@ -69,14 +103,27 @@
.tag-input__suggestions button {
width: 100%;
text-align: left;
- background: rgba(15, 23, 42, 0.45);
- border: 1px solid transparent;
- border-radius: 10px;
- padding: 0.5rem 0.75rem;
- color: rgba(148, 163, 184, 0.9);
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ background: linear-gradient(135deg, rgba(19, 20, 33, 0.85), rgba(13, 14, 24, 0.88));
+ border: 1px solid rgba(130, 145, 255, 0.32);
+ border-radius: 12px;
+ padding: 0.55rem 0.8rem;
+ color: rgba(210, 216, 255, 0.85);
+ cursor: pointer;
+ transition: border 0.18s ease, transform 0.18s ease;
}
.tag-input__suggestions button:hover {
- border-color: rgba(56, 189, 248, 0.45);
- color: var(--text);
+ border-color: rgba(155, 168, 255, 0.6);
+ transform: translateY(-1px);
+}
+
+.tag-input__suggestions button.tone-green {
+ border-color: rgba(62, 210, 168, 0.55);
+}
+
+.tag-input__suggestions button.tone-purple {
+ border-color: rgba(200, 152, 255, 0.6);
}
diff --git a/pubky-live-vote/src/components/TagInput.tsx b/pubky-live-vote/src/components/TagInput.tsx
index d6ceac9..b3f3390 100644
--- a/pubky-live-vote/src/components/TagInput.tsx
+++ b/pubky-live-vote/src/components/TagInput.tsx
@@ -1,4 +1,5 @@
import { FormEvent, KeyboardEvent, useMemo, useState } from 'react';
+import { getTagTone } from '../utils/tagTone';
import './TagInput.css';
interface Props {
@@ -60,8 +61,11 @@ export const TagInput = ({ value, onChange, ariaLabel }: Props) => {
{value.map((tag) => (
-
- #{tag}
+
+
+ {tag}
@@ -85,8 +89,9 @@ export const TagInput = ({ value, onChange, ariaLabel }: Props) => {
{user && (
- -
{suggestions.map((suggestion) => (
- - ))} diff --git a/pubky-live-vote/src/index.css b/pubky-live-vote/src/index.css index 2edc613..5d97157 100644 --- a/pubky-live-vote/src/index.css +++ b/pubky-live-vote/src/index.css @@ -1,25 +1,34 @@ :root { - color-scheme: light dark; - font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + color-scheme: dark; + font-family: 'Inter', 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; font-weight: 400; - --bg: #0f172a; - --bg-alt: #111827; - --surface: #1f2937; - --surface-alt: rgba(255, 255, 255, 0.04); - --border: rgba(255, 255, 255, 0.08); - --text: #f8fafc; - --accent: #38bdf8; - --accent-strong: #0ea5e9; - --danger: #f87171; + --bg: #080b14; + --bg-alt: #0d101b; + --surface: #141726; + --surface-alt: rgba(122, 137, 255, 0.12); + --border: rgba(115, 128, 255, 0.28); + --text: #f5f7ff; + --muted: rgba(204, 210, 255, 0.7); + --accent: #8f9bff; + --accent-strong: #5f6bff; + --danger: #ff7a9a; + --tag-blue: linear-gradient(135deg, rgba(101, 118, 255, 0.95), rgba(158, 135, 255, 0.85)); + --tag-green: linear-gradient(135deg, rgba(54, 215, 167, 0.95), rgba(130, 250, 199, 0.85)); + --tag-purple: linear-gradient(135deg, rgba(185, 130, 255, 0.95), rgba(255, 171, 242, 0.85)); background-color: var(--bg); color: var(--text); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } body { margin: 0; min-height: 100vh; - background: radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 65%), var(--bg); + background: + radial-gradient(circle at 20% -10%, rgba(148, 163, 255, 0.25), transparent 55%), + radial-gradient(circle at 80% 0%, rgba(255, 140, 214, 0.15), transparent 50%), + linear-gradient(180deg, #12162a 0%, #090b16 45%, #05060d 100%); } #root { @@ -28,6 +37,7 @@ body { a { color: inherit; + text-decoration: none; } button { @@ -42,16 +52,21 @@ select { color: inherit; } +input::placeholder, +textarea::placeholder { + color: rgba(206, 214, 255, 0.6); +} + ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { - background-color: rgba(148, 163, 184, 0.5); + background: linear-gradient(180deg, rgba(132, 148, 255, 0.65), rgba(97, 109, 200, 0.55)); border-radius: 9999px; } ::-webkit-scrollbar-track { - background-color: rgba(30, 41, 59, 0.4); + background-color: rgba(21, 24, 38, 0.65); } diff --git a/pubky-live-vote/src/utils/tagTone.ts b/pubky-live-vote/src/utils/tagTone.ts new file mode 100644 index 0000000..0b667b9 --- /dev/null +++ b/pubky-live-vote/src/utils/tagTone.ts @@ -0,0 +1,13 @@ +const TONES = ['blue', 'green', 'purple'] as const; + +type Tone = (typeof TONES)[number]; + +export const getTagTone = (tag: string): `tone-${Tone}` => { + const normalized = tag.trim().toLowerCase(); + if (!normalized) { + return 'tone-blue'; + } + const hash = Array.from(normalized).reduce((acc, char, index) => acc + char.charCodeAt(0) * (index + 1), 0); + const tone = TONES[hash % TONES.length]; + return `tone-${tone}`; +}; From d8abec3cdbc042e7308fe66dacaf25dd91f7012c Mon Sep 17 00:00:00 2001 From: JeanChristophe <46056211+JeanlChristophe@users.noreply.github.com> Date: Wed, 22 Oct 2025 16:57:06 +0200 Subject: [PATCH 03/34] Add hover labels and refresh sample project list (#4) --- pubky-live-vote/src/components/Layout.css | 26 ++- pubky-live-vote/src/components/Layout.tsx | 53 ++++-- .../src/services/sampleProjects.ts | 173 ++++++++++++++---- 3 files changed, 192 insertions(+), 60 deletions(-) diff --git a/pubky-live-vote/src/components/Layout.css b/pubky-live-vote/src/components/Layout.css index e3e1a4a..57295ff 100644 --- a/pubky-live-vote/src/components/Layout.css +++ b/pubky-live-vote/src/components/Layout.css @@ -65,8 +65,15 @@ .top-nav__actions { display: flex; + align-items: flex-end; + gap: 0.75rem; +} + +.top-nav__action { + display: flex; + flex-direction: column; align-items: center; - gap: 0.6rem; + gap: 0.35rem; } .top-nav__actions button { @@ -88,6 +95,23 @@ box-shadow: 0 12px 24px rgba(40, 45, 80, 0.45); } +.top-nav__action-label { + font-size: 0.7rem; + letter-spacing: 0.04em; + color: rgba(210, 220, 255, 0.75); + text-transform: uppercase; + opacity: 0; + transform: translateY(-6px); + transition: opacity 0.18s ease, transform 0.18s ease; + pointer-events: none; +} + +.top-nav__action:hover .top-nav__action-label, +.top-nav__action:focus-within .top-nav__action-label { + opacity: 1; + transform: translateY(0); +} + .top-nav__actions svg { width: 20px; height: 20px; diff --git a/pubky-live-vote/src/components/Layout.tsx b/pubky-live-vote/src/components/Layout.tsx index 2a85633..5320e40 100644 --- a/pubky-live-vote/src/components/Layout.tsx +++ b/pubky-live-vote/src/components/Layout.tsx @@ -36,25 +36,40 @@ export const Layout = () => {
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
export const Layout = () => {
const { user } = useAuth();
const { submitBallot, hasPendingChanges, lastSubmittedAt } = useProjects();
@@ -36,40 +55,25 @@ export const Layout = () => {
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+ {project.name}
{project.description}
+
diff --git a/pubky-live-vote/src/index.css b/pubky-live-vote/src/index.css
index 5d97157..0efd91b 100644
--- a/pubky-live-vote/src/index.css
+++ b/pubky-live-vote/src/index.css
@@ -16,6 +16,7 @@
--tag-blue: linear-gradient(135deg, rgba(101, 118, 255, 0.95), rgba(158, 135, 255, 0.85));
--tag-green: linear-gradient(135deg, rgba(54, 215, 167, 0.95), rgba(130, 250, 199, 0.85));
--tag-purple: linear-gradient(135deg, rgba(185, 130, 255, 0.95), rgba(255, 171, 242, 0.85));
+ --tag-team: linear-gradient(135deg, rgba(255, 205, 134, 0.95), rgba(255, 177, 98, 0.88));
background-color: var(--bg);
color: var(--text);
text-rendering: optimizeLegibility;
diff --git a/pubky-live-vote/src/services/sampleProjects.ts b/pubky-live-vote/src/services/sampleProjects.ts
index 0469f6d..41a8a4b 100644
--- a/pubky-live-vote/src/services/sampleProjects.ts
+++ b/pubky-live-vote/src/services/sampleProjects.ts
@@ -15,7 +15,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['sdk', 'automation'],
- teamMembers: ['Ivy Taylor', 'Marcus Chen'],
+ teamMembers: ['@Vlada'],
aiScore: 86
},
{
@@ -31,13 +31,13 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['cli', 'ops'],
- teamMembers: ['Priya Singh', 'Diego Marquez'],
+ teamMembers: ['@Vadimir', '@Piotr'],
aiScore: 79
},
{
id: 'pubky-tag-extension',
- name: 'Browser extension to tag the web',
- description: 'No easy way to compartmentalize your information sources and content',
+ name: 'Homegate',
+ description: 'Create a homeserver UI that shows different types of plans for users to sign up.',
tags: ['browser', 'productivity', 'tagging'],
scores: {
complexity: 6,
@@ -47,7 +47,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['browser', 'research'],
- teamMembers: ['Lena Brooks'],
+ teamMembers: ['@Miguel', '@Oier', '@Severin'],
aiScore: 75
},
{
@@ -63,7 +63,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['sharing'],
- teamMembers: ['Hiro Tanaka', 'Mia Patel'],
+ teamMembers: ['@Jams', '@Tomos'],
aiScore: 72
},
{
@@ -79,7 +79,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['onboarding', 'docs'],
- teamMembers: ['Sasha Rivera'],
+ teamMembers: ['@Aldert'],
aiScore: 83
},
{
@@ -95,12 +95,12 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['wiki'],
- teamMembers: ['Omar Williams', 'Ji-Eun Park'],
+ teamMembers: ['@Carlos', '@Pav', '@Ovi'],
aiScore: 78
},
{
id: 'monky',
- name: 'MonKy',
+ name: 'ConsentKy',
description: 'Social contracts based on keys',
tags: ['social', 'identity', 'governance'],
scores: {
@@ -111,7 +111,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['identity'],
- teamMembers: ['Noah Andersson'],
+ teamMembers: ['@Jacobo', '@Oliver'],
aiScore: 82
},
{
@@ -127,7 +127,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['voting'],
- teamMembers: ['Adedeji Afolabi', 'Grace Liu'],
+ teamMembers: ['@JC'],
aiScore: 88
},
{
@@ -144,23 +144,55 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['mapping'],
- teamMembers: ['Amelia Jones'],
+ teamMembers: ['@Corey'],
aiScore: 84
},
{
- id: 'realm',
- name: 'Realm',
- description: 'UDP relay that attaches itself to a homeserver instance',
- tags: ['networking', 'infrastructure', 'homeserver'],
+ id: 'publar',
+ name: 'Publar',
+ description: 'A developer tool similar to Polar (for Lightning), but for the Pubky ecosystem',
+ tags: ['developer-tools', 'pubky', 'payments'],
scores: {
- complexity: 8,
- creativity: 6,
+ complexity: 7,
+ creativity: 8,
+ presentation: 7,
+ feedback: 8
+ },
+ readiness: false,
+ userTags: ['developer-tools'],
+ teamMembers: ['@Kevin'],
+ aiScore: 81
+ },
+ {
+ id: 'pubkylab',
+ name: 'PubkyLab',
+ description: 'An interactive web-based playground where developers can instantly test SDK operations',
+ tags: ['developer-tools', 'playground', 'sdk'],
+ scores: {
+ complexity: 6,
+ creativity: 7,
+ presentation: 8,
+ feedback: 7
+ },
+ readiness: false,
+ userTags: ['sdk', 'playground'],
+ teamMembers: ['@Joao'],
+ aiScore: 77
+ },
+ {
+ id: 'p2pjobs',
+ name: 'P2PJobs',
+ description: 'Decentralized Job Board',
+ tags: ['jobs', 'marketplace', 'p2p'],
+ scores: {
+ complexity: 6,
+ creativity: 7,
presentation: 6,
feedback: 7
},
- readiness: true,
- userTags: ['infra'],
- teamMembers: ['Logan Harper', 'Valentina Rossi'],
- aiScore: 80
+ readiness: false,
+ userTags: ['jobs'],
+ teamMembers: ['@P2PJobsTeam'],
+ aiScore: 70
}
];
From a0cc20b0dda63b05e741b2981172a370e46bae33 Mon Sep 17 00:00:00 2001
From: JeanChristophe <46056211+JeanlChristophe@users.noreply.github.com>
Date: Thu, 23 Oct 2025 14:37:00 +0200
Subject: [PATCH 28/34] Highlight project team tags (#30)
* Highlight project team tags
* Update sample project team member tags
---
.../src/components/ProjectCard.css | 17 ++++++++++++++
.../src/components/ProjectCard.tsx | 13 ++++++-----
.../src/services/sampleProjects.ts | 22 +++++++++----------
3 files changed, 36 insertions(+), 16 deletions(-)
diff --git a/pubky-live-vote/src/components/ProjectCard.css b/pubky-live-vote/src/components/ProjectCard.css
index fdf6681..65ab253 100644
--- a/pubky-live-vote/src/components/ProjectCard.css
+++ b/pubky-live-vote/src/components/ProjectCard.css
@@ -56,6 +56,21 @@
}
.project-card__team {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.55rem;
+}
+
+.project-card__team-label {
+ font-size: 0.68rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ color: rgba(255, 216, 166, 0.85);
+}
+
+.project-card__team-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
@@ -87,6 +102,8 @@
.tag--team {
background: var(--tag-team);
box-shadow: 0 6px 14px rgba(255, 186, 121, 0.38);
+ color: #2a1705;
+ border-color: rgba(255, 241, 220, 0.45);
}
.project-card__scores {
diff --git a/pubky-live-vote/src/components/ProjectCard.tsx b/pubky-live-vote/src/components/ProjectCard.tsx
index 98d2804..4ab9d95 100644
--- a/pubky-live-vote/src/components/ProjectCard.tsx
+++ b/pubky-live-vote/src/components/ProjectCard.tsx
@@ -53,11 +53,14 @@ export const ProjectCard = ({ project, onScoreChange, onReadinessToggle, onComme
{project.teamMembers?.length ? (
{project.tags.map((tag) => (
#{tag}
))}
+ {project.teamMembers?.length ? (
+
+ {project.teamMembers.map((member) => (
+
+ {member.startsWith('@') ? member : `@${member}`}
+
+ ))}
+
+ ) : null}
- {project.teamMembers.map((member) => (
-
- {member.startsWith('@') ? member : `@${member}`}
-
- ))}
+ Team
+
) : null}
diff --git a/pubky-live-vote/src/services/sampleProjects.ts b/pubky-live-vote/src/services/sampleProjects.ts
index 41a8a4b..c479b4f 100644
--- a/pubky-live-vote/src/services/sampleProjects.ts
+++ b/pubky-live-vote/src/services/sampleProjects.ts
@@ -15,7 +15,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['sdk', 'automation'],
- teamMembers: ['@Vlada'],
+ teamMembers: ['Vlada'],
aiScore: 86
},
{
@@ -31,7 +31,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['cli', 'ops'],
- teamMembers: ['@Vadimir', '@Piotr'],
+ teamMembers: ['Vladimir', 'Piotr'],
aiScore: 79
},
{
@@ -47,7 +47,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['browser', 'research'],
- teamMembers: ['@Miguel', '@Oier', '@Severin'],
+ teamMembers: ['Miguel', 'Oier', 'Severin'],
aiScore: 75
},
{
@@ -63,7 +63,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['sharing'],
- teamMembers: ['@Jams', '@Tomos'],
+ teamMembers: ['Jams', 'Tomos'],
aiScore: 72
},
{
@@ -79,7 +79,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['onboarding', 'docs'],
- teamMembers: ['@Aldert'],
+ teamMembers: ['Aldert'],
aiScore: 83
},
{
@@ -95,7 +95,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['wiki'],
- teamMembers: ['@Carlos', '@Pav', '@Ovi'],
+ teamMembers: ['Carlos', 'Pav', 'Ovi'],
aiScore: 78
},
{
@@ -111,7 +111,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['identity'],
- teamMembers: ['@Jacobo', '@Oliver'],
+ teamMembers: ['Jacobo', 'Oliver'],
aiScore: 82
},
{
@@ -127,7 +127,7 @@ export const demoProjects: Project[] = [
},
readiness: true,
userTags: ['voting'],
- teamMembers: ['@JC'],
+ teamMembers: ['JC'],
aiScore: 88
},
{
@@ -144,7 +144,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['mapping'],
- teamMembers: ['@Corey'],
+ teamMembers: ['Corey'],
aiScore: 84
},
{
@@ -160,7 +160,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['developer-tools'],
- teamMembers: ['@Kevin'],
+ teamMembers: ['Kevin'],
aiScore: 81
},
{
@@ -176,7 +176,7 @@ export const demoProjects: Project[] = [
},
readiness: false,
userTags: ['sdk', 'playground'],
- teamMembers: ['@Joao'],
+ teamMembers: ['Joao'],
aiScore: 77
},
{
From b3be9b68c016a2d1a75530bfbde66f8798180a15 Mon Sep 17 00:00:00 2001
From: JeanChristophe <46056211+JeanlChristophe@users.noreply.github.com>
Date: Thu, 23 Oct 2025 14:50:43 +0200
Subject: [PATCH 29/34] Document live vote architecture and friction log (#31)
---
pubky-live-vote/README.md | 55 +++++++++++++++++++++++++++++++++++++++
1 file changed, 55 insertions(+)
diff --git a/pubky-live-vote/README.md b/pubky-live-vote/README.md
index e6e5013..00eca65 100644
--- a/pubky-live-vote/README.md
+++ b/pubky-live-vote/README.md
@@ -12,6 +12,61 @@ Pubky Live Vote is a responsive hackathon voting interface that uses the Pubky J
- **Offline cache** – ballots queue in local storage whenever the network is down and flush automatically once connectivity is restored.
- **Live leaderboard** – polls the Pubky homeserver summary (or aggregates ballots directly) every 10 seconds, showing the voter count and data source for transparency.
+## Architecture overview
+
+Pubky Live Vote is a single-page Vite + React application that talks directly to the Pubky JavaScript SDK. The architecture is intentionally thin—everything runs client-side so hackathon organisers can deploy the app as static files while still benefiting from secure storage through Pubky.
+
+### Core modules
+
+| Layer | Key modules | Responsibilities |
+| --- | --- | --- |
+| **UI** | `src/components/*` | Presentation components for ballot entry, leaderboard, navigation chrome, and responsive layouts. Each component receives state via props or React context to keep rendering predictable. |
+| **State & context** | `src/context/AuthContext`, `src/context/ProjectsContext` | Centralises session, project catalogue, and submission state. Auth context exposes the connected Pubky identity plus loading/error states. Projects context provides rubric metadata, cached ballots, and helper actions. |
+| **Services** | `src/services/pubkyClient`, `src/services/offlineQueue`, `src/services/sampleData` | Wrap Pubky SDK calls (login, ballot CRUD, summary fetch) and isolate network logic. The offline queue abstracts localStorage persistence, while sample data powers the preview mode used before the homeserver is reachable. |
+| **Types & utilities** | `src/types`, `src/services/scoring` | Declare the shared interfaces for ballots, rubric weights, and leaderboard entries, plus pure functions to calculate weighted scores and tie-breakers. |
+
+### Runtime data flow
+
+1. **Bootstrap** – when the app mounts, it loads configuration from `window.__PUBKY_CONFIG__`, instantiates the Pubky SDK (or the mocked client), and pulls the current project list plus any cached ballots.
+2. **Authentication** – the login dialog triggers a Pubky Ring session. Auth context resolves to either a verified Pubky identity or the offline mock identity so users can continue testing.
+3. **Ballot capture** – the ballot form emits updates into local React state; on submit the service layer signs and uploads the payload to `pubky-live-vote/ballots/
+ {project.teamMembers.map((member) => (
+
+ {member.startsWith('@') ? member : `@${member}`}
+
+ ))}
+
diff --git a/pubky-live-vote/src/services/sampleProjects.ts b/pubky-live-vote/src/services/sampleProjects.ts
index c479b4f..d45bd57 100644
--- a/pubky-live-vote/src/services/sampleProjects.ts
+++ b/pubky-live-vote/src/services/sampleProjects.ts
@@ -1,20 +1,14 @@
import type { Project } from '../types/project';
-export const demoProjects: Project[] = [
+type ProjectSeed = Omit;
+
+const seeds: ProjectSeed[] = [
{
id: 'pubky-mcp-server',
name: 'Pubky MCP server',
description:
'An MCP server can let developers talk to Pubky in plain English instead of wrestling with testnet setup, keypair management, and API docs.',
tags: ['developer-tools', 'automation', 'sdk'],
- scores: {
- complexity: 8,
- creativity: 7,
- presentation: 7,
- feedback: 8
- },
- readiness: true,
- userTags: ['sdk', 'automation'],
teamMembers: ['Vlada'],
aiScore: 86
},
@@ -23,14 +17,6 @@ export const demoProjects: Project[] = [
name: 'CLI for pubky homeserver',
description: 'One tool for automation of flow with commands instead of code',
tags: ['cli', 'infrastructure', 'automation'],
- scores: {
- complexity: 7,
- creativity: 6,
- presentation: 7,
- feedback: 7
- },
- readiness: true,
- userTags: ['cli', 'ops'],
teamMembers: ['Vladimir', 'Piotr'],
aiScore: 79
},
@@ -39,14 +25,6 @@ export const demoProjects: Project[] = [
name: 'Homegate',
description: 'Create a homeserver UI that shows different types of plans for users to sign up.',
tags: ['browser', 'productivity', 'tagging'],
- scores: {
- complexity: 6,
- creativity: 8,
- presentation: 7,
- feedback: 8
- },
- readiness: false,
- userTags: ['browser', 'research'],
teamMembers: ['Miguel', 'Oier', 'Severin'],
aiScore: 75
},
@@ -55,14 +33,6 @@ export const demoProjects: Project[] = [
name: 'Booksy',
description: 'A bookmark sharing browser extension',
tags: ['community', 'browser', 'sharing'],
- scores: {
- complexity: 5,
- creativity: 7,
- presentation: 8,
- feedback: 7
- },
- readiness: false,
- userTags: ['sharing'],
teamMembers: ['Jams', 'Tomos'],
aiScore: 72
},
@@ -71,14 +41,6 @@ export const demoProjects: Project[] = [
name: 'Cookbook',
description: 'To bmake it easy to onboard developers',
tags: ['education', 'docs', 'developer-tools'],
- scores: {
- complexity: 6,
- creativity: 6,
- presentation: 8,
- feedback: 9
- },
- readiness: true,
- userTags: ['onboarding', 'docs'],
teamMembers: ['Aldert'],
aiScore: 83
},
@@ -87,14 +49,6 @@ export const demoProjects: Project[] = [
name: 'Decentralized Wiki',
description: 'Pubky-based decentralized wiki',
tags: ['knowledge', 'governance', 'pubky'],
- scores: {
- complexity: 7,
- creativity: 7,
- presentation: 6,
- feedback: 7
- },
- readiness: false,
- userTags: ['wiki'],
teamMembers: ['Carlos', 'Pav', 'Ovi'],
aiScore: 78
},
@@ -103,14 +57,6 @@ export const demoProjects: Project[] = [
name: 'ConsentKy',
description: 'Social contracts based on keys',
tags: ['social', 'identity', 'governance'],
- scores: {
- complexity: 8,
- creativity: 8,
- presentation: 6,
- feedback: 6
- },
- readiness: true,
- userTags: ['identity'],
teamMembers: ['Jacobo', 'Oliver'],
aiScore: 82
},
@@ -119,14 +65,6 @@ export const demoProjects: Project[] = [
name: 'Pubky Live Vote',
description: 'Allow participants of the hackathon to vote for each projects',
tags: ['voting', 'event', 'pubky'],
- scores: {
- complexity: 6,
- creativity: 7,
- presentation: 9,
- feedback: 8
- },
- readiness: true,
- userTags: ['voting'],
teamMembers: ['JC'],
aiScore: 88
},
@@ -136,14 +74,6 @@ export const demoProjects: Project[] = [
description:
'A way to view and add markers to a map for sharing stories and photos to particular geographic locations using pubky-sdk',
tags: ['mapping', 'storytelling', 'pubky'],
- scores: {
- complexity: 7,
- creativity: 9,
- presentation: 7,
- feedback: 7
- },
- readiness: false,
- userTags: ['mapping'],
teamMembers: ['Corey'],
aiScore: 84
},
@@ -152,14 +82,6 @@ export const demoProjects: Project[] = [
name: 'Publar',
description: 'A developer tool similar to Polar (for Lightning), but for the Pubky ecosystem',
tags: ['developer-tools', 'pubky', 'payments'],
- scores: {
- complexity: 7,
- creativity: 8,
- presentation: 7,
- feedback: 8
- },
- readiness: false,
- userTags: ['developer-tools'],
teamMembers: ['Kevin'],
aiScore: 81
},
@@ -168,14 +90,6 @@ export const demoProjects: Project[] = [
name: 'PubkyLab',
description: 'An interactive web-based playground where developers can instantly test SDK operations',
tags: ['developer-tools', 'playground', 'sdk'],
- scores: {
- complexity: 6,
- creativity: 7,
- presentation: 8,
- feedback: 7
- },
- readiness: false,
- userTags: ['sdk', 'playground'],
teamMembers: ['Joao'],
aiScore: 77
},
@@ -184,15 +98,22 @@ export const demoProjects: Project[] = [
name: 'P2PJobs',
description: 'Decentralized Job Board',
tags: ['jobs', 'marketplace', 'p2p'],
- scores: {
- complexity: 6,
- creativity: 7,
- presentation: 6,
- feedback: 7
- },
- readiness: false,
- userTags: ['jobs'],
teamMembers: ['@P2PJobsTeam'],
aiScore: 70
}
];
+
+const createEmptyScores = (): Project['scores'] => ({
+ complexity: 0,
+ creativity: 0,
+ presentation: 0,
+ feedback: 0
+});
+
+export const demoProjects: Project[] = seeds.map((project) => ({
+ ...project,
+ scores: createEmptyScores(),
+ readiness: false,
+ comment: '',
+ userTags: []
+}));
From 2c31764e33b65b8e41936693c119e3b154338d85 Mon Sep 17 00:00:00 2001
From: JeanChristophe <46056211+JeanlChristophe@users.noreply.github.com>
Date: Thu, 23 Oct 2025 16:04:12 +0200
Subject: [PATCH 33/34] Remove popular vote board and prevent self-voting (#35)
---
pubky-live-vote/src/components/Layout.tsx | 4 +-
.../src/components/Leaderboard.tsx | 7 +-
.../src/components/MyProjectPanel.css | 29 +++++
.../src/components/MyProjectPanel.tsx | 40 +++++++
.../src/components/PopularVoteBoard.css | 102 ----------------
.../src/components/PopularVoteBoard.tsx | 110 ------------------
.../src/components/ProjectCard.css | 29 +++++
.../src/components/ProjectCard.tsx | 39 ++++++-
.../src/components/ProjectList.tsx | 10 +-
.../src/components/ScoreSlider.css | 21 ++++
.../src/components/ScoreSlider.tsx | 15 ++-
pubky-live-vote/src/components/TagInput.css | 23 ++++
pubky-live-vote/src/components/TagInput.tsx | 19 ++-
.../src/context/ProjectContext.tsx | 42 +++----
.../src/hooks/useLiveLeaderboard.ts | 11 +-
pubky-live-vote/src/services/leaderboard.ts | 22 +---
16 files changed, 238 insertions(+), 285 deletions(-)
create mode 100644 pubky-live-vote/src/components/MyProjectPanel.css
create mode 100644 pubky-live-vote/src/components/MyProjectPanel.tsx
delete mode 100644 pubky-live-vote/src/components/PopularVoteBoard.css
delete mode 100644 pubky-live-vote/src/components/PopularVoteBoard.tsx
diff --git a/pubky-live-vote/src/components/Layout.tsx b/pubky-live-vote/src/components/Layout.tsx
index 274da55..1d1bcd3 100644
--- a/pubky-live-vote/src/components/Layout.tsx
+++ b/pubky-live-vote/src/components/Layout.tsx
@@ -4,7 +4,7 @@ import { useProjects } from '../context/ProjectContext';
import { LoginCard } from './LoginCard';
import { ProjectList } from './ProjectList';
import { Leaderboard } from './Leaderboard';
-import { PopularVoteBoard } from './PopularVoteBoard';
+import { MyProjectPanel } from './MyProjectPanel';
import { SubmissionBanner } from './SubmissionBanner';
import './Layout.css';
@@ -66,7 +66,7 @@ export const Layout = () => {
) => {
+ const value = event.target.value;
+ setUserProjectId(value || null);
+ };
+
+ return (
+ (null);
-
- const selectableProjects = useMemo(
- () =>
- projects.filter((project) => project.id !== userProjectId).sort((a, b) => a.name.localeCompare(b.name)),
- [projects, userProjectId]
- );
-
- const addToRanking = (projectId: string) => {
- if (popularRanking.includes(projectId)) return;
- setPopularRanking([...popularRanking, projectId]);
- };
-
- const removeFromRanking = (projectId: string) => {
- setPopularRanking(popularRanking.filter((id) => id !== projectId));
- };
-
- const onDragStart = (event: DragEvent, projectId: string) => {
- setDraggedId(projectId);
- event.dataTransfer.effectAllowed = 'move';
- };
-
- const onDragOver = (event: DragEvent, targetId: string) => {
- event.preventDefault();
- if (!draggedId || draggedId === targetId) return;
- const newOrder = [...popularRanking];
- const from = newOrder.indexOf(draggedId);
- const to = newOrder.indexOf(targetId);
- newOrder.splice(from, 1);
- newOrder.splice(to, 0, draggedId);
- setPopularRanking(newOrder);
- };
-
- const onDragEnd = () => setDraggedId(null);
-
- return (
- = {
@@ -20,25 +21,39 @@ const SCORE_LABELS: Record = {
feedback: 'Feedback Quality'
};
-export const ProjectCard = ({ project, onScoreChange, onReadinessToggle, onCommentChange, onTagsChange }: Props) => {
+export const ProjectCard = ({
+ project,
+ onScoreChange,
+ onReadinessToggle,
+ onCommentChange,
+ onTagsChange,
+ isOwnProject = false
+}: Props) => {
const handleSlider = (component: ScoreComponent) => (value: number) => {
+ if (isOwnProject) return;
onScoreChange(project.id, component, value);
};
const handleComment = (event: ChangeEvent) => {
+ if (isOwnProject) return;
onCommentChange(project.id, event.target.value);
};
const handleReadiness = (event: ChangeEvent) => {
+ if (isOwnProject) return;
onReadinessToggle(project.id, event.target.checked);
};
const handleTagsUpdate = (tags: string[]) => {
+ if (isOwnProject) return;
onTagsChange(project.id, tags);
};
return (
-
+
+
{Object.entries(SCORE_LABELS).map(([component, label]) => (
-
+
-
+ {isOwnProject && (
+
+
+
+
+ );
+};
diff --git a/pubky-live-vote/src/components/PopularVoteBoard.css b/pubky-live-vote/src/components/PopularVoteBoard.css
deleted file mode 100644
index ff060e7..0000000
--- a/pubky-live-vote/src/components/PopularVoteBoard.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.popular {
- gap: 1.6rem;
-}
-
-.popular__body {
- display: grid;
- gap: 1.35rem;
-}
-
-.popular__self-select {
- display: grid;
- gap: 0.4rem;
- font-size: 0.92rem;
- color: rgba(206, 214, 255, 0.78);
-}
-
-.popular__self-select select {
- border-radius: 14px;
- border: 1px solid rgba(130, 145, 255, 0.38);
- background: linear-gradient(135deg, rgba(17, 18, 30, 0.92), rgba(12, 14, 26, 0.94));
- color: rgba(223, 228, 255, 0.9);
- padding: 0.55rem 0.8rem;
-}
-
-.popular h3 {
- margin: 0;
- font-size: 1.02rem;
-}
-
-.popular__pool {
- display: grid;
- gap: 0.8rem;
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.popular__pool button {
- width: 100%;
- justify-content: flex-start;
-}
-
-.popular__ranking ol {
- margin: 0;
- padding-left: 0;
- list-style: none;
- display: grid;
- gap: 0.85rem;
-}
-
-.popular__ranking li {
- display: grid;
- grid-template-columns: 52px minmax(0, 1fr) 44px;
- gap: 0.6rem;
- align-items: center;
- padding: 0.75rem 0.95rem;
- border-radius: 16px;
- border: 1px solid rgba(129, 143, 255, 0.38);
- background: linear-gradient(135deg, rgba(19, 21, 36, 0.92), rgba(12, 14, 26, 0.9));
- box-shadow: 0 12px 26px rgba(16, 20, 42, 0.45);
- cursor: grab;
- transition: transform 0.18s ease, border 0.18s ease;
-}
-
-.popular__ranking li:active {
- cursor: grabbing;
-}
-
-.popular__ranking li:hover {
- transform: translateY(-2px);
- border-color: rgba(155, 168, 255, 0.62);
-}
-
-.popular__position {
- font-weight: 700;
- color: #bcd0ff;
- font-size: 1.05rem;
-}
-
-.popular__ranking button {
- background: rgba(255, 255, 255, 0.18);
- border: none;
- color: rgba(230, 235, 255, 0.85);
- font-size: 1.2rem;
- cursor: pointer;
- border-radius: 999px;
- width: 28px;
- height: 28px;
- display: grid;
- place-items: center;
- transition: background 0.18s ease, color 0.18s ease;
-}
-
-.popular__ranking button:hover {
- color: var(--danger);
- background: rgba(255, 122, 154, 0.25);
-}
-
-.popular__empty {
- margin: 0;
- color: rgba(198, 205, 255, 0.6);
-}
diff --git a/pubky-live-vote/src/components/PopularVoteBoard.tsx b/pubky-live-vote/src/components/PopularVoteBoard.tsx
deleted file mode 100644
index 7004859..0000000
--- a/pubky-live-vote/src/components/PopularVoteBoard.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { DragEvent, useMemo, useState } from 'react';
-import { useProjects } from '../context/ProjectContext';
-import './PopularVoteBoard.css';
-import './Panel.css';
-
-export const PopularVoteBoard = () => {
- const { projects, popularRanking, setPopularRanking, userProjectId, setUserProjectId } = useProjects();
- const [draggedId, setDraggedId] = useState
+
+ My project
++ Select your team to disable self-voting and exclude your project from submissions. +
+
+
+
+ Only one project can be selected per voter.
+
-
-
-
-
- );
-};
diff --git a/pubky-live-vote/src/components/ProjectCard.css b/pubky-live-vote/src/components/ProjectCard.css
index 65ab253..3a29c57 100644
--- a/pubky-live-vote/src/components/ProjectCard.css
+++ b/pubky-live-vote/src/components/ProjectCard.css
@@ -11,6 +11,17 @@
overflow: hidden;
}
+.project-card--own {
+ border-color: rgba(118, 132, 255, 0.22);
+ box-shadow: inset 0 0 0 1px rgba(97, 110, 184, 0.28);
+}
+
+.project-card--own:hover {
+ transform: none;
+ border-color: rgba(118, 132, 255, 0.22);
+ box-shadow: inset 0 0 0 1px rgba(97, 110, 184, 0.28);
+}
+
.project-card::before {
content: '';
position: absolute;
@@ -133,6 +144,11 @@
background-color: rgba(14, 17, 31, 0.9);
}
+.checkbox input:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
.project-card__comment {
display: grid;
gap: 0.45rem;
@@ -160,3 +176,16 @@
border-color: rgba(155, 168, 255, 0.65);
box-shadow: 0 0 0 3px rgba(121, 136, 255, 0.25);
}
+
+.project-card__comment textarea:disabled {
+ cursor: not-allowed;
+ background: linear-gradient(135deg, rgba(18, 20, 34, 0.68), rgba(14, 16, 28, 0.7));
+ border-color: rgba(131, 144, 255, 0.22);
+}
+
+.project-card__own-hint {
+ margin: 0;
+ margin-top: -0.4rem;
+ font-size: 0.85rem;
+ color: rgba(198, 205, 255, 0.65);
+}
diff --git a/pubky-live-vote/src/components/ProjectCard.tsx b/pubky-live-vote/src/components/ProjectCard.tsx
index 4ab9d95..2ccd366 100644
--- a/pubky-live-vote/src/components/ProjectCard.tsx
+++ b/pubky-live-vote/src/components/ProjectCard.tsx
@@ -11,6 +11,7 @@ interface Props {
onReadinessToggle: (projectId: string, ready: boolean) => void;
onCommentChange: (projectId: string, comment: string) => void;
onTagsChange: (projectId: string, tags: string[]) => void;
+ isOwnProject?: boolean;
}
const SCORE_LABELS: Record
-
- Popular Vote
-Rank up to five favourite projects. Self votes are blocked automatically.
-
-
-
-
-
-
-
-
- Available projects
--
- {selectableProjects.map((project) => (
-
- - - - ))} -
Ranking
--
- {popularRanking.map((projectId, index) => {
- const project = projects.find((item) => item.id === projectId);
- if (!project) return null;
- return (
-
- onDragStart(event, projectId)} - onDragOver={(event) => onDragOver(event, projectId)} - onDragEnd={onDragEnd} - > - #{index + 1} - {project.name} - - - ); - })} -
Select favourites to start ranking them.
} -{project.name}
@@ -65,20 +80,21 @@ export const ProjectCard = ({ project, onScoreChange, onReadinessToggle, onComme ) : null} -
@@ -89,13 +105,24 @@ export const ProjectCard = ({ project, onScoreChange, onReadinessToggle, onComme
value={project.comment ?? ''}
onChange={handleComment}
rows={3}
+ disabled={isOwnProject}
/>
+ You can't score or tag your own project. These fields stay read-only. +
+ )} ); }; diff --git a/pubky-live-vote/src/components/ProjectList.tsx b/pubky-live-vote/src/components/ProjectList.tsx index b1f40ad..31b8c99 100644 --- a/pubky-live-vote/src/components/ProjectList.tsx +++ b/pubky-live-vote/src/components/ProjectList.tsx @@ -15,7 +15,14 @@ const normalizeQuery = (query: string) => .replace(/\s+/g, ' '); export const ProjectList = ({ searchQuery = '' }: ProjectListProps) => { - const { projects, updateProjectScore, toggleReadiness, updateComment, updateTags } = useProjects(); + const { + projects, + updateProjectScore, + toggleReadiness, + updateComment, + updateTags, + userProjectId + } = useProjects(); const normalizedQuery = normalizeQuery(searchQuery); const sortedProjects = useMemo( @@ -67,6 +74,7 @@ export const ProjectList = ({ searchQuery = '' }: ProjectListProps) => { onReadinessToggle={toggleReadiness} onCommentChange={updateComment} onTagsChange={updateTags} + isOwnProject={project.id === userProjectId} /> ))} diff --git a/pubky-live-vote/src/components/ScoreSlider.css b/pubky-live-vote/src/components/ScoreSlider.css index 3c75a3c..36880d8 100644 --- a/pubky-live-vote/src/components/ScoreSlider.css +++ b/pubky-live-vote/src/components/ScoreSlider.css @@ -23,6 +23,27 @@ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); } +.slider--disabled .slider__label { + color: rgba(206, 214, 255, 0.45); +} + +.slider--disabled .slider__input input[type='range'] { + background: linear-gradient(90deg, rgba(42, 47, 78, 0.35), rgba(29, 32, 55, 0.2)); + cursor: not-allowed; +} + +.slider--disabled .slider__input input[type='range']::-webkit-slider-thumb, +.slider--disabled .slider__input input[type='range']::-moz-range-thumb { + background: rgba(120, 128, 168, 0.45); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; + cursor: not-allowed; +} + +.slider--disabled .slider__value { + color: rgba(214, 220, 255, 0.5); +} + .slider__input input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; diff --git a/pubky-live-vote/src/components/ScoreSlider.tsx b/pubky-live-vote/src/components/ScoreSlider.tsx index 61bb8e1..7db8c5d 100644 --- a/pubky-live-vote/src/components/ScoreSlider.tsx +++ b/pubky-live-vote/src/components/ScoreSlider.tsx @@ -5,6 +5,7 @@ interface Props { label: string; value: number; onChange: (value: number) => void; + disabled?: boolean; } const buildGradient = (value: number) => { @@ -12,11 +13,11 @@ const buildGradient = (value: number) => { return `linear-gradient(90deg, rgba(155, 168, 255, 0.92) ${percentage}%, rgba(47, 52, 80, 0.35) ${percentage}%)`; }; -export const ScoreSlider = ({ label, value, onChange }: Props) => { - const background = useMemo(() => buildGradient(value), [value]); +export const ScoreSlider = ({ label, value, onChange, disabled = false }: Props) => { + const background = useMemo(() => (disabled ? undefined : buildGradient(value)), [value, disabled]); return ( -