finish expandedview image section

src/modules/expanded-view/components/ExpandedViewCssVariables.tsx

@@ -0,0 +1,21 @@
+import { useExpandedViewValue } from "../context";
+
+export function ExpandedViewCssVariables() {
+  const imageDimensionKeys = useExpandedViewValue("imageAreaStyleKeys");
+
+  return (
+    <style>
+      {`
+        :root {
+          --cl-ev-image-area-width: ${imageDimensionKeys.imageAreaWidth}px;
+          --cl-ev-image-area-padding: ${imageDimensionKeys.imageAreaPadding}px;
+          --cl-ev-gap-between-carousel-and-image: ${imageDimensionKeys.gapBetweenCarouselAndImage}px;
+          --cl-ev-selected-image-width: ${imageDimensionKeys.selectedImageWidth}px;
+          --cl-ev-selected-image-height: ${imageDimensionKeys.selectedImageHeight}px;
+          --cl-ev-image-carousel-entry-width: ${imageDimensionKeys.imageCarouselEntryWidth}px;
+          --cl-ev-image-carousel-entry-height: ${imageDimensionKeys.imageCarouselEntryHeight}px;
+        }
+      `}
+    </style>
+  );
+}

src/modules/expanded-view/components/ExpandedViewImageContainer.tsx

@@ -0,0 +1,71 @@
+import { Focusable, ScrollPanelGroup } from "@decky/ui";
+import { useExpandedViewAction, useExpandedViewValue } from "../context";
+
+export function ExpandedViewImageContainer() {
+  const data = useExpandedViewValue("data");
+  const {
+    imageCarouselEntryWidth,
+    imageCarouselEntryHeight,
+    selectedImageHeight,
+    selectedImageWidth,
+  } = useExpandedViewValue("imageAreaStyleKeys");
+  const focusedImageId = useExpandedViewValue("focusedImageId");
+
+  const setFocusedImage = useExpandedViewAction("setFocusedImage");
+
+  return (
+    <div className="cl_expandedview_imageareacontainer">
+      {/* Image Carousel Container */}
+      {data.images.length > 1 && (
+        <ScrollPanelGroup
+          // @ts-ignore
+          focusable={false}
+          className="cl_expandedview_imagecarouselcontainer"
+        >
+          {data.images.map((image) => (
+            <Focusable
+              onFocus={() => {
+                setFocusedImage(image.id);
+              }}
+              className="cl_expandedview_imagecarouselentry"
+              focusWithinClassName="gpfocuswithin"
+              onActivate={() => {}}
+            >
+              <img
+                width={imageCarouselEntryWidth}
+                height={imageCarouselEntryHeight}
+                style={{ objectFit: "contain" }}
+                src={`https://api.deckthemes.com/blobs/${focusedImageId}`}
+              />
+            </Focusable>
+          ))}
+        </ScrollPanelGroup>
+      )}
+
+      {/* Selected Image Display */}
+      <Focusable
+        className="cl_expandedview_selectedimage"
+        focusWithinClassName="gpfocuswithin"
+        onActivate={() => {}}
+      >
+        <img
+          width={selectedImageWidth}
+          height={selectedImageHeight}
+          style={{ objectFit: "contain" }}
+          src={
+            data.images.length > 0
+              ? `https://api.deckthemes.com/blobs/${focusedImageId}`
+              : `https://share.deckthemes.com/cssplaceholder.png`
+          }
+        />
+        {data.images.length > 1 && (
+          <div className="cl_expandedview_imagenumbercontainer">
+            <span className="font-bold">
+              {data.images.findIndex((blob) => blob.id === focusedImageId) + 1}/{data.images.length}
+            </span>
+          </div>
+        )}
+      </Focusable>
+    </div>
+  );
+}

src/modules/expanded-view/components/ExpandedViewScrollingSection.tsx

@@ -1,12 +1,14 @@
 import { ScrollPanelGroup } from "@decky/ui";
-import { useExpandedViewAction } from "../context";
+import { useExpandedViewAction, useExpandedViewValue } from "../context";
+import { ExpandedViewImageContainer } from "./ExpandedViewImageContainer";
 
 export function ExpandedViewScrollingSection() {
   const close = useExpandedViewAction("close");
+
   return (
     <ScrollPanelGroup
       // @ts-ignore
-      classname="cl_expandedview_scrollcontainer"
+      className="cl_expandedview_scrollpanel"
       focusable={false}
       // onCancelButton doesn't work here
       onCancelActionDescription="Back"
@@ -16,6 +18,10 @@ export function ExpandedViewScrollingSection() {
           close();
         }
       }}
-    ></ScrollPanelGroup>
+    >
+      <div className="cl_expandedview_themedatacontainer">
+        <ExpandedViewImageContainer />
+      </div>
+    </ScrollPanelGroup>
   );
 }

