Add file viwer route

app/routes.py

@@ -1,15 +1,11 @@
-from email.mime import image
-
-from alembic.util import obfuscate_url_pw
-
 from app import app
-from flask import render_template, flash, redirect, url_for, request, session
+from flask import render_template, flash, redirect, url_for, request, session, send_file
 from app.forms import LoginForm, SettingsForm
 from flask_login import login_user, current_user, logout_user, login_required
 import sqlalchemy as sa
 from app import db
 from app.models import User, Setting
-from werkzeug.datastructures import FileStorage
+import os
 import json
 from flask_babel import _
 import base64
@@ -17,18 +13,45 @@ import random
 from wordfreq import top_n_list
 import secrets
 import string
+import glob
+import time
 
-def gen_username():
+def gen_username() -> str:
     words = top_n_list("en", 5000)
     prefix = random.randint(1000, 9999)
     return f"{random.choice(words)}{random.choice(words)}{prefix}"
 
-def gen_password():
+def gen_password() -> str:
     characters = string.ascii_letters + string.digits
     password = ''.join(secrets.choice(characters) for i in range(20))
     return password
+def get_file_suffix(path: str) -> str:
+    return os.path.splitext(path)[1].strip('.') # in case of multiple exts, like .tar.gz, it only splits on the last one
 
+def get_file_icon_url(path: str) -> str:
+    if os.path.isdir(path):
+        return url_for("static", filename=f"images/extension-icons/directory.svg")
 
+    suffix = get_file_suffix(path)
+    if suffix:
+        if suffix in ['apk', 'deb', 'dmg', 'exe', 'jpg', 'mp3', 'pbf', 'pdf', 'png',
+                      'ppt', 'pptx']:
+            return url_for("static", filename=f"images/extension-icons/ext-{suffix}.svg")
+    return url_for("static", filename=f"images/extension-icons/ext-unknown.svg")
+
+def get_files_in_path(path: str):
+    file_list = []
+    if os.path.exists(path):
+        list_of_files = glob.glob(path + "/*", recursive=True)
+        file_list = [
+            {"name": x.replace(path, "").strip("/"), "path": x, "is_file": os.path.isfile(x),
+             "is_dir": os.path.isdir(x),
+             "filetype": get_file_suffix(x), "last_modified": time.ctime(os.path.getmtime(x)),
+             "icon_url": get_file_icon_url(x),
+             "relative_path": x.replace(app.config["BUTTERBOX_USB_PATH"], "")} for x
+            in list_of_files]
+        print(file_list)
+    return file_list
 
 def get_setting(name) -> str:
     setting = db.session.scalar(sa.select(Setting).where(Setting.key == name))
@@ -36,7 +59,6 @@ def get_setting(name) -> str:
 
 def set_setting(name: str, value: str):
     setting = db.session.scalar(sa.select(Setting).where(Setting.key == name))
-    print(f"I have changed {setting.key}")
     setting.value = value
     db.session.add(setting)
 
@@ -56,6 +78,8 @@ def index():
     enable_deltachat = get_setting("enable_deltachat")
     service_array = []
     usb_inserted = False # actual test of whether USB is inserted
+    if os.path.exists(app.config["BUTTERBOX_USB_PATH"]):
+        usb_inserted = True
     usb_has_maps = False # actual test of whether USB has maps folder
     usb_has_appstore = False # actual test of whether USB has an appstore
     if enable_deltachat == 'true':
@@ -73,12 +97,31 @@ def index():
         service_array.append({
                              "name": name,
                              "image": url_for("static", filename="images/explore-icon.svg"),
-                             "url": url_for("usb")})
+                             "url": url_for("files", path=""),})
     return render_template('index.html', title='Home', get_setting=get_setting, services=service_array)
 
-@app.route('/usb')
+@app.route('/files/', defaults={'path': ''})
-def usb():
+@app.route('/files/<path:path>')
-    return render_template('usb-file-viewer.html', title='File Viewer')
+def files(path):
+    base_path = app.config["BUTTERBOX_USB_PATH"]
+    if not os.path.exists(base_path):
+        flash(_('No USB inserted.'))
+    current_path = os.path.join(base_path, path)
+    render_files = []
+    if os.path.exists(current_path):
+        render_files = get_files_in_path(current_path)
+        if not render_files:
+            flash(_('Empty directory.'))
+    else:
+        flash(_('Path does not exist.'))
+    return render_template('usb-file-viewer.html', title='File Viewer', current_path=current_path, render_files=render_files, get_setting=get_setting)
+
+@app.route('/serve_file/<path:filepath>')
+def serve_file(filepath):
+    full_path = os.path.realpath(filepath)
+    if not filepath.startswith(app.config["BUTTERBOX_USB_PATH"]):
+        redirect(url_for('files', path=""))
+    return send_file(full_path)
 
 @app.route('/login', methods=['GET', 'POST'])
 def login():
