feat: some finishing touches before release (#16)

* fix: author avatar not cropping in a circle

* feat: news article date

* feat: add selector style for current page

* fix: nested border-radius rule

external border-radius is internal border-radius + padding

* feat: add margin-right to news entry date when hovering

* feat: add channel to YARG ReleaseData

* fix: mac icon to use apple guideline

https://developer.apple.com/design/human-interface-guidelines/app-icons

package.json

@@ -45,6 +45,7 @@
  "@tauri-apps/api": "^1.3.0",
  "@types/lodash": "^4.14.195",
  "async-wait-until": "^2.0.12",
+ "date-fns": "^2.30.0",
  "dompurify": "^3.0.4",
  "gray-matter": "^4.0.3",
  "lodash": "^4.17.21",

src/components/NewsSection/NewsEntry/NewsEntry.module.css

@@ -7,7 +7,7 @@
  margin: 8px 0px 8px 0px;
 
  background: rgba(0, 0, 0, 0);
- border-radius: 8px;
+ border-radius: 20px; /* 8px (internal border-radius) + 12px (padding) */
 
  transition: background 0.1s;
 }
@@ -73,4 +73,18 @@
  height: 100px;
  align-self: stretch;
  background: #D9D9D9;
+}
+
+.releaseDate {
+ color: #ACACAC;
+ font-size: 12px;
+ font-weight: 400;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ transition: margin-right 0.1s;
+}
+
+.container:hover .releaseDate {
+ margin-right: 1em;
 }

src/components/NewsSection/NewsEntry/index.tsx

@@ -4,6 +4,8 @@ import { ArticleData } from "@app/hooks/useNews";
 import { Link } from "react-router-dom";
 import { Img } from "react-image";
 import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
