Features Icons in features panel

app/database/models.py

@@ -104,6 +104,8 @@ class Feature(Base):
     route = Column(String, nullable=False)
     creator = Column(String, nullable=True)
     description = Column(String, nullable=False)
+    icon = Column(String, nullable=False)
+    followers = Column(Integer, default=0)
 
     users = relationship("User", secondary=UserFeature.__tablename__)
 

app/internal/features.py

@@ -8,7 +8,7 @@
 
 from app.database.models import Feature, UserFeature
 from app.dependencies import SessionLocal, get_db
-from app.internal.features_index import features
+from app.internal.features_index import features, icons
 from app.internal.security.dependencies import current_user
 from app.internal.security.ouath2 import get_authorization_cookie
 from app.internal.utils import create_model
@@ -46,7 +46,9 @@ async def wrapper(*args, **kwargs):
 def create_features_at_startup(session: Session) -> bool:
     for feat in features:
         if not is_feature_exists(feature=feat, session=session):
-            create_feature(**feat, db=session)
+            icon = icons.get(feat["name"])
+            create_feature(**feat, icon=icon, db=session)
+
     return True
 
 
@@ -90,6 +92,13 @@ def update_feature(
     feature.route = feature_dict["route"]
     feature.description = feature_dict["description"]
     feature.creator = feature_dict["creator"]
+
+    icon = icons.get(feature.name)
+    if icon is None:
+        icon = "extension-puzzle"
+
+    feature.icon = icon
+
     session.commit()
     return feature
 
@@ -126,15 +135,22 @@ def create_feature(
     route: str,
     description: str,
     creator: str = None,
+    icon: str = None,
 ) -> Feature:
     """Creates a feature."""
+    db = SessionLocal()
+
+    if icon is None:
+        icon = "extension-puzzle"
+
     return create_model(
         db,
         Feature,
         name=name,
         route=route,
         creator=creator,
         description=description,
+        icon=icon,
     )
 
 
@@ -145,6 +161,7 @@ def create_user_feature_association(
     is_enable: bool,
 ) -> UserFeature:
     """Creates an association."""
+    add_follower(feature_id=feature_id, session=db)
     return create_model(
         db,
         UserFeature,
@@ -181,3 +198,17 @@ def get_user_uninstalled_features(
         )
         .all()
     )
+
+
+def remove_follower(feature_id: int, session: SessionLocal) -> None:
+    feat = session.query(Feature).filter_by(id=feature_id).first()
+    feat.followers -= 1
+    if feat.followers < 0:
+        feat.followers = 0
+    session.commit()
+
+
+def add_follower(feature_id: int, session: SessionLocal) -> None:
+    feat = session.query(Feature).filter_by(id=feature_id).first()
+    feat.followers += 1
+    session.commit()

app/internal/features_index.py

@@ -14,6 +14,41 @@
     Enjoy and good luck :)
 '''
 
+'''
+All icons come from https://ionicons.com/.
+
+If you want your feature to have an icon Go To: https://ionicons.com/
+and follow the next steps:
+
+1. pick an icon and press on it, copy the name.
+2. create dict in the icons list below.
+3. copy and paste your feature name and your
+    icon name you copied earlier (follow the example).
+
+4. And You Are Done. the icon will show automaticly.
+
+If you dont pick an icon your feature will have a default icon.
+
+Example to feature icon stracture:
+
+{
+    .
+    .
+    .
+    "<feature name>": "<icon name>",
+    .
+    .
+    .
+}
+'''
+
+# Add to last!
+icons = {
+    "feature-panel": "albums-outline",
+    "Google Sync": "sync-outline"
+    }
+
+
 '''
 Example to feature stracture:
 

app/main.py

@@ -6,20 +6,20 @@
 from fastapi.staticfiles import StaticFiles
 from sqlalchemy.orm import Session
 
+import app.internal.features as internal_features
 from app import config
 from app.database import engine, models
 from app.dependencies import (
     MEDIA_PATH,
     SOUNDS_PATH,
     STATIC_PATH,
     UPLOAD_PATH,
+    SessionLocal,
     get_db,
     logger,
     templates,
-    SessionLocal,
 )
 from app.internal import daily_quotes, json_data_loader
-import app.internal.features as internal_features
 from app.internal.languages import set_ui_language
 from app.internal.security.ouath2 import auth_exception_handler
 from app.routers.salary import routes as salary
@@ -120,6 +120,7 @@ async def swagger_ui_redirect():
     dayview.router,
     email.router,
     event.router,
+    features.router,
     export.router,
     features.router,
     four_o_four.router,

app/routers/features.py