@@ -159,7 +202,6 @@ def admin():
             dump_settings("settings.txt")
             flash(_("⚠️ Changes applied! Please wait for the box to restart."))
 
-
     return render_template('admin.html', get_setting=get_setting, form=form)
 
 

app/static/images/extension-icons/directory.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9757 6H24.7535L26.6498 7.73281H13.5637C13.8132 6.76612 14.7691 6 15.9757 6Z" fill="#7571ED" stroke="#7571ED"/>
+<path d="M13.0377 5H4.00943C2.35425 5 1.01505 6.2375 1.01505 7.75L1 24.25C1 25.7625 2.35425 27 4.00943 27H28.0849C29.7401 27 31 25.7512 31 24.2387V10.5C31 8.9875 29.7307 7.8 28.0755 7.8H16.0943L13.0377 5Z" fill="#C6C5C3"/>
+</svg>

app/static/images/extension-icons/ext-apk.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#ADCB4E" />
+    <path
+        d="M11.2 12.3333L11.2008 19.8098C11.2008 20.4915 11.7576 21.0417 12.4464 21.0417H12.8V23.8458C12.8 24.4823 13.3656 25 14.008 25C14.6528 25 15.2 24.4823 15.2 23.845V21.0417H16.8V23.8458C16.8 24.4823 17.3656 25 18.0088 25C18.6536 25 19.2 24.4823 19.2 23.845V21.0417L19.5552 21.0409C20.2416 21.0409 20.8 20.4899 20.8 19.8082V12.3333H11.2ZM24 13.4979C24 12.8606 23.444 12.3333 22.8 12.3333C22.156 12.3325 21.6 12.8614 21.6 13.4987V18.3326C21.6 18.9707 22.1552 19.4583 22.8 19.4583C23.444 19.4583 24 18.9715 24 18.3326V13.4979ZM10.4 13.4979C10.4 12.8606 9.844 12.3333 9.2 12.3333C8.556 12.3325 8 12.8614 8 13.4987V18.3326C8 18.9707 8.5552 19.4583 9.2 19.4583C9.844 19.4583 10.4 18.9715 10.4 18.3326V13.4979ZM18.3608 7.70921L19.1128 6.2375C19.1672 6.133 19.0976 6 18.9824 6C18.9296 6 18.8784 6.03008 18.8512 6.08313L18.092 7.56988C16.8672 6.98642 15.2568 6.92704 13.9088 7.56988L13.1488 6.08313C13.1224 6.03008 13.0712 6 13.0176 6C12.9024 6 12.8328 6.133 12.8872 6.2375L13.6392 7.70921C12.1632 8.52779 11.2 9.75488 11.2 11.5409H20.8C20.8 9.75488 19.8368 8.52779 18.3608 7.70921ZM14.0008 9.95833C13.78 9.95833 13.6 9.781 13.6 9.5625C13.6 9.34558 13.78 9.16667 14.0008 9.16667C14.2216 9.16667 14.4 9.34558 14.4 9.5625C14.4 9.781 14.2216 9.95833 14.0008 9.95833ZM17.9992 9.95833C17.7784 9.95833 17.6 9.781 17.6 9.5625C17.6 9.34558 17.7784 9.16667 17.9992 9.16667C18.22 9.16667 18.4 9.34558 18.4 9.5625C18.4 9.781 18.22 9.95833 17.9992 9.95833Z"
+        fill="white" />
+</svg>
+    

