allow space in textfields

dist/styles.css

@@ -154,6 +154,9 @@ nav .progress {
     text-align: center;
     vertical-align: middle;
 }
+body.darwin .btn-group .seperator {
+    line-height: 32px;
+}
 .btn-group .seperator::before {
     content: "|";
 }
@@ -181,12 +184,15 @@ nav.menu-on .btn-group .btn.system, nav.hide-btns .btn-group .btn.system {
 nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
     color: var(--white);
 }
-.btn-group .btn:hover {
+.btn-group .btn:hover, .ms-Nav-compositeLink:hover {
     background-color: #0001;
 }
-.btn-group .btn:active {
+.btn-group .btn:active, .ms-Nav-compositeLink:active {
     background-color: #0002;
 }
+.ms-Nav-compositeLink:hover .ms-Nav-link {
+    background: none;
+}
 .btn-group .btn.disabled, .btn-group .btn.fetching {
     background-color: unset !important;
     color: var(--neutralSecondaryAlt);
@@ -661,11 +667,13 @@ img.favicon {
     cursor: pointer;
     animation-fill-mode: none;
 }
-.card:hover, .card:focus {
-    box-shadow: #0006 0px 5px 40px;
+.card:focus, .list-card:focus {
     outline: none;
 }
-.card:focus::after, .list-card:focus::after {
+.card:hover, .ms-Fabric--isFocusVisible .card:focus {
+    box-shadow: #0006 0px 5px 40px;
+}
+.ms-Fabric--isFocusVisible .card:focus::after, .ms-Fabric--isFocusVisible .list-card:focus::after {
     content: "";
     position: absolute;
     top: 2px;
@@ -705,7 +713,9 @@ img.favicon {
     transition: transform ease-out .12s;
 }
 .card.transform:hover img.head, .card.transform:hover p, .card.transform:hover h3,
-.card.transform:focus img.head, .card.transform:focus p, .card.transform:focus h3 {
+.ms-Fabric--isFocusVisible .card.transform:focus img.head,
+.ms-Fabric--isFocusVisible .card.transform:focus p,
+.ms-Fabric--isFocusVisible .card.transform:focus h3 {
     transform: translateY(-144px);
 }
 .card h3.title {
@@ -759,9 +769,8 @@ img.favicon {
     cursor: pointer;
     box-shadow: #0000 0px 5px 15px;
 }
-.list-card:hover, .list-card:focus {
+.list-card:hover, .ms-Fabric--isFocusVisible .list-card:focus {
     box-shadow: #0004 0px 5px 15px;
-    outline: none;
 }
 .list-card:active {
     box-shadow: #0000 0px 5px 15px, inset #0004 0px 0px 15px;
@@ -800,10 +809,10 @@ img.favicon {
     .ms-Button--commandBar.active .ms-Button-icon {
         color: #c7e0f4;
     }
-    .btn-group .btn:hover {
+    .btn-group .btn:hover, .ms-Nav-compositeLink:hover {
         background-color: #fff1;
     }
-    .btn-group .btn:active {
+    .btn-group .btn:active, .ms-Nav-compositeLink:active {
         background-color: #fff2;
     }
     .settings .loading {

src/components/cards/default-card.tsx

@@ -17,7 +17,6 @@ class DefaultCard extends Card {
                 className={this.className()} 
                 onClick={this.onClick} 
                 onMouseUp={this.onMouseUp}
-                onMouseDown={event => event.preventDefault()}
                 onKeyDown={this.onKeyDown}
                 data-iid={this.props.item._id}
                 data-is-focusable>

src/components/cards/list-card.tsx

@@ -16,7 +16,6 @@ class ListCard extends Card {
                 className={this.className()}
                 onClick={this.onClick}
                 onMouseUp={this.onMouseUp}
-                onMouseDown={event => event.preventDefault()}
                 onKeyDown={this.onKeyDown}
                 data-iid={this.props.item._id}
                 data-is-focusable>

src/components/menu.tsx

@@ -91,8 +91,10 @@ export class Menu extends React.Component<MenuProps> {
         let [type, index] = item.key.split("-")
         if (type === "s") {
             sids = [parseInt(index)]
-        } else {
+        } else if (type === "g") {
             sids = this.props.groups[parseInt(index)].sids
+        } else {
+            return
         }
         this.props.groupContextMenu(sids, event)
     }

src/components/settings/groups.tsx

@@ -214,12 +214,13 @@ class GroupsTab extends React.Component<GroupsTabProps, GroupsTabState> {
 
     handleInputChange = (event) => {
         const name: string = event.target.name
-        this.setState({[name]: event.target.value.trim()})
+        this.setState({[name]: event.target.value})
     }
 
     createGroup = (event: React.FormEvent) => {
         event.preventDefault()
-        if (this.state.newGroupName.length > 0) this.props.createGroup(this.state.newGroupName)
+        let trimmed = this.state.newGroupName.trim()
+        if (trimmed.length > 0) this.props.createGroup(trimmed)
     }
 
     addToGroup = () => {
@@ -239,7 +240,7 @@ class GroupsTab extends React.Component<GroupsTabProps, GroupsTabState> {
 
     updateGroupName = () => {
         let group = this.state.selectedGroup
-        group = { ...group, name: this.state.editGroupName }
+        group = { ...group, name: this.state.editGroupName.trim() }
         this.props.updateGroup(group)
     }
 
@@ -292,7 +293,7 @@ class GroupsTab extends React.Component<GroupsTabProps, GroupsTabState> {
                         </Stack.Item>
                         <Stack.Item>
                             <PrimaryButton 
-                                disabled={this.state.newGroupName.length == 0}
+                                disabled={this.state.newGroupName.trim().length == 0}
                                 type="sumbit"
                                 text={intl.get("create")} />
                         </Stack.Item>
@@ -325,7 +326,7 @@ class GroupsTab extends React.Component<GroupsTabProps, GroupsTabState> {
                             </Stack.Item>
                             <Stack.Item>
                                 <DefaultButton
-                                    disabled={this.state.editGroupName.length == 0}
+                                    disabled={this.state.editGroupName.trim().length == 0}
                                     onClick={this.updateGroupName}
                                     text={intl.get("groups.editName")} />
                             </Stack.Item>

src/components/settings/sources.tsx

@@ -101,12 +101,13 @@ class SourcesTab extends React.Component<SourcesTabProps, SourcesTabState> {
 
     handleInputChange = (event) => {
         const name: string = event.target.name
-        this.setState({[name]: event.target.value.trim()})
+        this.setState({[name]: event.target.value})
     }
 
     addSource = (event: React.FormEvent) => {
         event.preventDefault()
-        if (urlTest(this.state.newUrl)) this.props.addSource(this.state.newUrl)
+        let trimmed = this.state.newUrl.trim()
+        if (urlTest(trimmed)) this.props.addSource(trimmed)
     }
 
     onOpenTargetChange = (_, option: IChoiceGroupOption) => {
@@ -142,7 +143,7 @@ class SourcesTab extends React.Component<SourcesTabProps, SourcesTabState> {
                     </Stack.Item>
                     <Stack.Item>
                         <PrimaryButton 
-                            disabled={!urlTest(this.state.newUrl)}
+                            disabled={!urlTest(this.state.newUrl.trim())}
                             type="submit"
                             text={intl.get("add")} />
                     </Stack.Item>
@@ -171,8 +172,8 @@ class SourcesTab extends React.Component<SourcesTabProps, SourcesTabState> {
                     </Stack.Item>
                     <Stack.Item>
                         <DefaultButton
-                            disabled={this.state.newSourceName.length == 0}
-                            onClick={() => this.props.updateSourceName(this.state.selectedSource, this.state.newSourceName)}
+                            disabled={this.state.newSourceName.trim().length == 0}
+                            onClick={() => this.props.updateSourceName(this.state.selectedSource, this.state.newSourceName.trim())}
                             text={intl.get("sources.editName")} />
                     </Stack.Item>
                 </Stack>