src/modules/expanded-view/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./ExpandedViewLoadingPage";
 export * from "./ExpandedViewScrollingSection";
+export * from "./ExpandedViewCssVariables";

src/modules/expanded-view/context/ExpandedViewStore.tsx

@@ -8,35 +8,79 @@ interface IExpandedViewStoreValues {
   error: string | null;
   openedId: string | null;
   data: FullCSSThemeInfo;
+  focusedImageId: string;
+  imageAreaStyleKeys: {
+    imageAreaWidth: number;
+    imageAreaPadding: number;
+    gapBetweenCarouselAndImage: number;
+    selectedImageWidth: number;
+    selectedImageHeight: number;
+    imageCarouselEntryWidth: number;
+    imageCarouselEntryHeight: number;
+  };
 }
 
 interface IExpandedViewStoreActions {
   openTheme: (themeId: string) => Promise<void>;
   downloadTheme: () => Promise<void>;
+  setFocusedImage: (imageId: string) => void;
   close: () => void;
 }
 
 export interface IExpandedViewStore extends IExpandedViewStoreValues, IExpandedViewStoreActions {}
 
 const expandedViewStore = createStore<IExpandedViewStore>((set, get) => {
+  function setImageSizes() {
+    const imageAreaWidth = 556;
+    const imageAreaPadding = 16;
+    const gapBetweenCarouselAndImage = 8;
+    const selectedImageWidth =
+      get().data?.images?.length > 1 ? 434.8 : imageAreaWidth - imageAreaPadding * 2;
+    const selectedImageHeight = (selectedImageWidth / 16) * 10;
+    const imageCarouselEntryWidth =
+      imageAreaWidth - imageAreaPadding * 2 - selectedImageWidth - gapBetweenCarouselAndImage;
+    set({
+      imageAreaStyleKeys: {
+        imageAreaWidth,
+        imageAreaPadding,
+        gapBetweenCarouselAndImage,
+        selectedImageWidth,
+        selectedImageHeight,
+        imageCarouselEntryWidth,
+        imageCarouselEntryHeight: (imageCarouselEntryWidth / 16) * 10,
+      },
+    });
+  }
   return {
     loaded: false,
     openedId: null,
     data: {} as FullCSSThemeInfo,
     error: null,
+    focusedImageId: "",
+    imageAreaStyleKeys: {
+      imageAreaWidth: 0,
+      imageAreaPadding: 0,
+      gapBetweenCarouselAndImage: 0,
+      selectedImageWidth: 0,
+      selectedImageHeight: 0,
+      imageCarouselEntryWidth: 0,
+      imageCarouselEntryHeight: 0,
+    },
     openTheme: async (themeId) => {
       set({ loaded: false, error: null, openedId: themeId });
       Navigation.Navigate("/cssloader/expanded-view");
       const { apiFetch } = getCSSLoaderState();
       try {
         const response = await apiFetch<FullCSSThemeInfo>(`/themes/${themeId}`);
         if (response) {
-          set({ data: response, loaded: true });
+          set({ data: response, loaded: true, focusedImageId: response.images[0]?.id || "" });
+          setImageSizes();
           return;
         }
         throw new Error("No response returned");
       } catch (error) {
         set({ error: "Error fetching theme!", loaded: true });
+        setImageSizes();
       }
     },
     downloadTheme: async () => {
@@ -48,9 +92,19 @@ const expandedViewStore = createStore<IExpandedViewStore>((set, get) => {
       // }
     },
     close: () => {
-      set({ loaded: false, openedId: null, data: {} as FullCSSThemeInfo, error: null });
+      set({
+        loaded: false,
+        openedId: null,
+        data: {} as FullCSSThemeInfo,
+        error: null,
+        focusedImageId: "",
+      });
+      setImageSizes();
       Navigation.NavigateBack();
     },
+    setFocusedImage: (imageId) => {
+      set({ focusedImageId: imageId });
+    },
   };
 });
 

src/modules/expanded-view/pages/ExpandedViewPage.tsx

@@ -1,4 +1,8 @@
-import { ExpandedViewLoadingPage, ExpandedViewScrollingSection } from "../components";
+import {
+  ExpandedViewLoadingPage,
+  ExpandedViewCssVariables,
+  ExpandedViewScrollingSection,
+} from "../components";
 import { useExpandedViewValue } from "../context";
 
 export function ExpandedViewPage() {
@@ -11,6 +15,7 @@ export function ExpandedViewPage() {
 
   return (
     <div className="cl_expandedview_container">
+      <ExpandedViewCssVariables />
       <ExpandedViewScrollingSection />
     </div>
   );