+import { TimeIcon } from "@app/assets/Icons";
+import { intlFormatDistance } from "date-fns";
 
 interface Props {
  article: ArticleData;
@@ -17,6 +19,14 @@ const NewsEntry: React.FC<Props> = ({ article }: Props) => {
  <div className={styles.top_container}>
  <div className={styles.top}>
  <NewsBadge>{article.type}</NewsBadge>
+ {
+ article.release ? (
+ <div className={styles.releaseDate}>
+ <TimeIcon height={15}/>
+ { intlFormatDistance(new Date(article.release), new Date()) }
+ </div>
+ ) : ""
+ }
  </div>
  {article.title}
  </div>
@@ -25,6 +35,7 @@ const NewsEntry: React.FC<Props> = ({ article }: Props) => {
  height={24}
  alt={`${article.author}'s avatar`}
  src={[`https://raw.githubusercontent.com/YARC-Official/News/master/images/avatars/${article.avatar}`, UnknownUserIcon]}
+ style={{borderRadius: "50%"}}
  />
  <div>
  By: <span className={styles.author}>{article.author}</span>

src/components/Queue/QueueEntry/YARG.tsx

@@ -1,18 +1,26 @@
 import { YARGDownload } from "@app/utils/Download/Processors/YARG";
 import BaseQueue from "./base";
-import YARGIcon from "@app/assets/StableYARGIcon.png";
+import StableYARGIcon from "@app/assets/StableYARGIcon.png";
+import NightlyYARGIcon from "@app/assets/NightlyYARGIcon.png";
+import { YARGChannels } from "@app/hooks/useYARGRelease";
 
 interface Props {
  downloader: YARGDownload,
  bannerMode: boolean,
 }
 
 const YARGQueue: React.FC<Props> = ({ downloader, bannerMode }: Props) => {
+
+ const channelIconPath: {[key in YARGChannels]: string} = {
+ "stable": StableYARGIcon,
+ "nightly": NightlyYARGIcon
+ };
+
  return <BaseQueue
  name="YARG"
- icon={<img src={YARGIcon} />}
+ icon={<img src={ channelIconPath[downloader.channel] } />}
  version={downloader.version}
- versionChannel="TODO"
+ versionChannel={downloader.channel.toUpperCase()}
  bannerMode={bannerMode}
  />;
 };

src/components/Sidebar/Versions/Setlist.tsx

@@ -1,7 +1,7 @@
 import { SetlistID, useSetlistRelease } from "@app/hooks/useSetlistRelease";
 import { SetlistStates, useSetlistData } from "@app/hooks/useSetlistData";
 import BaseVersion, { VersionType } from "./Base";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import OfficialIcon from "@app/assets/SourceIcons/Official.png";
 
 interface Props {
@@ -13,15 +13,15 @@ const SetlistVersion: React.FC<Props> = ({ channel }: Props) => {
  const { state } = useSetlistData(setlistData);
 
  return (
- <Link to={"/setlist/" + channel}>
+ <NavLink to={"/setlist/" + channel}>
  <BaseVersion
  icon={<img src={OfficialIcon} />} // TO-DO: create a util/sourceIcon to get source icon from 
  type={VersionType.SONG}
  programName={setlistData?.locales["en-US"].title} // TO-DO: catch the BCP 47 code
  versionChannel={`${setlistData?.songs?.length} songs`}
  updateAvailable={state === SetlistStates.NEW_UPDATE}
  />
- </Link>
+ </NavLink>
  );
 };
 

src/components/Sidebar/Versions/YARG.tsx

@@ -3,7 +3,7 @@ import { YARGStates, useYARGVersion } from "@app/hooks/useYARGVersion";
 import BaseVersion from "./Base";
 import NightlyYARGIcon from "@app/assets/NightlyYARGIcon.png";
 import StableYARGIcon from "@app/assets/StableYARGIcon.png";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 interface Props {
  channel: "stable" | "nightly";
@@ -32,15 +32,15 @@ const YARGVersion: React.FC<Props> = ({ channel }: Props) => {
  }
 
  return (
- <Link to={"/yarg/" + channel}>
+ <NavLink to={"/yarg/" + channel}>
  <BaseVersion
  icon={<img src={getChannelIcon()} alt="YARG" />}
  programName="YARG"
  versionChannel={getChannelDisplayName()}
  version={releaseData?.tag_name}
  updateAvailable={state === YARGStates.NEW_UPDATE}
  />
- </Link>
+ </NavLink>
  );
 };
 

src/components/Sidebar/Versions/styles/Application.module.css

@@ -3,14 +3,16 @@
  gap: 10px;
  align-items: center;
  --border-radius: 8px;
+ --padding: 5px;
 
- padding: 5px;
+ padding: var(--padding);
  background: rgba(255, 255, 255, 0);
- border-radius: var(--border-radius);
+ border-radius: calc(var(--border-radius) + var(--padding));
 
  transition: background 0.1s;
 }
 
+[aria-current="page"] > .selector,
 .selector:hover {
  background: rgba(255, 255, 255, 0.025);
 }

src/components/Sidebar/Versions/styles/Song.module.css

@@ -3,14 +3,16 @@
  gap: 10px;
  align-items: center;
  --border-radius: 8px;
+ --padding: 5px;
 
- padding: 5px;
+ padding: var(--padding);
  background: rgba(255, 255, 255, 0);
- border-radius: var(--border-radius);
+ border-radius: calc(var(--border-radius) + var(--padding));
 
  transition: background 0.1s;
 }
 
+[aria-current="page"] > .selector,
 .selector:hover {
  background: rgba(255, 255, 255, 0.025);
 }

src/hooks/useYARGRelease.ts

@@ -2,20 +2,26 @@ import { useQuery } from "@tanstack/react-query";
 import { Endpoints } from "@octokit/types";
 import { invoke } from "@tauri-apps/api/tauri";
 
-export type ReleaseData = Endpoints["GET /repos/{owner}/{repo}/releases/latest"]["response"]["data"];
+export type YARGChannels = "stable"|"nightly";
 
-export const useYARGRelease = (version: "stable" | "nightly") => {
+type ReleaseData = Endpoints["GET /repos/{owner}/{repo}/releases/latest"]["response"]["data"];
+export type ExtendedReleaseData = ReleaseData & {
+ channel: YARGChannels
+};
+
+export const useYARGRelease = (channel: YARGChannels) => {
  const repositoryName = {
  "stable": "YARG",
  "nightly": "YARG-BleedingEdge"
  };
 
  return useQuery({
- queryKey: ["YARG", version],
+ queryKey: ["YARG", channel],
  queryFn: async (): Promise<ReleaseData> => await fetch(
- `https://api.github.com/repos/YARC-Official/${repositoryName[version]}/releases/latest`)
- .then(res => res.json())
- }).data as ReleaseData;
+ `https://api.github.com/repos/YARC-Official/${repositoryName[channel]}/releases/latest`)
+ .then(res => res.json()),
+ select: (data): ExtendedReleaseData => ({...data, channel: channel})
+ }).data as ExtendedReleaseData;
 };
 
 export const getYARGReleaseZip = async (releaseData: ReleaseData) => {

src/hooks/useYARGVersion.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { ReleaseData, getYARGReleaseZip, getYARGReleaseSig } from "./useYARGRelease";
+import { ExtendedReleaseData, getYARGReleaseZip, getYARGReleaseSig } from "./useYARGRelease";
 import { invoke } from "@tauri-apps/api/tauri";
 import { useYARGState } from "@app/stores/YARGStateStore";
 import { useDownloadClient } from "@app/utils/Download/provider";
@@ -24,7 +24,7 @@ export type YARGVersion = {
  payload?: DownloadPayload
 }
 
-export const useYARGVersion = (releaseData: ReleaseData, profileName: string) => {
+export const useYARGVersion = (releaseData: ExtendedReleaseData, profileName: string) => {
  const { state, setState } = useYARGState(releaseData?.tag_name);
 
  const downloadClient = useDownloadClient();
@@ -83,6 +83,7 @@ export const useYARGVersion = (releaseData: ReleaseData, profileName: string) =>
  const downloader = new YARGDownload(
  zipUrl,
  sigUrl,
+ releaseData.channel,
  releaseData.tag_name,
  profileName,
  () => { setState(YARGStates.AVAILABLE); }

src/routes/NewsPage/NewsPage.module.css

@@ -68,6 +68,7 @@
  height: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
+ overflow: hidden;
 }
 
 .author .authorInformation {

src/routes/NewsPage/index.tsx

@@ -9,6 +9,7 @@ import { CSSProperties } from "react";
 import { BackIcon, TimeIcon } from "@app/assets/Icons";
 import { Img } from "react-image";
 import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
+import { intlFormatDistance } from "date-fns";
 
 function NewsPage() {
  const { md } = useParams();
@@ -49,10 +50,14 @@ function NewsPage() {
  <div className={styles.authorRole}>{articleData.role}</div>
  </div>
  </div>
- {/* <div className={styles.releaseDate}>
- <TimeIcon />
- 16 minutes ago
- </div> */}
+ {
+ articleData.release ? (
+ <div className={styles.releaseDate}>
+ <TimeIcon />
+ { intlFormatDistance(new Date(articleData.release), new Date()) }
+ </div>
+ ) : ""
+ }
  </div>
  <SanitizedHTML dirtyHTML={marked.parse(content)} />
  </div>

src/utils/Download/Processors/YARG.tsx

@@ -1,18 +1,21 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { BaseDownload, IBaseDownload } from "./base";
 import YARGQueue from "@app/components/Queue/QueueEntry/YARG";
+import { YARGChannels } from "@app/hooks/useYARGRelease";
 
 export class YARGDownload extends BaseDownload implements IBaseDownload {
  zipUrl: string;
  sigUrl?: string;
+ channel: YARGChannels;
  version: string;
  profile: string;
  onFinish: () => void;
 
- constructor(zipUrl: string, sigUrl: string | undefined, version: string, profile: string, onFinish: () => void) {
+ constructor(zipUrl: string, sigUrl: string | undefined, channel: YARGChannels, version: string, profile: string, onFinish: () => void) {
  super(generateYARGUUID(version));
  this.zipUrl = zipUrl;
  this.sigUrl = sigUrl;
+ this.channel = channel;
  this.version = version;
  this.profile = profile;
  this.onFinish = onFinish;