app/static/images/extension-icons/ext-deb.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#FED148" />
+    <path
+        d="M23.6276 22.2553C23.1387 21.8279 23.3289 20.8839 22.8213 20.4182C23.3129 17.1934 21.9351 14.351 20.2924 12.5292C18.9138 11.0006 19.3582 9.51329 19.3582 8.22625C19.3582 6.16967 18.5751 4 16.2027 4C13.6667 4 12.9716 6.28083 12.9467 7.58225C12.8862 10.7083 13.5324 11.521 11.8356 13.7961C9.83911 16.4727 9.54489 19.1426 9.99556 20.559C9.78489 20.8235 9.50044 21.1168 8.96889 21.3592C7.50044 22.0492 8.57689 23.204 8.17067 24.0234C8.05511 24.2563 8 24.4997 8 24.7326C8 25.4513 8.52978 26.0733 9.49244 25.9803C10.7911 25.8557 11.9893 26.8476 12.7644 26.8476C13.4489 26.8476 14.0107 26.4279 14.272 25.85C15.496 25.5251 17.0071 25.5663 18.2302 25.9065C18.4498 26.5687 19.0453 27 19.7076 27C21.1573 27 21.4364 25.228 23.0996 24.6281C23.6987 24.4125 24 23.7858 24 23.2021C24 22.8284 23.8764 22.4728 23.6276 22.2553ZM15.4969 12.2263C15.2133 12.2263 14.9787 11.9791 14.608 11.682C14.1387 11.3063 13.6613 11.0898 13.6667 10.6949C13.6667 10.4237 14.0036 10.3403 14.4391 10.0423C14.9067 9.72317 15.0889 9.39925 15.5493 9.39925C16.0204 9.39925 16.1627 9.65608 16.8027 9.95412C17.432 10.2483 17.8702 10.3633 17.8702 10.6949C17.8702 11.0351 17.2116 11.2785 16.8409 11.5268C16.296 11.889 16.016 12.2263 15.4969 12.2263ZM16.9769 7.22862C17.7609 7.36375 17.8489 8.84917 17.4738 9.58037L17.1582 9.44142C17.3218 8.92104 17.3191 8.06429 16.7716 8.00967C16.424 7.97517 16.2 8.46967 16.152 8.89325C16.016 8.83192 15.8676 8.78783 15.6871 8.77154C15.7422 7.887 16.272 7.10692 16.9769 7.22862ZM13.952 7.54583C14.5529 7.38483 14.9076 8.13808 14.9102 8.92104L14.6347 9.10312C14.5973 8.77442 14.4613 8.2435 14.12 8.35658C13.7547 8.47925 13.8142 9.39446 14.0178 9.58229L13.7458 9.74521C13.3724 9.06767 13.3733 7.70108 13.952 7.54583ZM12.072 25.987C10.3271 25.1313 9.73422 25.3258 9.40089 25.3258C8.71022 25.3258 8.48444 24.7709 8.744 24.2457C8.96444 23.8001 8.896 23.3334 8.84178 22.9587C8.75822 22.3847 8.74311 22.1978 9.26667 21.9505C9.99111 21.619 10.3129 21.1925 10.5529 20.8734C11.2267 19.9754 11.9067 21.388 12.464 22.6463C12.8258 23.4618 13.5378 23.8749 13.7573 24.7786C13.9591 25.6133 13.1262 26.5045 12.072 25.987ZM18.2827 24.1911C17.0524 24.8361 15.4853 25.1322 14.3129 24.4777C14.1396 23.9381 13.8622 23.5893 13.5636 23.2385C14.0427 23.1025 14.3982 22.4585 13.9724 21.8116C13.5182 21.1206 12.5902 20.6386 11.6524 19.8566C10.7751 19.1254 10.4978 17.3228 11.6924 15.3083C11.1102 17.0928 11.4507 18.7372 11.7431 19.2078C11.8036 18.261 11.8729 16.6797 13.0729 14.7851C13.6782 13.8287 13.6871 12.5656 13.7004 11.7759L14.2516 12.1823C14.6569 12.5052 14.9964 12.8608 15.4836 12.8608C16.2036 12.8608 16.6018 12.4142 17.1564 12.0433C17.3733 11.8995 17.7013 11.7539 17.9769 11.5517C18.4391 13.9245 20.3538 16.7784 20.4613 18.4037C20.9067 17.4147 20.3351 15.0362 20.3351 15.0362C21.0836 16.2676 21.1431 17.294 21.176 18.5532C21.6996 18.7842 22.2613 19.386 22.3129 20.1786L22.0951 20.1518C21.9831 19.271 19.7778 17.9773 19.5796 19.6352C18.5218 19.8087 18.9067 21.6151 18.6933 22.7862C18.5956 23.3219 18.4142 23.7455 18.2827 24.1911ZM22.5902 24.1518C21.7147 24.516 21.1236 25.2894 20.7173 25.7695C19.9351 26.6952 18.9004 26.2515 18.7902 25.3852C18.6738 24.4595 19.1102 23.9544 19.2987 22.9185C19.4702 21.9726 19.2782 20.5169 19.6818 20.3616C19.944 22.0416 21.5182 21.3353 21.8773 20.8772C22.4613 20.8772 22.5102 21.09 22.6409 21.6793C22.7227 22.0483 22.8356 22.3588 23.1547 22.7239C23.5262 23.1523 23.4124 23.8097 22.5902 24.1518ZM15.4791 11.6878C14.9004 11.6878 14.4676 11.2728 14.1156 10.9508C13.9351 10.7869 14.16 10.4841 14.3404 10.6489C14.6844 10.9633 15.0311 11.2958 15.4791 11.2958C16.0187 11.2958 16.4942 10.7984 17.1387 10.5243C17.3582 10.4314 17.4836 10.7975 17.2658 10.8904C16.64 11.1559 16.1378 11.6878 15.4791 11.6878Z"
+        fill="#5C5B5A" />
+</svg>
+    

