From 5b650c88b3bcd88d9a69f736fdf55a68c012d3d9 Mon Sep 17 00:00:00 2001
From: Tilo <Tilo-K@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:44:01 +0200
Subject: [PATCH] [ENG-1252] Hidden files will now be 50% opacity. (#1548)

* [ENG-1252] Hidden files will now be grayscale and at 50% opacity.

* [ENG-1252] Removed grayscale

* [ENG-1252] Make enverything opacity 50
---
 interface/app/$libraryId/Explorer/View/GridList.tsx       | 2 +-
 interface/app/$libraryId/Explorer/View/GridView.tsx       | 5 +++--
 interface/app/$libraryId/Explorer/View/ListView/index.tsx | 8 ++++++--
 interface/app/$libraryId/Explorer/View/MediaView.tsx      | 7 +++++--
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/View/GridList.tsx b/interface/app/$libraryId/Explorer/View/GridList.tsx
index cac2a748e..a3648fa19 100644
--- a/interface/app/$libraryId/Explorer/View/GridList.tsx
+++ b/interface/app/$libraryId/Explorer/View/GridList.tsx
@@ -20,6 +20,7 @@ import { getQuickPreviewStore } from '../QuickPreview/store';
 import { getExplorerStore, isCut, useExplorerStore } from '../store';
 import { uniqueId } from '../util';
 import { useExplorerViewContext } from '../ViewContext';
+import clsx from 'clsx';
 
 const SelectoContext = createContext<{
 	selecto: React.RefObject<Selecto>;
@@ -625,7 +626,6 @@ export default ({ children }: { children: RenderItem }) => {
 			<GridList grid={grid} scrollRef={explorer.scrollRef}>
 				{(index) => {
 					const item = explorer.items?.[index];
-
 					if (!item) return null;
 
 					return (
diff --git a/interface/app/$libraryId/Explorer/View/GridView.tsx b/interface/app/$libraryId/Explorer/View/GridView.tsx
index 9d8fb604d..323e86cf4 100644
--- a/interface/app/$libraryId/Explorer/View/GridView.tsx
+++ b/interface/app/$libraryId/Explorer/View/GridView.tsx
@@ -25,6 +25,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
 	const location = getItemLocation(data);
 	const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
 	const isFolder = 'is_dir' in data.item ? data.item.is_dir || data.type === 'Location' : false;
+	const hidden = filePathData?.hidden ?? false;
 
 	const showSize =
 		showBytesInGridView &&
@@ -34,7 +35,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
 		(!isRenaming || (isRenaming && !selected));
 
 	return (
-		<ViewItem data={data} className="h-full w-full">
+		<ViewItem data={data} className={clsx("h-full w-full", hidden && 'opacity-50')}>
 			<div
 				className={clsx('mb-1 aspect-square rounded-lg', selected && 'bg-app-selectedItem')}
 			>
@@ -52,7 +53,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
 				{showSize && filePathData?.size_in_bytes_bytes && (
 					<span
 						className={clsx(
-							'cursor-default truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull '
+							'cursor-default truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull'
 						)}
 					>
 						{`${byteSize(filePathData.size_in_bytes_bytes)}`}
diff --git a/interface/app/$libraryId/Explorer/View/ListView/index.tsx b/interface/app/$libraryId/Explorer/View/ListView/index.tsx
index f16c87714..bb9a83f4d 100644
--- a/interface/app/$libraryId/Explorer/View/ListView/index.tsx
+++ b/interface/app/$libraryId/Explorer/View/ListView/index.tsx
@@ -11,7 +11,7 @@ import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from
 import BasicSticky from 'react-sticky-el';
 import { useKey, useMutationObserver, useWindowEventListener } from 'rooks';
 import useResizeObserver from 'use-resize-observer';
-import { type ExplorerItem } from '@sd/client';
+import { getItemFilePath, type ExplorerItem } from '@sd/client';
 import { ContextMenu, Tooltip } from '@sd/ui';
 import { useIsTextTruncated } from '~/hooks';
 import { isNonEmptyObject } from '~/util';
@@ -45,6 +45,9 @@ interface ListViewItemProps {
 }
 
 const ListViewItem = memo((props: ListViewItemProps) => {
+	const filePathData = getItemFilePath(props.row.original);
+	const hidden = filePathData?.hidden ?? false;
+
 	return (
 		<ViewItem
 			data={props.row.original}
@@ -58,7 +61,8 @@ const ListViewItem = memo((props: ListViewItemProps) => {
 					className={clsx(
 						'table-cell shrink-0 px-4 text-xs text-ink-dull',
 						cell.column.id !== 'name' && 'truncate',
-						cell.column.columnDef.meta?.className
+						cell.column.columnDef.meta?.className,
+            hidden && 'opacity-50'
 					)}
 					style={{ width: cell.column.getSize() }}
 				>
diff --git a/interface/app/$libraryId/Explorer/View/MediaView.tsx b/interface/app/$libraryId/Explorer/View/MediaView.tsx
index 03e2c2159..6e20e3012 100644
--- a/interface/app/$libraryId/Explorer/View/MediaView.tsx
+++ b/interface/app/$libraryId/Explorer/View/MediaView.tsx
@@ -1,7 +1,7 @@
 import { ArrowsOutSimple } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { memo } from 'react';
-import { ExplorerItem } from '@sd/client';
+import { ExplorerItem, getItemFilePath } from '@sd/client';
 import { Button } from '@sd/ui';
 
 import { useExplorerContext } from '../Context';
@@ -18,13 +18,16 @@ interface MediaViewItemProps {
 
 const MediaViewItem = memo(({ data, selected, cut }: MediaViewItemProps) => {
 	const settings = useExplorerContext().useSettingsSnapshot();
+	const filePathData = getItemFilePath(data);
+	const hidden = filePathData?.hidden ?? false;
 
 	return (
 		<ViewItem
 			data={data}
 			className={clsx(
 				'h-full w-full overflow-hidden border-2',
-				selected ? 'border-accent' : 'border-transparent'
+				selected ? 'border-accent' : 'border-transparent',
+				hidden && 'opacity-50'
 			)}
 		>
 			<div