feat(ktl-2781): implement filtering for cases

Author: berezinant

blocks/case-studies/card/case-studies-card.module.css

@@ -7,7 +7,6 @@
   background: #fff;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
   border: 1px solid rgba(0,0,0,0.12);
-  max-width: 500px;
   box-sizing: border-box;
 }
 

blocks/case-studies/card/case-studies-card.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './case-studies-card.module.css';
 import { AndroidIcon, AppleIcon, ServerIcon, ComputerIcon, GlobusIcon } from '@rescui/icons';
-import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, Platform } from '../case-studies';
-
+import { CaseItem, CaseType, isExternalCase, CasePlatform } from '../case-studies';
 
 /**
  * Resolve asset path from YAML:
@@ -38,30 +37,30 @@ const mdToHtml = (md: string) => {
     return withLinks;
 };
 
-const badgeText: Record<CaseStudyType, string> = {
+const badgeText: Record<CaseType, string> = {
     'multiplatform': 'Kotlin Multiplatform',
     'server-side': 'Server-side'
 };
 
-const badgeClass: Record<CaseStudyType, string> = {
+const badgeClass: Record<CaseType, string> = {
     'multiplatform': 'badgeMultiplatform',
     'server-side': 'badgeServerSide'
 };
 
 // Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
 // they’ll be resolved automatically by key. If an icon is missing, we still render the label.
-const getPlatformIcon = (p: Platform) => {
+const getPlatformIcon = (p: CasePlatform) => {
     switch (p) {
         case 'android':
-            return <AndroidIcon/>;
+            return <AndroidIcon />;
         case 'ios':
-            return <AppleIcon/>;
+            return <AppleIcon />;
         case 'desktop':
-            return <ComputerIcon/>;
+            return <ComputerIcon />;
         case 'frontend':
-            return <GlobusIcon/>;
+            return <GlobusIcon />;
         case 'backend':
-            return <ServerIcon/>;
+            return <ServerIcon />;
         case 'compose-multiplatform':
             return <img className={styles.platformIcon} src={'/images/platforms/compose-multiplatform.svg'}
                         alt="Compose Multiplatform icon"
@@ -71,12 +70,11 @@ const getPlatformIcon = (p: Platform) => {
     }
 };
 
-type Props = {
-    item: CaseStudyItem;
+type Props = CaseItem &{
     className?: string;
 };
 
-export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
+export const CaseStudyCard: React.FC<Props> = ({ className, ...item }) => {
     const logos = item.logo ?? [];
     const logoSrc1 = resolveAssetPath(logos[0]);
     const logoSrc2 = resolveAssetPath(logos[1]);
@@ -159,7 +157,7 @@ export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
                     })}
                 </div>
             )}
-            {(isExternalCaseStudy(item)) ? (
+            {(isExternalCase(item)) ? (
                 <div className={styles.actions}>
                     {item.externalLink && (
                         <a
@@ -218,14 +216,10 @@ function hideBrokenIcon(img: HTMLImageElement) {
 /**
  * Humanize platform name for label.
  */
