feat(Placeholder): added Placeholder component

src/routes/Library/Placeholder/Placeholder.less

@@ -0,0 +1,102 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.placeholder {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+
+    .title {
+        display: flex;
+        flex: 1;
+        align-items: flex-end;
+        font-size: 1.75rem;
+        font-weight: 400;
+        text-align: center;
+        color: var(--primary-foreground-color);
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .image-container {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        padding: 1.5rem 0;
+
+        .image {
+            height: 100%;
+            max-height: 14rem;
+            object-fit: contain;
+        }
+    }
+
+    .button-container {
+        display: flex;
+        flex: 1;
+        align-items: flex-start;
+        margin: 1rem 0;
+
+        .button {
+            flex: none;
+            justify-content: center;
+            height: 4rem;
+            line-height: 4rem;
+            padding: 0 5rem;
+            font-size: 1.1rem;
+            color: var(--primary-foreground-color);
+            text-align: center;
+            border-radius: 3.5rem;
+            background-color: var(--overlay-color);
+            
+            &:hover {
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @xsmall) {
+    .placeholder {
+        padding: 1rem 2rem;
+
+        .title {
+            flex: 0.5;
+        }
+
+        .image-container {
+            flex: 2;
+            padding: 1rem;
+
+            .image {
+                max-height: 10rem;
+            }
+        }
+
+        .button-container {
+            margin: 1rem 0 0;
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .placeholder {
+
+        .image-container {
+            flex: 1;
+        }
+
+        .button-container {
+            .button {
+                width: 100%;
+            }
+        }
+    }
+}

src/routes/Library/Placeholder/Placeholder.tsx

@@ -0,0 +1,32 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Image } from 'stremio/components';
+import styles from './Placeholder.less';
+
+const Placeholder = () => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={styles['placeholder']}>
+            <div className={styles['title']}>
+                {t('LIBRARY_NOT_LOGGED_IN')}
+            </div>
+            <div className={styles['image-container']}>
+                <Image
+                    className={styles['image']}
+                    src={require('/images/not_loggedin_placeholder.png')}
+                    alt={' '}
+                />
+            </div>
+            <div className={styles['button-container']}>
+                <Button className={styles['button']} href={'#/intro?form=login'}>
+                    {t('LOG_IN')}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default Placeholder;

src/routes/Library/Placeholder/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import Placeholder from './Placeholder';
+
+export default Placeholder;