Move styles into Vite

Make sidebar work better

reminder-dashboard/package.json

@@ -16,7 +16,7 @@
 		"react-colorful": "^5.6.1",
 		"react-query": "^3.39.3",
 		"tributejs": "^5.1.3",
-		"wouter": "^2.12.1"
+		"wouter": "^3.0"
 	},
 	"devDependencies": {
 		"@preact/preset-vite": "^2.5.0",
@@ -25,7 +25,8 @@
 		"eslint-config-preact": "^1.3.0",
 		"prettier": "^3.0.3",
 		"react-datepicker": "^4.21.0",
+		"sass": "^1.71.1",
 		"typescript": "^5.2.2",
-		"vite": "^4.3.2"
+		"vite": "^5.1"
 	}
 }

reminder-dashboard/src/api.ts

@@ -8,6 +8,7 @@ type UserInfo = {
 };
 
 export type GuildInfo = {
+    id: string;
     patreon: boolean;
     name: string;
     error?: string;

reminder-dashboard/src/components/Reminder/IntervalSelector/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "preact/hooks";
-import { useReminder } from "./ReminderContext";
+import "./style.scss";
 
 function divmod(a: number, b: number) {
     return [Math.floor(a / b), a % b];

reminder-dashboard/src/components/Reminder/IntervalSelector/style.scss

@@ -0,0 +1,42 @@
+div.interval-group {
+    height: unset !important;
+}
+
+div.interval-group .clear:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+div.interval-group .no-break {
+    text-wrap: avoid;
+    white-space: nowrap;
+}
+
+div.interval-group .clear {
+    border: none;
+    background: none;
+    padding: 1px;
+    margin-right: -3px;
+}
+
+div.interval-group > .interval-group-left input {
+    -webkit-appearance: none;
+    border-style: none;
+    background-color: #eee;
+    font-size: 1rem;
+    font-family: monospace;
+}
+
+div.interval-group > .interval-group-left input.w2 {
+    width: 3ch;
+}
+
+div.interval-group > .interval-group-left input.w3 {
+    width: 3ch;
+}
+
+div.interval-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}

reminder-dashboard/src/components/Reminder/Settings.tsx

@@ -6,14 +6,12 @@ import { fetchUserInfo } from "../../api";
 import { useReminder } from "./ReminderContext";
 import { Attachment } from "./Attachment";
 import { TTS } from "./TTS";
-import { useTimezone } from "../App/TimezoneProvider";
 import { TimeInput } from "./TimeInput";
 
 export const Settings = () => {
     const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
 
     const [reminder, setReminder] = useReminder();
-    const [timezone] = useTimezone();
 
     if (!userFetched) {
         return <></>;

reminder-dashboard/src/components/Sidebar/GuildEntry.tsx

@@ -22,10 +22,9 @@ export const GuildEntry = ({ guild }: Props) => {
                 data-name={guild.name}
                 href={`/${guild.id}/reminders`}
             >
-                <span class="icon">
+                <>
-                    <i class="fas fa-map-pin"></i>
-                </span>{" "}
                     <span class="guild-name">{guild.name}</span>
+                </>
             </Link>
         </li>
     );

reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx

@@ -44,7 +44,10 @@ export const MobileSidebar = ({ children }) => {
                 class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
                 id="mobileSidebar"
                 style={{
-                    display: sidebarOpen ? "block" : "none",
+                    display: sidebarOpen ? "inherit" : "none",
+                }}
+                onClick={() => {
+                    setSidebarOpen(!sidebarOpen);
                 }}
             >
                 {children}

reminder-dashboard/src/components/Sidebar/index.tsx

@@ -6,6 +6,7 @@ import { Wave } from "./Wave";
 import { GuildEntry } from "./GuildEntry";
 import { fetchUserGuilds, GuildInfo } from "../../api";
 import { TimezonePicker } from "../TimezonePicker";
+import "./style.scss";
 
 type ContentProps = {
     guilds: GuildInfo[];
@@ -22,7 +23,30 @@ const SidebarContent = ({ guilds }: ContentProps) => {
             <Wave />
             <aside class="menu">
                 <p class="menu-label">Servers</p>
-                <ul class="menu-list guildList">{guildEntries}</ul>
+                <ul class="menu-list guildList">
+                    {guildEntries}
+                    <GuildEntry guild={{ id: "1", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "2", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "3", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "4", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "5", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "6", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "7", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "8", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "9", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
+                </ul>
                 <div class="aside-footer">
                     <p class="menu-label">Options</p>
                     <ul class="menu-list">

reminder-dashboard/src/components/Sidebar/style.scss

@@ -0,0 +1,51 @@
+div.brand {
+    text-align: center;
+    height: 52px;
+    background-color: #8fb677;
+}
+
+img.dashboard-brand {
+    text-align: center;
+    height: 100%;
+    width: auto;
+}
+
+ul.guildList {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: auto;
+    margin-bottom: 12px;
+}
+
+div.dashboard-sidebar svg {
+    flex-shrink: 0;
+}
+
+div.mobile-sidebar {
+    z-index: 100;
+    min-height: 100vh;
+    position: absolute;
+    top: 0;
+}
+
+div.mobile-sidebar.is-active {
+    display: flex;
+}
+
+aside.menu {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.dashboard-sidebar {
+    display: flex;
+    flex-direction: column;
+    background-color: #363636;
+    width: 230px !important;
+    padding-right: 0;
+}
+
+.aside-footer {
+    justify-self: end;
+}

reminder-dashboard/src/index.tsx

@@ -1,4 +1,5 @@
 import { render } from "preact";
 import { App } from "./components/App";
+import "./styles.scss";
 
 render(<App />, document.getElementById("app"));

reminder-dashboard/src/styles.scss

@@ -0,0 +1,49 @@
+/* override styles for when the div is collapsed */
+div.reminderContent.is-collapsed .column.discord-frame {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .column.settings {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .reminder-settings {
+    margin-bottom: 0;
+}
+
+div.reminderContent.is-collapsed .button-row {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .button-row-edit {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .reminder-topbar {
+    padding-bottom: 0;
+}
+
+div.reminderContent.is-collapsed .invert-collapses {
+    display: inline-flex;
+}
+
+div.reminderContent .invert-collapses {
+    display: none;
+}
+
+div.reminderContent.is-collapsed input[name="name"] {
+    display: inline-flex;
+    flex-grow: 1;
+    border: none;
+    background: none;
+    box-shadow: none;
+    opacity: 1;
+}
+
+div.reminderContent.is-collapsed .hide-box {
+    display: inline-flex;
+}
+
+div.reminderContent.is-collapsed .hide-box i {
+    transform: rotate(90deg);
+}

web/static/css/style.css

@@ -6,58 +6,6 @@ button {
     font-weight: 700;
 }
 
-/* override styles for when the div is collapsed */
-div.reminderContent.is-collapsed .column.discord-frame {
-    display: none;
-}
-
-div.reminderContent.is-collapsed .column.settings {
-    display: none;
-}
-
-div.reminderContent.is-collapsed .reminder-settings {
-    margin-bottom: 0;
-}
-
-div.reminderContent.is-collapsed .button-row {
-    display: none;
-}
-
-div.reminderContent.is-collapsed .button-row-edit {
-    display: none;
-}
-
-div.reminderContent.is-collapsed .reminder-topbar {
-    padding-bottom: 0;
-}
-
-div.reminderContent.is-collapsed .invert-collapses {
-    display: inline-flex;
-}
-
-div.reminderContent .invert-collapses {
-    display: none;
-}
-
-div.reminderContent.is-collapsed input[name="name"] {
-    display: inline-flex;
-    flex-grow: 1;
-    border: none;
-    background: none;
-    box-shadow: none;
-    opacity: 1;
-}
-
-div.reminderContent.is-collapsed .hide-box {
-    display: inline-flex;
-}
-
-div.reminderContent.is-collapsed .hide-box i {
-    transform: rotate(90deg);
-}
-
-/* END */
-
 /* dashboard styles */
 .hide-box {
     border: none;
@@ -160,52 +108,6 @@ div.reminderContent {
     border-radius: 8px;
 }
 
-/* Interval inputs */
-div.interval-group {
-    height: unset !important;
-}
-
-div.interval-group .clear:focus {
-    outline: none;
-    box-shadow: none !important;
-}
-
-div.interval-group .no-break {
-    text-wrap: avoid;
-    white-space: nowrap;
-}
-
-div.interval-group .clear {
-    border: none;
-    background: none;
-    padding: 1px;
-    margin-right: -3px;
-}
-
-div.interval-group > .interval-group-left input {
-    -webkit-appearance: none;
-    border-style: none;
-    background-color: #eee;
-    font-size: 1rem;
-    font-family: monospace;
-}
-
-div.interval-group > .interval-group-left input.w2 {
-    width: 3ch;
-}
-
-div.interval-group > .interval-group-left input.w3 {
-    width: 3ch;
-}
-
-div.interval-group {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-/* !Interval inputs */
-
 .left-pad {
     padding-left: 1rem;
     padding-right: 0.2rem;
@@ -291,69 +193,10 @@ img.rounded-corners {
     border-radius: 12px;
 }
 
-div.brand {
-    text-align: center;
-    height: 52px;
-    background-color: #8fb677;
-}
-
-img.dashboard-brand {
-    text-align: center;
-    height: 100%;
-    width: auto;
-}
-
-div.dashboard-sidebar {
-    background-color: #363636;
-    width: 230px !important;
-    padding-right: 0;
-}
-
-ul.guildList {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: auto;
-}
-
-div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
-    flex-shrink: 0;
-    flex-grow: 0;
-    position: fixed;
-    bottom: 0;
-    width: 226px;
-}
-
-div.dashboard-sidebar svg {
-    flex-shrink: 0;
-}
-
-div.mobile-sidebar {
-    z-index: 100;
-    min-height: 100vh;
-    position: absolute;
-    top: 0;
-    display: none;
-    flex-direction: column;
-}
-
 #expandAll {
     width: 60px;
 }
 
-div.mobile-sidebar .aside-footer {
-    margin-top: auto;
-}
-
-div.mobile-sidebar.is-active {
-    display: flex;
-}
-
-aside.menu {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
-
 div.dashboard-frame {
     min-height: 100vh;
     margin-bottom: 0 !important;