feat: Implement basic general folder support (#2051)

- Related: #1748

src/scss/editor.scss

@@ -63,10 +63,10 @@ div.upgrade span {
   // Only allow clicks on the header.
   pointer-events: none;
 }
-.submenu-header .new-camera {
+.submenu-header .new {
   font-style: italic;
 }
-.submenu:not(.selected) > .submenu-header .new-camera {
+.submenu:not(.selected) > .submenu-header .new {
   color: var(--secondary-text-color, 'black');
 }
 
@@ -110,3 +110,7 @@ ha-selector {
   padding: 10px;
   border: 1px solid var(--divider-color);
 }
+
+advanced-camera-card-message::part(icon) {
+  color: var(--primary-color);
+}

src/scss/folder-gallery.scss

@@ -0,0 +1,2 @@
+@use 'basic-block.scss';
+@use 'media-gallery.scss';

src/scss/folder.scss

@@ -5,9 +5,9 @@
 }
 
 advanced-camera-card-surround-basic {
-  // The gallery will grow indefinitely in the `unconstrained` aspect ratio
+  // The folder will grow indefinitely in the `unconstrained` aspect ratio
   // modes, the surround height needs to be limited to something reasonable in
   // order for the media filter to still display somewhere the user can
-  // easily/continually access.
+  // easily/continually access. See similar: gallery.scss.
   max-height: 110dvh;
 }

src/scss/gallery-core.scss

@@ -20,7 +20,7 @@
     var(--advanced-camera-card-gallery-columns),
     minmax(0, 1fr)
   );
-  grid-auto-rows: min-content;
+  grid-auto-rows: var(--advanced-camera-card-thumbnail-size);
   gap: var(--advanced-camera-card-gallery-gap);
 }
 
@@ -29,27 +29,9 @@
   display: none;
 }
 
-advanced-camera-card-thumbnail {
-  height: 100%;
-  max-height: var(--advanced-camera-card-thumbnail-size);
-}
-advanced-camera-card-thumbnail:not([details]) {
-  width: 100%;
-}
-advanced-camera-card-thumbnail.selected {
-  border: 4px solid var(--accent-color);
-  // Because this is box-sizing: border-box, the border is effectively
-  // 'padding'. To get the curved borders to line up between the thumbnail and
-  // this outer border, we need to add the size of the border to the thumbnail
-  // image border radius.
-  // Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
-  border-radius: calc(
-    var(--advanced-camera-card-css-border-radius, var(--ha-card-border-radius, 4px)) +
-      4px
-  );
-}
-
 advanced-camera-card-progress-indicator.top {
   // The top loading progress indicator should span the whole width.
   grid-column: 1/-1;
+  box-sizing: border-box;
+  padding: 5px 0px 5px 0px;
 }

src/scss/media-gallery.scss

@@ -0,0 +1,32 @@
+@use 'basic-block.scss';
+
+advanced-camera-card-surround-basic {
+  // The gallery will grow indefinitely in the `unconstrained` aspect ratio
+  // modes, the surround height needs to be limited to something reasonable in
+  // order for the media filter to still display somewhere the user can
+  // easily/continually access. See similar: gallery.scss.
+  max-height: 110dvh;
+}
+
+advanced-camera-card-thumbnail {
+  height: 100%;
+  min-height: var(--advanced-camera-card-thumbnail-size);
+
+  background-color: var(--secondary-background-color);
+}
+advanced-camera-card-thumbnail:not([details]) {
+  width: 100%;
+}
+advanced-camera-card-thumbnail.selected {
+  border: 4px solid var(--accent-color);
+
+  // Because this is box-sizing: border-box, the border is effectively
+  // 'padding'. To get the curved borders to line up between the thumbnail and
+  // this outer border, we need to add the size of the border to the thumbnail
+  // image border radius.
+  // Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
+  border-radius: calc(
+    var(--advanced-camera-card-css-border-radius, var(--ha-card-border-radius, 4px)) +
+      4px
+  );
+}

