Fix votes rendering, popularity sorting, and language filters

.github/workflows/deploy.yml

@@ -29,10 +29,18 @@ jobs:
         steps:
             - uses: actions/checkout@v4
 
+            - name: 'Authenticate to Google Cloud'
+              id: auth
+              uses: 'google-github-actions/auth@v2'
+              with:
+                  workload_identity_provider: 'projects/84699750544/locations/global/workloadIdentityPools/github/providers/github'
+                  service_account: '[email protected]'
+                  create_credentials_file: true
+
             - name: Setup Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 24
                   cache: 'npm'
 
             - name: Install dependencies
@@ -42,6 +50,8 @@ jobs:
               run: npm run lint
 
             - name: Build project
+              env:
+                  GOOGLE_APPLICATION_CREDENTIALS: ${{ steps.auth.outputs.credentials_file_path }}
               run: npm run build
 
     deploy:
@@ -54,18 +64,20 @@ jobs:
             - uses: actions/checkout@v4
 
             - name: 'Authenticate to Google Cloud'
+              id: auth
               uses: 'google-github-actions/auth@v2'
               with:
                   workload_identity_provider: 'projects/84699750544/locations/global/workloadIdentityPools/github/providers/github'
                   service_account: '[email protected]'
+                  create_credentials_file: true
 
             - name: 'Set up Cloud SDK'
               uses: 'google-github-actions/setup-gcloud@v2'
 
             - name: Setup Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 24
                   cache: 'npm'
 
             - name: Install dependencies
@@ -75,6 +87,8 @@ jobs:
               run: npm run lint
 
             - name: Build project
+              env:
+                  GOOGLE_APPLICATION_CREDENTIALS: ${{ steps.auth.outputs.credentials_file_path }}
               run: npm run build
 
             - name: 'Configure Docker'
@@ -110,12 +124,10 @@ jobs:
               env:
                   GH_TOKEN: ${{ steps.generate_token.outputs.token }}
               run: |
-                  echo ${{ secrets.FIREBASE_TOKEN }} | base64 -d > ./credentials.json
                   echo "Building Docker Image with tag $IMAGE_NAME"
-                  docker build --build-arg GH_TOKEN=${{ env.GH_TOKEN }} \
-                    --build-arg PROJECT_ID=analysis-tools-dev \
+                  DOCKER_BUILDKIT=1 docker build --build-arg GH_TOKEN=${{ env.GH_TOKEN }} \
+                    --secret id=gcp_creds,src=${{ steps.auth.outputs.credentials_file_path }} \
                     -t ${IMAGE_NAME} .
-                  rm ./credentials.json
 
             - name: 'Push Docker Image'
               run: |

Dockerfile

@@ -1,22 +1,21 @@
-FROM node:20 as build
+FROM node:24 AS build
 WORKDIR /src
 
 COPY package.json package-lock.json /src/
 RUN npm ci
 
-ENV GOOGLE_APPLICATION_CREDENTIALS=/src/credentials.json
-ENV FIREBASE_PROJECT_ID=analysis-tools-dev
 ARG GH_TOKEN
-ARG PROJECT_ID
 
 COPY . /src
 
 # Build runs npm run build-data (prebuild hook) which fetches tools data
 # from GitHub repos and generates static JSON files, then runs next build
-RUN npm run build
-RUN rm /src/credentials.json
+# Uses BuildKit secret for Firestore credentials during build
+RUN --mount=type=secret,id=gcp_creds \
+    export GOOGLE_APPLICATION_CREDENTIALS=/run/secrets/gcp_creds && \
+    npm run build
 
-FROM node:20
+FROM node:24
 WORKDIR /src
 COPY --from=build /src /src
-ENTRYPOINT ["npm", "run", "start"]
+ENTRYPOINT ["npm", "run", "start"]

Makefile

@@ -10,6 +10,12 @@ dev: ## Run development server
 build: ## Build for production
 	npm run build
 
+.PHONY: docker-build
+docker-build: ## Build docker image with GCP credentials secret
+	@test -n "$(GOOGLE_APPLICATION_CREDENTIALS)" || (echo "GOOGLE_APPLICATION_CREDENTIALS must be set"; exit 1)
+	DOCKER_BUILDKIT=1 docker build --secret id=gcp_creds,src=$(GOOGLE_APPLICATION_CREDENTIALS) -t analysis-tools-dev .
+
+
 .PHONY: start
 start: ## Start Node server
 	npm run start

algolia-index.ts