app/static/images/extension-icons/ext-dmg.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#676767" />
+    <path
+        d="M19.8143 6C17.6777 6.71428 16.0126 7.42857 16.25 10.5238C18.3866 10.0476 20.2891 8.85714 19.8143 6ZM13.0286 10.2976C10.9714 10.2976 8 12.1071 8 15.5C8 20.25 11.2 25 13.0286 25C14.4 25 15.5429 24.0952 16.4571 24.0952C17.3714 24.0952 18.2857 25 19.6571 25C21.4857 25 23.5429 22.2857 24 19.7976C22.4 18.6667 21.2571 17.9881 21.2571 15.9524C21.2571 14.5952 22.4 13.2381 23.7714 12.1071C23.0857 11.2024 21.7143 10.2976 20.3429 10.2976C18.9714 10.2976 17.4967 11.3714 16.4571 11.4286C15.5429 11.4286 14.4 10.2976 13.0286 10.2976Z"
+        fill="white" />
+</svg>
+    

app/static/images/extension-icons/ext-exe.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#1BACEF"/>
+    <path d="M8 16V10.236L14.6667 9.33267V16H8ZM15.3333 16H24V8L15.3333 9.20467V16ZM14.6667 16.6667H8V21.764L14.6667 22.6673V16.6667ZM15.3333 16.6667V22.796L24 24V16.6667H15.3333Z" fill="white"/>
+    </svg>
+    

app/static/images/extension-icons/ext-jpg.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#69A0F2"/>
+    <path d="M25 23V9C25 7.9 24.1 7 23 7H9C7.9 7 7 7.9 7 9V23C7 24.1 7.9 25 9 25H23C24.1 25 25 24.1 25 23ZM12.5 17.5L15 20.51L18.5 16L23 22H9L12.5 17.5Z" fill="white"/>
+    </svg>
+    

app/static/images/extension-icons/ext-mp3.svb

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#61D17A"/>
+    <path d="M22.8871 8.96505C22.8894 8.57365 22.7066 8.2049 22.3949 7.96818C22.0824 7.73225 21.6769 7.65725 21.3011 7.76505L13.1011 10.1354C12.5691 10.2916 12.2043 10.7807 12.205 11.3354V19.3214C11.5753 18.6526 10.6683 18.3175 9.75502 18.4151C8.84174 18.5128 8.02619 19.0323 7.55186 19.819C7.07686 20.605 6.99717 21.5682 7.33701 22.4222C7.67607 23.2761 8.39561 23.9214 9.28067 24.1675C10.1657 24.4137 11.115 24.2308 11.8463 23.6746C12.5777 23.1183 13.0057 22.2519 13.0049 21.3339V14.5716L22.0869 11.9457V16.4817C21.4573 15.813 20.5502 15.4778 19.6369 15.5755C18.7237 15.6731 17.9081 16.1927 17.4338 16.9786C16.9588 17.7653 16.8791 18.7286 17.2189 19.5826C17.558 20.4365 18.2775 21.0818 19.1626 21.328C20.0477 21.5741 20.9969 21.3912 21.7283 20.835C22.4587 20.2787 22.8876 19.4123 22.8869 18.4937L22.8871 8.96505Z" fill="white"/>
+    </svg>
+    

