Add indicators to spotlight tile and make spotlight layout responsive

src/tile/GridTile.module.css

@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 .tile {
-  position: absolute;
-  top: 0;
   --media-view-border-radius: var(--cpd-space-4x);
   transition: outline-color ease 0.15s;
   outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
@@ -62,8 +60,6 @@ borders don't support gradients */
 }
 
 .tile[data-maximised="true"] {
-  position: relative;
-  flex-grow: 1;
   --media-view-border-radius: 0;
   --media-view-fg-inset: 10px;
 }

src/tile/SpotlightTile.module.css

@@ -15,14 +15,10 @@ limitations under the License.
 */
 
 .tile {
-  position: absolute;
-  top: 0;
   --border-width: var(--cpd-space-3x);
 }
 
 .tile.maximised {
-  position: relative;
-  flex-grow: 1;
   --border-width: 0px;
 }
 
@@ -54,14 +50,14 @@ limitations under the License.
   border-radius: 0;
 }
 
-.item {
+.contents > .item {
   height: 100%;
   flex-basis: 100%;
   flex-shrink: 0;
   --media-view-fg-inset: 10px;
 }
 
-.item.snap {
+.contents > .item.snap {
   scroll-snap-align: start;
 }
 
@@ -151,3 +147,38 @@ limitations under the License.
 .tile:has(:focus-visible) > button {
   opacity: 1;
 }
+
+.indicators {
+  display: flex;
+  gap: var(--cpd-space-2x);
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: calc(-1 * var(--cpd-space-6x));
+  width: 100%;
+  justify-content: start;
+  transition: opacity ease 0.15s;
+  opacity: 0;
+}
+
+.indicators.show {
+  opacity: 1;
+}
+
+.maximised .indicators {
+  inset-block-end: calc(-1 * var(--cpd-space-4x) - 2px);
+  justify-content: center;
+}
+
+.indicators > .item {
+  inline-size: 32px;
+  block-size: 2px;
+  transition: background-color ease 0.15s;
+}
+
+.indicators > .item[data-visible="false"] {
+  background: var(--cpd-color-alpha-gray-600);
+}
+
+.indicators > .item[data-visible="true"] {
+  background: var(--cpd-color-gray-1400);
+}

src/tile/SpotlightTile.tsx

@@ -178,6 +178,7 @@ interface Props {
   onToggleFullscreen: () => void;
   targetWidth: number;
   targetHeight: number;
+  showIndicators: boolean;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
 }
@@ -191,6 +192,7 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
       onToggleFullscreen,
       targetWidth,
       targetHeight,
+      showIndicators,
       className,
       style,
     },
@@ -307,6 +309,15 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             <ChevronRightIcon aria-hidden width={24} height={24} />
           </button>
         )}
+        <div
+          className={classNames(styles.indicators, {
+            [styles.show]: showIndicators && vms.length > 1,
+          })}
+        >
+          {vms.map((vm) => (
+            <div className={styles.item} data-visible={vm.id === visibleId} />
+          ))}
+        </div>
       </animated.div>
     );
   },