@@ -85,6 +85,9 @@ function prepareDataForIndexing(toolsData: Tool[]): ApiTool[] {
         resources: tool.resources,
         wrapper: tool.wrapper,
         votes: tool.votes ?? 0,
+        upVotes: tool.upVotes,
+        downVotes: tool.downVotes,
+        upvotePercentage: tool.upvotePercentage,
         other: tool.other,
     }));
 

components/tools/listPage/ToolCard/ToolCard.tsx

@@ -140,13 +140,11 @@ const ToolCard: FC<ToolCardProps> = ({ tool }) => {
                             </span>
                         ))}
                     </li>
-                    {tool.upvotePercentage !== undefined && (
-                        <li>
-                            <span className={styles.metaInfo}>
-                                {tool.upvotePercentage}% upvoted
-                            </span>
-                        </li>
-                    )}
+                    <li>
+                        <span className={styles.metaInfo}>
+                            {tool.upvotePercentage}% upvoted
+                        </span>
+                    </li>
                 </ul>
             </div>
         </Card>

components/tools/listPage/ToolsSidebar/FilterCard/LanguageFilterCard.tsx

@@ -21,6 +21,7 @@ export interface LanguageFilterCardProps {
     options: LanguageFilterOption[];
     limit?: number;
     className?: string;
+    selectionMode?: 'checkbox' | 'radio';
 }
 
 const LanguageFilterCard: FC<LanguageFilterCardProps> = ({
@@ -30,6 +31,7 @@ const LanguageFilterCard: FC<LanguageFilterCardProps> = ({
     options,
     limit = 10,
     className,
+    selectionMode,
 }) => {
     const {
         search,
@@ -45,6 +47,8 @@ const LanguageFilterCard: FC<LanguageFilterCardProps> = ({
 
     // Fade out background when not showing all options
     const [faded, setFaded] = useState(styles.faded);
+    const isRadioMode =
+        selectionMode === 'radio' || heading === 'Popular Languages';
 
     const toggleAll = () => {
         if (listLimit === 999) {
@@ -61,8 +65,12 @@ const LanguageFilterCard: FC<LanguageFilterCardProps> = ({
         updateFilter(searchFilter, []);
     };
 
-    const handleCheckboxChange = (value: string) => {
+    const handleOptionChange = (value: string) => {
         const searchFilter = filter as SearchFilter;
+        if (isRadioMode) {
+            updateFilter(searchFilter, [value]);
+            return;
+        }
         toggleFilter(searchFilter, value);
     };
 
@@ -77,13 +85,14 @@ const LanguageFilterCard: FC<LanguageFilterCardProps> = ({
         return values !== undefined && values.length > 0;
     };
 
-    // Sort options: checked items first, then by count
+    // Sort options by popularity; keep radio selection from reordering items
     const sortedOptions = [...options].sort((a, b) => {
-        const aChecked = isChecked(a.value);
-        const bChecked = isChecked(b.value);
-        if (aChecked && !bChecked) return -1;
-        if (!aChecked && bChecked) return 1;
-        // Then sort by count
+        if (!isRadioMode) {
+            const aChecked = isChecked(a.value);
+            const bChecked = isChecked(b.value);
+            if (aChecked && !bChecked) return -1;
+            if (!aChecked && bChecked) return 1;
+        }
         const aCount = getLanguageCount(a.value);
         const bCount = getLanguageCount(b.value);
         return bCount - aCount;
@@ -129,13 +138,18 @@ const LanguageFilterCard: FC<LanguageFilterCardProps> = ({
                     return (
                         <li key={index}>
                             <Input
-                                type="checkbox"
+                                type={isRadioMode ? 'radio' : 'checkbox'}
+                                name={
+                                    isRadioMode
+                                        ? `radio_${filter}_${heading}`
+                                        : undefined
+                                }
                                 id={`checkbox_${filter}_${option.value}`}
                                 value={option.value}
                                 data-filter={filter}
                                 checked={isChecked(option.value)}
                                 onChange={() =>
-                                    handleCheckboxChange(option.value)
+                                    handleOptionChange(option.value)
                                 }
                             />
                             <label

components/tools/listPage/ToolsSidebar/ToolsSidebar.tsx

@@ -27,20 +27,24 @@ const ToolsSidebar: FC<ToolsSidebarProps> = ({
     languages,
     others,
 }) => {
+    const mergedLanguageOptions = [
+        ...LANGUAGE_OPTIONS,
+        ...languages.filter(
+            (option) =>
+                !LANGUAGE_OPTIONS.some(
+                    (popular) => popular.value === option.value,
+                ),
+        ),
+    ];
+
     return (
         <Sidebar className={styles.bottomSticky}>
             <LanguageFilterCard
                 className={styles.filter}
-                heading="Popular Languages"
-                showAllCheckbox={false}
-                filter="languages"
-                options={LANGUAGE_OPTIONS}
-            />
-            <LanguageFilterCard
-                className={styles.filter}
-                heading="All Languages"
+                heading="Languages"
                 filter="languages"
-                options={languages || []}
+                options={mergedLanguageOptions}
+                selectionMode="radio"
             />
             <FilterCard
                 showAllCheckbox={false}

components/tools/toolPage/ToolInfoSidebar/InformationCard/InformationCard.tsx

@@ -34,15 +34,11 @@ const InformationCard: FC<InformationCardProps> = ({ tool }) => {
                 Information
             </Heading>
 
-            {tool.upVotes && tool.downVotes && (
-                <InfoEntry
-                    label={'Votes'}
-                    id="votes"
-                    value={`${tool.votes} (${Math.round(
-                        (tool.upVotes / (tool.upVotes + tool.downVotes)) * 100,
-                    )}% upvotes)`}
-                />
-            )}
+            <InfoEntry
+                label={'Votes'}
+                id="votes"
+                value={`${tool.votes} (${tool.upvotePercentage}% upvotes)`}
+            />
 
             {tool.installation && (
                 <InfoEntry

components/tools/types.ts

@@ -43,9 +43,9 @@ export interface Tool {
     resources: ToolResource[] | null;
     wrapper: string | null;
     votes: number;
-    upVotes?: number;
-    downVotes?: number;
-    upvotePercentage?: number;
+    upVotes: number;
+    downVotes: number;
+    upvotePercentage: number;
     views?: number;
     installation?: string;
     documentation?: string;

components/widgets/VoteWidget/VoteWidget.tsx

@@ -45,7 +45,7 @@ const VoteWidget: FC<VoteWidgetProps> = ({
             </div>
         );
     }
-    if (error || !votesData) {
+    if (error) {
         return null;
     }
 

components/widgets/VoteWidget/query.ts

@@ -44,7 +44,7 @@ export async function fetchToolVotesData(
 ): Promise<APIResponseType<VotesData | null>> {
     try {
         const voteApiURL = `${getApiURL(APIPaths.VOTES)}/${toolId}`;
-        const response = await fetch(voteApiURL);
+        const response = await fetch(voteApiURL, { cache: 'no-store' });
         return await response.json();
     } catch (error) {
         return {

context/ToolsProvider.tsx

@@ -137,6 +137,16 @@ function searchToQueryString(search: SearchState): string {
 function sortTools(tools: Tool[], sorting?: string): Tool[] {
     const sorted = [...tools];
 
+    const popularityCompare = (a: Tool, b: Tool) => {
+        const deprecatedDiff = Number(a.deprecated) - Number(b.deprecated);
+        if (deprecatedDiff !== 0) return deprecatedDiff;
+
+        const upvoteDiff = b.upvotePercentage - a.upvotePercentage;
+        if (upvoteDiff !== 0) return upvoteDiff;
+
+        return b.votes - a.votes;
+    };
+
     switch (sorting) {
         case 'votes_asc':
             return sorted.sort((a, b) => (a.votes || 0) - (b.votes || 0));
@@ -145,6 +155,9 @@ function sortTools(tools: Tool[], sorting?: string): Tool[] {
         case 'alphabetical_desc':
             return sorted.sort((a, b) => b.name.localeCompare(a.name));
         case 'most_popular':
+            return sorted.sort(popularityCompare);
+        case 'least_popular':
+            return sorted.sort((a, b) => -popularityCompare(a, b));
         case 'votes_desc':
         default:
             return sorted.sort((a, b) => (b.votes || 0) - (a.votes || 0));
@@ -156,10 +169,21 @@ function filterTools(tools: Tool[], search: SearchState): Tool[] {
     return tools.filter((tool) => {
         // Languages filter
         if (search.languages && search.languages.length > 0) {
-            const hasLanguage = search.languages.some((lang) =>
-                tool.languages?.includes(lang),
-            );
-            if (!hasLanguage) return false;
+            if (search.languages.length === 1) {
+                const [language] = search.languages;
+                const isSingleLanguageTool = tool.languages?.length === 1;
+                if (
+                    !isSingleLanguageTool ||
+                    !tool.languages?.includes(language)
+                ) {
+                    return false;
+                }
+            } else {
+                const hasLanguage = search.languages.some((lang) =>
+                    tool.languages?.includes(lang),
+                );
+                if (!hasLanguage) return false;
+            }
         }
 
         // Others filter