@@ -1,15 +1,14 @@
-from typing import List
-
 from fastapi import APIRouter, Depends, Request
 from sqlalchemy.sql import exists
 
 from app.database.models import Feature, User, UserFeature
-from app.dependencies import SessionLocal, get_db
+from app.dependencies import SessionLocal, get_db, templates
 from app.internal.features import (
     create_user_feature_association,
     get_user_installed_features,
     get_user_uninstalled_features,
     is_user_has_feature,
+    remove_follower,
 )
 from app.internal.security.dependencies import current_user
 
@@ -24,9 +23,23 @@
 async def index(
     request: Request,
     session: SessionLocal = Depends(get_db),
-) -> List[Feature]:
-    features = session.query(Feature).all()
-    return features
+    user: User = Depends(current_user),
+) -> templates:
+    features = {
+        "installed": get_user_installed_features(
+            session=session,
+            user_id=user.user_id,
+        ),
+        "uninstalled": get_user_uninstalled_features(
+            session=session,
+            user_id=user.user_id,
+        ),
+    }
+
+    return templates.TemplateResponse(
+        "features.html",
+        {"request": request, "features": features},
+    )
 
 
 @router.post("/add")
@@ -84,28 +97,12 @@ async def delete_user_feature_association(
     if not is_exist:
         return False
 
+    remove_follower(feature_id=feature_id, session=session)
+
     session.query(UserFeature).filter_by(
         feature_id=feature_id,
         user_id=user.user_id,
     ).delete()
     session.commit()
 
     return True
-
-
-@router.get("/deactive")
-def deactive(
-    request: Request,
-    session: SessionLocal = Depends(get_db),
-    user: User = Depends(current_user),
-):
-    return get_user_uninstalled_features(user_id=user.user_id, session=session)
-
-
-@router.get("/active")
-def active(
-    request: Request,
-    session: SessionLocal = Depends(get_db),
-    user: User = Depends(current_user),
-):
-    return get_user_installed_features(user_id=user.user_id, session=session)

app/static/features.css

@@ -0,0 +1,81 @@
+.search-box {
+    width: 98%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: var(--text_s);
+    border: 2px solid var(--secondary);
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+    background-color: white;
+  }
+
+.search-box * {
+  margin: 0 0.25rem;
+}
+
+.search-input[type=text],
+.search-input:focus {
+  width: 100%;
+  outline: none;
+  border:none;
+}
+
+/* Feature Panel */
+#features {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 3rem;
+  grid-column-gap: var(--space_l);
+  margin: var(--space_s);
+  align-items: start;
+  width: 100%;
+
+  overflow-y: scroll;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.invisible {
+  display: none;
+  position: absolute;
+  top:0;
+}
+
+.feature-row {
+  display: grid;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+
+  grid-template-columns: 6% 30% auto auto 15%;
+  background-color: var(--surface);
+  margin: var(--space_s) 0;
+  padding: var(--space_s);
+  border-radius: 0.25rem;
+  border: 2px solid transparent;
+}
+
+.feature-row:hover {
+  border: 2px solid var(--primary);
+}
+
+.feature-row div {
+  justify-self: start;
+  width: 100%;
+}
+
+.feature-icon {
+  font-size: var(--text_m);
+  vertical-align: middle;
+}
+
+.information {
+  display: none;
+  grid-column: 2/6;
+  width: 30rem;
+}
+
+.info-box {
+  display: block !important;
+}

app/static/global.css

@@ -3,18 +3,18 @@
   --text_xxs: 0.5rem;  /* 8px */
   --text_xs: 0.75rem;  /* 12px */
   --text_s: 1rem;      /* 16px */
-  --text_m: 1.2rem;   /* 19px */
-  --text_l: 1.5rem;   /* 24px */
+  --text_m: 1.2rem;    /* 19px */
+  --text_l: 1.5rem;    /* 24px */
   --text_xl: 1.75rem;  /* 28px */
   --text_xxl: 2rem;    /* 32px */
 
   /* Spaces */
   --space_xxs: 0.25rem; /* 4px */
-  --space_xs: 0.5rem; /* 8px */
-  --space_s: 0.75rem; /* 12px */
-  --space_m: 1.25rem; /* 20px */
-  --space_l: 2rem;    /* 32px */
-  --space_xl: 4rem;   /* 64px */
+  --space_xs: 0.5rem;   /* 8px */
+  --space_s: 0.75rem;   /* 12px */
+  --space_m: 1.25rem;   /* 20px */
+  --space_l: 2rem;      /* 32px */
+  --space_xl: 4rem;     /* 64px */
 
   /* colors */
   --primary: #24396a;
@@ -62,4 +62,5 @@ body {
 a {
     text-decoration: none;
     color: inherit;
-}
+}
+