Add new "shortname" field to the Stylesheet (WIP)

.eslintrc.json

@@ -49,6 +49,13 @@
             }
         ],
         "newline-before-return": "error",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "argsIgnorePattern": "^_"
+            }
+        ],
         "object-curly-newline": [
             "error",
             {
@@ -59,7 +66,7 @@
             "error",
             "always"
         ],
-        "object-property-newline": "error",
+        // "object-property-newline": "error",
         "padding-line-between-statements": [
             "error",
             {

.vscode/settings.json

@@ -2,8 +2,9 @@
     "files.eol": "\n",
     "eslint.enable": true,
     "eslint.run": "onSave",
+    "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-        "source.fixAll": true,
-        "source.organizeImports": true
+        "source.fixAll": "explicit",
+        "source.organizeImports": "explicit"
     }
 }

dist/options.css

@@ -1,4 +1,6 @@
 :root {
+    --main-width: 800px;
+
     /* Color */
     --color-primary: #F03738;
     --color-primary-shade-1: #F98484;
@@ -89,8 +91,9 @@ body {
 }
 
 .column {
-    max-width: 650px;
+    max-width: var(--main-width);
     margin: auto;
+    padding-inline: var(--space-4);
 }
 
 /* Header */
@@ -99,6 +102,7 @@ header {
     background-color: var(--color-neutral-7);
     color: var(--color-neutral-0);
     padding: var(--space-3);
+    padding-inline: 0;
     position: fixed;
     top: 0;
     left: 0;
@@ -178,15 +182,15 @@ main {
 /* Buttons > Small */
 
 .button--small {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     min-width: 32px;
     height: 32px;
     border-radius: var(--border-radius);
     padding-inline: var(--space-2);
     margin-left: var(--space-2);
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     outline: 0;
     cursor: pointer;
     box-shadow: none;
@@ -212,6 +216,35 @@ main {
     height: auto;
 }
 
+/* Table */
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table td,
+table th {
+    padding: var(--space-2);
+}
+
+table th {
+    font-size: 12px;
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--color-neutral-2);
+}
+
+table tbody tr td {
+    border-bottom: 1px solid var(--color-neutral-2);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+table tr:last-child td {
+    border-bottom: 0;
+}
+
 /* Stylesheets Form */
 
 .stylesheets-form {
@@ -245,16 +278,18 @@ main {
 /* Stylesheets List */
 
 .stylesheets-list {
+    padding: var(--space-2);
     margin-top: var(--space-6);
     width: 100%;
+    text-align: left;
+    background-color: var(--color-neutral-0);
+    border-radius: var(--border-radius);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 /* Stylesheet Item */
 
 .stylesheet {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     gap: var(--space-2);
     height: 50px;
     padding: var(--space-2);
@@ -305,3 +340,61 @@ main {
     text-align: left;
     font-size: 12px;
 }
+
+.whitespace-nowrap {
+    white-space: nowrap;
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.modal__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modal__main {
+    background-color: #FFF;
+    padding: var(--space-4);
+    position: relative;
+    z-index: 1;
+    opacity: 0;
+    border-radius: var(--border-radius);
+}
+
+.modal--show {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.modal--show .modal__main {
+    animation: fadeUp 300ms ease-out forwards;
+}
+
+@keyframes fadeUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

src/Stylesheet.ts

@@ -0,0 +1,15 @@
+import { getStylesheetName } from "./utils";
+
+export class Stylesheet {
+    url: string;
+    shortname: string;
+
+    constructor (url: string, shortname = "") {
+        this.url = url;
+        this.shortname = shortname;
+    }
+
+    get name () {
+        return this.shortname || getStylesheetName(this.url);
+    }
+}

src/common/If.tsx

@@ -0,0 +1,16 @@
+interface IProps {
+    children: JSX.Element | JSX.Element[] | string;
+    condition: boolean;
+}
+
+function If (props: IProps) {
+    const { children, condition } = props;
+
+    if (condition) {
+        return <>{children}</>;
+    }
+
+    return null;
+}
+
+export default If;

src/options/Options.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useReducer } from "react";
+import { Stylesheet } from "../Stylesheet";
 import { updateStorage } from "../storage";
 import { StorageData } from "../types";
 import { OptionsReducer } from "./OptionsReducer";
-import { StylesheetForm } from "./StylesheetForm";
-import { StylesheetList } from "./StylesheetList";
+import { StylesheetForm } from "./components/StylesheetForm";
+import { StylesheetListTable } from "./components/StylesheetListTable";
 
 interface IProps {
     initialState: StorageData;
@@ -23,25 +24,25 @@ function Options (props: IProps) {
         });
     };
 
-    const updateStylesheet = (url: string, newURL: string) => {
+    const updateStylesheet = (prevStylesheet: Stylesheet, newStylesheet: Stylesheet) => {
         setState({
             type: "update",
-            url: url,
-            newURL: newURL,
+            prevStyleheet: prevStylesheet,
+            newStylesheet: newStylesheet
         });
     };
 
     const removeStylesheet = (url: string) => {
         setState({
             type: "remove",
-            url: url,
+            url: url
         });
     };
 
     return (
         <>
             <StylesheetForm onSubmit={addStylesheet} />
-            <StylesheetList
+            <StylesheetListTable
                 list={state?.stylesheets}
                 onRemove={removeStylesheet}
                 onUpdate={updateStylesheet}