Style selected file system object

Author: devklick

src/programs/FileBrowser/FileBrowser.scss

@@ -71,6 +71,7 @@
     }
 
     &__favorite {
+      border-radius: 10px;
       padding: 6px 10px;
       box-sizing: border-box;
       box-shadow: 2px 2px 4px rgb(0, 0, 0, 0);
@@ -91,18 +92,23 @@
     overflow-y: scroll;
     display: grid;
     gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     grid-template-rows: min-content;
     box-sizing: border-box;
     &__item {
       width: 100%;
+      padding: 10px;
+      overflow-wrap: break-word;
+      word-break: normal;
+      box-sizing: border-box;
       aspect-ratio: 1/1;
       height: auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 10px;
+      border-radius: 10px;
 
       &-icon {
         height: 80%;

src/programs/FileBrowser/FileBrowser.tsx

@@ -78,17 +78,21 @@ function SideBar({ favorites, openFSObject, currentPath }: SideBarProps) {
 }
 
 interface MainContentProps {
-  diContents: Record<string, FSObject>;
+  dirContents: Record<string, FSObject>;
   openFSObject: (fsObject: FSObject) => void;
 }
 
-function MainContent({ diContents, openFSObject }: MainContentProps) {
+function MainContent({ dirContents, openFSObject }: MainContentProps) {
+  const [selected, setSelected] = useState<string>("");
   return (
     <div className="file-browser__main-content">
-      {Object.values<FSObject>(diContents).map((fsObject) => (
+      {Object.values<FSObject>(dirContents).map((fsObject) => (
         <div
-          className="file-browser__main-content__item"
+          className={`file-browser__main-content__item ${
+            fsObject.path === selected ? "active" : ""
+          }`}
           onDoubleClick={() => openFSObject(fsObject)}
+          onClick={() => setSelected(fsObject.path)}
           key={fsObject.path}
         >
           {isFSDirectory(fsObject) ? (
@@ -141,7 +145,7 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
       />
 
       <MainContent
-        diContents={fs.currentDirectory.contents}
+        dirContents={fs.currentDirectory.contents}
         openFSObject={fs.navToObject}
       />
       <div className="file-browser__bottom-bar"></div>