From 7524c746a63b6ff45fd1df38fd6f50360130f451 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Sat, 1 Jun 2024 00:02:01 +0200
Subject: [PATCH] feat(docs): shinify roadmap (#9916)

Shinify roadmap

Co-authored-by: jrasm91 <jrasm91@gmail.com>
---
 docs/src/components/timeline.tsx | 17 +++++--
 docs/src/pages/roadmap.tsx       | 86 ++++++++++++++++++++++++++++----
 2 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/docs/src/components/timeline.tsx b/docs/src/components/timeline.tsx
index 8150d0038a..33b733a6c9 100644
--- a/docs/src/components/timeline.tsx
+++ b/docs/src/components/timeline.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 
 export type Item = {
   icon: string;
+  iconColor: string;
   title: string;
   description?: string;
   link?: { url: string; text: string };
@@ -45,11 +46,17 @@ export function Timeline({ items }: Props): JSX.Element {
               {<Icon path={timelineIcon} size={1.25} />}
             </div>
             <section className=" dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl flex flex-row w-full gap-2 p-4 md:ml-4 my-2 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 transition-all">
-              <div className="flex-col flex-grow items-center justify-between gap-2">
-                <p className="m-0 mb-2 text-lg items-start flex gap-2">
-                  <Icon path={cardIcon} size={1} />
-                  <span>{item.title}</span>
-                </p>
+              <div className="flex flex-col flex-grow justify-between gap-2">
+                <div className="flex gap-2 items-center">
+                  {cardIcon === 'immich' ? (
+                    <img src="img/immich-logo.svg" height="30" />
+                  ) : (
+                    <Icon path={cardIcon} size={1} color={item.iconColor} />
+                  )}
+                  <p className="m-0 mt-1 text-lg items-start flex gap-2 place-items-center content-center">
+                    <span>{item.title}</span>
+                  </p>
+                </div>
                 <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
               </div>
               <div className="flex flex-col justify-between place-items-end">
diff --git a/docs/src/pages/roadmap.tsx b/docs/src/pages/roadmap.tsx
index cc96495a06..f77748ee5d 100644
--- a/docs/src/pages/roadmap.tsx
+++ b/docs/src/pages/roadmap.tsx
@@ -14,7 +14,6 @@ import {
   mdiCheckboxMarked,
   mdiCloudUploadOutline,
   mdiCollage,
-  mdiContentCopy,
   mdiDevices,
   mdiEmailOutline,
   mdiExpansionCard,
@@ -25,7 +24,6 @@ import {
   mdiFile,
   mdiFileSearch,
   mdiFlash,
-  mdiFlowerPoppy,
   mdiFolder,
   mdiForum,
   mdiHandshakeOutline,
@@ -48,8 +46,6 @@ import {
   mdiPanVertical,
   mdiPartyPopper,
   mdiPencil,
-  mdiPencilOff,
-  mdiPencilOutline,
   mdiRaw,
   mdiRocketLaunch,
   mdiRotate360,
@@ -139,10 +135,17 @@ const weirdTags = {
 
 const withLanguage = (date: Date) => (language: string) => date.toLocaleDateString(language);
 
-type Base = { icon: string; title: string; description: string };
-const withRelease = ({ icon, title, description, release: version }: Base & { release: keyof typeof releases }) => {
+type Base = { icon: string; iconColor?: React.CSSProperties['color']; title: string; description: string };
+const withRelease = ({
+  icon,
+  iconColor,
+  title,
+  description,
+  release: version,
+}: Base & { release: keyof typeof releases }) => {
   return {
     icon,
+    iconColor: iconColor ?? 'gray',
     title,
     description,
     link: {
@@ -157,6 +160,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiRocketLaunch,
+    iconColor: 'indianred',
     title: 'Stable release',
     description: 'Immich goes stable',
     getDateLabel: () => 'Planned for 2024',
@@ -164,6 +168,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiCloudUploadOutline,
+    iconColor: 'cornflowerblue',
     title: 'Better background backups',
     description: 'Rework background backups to be more reliable',
     getDateLabel: () => 'Planned for 2024',
@@ -171,6 +176,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiImageEdit,
+    iconColor: 'rebeccapurple',
     title: 'Basic editor',
     description: 'Basic photo editing capabilities',
     getDateLabel: () => 'Planned for 2024',
@@ -178,6 +184,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiFlash,
+    iconColor: 'gold',
     title: 'Workflows',
     description: 'Automate tasks with workflows',
     getDateLabel: () => 'Planned for 2024',
@@ -185,6 +192,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiTableKey,
+    iconColor: 'gray',
     title: 'Fine grained access controls',
     description: 'Granular access controls for users and api keys',
     getDateLabel: () => 'Planned for 2024',
@@ -192,6 +200,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiWeb,
+    iconColor: 'royalblue',
     title: 'Web translations',
     description: 'Translate the web application to multiple languages',
     getDateLabel: () => 'Planned for 2024',
@@ -199,6 +208,7 @@ const roadmap: Item[] = [
   {
     done: false,
     icon: mdiCameraBurst,
+    iconColor: 'rebeccapurple',
     title: 'Auto stacking',
     description: 'Auto stack burst photos',
     getDateLabel: () => 'Planned for 2024',
@@ -214,49 +224,56 @@ const milestones: Item[] = [
   //   release: 'v1.106.0',
   // }),
   withRelease({
-    icon: mdiPencilOutline,
+    icon: mdiPencil,
+    iconColor: 'saddlebrown',
     title: 'Read-write external libraries',
     description: 'Edit, update, and delete files in external libraries',
     release: 'v1.104.0',
   }),
   withRelease({
     icon: mdiEmailOutline,
+    iconColor: 'crimson',
     title: 'Email notifications',
     description: 'Send emails for important events',
     release: 'v1.104.0',
   }),
   {
     icon: mdiHandshakeOutline,
+    iconColor: 'magenta',
     title: 'Immich joins FUTO!',
     description: 'Joined Futo and Immich core team goes full-time',
     getDateLabel: withLanguage(new Date(2024, 4, 1)),
   },
   withRelease({
     icon: mdiEyeOutline,
+    iconColor: 'darkslategray',
     title: 'Read-only albums',
     description: 'Share albums with other users as read-only',
     release: 'v1.103.0',
   }),
   withRelease({
     icon: mdiBookmark,
+    iconColor: 'orangered',
     title: 'Permanent URLs (Web)',
     description: 'Assets on the web now have permanent URLs',
     release: 'v1.103.0',
   }),
   withRelease({
     icon: mdiStar,
+    iconColor: 'gold',
     title: '30,000 Stars',
     description: 'Reached 30K Stars on GitHub!',
     release: 'v1.102.0',
   }),
   withRelease({
     icon: mdiChartBoxMultipleOutline,
+    iconColor: 'mediumvioletred',
     title: 'OpenTelemetry metrics',
     description: 'OpenTelemetry metrics for local evaluation and advanced debugging',
     release: 'v1.99.0',
   }),
   withRelease({
-    icon: mdiFlowerPoppy,
+    icon: 'immich',
     title: 'New logo',
     description: 'Immich got its new logo',
     release: 'v1.98.0',
@@ -269,6 +286,7 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiScaleBalance,
+    iconColor: 'gold',
     title: 'AGPL License',
     description: 'Immich switches to AGPLv3 license',
     release: 'v1.95.0',
@@ -281,12 +299,14 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiExpansionCard,
+    iconColor: 'green',
     title: 'GPU acceleration for machine-learning',
     description: 'Hardware acceleration support for Nvidia and Intel devices through CUDA and OpenVINO.',
     release: 'v1.94.0',
   }),
   withRelease({
     icon: mdiAccountGroupOutline,
+    iconColor: 'gray',
     title: '250 unique contributors',
     description: '250 amazing people contributed to Immich',
     release: 'v1.93.0',
@@ -299,6 +319,7 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiPencil,
+    iconColor: 'saddlebrown',
     title: 'Edit metadata',
     description: "Edit a photo or video's date, time, hours, timezone, and GPS information",
     release: 'v1.90.0',
@@ -312,36 +333,42 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiBash,
+    iconColor: 'gray',
     title: 'CLI v2',
     description: 'Version 2 of the Immich CLI is released, replacing the legacy v1 CLI.',
     release: 'v1.88.0',
   }),
   withRelease({
     icon: mdiForum,
+    iconColor: 'dodgerblue',
     title: 'Activity',
     description: 'Comment a photo or a video in a shared album',
     release: 'v1.84.0',
   }),
   withRelease({
     icon: mdiStar,
+    iconColor: 'gold',
     title: '20,000 Stars',
     description: 'Reached 20K Stars on GitHub!',
     release: 'v1.83.0',
   }),
   withRelease({
-    icon: mdiContentCopy,
+    icon: mdiCameraBurst,
+    iconColor: 'rebeccapurple',
     title: 'Stack assets',
     description: 'Manual asset stacking for grouping and hiding related assets in the main timeline.',
     release: 'v1.83.0',
   }),
   withRelease({
     icon: mdiPalette,
+    iconColor: 'magenta',
     title: 'Custom theme',
     description: 'Apply your custom CSS for modifying fonts, colors, and styles in the web application.',
     release: 'v1.83.0',
   }),
   withRelease({
     icon: mdiTrashCanOutline,
+    iconColor: 'brown',
     title: 'Trash feature',
     description: 'Trash, restore from trash, and automatically empty the recycle bin after 30 days.',
     release: 'v1.82.0',
@@ -354,36 +381,42 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiMap,
+    iconColor: 'darksalmon',
     title: 'Map view (mobile)',
     description: 'Heat map implementation in the mobile app.',
     release: 'v1.76.0',
   }),
   withRelease({
     icon: mdiFile,
+    iconColor: 'lightblue',
     title: 'Configuration file',
     description: 'Auto-configure an Immich installation via a configuration file.',
     release: 'v1.75.0',
   }),
   withRelease({
     icon: mdiMonitor,
+    iconColor: 'darkcyan',
     title: 'Slideshow mode (web)',
     description: 'Start a full-screen slideshow from an Album on the web.',
     release: 'v1.75.0',
   }),
   withRelease({
     icon: mdiServer,
+    iconColor: 'lightskyblue',
     title: 'Hardware transcoding',
     description: 'Support hardware acceleration (QuickSync, VAAPI, and Nvidia) for video transcoding.',
     release: 'v1.72.0',
   }),
   withRelease({
     icon: mdiImageAlbum,
+    iconColor: 'olivedrab',
     title: 'View albums via time buckets',
     description: 'Upgrade albums to use time buckets, an optimized virtual viewport.',
     release: 'v1.72.0',
   }),
   withRelease({
     icon: mdiImageAlbum,
+    iconColor: 'olivedrab',
     title: 'Album description',
     description: 'Save an album description.',
     release: 'v1.72.0',
@@ -402,48 +435,56 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiFaceManOutline,
+    iconColor: 'mistyrose',
     title: 'Show/hide faces',
     description: 'Add the options to show or hide faces.',
     release: 'v1.68.0',
   }),
   withRelease({
     icon: mdiMerge,
+    iconColor: 'forestgreen',
     title: 'Merge faces',
     description: 'Add the ability to merge multiple faces together.',
     release: 'v1.67.0',
   }),
   withRelease({
     icon: mdiImage,
+    iconColor: 'rebeccapurple',
     title: 'Feature photo',
     description: 'Add the option to change the feature photo for a person.',
     release: 'v1.66.0',
   }),
   withRelease({
     icon: mdiKeyboardSettingsOutline,
+    iconColor: 'darkslategray',
     title: 'Multi-select via SHIFT',
     description: 'Add the option to multi-select while holding SHIFT.',
     release: 'v1.66.0',
   }),
   withRelease({
     icon: mdiImageMultipleOutline,
+    iconColor: 'rebeccapurple',
     title: 'Memories (mobile)',
     description: 'View "On this day..." memories in the mobile app.',
     release: 'v1.65.0',
   }),
   withRelease({
     icon: mdiFaceMan,
+    iconColor: 'mistyrose',
     title: 'Facial recognition (mobile)',
     description: 'View detected faces in the mobile app.',
     release: 'v1.63.0',
   }),
   withRelease({
     icon: mdiImageMultipleOutline,
+    iconColor: 'rebeccapurple',
     title: 'Memories (web)',
     description: 'View pictures taken in past years on this day on the web.',
     release: 'v1.61.0',
   }),
   withRelease({
     icon: mdiCollage,
+    iconColor: 'deeppink',
     title: 'Justified layout (web)',
     description: 'Implement justified layout (collage) on the web.',
     release: 'v1.61.0',
@@ -456,18 +497,21 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiShareAll,
+    iconColor: 'darkturquoise',
     title: 'Partner sharing (mobile)',
     description: 'View shared partner photos in the mobile app.',
     release: 'v1.58.0',
   }),
   withRelease({
     icon: mdiFile,
+    iconColor: 'lightblue',
     title: 'XMP sidecar',
     description: 'Attach XMP sidecar files to assets.',
     release: 'v1.58.0',
   }),
   withRelease({
     icon: mdiFolder,
+    iconColor: 'brown',
     title: 'Custom storage label',
     description: 'Replace the user UUID in the storage template with a custom label.',
     release: 'v1.57.0',
@@ -480,24 +524,28 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiFaceMan,
+    iconColor: 'mistyrose',
     title: 'Facial recognition',
     description: 'Detect faces in pictures and cluster them together as people, which can be named.',
     release: 'v1.56.0',
   }),
   withRelease({
     icon: mdiMap,
+    iconColor: 'darksalmon',
     title: 'Map view (web)',
     description: 'View a global map, with clusters of photos based on corresponding GPS data.',
     release: 'v1.55.0',
   }),
   withRelease({
     icon: mdiDevices,
+    iconColor: 'slategray',
     title: 'Manage auth devices',
     description: 'Manage logged-in devices and revoke access from User Settings.',
     release: 'v1.55.0',
   }),
   withRelease({
     icon: mdiStar,
+    iconColor: 'gold',
     title: '10,000 Stars',
     description: 'Reached 10K stars on GitHub!',
     release: 'v1.54.0',
@@ -516,24 +564,28 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiDevices,
+    iconColor: 'slategray',
     title: 'Responsive web app',
     description: 'Optimize the web app for small screen.',
     release: 'v1.54.0',
   }),
   withRelease({
     icon: mdiFileSearch,
+    iconColor: 'brown',
     title: 'Search by metadata',
     description: 'Search images by filename, description, tagged people, make, model, and other metadata.',
     release: 'v1.52.0',
   }),
   withRelease({
     icon: mdiImageSearch,
+    iconColor: 'rebeccapurple',
     title: 'CLIP search',
     description: 'Search images with free-form text like "Sunset at the beach".',
     release: 'v1.51.0',
   }),
   withRelease({
     icon: mdiMagnify,
+    iconColor: 'lightblue',
     title: 'Explore page',
     description: 'View tagged places, object, and people.',
     release: 'v1.51.0',
@@ -552,24 +604,28 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiMaterialDesign,
+    iconColor: 'blue',
     title: 'Material design 3 (mobile)',
     description: 'Upgrade the mobile app to Material Design 3.',
     release: 'v1.47.0',
   }),
   withRelease({
     icon: mdiHeart,
+    iconColor: 'red',
     title: 'Favorites (mobile)',
     description: 'Show favorites on the mobile app.',
     release: 'v1.46.0',
   }),
   withRelease({
     icon: mdiCakeVariant,
+    iconColor: 'deeppink',
     title: 'Immich turns 1',
     description: 'Immich is officially one year old.',
     release: 'v1.43.0',
   }),
   withRelease({
     icon: mdiHeart,
+    iconColor: 'red',
     title: 'Favorites page (web)',
     description: 'Favorite and view favorites on the web.',
     release: 'v1.43.0',
@@ -582,6 +638,7 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiFolder,
+    iconColor: 'lightblue',
     title: 'User-defined storage structure',
     description: 'Support custom storage structures.',
     release: 'v1.39.0',
@@ -594,18 +651,21 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiSecurity,
+    iconColor: 'green',
     title: 'OAuth integration',
     description: 'Support OAuth2 and OIDC capable identity providers.',
     release: 'v1.36.0',
   }),
   withRelease({
     icon: mdiWeb,
+    iconColor: 'royalblue',
     title: 'Documentation site',
     description: 'Release an official documentation website.',
     release: 'v1.33.1',
   }),
   withRelease({
     icon: mdiThemeLightDark,
+    iconColor: 'slategray',
     title: 'Dark mode (web)',
     description: 'Dark mode on the web.',
     release: 'v1.32.0',
@@ -618,18 +678,21 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiCheckAll,
+    iconColor: 'green',
     title: 'Checksum duplication check',
     description: 'Enforce per user sha1 checksum uniqueness.',
     release: 'v1.27.0',
   }),
   withRelease({
     icon: mdiAndroid,
+    iconColor: 'greenyellow',
     title: 'Android background backup',
     description: 'Automatic backup in the background on Android.',
     release: 'v1.24.0',
   }),
   withRelease({
     icon: mdiAccountGroup,
+    iconColor: 'gray',
     title: 'Admin portal',
     description: 'Manage users and admin settings from the web.',
     release: 'v1.10.0',
@@ -642,30 +705,35 @@ const milestones: Item[] = [
   }),
   withRelease({
     icon: mdiTag,
+    iconColor: 'coral',
     title: 'Image tagging',
     description: 'Tag images with custom values.',
     release: 'v1.7.0',
   }),
   withRelease({
     icon: mdiImage,
+    iconColor: 'rebeccapurple',
     title: 'View exif',
     description: 'View metadata about assets.',
     release: 'v1.3.0',
   }),
   withRelease({
     icon: mdiCheckboxMarked,
+    iconColor: 'green',
     title: 'Multi select',
     description: 'Select and execute actions on multiple assets at the same time.',
     release: 'v1.2.0',
   }),
   withRelease({
     icon: mdiVideo,
+    iconColor: 'slategray',
     title: 'Video player',
     description: 'Play videos in the web and on mobile.',
     release: 'v1.2.0',
   }),
   {
     icon: mdiPartyPopper,
+    iconColor: 'deeppink',
     title: 'First commit',
     description: 'First commit on GitHub, Immich is born.',
     getDateLabel: withLanguage(new Date(2022, 1, 3)),