Add image description

src/root.css

@@ -9,7 +9,6 @@
   background-color: black;
 }
 
-
 body {
   font-family: 'Helvetica Neue', sans-serif;
 }
@@ -32,13 +31,11 @@ main {
 }
 
 main {
-  /* width: 90vw;
-  max-width: 1394px; */
   margin: 0 auto;
 }
 
-main {
-  /* padding: 20px; */
+strong {
+  font-weight: bold;
 }
 
 table {
@@ -54,7 +51,8 @@ th {
   font-weight: bold;
 }
 
-th, td {
+th,
+td {
   padding: 1rem 1.5rem;
 }
 
@@ -62,6 +60,7 @@ tr {
   border-bottom: 1px solid black;
 }
 
-a:hover, a:focus {
+a:hover,
+a:focus {
   text-decoration: underline;
 }

src/routes/index.module.css

@@ -32,11 +32,30 @@
   gap: 2rem;
   opacity: 1;
   transform: translateY(0);
-
   transition: opacity 0.5s ease, transform 0.5s ease;
 }
 
-.MainWidgets.Loading {
+.Loading .MainWidgets {
   opacity: 0;
   transform: translateY(-1rem);
 }
+
+.CurrentBackground {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 1rem 1.5rem;
+  line-height: 1.5rem;
+  backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: .75rem;
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  transition-delay: 1s;
+}
+
+.Loading .CurrentBackground {
+  opacity: 1;
+  transform: translateY(8rem);
+}

src/routes/index.tsx

@@ -5,15 +5,17 @@ import { AppList } from '~/components/apps/AppList';
 import { DateView } from '~/components/widgets/Date';
 import { Search } from '~/components/widgets/Search';
 import { Weather } from '~/components/widgets/Weather';
+import { createActiveCategory } from '~/state/create-active-category';
+import { useSettings } from '~/state/settings-provider';
 import { Sidebar } from '../components/ui/Sidebar';
 
-import { createActiveCategory } from '~/state/create-active-category';
 import style from './index.module.css';
 
 export default function Home() {
   const searchProviders = createSearchProviders();
   const [searchTerm, setSearchTerm] = createSignal('');
   const { categories, apps } = createCategories();
+  const { currentBackground } = useSettings();
 
   const { activeCategory, selectCategory, resetCategory } = createActiveCategory();
 
@@ -74,7 +76,7 @@ export default function Home() {
   });
 
   return (
-    <main class={style.SidebarPage}>
+    <main classList={{ [style.SidebarPage]: true, [style.Loading]: isInitialLoading() }}>
       <Sidebar
         categories={() => categories()?.flatMap((c) => c.name)}
         selectCategory={selectCategory}
@@ -86,7 +88,7 @@ export default function Home() {
             when={activeCategory()}
             fallback={
               <>
-                <div classList={{ [style.MainWidgets]: true, [style.Loading]: isInitialLoading() }}>
+                <div class={style.MainWidgets}>
                   <DateView />
                   <Search
                     term={searchTerm}
@@ -114,6 +116,11 @@ export default function Home() {
           </Show>
         </div>
       </div>
+      <div class={style.CurrentBackground}>
+        <strong>{currentBackground()?.description || currentBackground()?.alt_description}</strong>
+        <br />
+        {currentBackground()?.location.name}
+      </div>
     </main>
   );
 }

src/state/settings-provider.tsx

@@ -1,8 +1,6 @@
-import { Accessor, JSX, createContext, createEffect, createSignal, useContext } from 'solid-js';
+import { JSX, createContext, useContext } from 'solid-js';
 import { SetStoreFunction } from 'solid-js/store';
-import { sample } from '~/lib/array';
 import { createLocalStore } from '~/lib/create-local-store';
-import { Background } from '~/types';
 import { BackgroundsState, createBackgrounds } from './create-backgrounds';
 
 export type Settings = {