app/static/images/extension-icons/ext-pbf.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1788_1370)">
+        <rect width="32" height="32" rx="16" fill="#90EE90" />
+        <rect width="32" height="32" rx="16" fill="black" fill-opacity="0.2" />
+        <path
+            d="M24.5376 7.04002C23.8754 6.63815 23.0544 6.60074 22.3584 6.94085L18.3104 8.9792L14.8704 7.0144C14.2186 6.64971 13.4292 6.62816 12.7584 6.95679L7.63845 9.51679C7.26637 9.70284 6.95344 9.98877 6.73469 10.3425C6.51594 10.6964 6.4001 11.1041 6.4 11.52V23.04C6.39489 23.8216 6.7976 24.5492 7.4624 24.96C8.12458 25.3619 8.94562 25.3993 9.64157 25.0592L13.6896 23.0368L17.1296 25.0016C17.7815 25.3657 18.5707 25.3873 19.2415 25.0592L24.3615 22.4992C24.7361 22.312 25.0506 22.0236 25.2696 21.6667C25.4884 21.3098 25.6029 20.8987 25.6 20.48V8.96002C25.6051 8.17845 25.2024 7.45085 24.5376 7.04002ZM12.16 21.6384L8.784 23.3248C8.73941 23.3476 8.69014 23.3597 8.64004 23.36C8.57983 23.3615 8.52014 23.3472 8.46723 23.3184C8.37275 23.2578 8.31691 23.1522 8.32004 23.04V11.52C8.32046 11.3995 8.38848 11.2894 8.49608 11.2352L12.1601 9.40153L12.16 21.6384ZM17.92 23.2384L14.6432 21.3536C14.4677 21.254 14.2777 21.1828 14.08 21.1424V8.77437L17.3568 10.6463C17.5325 10.7448 17.7225 10.815 17.92 10.8544V23.2384ZM23.68 20.48C23.6796 20.6005 23.6116 20.7106 23.504 20.7648L19.84 22.5985V10.3617L23.216 8.6721C23.2607 8.65043 23.3101 8.63939 23.3599 8.64012C23.4201 8.63856 23.4798 8.65293 23.5327 8.68168C23.6272 8.74231 23.683 8.84793 23.6799 8.96011L23.68 20.48Z"
+            fill="white" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1788_1370">
+            <rect width="32" height="32" rx="16" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
+    

app/static/images/extension-icons/ext-pdf.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#F26969" />
+    <path
+        d="M23.2 8H12.4C11.41 8 10.6 8.72 10.6 9.6V19.2C10.6 20.08 11.41 20.8 12.4 20.8H23.2C24.19 20.8 25 20.08 25 19.2V9.6C25 8.72 24.19 8 23.2 8ZM15.55 14C15.55 14.664 14.947 15.2 14.2 15.2H13.3V16.8H11.95V12H14.2C14.947 12 15.55 12.536 15.55 13.2V14ZM20.05 15.6C20.05 16.264 19.447 16.8 18.7 16.8H16.45V12H18.7C19.447 12 20.05 12.536 20.05 13.2V15.6ZM23.65 13.2H22.3V14H23.65V15.2H22.3V16.8H20.95V12H23.65V13.2ZM13.3 14H14.2V13.2H13.3V14ZM8.8 11.2H7V22.4C7 23.28 7.81 24 8.8 24H21.4V22.4H8.8V11.2ZM17.8 15.6H18.7V13.2H17.8V15.6Z"
+        fill="white" />
+</svg>
+    

app/static/images/extension-icons/ext-png.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#69A0F2"/>
+    <path d="M25 23V9C25 7.9 24.1 7 23 7H9C7.9 7 7 7.9 7 9V23C7 24.1 7.9 25 9 25H23C24.1 25 25 24.1 25 23ZM12.5 17.5L15 20.51L18.5 16L23 22H9L12.5 17.5Z" fill="white"/>
+    </svg>
+    

app/static/images/extension-icons/ext-ppt.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#F26925"/>
+    <path d="M7 10.6839C7 10.1697 7.38998 9.73926 7.90171 9.68872L23.9017 8.10847C24.49 8.05037 25 8.5125 25 9.10363V22.8964C25 23.4875 24.49 23.9496 23.9017 23.8915L7.90171 22.3113C7.38998 22.2607 7 21.8303 7 21.3161V10.6839Z" fill="white"/>
+    <path d="M20 14.4756C20 14.9035 19.8939 15.3047 19.6817 15.6791C19.4774 16.0535 19.1513 16.3553 18.7033 16.5845C18.2633 16.8138 17.7053 16.9284 17.0295 16.9284H15.6503V20H14V12H17.0295C17.666 12 18.2083 12.107 18.6562 12.3209C19.1041 12.5349 19.4381 12.829 19.6582 13.2034C19.8861 13.5778 20 14.0019 20 14.4756ZM16.9587 15.6332C17.4145 15.6332 17.7525 15.5339 17.9725 15.3352C18.1925 15.1289 18.3026 14.8424 18.3026 14.4756C18.3026 13.6963 17.8546 13.3066 16.9587 13.3066H15.6503V15.6332H16.9587Z" fill="#F26925"/>
+    </svg>
+    