src/scss/thumbnail-details.scss

@@ -10,7 +10,7 @@
   column-gap: 5%;
 }
 
-div.title {
+div.heading {
   font-size: 1.2rem;
   font-weight: bold;
 }

src/scss/thumbnail-feature-thumbnail.scss

@@ -13,11 +13,13 @@ img {
   display: block;
 }
 
-img,
-advanced-camera-card-icon {
+img {
   // Safari will occasionally not load thumbnails correctly with display block.
   display: inline-block;
 
+  width: 100%;
+  height: 100%;
+
   // Ensure no whitespace around img with inline-block display.
   vertical-align: top;
   margin: 0;
@@ -27,10 +29,6 @@ advanced-camera-card-icon {
     var(--ha-card-border-radius, 4px)
   );
 
-  width: var(--advanced-camera-card-thumbnail-size);
-  max-height: 100%;
-  aspect-ratio: 1 / 1;
-
   // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
   // should be clipped to fill the thumbnail div whilst maintaining
   // aspect-ratio.
@@ -38,9 +36,12 @@ advanced-camera-card-icon {
 }
 
 advanced-camera-card-icon {
-  --mdc-icon-size: 50%;
-  color: var(--primary-text-color);
   display: flex;
+  width: 50%;
+
+  --mdc-icon-size: 100%;
+  color: var(--primary-text-color);
+
   justify-content: center;
   align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.3);

src/scss/thumbnail-feature.scss

@@ -1,5 +1,9 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+
   max-width: var(--advanced-camera-card-thumbnail-size);
   max-height: var(--advanced-camera-card-thumbnail-size);
 
@@ -12,15 +16,29 @@
     var(--ha-card-border-radius, 4px)
   );
 
-  overflow: hidden;
-  padding: 10px;
-
   box-sizing: border-box;
 
-  // Ensure img.background is relative to this.
+  // Background icon relative to the thumbnail.
   position: relative;
 }
 
+advanced-camera-card-thumbnail-feature-thumbnail {
+  height: 50%;
+}
+advanced-camera-card-thumbnail-feature-thumbnail.brand:only-child {
+  height: 60%;
+}
+advanced-camera-card-thumbnail-feature-thumbnail:not(.brand):only-child {
+  height: 100%;
+}
+
+advanced-camera-card-icon:only-child {
+  width: 60%;
+  height: 60%;
+
+  --mdc-icon-size: 100%;
+}
+
 advanced-camera-card-icon.background {
   display: block;
   width: 100%;
@@ -35,26 +53,17 @@ advanced-camera-card-icon.background {
   pointer-events: none;
 
   opacity: 0.1;
-}
 
-div.content {
-  height: 100%;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--primary-text-color);
+  --mdc-icon-size: 100%;
 }
 
 div {
   text-align: center;
+  color: var(--primary-text-color);
 }
 div.title {
   font-size: 1.5rem;
 }
-div.camera {
-  font-size: 0.7em;
+div.subtitle {
+  font-size: 0.8em;
 }

src/scss/thumbnail.scss

@@ -65,6 +65,7 @@ advanced-camera-card-icon.download {
 }
 
 advanced-camera-card-thumbnail-details-event,
-advanced-camera-card-thumbnail-details-recording {
+advanced-camera-card-thumbnail-details-recording,
+advanced-camera-card-thumbnail-details-folder {
   flex: 1;
 }

src/scss/viewer.scss

@@ -6,6 +6,15 @@
   gap: 5px;
 }
 
+:host([empty]) {
+  // If there is no media, render the message in suitably sized placeholder. The
+  // alternative is falling back to the minimum card size, which is too small
+  // for adequate use of the thumbnails carousel, which might be used to select
+  // media for the viewer. This issue is especially prominent when navigating
+  // folders via the thumbnail carousel.
+  aspect-ratio: 16 / 9;
+}
+
 advanced-camera-card-viewer-carousel {
   flex: 1;
   min-height: 0;