-function humanizePlatform(p: Platform): string {
+function humanizePlatform(p: CasePlatform): string {
     switch (p) {
         case 'compose-multiplatform':
             return 'Compose Multiplatform';
-        case 'frontend':
-            return 'Frontend';
-        case 'backend':
-            return 'Backend';
         case 'ios':
             return 'iOS';
         default:

blocks/case-studies/filter/case-studies-filter.module.css

@@ -1,49 +1,42 @@
-.wrapper {
-  padding: 32px 0;
-  color: #ffffff; /* ensure white text */
-}
-
-.title {
-  margin: 0 0 16px 0;
-  color: inherit;
-}
-
-.inner {
+.content {
+  padding: 24px 0 72px;
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 80px;
+  grid-template-areas:
+    "group1 group1"
+    "group2 group3";
+  @media (width <= 1000px) {
+    display: block;
+    grid-template-columns: unset;
+    grid-template-areas: unset;
+  }
 }
 
-.group {
-  background: #0f0f0f;
-  border-radius: 12px;
-  padding: 16px;
+.group:first-child {
+  grid-area: group1;
 }
 
-.groupType {
-  /* will span both columns on desktop */
+.group:not(:last-child) {
+  margin-bottom: 32px;
 }
 
 .groupTitle {
-  margin: 0 0 12px 0;
-  color: inherit;
+  margin: 0 0 8px;
 }
 
 .checkboxes {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
   align-items: center;
+  gap: 8px 24px;
 }
 
-.switcherSmall {
-}
+.checkbox {
+  display: flex;
+  align-items: center;
 
-@media (min-width: 768px) {
-  .inner {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .groupType {
-    grid-column: 1 / -1;
+  & span + span {
+    display: flex;
+    gap: 8px;
   }
 }

blocks/case-studies/filter/case-studies-filter.tsx

@@ -1,113 +1,96 @@
-import React, { useCallback, useId, useMemo, useState } from 'react';
+import cn from 'classnames';
+import React from 'react';
 import Switcher from '@rescui/switcher';
 import Checkbox from '@rescui/checkbox';
 import { createTextCn } from '@rescui/typography';
-import '@jetbrains/kotlin-web-site-ui/out/components/layout';
 import styles from './case-studies-filter.module.css';
+import { CasePlatform, CaseType, CaseTypeSwitch, PlatformNames, Platforms } from '../case-studies';
+import { useQueryState } from '../../../hooks';
+import { parseCompose, parsePlatforms, parseType, serializeCompose, serializePlatforms, serializeType } from '../utils';
+
+const caseTypeOptions: Array<{ value: CaseTypeSwitch, label: string }> = [
+    { value: 'all', label: 'All' },
+    { value: 'multiplatform', label: 'Kotlin Multiplatform' },
+    { value: 'server-side', label: 'Server-side' }
+];
 
 export const CaseStudiesFilter: React.FC = () => {
     const darkTextCn = createTextCn('dark');
-    // Case study type switcher
-    const typeOptions = useMemo(
-        () => [
-            { value: 'all', label: 'All' },
-            { value: 'kotlin-multiplatform', label: 'Kotlin Multiplatform' },
-            { value: 'server-side', label: 'Server-side' },
-        ], []
-    );
-    const [type, setType] = useState<string>('all');
-    const onTypeChange = useCallback((value: string) => setType(value), []);
 
-    // Code shared across (checkboxes)
-    const codeSharedOptions = useMemo(
-        () => [
-            { id: 'android', label: 'Android' },
-            { id: 'ios', label: 'iOS' },
-            { id: 'desktop', label: 'Desktop' },
-            { id: 'frontend', label: 'Frontend' },
-            { id: 'backend', label: 'Backend' },
-        ], []
-    );
-    const [codeShared, setCodeShared] = useState<string[]>([]);
-    const toggleCodeShared = useCallback((id: string) => {
-        setCodeShared((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-    }, []);
+    // State synchronized with URL
+    const [type, setType] = useQueryState<CaseTypeSwitch>('type', parseType, serializeType);
+    const [platforms, setPlatforms] = useQueryState<CasePlatform[]>('platforms', parsePlatforms, serializePlatforms);
+    const [compose, setCompose] = useQueryState<boolean>('compose', parseCompose, serializeCompose);
 
-    // UI Technology (checkboxes)
-    const uiTechOptions = useMemo(
-        () => [
-            { id: 'built-with-compose-multiplatform', label: 'Built with Compose Multiplatform' },
-        ], []
-    );
-    const [uiTech, setUiTech] = useState<string[]>([]);
-    const toggleUiTech = useCallback((id: string) => {
-        setUiTech((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-    }, []);
+    const togglePlatform = (id: CasePlatform) => {
+        let nextPlatforms = platforms.includes(id)
+            ? platforms.filter((x) => x !== id)
+            : [...platforms, id];
+        if (nextPlatforms.length === 0) {
+            // If user unchecks all, reset to all selected
+            nextPlatforms = [...Platforms];
+        }
+        setPlatforms(nextPlatforms);
+    };
+
+    const toggleCompose = () => {
+        const nextCompose = !compose;
+        setCompose(nextCompose, () => setType('multiplatform'));
+    };
 
-    // for accessibility ids
-    const typeTitleId = useId();
-    const codeSharedTitleId = useId();
-    const uiTechTitleId = useId();
+    const showKmpFilters = type === 'multiplatform' || type === 'all';
 
     return (
-        <section data-testid="case-studies-filter" aria-label="Case Studies Filter" className={styles.wrapper}>
-            <div className={'ktl-layout ktl-layout--center'}>
-                <h2 className={styles.title}>
-                    <span className={darkTextCn('rs-h4')}>Filters</span>
-                </h2>
-                <div className={styles.inner}>
-                    {/* Case study type */}
-                    <div className={`${styles.group} ${styles.groupType}`} role="group" aria-labelledby={typeTitleId} data-test="filter-type">
-                        <h3 id={typeTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Case study type</span></h3>
-                        <div className={styles.switcherSmall}>
-                            <Switcher mode={'rock'} value={type} onChange={onTypeChange} options={typeOptions} />
-                        </div>
-                    </div>
+        <section className="ktl-layout ktl-layout--center" data-testid="case-studies-filter"
+                 aria-label="Case Studies Filter">
+            <div className={styles.content}>
+                <div className={styles.group} role="group" aria-labelledby="case-study-type-title"
+                     data-test="filter-type">
+                    <h3 id="case-study-type-title" className={cn(styles.groupTitle, darkTextCn('rs-h4'))}>Case study
+                        type</h3>
+                    <Switcher mode={'rock'} value={type} onChange={setType} options={caseTypeOptions} />
+                </div>
 
-                    {/* Code shared across */}
-                    <div className={styles.group} role="group" aria-labelledby={codeSharedTitleId} data-test="filter-code-shared">
-                        <h3 id={codeSharedTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Code shared across</span></h3>
+                {showKmpFilters && (
+                    <div className={styles.group} role="group" aria-labelledby="code-shared-across-titile"
+                         data-test="filter-code-shared">
+                        <h3 id="code-shared-across-titile"
+                            className={cn(styles.groupTitle, darkTextCn('rs-h4'))}>Code shared across</h3>
                         <div className={styles.checkboxes}>
-                            {codeSharedOptions.map((opt) => {
-                                const id = `code-shared-${opt.id}`;
-                                const checked = codeShared.includes(opt.id);
-                                return (
-                                    <Checkbox
-                                        key={opt.id}
-                                        checked={checked}
-                                        onChange={() => toggleCodeShared(opt.id)}
-                                        mode="classic"
-                                        size="m"
-                                    >
-                                        {opt.label}
-                                    </Checkbox>
-                                );
-                            })}
+                            {Platforms.map((platformId) =>
+                                <Checkbox
+                                    key={platformId}
+                                    checked={platforms.includes(platformId)}
+                                    onChange={() => togglePlatform(platformId)}
+                                    mode="classic"
+                                    size="m"
+                                >
+                                    {PlatformNames[platformId]}
+                                </Checkbox>
+                            )}
                         </div>
                     </div>
+                )}
 
-                    {/* UI technology */}
-                    <div className={styles.group} role="group" aria-labelledby={uiTechTitleId} data-test="filter-ui-technology">
-                        <h3 id={uiTechTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>UI technology</span></h3>
+                {showKmpFilters && (
+                    <div className={styles.group} role="group" aria-labelledby="ui-technology-title"
+                         data-test="filter-ui-technology">
+                        <h3 id="ui-technology-title"
+                            className={cn(styles.groupTitle, darkTextCn('rs-h4'))}>UI&nbsp;technology</h3>
                         <div className={styles.checkboxes}>
-                            {uiTechOptions.map((opt) => {
-                                const id = `ui-tech-${opt.id}`;
-                                const checked = uiTech.includes(opt.id);
-                                return (
-                                    <Checkbox
-                                        key={opt.id}
-                                        checked={checked}
-                                        onChange={() => toggleUiTech(opt.id)}
-                                        mode="classic"
-                                        size="m"
-                                    >
-                                        {opt.label}
-                                    </Checkbox>
-                                );
-                            })}
+                            <Checkbox
+                                className={styles.checkbox}
+                                checked={compose}
+                                onChange={toggleCompose}
+                                mode="classic"
+                                size="m"
+                            >
+                                Built with Compose Multiplatform <img
+                                src="/images/case-studies/compose-multiplatform.svg" alt="" />
+                            </Checkbox>
                         </div>
                     </div>
-                </div>
+                )}
             </div>
         </section>
     );