Add color sort to cmdk menu

src/app/AppViewSwitcher.tsx

@@ -52,7 +52,10 @@ export default function AppViewSwitcher({
     invalidateSwr,
   } = useAppState();
 
-  const sortConfig = useMemo(() => getSortStateFromPath(pathname), [pathname]);
+  const sortConfig = useMemo(
+    () => getSortStateFromPath(pathname, appText),
+    [pathname, appText],
+  );
 
   const {
     sortBy,

src/cmdk/CommandKClient.tsx

@@ -59,6 +59,7 @@ import { formatCount, formatCountDescriptive } from '@/utility/string';
 import CommandKItem from './CommandKItem';
 import {
   CATEGORY_VISIBILITY,
+  COLOR_SORT_ENABLED,
   GRID_HOMEPAGE_ENABLED,
   HIDE_TAGS_WITH_ONE_PHOTO,
 } from '@/app/config';
@@ -148,6 +149,8 @@ export default function CommandKClient({
 } & PhotoSetCategories) {
   const pathname = usePathname();
 
+  const appText = useAppText();
+
   const {
     isUserSignedIn,
     clearAuthStateAndRedirectIfNecessary,
@@ -182,17 +185,22 @@ export default function CommandKClient({
   const {
     doesPathOfferSort,
     isSortedByDefault,
+    isAscending,
+    isTakenAt,
+    isUploadedAt,
+    isColor,
+    descendingLabel,
+    ascendingLabel,
     pathDescending,
     pathAscending,
     pathTakenAt,
     pathUploadedAt,
+    pathColor,
     pathClearSort,
-    isAscending,
-    isTakenAt,
-    isUploadedAt,
-  } = useMemo(() => getSortStateFromPath(pathname), [pathname]);
-
-  const appText = useAppText();
+  } = useMemo(
+    () => getSortStateFromPath(pathname, appText),
+    [pathname, appText],
+  );
 
   const isOpenRef = useRef(isOpen);
 
@@ -525,11 +533,11 @@ export default function CommandKClient({
   }
 
   const sortItems = [{
-    label: appText.sort.newestFirst,
+    label: descendingLabel,
     path: pathDescending,
     annotation: renderCheck(!isAscending),
   }, {
-    label: appText.sort.oldestFirst,
+    label: ascendingLabel,
     path: pathAscending,
     annotation: renderCheck(isAscending),
   }, {
@@ -542,6 +550,14 @@ export default function CommandKClient({
     annotation: renderCheck(isUploadedAt),
   }];
 
+  if (COLOR_SORT_ENABLED) {
+    sortItems.push({
+      label: appText.sort.byColor,
+      path: pathColor,
+      annotation: renderCheck(isColor),
+    });
+  }
+
   if (!isSortedByDefault) {
     sortItems.push({
       label: appText.sort.clearSort,

src/photo/sort/SortMenu.tsx

@@ -13,6 +13,8 @@ export default function SortMenu({
   isTakenAt,
   isUploadedAt,
   isColor,
+  descendingLabel,
+  ascendingLabel,
   pathDescending,
   pathAscending,
   pathTakenAt,
@@ -37,14 +39,14 @@ export default function SortMenu({
   
   const itemsSortOrder = [{
     ...renderLabel(
-      isColor ? appText.sort.descending : appText.sort.newest,
+      descendingLabel,
       !isAscending,
     ),
     icon: renderIcon(!isAscending),
     href: pathDescending,
   }, {
     ...renderLabel(
-      isColor ? appText.sort.ascending : appText.sort.oldest,
+      ascendingLabel,
       isAscending,
     ),
     icon: renderIcon(isAscending),

src/photo/sort/path.ts

@@ -17,6 +17,7 @@ import {
   GRID_HOMEPAGE_ENABLED,
   USER_DEFAULT_SORT_WITH_PRIORITY,
 } from '@/app/config';
+import { AppTextState } from '@/i18n/state';
 
 const getSortByComponents = (sortBy: SortBy): {
   sortType: string
@@ -111,7 +112,10 @@ const getPathSortComponents = (pathname: string) => {
   };
 };
 
-export const getSortStateFromPath = (pathname: string) => {
+export const getSortStateFromPath = (
+  pathname: string,
+  appText: AppTextState,
+) => {
   const doesPathOfferSort = _doesPathOfferSort(pathname);
 
   const {
@@ -130,6 +134,14 @@ export const getSortStateFromPath = (pathname: string) => {
   const isUploadedAt = sortType === PARAM_SORT_TYPE_UPLOADED_AT;
   const isColor = sortType === PARAM_SORT_TYPE_COLOR;
 
+  const descendingLabel = isColor
+    ? appText.sort.descending
+    : appText.sort.newestFirst;
+
+  const ascendingLabel = isColor
+    ? appText.sort.ascending
+    : appText.sort.oldestFirst;
+
   const getPath = ({
     gridOrFull = _gridOrFull,
     sortType,
@@ -187,6 +199,8 @@ export const getSortStateFromPath = (pathname: string) => {
     isTakenAt,
     isUploadedAt,
     isColor,
+    descendingLabel,
+    ascendingLabel,
     pathGrid,
     pathFull,
     pathDescending,