app/static/images/extension-icons/ext-pptx.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#F26925"/>
+    <path d="M7 10.6839C7 10.1697 7.38998 9.73926 7.90171 9.68872L23.9017 8.10847C24.49 8.05037 25 8.5125 25 9.10363V22.8964C25 23.4875 24.49 23.9496 23.9017 23.8915L7.90171 22.3113C7.38998 22.2607 7 21.8303 7 21.3161V10.6839Z" fill="white"/>
+    <path d="M20 14.4756C20 14.9035 19.8939 15.3047 19.6817 15.6791C19.4774 16.0535 19.1513 16.3553 18.7033 16.5845C18.2633 16.8138 17.7053 16.9284 17.0295 16.9284H15.6503V20H14V12H17.0295C17.666 12 18.2083 12.107 18.6562 12.3209C19.1041 12.5349 19.4381 12.829 19.6582 13.2034C19.8861 13.5778 20 14.0019 20 14.4756ZM16.9587 15.6332C17.4145 15.6332 17.7525 15.5339 17.9725 15.3352C18.1925 15.1289 18.3026 14.8424 18.3026 14.4756C18.3026 13.6963 17.8546 13.3066 16.9587 13.3066H15.6503V15.6332H16.9587Z" fill="#F26925"/>
+    </svg>
+    

app/static/images/extension-icons/ext-unknown.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#EDE8DD"/>
+    <rect width="32" height="32" rx="16" fill="black" fill-opacity="0.1"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.58579 8.58579C9 9.17157 9 10.1144 9 12V20C9 21.8856 9 22.8284 9.58579 23.4142C10.1716 24 11.1144 24 13 24H19C20.8856 24 21.8284 24 22.4142 23.4142C23 22.8284 23 21.8856 23 20V12C23 10.1144 23 9.17157 22.4142 8.58579C21.8284 8 20.8856 8 19 8H13C11.1144 8 10.1716 8 9.58579 8.58579ZM13 11.7059C12.4477 11.7059 12 12.1536 12 12.7059C12 13.2582 12.4477 13.7059 13 13.7059H19C19.5523 13.7059 20 13.2582 20 12.7059C20 12.1536 19.5523 11.7059 19 11.7059H13ZM13 15.4706C12.4477 15.4706 12 15.9183 12 16.4706C12 17.0229 12.4477 17.4706 13 17.4706H19C19.5523 17.4706 20 17.0229 20 16.4706C20 15.9183 19.5523 15.4706 19 15.4706H13ZM13 19.2353C12.4477 19.2353 12 19.683 12 20.2353C12 20.7876 12.4477 21.2353 13 21.2353H17C17.5523 21.2353 18 20.7876 18 20.2353C18 19.683 17.5523 19.2353 17 19.2353H13Z" fill="white"/>
+    </svg>
+    

app/templates/usb-file-viewer.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div>
+<table class="table">
+  <thead>
+    <tr>
+       <th></th>
+      <th>File Name</th>
+      <th>Date modified</th>
+        <th>Download</th>
+    </tr>
+  </thead>
+      <tbody>
+    {% for f in render_files %}
+    <tr>
+        <td><img src="{{ f.icon_url}}"></td>
+        {% if f.is_dir %}
+        <td><a href=".{{ f.relative_path}}">{{ f.name}}</a></td>
+        {% endif %}
+
+        {% if f.is_file %}
+        <td>{{ f.name}}</td>
+        {% endif %}
+
+        <td>{{ f.last_modified}}</td>
+          {% if f.is_file %}
+           <td><a href="{{ url_for('serve_file', filepath=f.path) }}">Download</a></td>
+          {% endif %}
+          {% if f.is_dir %}
+            <td></td>
+          {% endif %}
+      </tr>
+    {% endfor %}
+</tbody>
+</table>
+ {% endblock %}